Hola de nuevo a todos, y bienvenidos a la última clase de este curso de introducción a HTML5.
Vamos a aprender a crear estructuras en HTML5, poniendo en práctica todo lo aprendido a lo largo de las diez clases de este curso.
Presta mucha antención, y no olvides usarlo en tu propio proyecto. También comenzaremos a implementar un poco de CSS, para poder visualizar el contenido mejor, y dar un pequeño primer paso hacia las hojas de estilos.
¡Vamos con la última clase!
RESUMEN DEL VÍDEO:
En esta última clase veremos como crear una página desde el principio, que será un resumen de todo el contenido que hemos ido viendo a lo largo del curso, desde el uso del <DOCTYPE> hasta los <div>. También veremos el uso de las etiquetas <header>, <nav>,<article>, <aside> y <footer>, que se usan para dar estructura al body.
Tan sólo nos queda despedirnos. Esperamos que te haya resultado interesante y útil. Complementa lo aprendido con el curso de CSS para seguir aprendiendo.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ultima Clase</title>
<meta charset="UTF-8">
</head>
<body style="padding: 20px;">
<header style="text-align: center; background: yellow; width: 100%; height: 130px; padding-top: 20px;">
<h1 style="font-size: 3em;">Título de la página</h1>
</header>
<nav style="display: block; width: 90%; height: 80px; margin: 20px 5%;">
<ul style="list-style-type: none; text-align: right;">
<li style="display: inline-block;">
<a style="border: 1px solid green; background: #33FF55; width: 60px; padding: 20px; text-align: center; text-decoration: none;" href="sitio1.html">Inicio</a>
</li>
<li style="display: inline-block;">
<a style="border: 1px solid green; background: #33FF55; width: 60px; padding: 20px; text-align: center; text-decoration: none;" href="sitio1.html">Quienes somos</a>
</li>
<li style="display: inline-block;">
<a style="border: 1px solid green; background: #33FF55; width: 60px; padding: 20px; text-align: center; text-decoration: none;" href="sitio1.html">Unéte</a>
</li>
</ul>
</nav>
<article style="display: inline-block; background: coral; width: 70%; height: 400px;">
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id scelerisque erat. Nullam malesuada eleifend sem, ac ullamcorper est accumsan maximus. Phasellus pharetra accumsan ligula nec volutpat. Nullam leo dui, luctus id tempor eget, luctus sit amet diam. Praesent mollis sapien et blandit placerat. Aliquam lacinia tortor tellus, sit amet placerat nulla sodales interdum. Suspendisse convallis magna eu metus rhoncus, eu sollicitudin elit fermentum. Sed euismod mauris id ullamcorper porttitor. Mauris pulvinar pulvinar ligula, id posuere nisi convallis quis. Cras dolor urna, hendrerit nec maximus ac, placerat a tellus. Ut cursus, nunc interdum finibus scelerisque, quam leo molestie enim, a volutpat mi sapien ac quam.
Nunc ullamcorper ipsum nec nunc sodales, ac vulputate orci consequat. Ut placerat volutpat porta. Nulla efficitur accumsan dapibus. Vivamus bibendum augue vel nisl dapibus vestibulum at ultrices nisl. Duis eleifend, arcu quis ullamcorper vulputate, nisi sapien vulputate arcu, ac condimentum nulla orci et arcu. Donec commodo ante varius, ultricies velit vel, rhoncus arcu. Suspendisse in leo in nisl efficitur suscipit. Sed eleifend cursus diam, vitae luctus erat luctus sed. Ut vestibulum odio sed nisl luctus, accumsan pulvinar sapien volutpat. Maecenas eu cursus lorem.
Praesent rutrum bibendum dui ac venenatis. Nunc orci purus, placerat id diam eu, vestibulum viverra justo. In consequat aliquet sem eu interdum. Vivamus molestie porta ipsum eu molestie. Nunc id leo commodo, egestas erat eu, feugiat mi. Sed malesuada est sed nisi tristique sollicitudin. In hac habitasse platea dictumst. In pulvinar eros ut purus ullamcorper aliquet. Nunc non ante augue. Aenean volutpat lectus vel sapien mattis rhoncus. Nulla id porttitor velit. In ullamcorper ex id molestie tristique.
Proin lacinia tincidunt dignissim. Nam rutrum urna ac consectetur malesuada. Proin finibus at purus et molestie. Integer in imperdiet nibh. Suspendisse placerat, lacus in sagittis lacinia, nibh sem efficitur ligula, et interdum nisi elit vitae dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sagittis nulla dolor, at feugiat urna fermentum a.
</p>
</article>
<aside style="display: inline-block; background: lightblue; width: 25%; height: 320px;">
<p style="text-align: center;"> Pequeño texto de publicidad o, incluso, de contenido relacionado</p>
</aside>
<footer style="height: 25px; width: 100%; background: brown;">
<p> Aviso legal | Copyright 2023 | Tutorialesdeprogramacion.com </p>
</footer>
</body>
</html>Como ya sabes, puedes contactar con nuestro soporte a través de la intranet.
¡Nos vemos pronto!