Manual HTML

1
INDICE
1. Introduccin al HTML..2
2. Estructura del lenguaje de programacin4
2.1.1. Cabecera de un documento.4
2.1.2. Cuerpo de un Documento.5
3. Etiquetas principales...8
4. Formateo de textos. ...11
5. Listas20
6. Tablas..26
7. Divs. .31
8. Otros Enlaces.33
8.1.Enlaces.33
8.2.Imgenes..34
8.3.Formularios..36
8.4.Cdigo de caracteres.40
9. Bibliografa48
1. INTRODUCCIN AL HTML
HTML(HyperText Markup Language) o "Lenguaje para Marcado

de Hipertexto".
HTML es el lenguaje que te permite describir y dar forma a tus
pginas Web.
Publica tus propias pginas con fotos, listas, tablas, etc.
Obtn informacin de los visitantes de tu sitio.
Disea los formularios que te permitirn contactar tus futuros
clientes.
Crea un sitio para vender ts productos o servicios.
Incluye video clips, msica, sonidos, y otras aplicaciones que
darn vida a ts pginas Web.
2. ESTRUCTURA DEL LENGUAJE DE

PROGRAMACIN
El lenguaje HTML se basa en la sintaxis SGML, esto quiere decir
que cualquier cosa que hagamos en HTML estar encerrada
entre etiquetas de esta manera: <ETIQUETA parmetros>...
<HADE></HEAD>
</ETIQUETA>
Lo primero que debemos indicar es que el texto que estamos

componiendo es un documento HTML, cuyo inicio y final sern
respectivamente: <HTML> ... </HTML>
Un documento HTML tiene una estructura que lo separa en dos
partes: cabecera y cuerpo.
2.1. Cabecera (HEAD) de un documento HTML
La HEAD es la primera de las dos partes en que se estructura un

documento HTML.
En la HEAD reside informacin acerca del documento, y
generalmente no se ve cuando se navega por l. En la HEAD se
pone el elemento lleno <TITLE> que es una breve descripcin que
identifica la pgina. Es lo que el navegador se guarda en el
"Bookmarks" (libro de marcas o libro de direcciones), con lo que
crea la lista que aparece en la orden "Go" de la barra de rdenes, lo
que aparece en la esquina superior izquierda cuando se imprime el
documento, y lo que aparece en el marco de la ventana del
navegador. Tambin lo guarda en su cach, y servir para mostrar la
pgina, cuando sea llamada otra vez, sin necesidad de conectarse
de nuevo al servidor de origen.
No hay que confundir el elemento <TITLE> con el nombre del
fichero.
<HEAD> <TITLE> Head de un documento </TITLE></HEAD>

Ejemplo:
En este caso dentro de la cabecera hay otra etiqueta. Es la nica

imprescindible: el ttulo de la pgina, es lo que veremos como ttulo
de la ventana en los navegadores que lo permitan. Es como se
conocer nuestra pgina en algunos buscadores y en la agenda de
direcciones de los usuarios. Por tanto, es importante poner un
nombre indicativo del contenido de la pgina.
2.2. Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y ltima de las dos partes en que
se estructura un documento HTML.
Es donde se pone el contenido. Lo primero ser describir que
estamos en el cuerpo del documento, que se delimita con:
<BODY></BOBY>
<BODY>... </BODY>
Luego pondremos el ttulo destacado:
<CENTER><H1>... </H1></CENTER>
(Con esto SINTAXIS colocaremos el texto centrado (<CENTER>)y
en formato <H1> (cabecera 1) que nos asegura que aumentar el
tamao del tipo de letra lo suficiente como para que se vea
resaltado). Luego separamos ese ttulo que le hemos puesto a la
pgina del texto por medio de una lnea horizontal:<HR>
La lnea horizontal carece de etiqueta de cierre, como ya hemos

dicho anteriormente.
<html>
<head><title>Nombre de la pgina
Web</title></head>
<body>
Hola a todos
</body>
</html>
Ejemplo
ANLISIS:
Cdigo
<html>
Explicacin
La primera
etiqueta del
archivo es
<html>. Esto le
indica al
navegador que
se trata de un
archivo HTML.
Resultado
Hola a todos
<head><title>Nombr
e de la pgina
Web</title></head>
Vemos la
etiqueta
<head>. Lo que
sigue a
continuacin
hasta su cierre
</head>, es la
cabecera del
documento y no
se muestra en la
pantalla. Aqu
colocamos
informacin tal
como el ttulo de
la pgina
(<title>Mi
primera pgina
Web</title>),
palabras claves
para los motores
de bsqueda,
una descripcin
de la pgina y
otros datos del
documento.
<body>
Hola a todos
</body>
Entre las
etiquetas
<body> y
</body> se
encuentra el
cuerpo del
documento y el
contenido que
se coloque en
esta seccin es
el que veremos
en pantalla,
como por
ejemplo, "Hola a
todos.".
</html>
Para cerrar el
archivo usamos
</html>. Todo
lo que se
encuentra entre
las dos etiquetas
es el cdigo
HTML de la
pgina.
10
3. ETIQUETAS PRINCIPALES EN UN
DOCUMENTO HTML
Las etiquetas
Las etiquetas o elementos (en ingls: tags) son marcas insertadas

en un documento HTML para proporcionar informacin sobre
una unidad o contenido.
Elementos llenos
Se forman escribiendo la instruccin correspondiente seguida
del texto al que se quiere aplicar la instruccin y se termina
repitiendo la instruccin pero con una barra inclinada
inmediatamente antes de la misma.
Ejemplo:
<b>Este texto est en negrita.</b>
El elemento HTML comienza con la etiqueta de apertura

<b>(etiqueta que nos muestra el texto en negrita).
El fin del elemento HTML es con la etiqueta de cierre </b>.
11
Resultado:
Este texto est en negrita.
Elementos vacos
Los elementos vacos se escriben como los llenos, pero no es

necesario poner la instruccin repetida al final con una barra.
Esto se debe a que estos elementos no producen un efecto
sobre el texto. Generalmente se utilizan para separar bloques de
texto, y por tanto no es necesario indicar su fin. Empiezan y
terminan en el mismo punto
Ejemplo:
<HR>
El elemento <HR> que sirve para dibujar una lnea horizontal en
la pantalla.
Resultado:
Elementos con argumento

Algunos elementos se escriben con argumento. Es como pasarle
parmetros a la instruccin, y se llaman atributos del elemento.
12
Ejemplo:
<A HREF="http://www.miservidor.es/mifichero.htm">Link de
prueba</A>.
El elemento <A> sirve para hacer un link con otro documento o

con otra pgina del actual.
Este es un elemento lleno donde al atributo HREF se le asigna el
valor que aparece entre comillas:
"http://www.miservidor.es/mifichero.htm".
El texto al que afecta este elemento es Link de prueba y realiza

un link con el fichero mifichero.htm que est en el servidor
www.miservidor.es.
Los elementos pueden escribirse tanto en maysculas como en
minsculas. Puede ser preferible la primera opcin ya que aporta
claridad al documento fuente, y eso se agradece a la hora de
hacer correcciones, pero CUIDADO, el valor de algunos atributos
hay que escribirlos EXACTAMENTE como deban ser. En el
ejemplo anterior no funcionara el link si escribiramos
www.miservidor.es en maysculas, eso es un nombre de

mquina y sera interpretado como OTRA mquina.
Los elementos pueden anidarse unos con otros, teniendo

cuidado de poner los cierres en el lugar adecuado.
13
Ejemplo:
<H1><I>Texto de prueba </I></H1>.
El elemento <H1> combinado con <I> sirve para generar texto

en itlica.
Resultado:
Texto de prueba
14
<Hx></Hx>
4. FORMATEO DE TEXTO
TAMAOS DE LETRA EN HTML O HEADINGS
Para definir distintos tamaos de letra, en HTML se utiliza el
elemento lleno <Hx> </Hx> donde x es un nmero que puede
variar entre 1 y 6, siendo 1 el tamao mayor.
Ejemplo:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Texto
Texto
Texto
Texto
Texto
Texto
de
de
de
de
de
de
prueba
prueba
prueba
prueba
prueba
prueba
(H1)</H1>.
(H2)</H2>
(H3)</H3>
(H4)</H4>
(H5)</H5>
(H6)</H6>
Resultado:
15
Texto de prueba (H1)

Este tipo de elemento se suele utilizar para escribir

encabezamientos, ya que despus del cierre automticamente el
visualizador inserta un salto de prrafo.
Ejemplo:
<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>
Resultado:
Texto en H1
Texto en H3
Este elemento tambin admite un parmetro de alineacin.
Ejemplo:-Resultado
16
<H3 align=center> Texto en H3 </H3>
CAMBIO DE TAMAO SIN SALTO DE PARRAFO.

Otra forma de cambiar los tamaos de letra es utilizar el
elemento <FONT > con el atributo VALOR, que es un nmero
entre 1 y 7. El valor por defecto del texto es 3. La gran
diferencia de esta notacin respecto a la anterior es que no se
produce un salto de prrafo despus de cada cambio.
Texto en H3
Texto en H3
Ejemplo:
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT
SIZE=5>A</font>
SIZE=6>A</font>
SIZE=3>A</FONT>
Resultado:
17
AAAAAA
AAA
CAMBIO DE TAMAO A TODA LA PGINA.

Se puede cambiar el tamao por defecto (3) de toda la pgina
con el elemento <BASEFONT SIZE=valor>. El texto tomar el
tamao indicado por valor y lo mantendr hasta que aparezca
otro elemento <BASEFONT SIZE=valor> y lo restaure o lo
cambie por otro diferente.
Los tamaos puede ser positivo (+) o negativo (-) respecto al

tamao base, dando lugar a valores equivalentes.
Ejemplo:
<FONT SIZE=5>ABcde</FONT>
<FONT SIZE=+2>ABcde</FONT>
Resultado
ABcde
ABcde
TIPOS DE LETRA
18
<FONT FACE=></FONT>
Con la versin 3.0 de Netscape se ha implementado un nuevo
atributo del elemento <FONT> que permite elegir tipos de letra
entre los varios de que dispone por defecto Windows. Se trata
del atributo FACE. Este atributo permite forzar el tipo de letra
que el diseador de la pgina quiere que vea el cliente, sin
importar el que por defecto tenga establecido el visualizador.
Ejemplo
<FONT FACE="arial">Texto de prueba 12345 con tipo
ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345
con tipo TIMES NEW ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con
tipo COURIER NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo
COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo
ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con
tipo SMALL FONTS</FONT>
Resultado:
19
Texto de prueba 12345 con tipo ARIAL Texto de prueba

