logo

AnonyHome

Loading...

Register

Khóa Học - Lập Trình - 2018-06-25

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

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:

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

Nhận bài viết mới qua email

Chuyên mục HOT

Chuyên mục tìm hiểu ioT

Xem thêm

Popular

Newest

Related

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Chia sẻ tài liệu lập trình Android Full – FPT Software

2020-06-21

Chia sẻ Khóa học xây dựng ứng dụng triệu người xài Android Realtime với Firebase qua 5 dự án

2020-06-27

Khóa học lập trình Android Kotlin toàn tập 2020

2020-07-01

Tài liệu Java Spring MVC – Đại học FPT

2020-06-23

Full source code+Database: Quản lý thư viện+Báo cáo chi tiết

2020-02-26

Chia sẻ tài liệu học Lập trình ARM STM32, STM8, vv

2020-03-05

Chia sẻ bộ video Tự Học Angular Tiếng Việt

2020-06-29

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Bài giảng Java – Chương 3 phần 2

2021-03-03

Chia sẻ code quản lý khoá học và học viên PHP MYSQL

2021-02-25

Bài giảng Java – Chương 3 phần 1

2021-02-24

Bài giảng Java – Chương 2 phần 2

2021-02-04

Bài giảng Java – Chương 2 phần 1

2021-01-22

Sự khác biệt giữa next() và nextLine() trong Java

2021-01-22

Chương 1: Giới thiệu về Java

2021-01-13

AnonyHome ra mắt nền tảng học lập trình trực tuyến

2020-09-04

Bài giảng Java – Chương 3 phần 2

2021-03-03

Chia sẻ code quản lý khoá học và học viên PHP MYSQL

2021-02-25

Bài giảng Java – Chương 3 phần 1

2021-02-24

Bài giảng Java – Chương 2 phần 2

2021-02-04

Bài giảng Java – Chương 2 phần 1

2021-01-22

Sự khác biệt giữa next() và nextLine() trong Java

2021-01-22

Chương 1: Giới thiệu về Java

2021-01-13