![Crea una Web y aprende un poco de Html/css [Tutorial]](https://storage.posteamelo.com/assets-adonis/assets/2013/09/05/34C3D1E73-vzLLsf8NesI.webp)
Como anda Taringueros…..en este Post vamos a realizar paso a paso un pagina web muy sencilla viendo cosas básicas de Html/css.Al tutorial lo hice usando mis palabras, así que nada de palabras muy técnicas ni nada por el estilo…lo importante es que lo entiendan…bueno me dejo de charla y arranco con el Tutorial.
Primero Imagen de la pagina sencilla que vamos a lograr
¿Que Herramientas vamos a Usar?
Pensarán que esta es la parte donde le digo que se descarguen el Dreamweaver, el Notepad++,o algún programa parecido. Pero no ,lo único que vamos a necesitar es Una Web: ccsdesk.com.
Esta pagina es una herramienta online excelente: Permite insertar código Html y Css..ver el resultado en pantalla y además descargarlo para poder tener el archivo en tu PC. Lo recomiendo, si quieres probar tus códigos y no quieres instalar nada ,esta página (obio con sus limitaciones) es para vos.
Esta pagina es una herramienta online excelente: Permite insertar código Html y Css..ver el resultado en pantalla y además descargarlo para poder tener el archivo en tu PC. Lo recomiendo, si quieres probar tus códigos y no quieres instalar nada ,esta página (obio con sus limitaciones) es para vos.
Antes de Empezar
Todos al hacer Post sabemos un poco lo que es BBCode..Si lo conoces no te va a ser muy difícil el HTML.Este lenjuage se maneja atraves de Etiquetas, las cuales tienen que abrirse y cerrarse. [Hay excepciones]Ejemplo:Si queres escribir un Parrafo, la manera correcta seria <p>contenido del párrafo</p>.
Ademas Una etiqueta puede tener en su interior otras etiquetas. Ejemplo<body><h1>Titulo</h1></body>…en este ejemplo dentro de la etiqueta body tenemos un titulo, que se introduce con la etiqueta h1. Mas adelante veremos Ejemplos mas demostrativos.Por ahora sepan que puede haber etiquetas que contienen otras.
Otras Etiquetas que Vamos a Utilizar(Pongo solo la etiqueta de Apertura ustedes ya saben que después tienes que cerrarla) van a ser:
<div>:Crea secciones en Nuesta Web..como Si fueran bloques.A esta la vamos a usar mucho.
<ul> y <li>:ul representa Toda lista desordenada y li representa cada elemento de la lista (o sea cada viñeta)
<a>: esta sirve para poner links.Por ejemplo si yo kiero que aparezca un link con la palabra taringa y me lleve a esa pagina. Seria algo asi: <a href=”Link de la pagina de taringa”>Taringa</a>.
Por ultimo si queremos agregar una imagen en la pagina el código seria asi : <img src=”link de la Imagen”>..Como verán esta etiqueta no hace falta que se cierre.
Hay Muchas mas etiquetas pero nosotros solo vamos a utilizar estas.
Dividiendo Nuestra Web
Como ya dijimos la etiqueta div sirve para dividir en bloques nuestra pagina..pero para que?..para poder cambiar la apariencia de Cada una por separado y ser mas ordenados.
Ademas podemos asignarles a cada div un identificador unico para poder reconocerlo y después modificarlo con Css.
La manera correcta de hacerla es la siguiente: <div id=”contenedor”>contenido </div>
Nuestra web va a estar dividida en 4 sectores. Un div contenedor que va a envolver a otros 3 divs: nav ; post , y pie.
El código seria el siguiente:
<div id=”contenedor”>
<div id=”nav”>
</div>
<div id=”post”>
</div>
<div id=”pie”>
</div>
</div>
Ahora vamos a introducir contenido a cada una de las Divs usando la etiquetas que vimos anteriormente.
<div id="contenedor">
<div id="Nav">
<ul>
<li><a href="#">Perfil</a></li>
<li><a href="#">Informacion</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="post">
<h3>Mis Post</h3>
<ul>
<li><a href="#">Elementos de Interfaces en PSD</a></li>
<li><a href="#">Slider para Interfaces</a></li>
<li><a href="#">Pack de Sombras</a></li>
</ul>
<img src="http://k38.kn3.net/BEEB4FC18.jpg">
</div>
<div id="Pie"><p>Maty7741web.2012</p></div>
</div>
Entramos a cssdesk.com.Lo primero que hacemos es borrar todo el código de los dos bloques (html y css). En el bloque de html copiamos y pegamos todo el código anterior.
Hasta el momento la pagina nos tendría que mostrar esto:
La verdad que por ahora horrible…..pero no desesperes taringuero….mejoraremos la apariencia con Css….ha me olvidaba para poner los link en las etiquetas <a> tienen que reemplazar “#”
Tiempo de Aplicar CSS
Es hora de aplicar estilos a nuestra etiquetas . para eso se usa Css..vamos aplicar como es la estructura del css.
ul {propiedad 1; propiedad 2;} … aplicamos las propiedades a todas la etiquetas <ul>.
#contenedor{propiedad 1; propiedad 2;} ….aplicamos las propiedades al div con el id contenedor.
#nav ul {propiedad 1; propiedad 2;}….aplicamos las propiedades solamente a la etiqueta <ul> que esta dentro de la div nav. (en este caso no de aplicaría a la etiqueta <ul> que esta dentro del div post)
Estilos al todo el documento
Pegamos este código en el bloque Css. A partir de Ahora todos los códigos los vamos a pegar en la parte de CSS.
body,html{ margin:0px;padding:0px;background-color: #eeeeee;height:100%;}
Con margin y padding:0px; eliminamos los margenes que vienen por defecto en los navegaodres
Con Background-color:le damos color a todo el documento.
Nos quedaría algo asi:
Estilos al contenedor
Pegamos este código:
#contenedor{ width:1000px;height:100%;margin:0 auto; background-color:#ffffff;}
Explicacion:
Con width:1000px le damos el ancho a nuestro div
Con margin: 0 auto centramos todo el div
Hasta ahora
Estilos al “nav”
Codigo:
#Nav{ margin: 0 auto;width:100%;height:65px;background:url("http://o1.t26.net/img/header/musica.jpg") repeat-x;}
#Nav ul{width:500px; margin:0 auto;list-style:none;}
#Nav ul li{ float:left;height:15px;margin:18px;}
#Nav ul li a {font:bold 21px Arial, Helvetica, sans-serif;padding:0 18px; height:37px;float: left;color:#f7f7f7; display:block;text-decoration:none;}
#Nav ul li a:hover {font:bold 22px Arial, Helvetica, sans-serif;padding:0 18px; height:37px;float: left;color:#cfe9f4;border-bottom:solid 2px #cfe9f4;}
Explicacion
Con #nav{background:url(“link”) elegimos una imagen como fondo de div.[yo use el de taringa]
Con repeat-x la imagen se va a repetir solo para el costado[como un mosaico]
Con #Nav ul { list-style:none;} sacamos las viñetas de toda la lista.
Con #nav ul li {float:left} todos los elementos de la lista de ponen una a lado de otro.
Con #nav ul li a modificamos las propiedades de los links que están dentro de las viñetas.
Con display block el link se conviete en un cuadrado, como un botón.
Con decoration: none se quita el subrayado de los links
Con #nav ul li a:hover elegimos las propiedades cuando el mouse entre sobre el link [ cambiamos el color de la letra y pusimos un borde en la parte de abajo con border-bottom]
Ya va tomando color no tiene que quedar asi
Estilos a “post”
Código
#post{height:100px;}
#post ul li{list-style:none;}
#post li a{background:url("http://k13.kn3.net/0A1F2B118.png") no-repeat left center;padding-left:17px;}
#post li a:hover {margin-left:10px;}
Explicacion
Lo que hice fue sacar el punto negro con list.style:none..agregarle una imagen como fondo con Background:url, ponerla en en centro y a la izquierda con no-repeat left center, y con padding left:17px corri el texto hacia un costado
Con #post li a:hover {margin-left:10px;} cad aver que pases con el mouse sobre el link te
Por ultimo estilos a “pie”
Codigo
#Pie p{position:absolute;bottom:0px;border-top:dotted 5px #4081af; width:1000px; height:20px; text-align:center;}
Con position:absolute;bottom:0px el parrafo queda el parte de abajo
Con border-top:dotted 5px #4081af aplicamos un border en la parte de arriba
Con text-align:center centramos el texto
Algunos Arreglos
Codigo:
h3{margin:10px;}
img {display: block;margin: auto;}
explicacion
Pusimos un margen al titulo para que no quede muy pegado al div y centramos la imagen
Bueno Taringueros este fue un tuto muy cortito..deje un monton de cosas sin explicar, yo solo doy una simple base sobre el tema ahora depende de ustedes seguir averiguando.
Los lenguajes van mejorando año tras a año esta el html 5 el css3…pero si entendes estos conceptos no van a tener problemas con los nuevos.
Cualkier duda que tengan me mandan un MP..comente y cuenten como le fue…