12345 con tipo TIMES NEW ROMAN Texto de prueba
12345 con tipo COURIER NEW Texto de prueba
12345 con tipo COURIER Texto de prueba 12345 con
tipo ROMAN Texto de prueba 12345 con tipo
VERDANA Texto de prueba 12345 con tipo SMALL FONTS
Este atributo es compatible con todos los dems, como color y
tamao.
Ejemplo
<FONT FACE="impact" SIZE=6 COLOR="red">
Texto de prueba 12345 con tipo IMPACT</FONT>
Resultado
Texto de prueba 12345 con tipo

IMPACT
Se debe tener presente que si en la mquina cliente no est
instalada una determinada fuente, sta no se ver y en su lugar
aparecer la fuente por defecto del visualizador.
Si a pesar de todo, se define un tipo del que se tienen dudas de
que exista en el cliente, se pueden indicar otros tipos
alternativos, de forma que el navegador si no tiene el primer
20
tipo, utilizar el siguiente, y si tampoco lo tiene el prximo, etc.

Ejemplo
<FONT FACE="raro, courier" SIZE=4 COLOR="red">
Texto de prueba 12345 con tipos
alternativos</FONT>
Resultado:
Texto de prueba 12345 con tipos

alternativos
Como puedes ver, se ha declarado como primer tipo de letra el

llamado "raro" que no existe, y el navegador pasa a utilizar el
siguiente, "courier", que s es habitual.
FORMATOS DEL TEXTO

Cdigo
<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itlica</i>
<small>Texto pequeo</small>
<strong>Texto fuerte</strong>
<sub>Texto subndice</sub>
<sup>Texto superndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>
21
Resultado
Texto normal Texto en negrita
Texto normal Texto grande
Texto normal Texto enfatizado
Texto normal Texto en itlica
Texto normal Texto pequeo
Texto normal Texto fuerte
Texto normal Texto subndice
Texto normal Texto superndice
Texto normal Texto subrayado

Texto normal Texto tachado
Texto normal Texto teletipo
22
ETIQUETAS DE CITACIONES Y DEFINICIONES

<abbr>
Indica una forma abreviada (p.ej., WWW,

HTTP, etc.)
<acronym>
Indica un acrnimo (p.ej., WAC ,radar,

autobs, etc.)
<address>
Define la informacin sobre el autor
<bdo>
Define la direccin del texto (p.ej., de izq. a

der., de der. a izq.)
<blockquote
Designa una cita larga
>
<q>
Designa una cita corta
<cite>
Contiene una cita o una referencia a otras

fuentes
<dfn>
Indica que aqu es donde se define el

trmino encerrado
COLORES DE TEXTO
Se puede controlar el color del texto utilizando el elemento
<FONT> con el atributo COLOR="xxx", donde "xxx" es el
nombre en ingls del color que se desea. Hay que tener
presente que algunos no se vern o se vern mal si la mquina
no soporta, por lo menos, 256 colores.
23
Ejemplo:
Resultado
<B><FONT COLOR="red">Texto ROJO </FONT>

<br>
<FONT COLOR="blue">Texto AZUL </FONT>
<br>
<FONT COLOR="navy">Texto AZUL MARINO
</FONT>
<br>
<FONT COLOR="green">Texto VERDE </FONT>
<br>
<FONT COLOR="olive">Texto OLIVA </FONT>
<br>
<FONT COLOR="yellow">Texto AMARILLO
</FONT>
<br>
<FONT COLOR="lime">Texto LIMA </FONT>
<br>
<FONT COLOR="magenta">Texto MAGENTA
</FONT>
<br>
<FONT COLOR="purple">Texto PURPURA
</FONT>
<br>
<FONT COLOR="cyan">Texto CYAN </FONT>
<br>
<FONT COLOR="brown">Texto MARRON
</FONT>
<br>
<FONT COLOR="black">Texto NEGRO </FONT>
<br>
<FONT COLOR="gray">Texto GRIS </FONT>
<br>
<FONT COLOR="teal">Texto TEAL </FONT>
<br>
<FONT COLOR="white">Texto BLANCO
</FONT>
<br>
</B>
Texto ROJO
Texto
AZUL
Texto
AZUL
MARINO
Texto
VERDE
Texto
OLIVA
Texto
AMARILL
O
Texto
LIMA
Texto
MAGENTA
Texto
PURPURA
Texto
CYAN
Texto
MARRON
Texto
NEGRO
Texto GRIS
Texto
TEAL
CDIGO DE COLORES
24
Cdigos hexadecimales de color

Estos cdigos de color se pueden utilizar como valor de atributo
en los elementos <FONT COLOR> y <BODY BGCOLOR
FGCOLOR TEXT LINK VLINK ALINK>. Algunos no funcionarn en
ciertos visualizadores.
La codificacin de estos colores est basada en mezclas
cromticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas
cantidades de los tres colores bsicos (rojo verde y azul), para
conseguir el color deseado. La cantidad de cada color est
definida por el cdigo que utilizamos, que tiene seis dgitos en
hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a
derecha, obtendremos la cantidad (en hexadecimal) de cada
color.
La sintaxis para cambiar el fondo de la pgina (background) a
color rojo es: <BODY BGCOLOR=#FF0000> .
Lista de cdigos RGB
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
25
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000 Aquamarine rgb=#70DB93
Bakers chocolate rgb=#5C3317
CONTROL DE COLORES
Este es un documento de ejemplo de control de color. El texto
es gris claro sobre negro, y los links son amarillos al principio,
azul-verde cuando son activados, y verdes despus de haber
sido utilizados.
Todo son atributos del elemento <BODY>.

