DESARROLLO DE APLICACIONES WEB - TALLER #1
Objetivos: Reconocer y aplicar las etiquetas del lenguaje HTML. Actividad Individual.
Nota: Considerar las reglas/convenciones de html revisados en clases, su código debe ser válido.
Descripción: Crea un nuevo archivo con extensión .html. Puedes utilizar cualquier editor de texto. Yo te recomiendo
Netbeans, VsCode, Aptana, Sublime Text, etc
Estructura global: En tu archivo transcribe la siguiente estructura.
Esta es la estructura global de un documento html, sus partes principales son <!DOCTYPE html>, el cual le indica al
navegador que lo que contiene nuestro archivo ha sido escrito en lenguaje html5, luego viene la etiqueta raíz html,
y dentro de ellas las dos grandes secciones del documento: la cabecera <head> y el cuerpo del documento <body>.
Dentro de la etiqueta <head> se colocaran elementos descriptivos de la página como por ejemplo el título <title>,
TODO lo que coloquemos en esta sección NO se visualizara en el navegador.
Estructura del cuerpo
La estructura del cuerpo (el código entre las etiquetas <body>) generará la parte visible del documento, es decir lo
que nuestro navegador va a mostrar. HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del
documento y organizar el cuerpo del mismo. En HTML5 las secciones más importantes son diferenciadas y la
estructura principal ya no depende más de los elementos <div> o <table>. Mejorar tu archivo incluyendo las
siguientes secciones en el body.
<main>
<section>
<article> </article>
<article> </article>
</section>
<section>
<article> </article>
</section>
</main>
Como has podido observar las etiquetas que definen las secciones del <body> son: <header>, <nav>,
<main>, <section>, <aside>, <footer>
Ahora, elije una temática que te guste para tu pagina, por ejemplo realizar el prototipo de la pagina
principal de una tienda de detalles para regalar. Cambia el contenido de algunos elementos del body
personalizandolos con la temática de tu página según las siguientes instrucciones.
1. Cambia el charset a UTF-8
2. En el header, agrega una etiqueta <img> que tenga alguna imagen que se relacione a tu tematica.Te
recomiendo que guardes la imagen en el mismo directorio que tu archivo html para que no tengas
problemas de rutas.
3. En el header, Coloca el titulo de tu página utilizando el elemento <h1>
4. En los elemntos <li> agrega 3 enlaces <a> segun tu temática. Ejemplo:
<li><a href=”servicios.html”>Servicios</a><li>
5. Dentro de cada etiqueta <article> agrega una etiqueta de heading (de h1 a h6) con el título de los
datos que contendrá esa sección, una imagen y un párrafo <p> con datos, todo según tu temática.
5.1 En al menos uno de los artículos agrega en lugar de la imagen, un audio o video (intenta que
sea uno referente a tu temática) utilizando la etiqueta <audio>, <video>, <object> o
<iframe>. Ejemplo: https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-
contenido-externo
6. Adicionalmente en la sección <aside> utiliza algunos elementos html que te permitan escribir
contenido para dar consejos o recomendaciones que tengan que ver con tu página. También puedes
agregar imágenes.
7. Dentro del <footer> agrega información de contacto de la empresa a través del uso de la etiqueta
<address> (https://www.w3schools.com/tags/tag_address.asp ), agrega un heading nivel 4 que diga
“Redes Sociales” y al menos 2 enlaces <a> a sus redes sociales. Ejemplo: <a
href=”https://www.facebook.com/Detalles”>Facebook</a>
8. Valida tu pagina con el validador de la w3c, incluye en tu entrega la captura de pantalla de la
valicación correcta. https://validator.w3.org/#validate_by_upload
Al probar tu página en el navegador verás que la información está presente, pero que no se visualiza de
una manera muy agradable. Recuerda que html define la estructura y el contenido de un documento, para
los estilos y el formato, utilizaremos más adelante css.
Para entregar el taller comprime la carpeta con tus archivos (.html, imágenes) y envíalo a través del aula
virtual.
Para revisar más sobre el lenguaje html te recomiendo que revises los siguientes enlaces:
https://www.w3schools.com/html/
https://gutl.jovenclub.cu/wp-content/uploads/2013/10/El+gran+libro+de+HTML5+CSS3+y+Javascrip.pdf
Si quieres afianzar tus conocimientos con videos, te recomiendo los siguientes cursos.
https://codigofacilito.com/courses/HTML5
https://www.udemy.com/aprende-html5-y-css3-desde-cero/
