HTML - Sistemas y Tecnologías Web

# HTML
Semestre 2, 2026

## Definición

* HyperText Markup Language
* Es un lenguaje de marcado
* Describe la estructura de una página web

## Usos

* Definir contenido
* Organizar información
* Dar significado a los elementos

## Origen

* Creado por Tim Berners-Lee
* Año 1991
* Proyecto del CERN

## Evolución

* HTML 1.0 – documentos simples
* HTML 2.0 – formularios
* HTML 4.0 – separación contenido / estilo
* HTML5 – semántica y multimedia

## Funcionamiento

* El navegador interpreta etiquetas
* Las etiquetas describen contenido
* No es un lenguaje de programación

![Tim](/courses/2026/cc3062/assets/flow.png)

## Estructura mínima

```html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi página</title>
</head>
<body>
  <h1>Hola mundo</h1>
</body>
</html>
```

## Partes del documento

### DOCTYPE

* Indica versión de HTML
* Evita errores de compatibilidad

### head

* Metadatos
* Título
* Configuración

### body

* Contenido visible
* Texto, imágenes, links

## Tags (etiquetas)

### Definición

* Marca un tipo de contenido
* Usa símbolos < >

### Ejemplo

```html
<p>Esto es un párrafo</p>
```

## Tipos de elementos

### Elementos de bloque

* Ocupan todo el ancho
* Generan salto de línea

Ejemplos:

* div
* p
* h1 – h6
* section

### Elementos en línea

* Ocupan solo su contenido
* No generan salto

Ejemplos:

* span
* a
* strong
* em

## HTML semántico

### Semantico

* Etiquetas con significado
* Describen el contenido

### Usos

* Mejor accesibilidad
* Mejor SEO
* Código más claro

## Etiquetas comunes

### Principales

* header
* nav
* main
* section
* article
* footer

### Ejemplo

```html
<main>
  <section>
    <article>
      <h2>Noticia</h2>
    </article>
  </section>
</main>
```

## Texto básico

### Encabezados

* h1 a h6
* Jerarquía de títulos

### Párrafos

* Etiqueta p
* Texto normal

## Links

* Navegación entre páginas
* Elemento clave de la web

### Ejemplo

```html
<a href="pagina.html">Ir</a>
```

## Imágenes

* No tienen cierre
* Usan atributos

### Ejemplo

```html
<img src="logo.png" alt="Logo">
```

## Listas

### Listas no ordenadas

```html
<ul>
  <li>Item</li>
</ul>
```

### Listas ordenadas

```html
<ol>
  <li>Paso</li>
</ol>
```

## Tablas

* Datos estructurados
* Información comparativa

### Ejemplo simple

```html
<table>
  <tr>
    <th>Producto</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Manzana</td>
    <td>$1</td>
  </tr>
</table>
```

## Formularios

* Enviar datos
* Interacción con usuarios

### Ejemplo

```html
<form>
  <input type="text">
  <input type="submit">
</form>
```

## Rutas en HTML

### Problema común

* Archivos no encontrados
* Imágenes rotas

### Tipos de rutas

* Absolutas
* Relativas

## Rutas absolutas

* Ruta completa del sistema
* No portable

### Ejemplo incorrecto

```html
<img src="C:/Users/.../img.png">
```

## Rutas relativas

* Funcionan en servidor
* Portables

### Ejemplo

```html
<img src="imagenes/img.png">
```

## Tipos de rutas relativas

| Tipo         | Ejemplo          |
| ------------ | ---------------- |
| Mismo nivel  | index.html       |
| Subcarpeta   | img/logo.png     |
| Nivel arriba | ../archivo.html  |
| Desde raíz   | /assets/logo.png |

## Recomendaciones

* Usar HTML semántico
* Mantener estructura clara
* Usar rutas relativas
* Indentar código