Guía de Taller
1
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
_______________________________________________________________________
Diseño y Maquetación Web
Introducción y fundamentos de las páginas web
Sesión 2
LOGRO DE LA SESIÓN
Implementa un sitio web considerando la estructura y etiquetas de HTML5.
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
IMPLEMENTACIÓN DE SITIOS WEB
Creación de proyecto web
Agregar código con estructura de HTML5
Crea el documento index.html y escribe lo siguiente en la línea 1 del editor de código, elige html:5 y Enter
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
_______________________________________________________________________
Estructura de página web con HTML5
WEB SEMÁNTICA
La web semántica es un conjunto de actividades desarrolladas en el seno de World Wide Web Consortium con
tendencia a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas. Se basa en la
idea de añadir metadatos semánticos y ontológicos a la World Wide Web.
La web Semántica ha sido impulsada, entre otros, por el creador de la web, Tim Berners Lee en el 2000 para
que la información sea reunida de forma que los buscadores puedan “comprender”, más allá de limitarse a
colocar los documentos en una lista.
Directivas HTML5
Article
Define una pieza independiente y auto-contenida dentro de un documento HTML 5.
De esta manera podremos reutilizar los elementos article de múltiples formas.
Los elementos article suelen contener el contenido de un post, la entrada de un foro, un artículo de un
periódico, etc.
Section
Es un elemento que representa una sección independiente dentro de un documento HTML 5, la cual no puede
ser representada por otro elemento semántico más específico como podrían ser: nav, article, aside, etc.
Las secciones suelen tener incorporadas un elemento h1 a h6 que le sirve para indicar el título de la sección.
Nav
Define una sección que contiene enlaces de navegación. Pueden existir tantos elementos nav como queramos
dentro de un documento HTML 5. Así es normal que encontremos un elemento nav para la navegación
principal del sitio web y otro que contenga una tabla de contenido del documento que estemos visualizando.
Aside
Elemento de contenido asociado que permite gestionar contenido de forma independiente al contenido
principal. El contenido dentro del elemento aside puede estar relacionado o no con el contenido principal,
pero nunca afectará a la estructura de la sección que lo contiene. Se puede decir que es una relación indirecta.
El elemento aside suele utilizarse para contenido explicativo o bien para barras laterales.
Diseño y Maquetación Web – Formación Continua
1
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
_______________________________________________________________________
Diseño y Maquetación Web
Introducción y fundamentos de las páginas web
Sesión 2
LOGRO DE LA SESIÓN
Implementa un sitio web considerando la estructura y etiquetas de HTML5.
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
IMPLEMENTACIÓN DE SITIOS WEB
Creación de proyecto web
Agregar código con estructura de HTML5
Crea el documento index.html y escribe lo siguiente en la línea 1 del editor de código, elige html:5 y Enter
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Introducción y fundamentos de las páginas web
_______________________________________________________________________
Estructura de página web con HTML5
WEB SEMÁNTICA
La web semántica es un conjunto de actividades desarrolladas en el seno de World Wide Web Consortium con
tendencia a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas. Se basa en la
idea de añadir metadatos semánticos y ontológicos a la World Wide Web.
La web Semántica ha sido impulsada, entre otros, por el creador de la web, Tim Berners Lee en el 2000 para
que la información sea reunida de forma que los buscadores puedan “comprender”, más allá de limitarse a
colocar los documentos en una lista.
Directivas HTML5
Article
Define una pieza independiente y auto-contenida dentro de un documento HTML 5.
De esta manera podremos reutilizar los elementos article de múltiples formas.
Los elementos article suelen contener el contenido de un post, la entrada de un foro, un artículo de un
periódico, etc.
Section
Es un elemento que representa una sección independiente dentro de un documento HTML 5, la cual no puede
ser representada por otro elemento semántico más específico como podrían ser: nav, article, aside, etc.
Las secciones suelen tener incorporadas un elemento h1 a h6 que le sirve para indicar el título de la sección.
Nav
Define una sección que contiene enlaces de navegación. Pueden existir tantos elementos nav como queramos
dentro de un documento HTML 5. Así es normal que encontremos un elemento nav para la navegación
principal del sitio web y otro que contenga una tabla de contenido del documento que estemos visualizando.
Aside
Elemento de contenido asociado que permite gestionar contenido de forma independiente al contenido
principal. El contenido dentro del elemento aside puede estar relacionado o no con el contenido principal,
pero nunca afectará a la estructura de la sección que lo contiene. Se puede decir que es una relación indirecta.
El elemento aside suele utilizarse para contenido explicativo o bien para barras laterales.
Diseño y Maquetación Web – Formación Continua
