Un sitio web es un conjunto de páginas web interrelacionadas. El archivo principal o página de inicio de todo sitio web se nombra típicamente index.html.
Antes de construir cualquier página, es crucial hacer un boceto (wireframe). Este boceto sirve como una guía clara del diseño y la
organización que queremos lograr, facilitando la navegación al usuario y la
futura modificación al desarrollador.
Todo documento HTML está organizado de forma jerárquica y debe contener estas cuatro partes esenciales:
Etiqueta Principal: <html lang="es">
Encabezado: <head></head>
Codificación: Especificada dentro de <head>.
Cuerpo: <body></body>
2.1. El Encabezado: <head>
La etiqueta <head> contiene metadatos (información sobre la página) que NO se visualizan en el navegador, pero son cruciales para su funcionamiento.
Contenido Clave Propósito
<title> Define el texto que aparece en la pestaña del navegador.
<meta> (charset) Establece la codificación de caracteres.
Otros <meta> Incluye palabras clave que ayudan a los motores de búsqueda (bots) a identificar el contenido.
Importante: Codificación de Caracteres
Es fundamental especificar un elemento <meta charset="UTF-8">. Esta propiedad le dice al navegador cómo debe interpretar y representar caracteres especiales (como acentos, la letra ñ, y símbolos). UTF-8 es el estándar más común y recomendado.
La etiqueta <body> almacena TODO el contenido visible de tu página web. Solo puede haber una etiqueta <body> por documento.
Elementos comunes dentro de <body>:
Títulos
Párrafos
Imágenes
Tablas y Formularios
Enlaces (Vínculos)
Videos
3. Estilos de Desarrollo y Herramientas
Cuando escribes código HTML, puedes elegir tu propio estilo de desarrollo. Aunque existen herramientas avanzadas (como Adobe
Dreamweaver) que ayudan a estructurar el código automáticamente, es vital que entiendas el concepto de sangría (indentación):
Estilo Ejemplo (Recomendado)
Con Sangría (Recomendado) Esto facilita la lectura y la identificación de qué elementos están dentro de otros.
<body>
<h1>Título Principal</h1>
<p>Este es un párrafo.</p>
</body>
Sin Sangría (Menos legible) Dificulta la identificación rápida de la jerarquía de las etiquetas.
<body><h1>Título Principal</h1><p>Este es un párrafo.</p></body>
HTML
<body>
<h1>El Título Principal del Contenido</h1>
<p>Este es el primer párrafo que describe el tema de nuestra página web.</p>
<h2>Sección Secundaria</h2>
<p>Este párrafo está dentro de la segunda sección. </p>
</body>
C. Inserción de Imágenes (<img>)
La etiqueta <img> es un elemento vacío (no necesita etiqueta de cierre separada) que requiere atributos para funcionar.
Atributo Propósito
src (Source) Obligatorio. Especifica la ruta o dirección donde se encuentra la imagen.
width Define el ancho de la imagen (en píxeles).
height Define la altura de la imagen (en píxeles).
Organización Recomendada: Es buena práctica crear una carpeta llamada imagenes (o img) dentro de la carpeta principal del proyecto
para guardar todas tus imágenes.
Ejemplo de Sintaxis:
HTML
<img src="imagenes/autor.jpg" width="300" height="200" alt="Descripción de la imagen" />
D. Creación de Vínculos (<a>)
El elemento <a> (anchor) se utiliza para crear hipervínculos que permiten al usuario navegar de un documento a otro (dentro del sitio o hacia una URL externa).
Atributo Propósito
href Obligatorio. Especifica la URL o la ruta del archivo al que se quiere enlazar.
Ejemplo de Sintaxis:
HTML
<p>Para más información sobre el tema, visita:
<a href="https://es.wikipedia.org/wiki/Ejemplo" target="_blank">Haz clic aquí para saber más</a>
</p>
Nota: El texto entre <a> y </a> es el que el usuario verá y en el que hará clic.
E. Inserción de Videos (<video>)
Para insertar un video, se utiliza el elemento <video>. Se recomienda organizar los videos en una carpeta separada (videos).
Atributo Propósito
src Especifica la ruta del archivo de video.
controls Obligatorio para el usuario. Muestra los controles de reproducción (pausa, volumen, etc.).
width / height Define las dimensiones del reproductor.
Ejemplo de Sintaxis:
Comentarios
Publicar un comentario