(Bài tiếp) Thẻ <p> và <br>

Giới thiệu về HTML

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

Trang web tĩnh: Các tài liệu HTML (trang HTML) có thể là các file với phần mở rộng (.html) được lưu trữ trên hệ thống file của máy chủ web (webserver), từ đó trình duyệt truy cập đọc được và hiện thị.


Trang web động: Các trang HTML mà trình duyệt lấy về từ webserver được phát sinh bởi một ứng dụng chạy trên server (ứng dụng phát triển bằng các ngôn ngữ lập trình như PHP, C# ...).

Siêu văn bản (HyperText): Ám chỉ sự liên kết giữa các trang, một trang HTML có liên kết tham chiếu đến một trang khác trên cùng một Website hay giữa các website.

HTML sử dụng cách đánh dấu (markup) để chú thích cho các thành phần (phần tử HTML) như văn bản, hình ảnh ... các phần tử HTML tạo thành trang tài liệu hiện thị được trong các trình duyệt. Có rất nhiều phần tử HTML như <p>, <a>, <img>, <title>, <body> ...

Một phần tử HTML bắt đầu bằng mở thẻ (viết tên thẻ như p, a, img ... giữa <>), đến nội dung phần tử và kết thúc bằng đóng thẻ (viết tên thẻ giữa </>

Ví dụ phần tử HTML, thẻ HTML

Đây là một ví dụ về thẻ HTML tạo ra một phần tử HTML là một đoạn văn bản.

Trong đoạn HTML trên thì:

  • <p> gọi là mở thẻ p (paragraph) - thẻ này tạo ra phần tử HTML là một đoạn văn bản
  • </p> gọi là đóng thẻ p
  • Nội dung kẹp giữa thẻ mở và thẻ đóng

Với phần tử <p> như vậy, trình duyệt phân tích và hiện thị kết quả như cột phải.

Có hai loại thẻ phân loại theo hình thức sử dụng. Thẻ HTML chứa nội dung (có chứa nội dung, giữa mở thẻ và đóng thẻ, như thẻ <p>, <title>, <h1> ...) và thẻ HTML rỗng (chỉ mở thẻ, không đóng thẻ, không chứa nội dung như thẻ <br>, <img> ...)

Các thành phần công nghệ có trong trang HTML

HTML là kiến thức cơ bản bắt buộc cho bất kỳ ai muốn phát triển website. Hầu hết 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 HTML 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 Ứ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ư thẻ html có thẻ mở và thẻ đóng, kẹp giữa nó là các thẻ khác.

sandwich - html

Một tài liệu (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.
Trước thẻ <html> có đoạn text xác định nó là tài liệu HTML và phiên bản HTML. Hiện giờ bản chỉ cần ấn định là HTML5 với đoạn text <!DOCTYPE html>

Dưới đây là cấu trúc tối thiểu của trang HTML
<!doctype html>
<html>
    <!-- CÁC THẺ KHÁC BÊN TRONG -->
</html>
Cấu trúc cơ bản cho mọi trang HTML
<!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ành phần trong cấu trúc HTML cơ bản

  • <!doctype html> mọi trang HTML (từ HTML5) đều bắt đầu đoạn text này
  • <html> thẻ gốc của tài liệu HTML, mọi thẻ khác nằm trong thẻ này, thông thường nó chứa trực tiếp 2 thẻ là <head> và <body>
  • <head> phần tử này chứa các thẻ thiết lập trang (không tạo ra nội dung hiện thị trên trình duyệt), như thiết lập các từ khóa, mô tả trang sẽ xuất hiện trên Search Engine, thiết lập bảng mã ký tự, nạp CSS ...
  • <body> phần tử này chứa tất cả nội dung hiện thị của trang như văn bản, hình ảnh, video ...

Thẻ <head> trong HTML

Đây là thẻ cần mở ngay sau mở thẻ <html>, thẻ <head> chứa các thành phần (phần tử HTML) hầu như là không hiện thị tới người dùng, chúng là các điều khiển, thiết lập giúp trang html được hiện thị theo một mục đích cụ thể. Ví dụ thiết lập encoding (bảng mã kỹ tự), nạp file CSS, thiết lập các keywords ...

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

Một văn bản HTML chỉ dùng một thẻ <head>

Dưới đây là một số thẻ tạo phần tử trong thẻ <head>


Thẻ <title> trong HTML

Thẻ <title> nằm trong thẻ <head>, nó thiết lập tiêu đề trang HTML, 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>
      <title>Tiêu đề của trang</title>
   </head>
   ...
</html>
HTML

Thẻ <meta> trong HTML

Một trang HTML có thể đưa vào các thông tin mô tả cho trang (siêu dữ liệu), các thông tin này gọi là metadata.

Thẻ <meta> đặt trong thẻ <head> để thêm metadata, nó là thẻ tạo ra phần tử rỗng (chỉ mở thẻ - thiết lập dữ liệu qua các thuộc tính). Có rất nhiều loại dữ liệu metadata có thể thêm vào, như một số trường hợp sau:

Thiết lập trang encoding là UTF-8 (thiết lập bảng mã cho các ký tự): dùng thẻ meta và thuộc tính charset của nó:

<meta charset="utf-8">

Thiết lập mô mô tả ngắn ngọn về trang (search engine đọc nội dung này)

<meta name="description" content="Mô tả về trang">

Thiết lập Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport là phần không gian cửa sổ trình duyệt hiện thị trang, để trang HTML đáp ứng tốt cho nhiều loại màn hình (desktop, điện thoại ...) thì cần thiết lập viewport như trên. Sử dụng cú pháp trên, thì viewport rộng bằng chiều rộng màn hình thiết bị (trình duyệt), khi trang nạp thiết lập độ thu phóng là 1.

Còn nhiều loại thuộc tính và trị thuộc tính áp dụng cho thẻ <meta> này, sẽ đề cập khi gặp nó ở các phần sau.

Thẻ <body> trong HTML

Thẻ <body> nằm trong thẻ <html>, những thành phần hiện thị tới người dùng (đoạn văn, hình ảnh, liên kết ...) phải nằm trong thẻ này. Một trang HTML chỉ có 1 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

Có thể thêm vào dự án file .vscode/extensions.json để VSC cài đặt tự động ngay các Extension

{
    "recommendations": [
      //HTML
      "ecmel.vscode-html-css",
      "abusaidm.html-snippets",
      "zignd.html-css-class-completion",
      "mkaufman.HTMLHint",
    ]
  }

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.html, 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

Các file HTML
Tài liệu HTML có thể lưu vào các file với phần mở rộng .html hoặc .html, từ đó dễ dàng mở file HTML bằng các trình duyệt trên máy.

(Bài tiếp) Thẻ <p> và <br>