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

Cách xem mã nguồn của tài liệu 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.

Hướng dẫn này sẽ giới thiệu cho bạn một trang HTML cơ bản và dạy bạn cách xem mã nguồn của trang HTML trong trình duyệt.

HTML được sử dụng để đánh dấu tài liệu bằng các hướng dẫn cho trình duyệt biết cách hiển thị và diễn giải nội dung của tài liệu. Ví dụ: HTML có thể cho trình duyệt biết nội dung văn bản nào nên được hiểu là một tiêu đề và nội dung văn bản nào nên được hiểu là các đoạn văn. HTML cũng được sử dụng để thêm hình ảnh và gán liên kết cho văn bản và hình ảnh. Các hướng dẫn này được truyền đạt thông qua các thẻ HTML, được viết như sau: <tagname> . Nhiều, mặc dù không phải tất cả các thẻ, sử dụng thẻ mở và thẻ đóng để bao quanh nội dung mà chúng được sử dụng để sửa đổi.

Để biết cách sử dụng các thẻ này, hãy kiểm tra một đoạn mã HTML. Đoạn mã HTML bên dưới cho thấy cách các thẻ HTML được sử dụng để cấu trúc văn bản và thêm liên kết và hình ảnh. Đừng lo lắng nếu bạn không hiểu các thẻ ngay lập tức - ta sẽ nghiên cứu chúng trong hướng dẫn tiếp theo.

<h1>Sammy's Sample HTML</h1>  <p>This code is an example of how HTML is written.</p>  <p>It uses HTML tags to structure the text.</p>  <p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p>  <p>And it also uses HTML to add an image:</p>  <img src="https://html.sammy-codes.com/images/small-profile.jpeg"/> 

Mã HTML này được hiển thị trong trình duyệt như sau:

 Trang HTML

Đến đây bạn đã hiểu về cách mã mẫu HTML được hiển thị trong trình duyệt. Tiếp theo, ta sẽ học cách xem mã nguồn của bất kỳ trang web nào bằng công cụ trình duyệt.

Xem mã nguồn của trang web

Gần như mọi trang web bạn xem đều sử dụng HTML để cấu trúc và hiển thị các trang HTML. Bạn có thể kiểm tra mã nguồn của bất kỳ trang web nào bằng trình duyệt web như Firefox hoặc Chrome. Trên Firefox, chuyển đến mục menu “Công cụ” ở menu trên cùng và nhấp vào “Nhà phát triển web / Nguồn trang” như sau:

Gif về cách kiểm tra mã nguồn bằng Firefox

Trên Firefox, bạn cũng có thể sử dụng phím tắt Command-U để xem mã nguồn của trang web.

Trên Chrome, quá trình này rất tương tự. Điều hướng đến mục menu trên cùng “Chế độ xem” và nhấp vào “Nhà phát triển / Nguồn xem”. Bạn cũng có thể sử dụng phím tắt Option-Command-U .

Hãy thử kiểm tra mã nguồn của trang web demo mà ta sẽ xây dựng trong loạt bài hướng dẫn này. Bạn sẽ nhận được một trang có nhiều thẻ HTML hơn ví dụ của ta ở trên. Đừng lo lắng nếu nó có vẻ quá tải. Đến cuối loạt bài hướng dẫn này, bạn sẽ hiểu rõ hơn về cách diễn giải mã nguồn HTML và cách sử dụng HTML để xây dựng và tùy chỉnh các trang web của bạn .

Lưu ý : Như đã đề cập ở trên, bạn có thể kiểm tra mã nguồn của bất kỳ trang web nào bằng các công cụ từ trình duyệt web Firefox hoặc Chrome. Hãy thử kiểm tra mã của một số trang web yêu thích của bạn để hiểu mã cơ bản cấu trúc tài liệu web. Mặc dù mã nguồn của các trang web này có thể chứa nhiều ngôn ngữ hơn HTML, việc học HTML trước tiên sẽ giúp chuẩn bị cho bạn học thêm các ngôn ngữ và khuôn khổ để tạo trang web sau này nếu bạn muốn.

Đến đây bạn đã có hiểu biết chung về định dạng của trang HTML và biết cách kiểm tra mã nguồn HTML bằng công cụ trình duyệt. Để hiểu rõ hơn về cách thức hoạt động của HTML, ta hãy kiểm tra các thành phần chính của nó. Trong hướng dẫn tiếp theo, ta sẽ tìm hiểu thêm về các phần tử HTML, các khối xây dựng được sử dụng để tạo trang HTML .


Tags:

Các tin trước

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 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 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