Feu un lloc web per localitzar una cafeteria: 9 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-02-01 14:39

En aquest instructiu us mostraré com fer un lloc web senzill que mostri cafeteries a prop vostre, mitjançant Google Maps, HTML i CSS

Subministraments

Un ordinador

Un editor de text (faig servir Atom)

Una connexió wifi

Pas 1: trieu un editor de text

Faig servir Atom, que es pot descarregar aquí. Un cop descarregat, obriu-lo, feu un nou projecte

Pas 2: creeu el vostre nou projecte

1. Obre Atom
2. Cerca fitxer
3. A sota del fitxer, feu clic a nou
4. a la part inferior esquerra (mac) hi haurà un botó per crear una nova carpeta
5. assigna un nom a la teva carpeta "Mapa del lloc web"
6. Premeu obre a la part inferior dreta

Pas 3: creeu el vostre Index.html

1. Afegiu un fitxer nou a la vostra carpeta (a Atom feu clic amb el botó dret a la carpeta i premeu nou)
2. Anomeneu aquest fitxer "Index.html"
3. Afegiu aquesta estructura HTML bàsica, s'utilitza en tots els projectes HTML:

Pas 4: Obteniu el vostre mapa

1. Visiteu Google Maps aquí: Google Maps
2. Cerca cafè
3. hauríeu d’aconseguir totes les cafeteries de la vostra zona general
4. feu clic a les tres línies que hi ha al costat del cafè
5. cerqueu un mapa compartit o incrustat
6. seleccioneu incrustar el mapa
7. Trieu la mida del mapa (he utilitzat Large) i finalitzeu la vostra ubicació
8. premeu còpia HTML

Pas 5: afegiu-lo al lloc web

1. Torneu al fitxer HTML.
2. entre les dues etiquetes ", inseriu aquest codi:

'

CAFETERIES A PROP

"EL CODI INCLEDS DE GOOGLE MAPS"

'

Pas 6: previsualització

Aquesta és la primera part!

deseu el fitxer i cerqueu-lo a l’ordinador, feu doble clic i s’obrirà al navegador predeterminat per previsualitzar-lo.

Pas 7: Feu que es vegi millor

1. Entre les dues etiquetes, afegiu "Cafeteries a prop meu"
2. Afegiu un fitxer nou de la mateixa manera que vau crear 'Index.html', però anomeneu-lo 'Style.css'
3. de nou al fitxer HTML, escriviu aquest codi a sobre del títol,"
4. Aneu a google images i descarregueu-vos una imatge preciosa d’una tassa de cafè
5. Afegiu la imatge a la carpeta que conté la resta de fitxers
6. al fitxer CSS, escriviu el codi següent: 'body {
7. background-image: url (EL NOM DE LA IMATGE);
8. mida de fons: portada;
9. }'

Pas 8: fer que sembli millor Pt2

1. si desem i previsualitzem ara, podem veure que el fons dels llocs web ara està enrajolat amb les nostres tasses de cafè
2. Lamentablement, és difícil llegir el nostre títol
3. Per tant, al CSS, a sota del "cos {}" afegiu el codi següent: h1 {
4. color de fons = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Pas 9: REVISIÓ

Això és! Estàs acabat. Heu après els conceptes bàsics d’HTML, CSS i codi incrustat, Ben fet. Podeu editar el codi perquè s'adapti al vostre gust i que mostri un mapa de tot el que vulgueu. A partir d’aleshores podeu continuar el vostre viatge cap a la creació de llocs web i millorar per sempre.