1. Định Nghĩa HTML
HTML là viết tắt của cụm từ Hyper Text Markup Language, nó có nghĩa là "ngôn ngữ đánh dấu siêu văn bản". Và đây là một ngôn ngữ đánh dấu chứ không phải một ngôn ngữ lập trình như C, C++ hay Php, có nghĩa là HTML được viết rất đơn giãn bằng các cập thẻ ( tag ) và không có hàm ( function ) hay biến (var ) gì cả vì vậy nó rất dể học và mình nghĩa các bạn chỉ cần học kĩ một tí là có thể sử dụng HTML một cách dể dàng.
2. HTML dùng để làm gì ?
Nhiệm vụ của HTML là cho trình duyệt đọc nội dung của trang HTML của chúng ta. Và chỉ đọc nội dung nằm bên trong các cặp thẻ thôi nhé.
Ở đây mình có ví dụ:
<h1> Bài học đầu tiên HTML là gì ? </h1>
Thì cặp thẻ sẽ là <h1></h1>, và nó là một trong các thẻ HTML. Trình duyệt web khi hiển thị thì chỉ hiển thị nội dung bên trong cặp thẻ nghĩa là bạn chỉ thấy trên trình duyệt dòng chữ “Bài học đầu tiên HTML là gì ?”. Muốn thấy các thẻ thì chỉ có cách bạn view source. Và nhiệm vụ của HTML chỉ dừng lại ở đó. Nó chỉ xây dựng nội dung. Và tùy vào từng thành phần cụ thể thì chúng ta sẽ dùng cặp tag nào.
P/s: nhiệm vụ định dạng trang web sẽ thuộc về CSS.
3. Tag HTML là gì ?
Khi một web browser hiển thị một trang chẳng hạn trang web bạn đang xem, Web Browser sẽ đọc từ một File văn bản đơn giản và tìm kiếm những đoạn mã đặt biệt hay những tag được kí hiệu "<" và ">".
Cấu Trúc chung cho Tag:
<tag name>nội dung cần hiển thị</tag name>
Lấy ví dụ bên dưới:
Cập thẻ <h2></h2> chính là tag.
Trong HTML Có 2 Loại tag chính là:
- Có thẻ mở kèm thẻ đóng dạng <tag name></tag name>
- Chỉ có thẻ mở: <tag name> hay <tag name />
Trong HTML Có 2 Loại tag chính là:
- Có thẻ mở kèm thẻ đóng dạng <tag name></tag name>
- Chỉ có thẻ mở: <tag name> hay <tag name />
P/S: phần HTML là mã HTML, phần Result là hiển thị code.
4. Cấu Trúc Cơ bản của một Trang HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Tiêu đề Website của bạn</title>
</head>
<body>
</body>
</html>
- Các thẻ Thông Dụng:
Ø Thẻ <html>…</html>: mở đầu 1 tài liệu HTML lúc nào cũng bắt đầu bằng thẻ html, thẻ html có tác dụng thông báo cho trình duyệt biết đây là một tài liệu html.
Ø Thẻ <head>…</head>: tất cả thông tin trong thẻ này điều không xuất hiện trên trang web nên nó được dùng để chứa các thẻ <meta…>, thẻ <link..> đến các file css, javascript..v..v..
Ø Thẻ <title>…</title>: cho phép bạn trình bài chuỗi trên thanh tự đề của trình duyệt web mỗi khi trang web được duyệt trên trình duyệt web.
Ví Dụ:<title> welcome to html</title>
Ø Thẻ <body>…</body>: nơi người đọc thấy được thông tin trên trang web.
Ví Dụ:<body> Phan noi dung cua website o day </body> 
5. Cấu Trúc Cơ bản của một trang web:
Mỗi trang web có những cấu trúc tùy biến khác nhau nhưng chúng điều có những phần được quy định. Để hiểu rỏ hơn cấu trúc của một trang mình xin giới thiệu về một mẫu trang đơn giãn sử dụng 2 cột:
- Phần đầu (header) đây là phần thường dùng để chứa logo website, banner, câu slogan, đoạn flast hoặc các khung form tìm kiếm, đăng kí đăng nhập, .....
-Phần liên kết toàn cục (global navigation) phần này thường được dùng để chứa các liên kết đến những trang được xem là quan trọng (thường dùng để đặt menu ) trong phần này còn có thể chứa thêm các liên kết con (sub navigation).
- Phần thân của trang (page body ) phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).
- Phần nội dung chính (content ): phần này chứa nội dung chính của trang web muốn hiển thị cho người dùng xem ( ví dụ: bài viết các bạn đang xem nằm ở phần content )
- Phần nội dung phụ (sidebar): phần này chứa các liên kết khác của trang web, các liên kết phụ của từng trang (local navigation), chứa liên kết quảng cáo..v.v.. (ví dụ : phần Bài viết mới, Bài viết xem nhiều của blog này nằm ở phần sidebar).
- Phần cuối trang web (footer): phần này thường chứa phần liên hệ như tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,....
5. Cấu Trúc Cơ bản của một trang web:
Mỗi trang web có những cấu trúc tùy biến khác nhau nhưng chúng điều có những phần được quy định. Để hiểu rỏ hơn cấu trúc của một trang mình xin giới thiệu về một mẫu trang đơn giãn sử dụng 2 cột:
- Phần đầu (header) đây là phần thường dùng để chứa logo website, banner, câu slogan, đoạn flast hoặc các khung form tìm kiếm, đăng kí đăng nhập, .....
-Phần liên kết toàn cục (global navigation) phần này thường được dùng để chứa các liên kết đến những trang được xem là quan trọng (thường dùng để đặt menu ) trong phần này còn có thể chứa thêm các liên kết con (sub navigation).
- Phần thân của trang (page body ) phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).
- Phần nội dung chính (content ): phần này chứa nội dung chính của trang web muốn hiển thị cho người dùng xem ( ví dụ: bài viết các bạn đang xem nằm ở phần content )
- Phần nội dung phụ (sidebar): phần này chứa các liên kết khác của trang web, các liên kết phụ của từng trang (local navigation), chứa liên kết quảng cáo..v.v.. (ví dụ : phần Bài viết mới, Bài viết xem nhiều của blog này nằm ở phần sidebar).
- Phần cuối trang web (footer): phần này thường chứa phần liên hệ như tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,....
![[CSS] Bài 6: Font chữ for Website](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1mabCTAW9X9rlmf7IsHq25iNkAcolpw9JYEx__LnUE7lY3OWc1Q8zs1wJLtwdm81QSX7DS3HAU63AExkdSyhvT8cFUPhz-jXMUg9r5LbvmcyqxxC0TzRelCvK3iaI33eVnZnadZZVIpq/s72-c/css-tricks.jpg)
![[HTML] Bài 5: Nhóm Các Thẻ Block - Thẻ Phân Chia Khu Vực](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCHF2OoN5Y2fyv7JEEVRLflj1n5-9Re55ZboWR1VRMUBPlDQiPBjBlwo4G6VkmZb8GaqQUp1q6Y2UVf3XK12595BJbVgXC7uP_5wfq9HvPWpdtpeoc_2ofvbvYtIay1BuJMFwgEUphviP/s72-c/title.PNG)
![[HTML] Bài 9: Các Thẻ Trình Bày Kí Tự và Các kí tự đặt biệt](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjNTOzgDUKZ0l_kjQKDziM-Rll20E61ZWLXZIMKU7hnFle1aCV94XkwwWEc2LQ1eHx06P52ZK5GU7UXBAgO8QEEoO4oRVtfdCs8gIaKD7E3fblAkXmkThGFv3lD6LsHdi8NGyFDP0jjnT8/s72-c/on+page+optimizaton+4.gif)
![[HTML] Bài 10: Tạo Bảng Trong HTML](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIpMnEAB3lnl6_nsspj_3ImPXoWk4dRJaRaIXgIXcqezhO32yJBMrR62cVminFOG2-E6OI1X0KqbFINLnOwW7Ii4jcuPT4lz5sefATlIQ_jrOc8SIMHFNNta_e_nfUdBimMvv9_vbfPUuJ/s72-c/sample1-tabledom.jpg)
![[HTML] Bài 4.2: Các Thuộc Tính Của Thẻ Trình Bày](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lK6j-0_mxwNM2CUuaKwTl8PYvOQAea2-68RCCQ6Q02ZyQpCyc8phzi-JWcvs_RfzkUs4AiP8Kphu_YMWnXoWM_Y5cW_ep7gL57WMeWhRGLE5LEkpYSQnUeR10A8EFdabkxHpKq4Txsxn/s72-c/550.jpg)
![[CSS] Bài 5 : Thuộc Tính Background](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfiViccb4B5YUSFaCYs4yxscZWfrW0DPWgbeEy-BTXA7qOP8-L9hPWqqPXuK_yq_8Th2Qfv3rScbpLOfoVy8MslLRDpFcb_tZGYYySG-is_7lt57HkvBGAzLEWHmwcgZ1115XwS793sRsW/s72-c/background.jpg)
![[HTML] Bài 12: Các Thẻ Đặt Biệt](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvZmoUXzmWNfogNTSvpUntZVHdydEYp8tUCC6I1RubGIi8RPmvAAUqz6MQ3MZCUGpXqdlz_CK0MxPG8ZeZDZacl_reaNTHq95hz78VqjpD2D932G-QYREnr4YjrhyphenhyphenBJHUJdQasz4cIy47/s72-c/images.jpg)
0 nhận xét: