Coding header Web Landing Page - Phần 1

Dẫn nhập

Ở bài học trước chúng ta đã cùng SET UP WEB LANDING PAGE.

Trong bài này, chúng ta sẽ bắt tay vào code phần đầu tiên của web, đó chính là header.

Nội dung

Để đọc hiểu bài này tốt nhất, bạn nên xem qua các nội dung: 

• TỔNG QUAN HTML CƠ BẢN
• TỔNG QUAN CSS CƠ BẢN
• CẤU TRÚC MODEL BOX TRONG CSS
• SET UP FILE HTML & CSS

Trong bài này, Kteam sẽ cùng bạn tìm hiểu các nội dung: 

• Thẻ danh sách có thứ tự và không có thứ tự. 
• Code HTML
• Code CSS

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

Thẻ danh sách có thứ tự và không có thứ tự

Như bạn đã biết, danh sách là một tổ hợp các phần tử được tổng hợp chung nhờ một yếu tố liên quan nào đó. Ở đây, Kteam không nói sâu về định nghĩa danh sách mà chỉ đề cập đến cấu trúc & cách sử dụng của hai loại danh sách chính trong HTML gồm: danh sách có thứ tự & danh sách không có thứ tự.

Bạn có thể tìm hiểu kỹ hơn về danh sách trong link bên dưới: 

DANH SÁCH TRONG HTML

Danh sách có thứ tự

Là loại danh sách mà các phần tử con có thứ tự nhất định, và không thể hoán đổi vị trí cho nhau. 

Cú pháp

<ol>
  <li>Nội dung phần tử 1</li>
  <li>Nội dung phần tử 2</li>
  <li>Nội dung phần tử 3</li>

...
</ol>

Trong đó: 

• <ol> </ol> dùng để mở & đóng danh sách có thứ tự.
• <li> </li> mở đóng phần tử con của danh sách. 

Style Ký hiệu CSS của danh sách có thứ tự

Để thêm style cho danh sách bạn có thể thêm đoạn code sau vào thẻ <ol> hoặc trong file Css.style.

<ol type="1">
  ...
</ol>
1
2
3
4

Một số style thứ tự cơ bản của danh sách:

• type="1": (mặc định) Các phần tử được đánh thứ tự bằng số.
• type="A": các phần tử được đánh thứ tự bằng chữ in hoa, theo bảng chữ cái.
• type="a": các phần tử được đánh thứ tự bằng chữ thường, theo bảng chữ cái.
• type="I": các phần tử được đánh thứ tự bằng chữ số in, theo số la mã.
• type="i": các phần tử được đánh thứ tự bằng chữ số thường, theo số la mã.

Thẻ danh sách không có thứ tự

Là loại danh sách mà các phần tử con không có thứ tự, có thể hoán đổi vị trí cho nhau mà không gây ảnh hưởng đến ý nghĩa biểu đạt của danh sách.

Cú pháp

<ul>
  <li>Nội dung phần tử 1</li>
  <li>Nội dung phần tử 2</li>
  <li>Nội dung phần tử 3</li>

...
</ul>

Trong đó: 

• <ul> </ul> dùng để mở & đóng danh sách không có thứ tự.
• <li> </li> mở đóng phần tử con của danh sách.

Style Ký hiệu CSS của danh sách không thứ tự

Để thêm style cho danh sách bạn có thể thêm đoạn code sau vào thẻ <ul> hoặc trong file Css.style.

<ul style="list-style-type:disc">
  ...
</ul>
1
2
3

Một số style ký hiệu cơ bản của danh sách:

• disc: (mặc định) chấm tròn, đen.
• circle: hình tròn trắng, viền đen.
• square: hình vuông, đen.
• none: không có ký hiệu.

Code HTML

Chúng ta sử dụng cặp thẻ đóng mở <header></header> để chứa toàn bộ nội dung phần header.

<header>
    <a href="#"><img class="logo" src="./resources/img/logo.png" alt="logo"></a>
    <ul class="main-nav">
        <!-- unordered list -->
        <li><a href="#">How Clients Think</a></li>
        <!-- list item -->
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="row">
        <h1 class="heading-main-text">
            We will study <br> English together.<br>
            So join with us.
        </h1>
        <a href="#" class="btn">Tell me more</a>
        <a href="#" class="btn">Join us</a>
    </div>
</header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Code CSS

header {
  background-image: url("../img/background4.jpeg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  /* view height */
  background-attachment: fixed;
}

.logo {
  width: 350px;
}

.row {
  width: 1140px;
  margin: 0 auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Project tham khảo 

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới! 

Kết luận

Ở bài này chúng ta đã code xong 1 phần HTML của phần Header, cũng như 1 số các thuộc tính CSS của phần này.

Ở bài sau chúng ta sẽ tiếp tục thực hiện tiếp phần Header này.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập – Thử thách – Không ngại khó”.

Tài liệu 

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Coding header Web Landing Page - Phần 1 dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. 

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Coding header Web Landing Page - Phần 1 dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK