WEB1013 –XÂY DỰNG TRANG WEB TRANG 1 M ỤC TIÊU : Kết thúc bài thực hành này bạn có khả năng Nhúng Youtube Video Nhúng Gmap Nhung uhChat B ÀI 1 3 ĐIỂM Hãy nhúng một video từ You
Trang 1WEB1013 –XÂY DỰNG TRANG WEB TRANG 1
M ỤC TIÊU :
Kết thúc bài thực hành này bạn có khả năng
Nhúng Youtube Video
Nhúng Gmap
Nhung uhChat
B ÀI 1 (3 ĐIỂM )
Hãy nhúng một video từ Youtube vào trang giới thiệu (about.html) theo hướng dẫn sau:
Bước 1: Lấy mã tích hợp
Nhấp [Share] > [Embed] > Chép mã tích hợp đặt vào trang about
Trang 2WEB1013 –XÂY DỰNG TRANG WEB TRANG 2
Viết mã CSS cho video-container{} và video-container>iframe,- như sau
B ÀI 2 (4 ĐIỂM )
Nhúng bản đồ vào trang liên hệ (contact.html) theo hướng dẫn sau
Bước 1: Tạo bản đồ https://www.google.com/maps/d/?hl=vi
Trang 3WEB1013 –XÂY DỰNG TRANG WEB TRANG 3
Nhấp nút [TẠO BẢN ĐỒ MỚI]
Bước 2: Cung cấp tên và mô tả cho bản đồ
Nhấp vào dòng chữ [Bản đồ không có tiêu đề] > Nhập thông tin bản đồ vào form sau:
Nhấp nút *Lưu+ > bây giờ bản đồ đã có tên như hình sau
Trang 4WEB1013 –XÂY DỰNG TRANG WEB TRANG 4
Bước 3: Tìm và đánh dấu điểm trên bản đồ
o Phóng bản đồ và tìm điểm muốn đánh dấu
o Nhấp biểu tượng đánh dấu
o Nhấp vào điểm muốn đánh dấu
o Cung cấp thông tin
o Nhấp vào nút *Lưu+
Bước 4: Chia sẻ bản đồ mức công khai
Trang 5WEB1013 –XÂY DỰNG TRANG WEB TRANG 5 Nhấp vào [Chia sẻ]
Trang 6WEB1013 –XÂY DỰNG TRANG WEB TRANG 6 Nhấp vào *Thay đổi]
Trang 7WEB1013 –XÂY DỰNG TRANG WEB TRANG 7 Chọn mức chia sẻ công khai > *Lưu+ > *Đã xong+
Bước 4: Điều chỉnh độ phóng của bản đồ cho phù hợp và lưu thay đổi
Trang 8WEB1013 –XÂY DỰNG TRANG WEB TRANG 8
Bước 5: Lấy mã tích hợp bản đồ và nhúng vào trang web
Trang 9WEB1013 –XÂY DỰNG TRANG WEB TRANG 9
Chép lấy đoạn mã tích hợp và nhúng vào trang contact.htm
Bước 6: Chạy và xem kết quả
B ÀI 3 (3 ĐIỂM )
Nhúng uhChat vào trang chủ của website theo các hướng dẫn sau
Bước 1: vào uhchat.com/vn và đăng ký tài khoản
Trang 10WEB1013 –XÂY DỰNG TRANG WEB TRANG 10
o Chọn tab *Mã nhúng+ > Chép mã nhúng > Đặt mã nhúng vào trang chủ
o Chạy trang chủ bạn sẽ thấy hộp chat xuất hiện ở góc dưới bên phải cửa
sổ trang web
o Thực hiện gửi vài tin nhắn đến quản trị website
Bước 3: Trả lời người dùng
Trang 11WEB1013 –XÂY DỰNG TRANG WEB TRANG 11
Quay trở lại trang chủ website của bạn, bạn sẽ thấy hồi đáp của bạn xuất hiện trên hộp chat
Bước 4: Cấu hình hộp chat
uhChat cho phép bạn điều chỉnh để thay đổi các thông số của hộp chat như:
o Hình đại diện của quản trị viên
o Màu sắc
o Vị trí hiển thị của hộp chat
o Các tin nhắn tự động
o …
Trang 12WEB1013 –XÂY DỰNG TRANG WEB TRANG 12
Trang 13WEB1013 –XÂY DỰNG TRANG WEB TRANG 13