Descripcion
Construir una página HTML titulada: Secciones y líneas generales de un documento HTML5. Deben emplearse las marcas básicas de HTML y estilos según los contenidos del módulo 1 de este curso.
En las siguientes secciones se describen el código a utilizar para obtener algunos elementos básicos de HTML como las listas o las imágenes, conceptos aprendidos en este primer módulo del curso.
Cada uno de los bloques grises es un section
. El bloque naranja de la parte inferior es un aside
Yo soy un ARTICLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nulla sed accumsan condimentum, odio ipsum suscipit ligula, quis rutrum justo est quis diam. Sed et egestas neque. Integer eget convallis diam. Ut quis eros felis. Aenean nec mauris non enim feugiat euismod. Nunc sapien nunc, sollicitudin sagittis nunc vel, tristique tincidunt elit. Vivamus ipsum erat, elementum vitae eleifend nec, tempus viverra felis. Donec sed arcu eget sapien molestie convallis. In hac habitasse platea dictumst. Etiam congue nulla eu fringilla ultrices. Integer sed lacinia ante. Duis nibh diam, luctus sed feugiat sed, aliquam et massa. Morbi vel faucibus ex, in dictum velit.
Listas no ordenadas
El siguiente código genera una lista no ordenada:
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Listas ordenadas
El siguiente código genera una lista ordenada de items:
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
- Wake up
- Feed dog
- Write HTML code for Miriadax course
- ...
Insertar una imagen
El siguiente código genera una imagen:
<a href="https://en.wikipedia.org/wiki/Web_development">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Webdevelopmenttimeline.png" alt="Web development" width='400px'>
</a>