Giới thiệu về HTML

1/ HTML là gì? 

Để hiểu về thế giới lập trình web thì điều căn bản bạn cần phải học chính là HTML. Vậy là HTML là cái gì? Nó có ăn được không? (joke) 😀

HTML là ngôn ngữ đánh dấu (markup language) chứ không phải là ngôn ngữ lập trình (nhiều người hay bị nhầm cái này) dùng để tạo ra những trang web

– HTML được viết tắt từ chữ Hyper Text Markup Language (dịch ra tiếng Việt là ngôn ngữ đánh dấu siêu văn bản)
– HTML có thể mô tả cấu trúc của 1 trang web thông qua việc đánh dấu (markup) bằng thẻ (tag)
– HTML có nhiều phần tử (elements) là những block trên trang web
– HTML được trình bày bởi những thẻ (tag)
– Các trình duyệt web (Chrome, Firefox, Safari …v.v…) không hiển thị cho chúng ta thấy những thẻ (tag) HTML 1 cách mặc định mà sử dụng chúng để tạo ra nội dung cho trang web

2/ Ví dụ HTML document đơn giản

Chúng ta sẽ xem 1 đoạn HTML đơn giản dưới đây

Tôi sẽ giải thích sơ qua 1 số thẻ (tag) sử dụng trong đoạn HTML bên trên

<!DOCTYPE html> : thẻ này sẽ định nghĩa HTML document này đang sử dụng kiểu HTML5
<html> : thẻ này là thẻ gốc ban đầu mà mọi HTML document đều phải có, được hiểu như là 1 thẻ bắt đầu và kết thúc 1 HTML document và nó bao trùm những thẻ con bên trong
<head> : như đúng cái tên của nó, thẻ này đại diện cho phần đầu của 1 HTML document (những phần mà thẻ head chứa đa phần sẽ không thấy được khi lướt web bằng trình duyệt, ngoại trừ title)
<title> : cũng như cái tên của nó, thẻ này sẽ chưa tiêu đề cho HTML document
<body> : thẻ này sẽ chứa phần thân của HTML document (những phần chứa trong thẻ body đa phần sẽ thấy được khi chúng ta duyệt web bằng trình duyệt)
<h1> : thẻ này chứa tiêu đề với kích thước khá to khi hiển thị lên trên website, khác với thẻ <title> là tiêu đề cho toàn bộ trang web thì thẻ <h1> có thể là tiêu đề cho nhiều đoạn văn bản trong HTML document và có thể sử dụng được nhiều lần, còn thẻ <title> chỉ được sử dụng 1 lần cho 1 HTML document
<p> : thẻ này sẽ chứa 1 đoạn văn bản (paragraph) bên trong nó

3/ Thẻ HTML

Thẻ HTML thường sẽ có cấu trúc như sau

<tenthe>Noi dung ben trong the …</tenthe>

Trong đó <tenthe> là tên thẻ HTML, ví dụ như <p>, <a>, <html> …. Còn nội dung ở giữa <tenthe> và </tenthe> có thể là text, hay là những thẻ HTML con bên trong.

– Các thẻ HTML thông thường bao giờ cũng có thẻ mở (hay còn gọi là thẻ bắt đầu) và thẻ đóng (hay còn gọi là thẻ kết thúc). Ví dụ như <p> và </p>, <html> và </html> ….v.v… Và lưu ý rằng không nhất thiết phải có đầy đủ cả thẻ mở và thẻ đóng nhé, bởi vì có 1 số thẻ đóng vai trò luôn cả thẻ mở và thẻ đóng như sau <hr/> <br/> ….

4/ Trình duyệt web 

Trình duyệt web (web browser) là phần mềm trên máy tính mà các bạn đang sử dụng để xem những trang web hàng ngày, có thể kể đến ở đây như Chrome (trình duyệt web đang được nhiều người xài nhất trên Windows), Firefox, Safari (trình duyệt web trên Iphone, Ipad và MacOS), Opera … Trình duyệt web có nhiệm vụ đọc các đoạn mã HTML và hiển thị ra cho chúng ta xem trên màn hình. Dưới đây là kết quả khi tôi xem đoạn HTML mà tôi đã viết ở bên trên bằng trình duyệt web Chrome

5/ Cấu trúc của 1 trang HTML

Để các bạn mới làm quen HTML dễ hiểu, dưới đây là cấu trúc của 1 trang HTML được cụ thể hóa bằng hình ảnh.