Een coffeeshop maken Website vinden: 9 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-02-01 14:41

In deze Instructable laat ik je zien hoe je een eenvoudige website maakt met coffeeshops bij jou in de buurt, met behulp van Google Maps, HTML en CSS

Benodigdheden

Een computer

Een teksteditor (ik gebruik Atom)

Een wifi-verbinding

Stap 1: Kies een teksteditor

Ik gebruik Atom, die hier kan worden gedownload. Zodra het is gedownload, opent het een nieuw project

Stap 2: Maak uw nieuwe project

1. Atoom openen
2. Vind bestand
3. Klik onder bestand op nieuw
4. linksonder (mac) zal er een knop zijn om een nieuwe map te maken
5. noem je map ''Kaart website'
6. Druk rechtsonder op open

Stap 3: Maak uw Index.html

1. Voeg een nieuw bestand toe aan uw map (Klik in atom met de rechtermuisknop op de map en druk op nieuw)
2. Noem dit bestand 'Index.html'
3. Voeg deze basis HTML-structuur toe, deze wordt in elk HTML-project gebruikt:

Stap 4: Verkrijg uw kaart

1. Bezoek Google maps hier: Google Maps
2. Zoek naar koffie
3. je zou alle coffeeshops in je algemene gebied moeten krijgen
4. klik op de drie regels naast koffie
5. vind kaart delen of insluiten
6. selecteer embed kaart
7. Kies het formaat van de kaart (ik heb Large gebruikt) en voltooi je locatie
8. druk op HTML kopiëren

Stap 5: Toevoegen aan de website

1. Ga terug naar het HTML-bestand.
2. tussen de twee '' tags plaatst u deze code:

'

KOFFIE WINKELS IN DE BUURT

'DE INGEBEDDE CODE VAN GOOGLE MAPS'

'

Stap 6: Voorbeeld

Dat is deel één klaar!

sla het bestand op en zoek het op uw computer, dubbelklik erop en het zal openen in uw standaardbrowser om als voorbeeld te worden bekeken.

Stap 7: Laat het er beter uitzien

1. Voeg tussen de twee ''-tags 'Coffeeshops bij mij in de buurt' toe
2. Voeg een nieuw bestand toe op dezelfde manier waarop u 'Index.html' hebt gemaakt, maar noem het 'Style.css'
3. terug op je HTML-bestand, schrijf deze code boven je titel,"
4. Ga naar google afbeeldingen en download een schattige clipart van een kopje koffie
5. Voeg de afbeelding toe aan de map met de rest van onze bestanden
6. in het CSS-bestand, Schrijf de volgende code: 'body{
7. achtergrondafbeelding: url (DE NAAM VAN DE AFBEELDING);
8. achtergrondformaat: omslag;
9. }'

Stap 8: het er beter uit laten zien Pt2

1. als we nu opslaan en een voorbeeld bekijken, kunnen we zien dat de achtergrond van de website nu is betegeld met onze koffiekopjes
2. Helaas is het moeilijk om onze kop te lezen
3. Dus voeg in de CSS onder de 'body {}' de volgende code toe: h1{
4. achtergrondkleur=rgb(255, 255, 255);
5. lettergrootte = 40px;
6. }

Stap 9: HERZIENING

Dat is het! U bent klaar. Je hebt de basis van HTML, CSS en ingesloten code geleerd, goed gedaan. U kunt de code bewerken om deze aan uw smaak aan te passen en een kaart te laten weergeven van alles wat u maar wilt. Vanaf dat moment kunt u doorgaan met het bouwen van uw website en voor altijd verbeteren.