Bài 2: Xây dựng trang web với HTML
Giới thiệu các thẻ (tag) cơ bản trong thiết kết website như: 1.3. Thẻ head,title, body,meta, link,script,...
I. CÁC THẺ (TAG) CƠ BẢN
1.1. Thẻ <!DOCTYPE>
!Doctype chỉ cho trình duyệt web biết được phiên bản ngôn ngữ đánh dấu (markup language) nào được sử dụng trong trang web. Khai báo !Doctype ngay tại dòng đầu tiên của văn bản html, ngay trước tag html
Cú pháp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ý nghĩa: DTD này chứa các thành phần và các thuộc tính HTML, bao gồm các thành phần trình bày (như font), không được chứa các frameset, đánh dấu này phải được viết theo hình thức XML
1.2. Thẻ <html>
- Thẻ <html> báo cho trình duyệt biết rằng đây là trang HTML.
- Thẻ <html> là thẻ nằm ngoài cùng của tất cả các thẻ khác, ngoại trừ thẻ <!DOCTYPE>
- Thẻ <html> là đại diện đầu tiên của trang HTML.
Thẻ <html> nằm ngay bên dưới thẻ <!DOCTYPE>
Cú pháp:
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
Chú ý: tất cả các thẻ còn lại đều nằm trong thẻ <html>
1.3. Thẻ <head>
Thẻ <head> dùng để khai báo các thông tin cho trang HTML, những thông tin đó bao gồm: <title>, <meta />, <link /> và <script>
Cú pháp:
<head>
...
</head>
1.4. Thẻ <title>
Thẻ <title> định nghĩa tiêu đề của trang HTML. Thẻ <title> nằm trong thẻ <head>
- Thể hiện tiêu đề nằm trên thanh công cụ của trình duyệt.
- Thể hiện tiêu đề khi thêm vào mục favorites của trình suyệt
- Hiển thị tiêu đề trên các trang của các bộ máy tìm kiến
Cú pháp:
<title> ... </title>
Ví dụ:
<head>
<title>Tự Học Lập Trình PHP</title>
</head>
1.5. Thẻ <meta />
Thẻ meta cung cấp siêu dữ liệu về các thông tin của trang HTML. Các thông tin sẽ không được hiển thị trên trình duyệt. Thẻ <meta /> nằm trong thẻ <head>
- Thẻ <meta /> thường được sử dụng để mô tả trang (description), từ khóa (keywords), tác giả của văn bản (author), sửa đổi lần cuối (last modified), và thông tin dữ liệu khác.
- Các siêu dữ liệu có thể được sử dụng bởi các trình duyệt (làm thế nào để hiển thị nội dung hoặc tải lại trang), công cụ tìm kiếm (từ khóa), hoặc các dịch vụ web khác.
- Thẻ <meta /> thường truyền dưới dạng các cặp
namevàcontent.
Cú pháp:
<meta name="ten" content="noi dung" />
Ví dụ:
<head>
<meta name="keywords" content="Lap trinh PHP, Thiet Ke website, PHP can ban, php nang cao" />
</head>
1.6. Thẻ <link />
- Thẻ <link /> xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài.
- Thẻ <link /> được dùng phổ biến nhất là link tới tài liệu css.
- Thẻ <link /> nằm bên trong thẻ <head>
Cú pháp:
<link thuoc_tinh1 thuoc_tinh2 ... />
Ví dụ:
<head>
<link rel="stylesheet" type="text/css" href="file_css.css">
</head>
1.7. Thẻ <script>
- Thẻ <script> dùng để xác định một kịch bản phía máy khách, chẳng hạn như javascript.
- Thành phần của thẻ <script> chứa các lệnh kịch bản hoặc liên kết đến một file kịch bản thông qua thuộc tính
src. - Thẻ <script> đòi hỏi thuộc tính type, xác định kiểu MIME của <script>.
- Thẻ <script> sử dụng chung cho javascript: thao tác hình ảnh, kiểm tra form, thay đổi tự động nội dung.
- Ta có thể sử dụng thẻ <noscript> để hiển thị nội dung mà trình duyệt bị vô hiệu hóa hoặc không hỗ trợ <script>.
Cú pháp:
<script>
...
</script>
Ví dụ 1:
<head>
<script>
alert ("Hello JavaScript!");
</script>
</head>
Ví dụ 2:
<head>
<script src="http://laptrinhphp.info/templates/js/jquery.min.js"></script>
</head>
Chú ý: Hai thẻ <link /> và <script> cũng có thể nằm ngoài thẻ
headnhư nằm trong thẻbody
1.8. Thẻ body
Đây là phần quan trọng nhất. Thẻ <body> định nghĩa phần thân của trang HTML.
Thẻ <body> nằm sau thẻ <head>
Cú pháp:
<body>
...
</body>
Ví dụ:
<body>
Chương trình đầu tiên.
</body>
II. ĐỊNH DẠNG TRANG HTML
Cấu trúc của một trang HTML cơ bản như sau:
<!DOCTYPE>
<html>
<head>
<title>Tiêu Đề Trang</title>
</head>
<body>
Nội dung trang.
</body>
</html>
III. ĐỊNH DẠNG VĂN BẢN
IV. HÌNH ẢNH, DANH SÁCH, LIÊN KẾT
V. BẢNG BIỂU
- Một số hàm sắp xếp dành cho mảng trong php - 10/03/2016
- Bài 3: Xây dựng trang với web HTML 5 - 28/01/2016
- Bài 9: Cấu trúc lặp - 28/01/2016
- Bài 6: Tổng quan lập trình PHP - 28/01/2016
- Bài 1 - Tổng quan về lập trình Web - 19/01/2016
- Bài 7: Hướng dẫn cài đặt wampserver trên localhost - 05/01/2016
- Bài 4: Sử dụng CSS trong trang web - 04/10/2015
Các Tin Khác:
Mới Đăng
- Cám ơn Người hỗ trợ - 27/10/2022
- Hướng dẫn download và cài đặt Bootstrap 5.2.x - 23/10/2022
- Bộ sách Hạt Giống Tâm Hồn - 23/10/2022
- Bộ sách học Starter 1,2,3 Student's Book, CD, Đáp án - 08/10/2022
- Giải vô địch bóng đá U-19 Đông Nam Á (AFF U-19 Championship) - 03/07/2022