Bài 1 “HTML” là gì và dùng để làm gì? – YAVIET

Bài 1 “HTML” là gì và dùng để làm gì?

HTML la gi

Chào mừng bạn đến với thế giới của HTMLHTML viết tắt của HyperText Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”, là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. Cùng với CSS và JavaScript, HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web. HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Và sau đây chúng ta đi tìm hiểu về vai trò và tầm quan trọng của HTML trong website như thế nào.

HTML la gi

1. HTML đóng vai trò gì trong website

Chúng ta hiểu đơn giản như thế này: Khi xây nhà, việc đầu tiên là chúng ta sẽ xây dựng mặt bằng, chia ngôi nhà của chúng ta thành các phần riêng biệt như cổng, sân, hè, phòng khách, phòng ngủ, phòng sinh hoạt, phòng bếp, nhà vệ sinh… Và HTML đóng vai trò tương tự như vậy, nó tạo nên cấu trúc bộ khung cho một website, web chúng ta muốn có bất cứ thứ gì thì củng dùng HTML để tạo ra cái đó, như chia cột, chia bố cuc, thành phần, nội dung,… Và hiện nay hầu hết các web đều sử dụng đến HTML, vì vậy HTML như là bắt buộc đối với một lập trình viên hay cho dù bạn chỉ làm web đơn giản thì củng nên học nó. Và sau khi xây nhà xong bạn muốn làm đẹp cho ngôi nhà của bạn bằng cách sơn tường, áp gạch, gọt vuông, vót nhọn, hay điêu khắc lên cho đẹp…, thì khi đó chính là sử dụng CSS để làm đẹp cho web mình. (xem thêm CSS là gì)

2. Bố cục của HTML là gì

Sau đây là cấu trúc bố cục của một website. Các thẻ HTML luôn có 2 thẻ bắt buộc là thẻ mở < > và thẻ đóng </ >.

Ví dụ: để có được phần head của web bạn phải mở thẻ head bằng thẻ <head> và kết thúc thẻ head bằng </head> vậy bất cứ nội dung gì bạn nhập nằm giữa 2 thẻ này đều là nội dung của phần head.

See the Pen HTML là gì và dùng để làm gì by huynhvantuan (@huynhvantuan) on CodePen.0

 

Chú ý: Ở  đây chúng ta không thấy phần nội dung trong thẻ <title> </title> của phần <head> </head> xuất hiện là bởi vì chỉ có nội dung trong thẻ <body> mới xuất hiện trên trình duyệt

Hiển thị HTML trên trình duyệt web

Mục đích của trình duyệt web (Chrome, IE, Firefox, Safari) là đọc tài liệu HTML và hiển thị chúng.

Tuy nhiên trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để xác định cách hiển thị tài liệu:

Để hiển thị trên trình duyệt web thì bạn copy hoặc viết lại đoạn “HTML” ở trên rồi dán vào Notepad trình soạn đơn giản nhất như hình sau. (bạn có thể dùng sublime text, visual studio code…)

viet html
Viết HTML

Sau đó lưu lại file này với đuôi là .html ví dụ dở đây mình lưu là yaviet.html

index html
Lưu file html

Sau khi lưu xong, bạn mở file này lên kết quả bạn sẽ nhận được hiển thị trên trình duyệt như thế này.

html la gi yaviet
HTML hiển thị trên trình duyệt

Ý nghĩa của các cặp thẻ HTML trên

Trong đó:

  • <!DOCTYPE html> là phần khai báo kiểu dữ liệu hiển thị là html để trình duyệt biết.
  • <html> và </html> là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại. Thẻ này là bát buộc.
  • <head> và </head> là phần khai báo thông tin của trang web.
  • <title> và </title> nằm bên trong thẻ <head> </head> và đây chính là khai báo tiêu đề cho trang web.
  • <body> và </body> nó chứa đoạn mã HTML và nằm trên nội dung trang web, đây là phần quan trọng nhất. 
  • Các thẻ còn lại nằm trong thẻ <body> chính là các thẻ định dạng dữ liệu.
  • <h1> Là định nghĩa cho thẻ tiêu đề lớn nhất, tương tự các thẻ <h2> <h3> <h4> <h5>
  •  <p> Định nghĩa một đoạn văn bản.

3. Các thành phần chính của hầu hết tất cả website đều có.

Thành phần chính:

  • Header (cố định)
  • Footer (cố định)
  • Menu (cố định)
  • Sidebar (cố định)

4. Sử dụng phần mềm gì để code HTML

Có rất nhiều phần mềm để code HTMl như: notepad, noted++, netbeans, visual studio code,… và mình hay dùng nhất là sublime text,

5. Kết luận:

Qua bài viết ngắn này củng phần nào giải thích bạn hiểu về cấu trúc của HTML củng như cấu trúc của một website là gì, và tầm quan trọng của HTML trong một website là gì. Phần sau mình sẽ nói rõ về các thẻ và chức năng của từng thẻ HTML để chúng ta dễ dàng sử dụng. Để tìm hiểu thêm về HTML bạn nên biết đến trang W3C.

Trả lời