Tutorial de HTML - 6 - Crear un menú de opciones
Quienes sigan este tutorial de HTML, hasta ahora habrán creado una página que puede tener párrafos comunes, listas, tablas, imágenes y luego formato. Ahora vamos a agregarle un menú a la izquierda.
Esta vez empezaremos por crear un archivo que contenga el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Página con menú</title>
</head>
<body>
<ul class="opciones">
<li><a href="index.html">Página principal</a>
<li><a href="fotos.html">Mis fotos</a>
<li><a href="agenda.html">Lo que tengo que hacer</a>
<li><a href="links.html">Mis páginas favoritas</a>
</ul>
<h1>Este es el índice de la página que estoy haciendo</h1>
<p>Por eso el archivo se llama index</p>
<p>Bienvenido al sitio</p>
<a href="mailto:midireccion@miservidor.com.ar">Haga clic aquí para enviarme un mensaje de correo</a>
</body>
</html>
En él encontramos varios renglones que contienen un código para un link (enlace, hipervínculo):
-Utilizando A HREF indicamos qué deberá abrir el navegador si se cliquea en el texto que está entre <A > y </A >, por ejemplo con este código:
<a href="fotos.html">Mis fotos</a>
Lo que se ve es este resultado: Mis fotos
-Utilizando el mismo código se puede hacer un vínculo a una dirección de mail, indicando en la dirección mailto: para que se abra una ventana con un mensaje nuevo, por ejemplo:
<a href="mailto:midireccion@miservidor.com.ar">Haga clic aquí para enviarme un mensaje de correo</a>
Ahora podemos agregarle una página de estilo como esta, para darle un aspecto como el de la imagen:
body {
padding-left: 15em;
padding-top: 1em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: #990099;
background-color: #EAEAFF }
ul.opciones {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 11em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.opciones li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em;
border-top: dotted;}
ul.opciones a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
¿Por qué ahora el menú aparece a la izquierda y con toda la decoración?
Porque en el archivo de la página índice utilizamos esta línea al comenzar la lista:
<ul class="opciones">
Y en la hoja de estilos utilizamos esta línea para indicar cómo será el texto de listas de tipo “opciones”:
ul.opciones { }
además de especificar cómo será cada uno de los elementos de una lista de tipo “opciones”:
ul.opciones li { }
Para seguir practicando:
Nunca hay que olvidar que existen muchos usuarios que navegan con dispositivos monocromático y otros que tienen dificultades en su vista que no le permiten distinguir los colores. Por lo tanto, siempre debe existir un importante contraste entre el color de fondo y el del texto.
El presente pertenece a una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML
Esta vez empezaremos por crear un archivo que contenga el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Página con menú</title>
</head>
<body>
<ul class="opciones">
<li><a href="index.html">Página principal</a>
<li><a href="fotos.html">Mis fotos</a>
<li><a href="agenda.html">Lo que tengo que hacer</a>
<li><a href="links.html">Mis páginas favoritas</a>
</ul>
<h1>Este es el índice de la página que estoy haciendo</h1>
<p>Por eso el archivo se llama index</p>
<p>Bienvenido al sitio</p>
<a href="mailto:midireccion@miservidor.com.ar">Haga clic aquí para enviarme un mensaje de correo</a>
</body>
</html>
En él encontramos varios renglones que contienen un código para un link (enlace, hipervínculo):
-Utilizando A HREF indicamos qué deberá abrir el navegador si se cliquea en el texto que está entre <A > y </A >, por ejemplo con este código:
<a href="fotos.html">Mis fotos</a>
Lo que se ve es este resultado: Mis fotos
-Utilizando el mismo código se puede hacer un vínculo a una dirección de mail, indicando en la dirección mailto: para que se abra una ventana con un mensaje nuevo, por ejemplo:
<a href="mailto:midireccion@miservidor.com.ar">Haga clic aquí para enviarme un mensaje de correo</a>
Ahora podemos agregarle una página de estilo como esta, para darle un aspecto como el de la imagen:
body {
padding-left: 15em;
padding-top: 1em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: #990099;
background-color: #EAEAFF }
ul.opciones {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 11em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.opciones li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em;
border-top: dotted;}
ul.opciones a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
¿Por qué ahora el menú aparece a la izquierda y con toda la decoración?
Porque en el archivo de la página índice utilizamos esta línea al comenzar la lista:
<ul class="opciones">
Y en la hoja de estilos utilizamos esta línea para indicar cómo será el texto de listas de tipo “opciones”:
ul.opciones { }
además de especificar cómo será cada uno de los elementos de una lista de tipo “opciones”:
ul.opciones li { }
Para seguir practicando:
- Se pueden ver muchos modelos de listas con sus respectivos códigos en el sitio Listamatic.
- Esta es una lista de colores para probar suerte con las combinaciones: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal y aqua
Nunca hay que olvidar que existen muchos usuarios que navegan con dispositivos monocromático y otros que tienen dificultades en su vista que no le permiten distinguir los colores. Por lo tanto, siempre debe existir un importante contraste entre el color de fondo y el del texto.
El presente pertenece a una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML
posted by Fernández at
11:02 a. m.
2 Comments:
Hola, Iris!
Excelente idea!
Una sugerencia...
¿Por qué no hacés un blog sobre HTML y pones exclusivamente los post del tutorial HTML con todo el procedimiento para armar una página web, y para que aparezcan en sucesión lineal, colocás primero el último tutorial, luego el anteúltimo, y al final el primero?
Gracias!
Betto
Luis Alberto M. Lecuna
POSDATA: Hace dos años y medio que estoy alentando a los docentes del cole para que preparen clases en formato blog... v. gr.
La Célula
By
:, at 2:52 p. m.
Qué kilo, Iris ;-)! Seguiré tu curso durante este verano en que no bajo a La Patria.
Un gran abrazo,
Bea
By
Bea Marín, at 7:13 a. m.
Publicar un comentario
<< Home