Esta vez aprenderemos a hacer un menú sencillo hecho con HTML y CSS.
Bueno, antes que nada, daré una pequeña explicación sobre lo que es CSS.
CSS es una abreviación en ingles [Cascading style sheet] que significa -Hoja de estilos en cascada-. Que sirve para configurar la presentacion y estilo de una pagina web creada con HTML, XML y XHTML. ya que al programar con estas tres ultimas, no hay mucha variedad de opciones para personalizar una pagina web.
En otras palabras, CSS le añade estilo a la estructura de HTML.
Y como nosotros queremos una pagina web presentable, en este post, añadiremos nuevas etiquetas y la implementacion explicada de CSS.
Empezemos!!
Paso 1
Guardo el archivo como Menusencillo.html
<html>
<meta charset=''utf-8''> */esto sirve para que HTML reconozca codificaciones de lenguaje universal/*
<head> */etiqueta de encabezado/*
<title> */etiqueta para añadir titulo a nuestra web/*
Mi Primera Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor="#088A68"> */con CSS puedo utlizar colores HTML mas variados/*
<h2> */tamaño del texto/*
<center> */etiqueta para que se centre el texto/*
<font color="#04B45F"> REALIZANDO UN MENU SENCILLO */el color del texto/*
</font> */etiqueta de cierre de texto/*
</center> */etiqueta de cierre del centrado/*
</h2> */etiqueta de cierre del tamaño del texto/*
<style type="text/css"> */es para darle estilo a la pagina, trabajando con CSS/*
Paso 2
Ahora vamos a editar el estilo del menú en si.
<meta charset=''utf-8''> */esto sirve para que HTML reconozca codificaciones de lenguaje universal/*
<head> */etiqueta de encabezado/*
<title> */etiqueta para añadir titulo a nuestra web/*
Mi Primera Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor="#088A68"> */con CSS puedo utlizar colores HTML mas variados/*
<h2> */tamaño del texto/*
<center> */etiqueta para que se centre el texto/*
<font color="#04B45F"> REALIZANDO UN MENU SENCILLO */el color del texto/*
</font> */etiqueta de cierre de texto/*
</center> */etiqueta de cierre del centrado/*
</h2> */etiqueta de cierre del tamaño del texto/*
<style type="text/css"> */es para darle estilo a la pagina, trabajando con CSS/*
#Menu li{ */aqui vamos a editar solo los elementos del menú, y -li- es para quitar el subrayado a cada botón/*
display: inline; */ es para que los elementos salgan uno después de otro/*
text align: center; */sirve para alienar el texto, y queremos que salga centrado/*
margin: 20px 20px 0px 0px; */esto sirve para el margen que debe haber entre cada boton/*
}
#Menu li a{ */-a- sirve para indicar que es botón/*
padding: 2px 7px 2px 7px; */borde entre los menús o botones/*
color: red; */este es el color del texto al ser presionado */
background-color: white; */es el color de fondo del botón/*
border: 10px pink; */es el tamaño del borde y su color (grosor y color)/*
text-decoration: none; */la decoración del texto/*
} */siempre se va a abrir y a cerra con { }/*
#Menu li a:hover{ */hover nos permite que cambie de color al pasar el cursos por encima/*
background-color: purple; */el color del fondo cuando el cursos pase encima/*
color: yellow; */el color del texto cuando el cursor pase encima/*
} */siempre se va a abrir y a cerra con { }/*
#Menu ul{ */ la etiqueta -ul- nos permite ordenar el listado/*
text-align: center; */nosotros queremos un listado centrado/*
}
</style> */cerramos la etiqueta de estilo/*
Paso 4
Crear el menu
<html>
<meta charset=''utf-8''> */esto sirve para que HTML reconozca codificaciones de lenguaje universal/*
<head> */etiqueta de encabezado/*
<title> */etiqueta para añadir titulo a nuestra web/*
Mi Primera Web
</title> */etiqueta de cierre del titulo/*
</head> */etiqueta de cierre del encabezado/*
<body bgcolor="#088A68"> */con CSS puedo utlizar colores HTML mas variados/*
<h2> */tamaño del texto/*
<center> */etiqueta para que se centre el texto/*
<font color="#04B45F"> REALIZANDO UN MENU SENCILLO */el color del texto/*
</font> */etiqueta de cierre de texto/*
</center> */etiqueta de cierre del centrado/*
</h2> */etiqueta de cierre del tamaño del texto/*
<style type="text/css"> */es para darle estilo a la pagina, trabajando con CSS/*
#Menu li{ */aqui vamos a editar solo los elementos del menú, y -li- es para quitar el subrayado a cada botón/*
display: inline; */ es para que los elementos salgan uno después de otro/*
text align: center; */sirve para alienar el texto, y queremos que salga centrado/*
margin: 20px 20px 0px 0px; */esto sirve para el margen que debe haber entre cada boton/*
}
#Menu li a{ */-a- sirve para indicar que es botón/*
padding: 2px 7px 2px 7px; */borde entre los menús o botones/*
color: red; */este es el color del texto al ser presionado */
background-color: white; */es el color de fondo del botón/*
border: 10px solid pink; */es el tamaño del borde y su color (grosor y color)/*
text-decoration: none; */la decoración del texto/*
} */siempre se va a abrir y a cerra con { }/*
#Menu li a:hover{ */hover nos permite que cambie de color al pasar el cursos por encima/*
background-color: purple; */el color del fondo cuando el cursos pase encima/*
color: yellow; */el color del texto cuando el cursor pase encima/*
} */siempre se va a abrir y a cerra con { }/*
#Menu ul{ */ la etiqueta -ul- nos permite ordenar el listado/*
text-align: center; */nosotros queremos un listado centrado/*
}
</style> */cerramos la etiqueta de estilo/*
<Nav> */etiqueta que nos permite utilizar un navegador/*
<div id="menu">
<ul> */nos permite crear una lista/*
<li> <a href="texto.htlm"> PRINCIPAL */li-porque es un boton, -a-porque es un link y -href- es hacia donde quiero que me lleve el link al clickearlo, hay que especificar bien donde se encuentra/*
</li> </a> */etiquetas de cierre/*
<li><a href="#"> */aquí ponemos -#- porque queremos que al clickearlo nos dirija a la pagina acutal,(osea que no se cambie de sitio o pagina, no va a tener ninguna accion)/*
AYUDA </li> </a> */nombre del botón y etiquetas de cierre de -li- y -a- lo mismo se hace para los demas botones, solo que con distinto nombre/*
<li><a href="#">PRODUCTOS</li></a>
<li><a href="#">CONTACTOS</li></a>
<li><a href="#">PEDIDOS</li></a>
</ul> */cerramos la lista/*
</div> */etiqueta de cierre de -div-/*
</nav> */etiqueta de cierre del navegador o menu/*
</body> */cerramos el contenido/*
</html> */etiqueta de cierre/*
Paso 5
Guardar el archivo y ver la pagina web.
Espero les haya gustado o les haya quedado bonito su menú.
Cualquier duda, por favor dejen su comentario, Yo con mucho gusto, responderé.
Hasta la próxima!!!
Cuídense.
Cualquier duda, por favor dejen su comentario, Yo con mucho gusto, responderé.
Hasta la próxima!!!
Cuídense.
No hay comentarios:
Publicar un comentario