Aprender HTML completo, a un par de horas de distancia
Creature:
3.3- Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en mayor tamaño.
Ejemplo:
<H1>Texto de Prueba</H1>
Se vera como:
Texto de Prueba
Ejemplo:
<H2>Texto de Prueba</H2>
Se vera como:
Texto de Prueba
Ejemplo:
<H3>Texto de Prueba</H3>
Se vera como:
Texto de Prueba
Ejemplo:
<H4>Texto de Prueba</H4>
Se vera como:
Texto de Prueba
Ejemplo:
<H5>Texto de Prueba</H5>
Se vera como:
Texto de Prueba
Ejemplo:
<H6>Texto de Prueba</H6>
Se vera como:
Texto de Prueba
Los textos marcados como "cabeceras" provocan automaticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Por ejemplo
Ejemplo:
<H3>Pagina de Jose</H3>Esta es mi pagina personal.
Se veria como:
Pagina de Jose
Esta es mi pagina personal.
Atributos del texto
Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello que segun el visor que este vd. utilizando, verá el resultado correctamente o no.
vease: http://usuarios.lycos.es/thecreature/tablas2.htm
Por otro lado la directiva <FONT></FONT> nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y face.
size = valor
Da al texto un tamaño en puntos determinado.
size = +/- valor
Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor.
color = "codigo de color"
Escribe el texto en el color cuyo codigo se especifica.
face = "nombre de font"
Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador.
Ejemplo:
<FONT size=+2 color="#FF0000 face="Arial"> Texto de prueba </FONT>
Se veria como:
Texto de prueba
Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto.
Directiva Hace lo mismo que
<STRONG></STRONG> <b></b>
<CITE></CITE> <i></i>
<STRIKE></STRIKE> <s></s>
Para incluir comentarios en la página Web se utiliza la directiva <!-- -->.
Ejemplo :
<!-- Esto es un comentario sobre mi pagina Web -->
Los comentarios no seran mostrados por el visor y son utiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos mas adelante que la directiva de comentario nos sera de utilidad para incluir codigo javascript en nuestra pagina Web.
Creature:
3.4- Listas de elementos
Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros:
start = num
Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1.
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.
Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Ejemplo:
<OL>
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</OL>
Resultado:
1. España
2. Francia
3. Italia
4. Portugal
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un circulo o un cuadrado.
Ejemplo:
<UL type = disk >
<LI>España
<LI>Francia
<LI>Italia
</UL>
Resultado:
[*]España
[*]Francia
[*]Italia
[/list]
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el marcado como definición se antecede de la directiva <DD>.
Ejemplo:
<DL>
<DT>WWW
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol
<DT>IRC
<DD>Abreviatura de Internet Relay Chat
</DL>
Resultado:
WWW
Abreviatura de World Wide Web
FTP
Abreviatura de File Transfer Protocol
IRC
Abreviatura de Internet Relay Chat
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la directiva <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un limite de 20 caracteres.
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "indice de materias".
Ejemplo:
<UL type= disk>
<LI>Buscadores
<UL>
<LI>Yahoo
<LI>Google
</UL>
<LI>Links
<UL>
<LI>IBM
</UL>
</UL>
Resultado:
[*]Buscadores
[*]Lycos[*]Google[/list]
[*]Links[*]IBM[/list]
[/list]
Creature:
3.5- Imagenes
Hasta el momento hemos visto como se puede escribir texto en una pagina Web, asi como sus posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos la directiva <IMG>. Hay dos formatos de imagenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el visor, a no ser que disponga de un programa externo que permita su visualización.
La directiva <IMG> tiene varios parámetros :
src = "imagen"
Indica el nombre del fichero gráfico a mostrar.
alt = "Texto"
Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.
lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pagina. Este parametro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicacion, asi que en la mayoria de los casos sera ignorado mostrandose solo la primera imagen (src). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src. Si las imagenes son iguales pero tienen distinta "resolucion" se conseguirá un efecto tipo "Fade". Si las imagenes son de distinto tamaño la imagen indicada en src se redimensionara al tamaño indicado por la imagen indicada en lowsrc
align = TOP / MIDDLE / BOTTOM
Indica como se alineará el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.
border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.
height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
hspace = margen
Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.
vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
ismap / usemap
Indica que la imagen es un MAPA. Veremos estos parametros mas adelante en este manual.
Ejemplo:
<IMG src="caution.gif" alt="Cuidado !!">
Se verá:
Y en caso de poder visualizar la imagen:
Cuidado !!
La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.
Ejemplo
<IMG src="http://www.microsoft.com/iexplorer.gif">
Creature:
3.6- Hyperenlaces
La característica principal de una página Web es que podemos incluir Hyperenlaces. Un Hyperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc..
Para incluir un Hyperenlace se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si pulsamos con el raton sobre el, se realzará la funcion de hyperenlace indicada por la directiva <A></A>. Si el Hyperenlace esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hyperenlace si lo pulsamos.
Ejemplo:
<A href="http://www.prehackers.com/"> Pulse para ir a la página de Prehackers</A>
Se vera:
Pulse para ir a la página de Prehackers
Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página Web indicada por el parámetro href, es decir, accederá a la página situada en http://www.microsoft.com/
Lo mismo podríamos hacer con un gráfico.
Ejemplo:
Gran web sobre hacking en Internet:
<A href="http://usuarios.lycos.es/thecreature/creature-prehackers.gif">
<IMG src="yahoo.gif"></A>
Se vera como:
Gran web sobre hacking en Internet:
Pulsando sobre la imagen se accedería a la pagina situada en http://www.prehackers.com/.
Un Hyperenlace tambien puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parametro name.
Ejemplo:
<A name = "seccion1"></A>
Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se llamará seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma :
<A href="#seccion1">Primera Parte</A>
O tambien :
<A href="http://www.jet.es/mipagina.htm#seccion1">Primera Parte</A>
Un Hyperenlace puede hacerse a cualquier tipo de fichero. Con las directivas anteriores hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero podríamos hacer un Hyperenlace a un grupo de noticias, o a otro servicio de Internet.
Ejemplo:
<A href="news://news.actualidad.es/">Noticias de actualidad</A>
Asimismo podemos hacer que el Hyperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada.
Ejemplo:
<A href="mailto: luisfd@jet.es">Envíame tus sugerencias</A>
También podemos realizar un Hyperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar ficheros a su ordenador.
Ejemplo:
<A href="winzip.zip">Pulsa aqui para llevarte un ZIP.</A>
Pulsa aqui para llevarte un ZIP.
El parámetro onMouseOver permite que se muestre en la barra inferior del navegador un texto explicativo sobre el Hyperenlace, en vez de mostrar su direccion. Este parametro no funciona en todos los navegadores.
Ejemplo:
<A href="winzip.zip" onMouseOver="window.status='Este link copia el manual a tu disco duro'; return true;">Pulsa aqui para llevarte una copia del manual.</A>
Creature:
3.7- Tablas
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imagenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta muy util para "ordenar" contenidos de distintas partes de nuestra página. La tabla se define mediante la directiva <TABLE></TABLE>. Los parámetros opcionales de esta directiva son :
border = num.
Indica el ancho del borde de la tabla en puntos.
cellspacing = num
Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.
cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
width = num ó %
Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
height = num ó %
Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
bgcolor = codigo de color
Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se utilizan las directivas <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas directivas son :
align = LEFT / CENTER / RIGHT / JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan = num
Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
width = num ó %
Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parametro solo funciona en los navegadores modernos.
bgcolor = codigo de color
Especifica el color de fondo del elemento de la Tabla.
Para indicar que acaba una fila de celdas se utiliza la directiva <TR>. A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc...
Las directivas <TD> y <TH> son cerradas según el estandar de HTML, es decir que un elemento de tabla <TD> deberia cerrarse con un </TD> , sin embargo los visores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente.
Navegación
[#] Página Siguiente
[*] Página Anterior