II.1.1 Thành phần HTMLMột văn bản HTML hay một trang Web thường có 2 thành phần chính: phần đầu và phần thân Phần đầu văn bản document head Cho biết tiêu đề của văn bản và thiết lập
Trang 2II.1.1 Thành phần HTML
Một văn bản HTML hay một trang Web thường có 2 thành phần chính: phần đầu và phần thân
Phần đầu văn bản (document head)
Cho biết tiêu đề của văn bản và thiết lập các quan hệ giữa văn bản với hệ thống thư mục
Mở đầu bằng thẻ <HEAD> và kết thúc bằng </HEAD>
Thông tin duy nhất trong phần đầu được trình duyệt Web hiển thị là tiêu đề của văn bản
II.1 Giới thiệu
Trang 3 Phần thân văn bản (document body)
Bắt đầu bởi thẻ <BODY> và kết thúc bởi </BODY>,
chứa nội dung chính của văn bản
Cung cấp thông tin cho người dùng kết hợp với
Văn bản, hình ảnh, âm thanh,
Biếu mẫu (form) để người dùng thực hiện điền thông tin như tìm kiếm, tra cứu,
Chứa các liên kết (hyperlink) với các văn bản khác
Thành phần của HTML được định nghĩa bởi các thẻ HTML
II.1.1 Thành phần HTML
Trang 4II.1.2 Thẻ HTML
HTML dùng các thẻ để đánh dấu, định dạng văn bản
Mỗi thẻ trong văn bản HTML được đặt trong ngoặc có dạng như sau
< tên thẻ >
Ví dụ <H1> <TITLE> <TABLE>
Một số thẻ còn có cả các tham số (thuộc tính) để bổ xung thêm chức năng thẻ đó
Ví dụ: <font size = 2>
Trang 5Trong HTML có hai loại thẻ đó là thẻ chứa và thể rỗng
Thẻ rỗng
Chỉ có một thành phần và không bao một đoạn tài liệu nào cả
Loại thẻ mô tả định dạng hoặc thẻ mô tả cấu trúc
Thông thường loại thẻ này chỉ có tác động tại vị trí xuất hiện thẻ đó
• Ví dụ: thẻ <BR> : ngắt dòng
Cũng có loại thẻ rỗng mà có thể tác động tới của đoạn văn bản đi sau nó cho tới khi gặp một thẻ cùng kiểu
• Ví dụ: thẻ <LI>: đề mục của danh sách
II.1.2 Thẻ HTML
Trang 6 Thẻ chứa:
Là các thẻ có hai thành phần: phần đầu và phần cuối thẻ
Một thẻ chứa có phần đầu và đuôi gần giống hệt nhau chỉ
khác ở chỗ phần đuôi thẻ có ký tự "/" trước tên thẻ
Ví dụ <H1> và </H1>; <B> và </B>
Hai thành phần của thẻ sẽ bao bọc một đoạn văn bản nào
đó và đặt kiểu định dạng cho đoạn văn bản đó
Ví dụ thẻ <I> dùng để đặt dạng chữ nghiêng, nếu trong
một văn bản HTML có đoạn:
Thẻ HTML không phân biệt chữ hoa và chữ thường.
II.1.2 Thẻ HTML
Trang 7II.1.3 Thuộc tính của thẻ HTML
Những thẻ HTML đều có những thuộc tính riêng
Những thuộc tính này cung cấp thông tin về thành phần
HTML của trang web
Thuộc tính luôn luôn đi kèm một cặp như name/value:
name="value" (tên="giá trị")
Thuộc tính luôn luôn được thêm vào thẻ mở đầu của thành phần HTML
<Tên thẻ tên thuộc tính = “giá trị”>
Ví dụ: <body bgcolor="red"> hoặc <body bgcolor="#E6E6E6">
Trang 8 Một thẻ có thể có nhiều thuộc tính:
<thẻ thuộc tính1=“giá trị1” thuộc tính2=“giá trị2”>
Ví dụ: <font size =2, color = “red”>
Thẻ đóng không có thuộc tính
Chú ý: Chúng ta đều biết thẻ html không phân biệt chữ hoa và
chữ thường nhưng ta nên viết theo 1 tiêu chuẩn thống nhất được đặt theo tiêu chuẩn W3C để sau này dễ làm viêc hơn
II.1.3 Thuộc tính của thẻ HTML
Trang 9Thẻ Mô tả
<html> Xác định một văn bản dạng HTML
<body> Xác định phần thân của tài liệu
<h1> đến <h6> Xác định header từ 1đến 6
<p> Xác định một đoạn văn
<br> Chèn một dòng trắng
<hr> Xác định một đường thẳng
<!– Nội dung > Xác định vùng chú thích
II.2 CÁC THẺ CƠ BẢN TRONG HTML
Trang 10II.2.1 Thẻ <HTML>
Dùng để xác định tài liệu HTML
Toàn bộ tài liệu HTML nằm trong thẻ này
Cú pháp:
<html>
Toàn bộ nội dung trang web
</html>
Trang 11II.2.2 Thẻ <body>
Dùng để xác định nội chính của của tài liệu
Chứa các thông tin về định dạng về văn bản cũng như
đồ họa, văn bản siêu liên kết, đặt lề trang
Cú pháp
<body>
Nội dung của tài liệu
</body>
Trang 12II.2.3 Thuộc tính tùy chọn
Thuộc tính Giá trị Mô tả
background file_name Một hình ảnh dùng làm hình nền bgcolor rgb(x,x,x)
#xxxxxx colorname
Màu nền của tài liệu
#xxxxxx colorname
Màu chữ trong tài liệu
Trang 13Ví dụ
<html>
<head>
<title>My first HTML page</title> </head>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
Trang 14II.2.3 Thẻ < Heading>
<h1>Đây là heading</h1>
<h2>Đây là heading</h2>
<h3>Đây là heading</h3>
<h4>Đây là heading</h4>
<h5>Đây là heading</h5>
<h6>Đây là heading</h6>
Headings được định nghĩa bằng các thẻ từ <h1> đến <h6>
<h1> : heading lớn nhất
<h6> : heading nhỏ nhất
Trang 15II.2.4 Thẻ ngắt dòng <br>
Được sử dụng khi bạn muốn kết thúc một dòng nhưng lại không muốn bắt đầu một đoạn văn khác
Thẻ <br> sẽ tạo ra một lần xuống dòng khi bạn viết nó
Thẻ <br> là một thẻ rỗng Nó không có thẻ đóng.
Thẻ <br> sẽ ngắt dòng ngay tại vị trí mà nó được đặt
Trang 16II.2.5 Thẻ ngắt đoạn <p>
Các đoạn được khai báo bởi thẻ <p>.
<p>This is a paragraph Tag</p>
<p>This is another paragraph Tag</p>
HTML sẽ tự động thêm một dòng trống vào trước và sau mỗi đoạn
Trang 17II.2.4 Thẻ <hr>
Định nghĩa và cách sử dụng
– Thẻ <hr> sẽ vẽ một thước ngang
Ví dụ
<html>
<body>
<p>The hr tag defines a horizontal rule:</p> <hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
Trang 18II.2.4 Thẻ <! >
Thẻ chú thích được sử dụng để thêm lời chú thích trong
mã nguồn của HTML
Một dòng chú thích sẽ được bỏ qua bởi trình duyệt
Sử dụng chú thích để giải thích về code, để sau này bạn
có phải quay lại chỉnh sửa gì thì cũng dễ nhớ hơn
<html>
<body>
<! This comment will not be displayed >
<p>This is a regular paragraph</p>
</body>
</html>
Ví dụ
Trang 19The end