---
# System prepended metadata

title: HTML
tags: [apuntes]

---

---
title: HTML
tags: apuntes
description: Apuntes HTML.
---
# HTML

HTML o HyperText Markup Language es el lenguaje que se utiliza para crear páginas web.

## Estructura

La primera linea de código en un documento html, la cual informa al navegador del tipo y versión es la siguiente:
```htmlembedded=
<!DOCTYPE html>
```

Todo documento HTML debe contener el elemento raíz, el cual contiene todos los datos de la página web.
```htmlembedded=
<!DOCTYPE html>
<html>
    <!--Contenido-->
</html>
```

Dentro, estarán las etiquetas \<head\> y \<body\>.

* La etiqueta \<head\> contiene datos que no serán visibles directamente por el usuario como el título, archivos externos a incluir en la página, palabras clave, etc...

* La etiqueta \<body\> contiene los datos que formarán la página visible para el usuario en la pantalla.

Por ahora quedaría algo así:

```htmlembedded=
<!DOCTYPE html>
<html>
    <head>
        <!--Datos-->
    </head>
    <body>
        <!--Contenido-->
    </body>
</html>
```

Ese código sería el mínimo para crear una página web vacía.

## Elementos

Como hemos visto el documento html se compone por elementos, o etiquetas. Estos elementos pueden tener contenido o ser elementos vacios.

Un elemento con contenido, por ejemplo es el párrafo:
```htmlembedded=
<p>
    Contenido
</p>
```

En cambio uno vacío seria un salto de linea:
```htmlembedded=
<br>
```

## Atributos

Los atributos són datos que se meten dentro de las etiquetas con el siguente formato \<etiqueta *atributo*="valor/dato" \> aunque tambien hay atributos vacios los cuales no usan \<etiqueta *atributo*\>

## Elementos de \<head\>

La etiqueta \<head\> tiene ciertos elementos.

### \<meta\>

La etiqueta \<meta\> contiene los metadatos de la página, cosas como codificación, autor, título,  fecha, palabras clave, descripción, etc...

- Codificación:
    * charset -> indica el tipo de codificación. Por norma general se utiliza la codificación UTF-8
- Palabras clave:
    * name -> keywords
    * content -> las palabras clave
- Descripción de la web:
    * name -> description
    * content -> descripción que quieras
- Autor:
    * name -> author
    * content -> nombre del autor de la web

```htmlembedded=
<meta charset="utf-8">
<meta name="keywords" content="comida,pizza,tortilla">
<meta name="description" content="Menú restaurante">
<meta name="author" content="Adrián García González">
```

### \<title\>

La etiqueta \<title\> contiene el título de la página, el cual se mostrará en la pestaña del navegador.
```htmlembedded=
<title>Título aquí</title>
```

## Elementos de \<body\>

La etiqueta \<body\> tiene muchos elementos, pero algunos són.

### \<p\>

El párrafo, se comportan como elemento independiente y automáticamente se separara uno de otro.
```htmlembedded=
<p>
    Párrafo
</p>
```

### \<h\>

La etiqueta \<h\> represnta la cabecera y tiene 6 variaciones, del 1 al 6, siendo la 1 la más importante y la 6 la menos.
```htmlembedded=
<h1>Cabezera++!!!</h1>
<h2>Cabezera++!!</h2>
<h3>Cabezera++!</h3>
<h4>Cabezera++</h4>
<h5>Cabezera+</h5>
<h6>Cabezera</h6>
```

### \<!-- Comentario --\>

Esta etiqueta es la de comentario -se puede utilizar fuera del body- y sirve para señalar cosas para ti mismo, o otras personas que estén trabajando en el código de dicha página ya que no se podrá ver desde el navegador.
```htmlembedded=
<!-- Aquí se comenta todo lo que quieras! :D -->
```

### \<br\>

Hace un salto de linea.
```htmlembedded=
<br>
```

### \<b\> o \<strong\>

Pone el contenido en negrita.
```htmlembedded=
<b>Negrita</b>
<strong>Negrita</strong>
```

### \<i\> o \<em\>

Pone el texto en cursiva.
```htmlembedded=
<i>Cursiva</i>
<em>Cursiva</em>
```

### \<img\>

