Chào mừng đến với HTML

 HTML viết tắt của chữ HyperText Markup Language(Ngôn ngữ đánh dấu siêu văn bản). Được gọi là ngôn ngữ nhưng nó không giống như các ngôn ngữ kịch bản sử dụng các kịch bản để thi hành các tác vụ, ngôn ngữ đánh dấu (Markup) lại sử dụng các THẺ để xác định nội dung (Chỉ nội dung chứ không thi hành tác vụ).

Đây là một ví dụ về thẻ HTML - thẻ <p> (paragraph) Trình bày đoạn vănnội dung: Hello world!.

<p>Hello world!</p>
  • <p> gọi là mở thẻ (p)
  • </p> gọi là đóng thẻ (p)
  • Nội dung kẹp giữa thẻ mỏ và thẻ đóng

Với nội dung đó, nếu trình duyệt nhận được nó sẽ phân tích và dựng nội dung trình bày thành trang HTML.

HTML

Các thành phần công nghệ có trong trang HTML: Việc sử dụng các mã HTML là kiến thức cơ bản cần thiết cho bất kỳ người phát triển website nào. Hầu hết họ phải phát triển kỹ năng làm Web của mình bắt đầu từ việc học để tạo trang nội dung Web từ HTML.  Với một trang Web hiện đại thường thấy có các thành phần sau:

  • HTML: Mô tả cấu trúc của trang (các nội dung xuất hiện trên trang theo một cấu trúc).
  • CSS: Trình bày cấu trúc (định dạng, format  ... như màu sắc, canh lề, font chữ ...). Học CSS
  • JavaScript: Các ứng xử của trang (tương tác với người dùng, thi hành các tác vụ khi trang web đã được tải về ...). Học Javascript

Thẻ <html> và cấu trúc trang HTML

Trải quả nhiều năm phát triển có nhiều phiên bản HTM được đưa ra tuy nhiên các vấn đề cơ bản của HTML vẫn không đổi. Cấu trúc một trang HTML được so sánh với cái bánh sandwich. Chiếc bánh có hai lát bánh lớn trên cùng và dưới cùng, giống như HTML có thẻ mở và thẻ đóng, kẹp giữa nó là các thứ khác.

Một văn bản (trang) HTML hoàn chỉnh có một thẻ gốc là <html>, mọi thẻ khác trình bày trong thẻ <html> này. Đồng thời thường có dòng đầu tiên cho biết phiên bản HTML, hiện giờ bản chỉ cần ấn định là HTML5 với dòng <!DOCTYPE html>

<!doctype html>
<html>
    <!-- CÁC THẺ KHÁC BÊN TRONG -->
</html>
sandwich - html
Ví dụ đây là một tài liệu HTML đủ cấu trúc
<!doctype html>
<html>
   <head>
      <meta  charset="utf-8" /> 
      <title>Trang HTML Đầu tiên</title>
   </head>
   <body>
      Chào tất cả mọi người, tôi là HTML 
   </body>
</html>
HTML

Các thẻ trong HTML thông thường sử dụng cần mở thẻ, sau đó là đến các loại nội dung, có thể chứa thẻ khác, rồi đóng thẻ. Như trên là các thẻ <html>, <title>, <head>, <body> ... . Tuy nhiên có một số thẻ lại không cần đóng như <br>, <img>, <hr> ... ở ví dụ trên đó là thẻ <meta>

<meta charset="utf-8" /> phải đặt trong thẻ <head> - nó cho biết văn bản HTML có encoding là UTF-8

Thẻ <head> trong HTML

Đây là thẻ theo sau ngay khi mở thẻ html, nghĩa là bạn tìm thấy nó ở phần đầu của văn bản HTML. Thẻ head chứa các thành phần  hầu như là không hiện thị tới người dùng nhưng là các điều khiển giúp trang web hoạt động theo một mục đích cụ thể. Ví dụ thiết lập encoding, nạp file CSS, thiết lập tiêu đề trang ...

<!doctype html>
<html>
   <head>
        <!-- Nội dung trong Head-->
   </head>
</html>

Một văn bản HTML chỉ có một thẻ <head>

Thẻ <meta> trong HTML

Thẻ này phải đặt trong thẻ <head>, nó không cần đóng thẻ. Thẻ này mô tả các dữ liệu, thông tin của trang, các dữ liệu thiết lập qua thuộc tính của nó. Ví dụ:

Thiết lập trang encoding là UTF-8

<meta charset="utf-8">

Thiết lập mô mô tả ngắn ngọn về trang (để search engine biết được tóm tắt nội dung trang)

<meta name="description" content="Nội dung ngắn mô tả về trang">

Có nhiều loại thuộc tính và trị thuộc tính áp dụng cho thẻ này, ta sẽ tìm hiểu phần sau.

Thẻ <title> trong HTML

Thẻ title nằm trong thẻ head. Nó diễn tả tiêu đề của trang web, tiêu đề này hiện thị trên cửa sổ trình duyệt (tiêu đề tab). Mặc dù không bắt buộc nhưng mọi trang web nên có thẻ này.

<!doctype html>
<html>
   <head>
      <meta  charset="utf-8" /> 
      <title>Tiêu đề của trang</title>
   </head>
   ...
</html>
HTML

Thẻ <body> trong HTML

Thẻ <body> theo sau thẻ <head>. Những thành phần hiện thị tới người dùng phải đưa vào thẻ này ví dụ như: các tiêu đề (heading), các khối văn bản (paragraph), các danh sách (list), trích dẫn (quote), hình ảnh (image), các liên kết (link) ... 

Tóm lại toàn bộ nội dung hiện thị trình bày ở trong thẻ <body> - một văn bản HTML chỉ có một thẻ body.

<!doctype html>
<html>
   <head>
      ... trình bày các thành phần không hiện thị ở đây
   </head>
   <body>
      ... trình bày các thành phần hiện thị ở đây
   </body>
</html>

Sử dụng Visual Studio Code soạn thảo HTML

Visual Studio Code là chương trình soạn thảo code mạnh, nó hỗ trợ tốt biên tập HTML. Hãy tải Visual Studio Code về và cài đặt.

Để hỗ trợ soạn thảo HTML bạn có thể cài đặt các Extension sau vào Visual Studio Code

Tạo trang HTML đầu tiên

Hãy dùng Visual Studio Code, mở thư mục nơi dự định lưu các file html. Tạo ra một file đặt tên là xinchao.htmt, biên tập nội dung của nó như sau:

<!doctype html>
<html>
   <head>
      <meta  charset="utf-8" /> 
      <title>Trang HTML</title>
   </head>
   <body>
      <p>Chào tất cả mọi người, tôi là <strong>HTML</strong></p>
   </body>
</html>

Để kiểm tra dùng trình duyệt mở nó ra, hoặc từ Visual Studio Code chọn View → Command Pallet .., (gõ HTML) chọn HTML: Open preview to the side

HTML
Đăng ký theo dõi ủng hộ kênh