Guia de HTML

HTML Referencia Rpida
INTRODUCCIN
Las pginas web estn armadas usando el lenguaje de marcacin de elementos en la pantalla, o sea HTML.
Por medio de l, le decimos al navegador qu elementos queremos ver (imgenes, texto, etc), en qu
posicin de la pantalla y con qu caractersticas (color, tamao, etc).
Para armar una pgina web, necesitamos contar con un editor de texto cualquiera. Recomendamos
LopeEdit por ser muy fcil.
Para crear tu primera pgina web, abr LopeEdit y vas a encontrar en la parte superior una pestaa que
dice Untitled o Sin Ttulo. Ese es el archivo que va a contener las etiquetas HTML, o sea, tu pgina
web. Por lo tanto se lo debe guardar (File Save).
Para guardar archivos que van a ser pginas web, se deben seguir unas reglas como las siguientes:
Los nombres de archivo no deben tener espacios, maysculas, tildes, ni caracteres especiales
(@, , etc).
La extensin del archivo debe ser .html Si no le pons esa extensin, tu archivo no ser una
pgina web, sino un archivo de texto .txt
Por ejemplo, guard tu archivo con el nombre pagina1.html

De paso, abrilo con el navegador que tengas en tu mquina (Internet Explorer, Google Chrome, etc). Y no lo
cierres, as cuando vamos agregando etiquetas en el LopeEdit, vamos viendo cmo se ve tu pgina en el
navegador.
Para trabajar mejor, recomendamos tener abiertos los dos programas: LopeEdit con tu archivo
pagina1.html, y el navegador con ese mismo archivo para ver los cambios.
Cada vez que modifiques el archivo en LopeEdit, guard los cambios que hiciste y luego actualiz tu
pgina en el navegador (F5).
El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags).
Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Todo el documento
HTML debe estar entre las etiquetas <HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en s est dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>. Dentro del

encabezamiento hay informacin del documento, que no se ve en la pantalla principal, como el
ttulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser
breve y descriptivo de su contenido, pues ser lo que vean los dems cuando agreguen nuestra
pgina a sus favoritos, por ejemplo.
El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>. Dentro del cuerpo estn todos los
elementos que queremos que aparezca en la pgina (texto, imgenes, etc.)
Por tanto, la estructura queda de esta manera:

HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[Aqu van las etiquetas que visualizan la pgina]
</BODY>
</HTML>
Como dijimos, lo mnimo que se necesita para crear y ejecutar un documento HTML es un editor de texto
(como el block de notas o el LopeEdit) y un explorador web (como el IE). No olvidar que al guardar el
archivo en el editor, su extensin debe ser .HTML. Cuando escribimos en el documento el texto que
queremos que aparezca en la pantalla se acomoda a ella, sin que tengamos que pulsar Enter.
Por qu tenemos que tener cuidado al darle nombre a los archivos:
Un sitio del Web es en realidad un conjunto de archivos que vamos a colocar en un servidor, para que sean
accesibles a quien quiera visitarlos. Pero debido a que la mayora de los servidores estn basados en
sistemas operativos Unix (aunque crecientemente se van utilizando otros sistemas), es muy conveniente,
para evitarnos problemas al instalar nuestros archivos en el servidor, considerar una particularidad
referente a los nombres de los archivos.
En los sistemas ms utilizados para confeccionar las pginas del Web (Windows, Mac) es indiferente la
utilizacin de las maysculas y minsculas en los nombres de los achivos. Es decir, es lo mismo Indice.html
que INDICE.HTML o que indice.html Pero esto no es as en los sistemas Unix, en donde los ejemplos
anteriores se corresponderan a tres nombres distintos.
Si no se tiene esto en cuenta, puede ocurrir, por ejemplo, que una referencia que se haga en un documento
HTML al archivo Indice.html resulte en un error de que no existe tal fichero debido a que en realidad se
llama indice.html Para evitar estos posibles problemas es muy conveniente (como ya dijimos) tomar estas
medidas desde que se comienza la confeccin de una pgina del Web:
Utilizar exclusivamente las minsculas para nombrar los documentos HTML, y todos aquellos
que forman parte de la web (imgenes, sonido, etc).
Todas las referencias que se hagan dentro de un documento HTML a otros documentos o
archivos deben hacerse tambin siempre en minsculas.
Evitar los espacios en los nombres de archivos; usar el guin bajo.
ETIQUETAS
Para prrafos: se usa la etiqueta <P>, que se cierra con </P>. Deja un espacio entre cada prrafo.
Para separar un mismo prrafo en varias partes: <BR> sin cerrarla. No deja espacio entre las partes
divididas.
Para obtener varias lneas en blanco, se usan ambas: <BR> <P>, una por cada lnea a generar.
Si se necesita separar palabras con ms de un espacio: &nbsp sin usar los signos < y >(non-breaking
space).
Cabeceras: <H1> y </H1>, <H2> y </H2>, etc. (hasta el nmero 6), siendo el nmero indicativo del
tamao. El tamao mayor es el correspondiente al nmero 1.
Centrado: <CENTER> </CENTER> (no la soportan todos los navegadores). Centra todo lo que est
dentro de ella, ya sea texto, imgenes, etc.
Separadores (horizontal rules): <HR> (no existe la correspondiente de cierre). Con ella se obtiene una
lnea horizontal tan ancha como la pantalla.
<HR WIDTH=75%> Ocupa el 75% de su anchura (width) normal.
<HR WIDTH=300> Tiene una anchura de 300 pixels.
<HR WIDTH=50% ALIGN=RIGHT> Alinear a la derecha.
<HR SIZE=20> Para variar su espesor.
<HR NOSHADE> Para que sea una lnea slida.
<HR COLOR=BLUE> Para que sea azul.
Cuando se quiera usar ms de una de las propiedades anteriores, conviene colocarlas dentro de la
misma la etiqueta <HR>
<HR WIDTH=75% SIZE=20 COLOR=BLUE>
Estilo Negrita: <B> </B> (bold).
Estilo Cursiva: <I> </I> (italic).
Superndice: <SUP> </SUP>
Subndice: <SUB> </SUB>
Listas sin orden (unordered lists): sirven para presentar cosas que, por no tener un orden
determinado, no necesitan ir precedidas por un nmero. Aparecen vietas sencillas. Su estructura es la
siguiente:
<UL>
<LI> Una cosa
<LI> Otra cosa
</UL>
Listas con orden (ordered lists): sirven para presentar cosas en un orden determinado. Su estructura
es muy similar a la anterior. Aparecer un nmero correlativo para cada cosa.
<OL>
<LI> Primera cosa
<LI> Segunda cosa
</OL>
Comentarios no visibles en la pantalla: se consiguen encerrando dichos comentarios entre 
Enlaces (Links): La caracterstica que ms ha influido en el xito del Web ha sido, aparte la de su
carcter multimedia, la posibilidad de unir los distintos documentos por medio de enlaces de
hipertexto.
En general, los enlaces tienen la siguiente estructura: <A HREF=pgina> marcador </A>
donde:
pgina es el destino del enlace.
marcador es el texto indicativo en la pantalla del enlace (con un color especial y generalmente
subrayado)
Vamos a distinguir varios tipos de enlaces:

1. Enlaces dentro de la misma pgina: En el caso de documentos muy extensos, nos puede interesar
dar un salto desde una posicin a otra determinada.
<A HREF="#marca"> YYY </A>
En este caso, el destino del enlace (que sera el sitio dentro de la pgina a donde queremos saltar)
se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que
hemos llamado antes YYY es el marcador (palabras subrayadas) que aparecern en la pantalla.
Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="marca"> </A>
Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Y en el final del documento he puesto esta otra etiqueta:
<A NAME="final"> </A>
2. Enlaces con otra pgina nuestra:
<A HREF="mipag2.html"> Ir a la Pgina 2 </A>
Estamos suponiendo que la pgina en la que estamos escribiendo esta etiqueta y la otra pgina a la
que queremos saltar estn en el mismo directorio. Si la pgina a la que queremos saltar est, p. ej.
en el subdirectorio subdir, entonces en la etiqueta tendra que haber puesto "subdir/mipag2.html".
Y a la inversa, si queremos saltar desde una pgina a otra que est en un directorio anterior, en la
etiqueta tendramos que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al
directorio anterior.
3. Enlaces con una pgina fuera de nuestro sistema: es necesario conocer su direccin completa, o
URL (Uniform Resource Locator).
<A HREF="http://www.netscape.com/"> Pgina inicial de Netscape </A>
Imgenes:
<IMG SRC="imagen.gif"> Con el comando IMG SRC (image source, origen de la imagen) se
indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). La imagen debe
estar en la misma carpeta que la pgina, sin se debe usar /, como en los enlaces.
Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT, para colocar un texto
alternativo (una palabra o una frase breve).
<IMG SRC="imagen.gif" ALT="descripcin">
A la imagen se le puede agregar un titular y alinearlo arriba (TOP), en medio (MIDDLE) o abajo
(BOTTOM) del lado de la imagen. Para ello se aade el comando ALIGN a la etiqueta, de la siguiente
manera:
<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra pgina. Aqu al
formato del enlace se le anida la imagen, la cual funcionar como marcador del enlace:
<A HREF="mipag2.html"> <IMG SRC="hombre.gif"> </A>
La imagen queda rodeada de un rectgulo del color normal en los enlaces. Para quitarlo, agregar
dentro del tag IMG BORDER=0
Fuentes: Para cambiar la fuente de los textos, se usa <FONT> </FONT> En la etiqueta de apertura, se
especifica qu se quiere modificar de dicha fuente (el tamao, el tipo, el color):
Tamao: <FONT SIZE=5> Texto en tamao 5 </FONT> Los tamaos del texto van, de menor a
mayor, del 1 al 7. El tamao normal es el 3. Se puede cambiar incluso el tamao base para toda
la pgina, poniendo a continuacin de la etiqueta <BODY> <BASEFONT SIZE=5>
Tipos de las fuentes: <FONT FACE="Verdana">Este texto se ver con la fuente

Verdana</FONT> Los navegadores utilizan por defecto Times New Roman. Quien no tenga la
fuente Verdana instalada, por ejemplo, ver el texto en Times New Roman. USAR SIEMPRE LAS
FUENTES QUE TRAE WINDOWS.
Color: <FONT COLOR="#XXYYZZ"> Texto en color </FONT>

donde:
o
XX es un nmero indicativo de la cantidad de color rojo
YY es un nmero indicativo de la cantidad de color verde
ZZ es un nmero indicativo de la cantidad de color azul
Estos nmeros estn en hexadecimal. El nmero menor es el 00 y el mayor el FF. As, por
ejemplo, el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos
colores.
De esta forma usamos la paleta de colore RGB (Red Green Blue), especial para
monitores y TV.
Los colores primarios son:
Otros colores son:
#FF0000 - Rojo
#FFFFFF - Blanco
#00FF00 - Verde
#000000 - Negro
#0000FF - Azul
#FFFF00 - Amarillo
Fondos: Se puede cambiar el fondo de dos maneras distintas:

1. Con un color uniforme: <BODY BGCOLOR="#XXYYZZ">
Se pueden elegir los colores del texto y de los enlaces, aadiendo a la etiqueta los siguientes
comandos:
<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">
Donde:
TEXT - color del texto
LINK - color de los enlaces
VLINK - color de los enlaces visitados
ALINK - color de los enlaces activos (el que adquieren en el momento de ser
pulsados)
2. Con una imagen: <BODY BACKGROUND="imagen.gif">
Se pueden combinar ambos; si la imagen no se puede cargar, toma el color de fondo:
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF">
Alineacin y dimensionado de imgenes

1. Para alinearla: <IMG SRC="doom.gif" ALIGN=RIGHT>
2. Para cambiar su tamao en ambas dimensiones: <IMG SRC="isla.gif" WIDTH=120
HEIGHT=94> Se corre el riesgo de deformar la imagen. Para que esto no ocurra y se respeten
sus proporciones, solamente se debe usar uno de ellos: o WIDTH, o HEIGHT. La otra dimensin
se ajusta a la que fue modificada.
Tablas: La etiqueta general, que engloba a todas las dems es <TABLE> y </TABLE>. Es decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
Para ver los bordes:
<TABLE BORDER>
[resto de las etiquetas]
</TABLE>
Para formar cada fila (row) de la tabla, se usa <TR> y </TR>. Hay que repetirlas tantas veces como
filas queremos que tenga la tabla.
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
En el ltimo nivel (dentro de las anteriores) estn las etiquetas de cada celda, que son <TD> y </TD>,
que engloban el contenido de cada celda concreta (texto, imgenes, etc.). Hay que repetirla tantas
veces como celdas queremos que haya en esa fila.
<TD> celda1</TD>
<TD>celda2</TD>
Ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a
poner un texto indicativo de la posicin de dicha celda:
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>
Se puede aadir un titular (caption) a la tabla: <CAPTION> Titular de Tabla </CAPTION
El atributo BORDER pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que
este borde sea tan grueso como queramos, poniendo:
<TABLE BORDER=5>
Normalmente, el contenido de una celda est alineado a la izquierda. Pero se puede cambiar:
<TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD>
El alineamiento por defecto en el sentido vertical es en el medio. Tambin se puede cambiar:
<TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD>
o
Para cambiar el ancho y el alto de la tabla: <TABLE WIDTH=60%> <TABLE HEIGHT=200> Como se
ve, se puede usar el % que va a ocupar con respecto al ancho de la pantalla, o una medida en
pixels.
Color de fondo en toda la tabla:
<TABLE BGCOLOR="#00FF00">
Color de fondo en una celda: <TD BGCOLOR="#00FF00"> celda1</TD
Imgenes de fondo en las tablas: <TABLE BACKGROUND="nubes.jpg">
Separacin entre las celdas de una tabla: <TABLE BORDER CELLSPACING=20>
Separacin entre el borde y el contenido dentro de las celdas: <TABLE BORDER CELLPADDING=20>
Sonidos: Una pgina del Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se
ejecuta automticamente al cargar la pgina, o como una opcin para que la active el propio usuario.
Fondo sonoro: <BGSOUND SRC="fichero_de_sonido" LOOP=n>
El archivo de sonido puede estar en formato .mid o .wav. LOOP sirve para especificar el nmero (n) de
veces que se debe ejecutar el archivo Si se escoje el nmero n=-1 o se pone LOOP=infinite, el sonido se
ejecutar indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutar una sola
vez.
Activacin del sonido por el propio usuario: Consiste en poner un enlace a un archivo de sonido, de
tal manera, que al pulsarlo se ejecute.
Ejemplo:
Escucha esta <A HREF="prv89.mid">musica</A>
Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido.
Para ejecutar videos y animaciones: <EMBED SRC=archivo.avi> </EMBED>
Marquesinas (Marquees): Una marquesina (en ingls, marquee) es una ventana en la que se desplaza
un texto. La etiqueta bsica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
En este caso el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de
la pantalla, tiene la altura de una lnea y el texto se desplaza lentamente de derecha a izquierda.
Para ajustar la anchura y altura:

