Thiết Kế Trang Giới Thiệu

Hoàng Tùng

Trong bài học này chúng ta sẽ tạo nhanh trang giới thiệu cho website. Đầu tiên chúng ta sẽ tạo một tập tin HTML với tên đầy đủ là about.html với nội dung bên trong được sao chép nội dung từ tập tin layout.html.

Tiêu Đề trang

Thay đổi tiêu đề trang tạo ra bởi thẻ <title> trong tập tin about.html thành như sau:

...
<head>
    <!-- page title -->
    <title>Giới Thiệu</title>
    ...

Lưu thay đổi lại và mở file about.html để kiểm tra hiển thị của tiêu đề trang trên thanh tab của trình duyệt. Bạn sẽ thấy kết quả hiển thị như sau:

Hiển thị tiêu đề trang giới thiệu website

Nội Dung Trang

Tiếp theo chúng ta sẽ thêm vào phần nội dung chính của trang bằng việc cập nhật mã HTML của thẻ <div id="main-content"> giống như dưới đây:

    ...
    <div id="main-content">
        <h1>Giới Thiệu</h1>
        <div>
            <img src="images/about.jpg" alt="Hình Ảnh Giới Thiệu" title="Hình Ảnh Giới Thiệu">
        </div>
        <p>ABC Co Ltd. được thành lập từ tháng 1 năm 2018 với chỉ hai nhân viên chủ chốt tính tới tới điểm này chúng tôi đã có hơn 100 nhân viên phục vụ hơn 1000 khách hàng trên cả nước.</p>
    </div>
    ...

Ở đoạn mã HTML thêm vào ở trên bạn chú ý trong thẻ <img> chúng ta sử dụng cả hai thuộc tính là alttitle. Giá trị của thuộc tính title sẽ được trình duyệt hiển thị khi người dùng rê chuột lên ảnh. Trong khi đó giá trị của thuộc tính alt được sử dụng bởi các bộ máy tình kiếm (search engine) để xác định nội dung của ảnh này liên quan tới chủ đề nào. Ngoài ra thuộc tính alt còn được đọc bởi các thiết bị screen reader dành cho những người dùng khiếm thị và trở lên đặc biệt hữu ích trong trường hợp này. Chính vì vậy bạn sẽ thấy mã HTML của rất nhiều trang web hiện này thường lựa chọn sử dụng alt và bỏ qua title.

Sau khi lưu lại và tải lại trang home.html trên trình duyệt bạn sẽ thấy kết quả hiển thị như sau:

Hiển thị của trang chủ website sau khi thêm nội dung chính

Nếu bạn không thấy trình duyệt hiển thị hình ảnh sau đề mục h1 giống như hình bên trên thì bạn cần kiểm tra lại trong thư mục images đã có tập tin about.jpg hay chưa. Nếu chưa có bạn cần chép từ source code tải về từ Github và thêm vào thư mục tương ứng trên máy bạn.

Thêm Phản Hồi