Se escribe as:
<BODY BGCOLOR="#000000" FGCOLOR="#00FF00"
TEXT="#F0F0F0"
LINK="#FFFF00" VLINK="22AA22" ALINK="#0077FF">
5. LISTAS Y MENS.
26
<LI></LI>
Hay elementos que permiten crear texto con varios formatos de listado:
Estos pueden ser:
ORDENADOS <OL> (se refiere a numerados, no
ordenados por algn criterio),
DESORDENADOS <UL> (no numerados)
DIRECTORIOS <DIR>
MEN <MENU>
LISTADOS DE DEFINICIN <DL>.
La sintaxis bsica y apariencia de estos elementos permite
hacerse combinaciones muy complejas mediante anidamientos
de unos con otros, hasta conseguir prcticamente cualquier
presentacin deseada:
<OL><LI></LI></OL>
LISTA ORDENADA (NUMERADA):
Ejemplo:
Resultado
<OL>
<LI>Primera lnea
<LI>Segunda lnea
</OL>
1. Primera lnea
2. Segunda lnea
27
Los elementos <LI> no necesitan cierre. Terminan cuando

aparece otro igual o se cierra la lista. Puede ser conveniente
poner el cierre </LI> si se van a aplicar instrucciones de estilo.
LISTA ORDENADA CON LETRAS MAYSCULAS:

Ejemplo:
Resultado
<OL TYPE=A>
A.
Primera lnea
<LI>Primera lnea
B.
Segunda lnea
<LI>Segunda lnea
C.
Tercera lnea
<LI>Tercera lnea
D.
Cuarta lnea
<LI>Cuarta lnea
</OL>
LISTA ORDENADA CON LETRAS MINSCULAS:

Ejemplo:
Resultado
<OL TYPE=a>
<LI>Primera lnea
<LI>Segunda lnea
<LI>Tercera lnea
a.
b.
c.
28
Primera lnea
Segunda lnea
Tercera lnea
<LI>Cuarta lnea
</OL>
d.
Cuarta lnea
LISTA ORDENADA CON NUMERACIN ROMANA

EN MAYSCULAS:
Ejemplo:
Resultado
<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
I. Primera linea
II.Segunda linea
III.
Tercera linea
IV.
Cuarta lnea
LISTA ORDENADA CON NUMERACIN ROMANA

EN MINSCULAS:
Ejemplo:
Resultado
<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
i. Primera linea
ii. Segunda linea
iii.Tercera lnea
iv.Cuarta lnea
<UL><LI></LI></UL>
29
LISTA DESORDENADA ( NO NUMERADA):

Ejemplo:
<UL>
<LI>
Primera linea
<LI> Segunda lnea
Resultado
Primera linea
Segunda lnea
</UL>
En este caso los nmeros han sido sustituidos por unos puntos
gruesos. Esa es la apariencia por defecto; se puede cambiar
usando el atributo TYPE con tres valores (el valor por defecto es
DISC). Con el valor CIRCLE
Ejemplo:
Resultado
<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Primera linea
segunda lnea
Tambin con valor SQUARE.

Ejemplo:
Resultado
<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Primera linea
Segunda linea
30
Letras y numeracin romana tanto en maysculas como

minsculas.
Para esto se utiliza el atributo TYPE del elemento <OL> con los
siguientes valores: TYPE=1 (por defecto) para nmeros, TYPE=A
para letras maysculas, TYPE=a para letras minsculas, TYPE=I
para numeracin romana en maysculas y TYPE=i para
numeracin romana en minsculas.
Casos en los que la lista no comience por el nmero 1 (por
ejemplo si es una lista que continua en otra pgina). Se puede
conseguir con el atributo START combinado con TYPE.
El nmero que pones en el atributo START indica en que
nmero o letra comenzar la lista. la E es la quinta letra
LISTA ORDENADA CON LETRAS MAYSCULAS Y

QUE COMIENZA POR LA E:
Ejemplo:
Resultado
<OL TYPE=A START=5>

<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
E. Primera linea
F. Segunda linea
G.
Tercera linea
H.
Cuarta lnea
31
<DIR><LI>..</LI></DIR>
UN DIRECTORIO:
Ejemplo:
Resultado
Primera linea
Segunda lnea
<DIR>
<LI>Primera lnea
<LI>Segunda lnea
</DIR>
<MENU><LI>..</LI></MENU>
UN MEN.
Ejemplo:
Resultado
Primera linea
Segunda lnea
<MENU>
<LI>Primera lnea
<LI>Segunda lnea
</MENU>
La diferencia entre un men y una lista desordenada, es que las

lneas en la lista desordenada comienzan en el margen izquierdo
y las del men unas posiciones ms a la derecha (aunque eso
depende del visualizador, con Netscape se ven igual).
32
<DL><DT>..</DD></DL>
LISTA DE DEFINICIN:
Ejemplo:
Resultado
<DL>
<DT>Primera lnea
<DD>Segunda lnea
</DL>
Primera lnea
Segunda lnea
En lugar del elemento <LI> se utiliza <DT> y <DD>, y como

tipo <DL>. Estos tres nuevos elementos tambin se pueden usar
con cualquiera de los anteriores tipos de lista, alterando por
completo su apariencia.
33
6. TABLAS
<TABLE></TABLE>
El elemento bsico de definicin de tabla es:
En su interior se disponen los sub elementos:

<TR> para definir una fila (Row)
34
<TH> para definir una cabecera (Header)

