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”

Picture
*      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>
Picture