Guía de Taller
1
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
_______________________________________________________________________
Diseño y Maquetación Web
Navegación en la web, imágenes, videos e INFRAMES
Sesión 5
LOGRO DE LA SESIÓN
Implementa elementos personalizados de navegación en la web y recursos de imágenes, videos y IFrames
mediante directivas de CSS
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
ETIQUETAS DE LISTA (UL, OL)
HTML Lists
Las listas HTML permiten agrupar un conjunto de elementos relacionados en listas.
Una lista HTML desordenada:
• Item
• Item
• Item
• Item
Una lista HTML ordenada:
1. First item
2. Second item
3. Third item
4. Fourth item
Lista HTML desordenada
Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada:
Ejemplo
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
_______________________________________________________________________
Lista HTML ordenada
Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista se marcarán con números de forma predeterminada:
Ejemplo
Listas de descripción HTML
HTML también admite listas de descripción.
Una lista de descripción es una lista de términos, con una descripción de cada término.
La etiqueta <dl> define la lista de descripción, la etiqueta <dt> define el término (nombre) y la etiqueta <dd>
describe cada término:
Ejemplo
PERSONALIZACIÓN DE LAS ETIQUETAS DE LISTA CON CSS
Personalizar el color de las viñetas de una lista desordenada
Diseño y Maquetación Web – Formación Continua
1
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
_______________________________________________________________________
Diseño y Maquetación Web
Navegación en la web, imágenes, videos e INFRAMES
Sesión 5
LOGRO DE LA SESIÓN
Implementa elementos personalizados de navegación en la web y recursos de imágenes, videos y IFrames
mediante directivas de CSS
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
ETIQUETAS DE LISTA (UL, OL)
HTML Lists
Las listas HTML permiten agrupar un conjunto de elementos relacionados en listas.
Una lista HTML desordenada:
• Item
• Item
• Item
• Item
Una lista HTML ordenada:
1. First item
2. Second item
3. Third item
4. Fourth item
Lista HTML desordenada
Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada:
Ejemplo
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
_______________________________________________________________________
Lista HTML ordenada
Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista se marcarán con números de forma predeterminada:
Ejemplo
Listas de descripción HTML
HTML también admite listas de descripción.
Una lista de descripción es una lista de términos, con una descripción de cada término.
La etiqueta <dl> define la lista de descripción, la etiqueta <dt> define el término (nombre) y la etiqueta <dd>
describe cada término:
Ejemplo
PERSONALIZACIÓN DE LAS ETIQUETAS DE LISTA CON CSS
Personalizar el color de las viñetas de una lista desordenada
Diseño y Maquetación Web – Formación Continua
