Crear un sitio web para localizar una cafetería: 9 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-02-01 14:40

En este Instructable, le mostraré cómo hacer un sitio web simple que muestre cafeterías cercanas, utilizando Google Maps, HTML y CSS.

Suministros

Un ordenador

Un editor de texto (yo uso Atom)

Una conexión wifi

Paso 1: elige un editor de texto

Yo uso Atom, que se puede descargar aquí. Una vez que se descarga, abre, crea un nuevo proyecto

Paso 2: crea tu nuevo proyecto

1. Átomo abierto
2. Encontrar archivo
3. Debajo de archivo, haga clic en nuevo
4. en la parte inferior izquierda (mac) habrá un botón para crear una nueva carpeta
5. nombre su carpeta '' Mapa del sitio web '
6. Presione para abrir en la parte inferior derecha

Paso 3: Crea tu Index.html

1. Agregue un nuevo archivo en su carpeta (en atom, haga clic con el botón derecho en la carpeta y presione nuevo)
2. Nombra este archivo 'Index.html'
3. Agregue esta estructura HTML básica, que se utiliza en todos los proyectos HTML:

Paso 4: obtenga su mapa

1. Visite los mapas de Google aquí: Google Maps
2. Buscar café
3. deberías conseguir todas las cafeterías en tu área general
4. haga clic en las tres líneas junto a café
5. buscar compartir o incrustar mapa
6. seleccionar incrustar mapa
7. Elija el tamaño del mapa (yo usé Grande) y finalice su ubicación
8. presione copiar HTML

Paso 5: agregar al sitio web

1. Regrese al archivo HTML.
2. entre las dos etiquetas "" inserte este código:

'

CAFETERÍAS CERCANAS

'EL CÓDIGO INTEGRADO DE GOOGLE MAPS'

'

Paso 6: Vista previa

¡Esa es la primera parte hecha!

guarde el archivo y búsquelo en su computadora, haga doble clic en él y se abrirá en su navegador predeterminado para obtener una vista previa.

Paso 7: haz que se vea mejor

1. Entre las dos etiquetas '', agregue 'Cafeterías cerca de mí'
2. Agregue un nuevo archivo de la misma manera que creó 'Index.html' pero asígnele el nombre 'Style.css'
3. en su archivo HTML, escriba este código encima de su título,"
4. Vaya a google images y descargue un lindo clipart de una taza de café
5. Agrega la imagen a la carpeta que contiene el resto de nuestros archivos
6. en el archivo CSS, escriba el siguiente código: 'body {
7. background-image: url (EL NOMBRE DE LA IMAGEN);
8. tamaño de fondo: cubierta;
9. }'

Paso 8: Hacer que se vea mejor Pt2

1. si guardamos y obtenemos una vista previa ahora, podemos ver que el fondo de los sitios web ahora está en mosaico con nuestras tazas de café
2. Lamentablemente, es difícil leer nuestro título.
3. Entonces, en el CSS, debajo del 'cuerpo {}' agregue el siguiente código: h1 {
4. color de fondo = rgb (255, 255, 255);
5. tamaño de fuente = 40px;
6. }

Paso 9: REVISIÓN

¡Eso es todo! Ya terminaste. Ha aprendido los conceptos básicos de HTML, CSS y código incrustado. Bien hecho. Puede editar el código para adaptarlo a su gusto y hacer que muestre un mapa de lo que desee. A partir de entonces, puede continuar su viaje de creación de sitios web y mejorar para siempre.