Một trang web đẹp và chất lượng mà chúng ta nhìn thấy trên internet, được cấu thành từ rất nhiều yếu tố quan trọng phía sau nó. Để viết nên một trang web, người lập trình sẽ dùng rất nhiều những ngôn ngữ lập trình khác nhau để có làm ra một trang web hoàn chỉnh.
Có rất nhiều những ngôn ngữ lập trình để người coder có thể viết nên một trang web như , ngôn ngữ lập trình CSS, JavaScript, HTML..
Trong số các ngôn ngữ để tạo trang web thật vững chắc thì phải nói đến HTML. Vậy HTML là gì? Vì sao nó lại vô cùng quan trọng khi thiết kế và duy trì các trang web phát triển bền vững?
Chúng ta hãy cùng nhau đi vào tìm hiểu nhé!
HTML là gì?
HTML là từ viết tắt của Hypertext Markup Language. Đây là một ngôn ngữ lập trình dùng để xây dựng bố cục, cấu trúc và các thành phần có trong Website như . phân chia các đoạn văn, heading, links, blockquotes trong website.
Mỗi website hiện nay có rất nhiều trang con, mỗi trang sẽ có một HTML riêng. Và HTML chỉ là một phần tạo nên trang web. Vai trò chính của HTML chính là tạo bố cục và định dạng trang web. HTML kết hợp với CSS và JavaScript mới giúp nền tảng thế giới mạng thật sự là vững chắc.
Xem thêm: Css là gì ?
Các phần tử cơ bản của HTML
Sử dụng HTML, một tệp văn bản được đánh dấu thêm với văn bản bổ sung mô tả cách tài liệu sẽ được hiển thị. Để giữ cho phần đánh dấu tách biệt với nội dung thực của tệp HTML, có một cú pháp HTML đặc biệt, phân biệt được sử dụng. Các thành phần đặc biệt này được gọi là thẻ HTML . Các thẻ có thể chứa các cặp tên-giá trị được gọi là thuộc tính và một phần nội dung nằm trong thẻ được gọi là một phần tử HTML.
Các phần tử HTML luôn có thẻ mở, nội dung ở giữa và thẻ đóng. Các thuộc tính có thể cung cấp thông tin bổ sung về phần tử và được bao gồm trong thẻ mở. Các phần tử có thể được mô tả theo một trong hai cách:
Các phần tử cấp khối bắt đầu trên một dòng mới trong tài liệu và chiếm không gian riêng của chúng. Ví dụ về các yếu tố này bao gồm tiêu đề và thẻ đoạn.
Các phần tử nội tuyến không bắt đầu trên một dòng mới trong tài liệu và chỉ chiếm dung lượng cần thiết. Các phần tử này thường định dạng nội dung của các phần tử cấp khối. Ví dụ về phần tử nội tuyến bao gồm siêu liên kết và thẻ định dạng văn bản.
Ưu và nhược điểm của HTML là gì
Ưu Điểm của HTML
- Được áp dụng rộng rãi với một lượng lớn tài nguyên có sẵn.
- Nguyên bản là chạy trên mọi trình duyệt.
- Tương đối dễ học.
- Có mã nguồn sạch và nhất quán.
- Là mã nguồn mở và sử dụng miễn phí.
- Có thể được tích hợp với các ngôn ngữ lập trình phụ trợ khác như PHP .
Nhược điểm của HTML
- Mỗi trang HTML chỉ được tạo riêng biệt.
- Khó kiểm soát cách đọc và hiển thị file HTML của trình duyệt.
- Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML.
- Không có chức năng rất động và chủ yếu được sử dụng cho các trang web tĩnh.
- Tất cả các thành phần phải được tạo riêng biệt ngay cả khi chúng sử dụng các phần tử tương tự.
- Hành vi của trình duyệt có thể không thể đoán trước được. Ví dụ: các trình duyệt cũ hơn có thể không tương thích với các tính năng mới hơn.
Cách thức hoạt động của HTML
HTML sẽ hiển thị nội dung dưới dạng Visual để người dùng đọc và hiểu được. Và đuôi thể hiện ở dạng file .html hoặc htm. Tùy theo từng trình duyệt Google Chrome, Firefox sẽ biến đổi HTML thành dạng nội dung visual trên Internet để người dùng có thể xem được nội dung.
Thông thường, một website có rất nhiều HTML document như trang chủ, trang blog, trang liên hệ. Mỗi trang con sẽ có một tệp HTML riêng, bao gồm 1 bộ tag. Chúng ta có thể hiểu cấu trúc này như cây thư mục với các heading, section, paragraph cùng rất nhiều nội dung bên trong. Tất cả các HTML đều có một tag mở và một tag đóng với cấu trúc <tag></tag>.
Thẻ HTML là gì?
Ngoài việc tự hỏi HTML là gì, chúng ta còn phải hỏi phần tử HTML là gì . Mỗi phần tử bắt đầu và trong hầu hết các trường hợp kết thúc bằng một thẻ. Hơn nữa, một thẻ cho trình duyệt biết cách định dạng và hiển thị nội dung. Thẻ mở bao gồm tên trong dấu ngoặc nhọn (<>) và thẻ đóng chỉ giống như trước tên chúng ta có dấu gạch chéo (/). Một số thẻ không có thẻ đóng. Ví dụ: hai trong số các thẻ thường được sử dụng nhất, là thẻ hình ảnh ( <img> ) và thẻ ngắt ( <br> ).
Các thẻ HTML
<a>cho liên kết
<b>để tạo văn bản in đậm
<strong>cho văn bản in đậm với các dấu nhấn mạnh
<body>phần HTML chính
<br>nghỉ giải lao
<div>nó là một bộ phận hoặc một phần của tài liệu HTML
<h1>… cho tiêu đề
<i>để tạo một văn bản in nghiêng
<img>cho hình ảnh trong tài liệu
<ol>là một danh sách có thứ tự, <ul> cho một danh sách không có thứ tự
<li>là một mục danh sách trong dấu đầu dòng (danh sách có thứ tự)
<p>cho đoạn văn
<span> để tạo kiểu cho một phần của văn bản
Bố cục của HTML
Để hiểu bố cục HTML trông như thế nào thì chúng ta hãy xem ví dụ như sau:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>First paragraph</p>
</body>
</html>
Chú Thích
<!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị
<html> và </html>: cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ đóng gói tất cả nội dung của trang HTML
<head> và </head>: khai báo các thông tin meta của trang web như: tiêu đề trang, charset
<title> và </title>: cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu đề của trang
<body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang
<h1></h1>, <h2></h2>: định dạng dữ liệu dạng heading. Thông thường có 6 cấp độ heading trong HTML, trải dài từ <h1> đến <h6>. Trong đó, <h1> là cấp độ heading cao nhất và <h6> là cấp độ heading thấp nhất.
<p> và </p>: cặp thẻ chứa các đoạn văn bản của trang web
Kết
Vậy là mình đã sơ lược qua về ngôn ngữ lập trình HTML, một thành phần vô cùng quan trọng trong thiết kế website. Ở bài tiếp theo mình sẽ giới thiệu thêm về những ngôn ngữ lập trình khác cho bạn đọc. Từ đó bạn sẽ hiểu thêm về những yếu tố quan trọng cấu thành nên một website mà bạn hiện thấy trên internet.
