Posteamelo

[Megapost] Curso de HTML completo (Páginas Web)!

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>[/color]

<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: . 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 . Ejemplo: 

-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 administrador@ayudaweb.com. 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=""[/b], 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!

Curso de HTML completo (Páginas Web)!

Posts Relacionados

Dejá tu comentario

Autor del Post