Hola a todos. Ya estamos a punto de terminar el curso de Introducción a HTML5.
Ahora ya sois capaces de introducir diferentes tipos de elementos, con diferentes finalidades, según sea la intención de tu página web.
En esta lección, veremos nuevas etiquetas que te serán de muchísima utilidad. Para esta ocasión, utilizaremos etiquetas relacionadas con la organización del contenido, dentro de la página web. Hablamos de elementos block, y en linea.
Utilizando a la misma vez, los elementos y etiquetas que habéis aprendido en las lecciones anteriores, ya prácticamente podemos afirmar que estamos ante vuestra primera página web de estructura.
¡Vamos con el vídeo!
RESUMEN DEL VÍDEO:
Hoy veremos los <div>, que nos permite organizar el contenido. Dentro de los div podremos poner todo tipo de contenido, como imágenes, texto, vídeo, etc. Además, podemos agrupar el contenido dentro de ellos y meter <div> dentro de otro <div>.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clase con div</title>
</head>
<body>
<div style="border: 2px solid green; display: inline-block; width: 100%; ">
<div style="background-color: red; display: inline-block; width: 200px; height: 200px; "></div>
<div style="background-color: blue; display: inline-block; width: 200px; height: 200px; "></div>
</div>
<div style="border: 2px solid yellow; display: inline-block; width: 80%; ">
<img style="width: 200px; height: 200px;" src="https://joseatrigueros.neocities.org/html5-css-javascript-logos.png"/>
<img style="width: 200px; height: 200px;" src="https://10.wp.com/bitelia.hipertextual.com/files/2013/05/html5-800x600.jpg?resize=800%2C600"/>
</div>
</body>
</html>Ahora que sabéis como se hace, toca ponerlo en práctica y complementarlo con los cursos de JavaScript y CSS que encontrareis en esta misma plataforma.
¡Hasta la próxima clase!