guia5 - Uso de Listas en una página Web y vínculos.
UNIVERSIDAD DON BOSCO FACULTAD DE
ESTUDIOS TECNOLOGICOS ESCUELA DE
COMPUTACION
GUIA DE LABORATORIO Nº 5
CICLO 01-2014
Nombre de la práctica: Uso de Listas en una página Web y vínculos.
Lugar de ejecución: Laboratorio de Informática
Tiempo estimado: 3 horas
Materia: Introducción a Internet
I. Objetivos
Que el estudiante sea capaz de:
Identificar las características y diferencias de los diversos tipos de listas en HTML
Implementar los diferentes tipos de listas de HTML en una página Web.
Crear páginas Web utilizando listas anidadas de diferentes tipos.
II. Introducción Teórica
Listas en CSS
Las listas en CSS constituyen uno de los elementos más importantes para el desarrollo de una página
web que respete los estándares.
Así como es importante el marcado correcto de párrafos y encabezados, las listas también deben
estar especificadas de la forma adecuada.
Más allá de la marcación del documento HTML, con la ayuda de CSS es posible cambiar por
completo la apariencia de las listas y crear elementos atractivos y de gran impacto visual, tanto para
un simple listado como para la creación de una barra de navegación.
El marcado de las listas
En HTML la manera correcta de presentar una lista con ítems es utilizando las etiquetas UL y OL. La
sigla UL proviene de Unordered List (listas sin orden) y OL de Ordered list (listas ordenadas). Al
utilizar estas etiquetas en un documento HTML el navegador se encarga de colocar viñetas (cuando
se usa UL) o numerar los ítems (al usar OL):
Ejemplo:
Para lograr las listas anteriores el código HTML utilizado es:
Lista con UL:
<ul>
<li>Argentina</li>
<li>Brasil</li>
1
<li>Uruguay</li>
</ul>
Lista con OL:
<ol>
<li>Argentina</li>
<li>Brasil</li>
<li>Uruguay</li>
</ol>
Otro tipo de listas son las generadas por DL (Definition list) donde intervienen dos
elementos:término y definición del término.
Ejemplo:
Listas con DL
El código HTML para la lista anterior es:
<dl>
<dt>Asteroides:</dt>
<dd>Objetos rocosos o metálicos que orbitan alrededor del Sol</dd>
<dt>Cometas:</dt>
<dd>Cuerpos formados por substancias duras y gases congelados</dd>
<dt>Planetas:</dt>
<dd>No tienen luz propia, sino que reflejan la luz solar</dd>
</dl>
Estilos básicos
- Viñetas personalizadas
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta
formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran
por defecto con la numeración decimal utilizada en la mayoría de países.
No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas,
además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el
tipo de viñeta que se muestra y que se denomina list-style-type.
list-style-type
Tipo de viñeta
Valores
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman
| lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha |
upper-alpha | none | inherit
Se aplica a
Elementos de una lista
2
Valor inicial
disc
Descripción
Permite establecer el tipo de viñeta mostrada para una lista
En primer lugar, el valor none permite mostrar una lista en la que sus elementos no
contienen viñetas, números o letras. Se trata de un valor muy utilizado, ya que es
imprescindible para los menús de navegación creados con listas, como se verá más adelante.
El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos,
numéricos y alfabéticos.
Los valores gráficos son disc, circle y square y muestran como viñeta un círculo relleno, un
círculo vacío y un cuadrado relleno respectivamente.
Los valores numéricos están formados por decimal, decimal-leading-zero, lower-roman,
upper- roman, armeniany georgian.
Por último, los valores alfanuméricos se controlan mediante lower-latin, lower-alpha,
upper- latin, upper-alpha y lower-greek.
La siguiente imagen muestra algunos de los valores definidos por la propiedad liststyle-type:
Figura 1. Ejemplo de propiedad liststyle-type
El código CSS de algunas de las listas del ejemplo anterior se muestra a
continuación:
<ul style="list-style-type: square">
<li>list-style-type: square</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ol style="list-style-type: lower-roman">
<li>list-style-type: lower-roman</li>
<li>Elemento</li>
<li>Elemento</li>
3
</ol>
<ol style="list-style-type: decimal-leading-zero; padding-left: 2em;">
<li>list-style-type: decimal-leading-zero</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
La propiedad list-style-position permite controlar la colocación de las viñetas.
list-style-position
Posición de la viñeta
Valores
inside | outside | inherit
Se aplica a
Elementos de una lista
Valor inicial
outside
Descripción
Permite establecer la posición de la viñeta de cada elemento de una lista
La diferencia entre los valores outside e inside se hace evidente cuando los
elementos contienen mucho texto, como en la siguiente imagen:
Figura 2. Ejemplo de propiedad list-style-position
Utilizando las propiedades anteriores (list-style-type y list-style-position), se puede
seleccionar el tipo de viñeta y su posición, pero no es posible personalizar algunas de
sus características básicas como su color y tamaño.
Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la
propiedad list-style- image, que permite mostrar una imagen propia en vez de una viñeta
automática.
list-style-image
Imagen de la viñeta
Valores
<url> | none | inherit
Se aplica a
Elementos de una lista
Valor inicial
none
4
Descripción
Permite reemplazar las viñetas automáticas por una imagen personalizada
Las imágenes personalizadas se indican mediante la URL de la imagen. Si no se
encuentra la imagen o no se puede cargar, se muestra la viñeta automática
correspondiente (salvo que explícitamente se haya eliminado mediante la propiedad liststyle-type).
La siguiente imagen muestra el uso de la propiedad list-style-image mediante tres ejemplos
sencillos de listas con viñetas personalizadas:
Figura 3. Ejemplo de propiedad list-style-image
Las reglas CSS correspondientes al ejemplo anterior se muestran a continuación:
ul {
margin:0;
padding-left: 1.5em;
line-height: 1.5em;
}
ul li { padding-left: .2em; }
ul.ok { list-style-image: url(imagenes/ok.png); }
ul.go { list-style-image: url(imagenes/bullet_go.png); }
ul.redondo { list-style-image: url(imagenes/bullet_red.png); }
Como es habitual, CSS define una propiedad de tipo "shorthand" que permite establecer todas
las propiedades de una lista de forma directa. La propiedad se denomina list-style.
list-style
Estilo de una lista
Valores
( <list-style-type> || <list-style-position> || <list-style-image> ) | inherit
Se aplica a
Elementos de una lista
Valor inicial
-
Descripción
Propiedad que permite establecer de forma simultánea todas las opciones de una
lista
En la definición anterior, la notación || significa que el orden en el que se indican los valores
de la propiedad es indiferente. El siguiente ejemplo indica que no se debe mostrar ni viñetas
automáticas ni viñetas personalizadas:
ul { list-style: none }
Cuando se utiliza una viñeta personalizada, es conveniente indicar la viñeta automática que
se mostrará cuando no se pueda cargar la imagen:
5
ul { list-style: url(imagenes/cuadrado_rojo.gif) square; }
Vínculos en HTML
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una
página web o archivo a otras páginas web o archivos. Hay varios tipos de enlaces y para crear un
enlace, aquel texto o imagen, titulo o cualquier cosa que existe en un documento html debe ser
rodeada de la directiva <a>, que se le va a especificar una dirección. La dirección del vínculo la
podemos especificar a través del atributo href.
Etiqueta
<a>
Atributos
( <href> )
Valor
URL
Descripción
Dirección URL a conectar.
Ejemplo 1.
Con la definición anterior, para crear un enlace que apunte a la página principal de Google solamente
habría que incluir lo siguiente en un documento HTML:
<a href="http://www.google.com">Página principal de Google</a>
El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma
página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda
sección", "Volver al principio de la página", etc.
Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las
secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.
Etiqueta
<a>
Atributos
( <name> )
Valor
nombre de sección
Descripción
Para crear un marcapáginas dentro de un documento.
Ejemplo 2.
La sintaxis es: <a name="primera sección"></a>
También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El siguiente
ejemplo añade enlaces de tipo "Volver al inicio de la página" en varias secciones:
<a name="inicio"></a>
6
III. Requerimientos
No.
1
Cantidad
1
2
3
4
1
1
1
Descripción
PC con Windows XP o Windows 7 con uno de los editores de páginas Web:
PHP Designer
Personal, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadores
siguientes: Internet Explorer 7 u 8, Firefox (última versión disponible), Google
Chrome (última versión disponible), Opera (última versión disponible), Safari
(última
disponible),
Netscape (9.0.0.6)
Guía
deversión
Laboratorio
#6 de Introducción
a Interne
Recursos para laboratorio práctico.
Memoria USB
IV. Procedimiento
Indicaciones Generales.
1. Crear una carpeta en mis documentos y colocar en el nombre N°Carnet_Guia5, Nota: Cambiar
N°Carnet por su número de carnet brindado por la Universidad.
2. Crear una nueva carpeta dentro de la anterior y colocarle en el nombre css.
3. Abrir el editor Sublime Text.
Ejercicio 1. Uso de listas ordenadas.
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_ordenada.html
3. Estructura de la página web:
<h1>Listas ordenadas
<p>Para convertirse en webmaster, debería considerar aprender:
<ol type="1">
<li>HTML/XHTML
<li>CSS
<li>JavaScript/JScript
7
<li>PHP/ASP/JSP
<p>Es realmente importante que lo haga en ese orden, puesto que cada lenguaje se vuelve
más complicado a medida avanza al siguiente nivel.
4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre style.css
5. Aplicar las reglas de estilo necesarias para lograr que la página se muestre de la siguiente
forma:
Color de fondo: #2E9AFE.
Color de la tipografía: #D8D8D8.
Texto: centrado.
Hr: color #D8D8D8, estilo de borde sólido, ancho de borde 5px, margen 0px 45px.
Div: margen 45px, color de fondo #00FFBF, padding 45px 205px.
6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
7. Visualizar la página web en el navegador.
Ejercicio 2. Uso de listas desordenadas
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_desordenada.html
3. Estructura de la página web:
Para este ejemplo necesitaremos copiar la misma estructura del ejemplo anterior y solamente
cambiar la etiqueta <ol> por <ul> para realizar la lista desordenada.
<h1>Listas desordenadas
<p>Los países de Centroamérica son:
8
<ul type="disc">
<li>El Salvador
<li>Honduras
<li>Guatemala
<li>Costa Rica
<li>Nicaragua
<li>Panamá;
<li>Belice
<p>Es realmente importante que lo haga en ese orden, puesto que cada lenguaje se vuelve
más complicado a medida avanza al siguiente nivel.
4. El archivo css será el mismo que el del ejemplo anterior.
5. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
6. Visualizar la página web en el navegador.
Ejercicio 3. Uso de lista de definición
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_definicion.html
3. Estructura de la página web:
9
<h1>Listas de Definición
<h2>Metalenguajes
<dt><span>SGML
<dd>Metalenguaje para la definición de otros lenguajes de marcado
<dt><span>XML
<dd>Lenguaje basado en SGML y que se emplea para describir datos
<dt><span>RSS
<dd>RSS son las siglas de Really Simple Syndication, un formato XML para indicar o compartir
contenido en la Web
<dt><span>GML
<dd>Lenguaje de Marcado Geográfico
al modelaje, transporte y almacenamiento información geo graficado
<dt><span>XHTML
<dd>Es el lenguaje de marcado pensado para sustituir a HTML como estándar para las
páginas Web
<dt><span>XUL
<dd>Lenguajes derivados de XML para determinadas aplicaciones
4. El archivo css será el mismo que el ejercicio anterior.
5. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
6. Visualizar la página web en el navegador.
10
Ejercicio 4. Lista con imágenes y css
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_css.html
3. Estructura de la página web:
<h1>Pasatiempos
<li>Leer y escribir emails
<li>Leer Libros
<li>Ir de compras
<li>Jugar en línea
<li>Ver videos
11
4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre ejercicio4.css
5. Aplicar las reglas de estilo necesarias para lograr que la página se muestre de la siguiente
forma:
Color de fondo: #4682B4.
Tipografía: tamaño 1.4em.
H1: text-transform: uppercase, color: #FFD700.
Ul: margin: 0, padding: 0, list-style-type: none.
Li: background: url(images/bullet.gif) no-repeat 0 50%, padding-left: 30px.
Div: color: #008080, margin: 60px, padding: 100px 395px.
6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
7. Visualizar la página web en el navegador.
Ejercicio 5. Lista con imágenes.
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre lista_imagenes.html
3. Estructura de la página web:
12
<div id="titulo">Bonita forma de personalizar nuestras listas
<li class="mac">Usando <span>Macintosh
<li class="wordpress">Powered by <span>Wordpress
<li class="clickideas">Design by <span>Clickideas
<li class="pownce">MyPownce
<li class="flickr">My Photos Flickr
<li class="blog">My blog
<li class="mail">My E-mail
<li class="tarjeta">My vcard
<li class="info">More Info
4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre style_imagen.css
5. Aplicar las reglas de estilo necesarias para lograr que la página se muestre de la siguiente
forma:
Color de fondo: #222222.
Color de la tipografía: blanco.
<a>: color: #FF8000.
#cuadro: color:#fff, height:230px, width:400px, margin:0 auto,
padding:0, background:#141414, border: 5px, solid #1A1A1A
#titulo: color:#ccc, height:230px, width:400px, margin:0 auto,
padding:0, background:#141414, border: 5px, solid #1A1A1A, text-align: center
Li span: color: #C42808, text-decoration: underline.
clases: Para todas las clases será el mismo estilo solo cambiara el nombre de la imagen.
6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
13
7. Visualizar la página web en el navegador.
Ejercicio 6. Vínculos.
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre vínculos.html
3. Estructura de la página web:
14
<h2>Ejemplo 1: Atributo href
<a href="http://www.google.com/">Google
<h2>Ejemplo 2: El atributo target
<p>Se utiliza para definir donde queremos que se abra el documento al presionar sobre el
enlace. Vamos a abrir el documento en una nueva página del navegador.
<a href="http://www.google.com/" target="_blank">Google
<h2>Ejemplo 3: El atributo name
<p>Este atributo se usa para definir una determinada ubicación dentro de la página.
Supongamos que definimos un destino de vínculo llamado "destino-uno" en el archivo
"uno.html".
<a name="destino-uno">Capitulo 1
<h2> Ejemplo 4: Creando un enlace a un email
<p>Se utiliza en caso que queramos que un enlace mande un email. En el momento que
presionamos dicho link se abrirá automáticamente el programa de email que tenemos definido
por defecto.
<a href="/mailto: [email protected]">Mandar email
<h2>Ejemplo 5: Un enlace a partir de una imagen
<p>Muchas veces queremos usar una imagen como enlace a otro documento. Para ello
debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.
<a href="http://www.google.com/"><img src="images/Google.png">
15
4. El estilo css será el mismo que se aplicó al ejercicio número 1 de la guía.
5. Visualizar la página web en el navegador.
Ejercicio 7. Lista de definición y propiedades css3.
1. Cree un nuevo archivo en Sublime Text dando click en file, new file.
2. Guardar el archivo en la carpeta creada con su carnet haciendo uso de Ctrl+s o dando click en
file, save y colocarle en el nombre menú.html
3. Estructura de la página web:
16
<h1>Vínculos y listas en un menú
<ul id="button">
<li><a href="#">Inicio
<li><a href="#">Clientes
<li><a href="#">Servicios
<li><a href="#">Productos
<li><a href="#">Portafolio
<li><a href="#">Ayuda
<li><a href="#">Imágenes
<li><a href="#">Contáctanos
4. Crear un nuevo archivo y guardarlo en la carpeta css con el nombre menu.css
5. Aplicar las reglas de estilo necesarias para lograr que la página se muestre de la siguiente
forma:
Color de fondo: #2E9AFE, margen 65px.
H1: #D8D8D8, texto centrado.
hr: border-color:#D8D8D8, border-style:solid, border-width:5px, margin: 0px 45px
div: margin: 45px, background-color: #00FFBF, padding: 45px 140px 100px
#button: padding 0px.
#button li: display: inline.
#button li a: font-size:11px, float:left, padding: 10px, background-color: #2175bc,
color: #fff.
#button li a:hover: background-color: #2586d7, margin-top:-2px, paddingbottom:12px.
6. Agregar la línea necesaria en el documento html para lograr vincular el archivo css y poder
aplicar los estilos.
7. Visualizar la página web en el navegador.
17
V. Ejercicio complementario
Ejercicio 1
Crear un listado donde describa los días de la semana, en cada día las asignaturas correspondientes,
implemente propiedades CSS3 según su creatividad.
implementando propiedades CSS3 a su creatividad
Ejercicio 2
Cree una página web, la cual muestre todos los formatos de listas presentados en la siguiente
estructura.
18
VI. Análisis de resultados
1. De las siguientes propiedades investigue el significado y en una página web mostrar el
concepto no más de tres líneas y por cada una de ellas hacer un ejemplo.
Display: none
Display: inline
Display: inline-block
Display: list-item
Display: run-in
2. Cree una página con 3 vínculos externos y 2 vínculos externos, en estos últimos puede ocupar
paginas ya creadas por ustedes mismos.
Nota: el texto de color azul y subrayado es un vínculo
3. Investigue sobre cómo crear menús desplegables con listas y css, tanto verticales como
horizontales, y presente un ejemplo de cada uno de ellos.
Fecha de entrega: Próxima semana.
VII. Fuente de consulta
1. HTML 5 para desarrolladores
Editorial Anaya Multimedia 1ra. Edición, Madrid, España.
Autor: Joseph W. Lowery y Mark Fletcher
Biblioteca UDB – Clasificación: Libro 004.67 L913 – ISBN: 978-84-415-3108-6
2.HTML 5.
Editorial Anaya Multimedia.1ra. Edición. Madrid, España.
Autor: Alonso Álvarez García
Biblioteca UDB – Clasificación: Libro 004.67 A473 - ISBN:978-84-415-2746-1
19
© Copyright 2024