HTML và CSS là gì? Hướng dẫn toàn diện về nền tảng phát triển web

5:00 read

HTML và CSS là gì?

HTML (HyperText Markup Language) và CSS (Cascading Style Sheets) là hai công nghệ cốt lõi trong phát triển web hiện đại. Nếu bạn muốn trở thành một web developer, việc hiểu rõ về hai công nghệ này là điều bắt buộc. Hãy tưởng tượng một trang web như một ngôi nhà - HTML chính là phần khung xương, các bức tường và sàn nhà, còn CSS là phần trang trí nội thất, màu sơn tường và các chi tiết thẩm mỹ. Cùng tìm hiểu chi tiết về hai công nghệ nền tảng này.

HTML - HyperText Markup Language

HTML là gì?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo và cấu trúc các trang web. Đây không phải là một ngôn ngữ lập trình mà là một ngôn ngữ đánh dấu, cho phép chúng ta định nghĩa cấu trúc của nội dung trang web thông qua các thẻ (tags).

HTML được phát minh bởi Tim Berners-Lee vào năm 1989, khi ông đang làm việc tại CERN (Tổ chức Nghiên cứu Hạt nhân Châu Âu). Mục tiêu ban đầu của HTML là tạo ra một hệ thống chia sẻ tài liệu giữa các nhà khoa học. Ngày nay, HTML đã trở thành nền tảng của hầu hết các trang web trên internet.

Cấu trúc cơ bản của một trang HTML

Một tài liệu HTML có cấu trúc cơ bản như sau:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang web</title>
</head>
<body>
    <h1>Đây là tiêu đề lớn</h1>
    <p>Đây là một đoạn văn bản.</p>
</body>
</html>

Các thành phần trong cấu trúc HTML:

<!DOCTYPE html>: Khai báo loại tài liệu và phiên bản HTML (HTML5)
<html>: Thẻ gốc chứa toàn bộ nội dung của trang web
<head>: Chứa thông tin về tài liệu như tiêu đề, meta data, liên kết CSS, JavaScript...
<title>: Xác định tiêu đề của trang web (hiển thị trên thanh tiêu đề trình duyệt)
<body>: Chứa tất cả nội dung hiển thị của trang web
<h1>: Tiêu đề lớn nhất
<p>: Đoạn văn bản

Các thẻ HTML cơ bản

HTML sử dụng các thẻ để đánh dấu các phần tử khác nhau trên trang web. Dưới đây là một số thẻ cơ bản:

Thẻ tiêu đề

<h1>Tiêu đề lớn nhất</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>

Thẻ đoạn văn

<p>Đây là một đoạn văn bản.</p>

Thẻ liên kết

<a href="https://www.example.com">Liên kết đến example.com</a>

Thẻ hình ảnh

<img src="duong-dan-den-hinh-anh.jpg" alt="Mô tả hình ảnh">

Thẻ danh sách

<!-- Danh sách có thứ tự -->
<ol>
  <li>Mục thứ nhất</li>
  <li>Mục thứ hai</li>
</ol>

<!-- Danh sách không thứ tự -->
<ul>
  <li>Mục đầu tiên</li>
  <li>Mục thứ hai</li>
</ul>

Thẻ div và span

<div>Phần tử khối</div>
<span>Phần tử inline</span>

HTML5 và các tính năng mới

HTML5 là phiên bản mới nhất của HTML, được giới thiệu vào năm 2014. HTML5 bổ sung nhiều tính năng mới giúp phát triển web trở nên dễ dàng và mạnh mẽ hơn:

Các thẻ ngữ nghĩa (semantic tags)

<header>Phần đầu trang</header>
<nav>Thanh điều hướng</nav>
<section>Một phần của trang</section>
<article>Bài viết độc lập</article>
<aside>Nội dung phụ</aside>
<footer>Chân trang</footer>

Hỗ trợ đa phương tiện

<audio src="file.mp3" controls></audio>
<video src="file.mp4" controls></video>

Canvas cho vẽ đồ họa

<canvas id="myCanvas" width="200" height="100"></canvas>

Lưu trữ dữ liệu phía client
- Local Storage
- Session Storage

Form và input types mới

<input type="email">
<input type="date">
<input type="color">
<input type="range">

HTML và CSS là gì? Hướng dẫn toàn diện về nền tảng phát triển web