メインコンテンツまでスキップ

HTML

AGL không coding html một cách trực tiếp, mà sẽ dùng EJS template
Đối với cách viết này sẽ hỗ trợ bạn coding 1 cách nhanh hơn, liên kết các file html một cách linh hoạt.
Template sẽ được công ty cung cấp khi bắt đầu làm task.

HTML Semantics​

Một kỹ năng cần thiết đó là bạn phải hiểu về thẻ html và ý nghĩa của việc dùng thẻ cho đúng mục đích.
Ví dụ, khi tạo một thanh menu:

Good ❤️

<nav>
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</nav>

Bad 💢

<div>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

👉 Tham khảo thêm HTML Semantics:

Hiểu các bộ phận chung của trang web​

TODO: Tạo button​

  • thẻ cơ bản
  • biểu tượng với font-awesome
  • hiển thị nào tốt hơn: block, inline-block, flex?
  • hover, active, focus
ghi chú
  • Nếu trong design không có yêu cầu hiệu ứng hover thì set hover mặc định cho các nút / link là opacity: 0.7.
  • Nếu link không được chỉ định đường dẫn thì đặt href=”#”.
  • Chú ý vùng phủ link, phải phủ link đúng vị trí của link.
  • Link ngoài phải có thuộc tính target=_blank.

Cách tạo một Header​

TODO: Tạo Header​

  • thẻ cơ bản
  • hiển thị nào tốt hơn: block, inline-block, flex?
  • hover, active, focus

Cách tạo một Section​

TODO: Tạo Section​

  • thẻ cơ bản
  • hiểu đúng cấu trúc của một section
  • hiển thị nào tốt hơn: block, inline-block, flex?
ghi chú

Chú ý trong 1 section:

  • Phải có ít nhất 1 thẻ heading <h>, nếu không có heading hãy dùng div
  • Nếu đã có thẻ <h4> thì phải có thẻ <h3>, <h2> ở trước.
  • Font-size của các thẻ heading trong section phải đảm bảo quy tắc h2 > h3 > h4 > h5 > h6

Cách tạo một danh sách (List)​

TODO: Tạo List​

  • hiểu cách dùng thẻ khi tạo 1 List
  • hiển thị nào tốt hơn: block, grid, flex?
  • hiểu được cách bố trí layout theo cột

Xử lý hình ảnh​

TODO: Image​

  • hiểu được các cách dùng thẻ img
  • hiểu được cách hiển thị của hình trên các màn hình có độ phân giải cao
  • hiểu được các dạng hình ảnh tối ưu cho việc tải xuống
ghi chú
  • Bắt buộc phải có atl, alt chứa title chính của section hoặc của item, block, alt của logo là tên website.
  • Phải giữ cho hình ảnh không bị biến dạng khi responsive.
  • Đảm bảo hình phải có tỉ lệ x2 trên Mobile và màn hình Rentina.

Lưu ý khi coding HTML​

  • Viết HTML đúng cú pháp, đúng thẻ.
  • Phải được kiểm tra Validate HTML W3C.
  • 1 page chỉ có duy nhất 1 thẻ <h1>, thẻ <h1> không chứa logo mà chứa 1 title trọng điểm của page đó.