Bài trước: Web front-end (24) - HTML - Tập làm dự án_DA1 (thiết kế)
-----
Lập trình
– Tạo thư mục và tập tin cho dự án, theo cấu trúc như sau:
\SachCu
--\Img
--index.html
--thoiGianMoCua.html
--lienHe.html
Lưu ý: bạn nên lựa chọn một phong cách đặt tên cho thư mục,
tập tin. Ví dụ, tên luôn được viết liền; tên của thư mục luôn viết hoa chữ cái
đầu tiên (theo kiểu PascalCase); tên tập tin viết thường chữ đầu tiên, các chữ
sau viết hoa chữ cái đầu tiên (theo kiểu camelCase). Bạn có thể lên mạng để đọc
thêm về các kiểu đặt tên camelCase, underscore, PascalCase.
Chúng ta sẽ bắt đầu viết mã cho trang index.html. Bạn có thể
dùng trình viết mã bất kì. Ví dụ dùng VS Code.
Trong VS Code, mở tập tin index.html, bấm tổ hợp phím Shift + 1 > Enter để tạo cấu trúc một
tài liệu HTML chuẩn, xóa đi các đoạn mã chúng ta chưa hiểu, kết quả sẽ là:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Thêm các thông tin mô tả trang web trong phần tử
<head>:
<meta charset="UTF-8">
<meta name="author" content="Cu Tèo">
<meta name="description" content="Trang chủ của tiệm sách cũ Cu Tèo">
<title>Tiệm sách cũ Cu Tèo</title>
Tạo và chèn logo:
– Bạn có thể nhờ người khác, hoặc tự thiết kế logo bằng các
phần mềm
– Hoặc lên các trang tạo logo online miễn phí
– Xem logo của các trang có sẵn để tham khảo, để ý kích thước
và loại tập tin của logo
<img src="Img/logo_300_240.jpg" alt="logo">
Tạo menu: sử dụng phần tử <nav>, <ul>,
<li>
<nav>
<ul>
<li>
<a href="#gt-ve-tiem-sach">Giới thiệu về tiệm sách</a>
</li>
<li>
<a href="#danh-muc-sach">Các loại sách đang bán</a>
</li>
<li>
<a href="thoiGianMoCua.html">Thời gian mở cửa</a>
</li>
<li>
<a href="lienHe.html">Liên hệ</a>
</li>
</ul>
</nav>
Thêm dòng nội dung “Sách mới nhập về”, sau đó là ảnh các cuốn
sách mới nhập. Sử dụng phần tử <figure>, <figcaption> và <img>.
<figure>
<figcaption>Sách mới nhập về - Ngày 6/3/2023</figcaption>
<img src="Img/SachMoiNhap_6_3_2023.jpg" alt="Sách mới nhập" title="Sách mới nhập" width="373" height="183">
</figure>
Kết thúc phần header, thêm đường kẻ ngang để phân biệt với
phần nội dung chính (main). Sử dụng phần tử <hr>
<hr>
Viết nội dung cho vùng main, sử dụng phần tử
<main>, bạn có thể viết chú thích
để tiện theo dõi mã nguồn,
<main><!-- main -->
</main><!-- end main -->
Trong vùng main, thêm nội dung Giới thiệu về tiệm sách. Chúng
ta học thêm được cách chèn các hình biểu tượng (emoji) vào trang web. Vào trang
emojipedia.org, nhập vào từ khóa bạn
muốn tìm biểu tượng, ví dụ “book”, các biểu tượng sẽ xuất hiện, bạn chọn một
cái, chọn Copy, rồi dán vào mã nguồn.
<article id="gt-ve-tiem-sach">
<h2>Giới thiệu về tiệm sách</h2>
<p>Vì sở thích đọc sách, nhất là các cuốn sách cũ 📚📚📚.</p>
<p>Năm <time datatime="2020">2020</time>,
Cu Tèo đã tạo ra
một không gian để các bạn yêu sách có thể tới
và tìm cho mình một <strong>cuốn sách ưng ý với giá phải chăng.</strong></p>
</article>
Trong article “gt-ve-tiem-sach”, thêm một câu hỏi tương tác
cho trang web. Đây là những câu hỏi đơn giản, giúp người dùng cảm thấy cuốn hút
hơn khi phải động não một chút để trả lời. Sử dụng phần tử <aside>, <details>,
<summary>, <p>.
<aside>
<h3>Mỗi ngày một câu hỏi</h3>
<details>
<summary>Tại sao gọi cô dâu chú rể là đôi uyên
ương?</summary>
<p>Uyên ương là một loài vịt, gọi là vịt uyên ương.
Chúng có ngoại hình đẹp và sống với nhau rất thủy chung.
Người ta lấy nó làm biểu tượng để gửi gắm thông điệp cho vợ chồng trong ngày
cưới.
</p>
</details>
</aside>
Kết thúc article “gt-ve-tiem-sach”, thêm đường kẻ ngang để
ngắt chủ đề.
<hr>
Viết mã để hiển thị thông tin về Các loại sách đang bán. Bao
gồm sách Kinh tế, Văn học, Truyện tranh, Kĩ thuật, và sách khác. Một phần mã
nguồn,
<article id="danh-muc-sach">
<h2>Các loại sách đang bán</h2>
<table border="1">
<caption>DANH MỤC SÁCH</caption>
<thead>
<tr>
<th>Sách Kinh tế</th>
<th>Sách Văn học</th>
<th>Truyện tranh</th>
<th>Sách Kĩ thuật</th>
<th>Sách khác...</th>
</tr>
</thead>
<tbody>
<tr>
Bạn viết tiếp mã HTML còn lại để có được bảng Danh mục sách.
Thêm thẻ <br> để xuống hàng, thêm liên kết để về đầu
trang,
<br>
<p>
<a href="#">Trở về đầu trang</a>
</p>
Thêm thông tin bản quyền, địa chỉ, điện thoại và bản đồ cho
biết vị trí của tiệm sách. Ví dụ
<footer>
<!-- footer -->
<p>Bản quyền © thuộc về Cu Tèo.</p>
<p>Địa chỉ: 15, Thông Thiên Học, Đà Lạt</p>
<p>Điện thoại: 0888 123456</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3903.318559717998!2d108.43514984927833!3d11.952432239614359!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317113afd137e6b3%3A0x3573b36a8cd2202f!2zU8OhY2ggY8WpIMSQw6AgTOG6oXQgLSBIb2EgR2nhuqV5!5e0!3m2!1svi!2s!4v1678248052804!5m2!1svi!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</footer><!-- end footer -->
Vậy là xong trang index.
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Cu Tèo">
<meta name="description" content="Trang chủ của tiệm sách cũ Cu Tèo">
<title>Tiệm sách cũ Cu Tèo</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"><!-- -->
</head>
<body>
<header>
<!-- header-->
<img src="Img/logo_300_240.jpg" alt="logo">
<h1>Tiệm sách cũ của Cu Tèo</h1>
<h3>Thêm sách > bớt game</h3>
<nav>
<ul>
<li>
<a href="#gt-ve-tiem-sach">Giới thiệu về tiệm sách</a>
</li>
<li>
<a href="#danh-muc-sach">Các loại sách đang bán</a>
</li>
<li>
<a href="thoiGianMoCua.html">Thời gian mở cửa</a>
</li>
<li>
<a href="lienHe.html">Liên hệ</a>
</li>
</ul>
</nav>
<figure>
<figcaption>Sách mới nhập về - Ngày 6/3/2023</figcaption>
<img src="Img/SachMoiNhap_6_3_2023.jpg" alt="Sách mới nhập" title="Sách mới nhập" width="373" height="183">
</figure>
</header><!-- end header-->
<hr>
<main>
<!-- main -->
<article id="gt-ve-tiem-sach">
<h2>Giới thiệu về tiệm sách</h2>
<p>Vì sở thích đọc sách, nhất là các cuốn sách cũ 📚📚📚.</p>
<p>Năm <time datatime="2020">2020</time>,
Cu Tèo đã tạo ra
một không gian để các bạn yêu sách có thể tới
và tìm cho mình
một <strong>cuốn sách ưng ý với giá phải chăng.</strong></p>
</article>
<aside>
<h3>Mỗi ngày một câu hỏi</h3>
<details>
<summary>Tại sao gọi cô dâu chú rể là đôi uyên
ương?</summary>
<p>Uyên ương là một loài vịt, gọi là vịt uyên ương.
Chúng có ngoại hình đẹp và sống với nhau rất thủy
chung.
Người ta lấy nó làm biểu tượng để gửi gắm thông điệp cho vợ chồng trong ngày
cưới.
</p>
</details>
</aside>
<article id="danh-muc-sach">
<h2>Các loại sách đang bán</h2>
<table border="1">
<caption>DANH MỤC SÁCH</caption>
<thead>
<tr>
<th>Sách Kinh tế</th>
<th>Sách Văn học</th>
<th>Truyện tranh</th>
<th>Sách Kĩ thuật</th>
<th>Sách khác...</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ol>
<li>Kinh tế 1</li>
<li>Kinh tế 2</li>
<li>Kinh tế 3</li>
<li>Kinh tế 4</li>
<li>Kinh tế 5</li>
</ol>
</td>
<td>
<ol>
<li>Văn học 1</li>
<li>Văn học 2</li>
<li>Văn học 3</li>
<li>Văn học 4</li>
<li>Văn học 5</li>
</ol>
</td>
<td>
<ol>
<li>Truyên tranh 1</li>
<li>Truyên tranh 2</li>
<li>Truyên tranh 3</li>
<li>Truyên tranh 4</li>
<li>Truyên tranh 5</li>
</ol>
</td>
<td>
<ol>
<li>Kĩ thuật 1</li>
<li>Kĩ thuật 2</li>
<li>Kĩ thuật 3</li>
<li>Kĩ thuật 4</li>
<li>Kĩ thuật 5</li>
</ol>
</td>
<td>
<ol>
<li>Từ điển</li>
<li>Giáo trình</li>
<li>Dạy đàn</li>
<li>Nấu
ăn</li>
<li>Tâm
lý</li>
</ol>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Mời bạn tới tiệm sách để tìm được cuốn sách bạn
đang yêu thích!</td>
</tr>
</tfoot>
</table>
</article>
<br>
<p>
<a href="#">Trở về đầu trang</a>
</p>
</main><!-- end main -->
<footer>
<!-- footer -->
<p>Bản quyền © thuộc về Cu Tèo.</p>
<p>Địa chỉ: 15, Thông Thiên Học, Đà Lạt</p>
<p>Điện thoại: 0888 123456</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3903.318559717998!2d108.43514984927833!3d11.952432239614359!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317113afd137e6b3%3A0x3573b36a8cd2202f!2zU8OhY2ggY8WpIMSQw6AgTOG6oXQgLSBIb2EgR2nhuqV5!5e0!3m2!1svi!2s!4v1678248052804!5m2!1svi!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</footer><!-- end footer -->
</body>
</html>
----
-----