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

Guía de Taller
3
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
______________________________________________________________________
_

Modificar el tamaño del marcador de una lista

Cambiar la viñeta de una lista desordenada

Cambiar números por letras en lista ordenada

Diseño y Maquetación Web – Formación Continua

Guía de Taller
4
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
______________________________________________________________________
_

Empezar una lista ordenada por un número distinto de 1 o una letra que no sea la A

Cambiar el color de los números, las letras y sus separadores en listas ordenadas

Diseño y Maquetación Web – Formación Continua

Guía de Taller
5
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
______________________________________________________________________
_

Personalizar el tamaño de los números de una lista ordenada

Diseño y Maquetación Web – Formación Continua

Guía de Taller
6
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
______________________________________________________________________
_

Alternar el color de fondo en los elementos de una lista

Personalizar una lista de descripción

Diseño y Maquetación Web – Formación Continua

Guía de Taller
7
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
______________________________________________________________________
_

IMPLEMENTAR LA ETIQUETA <A> PARA LA NAVEGACIÓN WEB

Links
La etiqueta HTML <a> define un hipervínculo. Tiene la siguiente sintaxis:

Ejemplo
Diseño y Maquetación Web – Formación Continua
Guía de Taller
8
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
______________________________________________________________________
_

De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los navegadores:

Un enlace no visitado está subrayado y en azul

Un enlace visitado está subrayado y de color violeta.
Un enlace activo está subrayado y en rojo

El atributo target
Especifica dónde abrir el documento vinculado, puede tener uno de los siguientes valores:

_self: predeterminado. Abre el documento en la misma ventana / pestaña en la que se hizo clic
_blank: abre el documento en una nueva ventana o pestaña
_parent: abre el documento en el marco principal
_top: abre el documento en todo el cuerpo de la ventana

Ejemplo
Utilice target = "_ blank" para abrir el documento vinculado en una nueva ventana o pestaña del navegador:

URL absolutas frente a URL relativas

Ambos ejemplos anteriores utilizan una URL absoluta (una dirección web completa) en el atributo href.

Un enlace local (un enlace a una página dentro del mismo sitio web) se especifica con una URL relativa (sin la
parte "https: // www"):

Imagen como enlace

Enlace a una dirección de correo electrónico

Diseño y Maquetación Web – Formación Continua

Guía de Taller
9
Diseño y Maquetación Web – Navegación en la web, imágenes, videos e INFRAMES
______________________________________________________________________
_
Botón como enlace

Títulos de enlaces

IMPLEMENTAR ESTILOS EN LA ETIQUETA DE VÍNCULO (LINK, ACTIVE, VISITED, HOVER)

Es posible modificar la apariencia de los enlaces de una página web desde la hoja de estilos.
Lo primero que tenemos que utilizar es el elemento <a> para seleccionar todos los enlaces que estemos
usando y a continuación definimos las propiedades que queremos modificar:

Diseño y Maquetación Web – Formación Continua