<TD> para definir una celda de datos (Data).
Estos sub elementos tambin han de llevar sus correspondientes
cierres: </TR> </TH> </TD>.
Una cabecera <TH> es lo mismo que una celda de datos <TD>
pero de forma automtica el texto de su contenido recibe los
atributos de negrita y centrado. Slo es posible definirlas al
principio de las filas, de las columnas o de ambas a la vez:
Este es el significado de cada atributo:
BORDER
Indica el ancho de los bordes de la

tabla. Se mide en pxels. Si no se escribe
este atributo, es equivalente a
BORDER=0 (por defecto).
BORDERCOLOR
Establece el color de los bordes de la

tabla. No funciona igual en todos los
navegadores.
CELLSPACING
Indica el nmero de pxels que separan

una
celda
parecerlo,
de
no
otra.
hace
Aunque
lo
pueda
mismo
BORDER. Su valor por defecto es 2.
35
que
CELLPADDING
Indica los pxels de separacin entre el

borde de la celda y su contenido. Su
valor por defecto es 1.
WIDTH
Segn donde se escriba, sirve para

controlar el ancho de toda la tabla o de
sus columnas. Si se incluye en <TABLE>
puede indicar el tamao tanto en pxels
como en porcentaje respecto al ancho
de la pantalla.
ALIGN
Indica la alineacin horizontal de los

datos dentro de las celdas. Puede tener
tres valores: LEFT (izquierda), RIGHT
(derecha) y CENTER (centro).
VALIGN
Indica la alineacin vertical de los datos

dentro de las celdas. Puede tener tres
valores: TOP (arriba), BOTTOM (abajo) y
MIDDLE (centro).
ROWSPAN
Se utiliza en la definicin de una celda

(<TD>) o cabecera (<TH>) para indicar
que su anchura o altura son
equivalentes a un determinado nmero
de filas.
COLSPAN
Se utiliza en la definicin de una celda

(<TD>) o cabecera (<TH>) para indicar
36
que su anchura o altura son

equivalentes a un determinado nmero
de columnas.
NOWRAP
Para impedir que las lneas de texto

dentro de una celda se trunquen en los
espacios en blanco.
EVENTS
Se pueden capturar todos los eventos

tpicos de los navegadores en cualquiera
de las partes de una tabla. Para ello es
necesario JavaScript, y no es compatible
con todos los navegadores.
Ejemplo:
<TABLE BORDER
onMouseOver="javascript:alert('Aviso')">
... </TABLE>
Sintaxis
<table>
<tr>
<td>contenido celda 1</td>
<td>contenido celda 2</td>
</tr>
</table>
37
Ejemplo:
Resultado
<table border="1px">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
BORDES DE LAS TABLAS

Para que se visualicen los bordes de una tabla, debemos agregar
el atributo border junto con el valor expresado en pixels, de lo
contrario no se vern los bordes que dividen las celdas de la
tabla
38
Ejemplo:
Resultado
<tr>
<td>Borde</td>
<td>3 pixels</td>
</tr>
</table>
OTROS ATRIBUTOS DE LOS BORDES:

Algunos atributos permiten definir qu bordes o lneas de la
tabla se mostrarn:
Este atributo sirve para definir qu bordes del marco de la tabla
sern visibles: <TABLE FRAME="valor"> ... </TABLE>
EL valor puede ser:
void
Ningn lado (por defecto).
above
Slo el borde superior
below
Slo el borde inferior.
hsides
Slo los bordes superior e inferior.
vsides
Slo los lados derecho e izquierdo.
lhs
Slo el lado izquierdo.
39
rhs
Slo el lado derecho.
box
Los cuatro lados.
border
Los cuatro lados (no es lo mismo que el ya

conocido)
VISIBILIDAD DE BORDES:
Este atributo define qu bordes de la tabla sern visibles:
<TABLE RULES="valor"> ... </TABLE>
El valor puede ser:

none
Ninguna lnea de divisin (por defecto).
groups
Slo aparecen lneas de divisin entre grupos

de filas y grupos de columnas
cols
Slo aparecern lneas de divisin entre filas.
rows
Slo aparece lneas de divisin entre

columnas.
Ejemplo tabla sin
Resultado
bordes::
<table>
<tr>
<td>Esta tabla es</td>
<td>Sin bordes</td>
</tr>
</table>
Esta tabla es
40
Sin bordes
ENCABEZADOS DE LAS TABLAS

Los encabezados de una tabla se definen con la etiqueta <th>
Ejemplo:
Resultado
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
<tr>
<td>Juan</td>
<td>Perez</td>
</tr>
</table>
ESPACIADO ENTRE CELDAS

Es el espacio que se encuentra entre celda y celda. El mismo
est definido con el atributo cellspacing
Ejemplo:
Resultado
<table border="1px"
cellspacing="15px">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
41
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
7. DIVS
<DIVS></DIVS>
La etiqueta <div> se utiliza para definir una seccin dentro del

documento. Esta etiqueta se usa comnmente para agrupar
un bloque de elementos, para luego aadirle un estilo
42
determinado.
Ejemplo:
Resultado
<div style="color:red">
<h3>Grupo 1</h3>
<p>Este bloque tiene definido el
texto de color rojo.</p>
</div>
<div style="color:green">
<h3>Grupo 2</h3>
<p>Este bloque tiene definido el
texto de color verde.</p>
</div>
Grupo 1
Este bloque tiene definido el

