Bài 1: Thiết kế bố cục của trang web

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!
Bài 1: Thiết kế bố cục của trang web - AnonyHome


Như đã giới thiệu trong bài trước. Hôm nay sẽ là bài đầu tiên trong loạt bài tự thiết kế website bằng HTML cơ bản của AnonyHome. Trong bài này chúng ta sẽ cùng nhau thiết kế bố cục cho trang web của chúng ta.

Click vào quảng cáo trên website để ủng hộ AnonyHome

Oke! Bắt đầu nào.
Đầu tiên các bạn mở 1 trình soạn thảo bất kì (có thể là notepad, notepad++, sublime …). Ở đây mình dùng sublime text nhé. Còn bạn nào không biết về sublime thì có thể tìm kiếm trên Google.
Tiếp theo tạo một thư mục và đặt tên tùy ý. Ở đây mình để là web-demo. Sau đó tạo một file HTML đặt tên là layout.html với nội dung như sau:

<!DOCTYPE html>
<html>
<head>
<!-- page title -->
<title>...</title>
</head>
<body>
<!-- menu -->
<div id="main-menu">
...
</div>

<!-- content -->
<div id="main-content">
...
</div>

<!-- footer -->
<div id="footer">
...
</div>
</body>
<html>
File layout.html này sẽ chứa bố cục chung dành cho các trang web của website. Hầu hết các website ngày nay sẽ chứa nhiều hơn một trang (web), với mỗi trang bao gồm mã HTML và có thể có thêm mã CSS và JavaScript.
Như đã giới thiệu website mà chúng ta đang làm sẽ gồm có tất cả 3 trang:

  • Trang Chủ
  • Trang Giới Thiệu
  • Trang Liên Hệ
  • Phần tiêu đề trang nằm trong thẻ <title>
  • Phần menu nằm trong thẻ <div id="menu"> gồm danh sách cách liên kết để đi đến từng trang
  • Phần nội dung chính của trang nằm trong thẻ <div id="main-content">
  • Phần footer cuối trang nằm trong thẻ <div id="footer">

Dù mỗi website thường có nhiều trang (web) khác nhau nhưng thông thường thì các trang web (của cùng một website) đều có một bố mục HTML gần giống nhau và chỉ khác nhau ở một số phần nội dung nhất định.

Cụ thế đối với website của chúng ta đang làm thì bố cục HTML của tất cả các trang web (xem trong file layout.html) đều gồm có các phần sau:
Chúng ta sẽ sử dụng mã HTML trong file layout.html này để áp dụng tạo lần lượt từng trang web của website trong các bài học tiếp theo. Kết thúc bài hướng dẫn đầu tiên của mình tại đây. Hẹn gặp các bạn trong bài tiếp theo nhé.
Nếu thấy hay đừng quên chia sẻ bài viết để ủng hộ Ad
Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Thú nhận là người học rất…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x