1
Làm quen với HTML
1.1
HTML là gì?
HTML là viết tắt của HyperText Markup Language, dịch ra tiếng Việt là ngôn ngữ đánh dấu để tạo ra siêu văn bản.
Ngôn ngữ thì dùng để giao tiếp? Đúng vậy, chúng ta sẽ sử dụng ngôn ngữ HTML hay “tiếng HTML” để nói cho máy tính biết, chúng ta muốn máy tính làm gì.
HTML là ngôn ngữ “đánh dấu” chứ không phải ngôn ngữ lập trình. Bạn sẽ hiểu “đánh dấu” là gì khi thực hành với HTML ngay sau đây.
Siêu văn bản chính là trang web.
Như vậy, HTML là ngôn ngữ để tạo ra trang web.
Chúng ta sẽ bắt tay vào làm việc với HTML.
- Bạn mở chương trình Notepad, nhập vào đoạn mã HTML sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web cua Teo</title>
</head>
<body>
<h1>Bai hoc dau tien</h1>
<p>Teo dang hoc HTML
de lam web.</p>
</body>
</html>
- Lưu đoạn mã trên vào ổ đĩa của máy tính với tên bất kỳ, lưu ý, phần mở rộng của tập tin phải là .html hoặc .htm (ví dụ: test.html).
- Mở tập tin test.html bằng trình duyệt (ví dụ Chrome), bạn sẽ thấy trang web đầu tiên như sau:
Vậy
là bạn đã tạo ra được trang web đầu tiên bằng ngôn ngữ HTML.
Để tạo ra trang web, những thứ bạn cần có là:
- Ngôn ngữ HTML để tạo ra nội dung cho trang web
- Chương trình Notepad để viết mã HTML
- Trình duyệt web (ví dụ Chrome) để thực thi mã HTML và hiển thị kết quả.
Chúng ta cùng tìm hiểu ý nghĩa từng dòng lệnh của đoạn mã trên.
DOCTYPE là viết tắt của DOCument TYPE, nghĩa là loại dữ liệu.
Từ dòng [2] là phần mã nguồn HTML.
Mã nguồn HTML là tập hợp các phần tử HTML (HTML element). Chúng ta sử dụng các phần tử
HTML để tạo ra nội dung cho trang web. Đoạn mã ví dụ trên gồm các phần tử sau:
- Phần tử <html> là phần tử gốc của trang web (root element)
- Phần tử <head> chứa các thông tin mô tả cho trang web
- Phần tử <title> hiển thị tiêu đề của trang web
- Phần tử <body> chứa nội dung của trang web, những thứ sẽ được hiển thị trên vùng nội dung của trình duyệt
- Phần tử <h1> hiển thị một đề mục
- Phần tử <p> hiển thị một đoạn văn bản.
1.2 Phần tử HTML là gì?
Phần tử HTML là thành phần để tạo ra nội dung
cho trang web.
Dựa vào tên của phần tử HTML, trình duyệt sẽ biết cách để hiển thị nội dung một cách phù
hợp.
Phần tử HTML định nghĩa các vùng nội dung trên trang web, ví dụ: đầu trang, cuối trang, văn
bản, tiêu đề, bảng dữ liệu. Đây chính là ý nghĩa của từ “đánh dấu” (markup) trong chữ HTML. Chúng ta sẽ sử dụng phần tử HTML phù hợp để “đánh dấu”. Ví dụ dùng phần tử <body> để đánh dấu “đây là vùng nội dung”, dùng phần tử <h1> để đánh dấu “đây là tiêu đề”, dùng phần tử <p> để đánh dấu “đây là đoạn văn bản”.
Phần tử HTML có cú pháp như sau:
<thẻ mở>Nội dung</thẻ đóng>
Trong đó:
- Thẻ mở (start tag) chứa tên của phần tử và được bao bằng dấu <>. Ví dụ: <html>, <body>, <h1>
- Thẻ đóng (end tag) gồm dấu /, tên của phần tử và được bao bằng dấu <>. Ví dụ: </html>, </h1>
- Để tạo ra một phần tử, chúng ta sẽ sử dụng thẻ mở và thẻ đóng cùng tên (điều này là bắt buộc), chỉ khác là thẻ đóng có thêm dấu /. Ví dụ: <html></html>, <h1></h1>
- Nội dung là những thứ sẽ được hiển thị ra trình duyệt. Tên của phần tử sẽ quyết định đến phần nội dung sẽ được hiển thị ra trình duyệt. Ví dụ: phần tử <h1> sẽ hiển thị ra một dòng tiêu đề lớn, phần tử <p> sẽ hiển thị một đoạn văn bản. Nội dung của phần tử cũng có thể là phần tử HTML khác (phần tử lồng nhau)
- Một số phần tử không có phần nội dung được gọi là phần tử rỗng (empty element), phần tử rỗng chỉ có thẻ mở, không có thẻ đóng. Ví dụ: <br>
1.3 Phần mềm viết mã HTML
Ở
phần thực hành trên, để đơn giản, chúng ta sử dụng Notepad để viết mã. Thực tế
bạn có thể viết mã HTML trên các môi trường sau:
- Trình soạn thảo văn bản thô (text editor). Ví dụ: Notepad
- Trình viết mã (code editor). Ví dụ: Visual Studio Code
- Trình phát triển ứng dụng tích hợp (IDE: Integrated Development Environment). Ví dụ: Visual Studio, PHPStorm, Pycharm.
- Các trang web lập trình trực tuyến. Ví dụ: https://www.programiz.com/html/online-compiler/
- Các ứng dụng AI (Gemini, ChatGPT, Copilot)
Mỗi môi trường viết mã có những cái hay, cái dở riêng, bạn có thể lựa chọn một môi trường phù hợp để sử dụng.
1.4 Trình duyệt web
Trình
duyệt web có chức năng thực thi mã HTML và hiển thị kết quả.
Bạn có thể sử dụng các trình duyệt web phổ biến như: Chrome, Edge, Firefox, Safari.
1.5 Cấu trúc một tài liệu HTML
Tài
liệu HTML là một tập tin, trong đó chứa mã HTML của một trang web.
Một tài liệu HTML có cấu trúc như sau:
Các nội dung trong phần tử <body> sẽ được hiển thị ra cửa sổ
trình duyệt.
1.6 Các phiên bản của HTML
HTML
có nhiều phiên bản. Sau đây là một số phiên bản phổ biến:
Năm Phiên bản
1991 Tim Berners-Lee tạo ra HTML
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML 1.0
2014 HTML5
2016 HTML 5.1
2017 HTML5.2
1.7 Bài tập
1. HTML là viết tắt của?
A. HyperText Markup Language
B. HyperText Machine Language
C. Hyper Text Meta Language
D. HyperText Makeup Language
2. Mục đích chính của phần tử <head> trong một tài liệu HTML là gì?
A. Chứa nội dung chính của trang web.
B. Định nghĩa tiêu đề của trang web.
C. Cung cấp thông tin mô tả (meta) về trang web (như tiêu đề, mã hóa ký tự, từ khóa).
D. Định dạng giao diện cho trang web.
3. Ai là người phát minh ra HTML?
A. Larry Page
B. Tim Berners-Lee
C. Brendan Eich
D. Guido van Rossum
4. Phát biểu nào đúng khi nói về “<!DOCTYPE html>”?
A. Là một thẻ HTML
B. Là một khai báo trong tài liệu HTML
C. Là một phần tử HTML
D. Là một chú thích trong HTML
5. Tạo trang web với nội dung sau:
- Tiêu đề: Họ tên của bạn
- Nội dung: tùy ý, trong đó có sử dụng các phần tử <h1>, <h2>, <p> và các phần tử khác.
Ví dụ:
------ Hướng dẫn làm bài tập -----
1(A),
2(C), 3(B), 4(B)
5.Tạo trang web với nội dung sau:
- Tiêu đề: Họ tên của bạn
- Nội dung: tùy ý, trong đó có sử dụng các phần tử <h1>, <h2>, <p> và các phần tử khác.
[test.html]
<!DOCTYPE html>
<html>
<head>
<title>Trang web cua Teo</title>
</head>
<body>
<h1>NGỪNG</h1>
<p>1. Ngừng nuối tiếc
quá khứ và lo lắng cho tương lai. Sống trọn vẹn từng khoảnh khắc cho hiện tại
mới khiến bạn hạnh phúc.</p>
<p>2. Ngừng sống để
vừa lòng người khác. Hãy sống sao cho tử tế !</p>
<p>3. Ngừng so sánh
bản thân mình với người khác. Tập trung vào mục tiêu. Trở thành phiên bản tốt
nhất của chính mình mỗi ngày.</p>
<p>4. Ngừng phàn nàn
và suy nghĩ tiêu cực. Khi gặp điều gì không vừa ý, hãy biết ơn vì đó là cơ hội
để mình được trải nghiệm.</p>
<p>5. Ngừng lãng phí
thời gian. Thời gian là vô cùng quý giá, hãy dùng nó vào những việc ý nghĩa.</p>
<p>6. Ngừng mong cầu
hạnh phúc của mình vào người khác. Yêu thương và hạnh phúc với chính mình mới
là thứ hạnh phúc bền vững nhất.</p>
<p>7. Ngừng kiểm soát
người khác. Thứ bạn có thể kiểm soát duy nhất là chính mình.</p>
<p>8. Ngừng đổ lỗi cho
người khác về vấn đề của mình. Bởi tất cả mọi chuyện đến với bạn là do bạn.</p>
<p>9. Ngừng mong cầu
người khác phải đối xử tốt với bạn. Hãy tự mình sống có trách nhiệm với chính
mình trước đi.</p>
<p>Nguồn: Internet</p>
</body>
</html>
------
Cập nhật: 7/10/2024
Bài sau:
-----
Bạn muốn học làm web tại Đà Lạt, liên hệ