HTML là nền tảng của một trang web. Trong bài học này, chúng ta sẽ xem xét cách xây dựng một cấu trúc vững chắc và có ý nghĩa cho trang web.
Những điểm chính cần ghi nhớ
- Học viên hiểu được cấu trúc tệp HTML.
- Học viên biết cách sử dụng các thẻ phổ biến để tạo trang web.
HTML là gì?
HTML là viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Đây là mã mà chúng tôi dùng để:
- tạo tài liệu được lưu trữ trên World Wide Web và hiển thị trong trình duyệt.
- cung cấp cấu trúc cơ bản cho trang web của chúng ta – phần khung của trang web.
- đảm bảo trình duyệt của chúng tôi tải đúng văn bản và hình ảnh để hiển thị.
Khi nào chúng ta sử dụng HTML?
Mọi trang web bạn thấy trên World Wide Web đều được viết bằng mã HTML. Nút, hình ảnh, biểu mẫu, đoạn văn bản – tất cả đều là những phần tử được tạo bằng HTML.
Nếu chúng ta coi trang web là cơ thể người, thì HTML là cấu trúc xương. Chúng ta có thể thêm da và quần áo vào cơ thể bằng cách sử dụng CSS, nhưng chỉ khi có cấu trúc xương đó.
HTML In Action
Các phần tử là cốt lõi của HTML. Các phần tử được tạo bằng thẻ.
Hầu hết các phần tử đều có thẻ mở và thẻ đóng:
<!-- opening tag -->
<p>
<!-- closing tag -->
</p>Nội dung (văn bản hoặc thậm chí các phần tử HTML khác) mà bạn muốn thấy trên trang web có thể được đặt giữa các thẻ này, giống như việc lồng các lớp của một chiếc bánh mì kẹp.
<p>The content that you write here will be seen on the web page</p>
<section>
<p>This text is inside a paragraph within a section.</p>
</section>Một số nội dung HTML được tạo bằng các thẻ tự đóng không cần thẻ đóng bổ sung:
<img />
<link />Chỉ cần một thẻ này là đủ vì nhiệm vụ của phần tử này là giữ một vị trí trong tài liệu của bạn – không giống như hầu hết các phần tử HTML khác, bạn không thể lồng các phần tử hoặc thông tin khác bên trong các phần tử tự đóng này.
Các phần của một phần tử HTML
Ví dụ về HTML
Mã này sẽ xuất hiện trong một trình duyệt và trông giống như hình ảnh bên dưới.
Mã này...
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML Example</title>
</head>
<body>
<h1>My Day In The Garden</h1>
<section>
<h2>Flora</h2>
<p>I spent the morning drawing some of the daffodils that
are inbloom.</p>
<p>I picked a few tulips to put in a vase in the dining
room.</p>
</section>
<section>
<h2>Fauna</h2>
<p>Today I spotted that hummingbird again, buzzing around
the newly blooming tree.</p>
<img
src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
alt="hummingbird"/>
</section>
</body>... Makes This Web Page
Tài liệu tham khảo về HTML
Đóng khung
Bối cảnh và mục đích
HTML là viết tắt của Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Đây là cách để cung cấp ý nghĩa cấu trúc cho văn bản. Điều này giúp máy tính và lập trình viên dễ dàng xác định mục đích của một đoạn văn bản.
Hãy coi HTML là bộ khung của một trang web – nó cung cấp cấu trúc và nội dung, trong khi JavaScript và CSS cung cấp tính tương tác và kiểu dáng.
Mục tiêu học tập
Học viên sẽ có thể
- tạo một tệp HTML rồi mở tệp đó trong trình chỉnh sửa và trình duyệt của họ
- thiết lập một tệp HTML có cấu trúc phù hợp
- liệt kê và sử dụng một số thẻ phổ biến để thêm cấu trúc và nội dung vào trang web của họ
Bắt đầu
Khung hình và mục đích của phần
- HTML được viết bên trong các tệp có đuôi
.html. - Bạn có thể đặt tên tuỳ ý cho tệp HTML, tuy nhiên,
index.htmllà tên phổ biến nhất được dùng cho trang đích, trừ phi nhà phát triển có lý do để định cấu hình máy chủ theo cách khác.
# creating an html file on the command line
touch index.html# opening your html file in your browser
open index.htmlThử thách nhỏ
- Tạo thêm 3 tệp HTML với tên bất kỳ mà bạn muốn.
- Mở một trong các tệp đó trong trình chỉnh sửa văn bản và trình duyệt.
Cấu trúc của trang HTML
Khung hình và mục đích của phần
Tài liệu HTML phải luôn bắt đầu bằng cùng một cấu trúc:
- Thẻ
DOCTYPElà thẻ đặc biệt và không đóng. Đây cũng là thẻ duy nhất có thể có các giá trị không phải chữ và số (chữ cái/chữ số). <head>chứa thông tin về trang web của bạn, nhưng không phải là nội dung thực tế sẽ xuất hiện trên trang.<body>chứa tất cả nội dung trên trang của bạn sẽ thực sự xuất hiện trên màn hình.- Bạn nên đặt thẻ mà bạn sẽ dùng để tạo cấu trúc trang giữa các thẻ
<body>. - Giữa thẻ mở và đóng, chúng ta chèn văn bản hoặc "nội dung" của phần tử. Kết quả cuối cùng sẽ có dạng như sau:
<example-tag>Content Goes in here</example-tag>. Bạn cũng có thể đặt thẻ trong các thẻ khác. - Xin lưu ý rằng khi đặt một thẻ bên trong một thẻ khác, bạn nên thụt lề thẻ mới để cho biết đó là thẻ con của thẻ mẹ.
Từ vựng
- phần tử – các mục (chẳng hạn như hình ảnh, đoạn văn và tiêu đề) được tạo bằng mã HTML.
- thẻ – đoạn mã cho biết nơi bắt đầu và kết thúc của một số phần tử nhất định.
- child – các phần tử nằm BÊN TRONG các phần tử khác.
- parent – các phần tử CHỨA các phần tử khác.
Ví dụ về HTML
Lưu ý: phần sau đây chỉ là một ví dụ để tham khảo; bạn không cần hiểu hết ngay lập tức, nhưng bạn nên xem HTML được định dạng đúng cách trông như thế nào.
<!-- Standard tag setup of an HTML document -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Practice Website</title>
</head>
<body>
<h1>My first website</h1>
<section>
<h2>Information about me</h2>
<p>I am coding out my first website. This is a paragraph
that I would write with information about my
interests.</p>
</section>
<section>
<h2>Things that I've learned in class</h2>
<ul>
<li>Command Line</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
</body><!-- Nested elements -->
<section>
<p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->Thử thách nhỏ
- Mở một trong các tệp bạn đã tạo và thêm cấu trúc thẻ HTML cơ bản.
- Thiết lập nội dung HTML để hiển thị cây gia phả của bạn (hoặc cây gia phả của người khác). Sử dụng thẻ
sectionđể giữ một nhóm gia đình. Sử dụng thẻpđể giữ một thành viên gia đình. Gia đình là một khái niệm phức tạp, nhưng ví dụ có thể là:
<section>Jetson Family
<div>George and Jane
<p>Judy</p>
<p>Elroy</p>
</div>
<p>Rosie the robot</p>
<p>Astro the dog</p>
</section>
<!-- In this example, Judy and Elroy are the children of Jane and George. -->Thẻ chung
Khung hình và mục đích của phần
Nhìn chung, chúng ta không tạo các loại phần tử của riêng mình. Thay vào đó, có một nhóm các phần tử được xác định trước có chức năng đã được liên kết với chúng.
Tham khảo tài liệu tham khảo HTML để xem các ví dụ về khối mã
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Practice Website</title>
</head>
<body>
<h1>My first website</h1>
<br>
<img
src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
alt="kitten with blue background">
<hr>
<section>
<h2>Information about me</h2>
<p>I am coding out my first website. This is a paragraph
that I would write with information about my interests.</p>
<h3>My favorite websites</h3>
<ul>
<li><a href="www.google.com">Google</a></li>
</ul>
<h3>My favorite books</h3>
<section>
<h4>Non-Fiction</h4>
<ol>
<li>Eloquent Javascript</li>
</ol>
</section>
<section>
<h4>Fiction</h4>
<ol>
<li>Hitchhiker's Guide to the Galaxy</li>
</ol>
</section>
</section>
<hr>
<section>
<h2>Things that I've learned in class</h2>
<ul>
<li>Command Line</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
</body>Thử thách nhỏ
- Sửa đổi tất cả nội dung trên để phản ánh mối quan tâm CỦA BẠN.
- Trong một trong những tệp HTML trống khác mà bạn đã tạo khi bắt đầu bài học, hãy giả vờ rằng bạn đang chuẩn bị một bài báo có tiêu đề, tiêu đề phụ và tiêu đề con (không nghĩ ra nội dung? Viết về một ngày bạn đi du lịch. Hãy nghĩ đến những chuyến đi ngắn mà bạn đã thực hiện, những địa điểm bạn đã ghé thăm, những món ăn bạn đã thưởng thức).
- Sử dụng các thẻ có liên quan và thêm một số nội dung để bài viết tin tức của bạn xuất hiện trên trang web.
- Kiểm tra để đảm bảo nội dung của bạn xuất hiện trong trình duyệt!
- THỬ THÁCH: Tạo một biểu mẫu để người khác có thể điền thông tin và gửi cho bạn một bình luận về bài viết của bạn. Mặc dù chưa hoạt động (chúng tôi chưa kết nối với Javascript), nhưng việc tạo biểu mẫu này bằng HTML có thể cho chúng ta thấy bước đầu tiên trong cách tạo một biểu mẫu hoạt động.
Ngữ cảnh
HTML là ngôn ngữ của nội dung trên World Wide Web.
Bạn sẽ sử dụng Dòng lệnh để chuyển đến và mở các tệp HTML. Các tệp HTML của bạn sẽ được tăng cường bằng các kiểu CSS và hành vi được viết bằng kịch bản JavaScript bao gồm nhiều hàm. Các tệp HTML cũng sẽ là mẫu được Google App Engine sử dụng và được điền sẵn dữ liệu từ một cơ sở dữ liệu.
HTML In Action
Bắt đầu với HTML
HTML được viết bên trong các tệp có đuôi .html.
Xem Trang của bạn
Cách xem trước một tệp HTML trên máy Mac: Trong dòng lệnh, hãy chuyển đến thư mục có trang HTML của bạn rồi nhập tên tệp mở, thay thế "tên tệp" bằng tên của tệp HTML.
Cú pháp chung
<tag>
Content
</tag>Các phần tử được lồng vào nhau
Bạn có thể đặt các phần tử HTML bên trong các phần tử khác:
<parent>
<child>
This content is inside of the child tag, which is inside of
the parent tag. Keep an eye on indentation to see which is
the parent and which is the child!
</child>
</parent>Cấu trúc của trang HTML
Mọi trang web đều có cấu trúc cơ bản giống nhau. Thông báo sẽ có dạng như sau:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><head>chứa thông tin về trang web của bạn, nhưng không phải là nội dung thực tế sẽ xuất hiện trên trang (hãy coi đây là "bộ não" của trang web).<body>chứa tất cả nội dung trên trang của bạn sẽ thực sự xuất hiện trên màn hình.
Các phần tử phổ biến
Sử dụng các phần tử phổ biến này bên trong thẻ <body> và </body> để thêm nội dung vào một trang.
Đoạn
Để tạo một đoạn văn, hãy dùng thẻ mở và thẻ đóng p:
<p>
This is a paragraph about how great polar bears are. Aren't they just the best?
</p>Bình luận
Sử dụng chú thích để giúp mã của bạn dễ đọc hơn mà không ảnh hưởng đến HTML được kết xuất cuối cùng.
<!-- This is a comment. It lives in the code as a note to yourself or
to other developers, but is hidden when the HTML is rendered in the
browser. -->Tiêu đề
<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6><div> chung
<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>Danh sách
Danh sách các mục trong danh sách, <li>, được gói bằng thẻ danh sách không có thứ tự, <ul>, hoặc thẻ danh sách có thứ tự, <ol>.
<!-- An unordered list - this will default to a bulleted list. -->
<ul>
<li>first list item</li>
<li>second list item</li>
</ul><!-- An ordered list - this will default to a numbered list. -->
<ol>
<li>first list item</li>
<li>second list item</li>
</ol>Hình ảnh
Thẻ <img> yêu cầu bạn chỉ định địa chỉ của hình ảnh bằng thuộc tính src và thuộc tính alt không bắt buộc được dùng cho khả năng hỗ trợ tiếp cận, bao gồm cả trình đọc màn hình.
<!-- Image hosted elsewhere on the web -->
<img
src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
alt="kitten with blue background">
<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">Anchor (nhiều người gọi là "đường liên kết")
Đối với siêu liên kết, thẻ <a> yêu cầu bạn chỉ định địa chỉ của đích đến siêu liên kết bằng thuộc tính href.
<!-- External link -->
<a href="https://www.google.com"></a>
<!-- Local link -->
<a href="footer.html"></a>Quy tắc đường kẻ ngang
<!-- This self-closing tag creates a line across your web page. -->
<hr>Nghỉ
<!-- This self-closing tag creates a line break between elements. -->
<br>Biểu mẫu
<form> được dùng để thu thập thông tin từ người dùng. Để <form> hoạt động, bạn cần gửi dữ liệu mà <form> thu thập được đến một nơi nào đó để xử lý hoặc quản lý. Do đó, <form> thường yêu cầu các thuộc tính bổ sung:
action– đích đến của dữ liệu biểu mẫu khi biểu mẫu được gửimethod– cho biết liệu dữ liệu có được xử lý bằng loại yêu cầuGEThayPOSThay không.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">
</form>Đầu vào
<input> là phần tử mà <form> dùng để thu thập thông tin.
Phần tử <input> cũng thường có một thuộc tính name mà cơ sở dữ liệu dùng để xác định trường mà dữ liệu đã gửi thuộc về.
<form>
<!-- a text box with the helper text "Full Name" -->
<input type="text" name="fullName" placeholder="Full Name">
</form>Phần tử <input> rất linh hoạt: bằng cách chỉ định thuộc tính type, phần tử này có thể được kết xuất dưới dạng trường văn bản, bộ chọn ngày theo kiểu lịch, nút chọn, trình đơn thả xuống, v.v. Bạn có thể tham khảo một số tài liệu bên ngoài để xem danh sách đầy đủ hơn.
Mẹo và thủ thuật
- Tìm hiểu những thẻ HTML có sẵn bằng cách kiểm tra mã của các trang web để xem những thẻ mà các nhà phát triển khác đã dùng để thêm nội dung vào một trang web.
- Nếu bạn không tìm thấy nội dung muốn thêm, hãy xem Tài liệu dành cho nhà phát triển. Đây là một số danh sách gồm tất cả các phần tử HTML có thể có https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
- Khi viết HTML, đối với những phần tử cần có thẻ mở và thẻ đóng, tốt nhất là bạn nên mở và đóng thẻ trước khi thêm nội dung giữa các thẻ. Bằng cách này, bạn sẽ không còn thẻ không hợp lệ.
- Để xem rõ nhất bản chất lồng nhau của các phần tử HTML trong mã, hãy thụt lề các phần tử nằm bên trong các phần tử khác. Việc này sẽ giúp bạn nhanh chóng nhận ra cấu trúc nội dung HTML.
- Sử dụng nhiều bình luận! Những thông tin này sẽ giúp bạn khắc phục sự cố cho mã của riêng mình và giúp người khác khi bạn yêu cầu họ xem xét mã.
- Các tài nguyên trên web như html5boilerplate.com có thể giúp bạn nhanh chóng bắt đầu viết HTML.
Tóm tắt các phương pháp hay nhất
- Thông tin về một trang web nằm trong
<head>của tài liệu HTML: tiêu đề, siêu dữ liệu, đường liên kết đến các kiểu, v.v. - Thông tin trên một trang web nằm trong phần
<body>của tài liệu HTML. - Có nhiều phần tử mà nhà phát triển có thể dùng để tạo nội dung của một tài liệu HTML, bao gồm:
<p>,<h1>-<h6>,<div>,<li>,<img>,<a>,<hr>,<br>,<!-- -->và nhiều phần tử khác. - Một số phần tử yêu cầu thẻ mở và thẻ đóng:
<p></p>. - Các phần tử khác tự đóng, vì vậy chúng chỉ yêu cầu một thẻ mở:
<img>. - Thẻ có thể bao gồm các thuộc tính (
src,alt,id, v.v.) cung cấp thêm thông tin về cách một phần tử hoạt động:<img src="filename.png" alt="description">. - Chú thích,
<!-- -->, cung cấp ghi chú cho nhà phát triển để giúp họ hiểu rõ các phần của một trang web. - Sử dụng Công cụ cho nhà phát triển tích hợp trong trình duyệt để kiểm tra mã HTML của các trang web nhằm xem xét cách trang được tạo.
Câu hỏi 1
Phần tử nào sau đây là phần tử con? (bỏ qua các phần tử body/html cho mục đích của bài tập này)
<h1>
Welcome to the site!
</h1>
<p>
Go to <a href="https://www.google.com">Google!</a>
</p>- h1
- p
- a
- h1 và p
Câu hỏi 2
Trong tài liệu HTML, __ nằm trong phần tử <head> và __ nằm trong phần tử <body>.
- cấu trúc, siêu dữ liệu
- siêu dữ liệu, cấu trúc
- tiêu đề, nội dung nhỏ hơn
- tiêu đề của trang web, nội dung chính của trang web
Câu hỏi 3
Đâu không phải là lý do chính đáng để thụt lề các phần tử lồng nhau?
- Việc thụt lề giúp bạn dễ dàng nhận biết những phần tử nào nằm trong phần tử khác
- Việc thụt lề giúp người dùng dễ dàng đọc cấu trúc của trang web
- Việc thụt lề giúp các bot/công cụ tìm kiếm dễ dàng đọc cấu trúc của trang web
- Việc thụt lề giúp bạn dễ dàng xác định các phần tử ngang hàng
Câu hỏi 4
Mục nào sau đây là một thuộc tính của phần tử HTML?
<div class="sidebar">Sidebar goes here!</div>divclass- thanh bên
- Thanh bên ở đây!
Câu hỏi 5
Phần tử HTML sau có bao nhiêu thuộc tính?
<input type="text" placeholder="username" name="username" />- 0
- 1
- 2
- 3
Câu hỏi 6
Trong đoạn mã HTML sau đây minh hoạ một mối quan hệ, phần tử nào là phần tử mẹ?
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p><b><i>
Câu hỏi 7
Có bao nhiêu phần tử trong đoạn mã HTML sau đây là phần tử con của một phần tử mẹ?
(Không tính các phần tử <body> hoặc <html> bao bọc)
<div>
<h1>Buster's site</h1>
<p>Buster is my dog. He is a <i>very good dog</i>. He is a
Labrador retriever. Read more about it
<a href="https://dogtime.com/dog-breeds/labrador-retriever">
here</a>.
<p>
</div>- 1
- 2
- 3
- 4
Câu hỏi 8
Mặc dù một số trình duyệt sẽ hiển thị chính xác đoạn mã HTML sau, nhưng có gì sai với đoạn mã này?
<img src=puppies.png width=400 />- Thẻ này không có thẻ đóng
- Bạn nên đặt dấu ngoặc kép xung quanh các giá trị của thuộc tính
- Bạn cũng phải cung cấp thuộc tính
heightkhi cung cấp thuộc tínhwidth - Thiếu một thuộc tính bắt buộc
Câu hỏi 1
Phần tử nào sau đây là phần tử con? (bỏ qua các phần tử body/html cho mục đích của bài tập này)
<h1>
Welcome to the site!
</h1>
<p>
Go to <a href="https://www.google.com">Google!</a>
</p>Phần tử a là một phần tử con vì nằm trong một phần tử khác.
Câu hỏi 2
Trong tài liệu HTML, __ nằm trong phần tử <head> và __ nằm trong phần tử <body>.
siêu dữ liệu nằm trong phần tử <head> và cấu trúc nằm trong phần tử <body>. Không có nội dung nào trong phần tử <head> xuất hiện trên chính trang web.
Câu hỏi 3
Đâu không phải là lý do chính đáng để thụt lề các phần tử lồng nhau?
Việc thụt lề không giúp bot/công cụ tìm kiếm dễ đọc cấu trúc của trang web hơn – khi đọc một trang web, bot có thể đọc mã HTML ngay cả khi mã đó nằm trên một dòng.
Câu hỏi 4
Mục nào sau đây là một thuộc tính của phần tử HTML?
<div class="sidebar">Sidebar goes here!</div>class là thuộc tính – các thuộc tính nằm trong một phần tử HTML và thường có (nhưng không bắt buộc phải có) một giá trị.
Câu hỏi 5
Phần tử HTML sau có bao nhiêu thuộc tính?
<input type="text" placeholder="username" name="username" />Phần tử input ở trên có 3 thuộc tính – type, placeholder và name.
Câu hỏi 6
Trong đoạn mã HTML sau đây minh hoạ một mối quan hệ, phần tử nào là phần tử mẹ?
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p> là một phần tử mẹ vì nó chứa các phần tử khác.
Câu hỏi 7
Có bao nhiêu phần tử trong đoạn mã HTML sau đây là phần tử con của một phần tử mẹ?
(Không tính các phần tử <body> hoặc <html> bao bọc)
<div>
<h1>Buster's site</h1>
<p>Buster is my dog. He is a <i>very good dog</i>. He is a
Labrador retriever. Read more about it
<a href="https://dogtime.com/dog-breeds/labrador-retriever">
here</a>.
<p>
</div>Có 4 phần tử con trong đoạn mã – về cơ bản, mọi phần tử có phần tử mẹ ở phía trên, tức là mọi phần tử ngoại trừ phần tử <div> – <h1>, <p>, <i>, <a>.
Câu hỏi 8
Mặc dù một số trình duyệt sẽ hiển thị chính xác đoạn mã HTML sau, nhưng có gì sai với đoạn mã này?
<img src=puppies.png width=400 />Bạn phải đặt dấu ngoặc kép xung quanh các giá trị của thuộc tính. <img /> là một thẻ tự đóng và không có thuộc tính bắt buộc. Bạn có thể chỉ có width mà không có height và ngược lại.