![Te enseño a hacer una pagina en HTML5 desde 0 Parte [3/?]](https://storage.posteamelo.com/assets-adonis/assets/2013/07/14/AECBDD4E3.png-uZGaXz2NmsL.webp)
Hola amigos! Hoy seguimos con la tercera parte de los post de programación para crear nuestra web.
Si no viste los anteriores:
En este post vamos a ver unas cositas que quedaron pendientes del StyleSheet y también como agregar mas secciones a nuestra pagina!
Hoy veremos algo nuevo llamado Jquerry [Tranquilos, no hace falta que aprendamos a programar en ningún lenguaje nuevo]
¿Qué es jQuery?
jQuery es considerado un Framework de Javascript, o ambiente de desarrollo. Lo que no es más que un conjunto de utilidades las cuales no necesitan ser programadas, de hecho ya fueron programadas, probadas y podemos utilizarlas de una manera muy simplificada.
En otras palabras, podremos lograr los mismos resultados, en menos tiempo sin necesidad de programar una funcionalidad completamente.
¿Y que mierda puedo hacer con esto?
jQuery nos permite agregar efectos y funcionalidades complejas a nuestro sitio web, como por ejemplo: galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra página y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX , sin preocuparnos de los detalles complejos de la programación.
Podría seguir hablando y poniendo información sobre Jquerry pero creo que no sera necesario, con lo que puse me parece que basta para que entiendan lo que es.
(Si no entendiste busca en google, no seas pajero)
Para agregar Jquerry a nuestro código solo basta con poner un link. Pondremos lo siguiente ( Pueden ubicarlo debajo del <title> )
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Se acabo Jquerry, a la mierda..
Bueno, ahora vamos a nuestro styleSheet y modificaremos aun mas nuestro NAV
Así que escribiremos las siguientes líneas
nav ul li:hover
{
background-color: grey; <!-- cuadro color gris -->
}
Esto lo que hace es que al pasar el cursor por uno de los items de nuestro Nav aparezca un pequeño cuadro gris, ustedes pueden cambiar el color si lo desean (Recuerden que pueden usar colores hexadecimales).
PD: este cuadro que hicimos lo logramos gracias a Jquerry.
Ahora creo que solo faltaría agregar las secciones de nuestra pagina
Yo puse : Inicio, Fotos, Contacto, Media, Archivos.
El inicio sera el index que es lo que hemos estado trabajando.
<!-- Este es el nav que hicimos, en href="#" irá la ruta a la que nos envía ese boton-->
<nav>
<ul>
<li><a href=#">Inicio</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Archivos</a></li>
</ul>
</nav>
<!-- tendremos que hacer algo así-->
<nav>
<ul>
<li><a href=index.html">Inicio</a></li>
<li><a href="galeria.html">Fotos</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="archivos.html">Archivos</a></li>
</ul>
</nav>
Lo primero que crearemos será el elemento "Galería". Creamos un documento nuevo y lo guardamos como galeria.html
La galería que enseñare a hacer es un tanto compleja así que no explicare mucho código así no se les haga un pito la cabeza
PD: Esta solo funcionara si nuestra pagina esta montada en un servidor ( Al final del post tenemos un tutorial de como hacerlo)
Primero haremos la estructura básica:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Ahora, dentro del head escribimos lo siguiente:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" /> <!-- Como verán, tendremos que crear otro style sheet para esto, pero lo haremos luego-->
Ahora, en body abrimos un div con una id="slideshow"
<body>
<div id="slideshow">
Abajo de nuestro div abrimos un ul y le ponemos como clase "slides"
<ul class="slides">
debajo de nuestro ul escribimos de un li seguido por un img src
<li><img src="Acá pondremos la ruta de la imagen que luego enseñare a crearla" width="620" height="320" alt="Descripción de la foto" /></li>
Con esto insertaríamos solo 1 imagen, podemos escribirlo varias veces así podamos poner muchas.
Luego de escribir eso, cerramos el ul (</ul>
Ahora vamos a agregar unas flechitas para correr las fotos.
Entonces, abajo del /ul escribiremos <spam con una clase "arrow previous" y luego otro span mas con la clase "arrow next"
<span class="arrow previous"></span>
<span class="arrow next"></span>
[/color]
[b][color=green]Y luego de esto cerramos el div (/div)[/color][/b]
[img]http://k38.kn3.net/C64D32B31.png[/img]
[quote]Ahora, abajo, pondremos <script src y vamos a importar otro Jquerry xD y luego, abriremos otro scrip mas para importar un documento JS que no vamos a programarlo en estos tutoriales pero lo dejare para descargar :B[/quote]
[code]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
cerramos /body, cerramos /html
Nos quedará algo así
Esto es todo por hoy, mañana terminaremos la galería y empezaremos a crear el "contacto"
También veremos como crear el footer y modificarlo
Sublime: http://www.sublimetext.com/2
Otros post
![Te enseño a hacer una pagina en HTML5 desde 0 Parte [3/?]](https://storage.posteamelo.com/assets-adonis/assets/2013/10/02/10-1.png-TrgJAIk-rnw.webp)
