HTML tags overview.

1. Elementos HTML

2. parrafos
• <p>texto de parrafo...</p>

3. encabezados
• <h1></h1>
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>

4. listas
Listas desordenadas
<ul>
<li></li>
<li></li>
</ul>
Listas ordenadas
<ol>
<li></li>
<li></li>
</ol>

5. citas
<blockquote>
<p>
La Educación es el pasaporte hacia el futuro, el mañana pertenece a
aquellos que se preparan para él en el día de hoy
<p>
</blockquote>

6. preformateado

7. Secciones y articulos
<section>
Contenido tematico o grupo de contenido
</section>
<article>
Composicion reutilizable, autocontenida
</article>
Un articulo puede tener varias secciones
Y una seccion tambien puede tener varios articulos

8. aside (barras laterales)
<aside>
Contenido relacionado al contenido que lo rodea
</aside>

9. Navegacion
<nav>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">perfil</a></li>
<li><a href="">nosotros</a></li>
</ul>
</nav>

10. Encabezado y pie
<header>
Logo y menu de navegacion
</header>
<footer>
Informacion de copyright, contacto, menu, formulario
</footer>

11. direccion
<address>
Informacion de contacto
</addres>

12. elementos genericos
<div>
Agrupacion logica de elementos o contenido
</div>
<span>
Igual, pero para frases o palabras
</span>

13. Pongamos todo junto
Con lo que ya sabemos podemos crear una pagina muy completa

14. Vinculos (links)
<a> </a>
<a href="http://example.com/">example.com</a>

15. Convertir una imagen en vinculo
<a> </a>
<a href="http://example.com/">
<img src="https://placekitten.com/200/300" alt="gatitos">
</a>

16. tipos de vinculos
A paginas externas
Vinculos relativos a nuestro servidor
A un punto especifico de la pagina
Vinculos a telefonos
Vinculos a e-mail

17. Atributo href
URLs absolutas
URL completa
Comienza con el protocolo http:// o https://
href="http://example.com/"
URLs relativas
URL con la ruta relativa al documento actual
En el mismo sitio, en la misma estructura de archivos (carpetas)
href="articulos/pesca.html"

18. Atributo href
Link en la misma pagina
Identificar el destino con id
<h1 id="inicio">Inicio<h1>
Vinculo al destino
<a href="#inicio">ir al inicio</a>
Navega a distintas secciones de la pagina

19. imagenes
Formatos
gif, jpeg, png, webp – son mapas de bits
svg – vectores
El tamaño se mide en pixeles
Lo más livianas posibles para no afectar a la carga del sitio
Buscar un equilibrio entre carga y resolucion

20. tablas
• <table>: crear una tabla.
• <tr>: crear una fila.
• <th>: celda de encabezado.
• <td>: celda de datos.
• <caption>: título a la tabla

21. tablas
Para utilizar tablas en HTML, se utiliza la etiqueta "table". Dentro de esta etiqueta,
se pueden utilizar las etiquetas "tr" para crear filas, y "td" para crear celdas.
<table>
<tr>
<td>Celda 1,1</td>
<td>Celda 1,2</td>
</tr>
<tr>
<td>Celda 2,1</td>
<td>Celda 2,2</td>
</tr>
</table>

22. tablas
Las etiquetas "th" crean celdas de encabezado y la etiqueta "caption" para agregar un
título a la tabla.
<table>
<caption>Tabla de precios</caption>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Notebook</td>
<td>U$S750</td>
</tr>
<tr>
<td>Mouse</td>
<td>U$S18</td>
</tr>
</table>