Thứ tư, 16/09/2020 | 00:00 GMT+7

Cách sử dụng và hiểu các phần tử HTML


Một phần của loạt bài: Cách xây dựng trang web bằng HTML

Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.

Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.

Trang HTML bao gồm các phần tử HTML. Hầu hết các phần tử HTML đều chứa nội dung (chẳng hạn như văn bản hoặc hình ảnh) cùng với các thẻ HTML cho trình duyệt biết cách diễn giải nội dung (chẳng hạn như tiêu đề hoặc đoạn văn bản). Các phần tử HTML được dùng để thêm cấu trúc, ngữ nghĩa và định dạng vào các phần khác nhau của trang HTML . Phần tử HTML thường được tạo — nhưng không phải lúc nào — bằng cách mở và đóng các thẻ HTML, các thẻ này bao quanh một phần nội dung.

Dưới đây là hình minh họa gắn nhãn cho từng phần của phần tử HTML:

Sơ đồ của một phần tử HTML

Hãy thử khám phá HTML trong thực tế. Hãy thử dán dòng sau vào file “index.html” mà bạn đã tạo khi Cài đặt Dự án HTML của bạn :

<strong>My strong text</strong> 

Trong ví dụ này, <strong> thêm định dạng mạnh bằng cách bao quanh văn bản bằng một cặp <strong> mở và đóng. Lưu ý các thẻ đóng luôn được biểu thị bằng dấu gạch chéo ( / ).

Lưu ý : Bạn có thể lưu ý <strong> hoạt động rất giống với việc thêm kiểu in đậm vào văn bản. Bạn có thể đạt được hiệu ứng tạo kiểu tương tự bằng cách sử dụng <b> in đậm, tuy nhiên, thẻ <strong> thêm kiểu in đậm ý nghĩa ngữ nghĩa cho biết văn bản có tầm quan trọng cao. Nếu bạn đang sử dụng kiểu in đậm bạn muốn ghi nhận tầm quan trọng của văn bản, hãy đảm bảo sử dụng <strong> , thẻ này sẽ cho phép trình đọc màn hình thông báo tầm quan trọng của chúng cho user .

Tương tự, thẻ nhấn mạnh <em> thêm kiểu chữ nghiêng ý nghĩa ngữ nghĩa cho biết văn bản được nhấn mạnh. Thẻ in nghiêng <i> chỉ thêm kiểu in nghiêng vào văn bản. Nếu bạn đang sử dụng kiểu in nghiêng bạn muốn nhấn mạnh văn bản, hãy đảm bảo sử dụng <em> , thẻ này sẽ cho phép trình đọc màn hình thông báo sự nhấn mạnh của họ cho user .

Để kiểm tra kết quả của mã HTML này, ta có thể tải file “index.html” trong trình duyệt của bạn . Mặc dù file của bạn không trực tuyến, trình duyệt vẫn có thể diễn giải file HTML như thể nó là một tài liệu trang web. Đảm bảo lưu file “index.html” của bạn trước khi tải nó trong trình duyệt vì chỉ các bản cập nhật đã lưu mới được hiển thị.

Cách xem file HTML offline trong trình duyệt của bạn

Bạn có thể xem file HTML offline trong trình duyệt theo một số cách:

  • Kéo và thả file vào trình duyệt của bạn
  • CTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) để mở file bằng trình duyệt
  • Sao chép đường dẫn đầy đủ của file của bạn và dán file vào thanh trình duyệt của bạn

Nếu bạn đang sử dụng editor Visual Studio Code, bạn có thể sao chép đường dẫn file bằng CTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) vào file “index.html” trong console bên trái và chọn “Sao chép Con đường." Sau đó dán đường dẫn vào trình duyệt web như được minh họa trong gif bên dưới:

Gif về cách sao chép đường dẫn file  và tải nó trong trình duyệt của bạn

Lưu ý : Để tải file trong trình duyệt, điều quan trọng là bạn phải sao chép đường dẫn tuyệt đối , (đề cập đến vị trí file liên quan đến folder root ), thay vì đường dẫn tương đối , (đề cập đến file liên quan đến hoạt động hiện tại danh mục). Trong Visual Studio Code, "Copy Path" đề cập đến đường dẫn file đầy đủ. Tuy nhiên, hãy lưu ý ta sẽ sử dụng đường dẫn tương đối của các file trong các phần khác của hướng dẫn này.

Sau khi tải file trong trình duyệt của bạn, bạn sẽ nhận được một trang có chứa thông tin sau:

Văn bản in đậm của tôi

Hãy thử thử nghiệm với các phần tử HTML khác. Trên dòng tiếp theo của file “practice.html”, hãy thử thêm phần tử <em> để thêm phần nhấn mạnh.

<strong>My bold text</strong> <em>My emphasized text</em> 

Lưu file và reload file trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Văn bản in đậm của tôi Văn bản được nhấn mạnh của tôi

Cụm từ đầu tiên nên được tạo kiểu với định dạng mạnh mẽ và cụm từ thứ hai nên được tạo kiểu với sự nhấn mạnh. Tuy nhiên, bạn có thể ngạc nhiên bởi vị trí cạnh nhau của hai cụm từ. Nếu bạn đã thêm <em>My emphasized text</em> vào dòng thứ hai của editor , bạn có thể đã mong đợi “Văn bản được nhấn mạnh của tôi” hiển thị trên dòng bên dưới “ Văn bản được nhấn mạnh của tôi ” trong trình duyệt web. Tuy nhiên, một số phần tử HTML nhất định, chẳng hạn như <strong><em> , yêu cầu bạn chỉ định ngắt dòng với các phần tử HTML bổ sung (nếu bạn muốn ngắt dòng). Ta sẽ giải thích lý do tại sao trong hướng dẫn tiếp theo.


Tags:

Các tin liên quan

Cách thêm chân trang vào trang web của bạn bằng HTML
2020-09-16
Cách thiết lập dự án HTML của bạn
2020-09-16
Cách xem mã nguồn của tài liệu HTML
2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách sử dụng và hiểu các phần tử HTML
2020-09-16
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
Cách tạo phần nội dung trang chủ của bạn bằng HTML
2020-09-15
Sử dụng ExpressJS để phân phối tệp HTML
2020-09-15
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14