Creación de una Página Web Básica en HTML: Un Ejercicio Práctico con Soluciones

by Tomas Gonzalez
on junio 20, 2024
COMPARTE ESTE ARTÍCULO

En este artículo, abordaremos un ejercicio práctico para construir una página web básica utilizando HTML. Este ejercicio incluirá elementos como imágenes, listas ordenadas y desordenadas, y párrafos, proporcionando una excelente oportunidad para los principiantes de familiarizarse con HTML. Al final del artículo, proporcionaremos la solución completa al ejercicio, detallando cada paso y ofreciendo consejos para optimizar el código.

Descripción del Ejercicio

El objetivo de este ejercicio es crear una página web simple que contenga los siguientes elementos:

  1. Título de la página
  2. Un párrafo introductorio
  3. Una imagen
  4. Una lista ordenada
  5. Una lista desordenada
  6. Un footer con texto de derechos de autor

Requisitos Detallados

  1. Título de la Página:
  • La página debe tener un título que aparezca en la pestaña del navegador.
  1. Párrafo Introductorio:
  • Incluir un párrafo que describa brevemente el propósito de la página.
  1. Incorporación de una Imagen:
  • Agregar una imagen que sea relevante para el contenido de la página.
  1. Lista Ordenada:
  • Crear una lista ordenada con al menos tres ítems que puedan ser pasos o instrucciones relacionadas con el tema de la página.
  1. Lista Desordenada:
  • Incluir una lista desordenada con al menos tres elementos que proporcionen información adicional o enlaces relevantes.
  1. Footer:
  • El pie de página debe contener texto de derechos de autor.

Solución al Ejercicio

A continuación, se proporciona el código HTML necesario para cumplir con todos los requisitos del ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página Web Básica</title>
</head>
<body>
    <h1>Bienvenido a mi Página Web</h1>
    <p>Esta página es un ejemplo de cómo construir una página web básica usando HTML. Aquí aprenderemos a insertar diferentes elementos como imágenes, listas y párrafos.</p>

    <img src="imagen-ejemplo.jpg" alt="Descripción de la imagen">

    <h2>Instrucciones</h2>
    <ol>
        <li>Abrir el navegador de su elección.</li>
        <li>Introducir la URL deseada.</li>
        <li>Disfrutar del contenido.</li>
    </ol>

    <h2>Más Información</h2>
    <ul>
        <li>HTML es el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web.</li>
        <li>Puede ser asistido por tecnologías como Cascading Style Sheets (CSS) y lenguajes de scripting como JavaScript.</li>
        <li>Visite <a href="https://www.w3schools.com">w3schools</a> para aprender más.</li>
    </ul>

    <footer>
        <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Explicación del Código

  • Estructura Básica: La página comienza con la declaración del tipo de documento <!DOCTYPE html> y continúa con la estructura básica compuesta por las etiquetas <html>, <head>, y <body>.
  • Título y Metadatos: Dentro del <head>, se define el conjunto de caracteres y el título de la página, que aparece en la pestaña del navegador.
  • Contenido del Cuerpo: El <body> contiene un encabezado <h1>, un párrafo <p>, una imagen <img> con su atributo src que indica el origen de la imagen y alt que describe la imagen, seguido de listas ordenadas <ol> y desordenadas <ul> para estructurar la información.
  • Pie de Página: El <footer> incluye información de derechos de autor.

Conclusión

Este ejercicio práctico demuestra cómo se pueden utilizar los elementos básicos de HTML para construir una página web estructurada y funcional. A través de este ejemplo, los principiantes pueden obtener una comprensión clara de cómo se ensamblan los componentes de una página web y cómo cada elemento contribuye a la estructura general del sitio. Con la práctica, estas habilidades pueden ser la base para la creación de sitios web más complejos y visualmente atractivos.

¿QUÉ TE HA PARECIDO EL ARTÍCULO? Danos tu opinión al final de la página.
Deja tu comentario y ayúdanos a crecer.

¡SÍGUENOS EN TUS REDES FAVORITAS!
AYUDANOS A CRECER Y QUE LLEGUEMOS A TODAS LAS PERSONAS QUE NOS NECESITANA. SÍGUENOS EN TUS REDES.
Entra AQUÍ y elíge donde seguirnos. 

 

 


REDES SOCIALES

INFORMACIÓN SOBRE
ACADEMIA SANQUE

NUESTRAS ÚLTIMAS PUBLICACIONES

ACCEDE A TODAS LAS NOTICIAS

ELIGE TU RED FAVORITA Y SÍGUENOS.

INSTAGRAM

TIKTOK

…
…

 …Y PRONTO MUCHAS MÁS

AYUDANOS A CRECER Y A LLEGAR A TODAS LAS PERSONAS QUE NOS NECESITAN.

¿QUÉ TE HA PARECIDO EL ARTÍCULO? Danos tu opinión al final de la página.
Deja tu comentario y ayúdanos a crecer.

¡SÍGUENOS EN TUS REDES FAVORITAS!
AYUDANOS A CRECER Y QUE LLEGUEMOS A TODAS LAS PERSONAS QUE NOS NECESITANA. SÍGUENOS EN TUS REDES.
Entra AQUÍ y elíge donde seguirnos. 

 

 


REDES SOCIALES

INFORMACIÓN SOBRE
ACADEMIA SANQUE

NUESTRAS ÚLTIMAS PUBLICACIONES

ACCEDE A TODAS LAS NOTICIAS

ELIGE TU RED FAVORITA Y SÍGUENOS.

INSTAGRAM

TIKTOK

…
…

 …Y PRONTO MUCHAS MÁS

AYUDANOS A CRECER Y A LLEGAR A TODAS LAS PERSONAS QUE NOS NECESITAN.

Contenido restringido

Acceso de usuarios existentes
   
Registro de un nuevo usuario
*Campo necesario

Categories:

Informática

Tags:

Sin etiqueta

Comments are closed

Estado de acceso
ESTADO DE ACCESO
TRADUCTORES
¡Síguenos!
COMPARTENOS
error: CONTENIDO PROTEGIDO