Curso de HTML | Repaso de etiquetas 1

Curso de HTML
Repaso de etiquetas

Curso de HTML | Repaso de etiquetas 2

Curso de HTML | Repaso de etiquetas

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  

En esta lección, haremos un repaso de las etiquetas más utilizadas en HTML para estructurar el contenido de una página web. Aprenderemos a usar encabezados, párrafos, enlaces, elementos multimedia, tablas, divs, iframes, listas y estilos CSS básicos.

Etiquetas

Encabezados y párrafos

Los encabezados se utilizan para estructurar los títulos de la página, desde h1 (más importante) hasta h6 (menos importante). Los párrafos se definen con la etiqueta p.

<h1>Título 1</h1>
<h2>Título 2</h2>
<p>Párrafo</p>

Enlace

Para enlazar a otras páginas o recursos, usamos la etiqueta a.

<a href="pagina.html">Ir a página</a>

Imagen, video, audio

HTML nos permite incrustar imágenes, videos y audios de la siguiente manera:

<img src="foto.jpg">
<video src="video.mp4" controls>
<audio src="cancion.mp3" controls>

Tablas

Las tablas permiten organizar información en filas y columnas:

<table border="1px">
   <tr>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
   </tr>
   <tr>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
   </tr>
</table>
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

colspan: Añade una nueva celda y la colapsa horizontalmente con la celda a la que le has puesto el atributo.

rowspan: Añade una nueva celda y la colapsa verticalmente con la celda a la que le has puesto el atributo.

Divs

Son rectángulos de información. Por defecto su ancho es el de la capa que los envuelve y su alto es el de su contenido.

<div style="background:pink; width:60px; height:40px"></div>

Iframe

Permiten ver contenido de otras páginas (como videos, mapas, etc).

<iframe src="https://www.youtube.com/embed/fqK2NfZVipI"></iframe>

Listas

Podemos crear listas ordenadas (ol) o desordenadas (ul).

Ordenada

<ol>
   <li>Item 1</li>
   <li>Item 2</li>
</ol>
  1. Item 1
  2. Item 2

Desordenada

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
</ul>
  • Item 1
  • Item 2

Estilos

Para mejorar la apariencia de nuestros elementos, podemos aplicar estilos CSS.

width: 300px;
height:400px; /*Generalmente no pondremos height a las capas ya que querremos que se ajusten a su contenido*/
font-size: 3rem;
color: blue; /* Color del texto*/
background: red url('foto.png');
text-align: center;
padding: 5px;
margin:15px;
box-sizing: border-box; /* Evita que una capa aumente su tamaño al ponerle padding*/
overflow: hidden; /* Define como se comporta una capa cuando su contenido excede sus dimensiones. El valor hidden hace que el contenido se recorte. El valor auto hace que aparezca una barra de scroll en caso de ser necesario*/