Se utiliza para insertar una imagen.
* src -> contiene la ruta a la imagen, puede ser una URL.
* alt -> contiene un texto alternativo, en caso de que no pueda cargarse la imagen.
```htmlembedded=
<img src="https://cdn.pccomponentes.com/img/logos/logo-pccomponentes.png" alt="Pc Componentes">
```
:::info
<img src="https://cdn.pccomponentes.com/img/logos/logo-pccomponentes.png" alt="Pc Componentes">
:::
```

### \<a\>

Enlaces a otras páginas.
* href -> link/url
* target -> \_blank para una pestaña nueva
```htmlembedded=
<a href="https://www.google.es/" target="_blank">Click para ir a google</a>
```

:::info
<a href="https://www.google.es/" target="_blank">Click para ir a google</a>
:::

También puedes hacer un enlace a una parte de la misma página, para eso usaremos el atributo ***id***.
```htmlembedded=
<a href="#saludo" target="_blank">Click para ir al saludo</a>
<!-- Contenido por en medio -->
<p id="saludo">
    Hola!
</p>
```

:::info
<a href="#saludo" target="_blank">Click para ir al saludo</a>
<!-- Contenido por en medio -->
<p id="saludo">
    Hola!
</p>
:::

Al hacer click en "Click para ir al saludo", nos lleva al párrafo de abajo. Tambien se puede combinar y hacer un enlace a una parte de otra web, href="otraweb.hmtl#saludo".

### \<ul\> i \<ol\>

Son listas, sin ordenar, y ordenadas. No te ordenan el contenido, sino que lo utilizaras un tipo u otro según tu contenido.
```htmlembedded=
<!-- Lista sin orden -->
<ul>
    <li>Gato</li>
    <li>Perro</li>
    <li>Pájaro</li>
</ul>

<!-- Lista ordenada -->
<ol>
    <li>Ingredientes</li>
    <li>Precalentar el horno</li>
    <li>Dejar a 180ºC 20 minutos</li>
    <li>Dar la vuelta</li>
    <li>Dejar a 180ºC otros 10 minutos</li>
</ol>
```
:::info
<!-- Lista sin orden -->
<ul>
    <li>Gato</li>
    <li>Perro</li>
    <li>Pájaro</li>
</ul>

<!-- Lista ordenada -->
<ol>
    <li>Ingredientes</li>
    <li>Precalentar el horno</li>
    <li>Dejar a 180ºC 20 minutos</li>
    <li>Dar la vuelta</li>
    <li>Dejar a 180ºC otros 10 minutos</li>
</ol>
:::

### \<dl\>

Listas descriptibas, parejas de concepto y descripción.
```htmlembedded=
<dl>
    <dt>Concepto 1</dt>
    <dd>Descripción 1</dd>
    <dt>Concepto 2</dt>
    <dd>Descripción 2</dd>
</dl>
```
:::info
<dl>
    <dt>Concepto 1</dt>
    <dd>Descripción 1</dd>
    <dt>Concepto 2</dt>
    <dd>Descripción 2</dd>
</dl>
:::

### \<table\>

Tablas, son compuestas por filas.
* \<tr\> que contienen celdas
    * \<th\> cabezera de columna
    * \<td\> contenido
```htmlembedded=
<table>
    <tr>
        <th>Nombre</th>
        <th>Apellidos</th>
    </tr>
    <tr>
        <td>Adrián</td>
        <td>García González</td>
    </tr>
    <tr>
        <td>Lidia</td>
        <td>Sanchez López</td>
    </tr>
</table>
```
:::info
<table>
    <tr>
        <th>Nombre</th>
        <th>Apellidos</th>
    </tr>
    <tr>
        <td>Adrián</td>
        <td>García González</td>
    </tr>
    <tr>
        <td>Lidia</td>
        <td>Sanchez López</td>
    </tr>
</table>
:::

Pudes usar los atributos rowspan y colspan para expandir una celda en cualquier eje.
```htmlembedded=
<table>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td rowspan="2">1</td> <!-- Esta celda ocupará dos verticales -->
        <td colspan="2">2 y 3</td> <!-- Esta celda ocupará dos horizontales -->
    </tr>
    <tr>
        <!-- El 1 anterior se expandira hacia abajo, ocupando la primera posición de esta fila -->
        <td>2</td>
        <td>3</td>
    </tr>
