Repaso de etiquetas

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

29.  
30.  
33.  
36.  
51.  

Etiquetas

Encabezados y párrafos

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

Enlace

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

Imagen, video, audio

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

Tablas

<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

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

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*/
← Margin Collapse
2 tips a tener en cuenta →