texto de color rojo.
Grupo 2
Este bloque tiene definido el
texto de color verde.
43
8. CONTENIDO ADICIONAL
8.1. ENLACES
<a></a>
Los enlaces o links(en Ingls) nos permiten conectarnos con
otros documentos:
una imagen
un video
un archivo de sonido
sitios en la web(otra pgina web)
mandar un email
Para ello debemos usar la etiqueta <a> que proviene de la
primera letra de la palabra anchor(ancla). La etiqueta <a>
tiene como cierre </a>.
<a atributo="valor">Texto del enlace</a>
Ejemplo:
Resultado
<body>
<a href="/http://www.pagina
web.com/">Descripcin de la
Descripcin de la web
44
web</a>
</body>
ENLACE A UN EMAIL
Se utiliza en caso que queramos que un enlace mande un
email. En el momento que presionamos dicho link se abrir
automticamente el programa de email que tenemos definido por
defecto.
Ejemplo:
Resultado
<body>
<a href="/mailto:
nombre@gmail.com">Mandar Mandar mail
email</a>
</body>
UN ENLACE A PARTIR DE UNA IMAGEN

Muchas veces queremos usar una imagen como enlace a otro
documento. Para ello debemos colocar la etiqueta <img> entre las
etiquetas <a> y </a> en lugar del texto.
45
Ejemplo:
Resultado
<body>
<a
href="http://www.google.com/"><img
src="/../graficos/google.gif"></a>
</body>
8,2. IMGENES
<IMG>
Para insertar imgenes en un sitio usaremos la etiqueta
<img>. Esta etiqueta debe ir acompaada del atributo src
que es el que contiene el URL de la ubicacin del archivo de la
imagen. El atributo alt se utiliza para dar una breve
descripcin de la imagen, la cual podremos observar en caso que
el navegador del usuario, por alguna razn, no muestre la
misma.
La etiqueta <img> no tiene cierre.
Ejemplo:
Resultado
<img
src="/../imagenes/foto1.jpg"
alt="nombre de la foto">
FOTO
Las imgenes utilizadas pueden estar en formato
46
BMP (Bit Mapped Picture),

GIF (Graphics Interchange Format),
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics).
BMP Estos grficos soportan hasta 24 bits (16 millones de colores).
Al aumentar su tamao escalndolos, pierden calidad, es decir, se
"pixelean". No acepta transparencia. Es el de mayor peso de
archivo, debido a que no usa ninguna compresin.
GIF Solamente soporta 256 colores, por lo que no es adecuado
para representar fotografas, pero s es recomendado para iconos,
logotipos o imgenes que tengan colores slidos. Al aumentar su
tamao escalndolos, pierden calidad, es decir, se "pixelean". El
archivo resultante es de poco peso por su algoritmo de
compresin sin prdidas. Acepta transparencia (canal alfa)
nicamente en uno de los 256 colores de la paleta. Soporta
animaciones.
PNG Es un formato pensado como una versin mejorada del
formato GIF. En este caso, una misma imagen, sin prdidas,
ocupara menos espacio que en formato GIF (>10%). Soporta color
verdadero (hasta 64 bits con canal alfa). Las imgenes en PNG
permiten transparencia variable de hasta 256 niveles. El canal alfa
47
de PNG permite utilizar una mayor profundidad de bits para lograr

efectos de semi-transparencia, como los objetos translcidos. No
soporta animaciones.
JPEG (ms conocido como JPG) soporta hasta 16 millones de
colores (24 bits) y comprime el tamao del archivo final
utilizando un algoritmo de compresin con prdida. Es decir,
que al convertir una imagen a este formato, una parte de la
informacin es desechada Los editores de grficos permiten
ajustar la cantidad de informacin original que se quiere perder.
Es decir, que si se opta por la mxima compresin para obtener
el menor peso posible, la imagen final puede ser muy deficiente.
No permite transparencias ni animacin.
8.3. FORMULARIOS
<FORM></FORM>
La etiqueta <form> se utiliza para definir un formulario. El

atributo action es obligatorio y nos indica el documento que
procesar los datos del formulario enviado. Tambin contamos
con el atributo method que nos define el mtodo por el cual se
enviarn los datos del usuario al servidor.
48
<form action="URL" method="valor">

...
</form>
La etiqueta input
Nos define el registro donde el usuario puede ingresar los
datos. Los usuarios interaccionan con los formularios a travs de
las llamados controles.
Tipos de controles:
Botones (buttons)
Casillas de verificacin (checkboxes)
Radiobotones (radio buttons)
Menes (menus)
Entrada de texto (text input)
Seleccin de ficheros (file select)
Controles ocultos (hidden controls)
Controles tipo objeto (object controls)
El atributo type especifica el tipo de control a crear.
49
</form>
<input type="control" atributo="valor">
</form>
Ejemplos:
Control de texto
Crea un control que nos permite ingresar un texto en una lnea.
Ejemplo:
Resultado
<form
action="datos.php"
method="get">
Nombre: <input
type="text"
name="nombre">
Apellido: <input
type="text"
name="apellido">
</form>
El control radio
Elegir una sola opcin de entre una serie de posibilidades
Ejemplo:
Resultado
50
<form action="edades.asp"
method="post">
Edad?
<input type="radio"
name="edad"
value="menor">menor de
17
<input type="radio"
name="edad"
value="adulto">entre 18 y
60
<input type="radio"
name="edad"
value="mayor">mayor de
61
El control "submit" y el control "reset"

