Bài trước: CuTeoHocLamWeb (8): Thao các căn bản trên blogger
-----
9. Làm giao diện một trang thương mại
9.1 Trang mẫu
Để việc học thú vị, chúng ta sẽ cùng nhau làm giao diện một trang web thương mại thực tế.
Đây là trang mẫu, chúng ta sẽ cùng nhau làm từng phần của giao diện web: https://bercy.bold-themes.com/demo-01/
Chúng ta sẽ vừa làm vừa học các kỹ thuật và khái niệm liên quan đến HTML, CSS và JavaScript.
- Tạo thư mục dự án trong ổ đĩa D:\ hoặc E:\, đặt tên thư mục dự án là coffeeshop
- Trong thư mục coffeeshop, tạo tập tin index.html và tạo 4 thư mục con gồm: html, css, js, assets
- Mở tập tin
index.html bằng VS code để bắt đầu lập trình
- Trong VS code, gõ dấu chấm than (!) > tab để tạo ra cấu trúc của một tài liệu html như sau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- Chúng ta sẽ viết mã HTML vào vùng <body> </body>
Như đã biết, nội
dung trang web sẽ được tạo ra trong vùng <body> </body>.
Để tạo ra nội dung trang web, chúng ta sử dụng các thẻ của HTML.
Thẻ gồm phần mở thẻ (ví dụ <body>) và phần đóng thẻ (ví dụ </body>).
Một thẻ luôn gồm phần mở thẻ và phần đóng thẻ, với tên giống nhau.
Nội dung của thẻ cho biết ý nghĩa của phần nội dung bên trong. Ví dụ, muốn tạo ra một đoạn văn bản thì sử dụng thẻ <p> Đây là một đoạn văn bản </p>, chữ p viết tắt của paragraph (đoạn văn bản).
Quan lại trang web https://bercy.bold-themes.com/demo-01/, trang này sẽ gồm 3 phần là:
- Phần đầu trang, sử dụng thẻ <header> để tạo
- Phần giữa trang, sử dụng thẻ <main> để tạo
- Phần cuối trang, sử dụng thẻ <footer> để tạo
Chúng ta cùng tạo 3 phần cho trang web với mã nguồn như sau:
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
9.2 Phần header
Nội dung vùng header:
Gồm logo, menu cấp 1
và các biểu tượng (icon) có gắn liên kết (link) tới facebook, twitter và
Instagram.
Lấy hình logo, lưu về thư mục assets: chuột phải vào hình logo > chọn save images as, đặt tên là logo_black.png > để lưu vào assets.
Header
Trong phần header,
chúng ta tạo một vùng con bên trong, sử dụng thuộc tính (attribute) class
để đặt tên cho vùng này là site-branding.
Để tạo các vùng, sử
dụng thẻ <div> (viết tắt của division - vùng).
<header>
<div class="site-branding">
</div>
</header>
Vì div là phần
tử trung tính (không có ngữ nghĩa), nên thuộc tính class=”site-branding”
cũng cho chúng ta biết được ý nghĩa của phần tử div tương ứng. Ngoài ra,
thuộc tính class sẽ được sử dụng để định dạng, trang trí cho phần tử <div
class=”site-branding” tương ứng bằng CSS.
Vùng site-branding
là vùng để hiển thị thông tin nhận diện thương hiệu.
Trong <div
class="site-branding"> tạo một div con <div class="site-branding-inner">.
Trong <div
class="site-branding-inner">, tạo 2 div con, gồm: <div class="site-branding-logo"> và <div
class="main-navigation">
Xem mã nguồn:
<header>
<div
class="site-branding">
<div
class="site-branding-inner">
<div
class="site-branding-logo">
</div>
<div
class="main-navigation">
</div>
</div>
</div>
</header>
Trong <div
class="site-branding-logo">, sử dụng phần tử a để tạo ra một liên kết, bên trong liên kết
này là hình logo.
Phần tử a là
viết tắt của chữ anchor, có nghĩa là cái mỏ neo, dùng để móc vào một nơi khác.
Cú pháp của phần tử a
là <a href="trang1.html">Trang
1</a>
Trong đó:
- href là thuộc tính,
chứa địa chỉ (URL) của một trang web, hoặc một vùng trong trang web. Với href
là viết tắt của hypertext reference, nghĩa là tham chiếu tới một siêu văn bản.
- “Trang 1” là
nội dung được hiển thị ra ngoài giao diện, khi người dùng bấm chuột vào “Trang
1”, trình duyệt sẽ mở trang web “trang1.html”
Trong phần này, chúng
ta sẽ thay thế chữ “Trang 1” là một cái hình. Để chèn hình, sử dụng phần tử
img. Cú pháp của phần tử <img> là:
<img
width="178" height="180"
src="assets/logo_black.png">
Trong đó:
- Phần tử img là viết
tắt của image (hình ảnh)
- Thuộc tính width
xác định chiều rộng của ảnh (178 pixel), thuộc tính height xác định
chiều cao của ảnh (180 pixel)
- Thuộc tính src là
viết tắt của source (nguồn ảnh), trỏ tới vị trí của tập tin hình ảnh (assets/logo_black.png)
[index.html]
…
<div class="site-branding-logo">
<a href="index.html">
<img width="178" height="180" src="assets/logo_black.png">
</a>
</div>
<div class="main-navigation">
…
Lưu lại mã nguồn, mở
trang index.html bằng trình duyệt để xem kết quả.
Menu chính (hay Menu cấp 1), gồm 5 mục: Home, About, Blog, Shop, Elements.
Trong HTML, người ta
gọi vùng menu (trình đơn) là vùng điều hướng (navigation). Do vậy, chúng ta sẽ
sử dụng phần tử nav để tạo vùng điều hướng.
Trong phần tử <div
class="main-navigation">, tạo phần tử nav với thuộc tính class="menu-primary-menu-container"
<div
class="main-navigation">
<nav
class="menu-primary-menu-container">
</nav>
</div>
Để tạo các mục của
menu, chúng ta sử dụng phần tử ul.
Phần tử ul là
viết tắt của unordered list, nghĩa là một danh sách không có thứ tự. Trong ul,
sử dụng phần tử li để tạo các mục con. Phần tử li là viết tắt của list
item, nghĩa là các mục của danh sách.
<div class="main-navigation">
<nav class="menu-primary-menu-container">
<ul class="main-navigation-menu">
<li class="menu-item">Home</li>
<li class="menu-item">About</li>
<li class="menu-item">Blog</li>
<li class="menu-item">Shop</li>
<li class="menu-item">Elements</li>
</ul>
</nav>
</div>
Lưu lại tập tin
index.html, cập nhật lại trang web (refresh) để xem kết quả trên trình duyệt.
Chúng ta sẽ tạo tiếp vùng các biểu tượng mạng xã hội (icon liên kết).
Vùng các biểu
tượng mạng xã hội cùng cấp với vùng điều hướng (navigation). Vì vậy, chúng ta
sẽ tạo phần tử <div class="site-navigation-widgets"> trong <div class="main-navigation">
<div class="main-navigation">
<nav class="menu-primary-menu-container">
<ul class="main-navigation-menu">
...
</ul>
</nav>
<div class="site-navigation-widgets">
</div>
</div>
Trong phần tử <div class="site-navigation-widgets">, tạo 3 phần tử a để gắn liên kết tới 3 ứng dụng mạng xã hội facebook, x và instagram. Tạm thời chưa có tài khoản cụ thể của mạng xã hội, nên thuộc tính href sẽ tạm trỏ tới trang gốc của 3 mạng xã hội.
<div class="site-navigation-widgets">
<a href="https://www.facebook.com/"></a>
<a href="https://x.com/"></a>
<a href="https://www.instagram.com/"></a>
</div>
Trong 3 phần tử a, chèn biểu tượng (icon) của 3 mạng xã hội tương ứng. Sử dụng phần tử i, giá trị thuộc tính class là giá trị của icon, ví dụ cho facebook: <i class="ri-facebook-fill"></i>.
<div class="site-navigation-widgets">
<a href="https://www.facebook.com/"><i class="ri-facebook-fill"></i></a>
<a href="https://x.com/"><i class="ri-twitter-x-line"></i></a>
<a href="https://www.instagram.com/"><i class="ri-instagram-line"></i></a>
</div>
Mở trình duyệt, sẽ chưa thấy 3 biểu tượng của 3 mạng xã hội. Bạn cần nhúng thêm mã CSS cho phần tử i, bằng cách chép dòng mã sau vào vùng <head> của tập tin index.html.
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
rel="stylesheet"/>
[index.html]
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet"/>
</head>
Lưu lại tập tin mã nguồn, mở lại trang web để xem kết quả, như hình sau.
9.5 Bài tập
Bài tập 9.1 Lập trình các đoạn mã trong bài học.
Cập nhật: 28/2/2025
Bài sau: