Leaderboard ads banner

Thiết Kế Trang Liên Hệ

Trong bài học này chúng ta sẽ tạo trang web cuối cho website là trang liên hệ. Giống như ở bài học tạo thiết kế trang giới thiệu trước thì bước đầu chúng ta làm đó là tạo một tập tin HTML có 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>Liên Hệ</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 liên hệ của 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>Liên Hệ</h1>
        <p>Mọi thắc mắc quý khách hàng vui lòng liên hệ số điện thoại 028xxx hoặc gọi cho chúng tôi vào Hotline 1900xxx.</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

Nhúng Google Map

Ở phần này chúng ta sẽ tìm hiểu cách nhúng bản đồ Google Map vào trang web sử dụng thẻ <iframe>.
Khác với cách nhúng nút like và share của Facebook vào trang mà chúng ta đã thực hiện ở phần trước thì cách nhúng bản đồ Google Map vào trang không đòi hỏi bạn cần tạo một ứng dụng Google. Thậm chí bạn có thể lấy đoạn mã nhúng Google Map mà không cần phải đăng nhập vào một tài khoản Google.

Bạn thực hiện việc lấy đoạn mã nhúng bản đồ Google Map theo 3 bước sau:

  • Đầu tiên bạn hãy truy cập vào trang chủ Google Map tại địa chỉ https://www.google.com/maps.
  • Trong ô tìm kiếm ở góc trái phía trên cùng bạn gõ vào địa chỉ công ty của bạn và click chọn kết quả phù hợp trong danh sách trả về các địa điểm gợi ý.
  • Nhấp vào Share và trong cửa sổ hiển thị nhấp chọn Embeed map và sao chép đoạn code HTML như trong hình phía dưới.

Lấy mã nhúng Google Map

Tiếp theo bạn dán mã này vào ngay trước thẻ đóng </div> tương ứng với thẻ mở <div id="main-content"> như sau (thay đoạn code <iframe> bằng đoạn code bạn lấy từ Google Map):

    ...
    <div id="main-content">
        <h1>Liên Hệ</h1>
        <p>Mọi thắc mắc quý khách hàng vui lòng liên hệ số điện thoại 028xxx hoặc gọi cho chúng tôi vào Hotline 1900xxx.</p>
        <div>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.4961465198016!2d106.69845251488363!3d10.7732607121978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f4743648f3d%3A0x16ce95918cb14834!2sSaigon+Centre+Shopping+Mall!5e0!3m2!1sen!2s!4v1517406862987" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
    </div>
    ...

Cuối cùng tải lại trang trên trình duyệt để kiểm tra, bạn sẽ thấy kết quả hiển thị tương tự như hình bên dưới:

Hiển thị trang liên hệ trên trình duyệt

Tới đây bạn đã hoàn tất việc tạo trang liên hệ cho website.

Nội dung không được để trống

Hướng Dẫn Liên Quan