AyudaWeb
Usuario (Argentina)
ESPERA A QUE CARGUE EL POST, GRACIAS! Hola Taringa! ¿Como andan? En este tutorial (ya es el 4to!) vamos a aprender gran parte del lenguaje html y html5. Les recomiendo que utilicen un Bloc de Notas para ir anotando todo lo que vallamos viendo con sus palabras, y les aseguro que les resultará más fácil aprenderlo. Empecemos entonces... El HTML o Hyper Text Markup Language, es el lenguaje utilizado para la creación de páginas web. Al ser un lenguaje de hipertexto, nos permite escribir texto de forma estructurada mediante etiquetas que tienen un inicio y un fin, encerrando así los elementos que hay dentro de la web, como imágenes, videos, etc. Este hipertexto es escrito en un archivo de extensión .html. Puede ser escrito en un Bloc de Notas, pero existen programas que nos ayudan a la legibilidad del código mediante colores y orden. Yo utilizo el programa Sublime Text 2, que lo pueden encontrar de forma gratuita en esta web: http://www.sublimetext.com/2 (pueden ir descargandolo mientras leen esta guía). Etiquetas Las etiquetas encierran el contenido de cada elemento de nuestra página web. Hay 2 tipos de etiquetas, las de apertura <etiqueta> y las de cierre </etiqueta>. Las etiquetas de inicio (o de apertura) suelen tener atributos que modifican las acciones de la etiqueta, por ejemplo <etiqueta href=""></etiqueta>. Y dentro de los atributos, se encuentran las variantes, las cuales modifican los atributos. El valor -de la variante- puede ser una palabra (por ejemplo <p align="center"></p>) o un número de pixels o porcentaje como en <img width="50px" height="70%"></img>. Las etiquetas anidadas son aquellas que se encuentran dentro de otras, por ejemplo: En este ejemplo tenemos la etiqueta <font></font> dentro de la etiqueta <p></p>. Este código daría como resultado: Abran Sublime Text 2 (si lo descargaron) o el Bloc de Notas, van a File > New File y pegan el siguiente código: <html> <head> <title>MI PRIMERA WEB</title> </head> <body bgcolor="#008aff"> <font color="#CC3300" size=5>Hola, estoy aprendiendo html!</font> </body> </html> Ahora guardamos el archivo como miweb.html. File > Save As... Ahora lo abrimos... Y ahí tenemos nuestro primer archivo .html! ¿Qué podemos ver acá? Bueno en la barra de direcciones aparecerá el título que pusimos mediante la etiqueta <title></title>, también el fondo del color que asignamos con el atributo en la etiqueta <body bgcolor="#008aff"> y el color y fuente del texto de la página con: <font color="#CC3300" size=5>. Estructura de una web Una web está compuesta por 3 grandes etiquetas distribuidas de esta forma (siempre van de esta manera): <html> <head> </head> <body> </body> </html> Explicación: La etiqueta <html></html> está en cada documento .html y es la que encierra el contenido de la web. La etiqueta <head></head> encierra todo lo que no se ve en la pantalla de nuestra web, entre las etiquetas podemos encontrar la etiqueta <title></title>, <style></style>, <meta>, <link>> (no tiene etiqueta de cierre) y <script></script> <tltle>TÍTULO<title> Dentro de esta etiqueta irá el título de tu web que se verá arriba de la barra de direcciones. Recuerda que esta etiqueta y las que siguen luego van dentro de la etiqueta <head> </head>, aunque las veremos más adelante. Estructura del body (cuerpo) Dentro de la etiqueta <body></body> va todo el contenido que vemos en la web, desde texto, imágenes, sonidos y videos. Le podemos asignar atributos tales como bgcolor="", background="" y text="" Con el atributo bgcolor="" le damos color al fondo de la página (BG viene de BackGround = Fondo) usando los colores representados con números hexagesimales, siendo el azul #0000ff, el rojo #ff0000 y el verde #00ff00. A continuación, les dejo una tabla con los números que representan cada color: Existen más variables, pero estos son los colores que no pueden sufrir modificaciones en una web. Entonces, aplicando esto, la etiqueta <body> nos quedaría: <body bgcolor="#0099FF">. Empleando el atributo background="" nos posibilita el uso de una imagen para establecerla de fondo. Entre las comillas pondremos el link a la imágen que previamente debieron subir a un host. Yo utilizo ImageShack (es de confianza) LINK: http://www.imageshack.us/. Mientras, creense una cuenta. Usando este atributo, más el anterior, la etiqueta <body> nos quedaría así: <body background="http://imageshack.com/link"> Y el último atributo con más uso es text="" que indica el color al texto que halla en la web. Usando el sistema de color hexagesimal le asignamos un color. text="#000000". Quedaría de esta forma: <body text="#000000"> Ya dejando de lado la extructura básica de una página html, pasamos a ver El Texto. El Texto Hay caracteres, que la web no reconoce. Para solucionar eso existen códigos que harán el caracter visible. Seguido de esto hay un cuadro con los respectivos caracteres y los códigos que debemos emplear para que figuren en nuestra web: Usando la etiqueta <meta charset="utf-8"> (dentro de la etiqueta <head> evitaremos tener que utilizar los códigos para las letras con tilde (acento) y la letra Ñ. charset="utf-8" representa de alguna manera, el abedecario español/castellano.. Otra incompatibilidad son los espacios entre palabras. Por ejemplo, si queremos separar 2 palabras mediante 3 espacios, en el código lo vamos a poder hacer, pero en la web aparecerá como uno solo, entonces, reemplazaremos los espacios con este código: . Entonces, para escribir AyudaWeb tiene el puesto 1º en creación de tutoriales sobre páginas web. deberíamos poner: AyudaWeb tiene el puesto 1º en creación de tutoriales sobre páginas web. -Comentarios Quizás querramos añadir algun comentario en nuestro código para hacernos acordar sobre que trata X elemento. Para ello debemos poner el comentario entre <!-- y -->. Ejemplo: <!-- La etiqueta <title></title> sirve para colocar el título a la web --> -Saltos de linea Los saltos de linea son aquellos, que en un documento de texto normal, hacemos con Enter (Intro). En el código podremos hacerlos, pero en nuestra web no se apreciará. Entonces para poder hacer un salto de linea utilizaremos la etiqueta <br>. Ejemplo: -Texto preformateado El texto preformateado nos ahorrará el uso de todas las etiquetas que aprendimos recién. La etiqueta <pre></pre> respeta todos los espacios, enters (intros) y sangrías que hagamos en el código haciendo esto: -Editar el texto Para editar el texto existe la etiqueta <font></font> y atributos para darle color, fuente y tamaño. El atributo color="" es para darle color. Se utilizan los colores en hexagesimal. face="" es para la fuente del texto, si queremos escribir Taringa sin descargas no es Taringa deberiamos emplear el atributo así: face="Comic Sans MS". Y el último atributo es size="" para darle el tamaño que querramos a la letra.Lo empleamos de esta manera: size=5 si queremos que la letra tenga tamaño 5. Para cerrar, si queremos ambos tres, un claro ejemplo sería: Ahora, van los otros códigos para editar textos que no requieren de atributos. Recuerden que el texto va entre ellos, así: <etiqueta>TEXTO</etiqueta>. Si queremos un texto en negrita, solo basta con poner <b>Hola, soy un texto en negrita</b> y así con todas las etiquetas. -Párrafos Otra etiqueta de texto, es la de párrafos. Es <p></p> y acepta el atributo align="" con sus variables left (izquierda), right (derecha) o center (centrado) que es para la alineación del texto, acá un ejemplo de cada uno: -Encabezados Los encabezados son los títulos dentro de nuestra web. Hacen que el texto que está dentro de la etiqueta tome un tamaño predeterminado por la etiqueta. Hay 6 tipos de encabezados: <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Siendo el <h1></h1> el más grande y <h6></h6> el más chico. Un ejemplo: A estas etiquetas se le puede agregar el atributo align="" también! ***--- Este es el final de parte 1 ---*** Es tiempo de realizar nuestro primer ejercicio. Consignas: + Guardar un archivo con extensión .html. + Poner la extructura base de las páginas html. + Agregar al body el color de fondo u imagen de fondo con su atributo correspondiente. + Hacer un ejemplo con cada una de las etiquetas de texto, y si es posible, añadir los atributos align="", face="", size="" y color="". Antes de comenzar con el ejercicio, traten de acordarse todas las etiquetas y atributos, y luego haganlo. Enlaces (hipervínculos, vínculos) En esta segunda parte vamos a ver como generar enlaces. Estos se crean a partir de la etiqueta <a></a> y con el atributo href="" se especifica el enlace a donde va esa etiqueta <a></a>. Si queremos obtener esto: Deberíamos escribir esto: Algo a tener en cuenta: El enlace en href="" siempre debe estar escrito de esta manera: http://www.enlace.com/, de otra forma no va a funcionar. -Enlaces dentro de la misma página Esto es un claro ejemplo del menú de un website, hay botones que nos llevan a otra sección de la web. Cada sección de la web, es un archivo .html con un nombre, por lo tanto si nos queremos dirigir a otra sección deberíamos escribir: -Anclas Las anclas sirven para ir a un determinado punto dentro del documento .html en el que nos encontremos. Para esto debemos crear el boton para ir al ancla y el punto a donde debe ir. Dentro del atributo href="" debemos poner el nombre del documento actual + #ancla: y luego buscar donde poner el punto a donde debe ir, de esta manera: Como verán, el atributo name="" debe llevar el mismo nombre que el asignado en la primer imagen, acá un ejemplo de como funciona: -Enviar correo electrónico Con la etiqueta de enlaces, también es posible enviar e-mails. Mirá como: Dentro del atributo href="" tenemos dos partes: el mailto: y el e-mail [email protected]. Al hacer click sobre el enlace, les abrirá una ventana para que puedan escribir el mensaje -Destino del enlace ¿Nunca apretaron un link y les abrió el contenido en una ventana nueva? Bueno, eso es lo que vamos a aprender ahora mismo. Esto es realizado por un atributo dentro de la etiqueta <a> llamado target="". Este atributo tiene cuatro variantes que son: _blank, _self, _parent y _top. Pero para no hacernos tanto lio, solo vamos a acordarnos de target="_blank" Supongamos que quiero ir desde mi sitio web, a mi perfil de Taringa! pero yo no quiero que se abra en la misma ventana, sino que en una ventana nueva, para eso existe target="_blank". Ejemplo: -Color de los enlaces Un ejemplo claro es el inicio de Taringa!, los links que hemos visitado están de color violeta, mientras que los que no visitamos están de color azul. Cuando posicionamos el mouse sobre uno de ellos se subraya el texto del link (si nunca prestaron atención a eso, mírenlo :smile Esto lo podemos cambiar mediante atributos que se colocan en la etiqueta <body>. Estos atributos son 3 cada uno corresponde a un estado del link. link="" (enlace), alink="" (enlace activo), y vlink="" (enlace visitado). Para cambiarle el color solo debemos insertar un color hexagesimal entre las comillas, de este modo: Si nunca visitaste el link, se va a ver así: http://www.taringa.net/AyudaWeb Si pones el mouse encima, se va a ver así: http://www.taringa.net/AyudaWeb Si visitaste el link, se va a ver así: http://www.taringa.net/AyudaWeb -Descarga de Archivos También se pueden realizar links de descargas. Para ellos debemos poner en el atributo href="" el nombre del documento y su extensión. Ejemplo: El archivo debe estar en la misma carpeta que el archivo .html. ***--- Este es el final de parte 2 ---*** Bueno, es hora de realizar nuestro 2do ejercicio. Consignas: + Abrir el archivo del ejercicio 1 .html. + Agregar al body el color de fondo u imagen de fondo con su atributo correspondiente, tambien link="", alink="" y vlink="". + Hacer un ejemplo de cada forma de enlace y añadir los atributos en donde y como correspondan. Antes de comenzar con el ejercicio, traten de acordarse todas las etiquetas y atributos, y luego haganlo. Imágenes En esta tercera parte vamos a ver todo lo relacionado con imágenes. Como se insertan en nuestra web y como modificar sus propiedades. La etiqueta <img> es quien se ocupa de hacer visibles las imágenes en nuestra web (Seguramente pensarás que me olvidé la etiqueta de cierre, pero no, esta etiqueta carece de etiqueta de cierre y solo se escribe la de apertura). Pero para que aparezca realmente, necesitamos de un atributo llamado src="". Dentro de sus comillas ponemos el link de la imagen, así: Bien, ya sabemos como colocar imágenes, pero esto no es todo, esta imagen se puede modificar con algunos atributos. -Texto alternativo El atributo alt="" reemplaza la imagen en caso de que esta no se vea. Supongamos, que por algún motivo una imagen en una web no te carga, con este texto alternativo, tenes la posibilidad de saber al menos de que trata la imagen. Ejemplo: -Bordes en una imagen Para agregarle un borde de color, necesitamos del atributo border="", y dentro de sus comillas un número que representará el ancho del borde, hagamos un ejemplo. Tenemos esta imagen (<img src="link">): Y queremos agregarle un borde de 4 de ancho, entonces ponemos Y nos queda de resultado: -Tamaños de una imagen Las medidas de tamaños en html se representan por pixeles (o en % con respecto a la pantalla). Supongamos que tenemos esta imágen de 80px de ancho y 112px de alto (siendo estas medidas el 100%) y quiero que quede en el 80% de su tamaño. Esto se logra con los atributos width="" (ancho) y height="" (alto) Para reducirla al 80% debemos poner: Acá está el ejemplo con las tres medidas: Y el código: -Posicionar imágenes Para posicionar imágenes, se necesita del atributo align="", y sus nueve variables (absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top). Pero en realidad hay 4 que se repiten, por lo tanto solo vamos a utilizar 5 de ellas, que son: bottom, middle, left, right y top Acá va un ejemplo de cada posición: ***--- Este es el final de parte 2 ---*** Bueno, es hora de realizar nuestro 3er ejercicio. Consignas: + Abrir el archivo del ejercicio 2 .html. + Seleccionar una imagen que no supere los 150px de ancho, ni los 100px de alto. + Cambiar de tamaño la imagen con los atributos width="" y height="", también ponerle un borde con el atributo border="" y aplicar sus distintas variables. + Por último, vamos a posicionar una imágen en las diferentes maneras que aya para posicionar y agregarle un texto alternativo a todos los ejemplos que hayamos confeccionado. Antes de comenzar con el ejercicio, traten de acordarse todas las etiquetas y atributos, y luego haganlo. Formularios En esta parte vamos a ver lo que son los formularios y para que sirven. Los formularios se crean mediante la etiqueta <form></form>. Y cumplen con la función de tomar los datos introducidos por el usuario y enviarlos a un destinatario. Puede ser el ejemplo de un formulario de contacto, que seguramente vimos muchas veces en páginas web, si nunca viste uno, acá te dejo uno: Bien, ahora que ya sabemos que es un formulario y su etiqueta, prosigamos a ver los atributos que esta etiqueta permite. Tenemos 3 atributos: action="", enctype="" y method="". El primero se encarga de administrar el envio del archivo, ya sea poniendo el e-mail o un programa que se encarga de su envio. El segundo atributo, es el encargado de cifrar el contenido del formulario antes de su envio. Y el último, es el método de cómo serán enviadas las respuestas al formulario. Existen dos variables, get y post. Nosotros solo utilizaremos la variable post. Un ejemplo con todos los atributos sería: Ahora bien, ya aprendimos los atributos y variables de un formulario. Pero todavía nos falta ver que se puede meter dentro de la etiqueta <form></form>. -Áreas de texto Las áreas de texto son aquellas en las que se puede introducir un texto largo. En el caso del formulario que les mostré en una imagen más arriba, la caja que dice "mensaje" está hecha con un área de texto. La etiqueta para crearlas es <textarea></textarea> Ésta etiqueta tiene 3 atributos, que son fundamentales y obligatorios para que figure. El primero es name="", debemos agregarle un nombre, ya que este luego es necesario identificarlo para enviar el mensaje a la casilla de correo. El atributo cols="" define el ancho del area de texto basado en columnas. 1 columna = 1 letra, entonces si colocamos cols="30", admitirá 30 letras por renglón. Y el último atributo es rows="" que dispone la cantidad de renglones del área de texto. Si ponemos rows="5", nos dará el espacio de 5 renglones. Entonces si juntamos los tres atributos, obtendríamos algo así: Resultado: -Campo de texto El campo de texto es utilizado, por lo general, para introducir nombres, contraseñas (sea el ejemplo de Taringa!). Para crear uno es necesario recurrir a la etiqueta <input> (no tiene etiqueta de cierre como <img> :smile. Posee 4 atributos: type="", size="", maxlenght="", value="" más el atributo name="" que es obligatorio en todas las áreas donde figure texto. En el caso del atributo type="" su variable es text (siempre). En size="" determina el ancho del recuadro. maxlenght="" corresponde a la cantidad de caracteres que pueden ser escritos dentro del campo de texto. Si ponemos maxlenght="20", solo podrán ser escritas 20 letras. Y el atributo value="" que pone un texto predefinido por nosotros para instruir a quien deba completarlo, de esta manera: value="Ingrese su nombre aquí". Entonces si juntamos los 4 atributos, obtendríamos algo así: Resultado: -Campo de contraseña El campo de contraseña cumple la misma función que el de texto, con la diferencia que lo que escribamos en el saldrá escrito con asteriscos (*). La etiqueta <input> es la misma y los atributos también, la única diferencia es que en el atributo type="" cuya variante cambia por la variante password. Ejemplo: Resultado: -Botón El botón es el que da la acción para hacer al formulario. Se utiliza la etiqueta <input>. En este caso solo utilizamos los atributos name="" (siempre), type="" y value="". El atributo name, ya lo conocemos. En el atributo type="" tenemos 1 variable para utilizar. submit. Esta es para crear un botón de envio del formulario. El atributo value="" representará lo que diga el botón. Ejemplo: Resultado: -Caja de verificación Una caja de verificación da la posibilidad de tildarla o no (cuando creamos un post, nos aparece la opción de tildar la caja de "contenido propio". Para crearla, disponemos de la etiqueta <input> y de los atributos name="", type="", value="" y un atributo que carece de variables: checked. Dentro del atributo type="" vamos a colocar la variante checkbox. El atributo value="" va a contener la respuesta a esa caja (usualmente si está tildada es SI y si no está tildada es NO) pero puede contener otra espuesta. El atributo checked, no tiene variables, por lo tanto se coloca solo la palabra. Cumple la función de tildar la caja de manera predeterminada (pueden ponerlo o no, como quieran). Ejemplo: Resultado: -Botones de opción Los botones de opción suelen ocurrir en la típica pregunta al registrarte en una red social: Masculino o Femenino (y aparecen dos circulitos para pulsar). Esto se logra a través de la etiqueta <input> y los atributos name="", type="", value="" y checked. La variante del atributo type="" es radio. El atributo value="" llevará la respuesta de cada una de las opciones. Y checked tildará la opción en el que se encuentre. Ejemplo: Resultado: -Campo de selección Los campos de seleccion son un claro ejemplo de la selección de categoria en el inicio de Taringa! para ver los post que querramos. Para realizar esto necesitamos de la etiqueta <select></select>. Los atributos a utilizar son name="" y selected que no tiene variables. Colocamos el name="" (con el nombre) en la etiqueta de apertura del campo de selección. Luego vamos a crear las opciones con la etiqueta <option></option> cada opción de la lista. Utilizaremos la variable selected para la opcion que querramos marcada, así <option selected></option>. Ejemplo de campo de selección: Resultado: ***--- Este es el final de parte 4 ---*** Bueno, es hora de realizar nuestro 4to ejercicio. Consignas: + Abrir el archivo del ejercicio 3 .html. + Crear un formulario de contacto en el cual aparezca una casilla para el nombre, otra para Apellido, otra para seleccionar entre hombre y mujer, y una lista donde pueda elegir un deporte. También agregar un botón para enviar el formulario Debería quedarte algo así: Antes de comenzar con el ejercicio, traten de acordarse todas las etiquetas y atributos, y luego haganlo. Insertar música y videos En esta 5ta parte vamos a aprender como insertar música y videos en nuestro sitio web. -Música de fondo La música de fondo no suele ser muy utilizada en las webs, y si lo es, suele ser una música tranquila que acompañe la armonía del sitio. Un mal uso sería utilizar una canción de rock en una página de tango . Para realizar esto disponemos de la etiqueta <bgsound> (no tiene etiqueta de cierre). Tiene atributos, como src="" (al igual que con <img>), que sirve para enlazar el audio. (debe ser de extensión .mp3). Pegarán el link de la música entre las comillas del atributo src="". Otro atributo es loop="", sirve para que el reproductor sepa cuantas veces debe repetir el audio, en caso de ser ilimitadas veces, entre las comillas vamos a poner el valor -1 y si queremos que se repita 5 veces pondremos loop="5". Ejemplo: -Reproductor de música en nuestra web Para poner un reproductor de música solo basta con poner la etiqueta <audio></audio>. Vamos a poner el atributo controls (no tiene variables). Dentro de la etiqueta, vamos a escribir: <source>. Este <source> tiene la variable src="" y type="". La primera es para insertar el link de la música a reproducir. Y el segundo sirve para poner el tipo de archivo que es. Al ser .mp3, pondremos entre las comillas audio/mpeg y quedaría así: type="audio/mpeg". Ejemplo: Resultado: -Videos en nuestra web Para videos en nuestra web solo basta con poner la etiqueta <video></video>.Vamos a poner los atributos width="" y height="" para delimitar el ancho y alto de la ventana donde se verá el video. Si queremos que el ancho sea de 320px y de alto 240px deberemos poner width="320px" y height="240px". Luego vamos a poner el atributo controls ( que no tiene variables). Dentro de la etiqueta, vamos a escribir: <source>. Este <source> tiene la variable src="" y type="". La primera es para insertar el link de la música a reproducir. Y el segundo sirve para poner el tipo de archivo que es. Al ser .mp4, pondremos entre las comillas video/mp4 y quedaría así: type="video/mp4". Ejemplo: Resultado: ***--- Este es el final de parte 5 ---*** Bueno, es hora de realizar nuestro 5to ejercicio. Consignas: + Abrir el archivo del ejercicio 4 .html. + Ponerle un sonido de fondo a la página y crear un reproductor de audio, agregar atributos según corresponda. + Agregar un video sobre el tema que querramos con la etiqueta y atributos correspondientes. Antes de comenzar con el ejercicio, traten de acordarse todas las etiquetas y atributos, y luego haganlo. Capas En esta parte vamos a ver que son las capas, y para que sirven. El que utiliza programas de edición gráfica (photoshop, por ej) le debe sonar este término, y el que no, quizás le suene familiar. Una capa es una "caja" donde podemos poner elementos. Esta etiqueta se coloca dentro del <body></body> Las capas se llaman divs, y su contenido va dentro de la etiqueta <div></div>. A esta etiqueta se le asigna un nombre mediante el atributo id="" y el estilo por medio del atributo style="". Un atributo fundamental para que esta sea visible donde querramos es position="" con su variable absolute. Tambien es necesario del atributo top="" para marcarle el margen superior, y left="" para marcarle el margen izquierdo y así, con los ejes X-Y podremos ubicar la capa a nuestro gusto. Otros atributos esenciales son width="" y height="" para marcar el ancho y alto de la capa. Ej: width="150px" height="600px". El atributo z-index="" se encarga de poner en orden las capas si estas estan solapadas. Supongamos que tenemos <div id="capa1"></div>, <div id="capa2"></div> y <div id="capa3"></div> y están solapadas en las esquinas, yo quiero que capa2 esté al frente y capa 1 al fondo de todo, entonces hago esto, a <div id="capa2"></div> le agrego z-index="3" (así:<div id="capa2" z-index="3"></div>), y a <div id="capa1" ></div> le agregamos z-index="-1", y así quedarán en el órden que querramos. Podemos ponerle una imagen o color de fondo mediante los atributos background-image="" y background-color="". En el primero entre las comillas pondremos el link de la imagen, mientras que en el segundo vamos a poner el color con número hexagesimal. Con el atributo overflow="" podemos hacer que se muestre el contenido del div en su totalidad (si es que este no se ve). Esto puede pasar cuando el contenido de la capa es superior al tamaño de la capa en si. El atributo overflow="" tiene 4 variables: 1- hidden: No deja visualizar el contenido que esté fuera del div) 2- visible: Permite ver todo el contenido, aun cuando este esté fuera de los límites de la capa. 3- scroll: Muestra una barra de desplazamiento, para poder ver todo el contenido. 4- auto: Muestra la barra de desplazamiento cuando sea necesario. Ejemplo Ahora vamos a hacer un gran salto en la manera de escritura de los atributos, ya que vamos a escribirlos todos dentro del atributo style="". Para ello, cambiaremos los el = y el primer " por dos puntos (:) y la última comilla por punto y coma (;), de esta manera: Un ejemplo de todo lo visto sobre las capas hasta ahora: Recuerden: el atributo style="" no cambia su forma, ya que es quien contiene los otros atributos modificados. ***--- Este es el final de parte 6 ---*** Bueno, es hora de realizar nuestro 6to ejercicio. Consignas: + Abrir el archivo del ejercicio 5 .html. + Crear 4 divs llamados capa1, capa2, capa3 y capa4. + Agregar a cada uno los atributos que aprendimos. + Luego, pasar los atributos adentro de style="" de la forma que acabamos de aprender. Antes de comenzar con el ejercicio, traten de acordarse todas las etiquetas y atributos, y luego haganlo. Introduccion a las hojas de estilo Las hojas de estilo CSS (Cascading Style Sheets) son archivos creados para dar estilo a nuestro documento .html. Con el podemos aplicar todo lo que aprendimos como "atributos", en otro archivo haciendo el archivo .html más sensillo de comprender. Se pueden asignar estilos independientes o estilos asociados a etiquetas, como el caso de <p>. Con CSS podemos asignarle a todos los párrafos un color de letra determinado, la fuente, el tamaño, sin tener que repetir cada vez que haya un párrafo el mismo estilo. Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, o también el Sublime Text 2 (si todavía no lo descargaron, acá les dejo el LINK: http://www.sublimetext.com/2). Las hojas de estilo (CSS) se guardan con la extensión .css, de esta forma: -Vincular las hojas de estilo al documento .html Con la etiqueta <link> podemos vincular o enlazar la hoja de estilos con el documento .html. Pero antes, debemos ponerle algunos atributos como: href="", type="" y rel="". El primer atributo es para colocar el nombre de la hoja de estilo, en el ejemplo anterior era estilo.css, entonces deberíamos poner: href="estilo.css". type="" es para especificar el tipo de texto, en este caso es texto de css, por lo tanto entre las comillas debemos poner text/css, así: type="text/css" y el último, es para especificar que se está vinculando una hoja de estilo, por lo tanto tenemos que poner entre las comillas stylesheet, de esta forma: type="stylesheet". Juntando los tres atributos nos debería quedar así: -Como escribir en las hojas de estilo (CSS) Cuando vimos las capas, aprendimos a redactar los atributos de otra manera, a través de la etiqueta style="". Usando : y ;, en las hojas de estilo se escribe de forma similar. Acá tenemos un ejemplo: Como pueden ver, utilizamos el nombre de la etiqueta y abrimos llaves {}. Verán que #capa1 pero si se acuerdan en la parte de Capas, cuando le asignamos el nombre a un <div></div> mediante el atributo id="", cuyo nombre fue capa1, ahora aparece en la hoja de estilo con un # delante, ¿porqué será? Bueno, en las hojas de estilo solo podemos personalizar a nuestro gusto etiquetas, y al id="" ser un atributo de una etiqueta, la única manera de poder darle estilo es poniendo #nombre_de_la_capa y luego abrir llaves {}. En todas las etiquetas que contengan elementos se puede usar id="", pero también tenemos otra opción que es class="". En este caso, el # se reemplazaría por un simple punto (.). Y quedaría, por ejemplo: y en el archivo .css (hoja de estilo) Resultado en la web: ***--- Este es el final de parte 7 ---*** Bueno, es hora de realizar nuestro 7to ejercicio. Consignas: + Crear un nuevo archivo .html. + Crear un archivo .css. + Enlazarlo con el .html. + Utilizar lo que queramos de lo que aprendimos y darle estilo. Antes de comenzar con el ejercicio, traten de acordarse todas las etiquetas y atributos, y luego háganlo. Y bueno, de tanto escribir ya me salieron callos en las manos Pero bueno, jaja. Este es el final del tutorial, espero que les haya gustado y sobre todo servido, más adelante haré el tutorial sobre css. La parte 3 de Crea tu página web profesional en minutos! saldrá mañana o pasado. Suerte con esto, practiquen mucho! SALUDOS! Este post me costó casi 1 semana, la edicion de mas de 50 imágenes y la redacción de mas de 5000 palabras. Espero que el post sea valorado como se merece, nos vemos la proxima!
Hola! ¿Como andas? Este es mi primer post (en esta cuenta) y quería enseñarte a crear tu Menú de Usuario para que pongas al final de tus posts. Acá el ejemplo de Menú que vamos a hacer: ¿Te gusta? Bueno... acá te dejo el tutorial paso a paso de como debe hacerse PASO Nº1: Abrimos PhotoShop (yo tengo la versión CS5 Extended). Creamos un documento de 549px de ancho y 122px de largo, que sea transparente: PASO Nº2: Crea tu diseño en el archivo, yo usaré la del ejemplo que está más arriba: PASO Nº3: Seleccionar la herramienta Slice Tool (Herramienta de Corte): PASO Nº4: Con la herramienta seleccionar los botones y los espacios en blanco de forma arreglonada: Si no entendiste como, acá te dejo una imagen que te servirá de ayuda: (Las líneas rojas marcan por donde deben ir los cortes horizontales) PASO Nº5: Guardar la imagen cortada en File (Archivo) > Save for Web & Devices... Una vez en Web & Devices... debes seleccionar cada uno de los cortes que hiciste y poner en Preset: PNG-24. Luego dale a save y chequea que esté todo como lo mostré en el .gif. PASO Nº6: Busca en donde hallas guardado el documento (verás una carpeta llamada "Images" Verás varias imágenes (Sí, son los cortes que hicimos anteriormente!). Sube todas las imágenes a un host confiable, yo utilizo www.Imageshack.us. PASO Nº7: Vamos a poner las imágenes en un post borrador para ir poniendo Vista previa (las imágenes pueden desordenarse). Primero, vamos a poner para insertar una imagen desde url: PASO Nº8: Para poner una imagen con link debemos usar esto: PASO Nº9: Ya deberíamos tener todo dentro del post, ahora falta ordenarlo, posiblemente tengan algo así: Bueno, para poder poner las imágenes en sus respectivos renglones, debemos ir borrando espacios entre los [], de esta forma: Verás que en algunos casos no te subirá un renglón, pero eso está bien, solo se debe borrar un espacio. Bueno y acá el resultado final:
Hola, si no viste la parte 1 de este tutorial, podés verlo acá: ESPERA A QUE CARGUE EL POST, GRACIAS! Hola de nuevo! Mil gracias a todos por sus comentarios, recomendaciones, y puntos En este segundo post, vamos a agregar cosas llamativas a nuestra web, como un SlideShow de portada, un formulario para contactar con el dueño del website y algunas cosas más... Antes de crear el Slideshow y el formulario, vamos a agregar las páginas de nuestra web (en mi caso: HTML5, CCS3, JAVASCRIPT y JQUERY). Creamos un .html para cada uno ( html5.html - css3.html - javascript.html - jquery.html) Luego, copiamos el código de index.html (o index.php) y lo copiamos en todos. Y les debería quedar así: Bien ahora vamos a pegar el contenido de index.html (ó index.php) y lo vamos a pegar en los cuatro .html que acabamos de crear (y lo guardamos de nuevo a cada uno). El <div id="menu"></div> debe quedar así, coincidiendo con los nombres que les asignaron a los otros .html Bien y por último vamos a copiar y pegar el contenido de style.css. Para ello, vamos a crear la etiqueta <style type="text/css"></style> dentro de <head></head>, y pegaremos el estilo ahí adentro y lo guardamos, de esta forma: Perfecto! Ya tenemos nuestras páginas creadas, ahora, si abrimos el index.html en internet, el menú va a ser útil, pruebenlo Bueno, esto fue un pequeño tutorial de como anexar las páginas. Ustedes pueden editar el código del css que está entre el <style type="text/css"></style> para cambiar el aspecto de cada página. Ahora seguimos con el primer tutorial "semi-avanzado" para agregar a nuestro sitio web. Aquí va un ejemplo del Slider de portada que queremos hacer: PASO Nº 1: Elegimos 6 fotografías de un mismo tamaño. Yo usaré fotos de 1280px de largo y 150px de ancho. Yo ya las elegí: Las subimos a un hosting de imágenes (prefentemente: http://www.imageshack.us/) PASO Nº 2: Abrimos el archivo index.html (o index.php, como les haya quedado) y creamos una lista ordenada: ¿Que es <ul class="slideshow"> Bueno, ya conocíamos el <div id=""></div>. estas "id=""", "class=""" Se llaman atributos, y van siempre dentro de la etiqueta de apertura (<div>, la etiqueta de cierre sería </div>). El class="" sirve para asignar un estilo css a varios elementos (o sea que puedo utilizar class="X" en varias etiquetas a la vez), mientras que id="" sirve para asignar un estilo a un elemento único. Bien, ahora que sabemos que son y sus diferencias, continuemos con el tutorial. PASO Nº3: Ya acabamos con la parte de html (fue cortita) jeje. Ahora nos adentramos totalmente al css. Comenzaremos escribiendo esta línea para sacarle los estilos a la lista que habíamos creado: Luego, en la siguiente linea pondremos las características del span del Slideshow: .slideshow li span {width:100%;height:150px;position:absolute;top:0px;left:0px;color:transparent;background-size:cover;background-position: 50% 50%;background-repeat:none;opacity:0;z-index:-1;-webkit-backface-visibility: hidden;-webkit-animation: imageAnimation 36s linear infinite 0s;-moz-animation: imageAnimation 36s linear infinite 0s;-o-animation: imageAnimation 36s linear infinite 0s;-ms-animation: imageAnimation 36s linear infinite 0s;animation: imageAnimation 36s linear infinite 0s; } Pueden copiarlo y pegarlo, ya que no me detendré a explicar esto que es muy complejo para los recién iniciados en el tema Bueno, les explico brevemente que es este choclo de palabras y números. width:100%; Representa al ancho de la pantalla (y del slideshow), ustedes pueden cambiarlo a 1280px o a porcentajes menores para ajustarlo al lugar que quieran (las imágenes deben tener el mismo ancho). height:150px; Es la altura del slideshow, pueden cambiarlo (las imágenes deben tener la misma altura) background-repeat:none; Para que no se repitan las imágenes El resto tiene un significado más técnico del cual no voy a hablar, para no hacerles barullo Ahora vamos a centrarnos en las imágenes, vamos a poner sus links en los códigos y darle el tiempo de animación a cada una: .slideshow li:nth-child(1) span{background-image:url('LINK-IMAGEN-1')} .slideshow li:nth-child(2) span{background-image:url('LINK-IMAGEN-2');-webkit-animation-delay:6s;-moz-animation-delay:6s;-o-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s;} .slideshow li:nth-child(3) span{background-image:url('LINK-IMAGEN-3');-webkit-animation-delay:12s;-moz-animation-delay:12s;-o-animation-delay:12s;-ms-animation-delay:12s;animation-delay:12s;} .slideshow li:nth-child(4) span{background-image:url('LINK-IMAGEN-4');-webkit-animation-delay:18s;-moz-animation-delay:18s;-o-animation-delay:18s;-ms-animation-delay:18s;animation-delay:18s;} .slideshow li:nth-child(5) span{background-image:url('LINK-IMAGEN-5');-webkit-animation-delay:24s;-moz-animation-delay:24s;-o-animation-delay:24s;-ms-animation-delay:24s;animation-delay:24s;} .slideshow li:nth-child(6) span{background-image:url('LINK-IMAGEN-6');-webkit-animation-delay:30s;-moz-animation-delay:30s;-o-animation-delay:30s;-ms-animation-delay:30s;animation-delay:30s;} .slideshow li:nth-child(2) div{-webkit-animation-delay:6s;-moz-animation-delay:6s;-o-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s;} .slideshow li:nth-child(3) div{-webkit-animation-delay:12s;-moz-animation-delay:12s;-o-animation-delay:12s;-ms-animation-delay:12s;animation-delay: 12s;} .slideshow li:nth-child(4) div{-webkit-animation-delay:18s;-moz-animation-delay:18s;-o-animation-delay:18s;-ms-animation-delay:18s;animation-delay:18s;} .slideshow li:nth-child(5) div{-webkit-animation-delay:24s;-moz-animation-delay:24s;-o-animation-delay:24s;-ms-animation-delay:24s;animation-delay:24s;} .slideshow li:nth-child(6) div{-webkit-animation-delay:30s;-moz-animation-delay:30s;-o-animation-delay:30s;-ms-animation-delay:30s;animation-delay:30s;} Bueno, como verán el .slideshow li:nth-child contiene un selector Jquery (un lenguaje que también se utiliza para el diseño web), donde puse LINK-IMAGEN-(NÚMERO) deben poner los links de las imágenes que previamente debieron subir a un hosting de imágenes (vuelvo a recomendar, http://www.imageshack.us/). Los -webkit, -moz y -o son los que le dan el retraso a las imágenes para que cambien. No modifiquen nada más que los links en este código, de otra manera no les va a funcionar. PASO Nº4: Ahora, como último paso, vamos a agregar los tipos de animaciones a las transiciones (cuando pasan las imágenes), de esta forma: Como verán, hay porcentajes, estos representan el tiempo que dura la imagen en pantalla y como deben ser las entradas y salidas del mismo. Opacity:0;, es transparencia 0, mientras que Opacity:1; es visible 100%. Otra vez les recuerdo que presten total atención al copiado, ya que un mínimo error puede causar que no funcione o funcione mal. PD: Recuerden que su foto de portada (la que hicimos en el primer tutorial) deben borrarle el fondo y guardarla como archivo de imagen .png para que se vea el Slideshow atrás. Bueno, les gustó el primer tutorial? Espero que si En este 2do tutorial, vamos a aprender como crear un formulario de contacto para que los visitantes de tu web puedan contactar con vos de una manera rápida y sensilla. Acá dejo un ejemplo de lo que vamos a hacer: Primero, vamos a modificar el contenido de <div id="contenido"></div>, para crear dos columnas. Una para el formulario, y otra para los textos e imágenes que habíamos creado previamente. De esta forma: Bien, ahora vamos a hacer el formulario dentro de <div id="col1"></div>. Les voy a mostrar una imagen del código ya creado y les explicaré que es cada cosa: <form action="contacto.php" method="post"></form> Es la etiqueta correspondiente al formulario. action="contacto.php" señala el archivo que es el encargado de enviar el e-mail. method="post" viene a ser la forma en la cual es enviado el mensaje. <label for="nombre">Nombre:</label> Label significa etiqueta. Es lo que se muestra arriba de cada caja donde escribimos. <input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" /> Es el recuadro donde se escribe. type="text" indica al input que lo que debe ir ahí adentro es texto, placeholder="Nombre y Apellido" indica dentro del recuadro que debemos escribir ahí adentro, y required="" hace que sea obligatorio completar el casillero para enviar el mensaje. <textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea> es el recuadro donde va el mensaje. <textarea> se utiliza cuando, por lo general, se escribe mucho. Ahora pasamos a style.css, donde vamos a poner esto: Bien, la mayoría de los elementos de acá ya los mencionamos, pero todavía hay algunos que no. Por ejemplo este: letter-spacing:1px; No tiene mucha importancia, tan solo es el encargado de la separación de las letras. Y también este: border:1px solid #fff; Crea los bordes a las cajas del formulario (la línea blanca). Acá dice que tiene 1px de ancho, es sólida (pueden probar poniendo "dashed" y de color blanco. Luego vamos a crear el archivo contacto.php (el encargado de enviar el mensaje), de esta forma: Después, vamos a copiar este código, que comprueba que lo que se haya escrito en la casilla E-mail, sea verdaderamente un E-mail: Si no se dieron cuenta, esto: ('/^[A-Za-z0-9-_.+%]+@[A-Za-z0-9-.]+.[A-Za-z]{2,4}$/', $correo) son los caracteres que permite el cuadrado reemplazando esto: [tu-usuario]@.[com(.es, etc)] Ahora vamos a poner la segunda parte, que se encarga del orden de como debe ser este enviado, a que e-mail, asunto, etc. Y por último, si el mensaje es validado para su envio, con este último código, nos llevará de vuelta a la página principal de nuestra web: Los textos azul oscuro son comentarios que la web pasa desapercibidos, así que pueden borrarlos o dejarlos (es recomendable). Ya tenemos nuestro formulario completo (para que funcione debemos guardar todos los .html, y subirlos al host.) También guardar el style.css y el contacto.php y mandarlos al host. Esto fue el tutorial de hoy, espero que sus páginas ya vallan tomando mucho color y nos vemos en el próximo post! Saludos y Suerteee! Recuerda seguirme para mas tutoriales sobre páginas web! Recomienda este post, Gracias! Acá les dejo el link a la actualización de esta web: http://ayudaweb2.site40.net/Hola, si no viste la parte 1 de este tutorial, podés verlo acá:
ESPERA A QUE CARGUE EL POST, GRACIAS! Hola taringueros, como verán soy nuevo en esta comunidad, y vengo con el deseo de transmitirles mis humildes conocimientos sobre el tema para que ustedes también puedan aprovecharlo. Bueno empecemos. El diseño web se basa en dos lenguajes el HTML (HyperText Markup Language) y el CSS (Cascading Style Sheets). El primero es el que le da la estructura a la web, mientras que el segundo es quien le da el estilo y formato a la página. Para este tutorial, pueden utilizar el programa llamado Sublime Text 2 o el Bloc de Notas de su pc, (les recomiendo que utilicen el Sublime Text 2 porque te ordena todo por colores y es más fácil, visualmente, comprender todo el código que vallamos a elaborar). El programa es gratuito, no pesa nada y lo pueden descargar de la página oficial buscando en Google: Sublime Text 2 (no pongo el link por la nueva disposición de taringa (la cual no estoy de acuerdo D: )) Vamos al grano: PASO #1: Abrimos nuestro programa, vamos a File > New File y después a File > Save As... Lo guardamos como index.html Luego hacemos el mismo procedimiento y esta vez lo guardamos como style.css PASO #2: haremos lo que muestra la siguiente imagen en la pestaña index.html <DOCTYPE html> Indica la versión del código con el cual está hecha la web (esto facilita a los buscadores para encriptarla) <html></html> encierra lo que se muestra en la pantalla, todo lo que vallamos a escribir va a estar aquí adentro. <head></head> Acá se pone el titulo de la pagina y el SEO, en en tutoriales mas avanzados veremos de que se trata. <body></body> y acá va el código que se ve en la pantalla. PASO #3: Cada uno de estos elementos que describí se llaman etiquetas, ahora comenzaremos a elaborar el código para la etiqueta <head>ACÁ VA EL CÓDIGO</head> Pondremos <title>TÍTULO QUE QUERRAMOS</title> , debajo de esto pondremos : <meta charset="UTF-8"> y debajo de esto, pondremos: <link href="style.css" rel="stylesheet" type="text/css"> <title></title> Acá se pone el titulo a la página que aparecerá en la pestaña arriba de la barra de direcciones. <meta> Indica el lenguaje con el cual se hizo el código y también te habilita el uso de la ñ, entonces, se puede decir que UTF-8 es = a castellano/español. PASO #4: Ahora pasamos al <body></body> en castellano, el cuerpo. Acá es donde vamos a trabajar por mucho tiempo, pero paciencia, que no es mucho Empezaremos por dividir el cuerpo en 4 (cuatro) partes, y para ello emplearemos el uso de los DIVS. ¿Qué son divs? Bueno, los Divs son "cajas" donde uno mete cosas y ayuda a que nuestro proyecto esté mas ordenado. La idea es lograr algo como esto: Y así es el procedimiento... Bueno ahora ya tenemos toda la estructura armada, resta ponerle las cosas CUAK! PASO #5: Empezaremos con la cabecera, para ello, debemos crear una imagen a nuestro gusto que tenga 1280px de ancho y 150px de alto, venga vamos! Esta será la imagen que usaré para la cabecera: Ah, deben crearse una cuenta en imageshack para poder alojar las imagenes que creen para la web! Para colocarla, pondremos dentro de <div id="cabecera"></div> la siguiente etiqueta: <img src="URL/LINK"> Ahora si abren el archivo index.html podrán ver la imagen que tiene un borde blanco, eso mas adelante lo corregiremos con el CSS. Ahora seguiremos con el menú, y para esto hay que crear una lista con sus items, aquí va el .gif explicativo: Debería quedarte así: <ul> <li><a href="#">INICIO</a></li> <li><a href="#titulo1">TITULO1</a></li> <li><a href="#titulo2">TITULO2</a></li> <li><a href="#titulo3">TITULO3</a></li> <li><a href="#titulo4">TITULO4</a></li> </ul> <ul></ul> Es el elemento que encierra la lista del menú. <li></li> Item del menú (cada uno de estos será un botón) se pueden poner cuantos quieran. <a href="LINK"></a> Es para "conectar" la página entre si, el menú de taringa funciona de manera similar. Ahora es el turno de <div id="contenido"></div> Lo que va acá depende de que trate tu web, por lo tanto, pondré ejemplos sin explicación y si tienen dudas sobre algo en especifico me mandan un mensaje privado. EJEMPLO Nº 1: Texto: Para esto se necesitan las etiquetas<p>AQUÍ VA EL TEXTO</p> (yo pondré un texto sobre el html5 que es sobre lo que tratará mi web). EJEMPLO Nº 2: Imágenes: Utilizaremos la etiqueta <img src="URL"> (pondré 3 imagenes distintas) (Yo voy a mezclar ambos ejemplos para hacer algo mas complejo, podrán verlo más adelante) Por último, llega el turno de <div id="footer"></div> Este div puede ser opcional, aunque por lo general se utiliza. Tenemos un ejemplo en Taringa! que utiliza un menú hacia los terminos y condiciones generales y legales, o también se tiende a poner el nombre de quien creo la página. Si decidimos hacer un menú, pues ya saben como hacerlo (es idéntico al que hicimos hace un rato) y si desean poner su nombre, usan la etiqueta <p></p> Hasta aquí llegó la parte de HTML, ahora sigamos con el CSS (venga, ya vamos por la mitad, pero espera, que esta es la parte mas divertida! le empezaremos a agregar color, detalles, cambiaremos las fuentes de los textos, adornaremos el menú y muchas cosas mas Recuerden guardar el archivo yendo a File > Save ahora iremos a la pestaña style.css y trabajaremos plenamente ahí. La forma de escritura de este código es completamente distinta al de HTML, por lo tanto debes prestar suma atención. El CSS modifica visualmente cada etiqueta, por lo tanto si nosotros queremos poner un color de fondo pondremos: Ahora le quitaremos ese borde que quedo entre la cabecera y el borde utilizando el comando margin:0px; dentro de las {} de body de esta manera: Ahora seguiremos con el menú, que estará ubicado de forma horizontal debajo de la cabecera. Ponemos: #menu {} #menu ul {} #menu ul li {} #menu ul li a {} Demostración: Ahora les mostraré una imagen con toda la configuración del menú ya hecha puesto que es muy larga de explicar, igualmente les explicare cada uno de los comandos que utilicé: background-color:#COLOR; Sirve para ponerle color a un determinado objeto, nosotros lo usamos para el fondo de la web, y de los botones del menú. margin:Xpx Se utiliza para marcar los márgenes dentro del sitio web, en nuestro caso fue utilizado para body y para #menu ul. overflow-x:hidden; Bloquea el deslizamiento hacia la derecha del sitio (solo se puede bajar) position:relative; Esto ubica a el div dentro de la web creada. top:0px Le asigna la cantidad de pixeles que deben haber arriba suyo. left:300px; Le asigna la cantidad de pixeles que deben haber a la izquierda suya. display:block; Alinea los objetos de forma horizontal. padding:5px; Es el borde interior de un objeto (prueben poniendo en vez de 5, 15 y verán a que me refiero ) border-radius:5px; Le da la curvatura a los bordes del objeto. list-style:none; Le saca los puntos, enumeración de la lista. color:#fff; Es lo que le da el color blanco a las letras del menú. font-family:'trebuchet MS', 'Tahoma'; Le asigna la fuente a la letra de los items del menú. text-decoration:none; Le quita subrayados y tachados al texto. font-weight:bold; Convierte la letra en negrita. cursor:pointer; Cambia el cursor a una mano cuando se pone sobre el botón. text-align:center; Centra el texto dentro del objeto que lo contiene. #menu ul li:hover {background-color:#12536c;} El ":hover" es como debería reaccionar un objeto si pones el mouse encima. ¡MENÚ TERMINADO! Acá va un pantallazo de como les debería ir quedando su página web (claro está que pueden modificarla a gusto... SIN HACER LIO!) Bien, agregé 3 textos y 3 imágenes: ¿Lo pudieron ver? Ahora vamos a centrar las imágenes y cambiarle la tipografía a los párrafos. Bueno, arriba tienen una imagen del index.html actualmente, ahora va una del style.css. Recuerden que para ir viendo como les va quedando la Página Web, pueden hacer doble click en el icono de index.html. Y por último, nos queda el footer. Antes había dicho que era opcional, pero que podían poner su nombre o un menú como el que tiene Taringa! Yo puse mi nombre y un menú con las redes sociales! miren: Aquí el html que puse dentro de <div id="footer"></div> y el css que agregé en style.css: El código es parecido al del menú de la web. ¡CSS TERMINADO! Ahora queda subir nuestra web a internet. Yo utilizo un hosting gratuito que no muestra publicidad en tu sitio. Se llama 000webhost, deberán registrarse, dejenme mostrarles como: Una vez registrado, y logeado, se te abrirá algo parecido a esto... Clickean "Go to CPanel" Van a "File Manager", les pedirá su contraseña. (si tira error, actualicen la página con F5) Ahora clickean "public_html" Bien, ahora volveremos al archivo .html, sí, a index.html. Lo vamos a guardar como index.php, así: Ahora iremos al host y le damos a donde dice "upload", luego apretamos "seleccionar archivo" y elegimos el index.php y luego de vuelta a "seleccionar archivo" y elegimos el style.css y le damos al tilde verde. ¡LISTO! Ya tenemos nuestra primera página web en internet! Bueno este es el final del post, espero que les haya servido y acepto todo tipo de critica constructiva. Tardé 1 semana en terminar este post, modificando, agregando y sacando cosas para que sea cada vez mas comprensible. Gracias por leerlo y espero que ayan aprendido algo! jejeje. Más adelante habrán posts sobre menues en css3, páginas con pestañas, diseño en photoshop, algo de javascript, slideshows y mucho, mucho más! Otra vez... GRACIAS! Saludos y nos vemos en otro post Un usuario me pidió si podia subir un link con la web hasta este punto así la podían ver, acá lo tienen compañeros LINK: http://www.ayudaweb1.site90.com/ Recuerda seguirme para mas tutoriales sobre páginas web! Recomienda este post, Gracias! Parte 2 de este tutorial, podés verlo acá: