Tìm hiểu về HTML - Phần 1
1. Giới thiệu
* HTML=HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản – Ngôn ngữ để viết các trang web.
* Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994.
2. Đặc điểm
* HTML sử dụng các thẻ (tags) để định dạng dữ liệu
* HTML không phân biệt chữ hoa, chữ thường
* Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định.
3. Thẻ (tag)
* Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau.
* Có 2 dạng: thẻ đóng và thẻ mở
* Cách viết thẻ:
– Thẻ mở: <tên_thẻ>
Ví dụ: <u>, <p>, <img>…
– Thẻ đóng tương ứng: </tên_thẻ>
Ví dụ: </u>, </p>
Chú ý: luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng. Ví dụ: <img> không có thẻ đóng
4. Thuộc tính (property) của thẻ
* Mỗi thuộc tính có tên thuộc tính (tên_TT)
* Viết thẻ có thuộc tính:
<tên_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”…>
* Chú ý:
– Có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú pháp
– Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ giống nhau ở các thẻ, thuộc tính cơ bản.
– Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường (</tên_thẻ>)
5. Trang web đầu tiên
* Trang HTML có phần mở rộng (đuôi) là .HTM hoặc .HTML
* Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn bản thuần” nào (Notepad, EditPlus, Turbo Pascal,…)
* Có nhiều trình soạn thảo HTML cho phép NSD soạn thảo trực quan, kết quả sinh ra HTML tương ứng như:
– Microsoft FrontPage
– Macromedia Dreamweaver
– …
* Soạn thảo:
– Mở trình soạn thảo văn bản thuần (VD Notepad) gõ ND dưới
Ghi lại với tên “CHAO.HTM”
* Thử nghiệm:
– Mở trình duyệt web (IE)
– Vào File/Open, chọn file CHAO.HTM vừa ghi
– Nhấn OK → Có kết quả như hình bên
* Thay đổi:
– Quay lại Notepad, sửa lại nội dung trang web rồi ghi lại
– Chuyển sang IE, nhấn nút Refresh (F5) → thấy kết quả mới
Ghi chú: Các thẻ được nêu tiếp theo mặc định đặt ở trong phần <body>…</body>
– Mở trình duyệt web (IE)
– Vào File/Open, chọn file CHAO.HTM vừa ghi
– Nhấn OK → Có kết quả như hình bên
* Thay đổi:
– Quay lại Notepad, sửa lại nội dung trang web rồi ghi lại
– Chuyển sang IE, nhấn nút Refresh (F5) → thấy kết quả mới
Ghi chú: Các thẻ được nêu tiếp theo mặc định đặt ở trong phần <body>…</body>