Tech School

User Tools

Site Tools

Trace: • menus • format_text • named_arrays
es:web_development:lists:menus

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
es:web_development:lists:menus [2022/03/15 08:31]
mag [Bloque vs en Línea] 		es:web_development:lists:menus [2023/08/16 09:33] (current)
Line 2: Line 2:
 ===== Menús ===== ===== Menús =====
 ==== Objetivo ==== ==== Objetivo ====
-En este actividad, mostrará listas como menús, creará enlaces a otras páginas y aprenderá algunas propiedades básicas de diseño.+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 ==== ==== Configuración ====
Line 10: Line 10:
   * Seleccione la nueva carpeta y use Ctrl-N y Ctrl-S para crear un archivo guardado como 'menu.html'.   * 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.   * Escriba 'html' y seleccione 'html:5' para completar el archivo con el código base.
-  * Introduzca una nueva línea en <html><head></html> y enlace a una hoja de estilo externa (escriba 'link' y seleccione 'link:css').+  * Introduzca una nueva línea en la etiqueta <html><head></html> y enlace a una hoja de estilo externa (escriba 'link' y seleccione 'link:css').
   * Cree y guarde un archivo llamado 'style.css'.   * Cree y guarde un archivo llamado 'style.css'.
  
 ==== Barra Lateral ==== ==== 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.   *  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. Agregue este código dentro de las etiquetas <html><body></html>.+  * 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 <html><body></html>.
 <code>    <ul> <code>    <ul>
         <li>Historia divertida</li>         <li>Historia divertida</li>
Line 37: Line 37:
   * Intenta hacer clic en el enlace. Debería llevarte directamente a tu Historia Divertida jsfiddle.   * 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.   * 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.
-<code><li><a href="https://jsfiddle.net/maganthro/xv5bpf06/13/" target="blank">Historia divertida</a></li></code>+<code><li><a href="https://jsfiddle.net/maganthro/xv5bpf06/13/" target="_blank">Historia divertida</a></li></code>
   * El <html>target</html> 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 <html>target</html> 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.   * El segundo enlace está en el mismo servidor, por lo que no necesitamos escribir todo. Podemos usar una dirección 'relativa' como esta.
Line 59: Line 59:
     display: inline;     display: inline;
 }</code> }</code>
-  * <html>display</html> 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, <html>inline</html> es estamos diciendo que se muestren horizontalmente.+  * <html>display</html> 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, <html>inline</html>  estamos diciendo que se muestren horizontalmente.
   * Abra su 'menu.html' en Live Server y verifique los resultados.   * 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.   * Si aún ve las viñetas en su menú, no se ve tan bien, así que eliminémoslas nuevamente.
Line 89: Line 89:
  
 ==== Codigo Final ==== ==== Codigo Final ====
-  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/es.php|lists.html]] +  * [[https://techschool.murraygunn.id.au/webdev/classes/proyecto/1/es.php|menu.html]] 
-  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/style.php|style.css]] +  * [[https://techschool.murraygunn.id.au/webdev/classes/proyecto/1/style.php|style.css]] 
-  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/lists.html|resultado]]+  * [[https://techschool.murraygunn.id.au/webdev/classes/proyecto/1/menu.html|resultado]]
  
 [[es:web_development:lists:javascript|Siguiente: JavaScript]] [[es:web_development:lists:javascript|Siguiente: JavaScript]]
es/web_development/lists/menus.1647358260.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki