Desarrollo Web Lección 3 - Listas
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
<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>
La etiqueta
HTML para un enlace es
<a>. Puedes colocarlos dentro o fuera de
<li>, pero recuerda que no puedes interconectarlos.
<li><a></li></a> causará problemas.
-
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 target atributo 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>
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 .
Los elementos de bloque se apilan verticalmente uno encima del otro.
<h1>,
<p> y
<li> son todos ejemplos de elementos de bloque.
Los elementos en línea se sientan uno al lado del otro horizontalmente. Los ejemplos incluyen
strong,
<em> y
<span>.
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;
}
display tiene 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, inline estamos 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;
}
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