Menu en HTML

Menú en HTML

Para comenzar, recapitulemos lo que es un hipervínculo.

Hipervínculos

Un hipervínculo es un vínculo de una página Web o un archivo a otra página Web u otro archivo.

Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en un explorador Web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página Web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, una dirección de correo electrónico o un programa. Por ejemplo, un hipervínculo a una página muestra la página en el explorador Web y un hipervínculo a un archivo .avi abre el archivo en un reproductor multimedia.

Menú Web

En informática, un menú es una serie de opciones que el usuario puede elegir para realizar determinadas tareas.

Es el / los elementos de la web que permite que los usuarios puedan seleccionar la parte de nuestro sitio que desean visitar.

Los menús están contenidos en una barra de menú, la cual se puede decir que es una propiedad que tienen las ventanas para poseer menús, esto es porque la barra de menú en sí misma no es una ventana como lo puede ser un botón de comando o un cuadro de texto, pero tampoco es una barra de herramientas, sino un objeto contenedor de otros menús.

También se les llama menú de navegación

Estructura de los menús

Los menús se organizan siguiendo el principio de los árboles o fractales, esto quiere decir que un menú puede tener menús hijos y menús padres, o menú y submenú, es decir, al pasar el ratón por le menú principal saldrá uno o varios elementos con hipervínculos para abrir o desplegar.

Tipos de menús

Los tipos de menús más usuales son:

· Normales. Son los que tienen el predominio más alto en las aplicaciones.

· Casillas de verificación. Al hacer clic sobre ellos, se activa un indicador y su estado cambia a «marcado/desmarcado».

· Botones de radio o Radio buttons. Son grupos de botones donde sólo se puede tener activo uno de todos ellos y su indicador acostumbra ser una viñeta.

· Submenús. Son los menús que tienen menús hijos, es decir que no se puede hacer clic en él, en vez de eso hay que seleccionar uno de sus «hijos»; habitualmente traen consigo una flecha en la lateral derecha indicando la naturaleza del mismo.

· Separadores. Son menús sin nombre ni valor Se muestran como líneas grises opacas entre la lista de comandos.

Orientación de los menús

Los menús pueden estar orientados de diversas maneras, generalmente se utilizan dos tipos los verticales y horizontales.

El Menú Horizontal, se ve así.

El Menú Vertical, se ve así.

_______________

----------------------

Actividad a Realizar

1. Creando menús de navegación en HTML

1.1 Prepare las imágenes que vaya a insertar en su web, descárguelas del celular o desde el internet al escritorio del pc, póngales nombres sencillos ( gato.jpg , etc)

1.2 Descargue de su correo el archivo de la clase anterior su_nombre.html y ábralo en el block de notas(notepad).

1.3 Abra nuevamente el archivo con el block de notas,(click derecho - abrir con) y modifique su código para insertar dos imágenes de su elección, así:

<!DOCTYPE html>

<head>

<title>Este es el Título de la Página </title>

<style>

div.scrollmenu {

background-color: #333;

overflow: auto;

white-space: nowrap;

}

div.scrollmenu a {

display: inline-block;

color: white;

text-align: center;

padding: 14px;

text-decoration: none;

}

div.scrollmenu a:hover {

background-color: #777;

}

body {
font-family: 'Lato', sans-serif;
}

.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}

.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}

.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}

@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}

</style>

</head>

<body>

<a href="inicio.html">Inicio</a>

<a href="noticias.html">Noticias</a>

<a href="contacto.html">Contacto</a>

</div>

<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="inicio.html">INICO</a>
<a href="noticias.html">NOTICIAS</a>
<a href="contacto.html">CONTACTO</a>
<a href="blog.html">BLOG</a>
</div>
</div>

<p>Haz Click en las Tres Barras.</p>
<p>Para Desplegar el Menú:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Abrir</span>

<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>

<p>

<h1 align="center" style="color:#FF0044"> Mi primera Página WEB</h1>

<p align="center">Esta es una muestra de páginas weB con imágenes</p>

<h2 align="center" >Primera Imagen</h2>

</p>

<p>

<p align="center">La segunda imagen tiene <br> tamaño específico</p> <h2 style="color:#00AA44" align="center" >Segunda Imagen</h2>

<img src="gato.jpg" width="400" height="251"

></p>

<p align="center">y La tercera imagen tiene <br> tamaño específico <br> y un título al pasarle el Mouse por encima</p>

<h2 style="color:#0AA0FF" align="center" >Tercera Imagen</h2>

<img src="gato.jpg" width="500" height="341"

title="EL hombre primitivo transportaba piedras sobre troncos de madera.">

<! Esto que está luego de la admiración no se verá, se llama comentario >

<! hasta aquí es la práctica de hoy>

</body>

</html>

1.4 Cree tres copias del archivo de la clase anterior su_nombre.html y cámbieles el nombre, los archivos deberán quedar así; inicio.html , contacto.html, blog.html, y noticias.html

1.5 Modifique cada archivo HTML en el block de notas para notar diferencias entre una y otra.

1.6 Verifique el funcionamiento de su menú abriendo una en el navegador y dando click en los elementos del menú.

Puede cambiar las imágenes y el texto de cada página.

Nota; recuerda que debes cambiar el nombre de las imágenes, y las copias de cada página que haga.

Las imágenes usadas y las páginas deben estar en el mismo directorio (carpeta)