Objetivo: Construir la estructura básica de un sitio web.
¿Qué es HTML y por qué es fundamental?
HTML (HyperText Markup Language) es el lenguaje de marcado que se utiliza para definir la estructura y contenido de las páginas web. Se considera fundamental en el desarrollo web, ya que es la base sobre la que se construyen todos los sitios y aplicaciones web.
- Estructura del contenido: HTML organiza el contenido de la página en una estructura jerárquica utilizando "etiquetas" que indican cómo debe mostrarse el contenido en el navegador.
- Compatibilidad universal: Todo navegador web entiende HTML, lo que hace que sea accesible en cualquier plataforma o dispositivo.
HTML es el primer paso en el camino del desarrollo web, ya que proporciona las bases sobre las que se construirán estilos (con CSS) y funcionalidades interactivas (con JavaScript).
Estructura básica de un documento HTML
La estructura de un documento HTML sigue un esquema básico que contiene los elementos mínimos necesarios para crear una página web:
html<!DOCTYPE html>
<html>
<head>
<title>Mi primer sitio web</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Bienvenido a mi página web.</p>
</body>
</html>
<!DOCTYPE html>: Define que se trata de un documento HTML5.<html>: El contenedor raíz de todos los elementos de la página.<head>: Contiene metadatos sobre la página, como el título.<title>: Define el título que aparece en la pestaña del navegador.<body>: Contiene todo el contenido visible para el usuario, como encabezados, párrafos e imágenes.
Etiquetas comunes en HTML
Aquí te dejo una lista de las etiquetas más usadas y su propósito dentro del desarrollo web:
<html>: Contenedor raíz del documento.<head>: Incluye información como enlaces a archivos CSS o scripts, además de metadatos del sitio.<body>: Contiene el contenido visible de la página.<title>: Muestra el título de la página en la pestaña del navegador.<h1>a<h6>: Son encabezados que varían en tamaño;<h1>es el más grande, y<h6>el más pequeño.<p>: Define párrafos de texto.<a>: Enlaces que permiten la navegación entre páginas o sitios.html<a href="https://ejemplo.com">Visita mi sitio</a><img>: Permite agregar imágenes a la página.html<img src="imagen.jpg" alt="Descripción de la imagen">
Ejercicio: Crear una página web personal con enlaces, imágenes y formato básico
Ahora que entiendes las etiquetas básicas de HTML, puedes comenzar con la práctica. Vamos a crear una página web personal básica. Sigue estos pasos:
Crear un archivo HTML:
- Abre tu editor de texto favorito (por ejemplo, Visual Studio Code).
- Crea un nuevo archivo llamado
index.html.
Añadir estructura HTML:
- Copia la siguiente estructura básica:
html<!DOCTYPE html> <html> <head> <title>Mi Página Personal</title> </head> <body> <h1>Bienvenido a mi página personal</h1> <p>Hola, mi nombre es [Tu Nombre]. Aquí encontrarás información sobre mí y mis intereses.</p> <h2>Mis redes sociales</h2> <p>Puedes visitarme en:</p> <ul> <li><a href="https://twitter.com/mitanef">Twitter</a></li> <li><a href="https://github.com/mitanef">GitHub</a></li> </ul> <img src="foto.jpg" alt="Mi foto personal"> </body> </html>Guardar el archivo:
- Guarda tu archivo como
index.htmlen una carpeta de tu elección.
- Guarda tu archivo como
Abrir el archivo en el navegador:
- Abre el archivo guardado en tu navegador para ver tu página personal en acción.
Consejos para este ejercicio
- Prueba diferentes etiquetas: Experimenta añadiendo más encabezados, listas y enlaces.
- Organiza tu código: Asegúrate de que el código esté correctamente indentado para mejorar la legibilidad.
- Sigue aprendiendo: HTML es solo el comienzo. A medida que avances, añadirás CSS y JavaScript para transformar esta página estática en algo interactivo y visualmente atractivo.
No hay comentarios.:
Publicar un comentario