El control submit es el botn de envo de datos del formulario y
el control reset es el botn de reinicializacin. Al ser pulsado
reinicializa todos los controles a sus valores iniciales
Ejemplo:
Resultado
<form
action="datos_personales.ph
p" method="post">
Nombre: <input type="text"
name="nombre">
Contrasea: <input
type="password"
name="secreto">
<input type="submit"
value="Enviar">
<input type="reset"
value="Borrar">
</form>name="edad"
value="mayor">mayor de
51
61
El control "file"
Para enviar archivos a travs de un formulario.
Ejemplo:
Resultado
<form action="archivo.php"
method="post">
Ingrese la foto: <input
type="file" name="foto">
</form>
Las etiquetas select y option

La etiqueta <select> es usada para crear un men
desplegable. Cada opcin ofrecida por el men se representa
con la etiqueta <option>
Ejemplo:
Resultado
<form
action="continentes.php"
method="get">
<select
name="continente">
<option
value="america">Amrica</
option>
<option
52
value="asia">Asia</option>
<option
value="europa">Europa</o
ption>
<option
value="oceania">Oceana</
option>
<option
value="africa">Africa</optio
n>
</select>
</form>
La etiqueta de insertar texto

Insertar texto multilnea. Los atributo rows y cols nos indican la
cantidad de filas y columnas que tendr el recuadro del rea de
texto.
Ejemplo:
Resultado
<form action="texto.php"
method="post">
<textarea name="eltexto"
rows="5" cols="30">
Aqu podemos ingresar un
texto introductorio si lo
deseamos.
</textarea>
</form>
8.4. CDIGO DE CARACTERES.

Caracter
!
Cdigo
!
Descripcin
Cerrar exclamacin
53
Alias
--
"
#
$
%
&
'
(
)
*
+
,
.
/
0-9
:
;
<
<
=
>
>
?
@
A-Z
"
#
$
%
‰
&
'
(
)
*
+
,
-
.
/
0 9
:
;
<
<
=
>
>
?
@
A Z
[
\
Dobles comillas
Signo de nmero
Dlar
Tanto por ciento
Tanto por mil
Ampersand
Apstrofe
Cerrar parntesis
Abrir parntesis
Asterisco
Signo ms
Coma
Guin
Punto
Barra de divisin
-----amp
----------
Dgitos del al 0-9
--
Dos puntos
Punto y coma
Menor
Menor
Igual
Mayor
Mayor
Cerrar interrogacin
Arroba
---lt
--gt
---
Letras A-Z
--
Cerrar corchete
(izquierdo)
Barra inversa
54
---
]
^
_
`
]
^
_
`
a z
{
|
}
~

¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬

®
¯
°
Abrir llave
Barra vertical
Cerrar llave
Tilde
Espacio sin separacin
Abrir exclamacin
Centavo
Libra Esterlina
Signo de divisa general
Yen
Barra vertical partida
(pipe)
Seccin
Diresis
Copyright
Doa
Abrir comillas francesas
No (smbolo lgico)
Guin dbil
Registrado
Macrn
Grados
±
Ms-menos
²
Dos superndice
a-z
{
|
}
~
55
Abrir corchete
Circunflejo
Subrayado
Acento agudo
-----
Letras a-z
-----nbsp
iexcl
cent
pound
curren
yen
brvbar
sect
uml
copy
ordf
laquo
not
shy
reg
macr
deg
plusm
n
sup2
³
´
µ
¶
Tres superndice
Acento agudo
Micro
Fin de prrafo
·
Punto medio
¸
¹
º
»
¼
½
¾
⅛
⅜
⅝
⅞
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
Cedilla
Uno superndice
Gnero masculino
Cerrar comillas
francesas
Un cuarto
Un medio
Tres cuartos
Un octavo
Tres octavos
Cinco octavos
Siete octavos
Abrir interrogacin
A mayscula, acento
grave
A mayscula, acento
agudo
A mayscula, acento
circunflejo
A mayscula, tilde
A mayscula, diresis
A mayscula, anillo
AE mayscula
C cedilla mayscula
E mayscula, acento
56
sup3
acute
micro
para
middo
t
cedil
sup1
ordm
raquo
frac14
frac12
frac34
----iquest
Agrav
e
Aacut
e
Acirc
Atilde
Auml
Aring
AElig
Ccedil
Egrav
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
grave
E mayscula, acento
agudo
E mayscula, acento
circunflejo
E mayscula, diresis
I mayscula, acento
grave
I mayscula, acento
agudo
I mayscula, acento
circunflejo
I mayscula, diresis
Eth mayscula
Ee mayscula
O mayscula, acento
grave
O mayscula, acento
agudo
O mayscula, acento
circunflejo
O mayscula, tilde
O mayscula, diresis
Signo de multiplicacin
Ø
O barrada mayscula
Ù
Ú
Û
U mayscula, acento
grave
U mayscula, acento
agudo
U mayscula, acento
circunflejo
57
e
Eacut
e
Ecirc
Euml
Igrave
Iacute
Icirc
Iuml
ETH
Ntilde
Ograv
e
Oacut
e
Ocirc
Otilde
Ouml
times
Oslas
h
Ugrav
e
Uacut
e
Ucirc
Ü
U mayscula, diresis
Y mayscula, acento
agudo
Ý
Þ
THORN mayscula
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
Beta minscula
a minscula, acento
grave
a minscula, acento
agudo
a minscula, acento
circunflejo
a minscula, tilde
a minscula, diresis
a minscula, anillo
ae mnuscula
c cedilla minscula
e minscula, acento
grave
e minscula, acento
agudo
e minscula, acento
circunflejo
e minscula, diresis
i minscula, acento
grave
i minscula, acento
agudo
i minscula, acento
circunflejo
i minscula, diresis
eth minscula
58
Uuml
Yacut
e
THOR
N
szlig
agrav
e
aacut
e
acirc
atilde
auml
aring
aelig
ccedil
egrav
e
eacut
e
ecirc
euml
igrave
iacute
icirc
iuml
eth
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
&#8364
≠
≤
≥
√
Ω
↑
↓
←
ee minscula
o minscula, acento
grave
o minscula, acento
agudo
o minscula, acento
circunflejo
o minscula, tilde
o minscula, diresis
Signo de divisin
o barrada minscula
u minscula, acento
grave
u minscula, acento
agudo
u minscula, acento
circunflejo
u minscula, diresis
y minscula, acento
agudo
thorn minscula
y minscula, diresis
Euro
Distinto de
Menor o igual que
Mayor o igual que
Radical
Omega
Flecha arriba
Flecha abajo
Flecha izquierda
59
ntilde
ograv
e
oacut
e
ocirc
otilde
ouml
divide
oslash
ugrav
e
uacut
e
ucirc
uuml
yacut
e
thorn
yuml
euro
ne
le
ge
radic
-uarr
darr
larr
→
↔
№
▲
►
▼
◄
■
□
▪
▫
●
○
◊
Flecha derecha
Flecha izq-der
N
Flecha ar
Flecha de
Flecha ab
Flecha iz
Cuadrado lleno
Cuadrdo vacio
Mini cuadrado lleno
Mini cuadrado vacio
Punto lleno
Punto vacio
Rombo vacio
9. BIBLIOGRAFA
60
rarr
harr
-----------loz
jac. (2005) Gua para escribir documentos HTML,

Versin 1.8.20 [En lnea] Disponible en
http://www.uv.es/jac/guia/ [Acceso el 16/10/2014]
Solomiak, M. (2012) HTML Bsico [En lnea]
Disponible en http://www.virtualnauta.com/htmltutorial [Acceso el 16/10/2014]
Ferrer, J. Et Al. (1998) Curso completo de HTML [En

lnea] Disponible en http://es.tldp.org/ManualesLuCAS/doc-curso-html/doc-curso-html.pdf [Acceso el
16/10/2014]
61

Manual HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual HTML

Uploaded by

Copyright:

Available Formats

1

HTML(HyperText Markup Language) o "Lenguaje para Marcado

2. ESTRUCTURA DEL LENGUAJE DE

Lo primero que debemos indicar es que el texto que estamos

2.1. Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un

<HEAD> <TITLE> Head de un documento </TITLE></HEAD>

En este caso dentro de la cabecera hay otra etiqueta. Es la nica

2.2. Cuerpo (BODY) de un documento

La lnea horizontal carece de etiqueta de cierre, como ya hemos

Las etiquetas o elementos (en ingls: tags) son marcas insertadas

El elemento HTML comienza con la etiqueta de apertura

Los elementos vacos se escriben como los llenos, pero no es

Elementos con argumento

El elemento <A> sirve para hacer un link con otro documento o

El texto al que afecta este elemento es Link de prueba y realiza

www.miservidor.es en maysculas, eso es un nombre de

Los elementos pueden anidarse unos con otros, teniendo

El elemento <H1> combinado con <I> sirve para generar texto

Texto de prueba (H1)

Este tipo de elemento se suele utilizar para escribir

<H3 align=center> Texto en H3 </H3>

CAMBIO DE TAMAO SIN SALTO DE PARRAFO.

CAMBIO DE TAMAO A TODA LA PGINA.

Los tamaos puede ser positivo (+) o negativo (-) respecto al

Texto de prueba 12345 con tipo ARIAL Texto de prueba

Texto de prueba 12345 con tipo

tipo, utilizar el siguiente, y si tampoco lo tiene el prximo, etc.

Texto de prueba 12345 con tipos

Como puedes ver, se ha declarado como primer tipo de letra el

FORMATOS DEL TEXTO

Texto normal Texto subrayado

ETIQUETAS DE CITACIONES Y DEFINICIONES

Indica una forma abreviada (p.ej., WWW,

Indica un acrnimo (p.ej., WAC ,radar,

Define la informacin sobre el autor

Define la direccin del texto (p.ej., de izq. a

Designa una cita larga

Designa una cita corta

Contiene una cita o una referencia a otras

Indica que aqu es donde se define el

<B><FONT COLOR="red">Texto ROJO </FONT>

Cdigos hexadecimales de color

Todo son atributos del elemento <BODY>.

Los elementos <LI> no necesitan cierre. Terminan cuando

LISTA ORDENADA CON LETRAS MAYSCULAS:

LISTA ORDENADA CON LETRAS MINSCULAS:

LISTA ORDENADA CON NUMERACIN ROMANA

LISTA ORDENADA CON NUMERACIN ROMANA

LISTA DESORDENADA ( NO NUMERADA):

<LI> Segunda lnea

Tambin con valor SQUARE.

Letras y numeracin romana tanto en maysculas como

LISTA ORDENADA CON LETRAS MAYSCULAS Y

<OL TYPE=A START=5>

La diferencia entre un men y una lista desordenada, es que las

En lugar del elemento <LI> se utiliza <DT> y <DD>, y como

En su interior se disponen los sub elementos:

<TH> para definir una cabecera (Header)

Indica el ancho de los bordes de la

Establece el color de los bordes de la

Indica el nmero de pxels que separan

BORDER. Su valor por defecto es 2.