Proyecto: Mi primera página web
Ha llegado el momento de construir nuestra primera página web. Utilicemos el nuevo conocimiento de HTML para crear la estructura del sitio.
Asegúrate de incluir muchas imágenes, enlaces, listas y otros elementos HTML que hayas aprendido para que nuestra comunidad tenga mucho que ver y leer.
Paso a paso:
-
Para comenzar, agrega la declaración <!DOCTYPE html> como la primera línea de código.
-
A continuación, añade la etiqueta <html>.
-
Debajo de la etiqueta de apertura <html>, agregue la etiqueta <head>.
-
Dentro de las de apertura y cierre <head>, escribe las etiquetas <title>. El título del sitio web es “Ly por el Mundo | Guía para viajeros”.
-
En la línea de abajo, agrega las etiquetas <body>.
-
Directamente debajo de la etiqueta de apertura <body> , agregue una etiqueta de título <h1> que diga: “Playa, gastronomía y cultura: Los 3 destinos más visitados del mundo”
-
Debajo de eso, agrega una etiqueta <h2> que diga: “Bali, Indonesia”
-
Debajo de eso, agrega una etiqueta <h2> que diga: “París, Francia”
-
Debajo de eso, agrega una etiqueta <h2> que diga: “Nueva York, Estados Unidos”
-
Entre la etiqueta <h1> y la primera etiqueta <h2>, agregue una etiqueta <p> que diga: “El mundo es tan grande que a la hora de viajar necesitamos inspiración para decidirnos por un destino u otro. Hoy en día podemos alcanzar prácticamente cualquier rincón del planeta, con tan solo un clic de distancia. Aquí te recomendamos 3 de los mejores lugares visitados en el mundo, en los que tendrás una experiencia inolvidable.”
-
Entre la primera y la segunda etiqueta <h2>, agregue otro párrafo a la publicación usando la etiqueta <p>: “La isla de Bali, en Indonesia, es la número uno. ¿Por qué será? Es posible que sean las playas de arena blanca como Lovina Beach, el verde intenso de sus selvas en el Parque Nacional de Bali Occidental, los antiguos templos (más de 10.000) o los diferentes senderos para hacer excursionismo. Alquila una moto para moverte por la isla: no dejes de ir al templo Tanah Lot para ver atardecer, piérdete por los arrozales de Jatiluwih o en Tegalalang, escoge playa o lago, visita algún volcán o, incluso, aprovecha para casarte ¡Bali es la isla de los dioses!”
-
Entre la segunda y la tercera etiqueta <h2>, agregue otro párrafo a la publicación usando la etiqueta <p>: “La ciudad de la luz, del amor, la ciudad de la literatura, está llena de atracciones suficientes para una vida. Es la única ciudad que tiene dos lugares entre los diez de mayor interés turístico de Europa: la Torre Eiffel y Notre Dame. Pero, ¿qué más? Toda una clase de arte en el Museo del Louvre, callejear por sus barrios como Marais o el Barrio latino, disfrutar de la gastronomía en algunos de sus bistro, pasear por la rivera del Sena o visitar el mundo de Amélie Poulain, ¡París no se acaba nunca!”
-
En la tercera y última etiqueta <h2>, agregue otro párrafo a la publicación usando la etiqueta <p>: “Si hay una idea universal de ciudad, esa es la que encarna Nueva York. La hemos visto tantas veces en películas, que cuando se visita por primera vez parece que andas de escena en escena. Esta ciudad es inabarcable y tiene tantas caras que harían falta diferentes vidas para decir que se conoce bien. Pasear por Central Park en otoño o primavera, ir al MoMA, la cuna del arte moderno, ver la Estatua de la Libertad, los rascacielos míticos como el Empire State Building, cruzar el Puente de Brooklyn, Little Italy, Coney Island, es solo una pequeña parte de todo lo que puedes hacer en Nueva York.”
-
Encima de cada párrafo, agregue una etiqueta <img> con el atributo src que sea uno de los siguientes enlaces:
-
-
-
Bali: https://learnwonderly.com/wp-
content/uploads/2022/05/ paisaje1.jpeg -
París: https://learnwonderly.com/wp-
content/uploads/2022/05/ paisaje2.jpeg -
New York: https://learnwonderly.com/wp-
content/uploads/2022/05/ paisaje3.jpeg
-
-
-
-
Debajo de la etiqueta del cuerpo de apertura, agregue una etiqueta <img> con la fuente de la imagen: https://learnwonderly.com/wp-content/uploads/2022/08/Ly.jpg
-
Ahora, debajo de la etiqueta <body>, agrega una etiqueta <h3> que diga “por Ly | Hace 1 día”
-
Hagamos una lista de algunas publicaciones relacionadas. Debajo del último párrafo, agregue una etiqueta <h4> que diga “Contenido relacionado”. Debajo de esa etiqueta de encabezado, crea una lista. La lista debe tener los siguientes cuatro elementos:
-
-
-
-
Visita las 5 maravillas del mundo.
-
Hoteles con historia
-
Tips para viajeros principiantes.
-
Los mejores cruceros para este verano.
-
-
-
-
¡Conectemos la página web con el resto de la web! En el primer párrafo, convierte la palabra “planeta” en un enlace y haga que vaya a: https://viajes.nationalgeographic.com.es/multimedia .
-
Asegúrese de incluir el atributo target=”_blank” para que se abra en una página nueva.
-
Queremos asegurarnos de que la comunidad pueda dejar su experiencia viajera. En la parte inferior del cuerpo del sitio web, agrega un nuevo <div> y establece su id=”contacto”.
-
Dentro del <div>, crea una nueva etiqueta <p> y coloca la siguiente información de contacto dentro de ella: correo electrónico: ly@wonderx.com
-
Dentro del contacto <div>, coloque etiquetas <strong> de apertura y cierre alrededor de “correo electrónico”
-
Hagamos que la imagen de perfil sea un enlace a la sección de contacto de la página web. Busca la etiqueta <img> de perfil y rodeala con etiquetas de apertura y cierre <a>. En la <a>etiqueta, establezca href=”#contacto”.
¡Felicitaciones! Tienes los comienzos de una sólida página web de viajes.
Deja una respuesta