HTML là gì? Tìm hiểu về ngôn ngữ HTML

Posted on April 25, 2022May 17, 2022 by admin

5/5 - (1 vote)

Đến với thiết kế web thì thứ đầu tiên bạn gặp phải đó là ngôn ngữ HTML. Vậy HTML là gì, hãy cùng tìm hiểu về ngôn ngữ HTML.

Nội dung bài viết

HTML là gì?

HTML là viết tắc của cụm từ HyperText Markup Language, nó là một ngôn ngữ giúp bạn định hình cấu trúc của trang web.

Khi xây dựng một căn nhà người ta cần xây bộ khung cho nó gồm móng, kèo cột, mái…trước, rồi sau đó mới đến các chi tiết. Thì khi xây dựng một website bạn cũng cần tạo ra một bộ khung cho nó bằng HTML. HTML bao gồm hàng loạt các phần tử khác nhau bao bọc các nội dung và giúp chúng xuất hiện theo một cách nhất định.

Ví dụ bạn có đoạn văn bản sau:

Anh yêu em đến nay chừng có thể,
Ngọn lửa tình chưa hẵn đã tàn phai

Nếu bạn muốn nó đứng độc lập và có thể trang trí cho nó bằng css (tìm về CSS) thì bạn cho nó vào thẻ HTML như sau.

Anh yêu em đến nay chừng có thể,
Ngọn lửa tình chưa hẵn đã tàn phai

Thẻ mở và thẻ đóng chính là một phần trong html mà bạn cần tìm hiểu.

Thiết kế website không cần sử dụng ngôn ngữ HTML được không?

Câu trả lời chắc chắn là không cho đến thời điểm hiện tại. Mặc dù hiện tại người ta dùng HTML 5 nhưng thật ra nó chỉ là bản nâng cấp của HTML thôi.

Bạn có thể không cần hiểu HTML vẫn có thể thiết kế web bằng các ứng dụng thiết kế web bằng cách kéo thả. Nhưng trang web mà bạn thiết kế ra vẫn phải dùng đến ngôn ngữ HTML để có thể chạy trên trình duyệt web.

Bố cục của HTML trong trang web

HTML có nhiều tag (thẻ) khác nhau có thể áp dụng bất cứ đâu trong trang web theo ý tưởng thiết kế của bạn. Tuy nhiên để trang web hoạt động bình thường thì bạn cần phải tuân thủ bố cục của HTML như dưới đây.

<!DOCTYPE html>
<html lang="vi">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- Nội dung hiển thị trang web -->
    </body>
</html>

Các thẻ trong ngôn ngữ HTML

<!DOCTYPE html> không phải là một thẻ trong HTML, nó chỉ giữ chức năng thông tin cho trình duyệt biết loại tài liệu sẽ thực thi.

<html></html> là một thẻ giữ vai trò quan trong nhất trong HMTL. Nó bao bọc tất cả các phần tử trong trang.

<head></head> phần này dùng để chứa những thông tin khai báo cho trang web như tiêu đề, meta, css…

<title></title> là phần hiển thị tiêu đề của trang, bạn sẽ thấy nó xuất hiện trên tab trình duyệt mỗi khi bạn truy cập vào trang web.

<body></body> đây là phần chứa hầu hết các nội dung mà bạn muốn hiển thị ra khi người dùng truy cập web của bạn.

Ngoài các thẻ bắt buộc trong bố cục HTML như trên thì còn rất nhiều thẻ khác mà chúng ta sẽ áp dụng khi thiết kế một trang web. Dưới đây là một số thẻ khác trong HTML thường được sử dụng.

Headings

Các thẻ heading này chuyên dùng để sử dụng cho các header hay title trong thiết kế website.

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
<h5> .... </h5
<h6> .... </h6>

Paragraphs

Thẻ  dùng để chứa nội dung văn bản, thẻ này sẽ được sử dụng thường xuyên trong các bài đăng của bạn trên website.

Lists

Để thể hiện danh sách trong website thì bạn cần sự hỗ trợ của thẻ <ul> và <ol>.

<ul>
  <li>Máy Tính</li>
  <li>Máy In</li>
  <li>Di Động</li>
</ul>

<ol>
  <li>PHP</li>
  <li>Javascript</li>
  <li>Laravel</li>
</ol>

Links

Liên kết là một phần rất quan trọng , nó sẽ giúp chúng ta tạo ra một trang web hoàn hảo. Để thêm một liên kết vào trong website ta dùng thẻ <a> và thẻ <a> sẽ có dạng như dưới đây

<a href="liên kết mà bạn muốn">Hành Tinh Công Nghệ</a>

Images

Để hiển thị hình ảnh trên trang web ngoài việc sử dụng css ra thì bạn có thể sử dụng đến thẻ <img />.

<img src="images/hanhtinhcongnghe.png" alt="hành tinh công nghệ" />

Còn nhiều thẻ khác nữa trong HTML mà bạn cần dùng đến để tạo ra một trang web ưng ý.

Lưu ý: khi sử dụng thẻ (tag) mở trong HTML thì bạn phải đóng nó lại. ví dụ dùng thẻ mở thì sau khi kết thúc nội dung văn bản bạn phải dùng thẻ đóng là