# Clase 1: Guía Rápida - Estructura Básica de HTML ## 1. Declaración `<!DOCTYPE html>` ### a. ¿Qué es? `<!DOCTYPE html>` es la declaración que debe aparecer al principio de cualquier documento HTML. Indica al navegador que el documento está escrito en HTML5, la versión más actual del lenguaje. ### b. Ejemplo: ```html <!DOCTYPE html> ``` ### Enlace útil - [Más sobre `<!DOCTYPE html>` en MDN](https://developer.mozilla.org/es/docs/Glossary/Doctype) ## 2. Etiqueta `<html>` ### a. ¿Qué es? La etiqueta `<html>` envuelve todo el contenido del documento HTML. Es el elemento raíz del documento. ### b. Estructura básica: ```html <!DOCTYPE html> <html> <!-- Contenido de la página --> </html> ``` ### Enlace útil - [Documentación de la etiqueta `<html>` en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/html) ## 3. Etiqueta `<head>` ### a. ¿Qué es? El `<head>` contiene metadatos sobre el documento, como el título de la página, enlaces a hojas de estilo, scripts, y más. Los metadatos no son visibles para el usuario final. ### b. Estructura básica: ```html <head> <meta charset="UTF-8"> <title>Mi primera página web</title> </head> ``` ### c. Elementos comunes dentro de `<head>`: - **`<meta charset="UTF-8">`:** Especifica la codificación de caracteres. - **`<title>`:** Define el título que aparecerá en la pestaña del navegador. - **`<link>`:** Vincula archivos externos como hojas de estilo CSS. - **`<script>`:** Incrusta o vincula scripts JavaScript. ### Enlace útil - [Documentación sobre el `<head>` en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/head) ## 4. Etiqueta `<body>` ### a. ¿Qué es? La etiqueta `<body>` contiene todo el contenido visible para los usuarios, como texto, imágenes, enlaces, etc. ### b. Estructura básica: ```html <body> <h1>Bienvenido a mi página web</h1> <p>Este es un párrafo de ejemplo.</p> </body> ``` ### Enlace útil - [Documentación sobre el `<body>` en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/body) ## 5. Etiquetas de encabezado: `<h1>` a `<h6>` ### a. ¿Qué son? Las etiquetas de encabezado (`<h1>`, `<h2>`, ..., `<h6>`) se utilizan para definir títulos y subtítulos en el documento HTML. `<h1>` es el más importante (título principal), y `<h6>` es el menos importante. ### b. Ejemplo: ```html <h1>Título Principal</h1> <h2>Subtítulo</h2> <h3>Sección</h3> ``` ### Enlace útil - [Documentación de etiquetas de encabezado en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/Heading_Elements) ## 6. Etiqueta `<p>`: Párrafos ### a. ¿Qué es? La etiqueta `<p>` se utiliza para definir párrafos de texto en HTML. ### b. Ejemplo: ```html <p>Este es un párrafo de ejemplo en mi primera página web.</p> ``` ### Enlace útil - [Documentación sobre la etiqueta `<p>` en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/p) ## 7. Etiqueta `<ul>` y `<li>`: Listas Desordenadas ### a. ¿Qué son? - **`<ul>`:** Define una lista desordenada (viñetas). - **`<li>`:** Define un elemento de la lista. ### b. Ejemplo: ```html <ul> <li>Primer ítem</li> <li>Segundo ítem</li> <li>Tercer ítem</li> </ul> ``` ### Enlace útil - [Documentación sobre `<ul>` y `<li>` en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/ul) ## 8. Etiqueta `<ol>` y `<li>`: Listas Ordenadas ### a. ¿Qué son? - **`<ol>`:** Define una lista ordenada (números). - **`<li>`:** Define un elemento de la lista. ### b. Ejemplo: ```html <ol> <li>Primer ítem</li> <li>Segundo ítem</li> <li>Tercer ítem</li> </ol> ``` ### Enlace útil - [Documentación sobre `<ol>` en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/ol) ## 9. Etiqueta `<a>`: Enlaces Básicos ### a. ¿Qué es? La etiqueta `<a>` se utiliza para crear enlaces en HTML. ### b. Ejemplo: ```html <a href="https://www.ejemplo.com">Visita Ejemplo.com</a> ``` ### Enlace útil - [Documentación sobre la etiqueta `<a>` en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/a) ## 10. Comentarios en HTML ### a. ¿Qué son? Los comentarios en HTML se utilizan para dejar notas o explicaciones en el código que no serán visibles para los usuarios. ### b. Ejemplo: ```html <!-- Este es un comentario en HTML --> ``` ### Enlace útil - [Documentación sobre comentarios en HTML en MDN](https://developer.mozilla.org/es/docs/Web/HTML/Element/Comment) ## Recursos adicionales - [Guía completa de HTML en MDN](https://developer.mozilla.org/es/docs/Web/HTML) - [Guía rápida de HTML para principiantes](https://www.w3schools.com/html/)