Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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>
- Item 1
- Item 2
Desordenada
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
- Item 1
- Item 2
Estilos
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*/