GIỚI THIỆU NGÔN NGỮ HTML

Thiết kế Web
Trường Cao đẳng Kinh tế - Công nghệ TP.HCM
Khoa Công nghệ thông tin
Trình bày: Hà Đồng Hưng
Thiết kế Web
2
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Thiết kế Web
3
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Xác nhận tài liệu HTML
Thiết kế Web
4
Thẻ HTML
Thẻ mở là
Thẻ đóng là
Cặp thẻ này được xử dụng để xác nhận một tài liệu là tài liệu HTML (HyperText Markup Language).
Nội dung đặt trong cặp thẻ này sẽ sử dụng các thẻ HTML để trình bày.
Thiết kế Web
5
Thẻ
Cú pháp

… Toàn bộ tài liệu đặt ở đây

Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tập tin văn bản bình thường.
Thiết kế Web
6
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Xác định phần đầu
Thiết kế Web
7
Thẻ
Thẻ mở
Thẻ đóng
Thẻ HEAD xác định phần mở đầu cho tài liệu
Thẻ HEAD nằm trong cặp thẻ
Cú pháp:

… Phần mở đầu (HEADER) của tài liệu đặt ở đây

Thiết kế Web
8
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Xác định tiêu đề
Thiết kế Web
9
Thẻ
Cặp thẻ này chỉ có thể được sử dụng trong phần mở đầu của tài liệu
Nó phải nằm trong phạm vi giới hạn của thẻ
Thiết kế Web
10
Thẻ
Nội dung đặt giữa cặp thẻ này sẽ được hiển thị trên thanh tiêu đề (title bar) của trình duyệt web
Thiết kế Web
11
Thẻ


… nội dung chính


Thiết kế Web
16
Ví dụ
Thiết kế Web
17
Bài tập
Viết tập tin html để có kết quả như trên ?
Chữ màu xanh da trời
Nền trang màu vàng

Thiết kế Web
18
Đáp án
Thiết kế Web
19
Các thẻ định dạng khối

,

,…,

Thiết kế Web
20
Các thẻ định dạng khối

,
,…, 




Đoạn
Thiết kế Web
21
Thẻ 

Thẻ mở 

Thẻ đóng 

Cú pháp
 Nội dung đoạn văn bản

Được dùng để định dạng đánh dấu một đoạn văn bản
Thiết kế Web
22
Thẻ 

Ví dụ
Thiết kế Web
23
Các thẻ định dạng khối

,
,…, 




Đề mục
Thiết kế Web
24
Các thẻ đề mục
HTML hỗ trợ 6 đề mục:

Đề mục là chỉ dẫn định dạng về mặt logic, mỗi trình duyêt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp.
H1 > H2 > H3 > H4 > H5 > H6

Thiết kế Web
25
Các thẻ đề mục
Thiết kế Web
26
Các thẻ định dạng khối

,
,…, 




Xuống dòng
Thiết kế Web
27
Thẻ 

Thẻ này không có thẻ đóng tương ứng
Có tác dụng chuyển sang dòng mới
Nội dung văn bản trong tài liệu HTML sẽ được trình duyệt hiển thị liên tục
Để xuống dòng, sử dụng thẻ 

Các 
khoảng trắng liền nhau,
 Các ký tự Tab,
 ký tự xuống dòng
 đều được coi như 
một khoảng trắng
Thiết kế Web
28
Thẻ 

Do dùng các khoảng trắng, tab và enter
?
Thiết kế Web
29
Thẻ 

Dùng thẻ 
 để xuống dòng
Thiết kế Web
30
Các thẻ định dạng khối

,
,…, 




theo định dạng trước
Thiết kế Web
31
Thẻ 

Thẻ mở 

Thẻ đóng 

Được dùng để giới hạn đoạn văn bản được định dạng sẵn.
Văn bản đặt giữa hai thẻ này sẽ được thể hiện giống như khi chúng được đánh vào
Thiết kế Web
32
Thẻ 

Cú pháp:
 Văn bản đã được định dạng

Dấu xuống dòng trong đoạn văn bản sẽ có ý nghĩa chuyển sang dòng mới
Thiết kế Web
33
Thẻ 

Ví dụ:
Thiết kế Web
34
CÁC THẺ ĐỊNH DẠNG DANH SÁCH
Danh sách không theo thứ tự
(Unordered List - UL)
Danh sách theo thứ tự
(Ordered List - OL)
Thành phần (mục) trong danh sách
(List Item - LI)
Thiết kế Web
35
Danh sách không sắp xếp
Cú pháp:

		
 Mục thứ nhất
		
 Mục thứ hai

Mang tính liệt kê các danh mục
Thiết kế Web
36
Ví dụ UL:
Thuộc tính TYPE=“circle/disc/square”  của UL qui định ký hiệu đầu mục
Thiết kế Web
37
Danh sách sắp xếp
Cú pháp:

		
 Mục thứ nhất
		
 Mục thứ hai

Mang tính đánh số các danh mục
Thiết kế Web
38
Ví dụ OL:
Thiết kế Web
39
Ví dụ OL:
Thiết kế Web
40
CÁC THẺ ĐỊNH DẠNG KÝ TỰ
Các thẻ định dạng in ký tự
Căn lề văn bản
Các ký tự đặc biệt
Màu sắc
Kiểu chữ
Siêu liên kết
Đường kẻ ngang
Thiết kế Web
41
Các thẻ định dạng in ký tự
Thiết kế Web
42
Các thẻ định dạng in ký tự
Ví dụ:
Thiết kế Web
43
Các thẻ định dạng in ký tự
Bài tập:
Thiết kế Web
44
Căn lề văn bản trong trang Web
Trong trình bày, luôn phải chú ý đến việc căn lề cho các văn bản để trang Web có bố cục đẹp. Một số thẻ như 
, 
, … đều có tham số ALIGN cho phép căn lề trong phạm vi giới hạn thẻ đó
Ngoài ra còn có thể sử dụng thẻ  để căn giữa một khối văn bản
Cú pháp:  văn bản sẽ được căn giữa
Thiết kế Web
45
Các ký tự đặc biệt
 Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem như một thực thể duy nhất.
 Ký tự ; được sử dụng để tách các ký tự trong một từ

