Mục lục:
- Quân nhu
- Bước 1: Chọn một trình soạn thảo văn bản
- Bước 2: Tạo dự án mới của bạn
- Bước 3: Tạo Index.html của bạn
- Bước 4: Lấy bản đồ của bạn
- Bước 5: Thêm vào trang web
- TIỆM CÀ PHÊ GẦN BẠN
- Bước 6: Xem trước
- Bước 7: Làm cho nó trông đẹp hơn
- Bước 8: Làm cho nó trông đẹp hơn Pt2
- Bước 9: TÁI TẠO
Video: Tạo trang web định vị quán cà phê: 9 bước
2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-02-01 14:43
Trong Tài liệu hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo một trang web đơn giản hiển thị các cửa hàng cà phê gần bạn, Sử dụng Google Maps, HTML và CSS
Quân nhu
Một máy tính
Một trình soạn thảo văn bản (tôi sử dụng Atom)
Một kết nối wifi
Bước 1: Chọn một trình soạn thảo văn bản
Tôi sử dụng Atom, có thể tải xuống Tại đây. Sau khi tải xuống, hãy mở nó tạo một dự án mới
Bước 2: Tạo dự án mới của bạn
- Mở Atom
- Tìm tập tin
- Dưới tệp nhấp vào mới
- ở dưới cùng bên trái (mac) sẽ có một nút để tạo một thư mục mới
- đặt tên cho thư mục của bạn '' Trang web bản đồ '
- Nhấn mở ở dưới cùng bên phải
Bước 3: Tạo Index.html của bạn
- Thêm tệp mới vào thư mục của bạn (Trong nguyên tử, nhấp chuột phải vào thư mục và nhấn mới)
- Đặt tên tệp này là 'Index.html'
- Thêm cấu trúc HTML cơ bản này, Cấu trúc này được sử dụng trong mọi dự án HTML:
Bước 4: Lấy bản đồ của bạn
- Truy cập bản đồ Google tại đây: Google Maps
- Tìm kiếm cà phê
- bạn sẽ có được tất cả các cửa hàng cà phê trong khu vực chung của bạn
- nhấp vào ba dòng bên cạnh cà phê
- tìm bản đồ chia sẻ hoặc nhúng
- chọn bản đồ nhúng
- Chọn kích thước của bản đồ (tôi đã sử dụng Large) và hoàn thiện vị trí của bạn
- nhấn sao chép HTML
Bước 5: Thêm vào trang web
- Quay lại tệp HTML.
- giữa hai thẻ '' chèn mã này:
'
TIỆM CÀ PHÊ GẦN BẠN
'MÃ ĐƯỢC KẾT HỢP TỪ GOOGLE MAPS'
'
Bước 6: Xem trước
Đó là phần một đã xong!
lưu tệp và tìm thấy trên máy tính của bạn, Nhấp đúp vào tệp và tệp sẽ mở ra trong trình duyệt mặc định của bạn để xem trước.
Bước 7: Làm cho nó trông đẹp hơn
- Giữa hai thẻ '' thêm 'Quán cà phê gần tôi'
- Thêm tệp mới giống như cách bạn đã tạo 'Index.html' nhưng đặt tên là 'Style.css'
- quay lại tệp HTML của bạn, viết mã này phía trên tiêu đề của bạn,"
- Truy cập google hình ảnh và tải về một tách cà phê dễ thương
- Thêm hình ảnh vào thư mục chứa phần còn lại của các tệp của chúng tôi
- trong tệp CSS, Viết mã sau: 'body {
- background-image: url (TÊN HÌNH ẢNH);
- background-size: bìa;
- }'
Bước 8: Làm cho nó trông đẹp hơn Pt2
- nếu chúng tôi lưu và xem trước ngay bây giờ, chúng tôi có thể thấy rằng nền trang web hiện được lát bằng những tách cà phê của chúng tôi
- Đáng buồn thay, rất khó để đọc tiêu đề của chúng tôi
- Vì vậy, trong CSS, bên dưới 'body {}', hãy thêm mã sau: h1 {
- background-color = rgb (255, 255, 255);
- font-size = 40px;
- }
Bước 9: TÁI TẠO
Đó là nó! Bạn đã hoàn tất. Bạn đã học những kiến thức cơ bản về HTML, CSS và mã nhúng, Làm tốt lắm. Bạn có thể chỉnh sửa mã để làm cho nó phù hợp với sở thích của bạn và làm cho nó hiển thị bản đồ của bất kỳ thứ gì bạn muốn. Từ đó bạn có thể tiếp tục hành trình xây dựng trang web của mình và cải tiến mãi mãi.
Đề xuất:
Truyền dữ liệu từ Google Trang tính sang Trang tổng quan: 6 bước
Truyền dữ liệu từ Google Trang tính đến Trang tổng quan: Bảng tính xuất sắc trong việc thao tác dữ liệu nhưng không hiển thị nó. Đây chính là lý do tại sao rất nhiều công ty trực quan hóa dữ liệu và BI dashboard bắt đầu xuất hiện. Vấn đề với hầu hết các sản phẩm này là chúng thường đắt và
Kế hoạch kiểm tra quán cà phê giảm âm thanh: 5 bước
Kế hoạch Kiểm tra Giảm âm thanh tại Nhà ăn: Chúng tôi đang cố gắng chống lại mức âm thanh quá cao trong căng tin trường học của chúng tôi thông qua việc sử dụng các vật liệu làm giảm âm thanh. Để tìm ra cách tốt nhất để giải quyết vấn đề này, chúng tôi phải hoàn thành kế hoạch kiểm tra với hy vọng giảm mức decibel của chúng tôi từ mức trung bình
Thiết lập trang web với trình tạo trang của Google: 6 bước
Thiết lập trang web với Trình tạo trang của Google: Cách thiết lập trang web với Trình tạo trang mới của Google Labs. (Cách tạo một trang web 100mb đơn giản miễn phí và có nó trong một buổi chiều.) Bao gồm cách, liên kết trang biểu mẫu với trang, liên kết đến các trang khác, liên kết đến tệp html đã tải lên, bao gồm hình ảnh,
Hợp nhất trang web của bạn (Trình tạo trang của Google) với Picasa trên Anbom dòng: 5 bước
Hợp nhất trang web của bạn (Trình tạo trang của Google) với Picasa trên Anbom dòng: Xin chào, đây là tài liệu hướng dẫn đầu tiên của tôi, hãy tận hưởng nó! tiếp tục với hướng dẫn này Thiết lập một trang web với Trình tạo trang của Google
Thêm một trang web Drupal ảo vào một trang trại Drupal được tách biệt hoàn toàn: 3 bước
Thêm Trang web Drupal Ảo vào Trang trại Drupal được Tách biệt Hoàn toàn: Drupal là Hệ thống Quản lý Nội dung (CMS). Một trong những tính năng nổi bật của nó là dễ dàng quản lý một số trang web từ một cơ sở mã - Trang trại Drupal được ca ngợi rất nhiều