</table>
```
:::info
<table>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td rowspan="2">1</td> <!-- Esta celda ocupará dos verticales, dos filas -->
        <td colspan="2">2 y 3</td> <!-- Esta celda ocupará dos horizontales, dos columnas -->
    </tr>
    <tr>
        <!-- El 1 anterior se expandira hacia abajo, ocupando la primera posición de esta fila -->
        <td>2</td>
        <td>3</td>
    </tr>
</table>
:::

Puedes usar los th en filas, para hacer una tabla horizontal, de la siguiente manera.
```htmlembedded=
<table>
    <tr>
        <th scope="row">Nombre</th>
        <td>Adrián</td>
        <td>Lidia</td>
    </tr>
    <tr>
        <th scope="row">Apellidos</th>
        <td>García González</td>
        <td>Sanchez López</td>
    </tr>
</table>
```
:::info
<table>
    <tr>
        <th scope="row">Nombre</th>
        <td>Adrián</td>
        <td>Lidia</td>
    </tr>
    <tr>
        <th scope="row">Apellidos</th>
        <td>García González</td>
        <td>Sanchez López</td>
    </tr>
</table>
:::

#### \<caption\>

Puedes poner un \<caption\> para indicar de que trata la tabla.
```htmlembedded=
<table>
    <caption>Lista de Personas</caption>
    <tr>
        <th scope="row">Nombre</th>
        <td>Adrián</td>
        <td>Lidia</td>
    </tr>
    <tr>
        <th scope="row">Apellidos</th>
        <td>García González</td>
        <td>Sanchez López</td>
    </tr>
</table>
```
:::info
<table>
    <caption>Lista de Personas</caption>
    <tr>
        <th scope="row">Nombre</th>
        <td>Adrián</td>
        <td>Lidia</td>
    </tr>
    <tr>
        <th scope="row">Apellidos</th>
        <td>García González</td>
        <td>Sanchez López</td>
    </tr>
</table>
:::

### \<iframe\>

Sirven para incrustar otras paginas web. El mejor ejemplo, es el que te ofrece youtube por defecto.
```htmlembedded=
<iframe width="100%" height="400"  src="https://www.youtube.com/embed/NYViektxN7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```

:::info
<iframe width="100%" height="400" src="https://www.youtube.com/embed/NYViektxN7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
:::

Google maps también lo permite.
```htmlembedded=
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d890.8211545807549!2d2.030985975613396!3d41.32293107221672!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49c5e1a432905%3A0x666015efb963c68a!2sCan%20Calderon!5e0!3m2!1ses!2ses!4v1651514692978!5m2!1ses!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
```

:::info
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d890.8211545807549!2d2.030985975613396!3d41.32293107221672!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49c5e1a432905%3A0x666015efb963c68a!2sCan%20Calderon!5e0!3m2!1ses!2ses!4v1651514692978!5m2!1ses!2ses" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
:::

### \<form\>

Sirve para hacer formularios, un formulario es utilizado para recopilar la entrada del usuario. La entrada del usuario normalmente se envía a un servidor para su procesamiento.

La etiqueta \<form\> solo es la raiz, y aunque contiene atributos importantes, los elementos que iran dentro son los que nos permitiran coger información.

Para recoger datos usaremos \<input\>.
```htmlembedded=
<form>
    <label for="nombre">Nombre:</label><br>
    <input type="text" id="nombre" name="nombre"><br>
    <label for="apellidos">Apellidos:</label><br>
    <input type="text" id="apellidos" name="apellidos">
</form>
```

:::danger
FALTA MÁS POR EXPLICAR
:::

### \<pre\> y \<code\>

La etiqueta \<pre\> sirve para poder escribir con los espacios y saltos de lineas que quieras, respetandote el formato al 100%.
```htmlembedded=
<pre>
Linea 1
Linea 2             Separado

Linea 4
</pre>
```
:::info
<pre>
Linea 1
Linea 2             Separado

Linea 4
</pre>
:::

Si quieres usar la etiqueta \<code\>, que sirve para representar código, necesitarás meterla dentro de una etiqueta \<pre\> ya que para que te respeta la indentación y formato, necesitas usarla en conjunto.
```htmlembedded=
<pre>
<code>
public function saludo() {
    return "hola";
}
</code>
</pre>
```
:::info
<pre>
<code>
public function saludo() {
    return "hola";
}
</code>
</pre>
:::

