Coding header Web Landing Page - Phần 1

Lập trình Front End cơ bản với website Landing Page

5.0 (3 đánh giá)
Tạo bởi Kteam Cập nhật lần cuối 6 năm trước 33.040 lượt xem 18 bình luận
Tác giả/Dịch giả: Kteam
Học nhanh

Danh sách bài học

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: 

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.

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 likeshare để ủ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! 

Đánh giá

5.0
3 đánh giá
Đánh giá
5
3
4
3
2
1
Đỗ Quốc Minh đã đánh giá 5 năm trước

Anh Nguyen đã đánh giá 5 năm trước

nekokuro245 đã đánh giá 5 năm trước

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
nitragin đã bình luận 3 năm trước

Đường dẫn đến link logo không hiển thị là bị sao ta

 

1800332 đã bình luận 4 năm trước

làm sao để lấy ảnh về thực hành theo ạ

 

nguyenpro2k3ok đã bình luận 4 năm trước

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

Nguyen Viet Duc đã bình luận 4 năm trước

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 ạ

maxouja đã bình luận 5 năm trước

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 ạ ?

Không có video.