es:web_development:lists:menus
Table of Contents
Desarrollo Web Lección 3 - Listas
Menús
Objetivo
En esta actividad, vas ha crear listas como menús, crearás enlaces a otras páginas y aprenderás algunas propiedades básicas de diseño.
Configuración
- En esta actividad, vamos a empezar a construir un sitio web.
- Abra Visual Studio y abra su carpeta.
- Haga clic en la parte vacía del panel Explorador (lado izquierdo donde ve los nombres de los archivos) y haga clic en el icono 'agregar carpeta'. Llámalo 'proyecto'.
- Seleccione la nueva carpeta y use Ctrl-N y Ctrl-S para crear un archivo guardado como 'menu.html'.
- Escriba 'html' y seleccione 'html:5' para completar el archivo con el código base.
- Introduzca una nueva línea en la etiqueta
<head>y enlace a una hoja de estilo externa (escriba 'link' y seleccione 'link:css'). - Cree y guarde un archivo llamado 'style.css'.
Barra Lateral
- Muchos sitios web utilizan una barra lateral para la navegación o los enlaces. Es esencialmente una lista de enlaces, por lo que una estructura de lista es más efectiva.
- Vamos a crear una lista de las actividades que hemos hecho hasta ahora en el documento 'menu.html'. Agregue este código dentro de las etiquetas
<body>.
<ul>
<li>Historia divertida</li>
<li>¿Quién soy?</li>
<li>Menú</li>
</ul>
- Sin embargo, no necesariamente queremos las viñetas o los números al frente. Usemos CSS para eliminar las viñetas. Ingrese lo siguiente en 'style.css'.
ul {
list-style-type: none;
}
- En lugar de elegir un tipo de viñeta, simplemente dijimos “none”.
- Agregue cualquier otro estilo que desee (tamaño, color, fuente, etc.).
Enlaces
- Para que este menú de la barra lateral sea útil, debemos poder hacer clic en los elementos y ser llevados a la página / sitio respectivo. Para esto necesitamos enlaces.
- No guardaste el enlace para tu historia divertida, así que usaremos el que creé.
<li><a href="https://jsfiddle.net/maganthro/xv5bpf06/13/">Historia divertida</a></li>
hrefes la referencia del hipervínculo o la dirección de la página. Aquí, nuestro hipervínculo es https://jsfiddle.net/maganthro/xv5bpf06/13/.- Guarde el archivo, ábralo en Live Server y eche un vistazo a la primera línea. Debe estar coloreado y subrayado. El color dependerá de si ha visitado esta página anteriormente en este navegador en esta PC.
- Intenta hacer clic en el enlace. Debería llevarte directamente a tu Historia Divertida jsfiddle.
- Observe que todavía está usando la misma pestaña. Si desea volver a su menú, debe usar el botón 'atrás'. Podemos cambiarlo para que el enlace abra una nueva pestaña.
<li><a href="https://jsfiddle.net/maganthro/xv5bpf06/13/" target="_blank">Historia divertida</a></li>
- El
targetatributo especifica la pestaña de destino. Puede nombrar sus pestañas para que pueda elegir qué pestaña sobrescribir, pero '_blank' siempre abrirá una nueva pestaña. Intentalo. - El segundo enlace está en el mismo servidor, por lo que no necesitamos escribir todo. Podemos usar una dirección 'relativa' como esta.
<li><a href="../lists.html">¿Quién soy?</a></li>
- Los
..medios 'el directorio sobre el que está este archivo.' Luego, el navegador calcula la dirección completa y salta a la página correcta. - La primera dirección, que incluye 'http', se denomina dirección 'absoluta'. Normalmente los usamos para enlazar a lugares fuera de nuestro servidor.
- El último enlace es a esta misma página. Esto no tiene mucho sentido, por lo que podríamos omitirlo, pero es útil tener el código listo para usar en cada página. Podríamos bloquearlo con Javascript, pero por ahora, simplemente agréguelo tal como está.
<li><a href="menu.html">Menú</a></li>
- Pruebe estos enlaces para asegurarse de que funcionan como se esperaba. Luego veremos cómo crear listas dinámicamente.
Bloque vs en Línea
- El otro tipo de menú que se usa a menudo en las páginas web se encuentra en la página debajo del encabezado.
- Podemos mantener la lista que hemos estado usando, pero editamos el CSS para que se vea diferente.
- Lo primero que tenemos que hacer es hacer que la lista sea horizontal.
- Hay dos modos básicos para todos los elementos HTML .
- Sin embargo, estos se pueden controlar, por lo que puede hacer que los elementos de la lista se coloquen uno al lado del otro.
- Agregue el siguiente código a su 'style.css'.
li {
display: inline;
}
displaytiene muchas opciones que presentan el elemento como bloque o en línea (o no se muestra) dependiendo de los elementos que los rodean. Al configurar los elementos de nuestra lista,inlineestamos diciendo que se muestren horizontalmente.- Abra su 'menu.html' en Live Server y verifique los resultados.
- Si aún ve las viñetas en su menú, no se ve tan bien, así que eliminémoslas nuevamente.
ul {
list-style-type: none;
}
- Solo por diversión, hagamos que se vea un poco más bonito.
ul {
list-style-type: none;
background-color: darkgoldenrod;
padding-top: 10px;
padding-bottom: 10px;
}
li {
display: inline;
border-right: solid 1px yellow;
}
a {
text-decoration: none;
color: #ccc;
padding: 10px;
font-weight: 700;
font-family: arial;
}
- Es posible que no entiendas todos estos estilos. Veremos el relleno y los bordes en la siguiente lección sobre tablas. De manera similar, veremos diferentes formas de especificar colores más adelante en el curso.
- Siéntase libre de ajustar algunos de estos valores para ver lo que hacen.
Codigo Final
es/web_development/lists/menus.txt · Last modified: 2023/08/16 09:33 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
