HTML là gì? Lí do tại sao HTML quan trọng với website

bố cục của html

     Bắt đầu làm quen với lập trình web, thì nội dung đầu tiên phải học đó là HTML. HTML là một thành phần quan trọng, không thể thiếu của website. Vậy HTML là gì? Bố cục cơ bản của HTML  gồm những phần nào? Sau đây, xin gửi tới các bạn bài viết Giới thiệu tổng quan về HTML

1.HTML là gì?

  •  HTML là chữ viết tắt của cụm từ HyperText Markup Language, có nghĩa là “ngôn ngữ đánh dấu siêu văn bản”. Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và là chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet).
  •  HTML dùng để mô tả cấu trúc, các thuộc tính liên quan đến cách hiển thị của một đoạn văn bản nào đấy ra trình duyệt.
  •  Các phần tử HTML là các khối xây dựng nên các trang web.
  •  Các phần tử HTML được biểu diễn bằng thẻ.
  •  Trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để hiển thị nội dung của trang.
html là gì
html là gì

2. Bố cục cơ bản của HTML trên một trang web

Giới thiệu tổng quan về HTML Ở trên, chúng ta đã giải đáp được câu hỏi HTML là gì? Trong bài viết giới thiệu tổng quan này, để học HTML chúng ta cùng tiếp tục tìm hiểu về bố cục cơ bản của HTML trên một trang web như thế nào? Như đã nói, HTML dùng để mô tả cấu trúc của một trang web. Một trang web bao gồm rất nhiều thẻ HTML và mỗi thẻ có một nhiệm vụ nhất định. Thông thường, bố cục một trang web được chia làm 2 phần  chính nằm trong cặp thẻ <html> </html> :

  •  Phần Head
  •  Phần Body

Ví dụ đơn giản HTML:

<!DOCTYPE html>
   <html>
      <head>
         <title>Page Title</title>
      </head>
   <body>
         <h1>My First Heading</h1>
         <p>My first paragraph.</p>
   </body>
</html>

Trong đó:

  • <!DOCTYPE html>: Dùng để xác định tài liệu này thuộc dạng html cho trình duyệt biết.
  • <html> </html>: Là phần tử gốc, nằm ngoài cùng mỗi trang web, có nhiệm vụ bao toàn bộ nội dung của trang web
  • <head> </head>: Phần mở đầu. Có nhiệm vụ khai báo tất cả thông tin của trang web
  • <title> </title>: Thẻ tiêu đề: Dùng để khai báo tiêu đề cho mỗi trang web. Tiêu đề này sẽ hiển thị ở thanh tab trên cùng của trình duyệt.
  • <body> </body>: Phần nội dung. Chứa tất cả nội dung sẽ hiển thị ra trên trình duyệt
  • <h1> </h1> <p> </p> : Các thẻ định dạng văn bản.
bố cục của html
bố cục của html

3. Thẻ HTML

  • Là các phần tử được bao quanh bởi các cặp ngoặc nhọn: <tagname> Nội dung ở đây </tagname>
  • Các thẻ trong HTML thường theo cặp. Ví dụ như <p> </p>.
  • Đầu tiên là thẻ bắt đầu (opening tag). Thẻ tiếp theo là thẻ kết thúc (closing tag).
  • Thẻ kết thúc được viết giống như thẻ bắt đầu, chỉ khác thêm dấu gạch chéo ( / ) được chèn trước tên thẻ

4. Trình duyệt Web

  • Có nhiều trình duyệt web hiện đang được sử dụng phổ biến trên như Chrome, IE, Firefox, Safari,… Mục đích của chúng là đọc các tài liệu HTML và hiển thị nội dung của chúng.
  • Trình duyệt không hiển thị các thẻ HTML nhưng sử dụng nó để xác định cách hiển thị nội dung tài liệu.

5. Thẻ <!DOCTYPE>

  • Thẻ khai báo <!DOCTYPE> dùng để xác định định dạng của tài liệu. Và giúp các trình duyệt hiển thị các trang web một cách chính xác.
  • Thẻ <!DOCTYPE> chỉ xuất hiện một lần, ở đầu trang trước bất kỳ thẻ HTML nào.
  • Thẻ không phân biệt chữ hoa và chữ thường. Nên <!DOCTYPE> hay <!doctype> đều giống nhau.
  • Khai báo cho định dạng html là:  <!DOCTYPE html>

6. Công cụ code HTML

Hiện nay, có rất nhiều công cụ dùng để code HTML như Notepad, Notepad ++ , SublimeText, NetBeans,… Tuy nhiên trong loạt hướng dẫn này thì mình dùng Sublime Text 3 để code.

code html
code html

7. Các phiên bản HTML

 

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

 

8. Kết luận

Thông qua bài viết, Halee đã giới thiệu tổng quan về HTML, chúng ta phần nào đã trả lời được câu hỏi HTML là gì? Và bố cục cơ bản của HTML như thế nào? Ngoài ra, chúng ta còn hiểu sơ qua về các thẻ, công cụ thực hiện code và các phiên bản của HTML. Hẹn gặp lại các bạn trong các bài tiếp theo !!!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *