Este es un tutorial en el cual se describen la los tags más usados de HTML, con sus respectivos atributos. Debo admitir que este tutorial no enseña como hacer una página basada en HTML, sólo describe lo que se ha dicho anteriormente.
Bueno, he aqui un buen tutorial de HTML. Es compacto y preciso y espero que les sea de gran ayuda. Antes de comenzar el tutorial, debo de explicarles algunos conecptos.
Primero que nada, tengo que decirles lo que es un número hexadecimal. El número hexadecimal que deamos consta de seis números (000000), cada uno que va desde el 0 hasta el 9 y desde la A hasta la F (A=10, B=11, C=12, D=13. E=14 y F=15, en decimal). Este número decimal se usará para definir colores dentro del nuestro diseño.
El número hexadecimal se divide en tres partes. Los primeros dos dígitos representan la intensidad del color rojo (XX____). Los dos siguientes representan la intensidad del verde (__XX__), mientras que los dos últimos representan el azul (____XX). Si se fijan, no hay amarillo, esto es porque esos son los colores primarios de la luz. Para obtener negro se necesita total ausencia de los colores (o de la luz), por lo cual su código hexadecimal sería "000000". Mientras que el del blanco es la presencia de los colores (o de la luz) y su código sería "FFFFFF". Más adelante se les darán unos cuantos ejemplos.
Si lo desean, pueden usar Adobe Photoshop para tomar el código hexadecimal de un color.
Los atributos de un tag van dentro de este mismo tag, con un espacio en blanco de por medio entre cada atributo y el mismo tag. Ejemplo:
<html bgcolor=999999 text=FFFFFF>
Nota: Cada vez que se explique un nuevo tag se ofrecera un ejemplo del tag, con sus diferentes atributos. No necesitan cerrar la ventana después de cada tag. Incluso, el tutorial está explicado de manera más breve y simple dentro de los mismos (pueden ver el código fuente, para así saber como hacerlo).
Codigo:
1
|
<?phpTag: <html>...</html>?>
|
Es el primer y más importante tag. Dentro de este tag es que escribes todo el código de tu página web (a excepción de uno que otro script de Javascript, PHP o ASP).
Codigo:
1
|
<?phpTag: <body>...</body>?>
|
Cuerpo de la página web (lo que se ve en la pantalla va aqui dentro, o al menos la mayoría).
Atributos:
bgcolor=###### / "nom color":
color de fondo de la pagina web
background="ubicaciónnombre.ext":
imagen de fondo
text=###### / "nom color":
color de texto en la pagina web
alink=###### / "nom color":
color de un link cuando se hace ‘click' sobre él
link=###### / "nom color":
color de los link que no han sido visitados
vlink=###### / "nom color":
color de los links que han sido visitados
bgproperties=fixed / "":
- fixed: hace que el fondo no se mueva con la pantalla
- "": permite que el fondo se mueva con la pantalla
scroll=yes / no:
- yes: permite el uso de scroll bars (barras de desplazamiento)
- no: deshabilita el uso de scroll bars
oncontextmenu="return false":
deshabilita el menu de contexto (right-click)
onselectstart="return false":
deshabilita la selección de objetos
ondragstart="return false":
prohibe que los elementos sean "drageados"
Codigo:
1
|
<?phpTag: <font>...</font>?>
|
Permite darle formato al texto para hacerlo ver como queramos.
Atributos:
color=###### / "nom color":
especifica el color del texto (esta opción deshabilita el atributo text del tag y hace que el texto adquiera un color individual).
face="nombrefuente":
especifica la fuente en que el texto es desplegado. Toma en cuanta que es bueno utilizar la fuentes predeterminadas de Windows, ya que puedes estar seguro de que todas las personas las tienen en sus PC.
size=1 hasta 7 / -1 hasta -6 / +1 hasta +6:
especifica el tamaño del texto (3 es normal). el "1" es lo más pequeño, minetras que el "7" es el más grande. Los tamaños con el "-" delante hacen la función de disminiudores, y los de "+" de aumentadores. Todos sabemos que el Intert Explorer puede cambiar el tamaño del texto, los "+" y "-" lo que hacen es aumentar o disminuir el texto en ese número. Por ejemplo: el tamaño por defecto del Internet Explorer es "Medium", que en números equivale al "3". Si ponemos size=-2, haremos que el tamaño de texto pase a ser "Smallest", que en números es "1".
point-size=#:
Con esto podemos definir el tamaño del texto al igual que lo hacemos en Microsoft Word.
Codigo:
"br" es corto para "break". Es parecido al break page de Microsoft Word, con la diferencia de que, en vez de pasar a la próxima página, pasa a la siguiente línea.
Codigo:
1
|
<?phpTag: <head>...</head>?>
|
Permite accesar la barra de titulo del explorer. Aquí se definen as[ectos que no son interpretados por el browser (explorador).
Codigo:
1
|
<?phpTag: <title>...</title>?>
|
Permite añadir un titulo a la pagina web.
Codigo:
1
|
<?phpTag: <ol>...</ol>?>
|
Permite crear listados enumerados. Este tag requiere de otro tag, que es el <li>.... Por defecto se usan los números árabes.
Atributos:
start=número / letra:
- número: indica el # por el cual se iniciará el listado. Puede ser un # árabe o romano (i o I).
- letra: indica la letra por la cual se iniciará el listado. Puede ser mayúscula o minúscula.
type=A / a / 1 / i / I:
indica el formato de viñeta de la enumeración.
Codigo:
1
|
<?phpTag: <ul>...</ul>?>
|
permite crear listados sin numeración.
Atributos:
type=circle / disc / square:
indica el formato de viñeta del listado. "Circle" pone un círculo, "disc" un disco (círculo relleno) y "square" un cuadrado.
Codigo:
1
|
<?phpTag: <li>...</li>?>
|
permite añadir un elemento a los listados <ol>...</ol> y <ul>....
Atributos:
type:
si se usa cuando <ol>, entonces >> type= A / a / 1 / i / I. Esto permite cambiar individualmente por línea el tipo de viñeta. si se usa cuando <ul>, entonces >> type=circle / disc / square.
value=#:
(sólo se puede usar cuando el elemento <li>...</li> se encuentra dentro del tag <ol>...</ol>) permite cambiar el valor asignado a esa línea, y hace que la lista siga enumerando desde este nuevo valor.
<page>
Codigo:
Pone el texto en negritas.
Codigo:
Pone el texto en itálicas (italic).
Codigo:
Sirve para subrayar un texto.
Codigo:
1
|
<?phpTag: <center>...</center>?>
|
Se utiliza para centrar lo que se encuentre entre los tags, en relación con el espacio confinado.
Codigo:
Define el texto en formato de parrafos.
Atributos:
align=left / right / center / justify:
alinea el texto de acuerdo a lo especificado. Left > Izquierda, Right > Derecha, Center > Centro, Justify > Justificar.
Codigo:
1
|
<?phpTag: <div>...</div>?>
|
Sirve para alinear algúno elemento con relación al espacio confinado.
Atributos:
align=left / right / center / justify:
alinea el texto de acuerdo a lo especificado. Left > Izquierda, Right > Derecha, Center > Centro, Justify > Justificar.
nowrap:
elimina la condición wrap. La condición wrap hace que el texto se llevado a la proxima línea, si se elimina, el texto seguirá de largo.
Codigo:
1
|
<?phpTag: <h#>...</h#>?>
|
Le da a un encabezado de texto una importancia relativa sobre otros titulos de texto. Donde ven el "#" va un número del "1" al "6". El uno es el de más importancia y seis el de menos. Puesdes usar esto para crear una tabla de contenido.
Atributos:
align=left / right / center / justify:
alinea el texto de acuerdo a lo especificado. Left > Izquierda, Right > Derecha, Center > Centro, Justify > Justificar.
Codigo:
Permite añadir los famsos enlaces (links) del Internet.
Atributos:
accesskey="tecla (a-z)":
permite asignar una tecla de atajo a un link. Esto no hace que el enlace se abra al presionar la Alt + la tecla, sino que, el enlace sea seleccionado para sólo presionar enter y accesarlo.
href="ubicaciónarchivo.ext":
hace el link a ese archivo (que puede ser una imagén u otra página. Si un link a otra parte del documento, se pone "#nombre".
name="nombre":
se utiliza para denominar por nombre a una parte del documento, como un titulo por ejemplo.
target=_self / _top / _blank / _parent / nom ventana:
permite hacer que el link tenga algun efecto que desees. Por defecto el target es _self. El _blank hace que se abra el link en una página nueva. El _parent hace que la página se abra en la primera ventana que se abrió. El _top se usa cuando quieres que el link se abra una ventana nueva cuando usas frames y el _self que el link se abra en ese frame en especifico. nom ventana se puede usar para hacer que el enlace se cargue en una ventana que tenga nombre.
<page>
Codigo:
1
|
<?phpTag: <table>...</table>?>
|
Permite insertar las famosas tablas. Este tag necesita de los siguientes tags para su total funcionamiento:
<tr>...</tr> y <td>...</td>
Atributos:
align=left / center / right:
permite alinear la tabla a la izquierda, al centro o a la derecha, con respecto al espacio confinado.
bgcolor=###### / "nom color":
color de fondo en la tabla
background="ubicaciónimagen.ext":
imagen de fondo en la tabla
border=#:
define el tamaño del borde de la tabla
bordercolor=####### / "nom color":
permite cambiar el color del borde de la tabla
bordercolordark=####### / "nom color":
permite modifica el color de las "sombras" del borde
bordercolorlight=####### / "nom color":
permite modificar el color de la "luz" del borde
cellpadding=#:
define el espacio que hay de los bordes de una celda al contenido de esta en pixels
cellspacing=#:
define el espacio que hay entre los "bordes" de las celdas en pixels
cols=# de columnas que contiene tu tabla:
se utiliza para indicarle al browser la cantidad de columnas para que esta sea desplegada con mayor velocidad.
height=# / %:
define la altura de nuestra tabla. # es en pixels. % es porciento en comparación con el espacio confinado.
width=# / %:
define el ancho de nuestra tabla. # es en pixels. % es porciento en comparación con el espacio confinado.
nowrap:
elimina la condición wrap. La condición wrap hace que el texto se llevado a la proxima línea, si se elimina, el texto seguirá de largo.
Codigo:
1
|
<?phpTag: <tr>...</tr>?>
|
Este tag es el que se utiliza para añadirle una fila a una tabla (como vieron en el ejemplo anterior, este tag fue usado). Por cada fila que desees en la tabla, tienes que poner este tag. Este tag también requieres el uso del tag < td>...< /td>.
Atributo:
align=left / center / right / justify:
Con este atributo hacemos que todo el contenido de las celdas en la fila queden alineadas de la misma manera.
bgcolor=###### / "nom color":
color de fondo en la fila, que puedes hacer diferente del color de fondo de la tabla.
background="ubicaciónimagen.ext":
imagen de fondo en la fila, que puede ser diferente de la imagen de fondo de la tabla.
bordercolor=####### / "nom color":
permite cambiar el color del borde de la fila, , que puedes hacer diferente del color del borde de la tabla.
bordercolordark=####### / "nom color":
permite modifica el color de las "sombras" del borde, , que puedes hacer diferente del color de las "sombras" de la tabla.
bordercolorlight=####### / "nom color":
permite modificar el color de la "luz" del borde, , que puedes hacer diferente del color de la "luz" de la tabla.
valign=top / center / bottom / baseline:
definimos la alineación vertical del contenido de la fila con respecto al espacio confinado.
- top: pega el contenido al borde superior
- middle: pone el contenido en el medio de la fila
- bottom: pega el contenido al border inferior
- baseline: hace que, si hay varias celdas que contengan texto, las celdas se alinen mejor para ofrecer una mejor presentación
height=# / %:
define la altura de la fila. # es en pixels. % es porciento en comparación con el espacio confinado.
nowrap:
elimina la condición wrap. La condición wrap hace que el texto se llevado a la proxima línea, si se elimina, el texto seguirá de largo.
Codigo:
1
|
<?phpTag: <td>...</td>?>
|
Este tag es el que se utiliza para hacer las columnas de la tabla. Al contrario de lo que se cree, primero se hacen las filas y luego las columnas. El problema es, que si no pones el mismo número de columnas por fila, te puede dar un error. Si quieres disminuir el número de columnas, usa el atributo "colspan".
Atributo:
align=left / center / right / justify:
Con este atributo hacemos que el contenido de la celda se alinea como queramos.
bgcolor=###### / "nom color":
color de fondo en la celda, que puedes hacer diferente del color de fondo de la tabla y de la fila.
background="ubicaciónimagen.ext":
imagen de fondo en la fila, que puede ser diferente de la imagen de fondo de la tabla y de la fila.
bordercolor=####### / "nom color":
permite cambiar el color del borde de la fila, , que puedes hacer diferente del color del borde de la tabla y de la fila.
bordercolordark=####### / "nom color":
permite modifica el color de las "sombras" del borde, , que puedes hacer diferente del color de las "sombras" de la tabla y de la fila.
bordercolorlight=####### / "nom color":
permite modificar el color de la "luz" del borde, , que puedes hacer diferente del color de la "luz" de la tabla y de la fila.
valign=top / center / bottom / baseline:
definimos la alineación vertical del contenido de la fila con respecto al espacio confinado.
- top: pega el contenido al borde superior
- middle: pone el contenido en el medio de la fila
- bottom: pega el contenido al border inferior
- baseline: hace que, si hay varias celdas que contengan texto, las celdas se alinen mejor para ofrecer una mejor presentación
height=# / %:
define la altura de la celda. # es en pixels. % es porciento en comparación con el espacio confinado.
width=# / %:
define el ancho de la celda. # es en pixels. % es porciento en comparación con el espacio confinado.
nowrap:
elimina la condición wrap. La condición wrap hace que el texto se llevado a la proxima línea, si se elimina, el texto seguirá de largo.
colspan=#:
Lo utilizas para unir celdas y hacer un celda más grande.
rowspan=#:
Lo utilizas para uni filas y hacer una fila más grande. (Personalmente me lo encuentro inútil, porque lo único que tienes que hacer es hacr la altura de una fila más grande).
Codigo:
1
|
<?phpTag: <th>...</th>?>
|
Este tag es practicamente lo mismo que el < td>...< /td>. La única diferencia es que identifica la celda como una celda de titulo, y modifica el texto como tal. Experimenten para que vean. Se usa dentro de < tr>...< /tr>.
Codigo:
1
|
<?phpTag <tbody>...</tbody>?>
|
Este tag se usa para dar una configuracion mas personal a las tablas. Se usa dentro de la tabla y se puede usar mas de una vez. Este tag se puede usar para dar un formato a una seccion de la tabla diferente a lo que los atributos dicen. Lo bueno es que puede acoplar una serie de filas y/o columnas, ya que ahoraria el trabajo de hacerlo inividualmente con cada una.
Codigo:
1
|
<?phpTag: <pre>...</pre>?>
|
Se usa para dar un pre formato a un bloque de texto. O sea, los tabs, espacios extra, y todo lo demas saldra tal como deberia ser.
Codigo:
Este tag le dice al explorador que el texto que se encuentra entre ellos es una cita y le coloca las "".
Atributos:
cite="url":
Establece un enlace a otra pagina web, si es que la cita fue tomada de alli.
Codigo:
1
|
<?phpTag: <acronym>...</acronym>?>
|
Lo usas para hace que salga un tool-tip (la cajita amarilla) de lo que significa un acrónimo.
Atributos:
title="nombre":
Es el atibuto que usas para que salga el tool-tip.