Sau khi học bài 1 mở đầu về HTML với website giá rẻ chúng ta sẽ đến với bài 2 - các thẻ HTML thông dụng. Bài học này chia là 2 phần, phần 1 sẽ tìm hiểu về các thẻ sau: Thẻ chú thích, các thẻ định dạng văn bản .
Trình duyệt sẽ bỏ qua không đọc phần nội dung này.
Sử dụng thẻ chú thích để code của bạn dễ hiểu và sau này có phát sinh bạn có thể tìm kiếm, chỉnh sủa một cách dễ dàng.
- Cú pháp: <head> [các thẻ chứa]</head>
Các thẻ nằm trong thẻ head:
- Cung cấp tiêu đề cho một trang khi nó được đề xuất vào mục yêu thích.
- Hiển thị tiêu đề của trang web trong kết quả của công cụ tìm kiếm.
Cú pháp: <title>Tiêu đề trang</title>
Cú pháp để liên kết file CSS: <link rel="stylesheet" type="text/css" href="tenfile.css">
hoặc <link rel="stylesheet" type="text/css" href="../tenfile.css"> => ... đường đẫn tên file css nếu file css không nằm cùng thư mục với file html.
Cú pháp: <style>
ten_the1 {thuoc_tinh:gia_tri};
the_the2 {thuoc_tinh:gia_tr};
</style>
Có thể có 1 hoặc nhiều thẻ được định nghĩa nằm trong thẻ style.
Cú pháp: <meta name="author" content="Ten_Tac_Gia">
Ví dụ: <meta name="author" content="Website giá rẻ"> =>định nghĩa bản quyền tên là Website giá rẻ
- Dùng để định nghĩa các từ khóa cho các công cụ tìm kiếm.
Cú pháp: <meta name="keyword" content="tu_khoa">
Ví dụ: <meta name="keyword" content="thiet ke giao dien web"> => định nghĩa từ khóa thiet ke giao dien web cho các công cụ tìm kiếm.
- Dùng để định nghĩa thời gian làm mới trang web của bạn
Cú pháp: <meta http-equiv="refresh" content="thoigian">
Ví dụ: <meta http-equiv="refresh" content="20"> => định nghĩa thời gia tải lại trang web của bạn là 20s.
- Dùng để định nghĩa kiểu hiển thị của văn bản:
Cú pháp: <meta charset="UTF-8">
Nội dung của bạn sẽ được trình duyệt hiển thị dưới dạng UTF-8 ( tiếng việt).
Các thuộc tính của thẻ body:
- bgcolor: xác định màu nền của trang web, giá trị có thể là tên màu theo tiếng anh hoặc sử dụng bảng mã màu hệ 16.
Ví dụ: <body bgcolor="red></body>
- background: xách định ảnh nền của trang web.
- width: độ rộng tính bằng px hoặc %
- height: độ cao tính bằng px hoặc %
Ví dụ: <body background="anhnen.jpg"></body>
Các thẻ chứa trong thẻ body:
Thẻ này giúp trình duyệt xác định đoạn văn bản trong HTML, thẻ P có thể chứa các thẻ khác như img, a, link....
Với một đoạn văn trong html chúng ta nên có thói quen đặt trong thẻ p.
Các thuộc tính của thẻ p:
align: căn lề cho đoạn văn bản, nhận các giá trị left ( mặc định), right, center.
Ví dụ:
1. Thẻ chú thích trong HTML.
Thẻ chú thích là thẻ có nội dung không hiển thị trên trình duyệt khi đọc file HTML.Trình duyệt sẽ bỏ qua không đọc phần nội dung này.
Sử dụng thẻ chú thích để code của bạn dễ hiểu và sau này có phát sinh bạn có thể tìm kiếm, chỉnh sủa một cách dễ dàng.
Cú pháp: <!-- Nội dung chú thích -->
Ví dụ: Lời chú thích trong HTML
2. Thẻ xuống dòng trong HTML.
- Dùng để xuống dòng trong html.
- Đây là một thẻ đơn ( thẻ không có cặp thẻ đóng mở)
- Cú pháp: <br> hoặc <br />
Ví dụ:
Khi chưa dùng thẻ br
Trình duyệt hiển thị
Ví dụ:
Khi dùng thẻ br
Trình duyệt hiển thị
3. Thẻ HEAD và các thẻ nằm trong thẻ HEAD:
Trong bài mở đầu về HTML đã có nhắc đến thẻ head, bạn nào chưa rõ có thể xem lại.- Cú pháp: <head> [các thẻ chứa]</head>
Các thẻ nằm trong thẻ head:
a. Thẻ title:
- Là thẻ định nghĩa tiêu đề cho văn bản.- Cung cấp tiêu đề cho một trang khi nó được đề xuất vào mục yêu thích.
- Hiển thị tiêu đề của trang web trong kết quả của công cụ tìm kiếm.
Cú pháp: <title>Tiêu đề trang</title>
b. Thẻ link:
Là thẻ định nghĩa mối quan hệ giữa trang html và trang khác bên ngoài. Thường dùng để liên kết file html với file CSS ( sẽ học sau này).Cú pháp để liên kết file CSS: <link rel="stylesheet" type="text/css" href="tenfile.css">
hoặc <link rel="stylesheet" type="text/css" href="../tenfile.css"> => ... đường đẫn tên file css nếu file css không nằm cùng thư mục với file html.
Ví dụ: Thẻ link trong html
c. Thẻ style:
Là thẻ định nghĩa kiểu cho html, trong thẻ này có thể định kiểu cho các thẻ khác để hiển thị lên trình duyệt.Cú pháp: <style>
ten_the1 {thuoc_tinh:gia_tri};
the_the2 {thuoc_tinh:gia_tr};
</style>
Có thể có 1 hoặc nhiều thẻ được định nghĩa nằm trong thẻ style.
Ví dụ: Thẻ style định nghĩa kiểu cho thẻ h1 và thẻ p
Giải thích: Nội dung trong thẻ h1 có màu đỏ, nội dung trong thẻ p có màu xanh.
Hiển thị trên trình duyệt của ví dụ trên
d. Thẻ meta:
- Dùng để định nghĩa tác giả (bản quyền) của trang web.Cú pháp: <meta name="author" content="Ten_Tac_Gia">
Ví dụ: <meta name="author" content="Website giá rẻ"> =>định nghĩa bản quyền tên là Website giá rẻ
- Dùng để định nghĩa các từ khóa cho các công cụ tìm kiếm.
Cú pháp: <meta name="keyword" content="tu_khoa">
Ví dụ: <meta name="keyword" content="thiet ke giao dien web"> => định nghĩa từ khóa thiet ke giao dien web cho các công cụ tìm kiếm.
- Dùng để định nghĩa thời gian làm mới trang web của bạn
Cú pháp: <meta http-equiv="refresh" content="thoigian">
Ví dụ: <meta http-equiv="refresh" content="20"> => định nghĩa thời gia tải lại trang web của bạn là 20s.
- Dùng để định nghĩa kiểu hiển thị của văn bản:
Cú pháp: <meta charset="UTF-8">
Nội dung của bạn sẽ được trình duyệt hiển thị dưới dạng UTF-8 ( tiếng việt).
e. Thẻ script
Định nghĩa kịch bản phía máy khách (sẽ học sau)4. Thẻ BODY và các thẻ nằm trong BODY.
Trong bài mở đầu về HTML đã có nhắc đến thẻ body, bạn nào chưa rõ có thể xem lại.Các thuộc tính của thẻ body:
- bgcolor: xác định màu nền của trang web, giá trị có thể là tên màu theo tiếng anh hoặc sử dụng bảng mã màu hệ 16.
Ví dụ: <body bgcolor="red></body>
- background: xách định ảnh nền của trang web.
- width: độ rộng tính bằng px hoặc %
- height: độ cao tính bằng px hoặc %
Ví dụ: <body background="anhnen.jpg"></body>
Các thẻ chứa trong thẻ body:
a. Thẻ p:
Thẻ P là viết tắt của "paragraphs" - nghĩa là đoạn văn.Thẻ này giúp trình duyệt xác định đoạn văn bản trong HTML, thẻ P có thể chứa các thẻ khác như img, a, link....
Với một đoạn văn trong html chúng ta nên có thói quen đặt trong thẻ p.
Các thuộc tính của thẻ p:
align: căn lề cho đoạn văn bản, nhận các giá trị left ( mặc định), right, center.
Ví dụ:
Sử dụng thẻ p trong html
Trình duyệt hiển thị
Bài tập thực hành:
Tạo một trang web html :
- Có độ rộng 800px
- Có độ cao 1000px
- Màu nền : vàng.
- Ảnh nền tùy ý.
- Chứa 3 đoạn văn bản nội dung tùy ý, đoạn thứ nhất căn giữa, đoạn thứ 2 căn phải, đoạn thứ 3 căn trái
Đến đây có nhiều bạn sẽ thắc mắc: làm sao để cho chữ in đậm, in nghiêng theo ý mình, là sao để nổi bật tiêu đề của đoạn văn.... Chúng ta sẽ đến với phần 2 của bài các thẻ thông dụng trong HTML trong loạt bài Học HTML với website giá rẻ.
0 nhận xét:
Đăng nhận xét