HTML - Giới thiệu
Xin chào bạn, người học lập trình web!I rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới HTML. Là một ai đó đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉 bạn rằng HTML là nền tảng của web, và việc học nó giống như解锁 một siêu năng lực. Hãy cùng nhau nhảy vào!
HTML là gì?
HTML viết tắt của HyperText Markup Language. Bây giờ, tôi biết điều này có vẻ有点令人畏惧, nhưng hãy nghĩ về nó như là xương sống của một trang web. Giống như xương của chúng ta tạo cấu trúc cho cơ thể, HTML tạo cấu trúc cho các trang web.
Hãy phân tích nó:
- HyperText: Điều này đề cập đến văn bản chứa các liên kết đến các văn bản khác.
- Markup: Điều này có nghĩa là chúng ta đang thêm các "thẻ" đặc biệt vào văn bản thường để cho nó ý nghĩa và cấu trúc.
- Ngôn ngữ: Đây là một cách để giao tiếp với máy tính,告诉 chúng cách hiển thị nội dung của chúng ta.
Dưới đây là một ví dụ đơn giản về HTML:
<h1>Chào mừng đến với trang web đầu tiên của tôi!</h1>
<p>Đây là một đoạn văn bản.</p>Trong ví dụ này, <h1> và <p> là các thẻ HTML cho biết trình duyệt cách hiển thị văn bản.
Tại sao sử dụng HTML?
Bạn có thể tự hỏi, "Tại sao tôi nên phiền phức học HTML?"好吧, hãy để tôi kể cho bạn một câu chuyện ngắn. Khi tôi mới bắt đầu, tôi nghĩ rằng tôi chỉ cần sử dụng các công cụ tạo trang web đẹp mắt cho mọi thứ. Nhưng sau đó, tôi có một khách hàng muốn một điều cụ thể mà các công cụ này không thể làm được. Đó là khi tôi nhận ra sức mạnh của HTML.
Dưới đây là một số lý do tại sao HTML lại quan trọng:
- Nó là ngôn ngữ phổ biến của web: Mỗi trang web bạn từng truy cập đều sử dụng HTML.
- Nó cho bạn quyền kiểm soát: Bạn có thể tạo chính xác những gì bạn muốn, không chỉ những gì một công cụ cho phép.
- Nó là nền tảng cho phát triển web nâng cao: Nếu bạn muốn học CSS và JavaScript sau này, bạn cần HTML trước.
- Nó tương đối dễ học: tin tôi đi, nếu tôi có thể học được, bạn chắc chắn cũng có thể!
Các phiên bản HTML
HTML đã phát triển qua nhiều năm, giống như một loại rượu ngon ngày càng tốt hơn theo tuổi tác. Dưới đây là một sơ lược về các phiên bản chính:
| Phiên bản | Năm | Tính năng chính |
|---|---|---|
| HTML 1.0 | 1991 | Rất cơ bản, chỉ có 18 thẻ |
| HTML 2.0 | 1995 | Đưa vào biểu mẫu và bảng |
| HTML 3.2 | 1997 | Hỗ trợ nhiều thẻ và thuộc tính hơn |
| HTML 4.01 | 1999 | Cải thiện hỗ trợ cho CSS và script |
| XHTML | 2000 | Phiên bản HTML严格, dựa trên XML |
| HTML5 | 2014 | Tiêu chuẩn hiện tại, với các phần tử ngữ nghĩa và API mới |
Ngày nay, chúng ta chủ yếu sử dụng HTML5, nó rất mạnh mẽ và linh hoạt.
Cấu trúc tài liệu HTML
Mỗi tài liệu HTML theo một cấu trúc cụ thể. Hãy nghĩ về nó như là bản đồ cho trang web của bạn. Dưới đây là cách nó trông như thế nào:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang web đầu tiên của tôi</title>
</head>
<body>
<h1>Chào mừng đến với trang web của tôi!</h1>
<p>Đây là nơi tất cả nội dung可见 nội dung.</p>
</body>
</html>Hãy phân tích này:
-
<!DOCTYPE html>: Điều này cho biết trình duyệt rằng chúng ta đang sử dụng HTML5. -
<html>: Element gốc của trang HTML. -
<head>: Chứa thông tin meta về tài liệu. -
<body>: Chứa nội dung可见 của trang.
Vai trò của các trình duyệt web trong HTML
Các trình duyệt web giống như những người dịch cho HTML. Họ đọc mã HTML và hiển thị nó thành các trang web trực quan mà chúng ta thấy. Các trình duyệt khác nhau có thể hiển thị cùng một mã HTML khác nhau, đó là lý do tại sao việc kiểm tra trang web của bạn trên nhiều trình duyệt khác nhau rất quan trọng.
Đây là một sự thật thú vị: trình duyệt đầu tiên được gọi là WorldWideWeb (sau đó được đổi tên thành Nexus) và được tạo ra bởi Tim Berners-Lee, người发明了万维网!
Thẻ HTML, Thuộc tính và Element
HTML bao gồm ba thành phần chính:
-
Thẻ: Đây là các block xây dựng của HTML. Chúng luôn được bao bọc trong dấu ngoặc vuông, như
<p>cho một đoạn văn bản. -
Thuộc tính: Những này cung cấp thêm thông tin về các element. Chúng luôn được xác định trong thẻ bắt đầu.
-
Element: Một element là tất cả từ thẻ bắt đầu đến thẻ kết thúc.
Hãy xem một ví dụ:
<a href="https://www.example.com" title="Tham quan Example">Nhấp vào đây</a>Trong ví dụ này:
-
<a>là thẻ (cho một liên kết) -
hrefvàtitlelà các thuộc tính - Toàn bộ dòng là một element
Dưới đây là bảng một số thẻ HTML phổ biến:
| Thẻ | Mô tả |
|---|---|
<h1> đến <h6>
|
Đầu đề |
<p> |
Đoạn văn bản |
<a> |
Liên kết |
<img> |
Hình ảnh |
<ul> và <ol>
|
Danh sách không có thứ tự và có thứ tự |
<table> |
Bảng |
<div> |
Phân đoạn hoặc phần |
Tầm quan trọng của việc học HTML
Học HTML giống như học đọc và viết trong kỷ nguyên số. Đây là bước đầu tiên để hiểu cách web hoạt động và cách tạo ra nó. Với HTML, bạn có thể:
- Tạo trang web riêng từ đầu
- Hiểu và sửa đổi các trang web hiện có
- Giao tiếp hiệu quả hơn với các nhà thiết kế và nhà phát triển
- Mở ra cơ hội nghề nghiệp trong lĩnh vực phát triển web
Tôi nhớ dạy một học sinh nghĩ rằng cô ấy không đủ "kỹ thuật" để học mã hóa. Cô ấy bắt đầu với HTML, và trong vài tuần, cô ấy đã xây dựng trang web đầu tiên của mình. Niềm tự hào và sự hài lòng trên khuôn mặt cô ấy là không thể nào quên. Đó là sức mạnh của HTML - nó dễ tiếp cận nhưng lại mạnh mẽ.
Cuối cùng, HTML là xương sống của web, và việc học nó là một bước thú vị đầu tiên vào thế giới phát triển web. Nó có thể có vẻ khó khăn ban đầu, nhưng tin tôi đi, với sự luyện tập và kiên nhẫn, bạn sẽ nhanh chóng tạo ra các trang web tuyệt vời. Nhớ rằng, mỗi chuyên gia từng là người mới bắt đầu. Vậy, bạn đã sẵn sàng bắt đầu hành trình HTML của mình chưa? Hãy cùng mã hóa!
Credits: Image by storyset