Bài tập HTML CSS | Làm giao diện trang Zing.vn

0
3006

Đây là bài tập HTML CSS cơ bản đầu tiên mà chúng ta nên làm .Ở bài viết này mình sẽ hướng dẫn các bạn sẽ làm trang Zing.vn bằng HTML và CSS. Nói nghe ghê vậy thối chứ chúng ta sẽ làm một phần nhỏ trước :D, mình sẽ bắt đầu luôn.

Bài tập HTML CSS

Bài tập HTML CSS

Chúng ta sẽ làm phần nội dung mà mình khoanh tròn 😀

Bài tập HTML CSS

Kiến thức cần có:

Các thẻ HTML cơ bản:

  • Thẻ đóng khối <section> <article> <div>
  • Thẻ tiêu đề <h1> <h2> …
  • Thẻ đoạn văn <p>
  • Thẻ hình ảnh <img>
  • Thẻ link <a>
  • Thẻ danh sách ul

Các thuộc tính css cơ bản:

Xem ở bài viết trước nhé 😀

Phân tích bài tập:

Bài này khá đơn giản chúng ta sẽ chia thành 2 phần

  • Phần to

Bài tập HTML CSS

  • Phần nhỏ

Bài tập HTML CSS

Phần to:

  • Có  một ảnh lớn
  • Tiêu đề <h2>
  • Danh sách chứa 2 dòng chữ nhỏ phía dưới
  • Tất cả đều là liên kết nên có thẻ <a> ở ngoài
  • Được chứa bởi một khối <div>

Phần nhỏ

  • Có 3 ảnh nhỏ
  • 3 thẻ <p> chứa 3 dòng text
  • Tất cả đều là liên kết nên có thẻ <a> ở ngoài
  • Phần này giống nhau chúng ta chỉ cần làm 1 khối rồi x3 lên sau đó thay đổi nội dung là ok
  • Được chứa bởi một khối <article>

Hai phần này sẽ được chứa bởi khối <section>

Bây giờ mình sẽ code:

Code html:

Code css:

Okê xong rồi đấy, các bạn cứ làm giống như mình đã phân tích. Trong bài thì mình đã chèn icon cái máy quay vào nếu ai chưa biết mình sẽ hướng dẫn luôn

Thêm thẻ này vào phần <head> để sử dụng được icon trên trang fontawesome.com

Bạn có thể lấy thẻ này bằng cách tra google từ khóa get fontawesome rồi coppy paste thôi.

Sau đó vào trang fontawesome.com để tìm kiếm icon muốn thêm ví dụ ở trên mình chọn icon camera bằng cách :

  1. Gõ tìm kiếm camera
  2. Click vào icon muốn thêm
  3. Coppy đoạn mã rồi dán vào phần HTML ta muốn đặt icon

Mình sẽ làm nhiều bài tập khác trong những bài viết sau, mình xin được kết thúc bài viết tại đây.

 

avatar
  Subscribe  
Notify of