Gửi tới bạn bài thực hành lập trình web số 2a: Sử dụng ngôn ngữ HTML để trình bày trang web cơ bản.
1. Đề bài
Bài 2: Sử dụng ngôn ngữ HTML để trình bày trang web với nội dung sau:
>> Source code: https://github.com/ttnguyenblog/bai-thuc-hanh-2a
2. Phân tích
Thẻ <h1>
Thẻ <h1> thường là thẻ tiêu đề đầu tiên được hiển thị trên một trang.
Flexbox
Sử dụng flexbox bố cục trang trong CSS để dàn trang, chia thanh điều hướng thành 2 cột: display:flex. Hoặc có thể sử dụng bảng để chia cột.
Thẻ <hr>
Thẻ <hr>dùng để kẻ một đường ngang trong trang web, phân cách giữa các đoạn văn, các nhóm nội dung để dễ đọc.
Thẻ <article>
article là phần tử để bao bọc nội dung độc lập, nó có thể là một bài post của diễn đàn, một bài viết của trang, một bài báo, một bình luận … hoặc bất kỳ một nội dung độc lập nào.
Thẻ <article> trong HTML5 được dùng thay thế cho thẻ <div> của HTML4.
<article> <h1>Tiêu đề bài viết</h1> <p>Các nội dung bài viết</p> </article>
Thẻ <section>
Thẻ <section> dùng để phân chia một cách logic một trang, một article. Vậy Thẻ <section> dùng để chia nội dung trong một article. Ví dụ như trang chủ có thể có một <section> chứa thông tin giới thiệu về công ty, <section> khác chứa mục tin tức, <section> khác chứa thông tin liên hệ …
Mỗi <section> là một khối xác định, thường nó có chứa các tiêu đề (h1 – h6) để phân chia <section>
<article>
<h1>Chào mừng</h1>
<section>
<h1>Tiêu đề</h1>
<p>Nội dung, hình ảnh ...</p>
</section>
</article>
Thẻ img
– Các thuộc tính của thẻ <img>
| src | Xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web |
| alt | Xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác |
| border | Xác định độ dày của đường viền bao xung quanh tấm hình |
| width | Thiết lập chiều rộng cho tấm hình |
| height | Thiết lập chiều cao cho tấm hình |
Thuộc tính scroll-behavior:smooth
Khi thiết lập thuộc tính scroll-behavior thành “smooth”, việc cuộn trang sẽ được thực hiện một cách mượt mà và có hiệu ứng chuyển động nhẹ. Thay vì nhảy đến vị trí mới ngay lập tức khi người dùng nhấp chuột vào một liên kết trong một hộp có thể cuộn, trang sẽ được cuộn một cách mượt mà theo một đường cong nhẹ để đến vị trí mới.
Trên đây là hướng dẫn làm bài thực hành số 2 lập trình web cơ bản. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.
