Coding header Web Landing Page - Phần 1
Lập trình Front End cơ bản với website Landing Page

Danh sách bài học
Coding header Web Landing Page - Phần 1
Nội dung bài viết Học nhanh
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:
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 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.
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.
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.
Code CSS
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ê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ác giả/Dịch giả
Khóa học
Lập trình Front End cơ bản với website Landing Page
Nếu bạn yêu thích lập trình web nhưng còn lơ ngơ không biết bắt đầu từ đâu hay đã biết cơ bản mà chưa làm được một sản phẩm nhất định nào, thì đây chính là khóa học dành cho bạn – LẬP TRÌNH FRONT END CƠ BẢN VỚI WEBSITE LANDING PAGE.
Trong phần này, Kteam sẽ giới thiệu cho các bạn về nội dung chúng ta sẽ được hướng dẫn cho khóa học này, cũng như là project mà chúng ta sẽ cùng nhau thực hiện.
Nào! Bắt đầu thôi!
Đường dẫn đến link logo không hiển thị là bị sao ta
làm sao để lấy ảnh về thực hành theo ạ
các anh cho em hỏi chỗ cuối ... để lùi heading text với button thì lệnh width để làm gì ạ
--- sau đó lệnh margin 0 auto có tác dụng gì ... mong các anh giải đáp giúp em hoặc có thể có nói ở bài trước nhưng em không biết mong các anh cho em biết
cảm ơn các anh nhiều
Cho em hỏi là: Em làm phần background của Header bên css, nhưng nó lại không hiện lên trên Live Server ạ
e sửa file style css nhưng trong live server nó không nhận được cái mình mới sửa là sao ạ ?