Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Chào mừng đến với bài học thứ tư trong loạt bài thiết kế Web cho trẻ em của chúng tôi, nội dung HTML!
Trong các bài học trước đây, cuối cùng chúng ta đã nhảy vào mã hóa bằng cách xây dưng cấu trúc tập tin HTML của chúng ta với một số phần tử HTML. Bây giờ chúng ta sẽ thêm nội dung trang web vào cấu trúc này.
Hãy nhớ rằng: Các tập tin hoàn thành cho bài học này có thể được tải về tại đây. Và nếu bạn gặp bất kỳ khó khăn nào, hãy đặt câu hỏi trong khu vực bình luận ở dưới cùng của trang này!
Containers, Containers, Containers
Chúng ta sẽ nói nhiều về containers(kho chứa) khi xây dựng một trang web, nên việc hiểu được chúng làm gì rất là quan trọng.
Tất cả nội dung của chúng ta sẽ cần phải được đặt trong đúng loại container. Các containers được tổ chức với các phần tử HTML. Mỗi phần tử có nghĩa là một cái gì đó đặc biệt cho trình duyệt, giúp nó hiểu tất cả những thứ trên trang.
Để nghĩ về nó theo cách khác, trong hình minh họa trên, các tòa nhà chứa tất cả mọi thứ: cửa sổ, cửa ra vào và một đồng hồ. Một trong các cửa sổ hoạt động như một container với một nhà thiết kế Thị trấn Tuts+ bên trong.
Thêm nội dung
Bây giờ mà chúng tôi có cấu trúc của chúng tôi ở nơi chúng tôi có thể điền vào các thùng chứa với nội dung. Tất cả các yếu tố mà chúng tôi đã thêm vào tập tin của chúng tôi trong bài học trước đó đã giúp chúng tôi được tổ chức-họ đã cho chúng ta một nơi để chèn văn bản và hình ảnh của chúng tôi.
Hãy bắt đầu từ trên cùng!
Header
Như chúng ta đã nói, header (đề bài) là một phần trên cùng của một trang web và có phần tử của riêng của nó, <header>, nó là phần tử đầu tiên được lồng vào phần body (thân).
1 |
<body>
|
2 |
<header> </header> |
3 |
</body>
|
Header thông thường chứa một lời giới thiệu và một thanh điều hướng (một cách để tìm đến những nơi khác trong trang web). Trang web của chúng ta có một tiêu đề chào đón và hình ảnh gọn gàng, vì vậy, hãy thêm chúng!
Heading
Chúng ta cần đặt dòng chữ “Welcome to Tuts+ Town” trong trang, nó sẽ đóng vai trò là heading (đề mục) chính của trang web.
Có sáu cấp độ của heading cho một trang; h1 là cái quan trọng nhất, h6 là cái ít quan trọng nhất. Trong HTML, văn bản cho các đề mục được viết bên trong các phần tử sau: <h1>, <h2>, <h3>, <h4>, <h5> hoặc <h6>.
“Welcome To Tuts+ Town” là đề mục chính của chúng ta (nó rất quan trọng), vì thế chúng ta sẽ gõ cái này bên trong thẻ mở và đóng của một phần tử <h1>.
1 |
<header>
|
2 |
<h1>Welcome To Tuts+ Town</h1> |
3 |
</header>
|
Bây giờ trình duyệt sẽ nhận ra dòng chữ này như là lời giới thiệu của chúng ta.
Hình ảnh Thị trấn
Cũng trong phần header chúng ta có một hình ảnh đáng yêu của thị trấn của chúng ta.
Trong thư mục chính "tutstown" của chúng ta, bạn cần phải tạo một thư mục khác, thư mục "images", và lưu tất cả các hình ảnh trong đó.
Các hình ảnh được thêm vào bằng một phần tử <img>. Bên trong thẻ này, chúng ta cần phải cung cấp vị trí cho hình ảnh hoặc nguồn, như thế này:
1 |
<img src="images/townheader.svg" |
Thấy / sau src="images chứ? Ở đó, chúng ta nói rằng "tìm trong thư mục images / một tập tin được gọi là townheader.svg".
Sau đó, trước khi chúng ta hoàn tất các thẻ <img>, chúng ta sẽ thêm một mô tả bằng một thuộc tính alt.
1 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
Các thuộc tính là những thứ mà chúng ta có thể thêm vào các phần tử giúp làm rõ thêm cho chúng, hoặc nói cho chúng biết phải làm việc như thế nào. Chỉ các thuộc tính cụ thể làm việc trong các phần tử cụ thể. Một phần tử <img> sẽ luôn luôn có một thuộc tính src và một thuộc tính alt.
Quan trọng! Một phần tử <img> là một phần tử tự đóng. Điều này có nghĩa rằng thẻ mở cũng là thẻ đóng:
Hãy xem thử!
Tại thời điểm này, chúng ta có thể mở trang web của chúng ta trong trình duyệt để xem những gì chúng ta đã thực hiện cho đến lúc này! Tìm thư mục "tutstown" và nhấp đúp vào "index.html". Thao tác này sẽ mở trang trong trình duyệt của bạn.
Đó là trang web của chúng ta! Hiện không có nhiều thứ ở đó, nhưng chúng ta sẽ thay đổi điều đó. Từ giờ trở đi, bất cứ khi nào bạn muốn xem các thay đổi trong trình duyệt, bạn có thể lưu các tập tin HTML và sau đó làm mới (bằng cách sử dụng vòng tròn nhỏ với một biểu tượng mũi tên ở phía trên cùng) cửa sổ trình duyệt.
Ngoài ra, bạn sẽ nhận thấy rằng chúng ta vẫn chưa thể nhìn thấy đám mây của chúng ta, bởi vì chúng ta vẫn chưa thêm nền màu vàng. Chúng ta sẽ tìm hiểu những thứ như màu nền, định vị trí và định kích cỡ trong bài học tiếp theo của chúng ta khi chúng ta bắt đầu tìm hiểu CSS.
Phần chính
Phần chính của trang web của chúng ta bao gồm rất nhiều các thông tin. Chúng ta sẽ chứa tất cả nội dung thật là hữu ích về thị trấn của chúng ta trong phần tử <main> này.
1 |
<body>
|
2 |
<header>
|
3 |
<h1>Welcome To Tuts+ Town</h1> |
4 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
5 |
</header>
|
6 |
<main>
|
7 |
</main>
|
8 |
</body>
|
Section
Chúng ta có ba nhóm có liên quan trên trang web mà chúng ta sẽ tổ chức thành ba section (phần). Một section là một phần độc lập của một trang web có chứa thông tin và cũng có phần tử riêng của mình: <section>.
1 |
<main>
|
2 |
<section> </section> |
3 |
<section> </section> |
4 |
<section> </section> |
5 |
</main>
|
Thêm cấu trúc!
Trong các section của chúng ta, chúng ta có thêm các khung nhỏ để xây dựng, giống như container cho các văn bản nhỏ bên cạnh hình ảnh.
Hãy tạo từng section một. Mỗi section có một hình ảnh được lồng vào và một phần tử có chứa một số văn bản.
Chúng ta hãy nhìn vào cấu trúc này trước khi chúng ta thêm nội dung thật sự:
1 |
<section>
|
2 |
<img /> |
3 |
<div>
|
4 |
</div>
|
5 |
</section>
|
Bây giờ, chúng ta nói về việc thêm các hình ảnh trước. Hình ảnh này sẽ được thêm vào theo cùng một cách với hình ảnh tiêu đề của chúng ta, nhưng tên tập tin và mô tả sẽ khác.
1 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
Div
Một phần tử <div> là một container thông dụng. Nó cho phép chúng ta nhóm các phần của một trang khi không có phần tử khác có thể phù hợp hơn.
1 |
<div>
|
2 |
<img /> |
3 |
<div>
|
4 |
<!-- A heading and shop list will be added here -->
|
5 |
</div>
|
6 |
</div>
|
Đề mục và danh sách các cửa hàng sẽ được chứa bởi <div> này.
Đề mục
Chúng ta có thể thấy rằng mỗi section có một tiêu đề nhỏ: Ngủ, Thức ăn và Cửa hàng. Những điều này nói cho chúng ta biết về danh sách nhỏ ngay bên dưới mỗi một tiêu đề. Chúng ta đã sử dụng một phần tử <h1> cho việc giới thiệu của chúng ta ở đầu trang, do đó chúng ta sẽ sử dụng <h2>, như thế này:
1 |
<section>
|
2 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
3 |
<div>
|
4 |
<h2>Sleep</h2> |
5 |
</div>
|
6 |
</section>
|
Danh sách
Có hai loại danh sách HTML, có thứ tự (đi kèm với số) và không thứ tự (với ký hiệu đầu dòng thay vì con số). Cả hai thật sự thuận tiện để liệt kê thông tin liên quan và mỗi section của trang web của chúng ta chứa một danh sách ngắn không thứ tự (<ul>) với hai phần tử.
Lồng bên trong mỗi danh sách là các phần tử. Các phần tử này tạo nên danh sách của chúng ta và chúng được viết trong thẻ <li>.
1 |
<ul>
|
2 |
<li></li>
|
3 |
<li></li>
|
4 |
</ul>
|
Liên kết
Các danh sách mà chúng ta vừa mới gom lại với nhau liên kết đến các trang web cửa hàng khác nhau, do đó, các du khách có thể bấm vào chúng để biết thêm thông tin. Để chuyển một từ (hoặc các từ) thành một liên kết có thể nhấp vào, chúng ta cần bọc từ đó trong các thẻ neo. Một phần tử neo trông như thế này: <a>.
Tương tự như cách mà phần tử <img> có các thuộc tính đặc biệt, thẻ mở <a> cũng sẽ cần phải chứa một thuộc tính bao gồm địa chỉ của trang web mà chúng ta muốn người sử dụng sẽ được chuyển đến, đó là thuộc tính href.
Đoạn code nhỏ sau đây sẽ cung cấp cho chúng ta một liên kết kết nối với từ "here" mà sẽ đưa người dùng đến https://tutsplus.com/
1 |
For more tutorials click <a href="https://tutsplus.com/">here</a>. |
Đây chính xác là cách mà chúng ta sẽ có thể thêm các liên kết vào danh sách của chúng ta, bằng cách gói mỗi tên cửa hàng trong một cái neo. Cả hai thẻ mở và đóng của một neo sẽ có trong phần tử danh sách, <li>. Sự khác biệt duy nhất là vì đây không phải là cửa hàng thật sự, với các trang web thực sự, nên chúng ta sẽ đặt một dấu # cho giá trị href và nhấn vào nó sẽ không đưa chúng ta đến một trang web khác.
Dưới đây là một cái nhìn về cửa hàng đầu tiên được liệt kê:
1 |
<ul>
|
2 |
<li><a href="#">The Snooze Inn</a></li> |
3 |
</ul>
|
Chúng ta tạo một danh sách không thứ tự, lồng bên trong một phần tử của danh sách đó, và sau đó bọc tên cửa hàng trong một thẻ neo. Hãy nhớ rằng mặc dù chúng ta đã không định bất kỳ kiểu dáng nào vì vậy bản xem trước của chúng ta sẽ hiển thị các liên kết trong một màu xanh mặc định thay vì màu cam.
Xem lại Section
Một khi chúng ta có một section hoàn tất chúng ta sẽ cần phải lặp lại các bước tương tự cho phần hai. Mỗi lần chúng ta cần phải chắc chắn rằng những thay đổi nội dung; cấu trúc HTML sẽ là giống nhau cho tất cả ba section, nhưng văn bản và hình ảnh sẽ khác nhau.
Bây giờ, hãy xem lại mã cho tất cả ba section, nó khá nhiều!
1 |
<main>
|
2 |
<section>
|
3 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
4 |
<div>
|
5 |
<h2>Sleep</h2> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="#">The Snooze Inn</a> |
9 |
</li>
|
10 |
<li>
|
11 |
<a href="#">Zzz Hotel</a> |
12 |
</li>
|
13 |
</ul>
|
14 |
</div>
|
15 |
</section>
|
16 |
|
17 |
<section>
|
18 |
<img src="images/townfood.svg" alt="Illustration of a Tuts Town restaurant." /> |
19 |
<div>
|
20 |
<h2>Food</h2> |
21 |
<ul>
|
22 |
<li>
|
23 |
<a href="#">Just Cookies</a> |
24 |
</li>
|
25 |
<li>
|
26 |
<a href="#">Cake Too</a> |
27 |
</li>
|
28 |
</ul>
|
29 |
</div>
|
30 |
</section>
|
31 |
|
32 |
<section>
|
33 |
<img src="images/townshop.svg" alt="Illustration of a Tuts Town store." /> |
34 |
<div>
|
35 |
<h2>Shop</h2> |
36 |
<ul>
|
37 |
<li>
|
38 |
<a href="#">Puppy Parade</a> |
39 |
</li>
|
40 |
<li>
|
41 |
<a href="#">Cool Kittens</a> |
42 |
</li>
|
43 |
</ul>
|
44 |
</div>
|
45 |
</section>
|
46 |
</main>
|
Footer (Phần chân của trang web)
Một <footer> sẽ là phần tử đầu tiên sau thẻ đóng của phần tử <main>; nó sẽ không được lồng bên trong đó.
Sau đó chúng ta có thể thêm phần tử footer vào trong trang, sẽ đặt ở cùng cấp với phần tử main (chính), vì chúng đều lồng trong body.
Nội dung duy nhất mà chúng ta có trong footer của chúng ta là một câu về người đã làm ra trang web của chúng ta (chúng tôi đã làm!) Nội dung này sẽ được bọc trong một phần tử <p> (đoạn văn) lồng trong footer.
1 |
<footer>
|
2 |
<p>Created with enthusiasm by caring residents.</p> |
3 |
</footer>
|
Xem lại Toàn bộ Trang web
Chắc bạn đã rất hứng thú khi lưu tài liệu HTML và làm mới trình duyệt? Tôi cũng vậy! Hãy xem lại toàn bộ trang web trước khi chúng ta tóm tắt:
Xem lại các Phần tử được sử dụng
Chúng ta đã nói về rất nhiều về các phần tử khác nhau ở đây, vì vậy, hãy nhanh chóng xem xét những cái mà chúng ta đã sử dụng trong tập tin HTML của chúng ta:
<html> | Giữ tất cả các HTML của chúng ta |
<head> | Nơi mà chúng ta đặt thông tin về trang web |
<title> | Tiêu đề của trang web |
<body> | Giữ tất cả nội dung của trang web |
<header> | Giữ thông điệp chào đón của chúng ta |
<h1> và <h2> | Các đề mục của chúng ta |
<img> | Mang một hình ảnh vào trong trang |
<main> | Dùng cho nội dung chính |
<section> | Chia tách trang thành các phần |
<div> | Một kho chứa chung |
<ul> | Một danh sách không thứ tự |
<li> | Một phần tử bên trong một danh sách |
<a> | Được sử dụng để liên kết đến một nơi nào đó |
<footer> | Nội dung dưới cùng |
Tóm tắt
Trong khóa học này, chúng ta đã học tất cả về cách gắn nội dung vào các cấu trúc HTML siêu mạnh mẽ, chúng ta đã làm bằng tay không (à, và một cái máy tính).
Tiếp theo chúng ta sẽ tìm hiểu về cách định phong cách cho trang web này để làm cho nó đẹp và lôi cuốn nhất có thể, nhưng cũng dễ dàng hơn để đọc và sử dụng.
Hẹn gặp lại bạn trong thị trấn!