Thiết kế Web
46
Các ký tự đặc biệt
Ví dụ:
Thiết kế Web
47
Màu sắc trong thiết kế Web
Một màu được tổng hợp từ 3 thành phần màu chính:
Đỏ (Red)
Xanh lá cây (Green)
Xanh nước biển (Blue)
Trong HTML, một giá trị màu là một số nguyên dạng hexa (hệ cơ số 16) có dạng:
			#RRGGBB
RR: là giá trị màu đỏ
GG: là giá trị màu xanh lá cây
BB: là giá trị màu xanh nước biển
VD: #A52A2A
Thiết kế Web
48
Màu sắc trong thiết kế Web
Với mỗi giá trị RGB là một màu, ta có rất nhiều màu
Có 16 màu có tên tiếng Anh xác định
Màu sắc được xác định thông qua giá trị RGB hay thông qua tên tiếng Anh.
Thiết kế Web
49
Màu sắc trong thiết kế Web
Thiết kế Web
50
Chọn kiểu chữ cho văn bản
Cú pháp:
	FACE = font-name
	COLOR = color
	SIZE = n
>
…

Thiết kế Web
51
Màu sắc trong thiết kế Web
Ví dụ:

	abc

Thiết kế Web
52
Văn bản siêu liên kết
Văn bản siêu liên kết hay siêu văn bản là một từ, một cụm từ hay một câu trên trang Web được dùng để liên kết đến một trang web khác
Siêu văn bản là môi trường trong đó chứa các liên kết (link) của các thông tin
Thiết kế Web
53
Văn bản siêu liên kết
Cú pháp:

	HREF	= url
	NAME	= name
	TITLE	= title
	TARGET	=_blank/ _self
>
… siêu văn bản

Thiết kế Web
54
Văn bản siêu liên kết
Ví dụ:
Liên kết đến báo tuổi trẻ
 Báo tuổi trẻ 
Liên kết gửi thư
 Gửi thư 
Thiết kế Web
55
Vẽ đường thẳng nằm ngang
	ALIGN	= LEFT/CENTER/RIGHT
	COLOR	= color
	NOSHADE
	SIZE	= n
	WIDTH	= width
>
Thiết kế Web
56
CHÈN ÂM THANH, HÌNH ẢNH
Chèn âm thanh
Chèn một hình ảnh, đoạn video
Chèn Windows Media Player
Chèn Flash
Chèn Applet
Thiết kế Web
57
Chèn âm thanh
Cú pháp:
				SRC	= url
			LOOP	= n
>
Thẻ này không có thẻ đóng. Để lặp vô hạn LOOP=-1 hay LOOP=INFINITE
Thẻ BGSOUND phải được đặt trong phần HEAD
Thiết kế Web
58
Chèn hình ảnh, đoạn video
	ALIGN	= TOP/MIDDLE/BOTTOM
	ALT		= text
	BORDER	= n
	SRC		= url
	WIDTH	= width
	HEIGHT	= height
	HSPACE	= hspace
	VSPACE	= vspace
	TITLE	= title
	DYNSRC	= url
	START	= FILEOPEN/MOUSEOVER
	LOOP	= n
>
Thiết kế Web
59
Chèn Windows Media Player
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95“
id="MediaPlayer1“
width=“rộng” height=“cao”>


Thiết kế Web
60
Chèn Flash


Thiết kế Web
61
Chèn Applet



Thiết kế Web
62
CÁC THẺ ĐỊNH DẠNG BẢNG
Các thẻ tạo bảng
…: định nghĩa một bảng
…: định nghĩa một dòng
…: định nghĩa một ô
Thiết kế Web
63
Cú pháp tạo bảng



…	

…
nội dung ô

Thiết kế Web
64
Các thuộc tính
ALIGN	= LEFT/CENTER/RIGHT
Căn lề theo chiều ngang
VALIGN 	= TOP/MIDDLE/BOTTOM
Căn lề theo chiều đứng
BORDER 	= n
Kích thước đường biên
BACKGROUND = url 
Ảnh nền
BGCOLOR = color
Màu nền
CELLSPACING = n
Khoảng cách giữa các ô trong bảng
CELLPADDING = n
Khoảng cách giữa biên ô đến nội dung ô
COLSPAN = n
Ô sẽ trải dài trên bao nhiêu cột
ROWSPAN = n
Ô sẽ trải dài trên bao nhiêu dòng
WIDTH = n
Độ rộng
HEIGHT = n
Độ cao
Thiết kế Web
65
Ví dụ:











	
		
A
		
B
		
C
	
	
		
D
		
E
		
F
	

Thiết kế Web
66
Ví dụ:










	
		
A
		
B
	
	
		
C
		
D
		
E
	

Thiết kế Web
67
Ví dụ:










	
		
A
		
B
		
C
	
	
		
D
		
E
	

Thiết kế Web
68
Ví dụ:









	
		
A
		
B
	
	
		
C
		
D
	

Thiết kế Web
69
Bài tập
Border =“1”
Cellspacing=“1”
Cellpadding=“1”
Width=“400”
Height=“400”
Thiết kế Web
70
Đáp án