<MARQUEE WIDTH=50% HEIGHT=60> Cambiamos el ancho y el alto </MARQUEE>
Para cambiar la alineacin del texto se coloca ALIGN seguido de TOP (arriba), MIDDLE (en medio) o
BOTTOM (abajo). Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>Hola! </MARQUEE>
BEHAVIOR (Comportamiento): Sirve para definir de cmo se va a efectuar el desplazmiento del texto.
Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ah. Si es
igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los lmites de
la marquesina. Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto rebota</MARQUEE>
Para cambiarle el color de fondo:

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>
Para modificar la direccin del texto:
<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha </MARQUEE>
Para definir la cantidad de desplazamiento del texto en cada movimiento de avance:
<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
Para definir el tiempo entre cada movimiento de avance (en milisegundos):
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
Cuanto mayor es el nmero ms lento avanza.

Guia de HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia de HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML Referencia Rpida

Por ejemplo, guard tu archivo con el nombre pagina1.html

El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>. Dentro del

Por tanto, la estructura queda de esta manera:

Evitar los espacios en los nombres de archivos; usar el guin bajo.

<HR WIDTH=75%> Ocupa el 75% de su anchura (width) normal.

<HR WIDTH=300> Tiene una anchura de 300 pixels.

<HR WIDTH=50% ALIGN=RIGHT> Alinear a la derecha.

<HR SIZE=20> Para variar su espesor.

<HR NOSHADE> Para que sea una lnea slida.

<HR COLOR=BLUE> Para que sea azul.

Estilo Negrita: <B> </B> (bold).

Estilo Cursiva: <I> </I> (italic).

Superndice: <SUP> </SUP>

Subndice: <SUB> </SUB>

pgina es el destino del enlace.

Vamos a distinguir varios tipos de enlaces:

Tipos de las fuentes: <FONT FACE="Verdana">Este texto se ver con la fuente

Color: <FONT COLOR="#XXYYZZ"> Texto en color </FONT>

XX es un nmero indicativo de la cantidad de color rojo

YY es un nmero indicativo de la cantidad de color verde

ZZ es un nmero indicativo de la cantidad de color azul

Los colores primarios son:

Otros colores son:

Fondos: Se puede cambiar el fondo de dos maneras distintas:

<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">

Alineacin y dimensionado de imgenes

Color de fondo en toda la tabla:

Color de fondo en una celda: <TD BGCOLOR="#00FF00"> celda1</TD

Imgenes de fondo en las tablas: <TABLE BACKGROUND="nubes.jpg">

Separacin entre las celdas de una tabla: <TABLE BORDER CELLSPACING=20>

Para ejecutar videos y animaciones: <EMBED SRC=archivo.avi> </EMBED>

Para ajustar la anchura y altura:

Para cambiarle el color de fondo:

Você também pode gostar