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
Để 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>
Phần 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 > để 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-inner.
Để 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-inner">
</div>
</header>