¿Que es HTML?

HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Imagina que es como el "esqueleto" de un sitio: organiza el contenido (títulos, textos, imágenes, enlaces) para que el navegador lo muestre correctamente.

¿Cómo empezar?

1. Herramientas necesarias:

Un editor de texto simple (como Notepad, VS Code, bloc de notas o cualquier otro).
Un navegador web (Chrome, Edge o Firefox)

2. Crea un archivo HTML:

Escribe tu código en el editor.
Guárdalo con la extensión .html (ejemplo: mipagina.html).
Ábrelo en el navegador para ver el resultado.

3. Estructura básica de archivo HTML:

html

Resultado

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    <h1>Hola, mundo</h1>
    <p>Esta es mi primera página web.</p>
</body>
</html>

Hola, mundo

Esta es mi primera página web.

<!DOCTYPE html>: Declara que es un documento HTML5.
<html>: Contenedor principal de la página.
<head>: Incluye metadatos, como el título que aparece en la pestaña del navegador.
<body>: Aquí va el contenido visible (textos, imágenes, etc.).

Conceptos y etiquetas básicas:

Títulos: Hay 6 niveles de encabezados (<h1> a <h6>), siendo <h1> el más grande e importante.

html

Resultado
```
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Más pequeño</h3>
```
Título principal

Subtítulo

Más pequeño
Párrafos: Para escribir bloques de texto.
```
<p>Este es un párrafo simple.</p>
```
Este es un párrafo simple.
Enlaces: Conectan tu página con otras webs o recursos. El enlace debe ir en la propiedad href, y entre las etiquetas <a></a> el texto a mostrar en el enlace.
```
<a href="https://www.ejemplo.com">Haz clic aquí</a>
```
Haz clic aquí
Imágenes: Añade elemntos visuales, podemos cargar enlaces de imagen o archivos, en la propiedad src="", esta etiqueta no requiere cierre.
```
<img src="https://cdn-icons-png.flaticon.com/512/1197/1197396.png" alt="Imagen de ejemplo">
```
Listas: Pueden tener o no tener orden, y cada elemento de la lista, debe estar entre las etiquetas <li></li>.
- Ordenadas (numeradas)
```
<ol>
    <li>Primero</li>
    <li>Segundo</li>
</ol>
```
  1. Primero
  2. Segundo
- Desordenadas (con viñetas)
```
<ul>
    <li>Manzana</li>
    <li>Pera</li>
</ul>
```
  - Manzana
  - Pera
Formato de Texto:
- Negritas: <b>Texto en negrita</b> o <strong>Texto importante</strong> (similar, pero con significado).
- Cursivas: <i>Texto en cursiva</i> o <em>Texto enfatizado</em> (similar, pero con significado).
```
<p>Me gusta el <b>fútbol</b> 
y la <i>música</i>.</p>
```
Me gusta el fútbol y la música.
Líneas y divisiones:
- <br>: Salto de línea (sin cierre).
- <hr>: Línea horizontal (sin cierre).
```
<p>Primera línea<br>Segunda línea</p>
    <hr>
<p>Otro párrafo después de la línea.</p>
```
Primera línea
Segunda línea

Otro párrafo después de la línea.

Tablas: Permiten crear filas y columnas para una tabla. La etiqueta principal <table> </table>, debe contener toda la tabla y esta se divide en diferentes partes:

Filas: Tendremos que definir cada fila de la tabla utilizando <tr> </tr>. Esto significa table row (fila de la tabla).
Columnas: Podremos agregar las columnas o datos de la tabla con diferentes tipos:
- Encabezado: Utiliza la etiqueta <th></th>.
- Datos: utilizando la etiqueta <td></td>.

<table>
 <tr> <!-- Fila -->
     <th>Nombre</th> <!-- Encabezado -->
     <th>Edad</th>
 </tr>
 <tr>
     <td>Juan</td> <!-- Dato -->
     <td>15</td>
 </tr>
</table>

Nombre	Edad
Juan	15

Div: Un <div> es un elemento HTML muy versátil que se utiliza como un contenedor genérico para agrupar otros elementos y estructurar contenido en una página web. Por sí solo, el <div> no tiene un significado semántico, pero es extremadamente útil para aplicar estilos (como colores, bordes, tamaños) o para organizar el diseño mediante técnicas de CSS como Flexbox o Grid.

¿Cómo identificar elementos?

En HTML, los atributos id y class se utilizan para identificar y aplicar estilos o comportamientos a los elementos de una página web.

Identificador único (id): Se usa para identificar un solo elemento, cada id debe ser único en la página.

<p id="presentacion">Hola, soy un párrafo con id.</p>
<p>Hola, soy un párrafo SIN id.</p>

IMPORTANTE: EL NOMBRE DEL ID NO DEBE CONTENER ESPACIOS NI EMPEZAR CON NÚMEROS

Clase compartida (class): Se usa para agrupar varios elementos que comparten estilos o funciones. Un elemento puede tener varias clases separadas por espacios.

<p class="importante">Este texto es importante.</p>
<p class="importante">Este también es importante.</p>

Anterior Siguiente