Crea un sito web per la localizzazione di una caffetteria: 9 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-02-01 14:41

In questo Instructable ti mostrerò come creare un semplice sito Web che mostri i bar vicino a te, utilizzando Google Maps, HTML e CSS

Forniture

Un computer

Un editor di testo (io uso Atom)

Una connessione wifi

Passaggio 1: scegli un editor di testo

Uso Atom, che può essere scaricato qui. Una volta scaricato, aprilo e crea un nuovo progetto

Passaggio 2: crea il tuo nuovo progetto

1. Atomo aperto
2. Trova file
3. Sotto file fai clic su nuovo
4. in basso a sinistra (mac) ci sarà un pulsante per creare una nuova cartella
5. nomina la tua cartella ''Mappa sito web'
6. Premi Apri in basso a destra

Passaggio 3: crea il tuo Index.html

1. Aggiungi un nuovo file nella tua cartella (in atom fai clic con il pulsante destro del mouse sulla cartella e premi nuovo)
2. Denomina questo file "Indice.html"
3. Aggiungi questa struttura HTML di base, utilizzata in ogni progetto HTML:

Passaggio 4: ottieni la tua mappa

1. Visita le mappe di Google qui: Google Maps
2. Cerca caffè
3. dovresti prendere tutte le caffetterie nella tua zona generale
4. fai clic sulle tre righe accanto a caffè
5. trova condividi o incorpora mappa
6. seleziona incorpora mappa
7. Scegli la dimensione della mappa (ho usato Large) e finalizza la tua posizione
8. stampa copia HTML

Passaggio 5: aggiungi al sito web

1. Torna al file HTML.
2. tra i due tag '' inserisci questo codice:

'

CAFFETTERIE VICINO A TE

"IL CODICE INCORPORATO DA GOOGLE MAPS"

'

Passaggio 6: anteprima

Questa è la prima parte fatta!

salva il file e trovalo sul tuo computer, fai doppio clic su di esso e si aprirà nel browser predefinito per essere visualizzato in anteprima.

Passaggio 7: migliora l'aspetto

1. Tra i due tag '' aggiungi 'Caffetterie vicino a me'
2. Aggiungi un nuovo file nello stesso modo in cui hai creato "Index.html" ma chiamalo "Style.css"
3. torna sul tuo file HTML, scrivi questo codice sopra il tuo titolo,"
4. Vai su google immagini e scarica una simpatica clipart di una tazza di caffè
5. Aggiungi l'immagine alla cartella contenente il resto dei nostri file
6. nel file CSS, scrivi il seguente codice: 'body{
7. background-image: url(IL NOME DELL'IMMAGINE);
8. dimensione dello sfondo: copertina;
9. }'

Passaggio 8: migliorarne l'aspetto Pt2

1. se salviamo e vediamo in anteprima ora, possiamo vedere che lo sfondo dei siti web è ora piastrellato con le nostre tazze di caffè
2. Purtroppo è difficile leggere il nostro titolo
3. Quindi nel CSS, sotto 'body {}' aggiungi il seguente codice: h1{
4. background-color=rgb(255, 255, 255);
5. font-size=40px;
6. }

Passaggio 9: REVISIONE

Questo è tutto! Hai finito. Hai imparato le basi di HTML, CSS e codice incorporato, ben fatto. Puoi modificare il codice per adattarlo ai tuoi gusti e fargli visualizzare una mappa di tutto ciò che desideri. Da allora puoi continuare il tuo percorso di creazione di siti Web e migliorare sempre.