Thiết Kế Trang Chủ

Ở bài học trước chúng ta đã thực hiện việc tạo menu và hoàn tất việc tạo layout HTML cho webiste. Trong bài học này chúng ta sẽ tiếp tục với việc tạo trang chủ và cũng là trang web đầu tiên của website dựa trên layout đã dựng.

Để bắt đầu bạn hãy một tập tin HTML với tên home.html và sau đó sao chép toàn bộ nội dung trong tập tin layout.html và dán vào file home.html này.

Tiêu Đề trang

Ở file mới tạo ra này bạn tìm tới thẻ <title> đặt bên trong thẻ <head> và thay đổi mã lệnh HTML bên trong để giống như sau:

...
<head>
    <!-- page title -->
    <title>Trang Chủ</title>
    ...

Sau đó lưu lại.

Bây giờ nếu bạn sử dụng trình duyệt để mở tập tin home.html mới tạo này và nhìn vào thanh tab ở trên trình duyệt bạn sẽ thấy kết quả giống như hình bên dưới:

Tiêu đề trang hiển thị trên thanh tab của trình duyệt

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>Trang Chủ</h1>
        <div>
            <img src="images/home.jpg" alt="Hình Ảnh Trang Chủ">
        </div>
        <p>ABC Co Ltd. là công ty cung cấp dịch vụ thiết kế web chuyên nghiệp. Chúng tôi luôn không ngừng nỗ lực cung cấp dịch vụ tốt nhất tới quý khách hàng.</p>
    </div>
    ...

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

Bạn có thể thấy thẻ nội dung của tiêu đề <h1> lúc này hiển thị ngay tiếp theo liên kết cuối cùng trong menu. Điều này là bởi vì chúng ta đã sử dụng thuộc tính float của CSS cho phần tử div#main-menu trước đó và đã khiến cho phần tử nằm kế tiếp là h1 cũng bị ảnh hưởng:

...
    #main-menu ul li {
        float: left;
        ...

Cách khắc phục lỗi hiển thị trên khá đơn giản. Đầu tiên chúng ta sẽ thêm một phần tử div rỗng vào phía sau đoạn HTML của menu như sau:

    ...
    </div>
    <div class="clear-float"></div><!-- clear float -->
    <div id="main-content">
        ...

Sau đó chúng ta sẽ sử dụng thuộc tính clear của CSS để áp dụng cho phần tử div.clear-float mới được thêm vào ở trên. Ở ngay trước đóng thẻ </style> nằm trong file home.html bạn thêm vào đoạn mã CSS sau đây:

    ...
    .clear-float {
        clear: both;
    }
    </style>
    ...

Đoạn mã CSS đầy đủ bên trong thẻ <style> sẽ như sau:

    <style type="text/css">
        #main-menu ul {
            padding-left: 0;
            list-style-type: none;
        }
        #main-menu ul li {
            float: left;
            margin-right: 15px;
        }
        .clear-float {
            clear: both;
        }
    </style>

Bây giờ khi tải lại trang trên trình duyệt bạn sẽ thấy kết quả như sau:

Trang chủ website sau khi thêm thẻ div.clear-float

Trước khi sang phần tiếp theo thì chúng ta sẽ cần quay trở lại với file layout.html và cập nhật một số thay đổi mới tạo ra cho home.html trong file layout.html. Điều này sẽ giúp các thay đổi này cũng sẽ được áp dụng với những trang tạo sau đó dựa trên layout HTML có sẵn.

Bạn mở tập tin layout.html và thực hiện 2 bước sau:

  • Thêm vào thẻ <div class="clear-float"> trước thẻ <div id="main-content">.
  • Thêm đoạn mã CSS sử dụng thuộc tính clear để áp dụng cho phần tử div.clear-float giống như vừa mới thực hiện ở phía trước.

Thêm Nút Like và Share trên Facebook

Phần việc cuối cùng trong việc thiết kế trang chủ website đó là thêm nút like và share trang trên Facebook. Việc này khá đơn giản nhờ sử dụng thẻ <iframe>. Ở ngay trước thẻ đóng </div> tương ứng với thẻ mở <div id="main-content"> bạn thêm vào đoạn mã HTML sau:

<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.codehub.vn&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=1716503328561474" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Đoạn code trên đây áp dụng cho trang web với tên miền www.codehub.vn, nếu như bạn làm web cho khách hàng hoặc cho chính bạn thì bạn thay đổi tên miền này về tên miền bạn đang sử dụng đồng thời thay đổi giá trị appId=1716503328561474 bằng giá trị ID của ứng dụng Faceook bạn đang sử dụng.

Lưu ý: Nếu bạn chưa từng tạo ứng dụng Facebook thì tôi có thể nói với bạn rằng công việc này khá đơn giản. Bạn chỉ cần truy cập vào địa chỉ trang https://developers.facebook.com/ và nhấp vào nút Getting Started hay Bắt Đầu nằm ở góc trái trên cùng và thực hiện theo các bước chỉ dẫn.

Cuối cùng tải lại trang trên trình duyệt bạn sẽ thấy kết quả hiển thị giống như sau:

Trang chủ của website sau khi đã thêm nút like và share trên Facebook

Chúc mừng bạn đã hoàn tất việc thiết kế được trang chủ và cũng là trang web đầu tiên của website. Ở bài học tiếp theo chúng sẽ tìm hiểu cách thiết kế trang tiếp theo của website trang Giới Thiệu.

HTML Frontend Thiết Kế Web
Thêm Bình Luận: