Manual de HTML

Manual de HTML
MANUAL DE HTML
1) El LENGUAJE HTML.
HTML es un lenguaje que se utiliza para la creacin de pginas en la WWW. Por pgina
entenderemos el documento que aparece en el visualizador.
HTML se compone de una serie de comandos, que son interpretados por el
visualizador, o programa que utilizamos para navegar por el WWW. En ltima instancia
es el visualizador el que ejecuta todas las rdenes contenidas en el cdigo HTML, de
forma que un visualizador puede estar capacitado para unas prestaciones, pero no
para otras. As, podremos especificar que una pgina tenga una imagen de fondo, o un
texto parpadeando, pero si nuestro visualizador no est capacitado para esas
funciones, no podremos verlas.
En esta gua se expondrn los comandos fundamentales de HTML.
2) Cabecera del documento

La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la
cabecera es importante definir el ttulo de la pgina por medio de la directiva
<TITLE></TITLE>. El ttulo debe guardar relacin con el contenido del documento y
definirlo de forma general, su tamao no est limitado aunque se recomienda que no
sea excesivamente extenso. Dentro de esta etiqueta no se podr usar ninguna de las
restantes etiquetas HTML y no aparecera en ninguna parte de la pgina sino en la
barra del visor de pginas Web.
Ejemplo:
<TITLE>nombre de la pgina </TITLE>
Se pueden incluir otras instrucciones adicionales:
METADATOS:<META>Informacin de la informacin; indica documentos con refresco
automtico. Se indicar un documento que debe sustituir al actual en un determinado
nmero de segundos.
Esta directiva lleva generalmente los parmetros name y content.
Ejemplos:
<META name = "Autor" content ="nombre del autor" > Indica al navegador el nombre
del autor de la pagina.
<META name = "Manual de HTML "content = " contenido del manual ">Indica al visor
el nombre de la pgina y sus contenidos principales.
Profesor: Samuel Molina Javier
Pgina 1
Manual de HTML
<META name = "keywords"content = "Manual de Html, MANUAL DE HTML,manual de
html">Indica al visor las palabras clave para los buscadores de Internet.
3) Cuerpo del documento

<BODY></BODY>
Indica el inicio y final de nuestra pgina Web. Ser entre el inicio y el final de esta
directiva en el se incluirn todas las instrucciones HTML y el texto que forma el
documento, a continuacin los parmetros que se pueden utilizar:
background= "nombre de fichero grfico" o "URL"
Indica el nombre de un fichero grfico que servir como "fondo" de nuestra
pgina. Si la imagen no rellena todo el fondo del documento, esta sera
reproducida tantas veces como sea necesario.
bgcolor = "cdigo o nombre del color"
Indica un color para el fondo de nuestro documento. Solo se utilizar si no se
ha definido una imagen de fondo, caso contrario ser igonorada..
text = "cdigo o nombre del color"
Indica un color para el texto que incluyamos en nuestro documento. Por
defecto ser negro.
link = "cdigo de color"
Indica el color de los textos que dan acceso a un Hiperenlace y no han sido
utilizados. Por defecto es azul.
vlink = "cdigo de color"
Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos
visitado . Por defecto es azul ms oscuro.
Ejemplos :
#000000
#FF000
#00FF0
#0000FF
#FFFFFF
Negro
Rojo
Verde
Azul
Blanc
El primer par de cifras indican la proporcin de color Rojo, el segundo par de cifras la
proporcin de color Verde y las dos ltimas la proporcin de color Azul. Cada par de
cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones
de cada color primario obtendremos diferentes colores.
Pgina 2
Manual de HTML
4) Caracteres del Documento

Se han definido dos formas de representar caracteres especiales usando solamente el
cdigo ASCII de 7 bits. Los caracteres acentuados y algunos caracteres especiales que
usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento
de manera normal, se deben utilizar una serie de secuencias de escape que al mostrar
el documento se sustituyen por el carcter deseado
A continuacin veamos una tabla con las principales entidades:
Caracter Cdigo Entidad Caracter Cdigo Entidad
!
!
--
"
"
--
#
--
$
--
%
--
&
&
--
'
'
--
(
--
)
--
*
--
+
--
,
--
-
--
.
--
/
--
:
--
;
--
<
<
--
=
--
>
>
--
?
--
@
--
[
--
\
--
]
--
^
--
_
--
`
--
{ --
| --
} --
~ --
nbsp
¡ iexcl
¢ cent
£ pound
¤ curren
¥ yen
¦ brvbar
§ sect
¨ uml
© copy
ª ordf
« laquo
¬ not
® reg
¯ macr
° deg
± plusmn
shy
Pgina 3
Manual de HTML
² sup2
³ sup3
´ acute
µ micro
¶ para
· middot
¸ cedil
¹ sup1
º ordm
» raquo
¼ frac14
½ frac12
¾ frac34
¿ iquest
À Agrave
Á Aacute
Â Acirc
Ã Atilde
Ä Auml
Å Aring
Æ AElig
Ç Ccedil
È Egrave
É Eacute
Ê Ecirc
Ë Euml
Ì Igrave
Í Iacute
Î Icirc
Ï Iuml
Ð ETH
Ñ Ntilde
Ò Ograve
Ó Oacute
Ô Ocirc
Õ Otilde
Ö Ouml
× times
Ø Oslash
Ù Ugrave
Ú Uacute
Û Ucirc
Ü Uuml
Ý Yacute
Þ THORN
ß szlig
à agrave
á aacute
â acirc
ã atilde
ä auml
å aring
æ aelig
ç ccedil
è egrave
é eacute
ê ecirc
ë euml
ì igrave
í iacute
î icirc
ï iuml
ð eth
ñ ntilde
ò ograve
ó oacute
Pgina 4
Manual de HTML
ô ocirc
õ otilde
ö ouml
÷ divide
ø oslash
ù ugrave
ú uacute
û ucirc
ü uuml
ý yacute
þ thorn
ÿ yuml
Por lo tanto la palabra computacin se escribira de la siguiente forma::

Computacin
Computación
Computaciõn
5) COLORES HTML
Los que estn en negrita se pueden escribir en lugar de los cdigos.
Nombre del color Cdigo del color Apariencia
White
Red
Green
Blue
Magenta
Cyan
Yellow
Black
Aqua
Baker's Chocolate
Blue Violet
Brass
Bright Gold
Brown
Bronze
Bronze II
Cadet Blue
Cool Copper
Copper
Coral
Corn Flower Blue
Dark Brown
Dark Green
Dark Green Copper
Dark Olive Green
Dark Orchid
#FFFFFF
#FF0000
#00FF00
#0000FF
#FF00FF
#00FFFF
#FFFF00
#000000
#70DB93
#5C3317
#9F5F9F
#B5A642
#D9D919
#A62A2A
#8C7853
#A67D3D
#5F9F9F
#D98719
#B87333
#FF7F00
#42426F
#5C4033
#2F4F2F
#4A766E
#4F4F2F
#9932CD
Pgina 5
Manual de HTML
#871F78
Dark Purple
#6B238E
Dark Slate Blue
#2F4F4F
Dark Slate Grey
#97694F
Dark Tan
Dark Turquoise
#7093DB
#855E42
Dark Wood
#545454
Dim Grey
#856363
Dusty Rose
Feldspar
#D19275
#8E2323
Firebrick
#238E23
Forest Green
#CD7F32
Gold
Goldenrod
#DBDB70
#C0C0C0
Gray
#527F76
Green Copper
#93DB70
Green Yellow
Hunter Green
#215E21
#4E2F2F
Indian Red
#9F9F5F
Khaki
#C0D9D9
Light Blue
#A8A8A8
Light Grey
#8F8FBD
Light Steel Blue
#E9C2A6
Light Wood
#32CD32
Lime
#E47833
Mandarian Orange
#8E236B
Maroon
Medium Aquamarine #32CD99
#3232CD
Medium Blue
Medium Forest Green #6B8E23
Medium Goldenrod
#EAEAAE
#9370DB
Medium Orchid
#426F42
Medium Sea Green
#7F00FF
Medium Slate Blue
Medium Spring Green #7FFF00
#70DBDB
Medium Turquoise
#DB7093
Medium Violet Red
#A68064
Medium Wood
Midnight Blue
#2F2F4F
#23238E
Navy
#4D4DFF
Neon Blue
#FF6EC7
Neon Pink
New Midnight Blue
#00009C
#EBC79E
New Tan
#CFB53B
Old Gold
#FF7F00
Orange
#FF2400
Orange Red
#DB70DB
Orchid
#8FBC8F
Pale Green
Pgina 6
Manual de HTML
Pink
Plum
Quartz
Rich Blue
Salmon
Scarlet
Sea Green
Semi-Sweet
Chocolate
Sienna
Silver
Sky Blue
Slate Blue
Spicy Pink
Spring Green
Steel Blue
Summer Sky
Tan
Thistle
Turquoise
Very Dark Brown
Very Light Grey
Violet
Violet Red
Wheat
Yellow Green
#BC8F8F
#EAADEA
#D9D9F3
#5959AB
#6F4242
#8C1717
#238E68
#6B4226
#8E6B23
#E6E8FA
#3299CC
#007FFF
#FF1CAE
#00FF7F
#236B8E
#38B0DE
#DB9370
#D8BFD8
#ADEAEA
#5C4033
#CDCDCD
#4F2F4F
#CC3299
#D8D8BF
#99CC32
6) Espacios y Saltos de Lnea

En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios
sern ignorados por el visor (espacios, tabuladores, saltos de lnea) .
Si escribimos en el cdigo de esta manera:
Solo
se
acepta
un
espacio
Quedar as:
Solo se acepta un espacio
Para texto preformateado se usa la directiva <PRE></PRE>, obliga al visor a visualizar
el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de
carro, etc...
Pgina 7
Manual de HTML
Ejemplo
<PRE>
Este texto
ha sido
preformateado .
Visualizacin
Este texto
ha sido
preformateado .
</PRE>
Para indicar un salto de linea se utiliza la directiva <BR> y para un cambio de prrafo
(dejar una lnea en blanco en medio) se utiliza la directiva <P>.
Ejemplo
Visualizacin
Este texto tiene<BR>saltos de linea y <P> de prrafo.
Este texto tiene

saltos de linea y
de prrafo.
Para cambio de prrafo se usa la directiva <P> puede usarse tambin como directiva
"cerrada" <P></P> indicando de esta manera los atributos de un prrafo en concreto.
Cuando se usa de esta manera tiene el parmetro align que indica al visor la forma de
"justificar" el prrafo. Los valores posibles de este parmetro son LEFT, RIGHT y
CENTER, estando aun en estudio el valor JUSTIFY.
Ejemplo
<P Align=right>Pgina Web del Manual de
HTML/2004.</P>
<P Align=center>Pgina Web del Manual de
HTML/2004.</P>
Visualizacin
Pgina Web del Manual de
HTML/2004.
Pgina Web del Manual de
HTML/2004.
La directiva <HR> muestra una lnea horizontal de tamao determinable. Tiene los
siguientes parmetros opcionales:
align = posicin
Alinea a la izquierda (left), a la derecha (right) o la centra (center).
Pgina 8
Manual de HTML
size = nmero
Indica el grosor de la lnea en pixels.
width = num / %
Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la
ventana del visor. Tambin se puede especificar un nmero que indicara el
ancho de la lnea en pixels.
Para una regla horinzontal usamos la directiva <HR>, sin ningn parmetro mostrara
una lnea horizontal que ocupara todo el ancho de la pgina.
7) Atributos de Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos 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 tamao.
Ejemplo
Visualizacin
<H1>Manual HTML</H1> Manual HTML

Pgina 9
Manual de HTML
Los textos marcados como "cabeceras" provocan automticamente un retorno de
carro sin necesidad de incluir la directiva <BR>. Por ejemplo
Ejemplo
Visualizacin
<H3>Pgina Web</H3>Esta es una pgina de prueba. Pgina Web

Esta es una pgina de prueba
8) Atributos del Texto

Para indicar atributos del texto (negrilla, subrayado, cursiva, etc.) indicaremos el
siguiente cuadro:
Atributo
Directiva
Ejemplo
Resultado
Negrita
<B></B>
<B>Texto de prueba</B>
Texto de
prueba
Cursiva
<I></I>
<I>Texto de prueba</I>
Texto de
prueba
Teletype
<TT></TT>
<TT>Texto de prueba</TT>
Texto de
prueba
Subrayado <U></U>
<U>Texto de prueba</U>
Texto de
prueba
Tachado
<S>Texto de prueba</S>
Texto de
prueba
<S></S>
Superindice <SUP></SUP>
<SUP>Texto de prueba</SUP>
Subindice
<SUB></SUB>
<SUB>Texto de prueba</SUB>
Centrado
<CENTER></CENTER>
<CENTER>Texto de
prueba</CENTER>
Texto de prueba
Texto de prueba
Texto de
prueba
Por otro lado la directiva <FONT></FONT> nos permite variar el tamao, el color, y el
tipo de letra de un texto determinado. Utiliza para ello los parmetros size, bgcolor y
face.
size = valor
Da al texto un tamao en puntos determinado.
bgcolor = "cdigo de color"
Escribe el texto en el color cuyo cdigo se especifica.
face = "nombre de font"
Pgina 10
Manual de HTML
Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en
el ordenador que "lee" la pgina se usar el font predeterminado del
navegador.
Se vera
como
Ejemplo
<FONT size = +2 color = "#00FF00face = "Arial"> Manual HTML
</FONT>
Manual HTML
9) Listas
Existen tres tipos de listas, a continuacin se especificarn dos:
Numeradas: representarn los elementos de la lista numerando cada uno de ellos
segn 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 parmetros:
start = num
El punto de comienzo siempre ser el 1 si no se indica en START con otro valor
de comienzo y el tipo de numeracin puede seleccionarse con el atributo TYPE .
Sus posibles valores son:
A : Letras maysculas.
a : Letras minsculas.
I : Nmeros romanos en maysculas.
i : Nmeros romanos en minsculas.
0 : Nmeros (es por defecto por tanto no hay que indicarlo).
type = tipo
Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una
lista ordenada numricamente.
Los tipos posibles son:
1 = Numricamente. (1,2,3,4,... etc.)
a = Letras minsculas. (a,b,c,d,... etc.)
A = Letras maysculas. (A,B,C,D,... etc.)
i = Numeros romanos en minsculas. (i.ii,iii,iv,v,... etc.)
I = Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.)
Pgina 11
Manual de HTML
Ejemplo
<OL>
<LI>Coello
<LI>Dvila
<LI>Izquierdo
<LI>Zamora
</OL>
<OL type = A >
<LI>Coello
<LI>Dvila
<LI>Izquierdo
<LI>Zamora
</OL>
Resultado
1.
2.
3.
4.
Coello
Dvila
Izquierdo
Zamora
A.
B.
C.
D.
Coello
Dvila
Izquierdo
Zamora
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
parmetro 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 crculo o un cuadrado.
Ejemplo
Resultado
<UL type = disk >

<LI>Coello
<LI>Dvila
<LI>Izquierdo
<LI>Zamora
</UL>
<UL type = square>
<LI>Coello
<LI>Dvila
<LI>Izquierdo
<LI>Zamora
</UL>
Coello
Dvila
Izquierdo
Zamora
Coello
Dvila
Izquierdo
Zamora
Pgina 12
Manual de HTML
10) Imgenes
La etiqueta encargada de mostrar imgenes en HTML es IMG. Se pueden utilizar dos
formatos GIF y JPG. Cualquier otro formato no ser mostrado por el visor, a no ser que
disponga de un programa externo que permita su visualizacin.
La directiva <IMG> tiene varios parmetros :
src = "imagen"
Indica el nombre del fichero grfico a mostrar.
alt = "Texto"
Indicar un texto alternativo a mostrar si no fue posible mostrar la imagen. Se
recomienda cuando existan en el documento imgenes usadas como botones.
align = TOP / MIDDLE / BOTTOM
Indica como se alinear el texto que siga a la imagen con respecto a esta. tiene
las siguientes funciones:
TOP alinea el texto con la parte superior de la imagen
MIDDLE alinea el texto con la parte central
BOTTOM alinea el texto con la parte inferior
border = tamao
Indica el tamao del borde de la imagen, A toda imagen se le asigna un borde
que ser visible cuando la imagen forme parte de un Hiperenlace,el borde de
esta ser del color apropiado para indicarlo, caso contrario ser invisible.
height = tamao
Determina el alto de la imagen a mostrar en puntos o en porcentaje. Se usa
para variar el tamao de la imagen original.
width = tamao
Indica el ancho al que se mostrar la imagen en puntos o en porcentaje. Se usa
para variar el tamao de la imagen original.
hspace = margen
Indica el espaciado horizontal que debe separar a la imagen del texto o
cualquier otro elemento circundante en puntos.
vspace = margen
Indica el nmero de puntos verticales que separaran la imagen del texto que le
siga y la anteceda.
Pgina 13
Manual de HTML
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.
A continuacin ejemplos del cambio de tamao de una imagen:
Ejemplo
Visualizacin
<IMG src="DUCKY.GIF"
width=100 >
<IMG src="DUCKY.GIF"
height=20 >
11)
IMAGENES Y MAPAS SENSITIVOS
Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en funcin de la

"zona" de la imagen que se pulse. Las directivas para crear mapas son <MAP></MAP>
y <AREA>
<MAP> identifica al mapa y tiene el parmetro name para indicar el nombre del mapa.
<AREA> define las reas sensibles de la imagen.Tiene los siguientes tipos:
rect
rea rectangular. Se deben especificar las coordenadas de la esquina superior
izquierda y las de la esquina inferior derecha. Ejemplo:
<area shape="rect" coords="66,63,105,89" href="rectangulo.htm">
poly
Polgono. Se deben especificar las coordenadas de todos los vrtices del polgono,
pueden ser tantas como se desee. El visor se encarga de "cerrar" la figura. Ejemplo:
<area shape="poly" coords="42,20,64,33,85,16,108,41,108,65,74,92,37,78,24,43"
href="poligono.htm">
circle
Circulo. Se debe especificar en primer lugar las coordenadas del centro del crculo y a
continuacin el valor del radio (en puntos). Ejemplo:
<area shape="circle" coords="49,48,25" href="circulo.htm">
Pgina 14
Manual de HTML
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen
es tratada por un mapa. Para ello escribiramos la siguiente directiva :
<IMG src = "grafico.gif" usemap = "#casa">
El rea tambin tiene los siguientes parmetros obligatorios:
shape = "tipo"
Indica el tipo de rea a definir.
coords = "coordenadas"
Indica las coordenadas de la figura indicada con shape.
href = "URL"
Indica la direccin a la que se accede si se pulsa en la zona delimitada por el rea
indicada.
12) Links
La caracterstica principal de una pgina Web es que podemos incluir Links; es la
utilidad bsica del hipertexto, permite indicar zonas de texto o imgenes que si son
seleccionados por el lector del documento nos traslada a otros documentos HTML o
otras zonas del documento actual.
Para incluirlos se utiliza la directiva <A></A>. El texto o imagen que se encuentre
dentro de los lmites de esta directiva ser sensible, esto quiere decir que si pulsamos
con el raton sobre el, se realizar la funcin de hiperenlace indicada por la instruccin
<A></A>.
El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul
y subrayado, en el caso de las imgenes, si tienen definido un borde este aparecer
resaltado en color azul.
HREF: Son los enlaces con documentos externos al actual. En este caso se indicar una
URL que definir el documento al que se accede si se sigue el enlace. La forma de
indicarlo ser:
Ejemplo
Visualizacin
<A href = "http://www.yahoo.com/"> ir a la pgina de yahoo

</A>
ir a la pgina de
yahoo
En un grfico quedara de la siguiente forma:

Ejemplo
Visualizacin
Pgina 15
Manual de HTML
Para buscar en Internet :
<A href = "http://www.yahoo.com/" > Para buscar en Internet :
<IMG src = "yahoo.gif"></A>
Elemento Ancla: Sirve para llevarnos a una zona de nuestra pgina. Para ello debemos
marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con
el parmetro name.
Ejemplo:
<A name = "seccion1"></A>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccion se
llamar seccion1. Para hacer un enlace a esta seccin dentro de nuestra pgina lo
haramos de la siguiente forma:
<A href = "#seccion1">Primera Parte</A>
Tablas
Permite la representacin de datos por filas y columnas separadas entre s. Es una
herramienta muy til para "ordenar" contenidos de distintas partes de nuestra pgina.
En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como
imgenes, enlaces, texto, listas, cabeceras, formularios, etc.
La tabla se define mediante la directiva <TABLE></TABLE>. Los parmetros opcionales
de esta directiva son:
border = num.
Indica el ancho del borde de la tabla en puntos, por defecto ser 0.
cellspacing = num
Indica el espacio que debe existir entre las distintas celdas de la tabla. Por
defecto ser 2.
cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el contenido de
esta, por defecto es 1.
width = num %
Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de
la ventana del visor. Si no se indica este parmetro, el ancho se adecuar al
tamao de los contenidos de las celdas.
Pgina 16
Manual de HTML
height = num %
Definir el alto de la tabla, a igual que WIDTH, se puede indicar en valor
absoluto o en porcentaje. Si no se indica este parmetro, la altura se adecuar
a la altura de los contenidos de las celdas.
bgcolor = cdigo o nombre del 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 tamao ligeramente superior al normal.
Los parmetros opcionales de ambas directivas son :
align = LEFT / CENTER / RIGHT / JUSTIFY
Indica la alineacin del elemento dentro de la celda, a la izquierda (LEFT), a la
derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM

Indica la alineacin vertical del contenido de la celda, en la parte superior
(TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num
Indicar el nmero de filas que ocupar est celda en la misma fila. Por defecto
ocupa una sola fila.
colspan = num
Indicar el nmero de columnas que ocupar la celda actual. Por defecto ocupa
una sola columna.
width = num %
Indica la anchura de la columna en puntos o en porcentaje en funcin del
ancho de la ventana del visor. Sirve para que la magen no se distorcione.
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 continuacin un ejemplo de una tabla que contiene solo texto:
Pgina 17
Manual de HTML
Ejemplo
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>alltheweb
<TD align = LEFT>hotmail
<TD align = LEFT>yahoo
<TR>
<TD align = LEFT>Google
<TD align = LEFT>latinmail
<TD align = LEFT>uazuay
</TABLE>
Visualizacin
Buscadores
Otros Links
alltheweb
hotmail
yahoo
Google
latinmail
uazuay
13) Formularios
Los formularios nos permiten dentro de una pgina Web solicitar informacin al
visitante y procesarla. La principal utilidad de los formularios es la posibilidad de crear
cuestionarios, encuestas, pginas de comentarios o cualquier documento en la que se
desee una interaccin por parte del usuario.
La instruccin para la creacin de formularios es FORM, tiene los parmetros action y
method.
action = "programa"
Indica el programa que va a "tratar" a las variables que se enven con el
formulario. En nuestro caso enviaremos las variables por correo electrnico,
con lo que el "programa" ser "mailto: direccion_de_correo".
method = POST / GET
Indica el mtodo segn el que se transferirn las variables. POST produce la
modificacin del documento de destino (como en el caso de enviar por correo
las variables). GET no produce cambios en el documento destino
Pgina 18
Manual de HTML
14) Campos de Entrada

Se utiliza la instruccin <INPUT>. El atributo TYPE se usa para determinar el tipo de
recuadro de dialogo de entrada que se est definiendo y el atributo NAME especifica el
nombre de la variable que se define. Cada tipo de variable tiene sus propios
parmetros:
type= text name = campo
Indica que el campo a introducir ser un texto. Sus parmetros son :
maxlenght = nmero
Nmero mximo de caracteres a introducir en el campo(desplaza largo)
size = nmero
Tamao en caracteres que se mostrar en pantalla.
value = "texto"
Valor inicial del campo. Normalmente estar vaco.
<input type="text" maxlenght="20" size="" src="" value="">
type = password name = campo
Indica que el campo ser una palabra de paso. Mostrar asteriscos (*) en lugar
de las letras escritas. Sus parmetros opcionales son los mismos que para text.
<input type="password>
type = checkbox name = campo
El campo se elegir marcando una casilla. Se permite marcar varias casillas. Los
valores de las casillas sern indicados por :
value = "valor"
checked
La casilla aparecer marcada por defecto.
<input type="checkbox" name="var" value="1">
<input type="checkbox" checked="checked" name="var2" value="1">
type = radio name = campo
El campo se elegir marcando una casilla, a diferencia de la anterior solo
permite marcar una de las casillas. Los valores de las casillas seran indicados
por :
value = "valor"
<input type="radio" name="var" value="1">
<input type="radio" name="var" value="2">
type = image name = campo
Pgina 19
Manual de HTML
El campo contendr el valor de las coordenadas del punto de la imagen
pinchado. Debe indicarse la imagen con el parmetro :
src = "fichero de imagen".
<input type="image" src="boton.jpg">
type = hidden name = campo
Pasa parmetros de una pantalla a otra. El usuario no puede modificar su valor,
ya que el campo est oculto se manda siempre con el valor indicado por el
parmetro :
value = "valor"
<input type="hidden" value="1" name="var">
type = submit
Representa un botn. Ejecuta el programa php del formulario.Al pulsar este
botn la informacin de todos los campos se enva al programa indicado en
<FORM>. Tiene el parmetro value = "texto" que indica el texto que aparecer
en el botn.
<input type="submit" name="aceptar" value="aceptar">
type = reset
Representa un botn. Al pulsar este botn se borra el contenido de todos los
campos. El parmetro value = "texto" indica el texto que aparecer en el botn.
<input type="reset" name="borrar" value="borrar">
Campos de Seleccin: Eleccin entre mltiples opciones
Se usa para mens simples o mltiples. Define mens de tipo pop-up y ofrece una
alternativa ms compacta al uso de botones RADIO o CHECKBOX . Se utiliza para ellos
la directiva <SELECT> </SELECT> . Sus parmetros son :
name = campo
Nombre del campo
size = num
Nmero de opciones visibles. Si se indica 1 se presenta como un men
desplegable, se se indica mas de uno se presenta como una lista con barra de
desplazamiento.
mltiple
Permite selecionar ms de un valor para el campo.
Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva
puede incluir el parmetro selected para indicar cual es la opcin por defecto. En caso
de que no se especifique, se tomar por defecto la primera opcin de la lista.
Pgina 20
Manual de HTML
15) reas de texto.

Representa un campo de texto de mltiples lneas. Normalmente se utiliza para que se
incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus
parmetros :
name = campo
Nombre del campo.
cols = num.
Nmero de columnas de texto visibles.
rows = num.
Nmero de filas de texto visibles.
wrap = VIRTUAL / PHYSICAL
Justifica el texto automticamente en el interior de la caja. La opcin PHYSICAL
enva las lneas de texto separadas en lneas fsicas. La opcin VIRTUAL enva
todo el texto seguido.
A continuacin un ejemplo de formulario utilizando todas las formas de introduccin
de datos.
<FORM action = "mailto: nombre@ext.es" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value ="Mapthis" > Programa Mapthis
<INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 aos
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 aos
<INPUT type = radio name = edad value = "+40" > Mas de 40 aos
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi pgina :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Ole
<OPTION>Por el buscador Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
Pgina 21
Manual de HTML
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>
En la pgina Web se vera as:

Tu Nombre:
Tu Clave:
Archivos a Enviar:
Manual de Html
Programa Mapthis
Archivo de Ayuda
Tu Edad :
Menos de 20 aos
Entre 20 y 40 aos
Mas de 40 aos
Como encontraste mi pgina :
De casualidad
Tus Comentarios:
Enviar
Borrar
16) Frames
Las frames son una tcnica para subdividir la pantalla del visor en diferentes ventanas.
Cada una de estas ventanas se podr manipular por separado.
Un documento con frames se define de manera diferente a un documento normal,
siendo la estructura del documento distinta, en este caso no se define la etiqueta
BODY .
Pgina 22
Manual de HTML
Para definir frames se utilizan las directivas <FRAMESET> </FRAMESET> y <FRAME>.
<FRAMESET> indica cmo se va a dividir la ventana principal. Pueden incluirse varias
directivas <FRAMESET> anidadas con el objeto de subdividir una subdivisin.
Los parmetros de <FRAMESET> son rows y cols en funcin de si la divisin de la
pantalla se realiza por filas (rows) o columnas (cols).
ROWS: Se definir separado por comas el tamao de cada una de las frames. De esta
forma se dividir la pantalla de forma horizontal, segn cada una de las filas definidas.
<FRAMESET ROWS="100, 50%, *">
<FRAME SRC="frame1.htm" NAME="frame1">
</FRAMESET>
COLS: Toma los mismos posibles valores que ROWS , pero en este caso para las
columnas, se definirn las frames de forma vertical.
<FRAMESET COLS="100, 50%, *">
</FRAMESET>
17)
Atributos de los Frames:
URL: Especifica el documento HTML o fichero que se mostrar en la frame definida. Si

no se especifica documento alguno se mostrar la frame vaca.
NAME: Indica el nombre de la frame, este nombre se usar en los hiperenlaces para
indicar la frame de destino del documento. Si no se indica el nombre solo se podr
mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces.
MARGINWIDTH: Indica el ancho del margen, este atributo es opcional ya que el
navegador ajusta todos los mrgenes al mismo tamao.
MARGINHEIGHT:Igual que el anterior pero para el alto de los mrgenes. Lo normal es
no especificar ninguno de estos dos atributos.
SCROLLING: Indica si la frame tendr o no una barra de scroll, la cual permite
desplazarse por el documento, pulsando con el ratn en ella.Tiene los valores YES para
que se vea barra, NO para que no se vea y AUTO para que aparezca automticamente.
Pgina 23
Manual de HTML
NORESIZE: Indica que la frame no debe ser variada de tamao por el usuario, se puede
variar el tamao de una frame situando el cursor del ratn encima y arrastrando en la
direccin deseada. Por defecto todas las frames pueden variar su tamao.
TARGET:
Indica la frame de destino de la operacin, se puede especificar que frame ser la de
destino, no siendo necesario que sea la frame del documento actual.
Como nombre de la frame su usar el nombre que se especific en el atributo NAME
de la etiqueta FRAME . Estas instrucciones se utilizarn normalmente en los
documentos que se incluyen dentro de las frames.
Las etiquetas que permiten el uso de TARGET son las siguientes:
A:En los hiperenlaces indicar la frames donde se mostrar el documento, una
vez que se siga el hiperenlace.
<A HREF=" url " TARGET=" frame ">
BASE:Indicar la frame en la que se mostrar por defecto todos los
hiperenlaces del documento actual. Se debe especificar en la cabecera del
documento ( HEAD ).
<BASE TARGET=" frame ">
AREA: En la definicin de imgenes sensibles en el cliente , se indica la frame
donde se ver el documento que se activa en la zona correspondiente de la
imagen.
<AREA SHAPE=RECT COORDS=" x,y,... " HREF=" url " TARGET=" frame ">
FORM:
Indicar la frame de destino del resultado del formulario .
<FORM ACTION=" url " TARGET=" frame ">
Adems existen otros valores adicionales de los frames:
TARGET="_blank": Indica que se muestre en una nueva ventana vaca.
TARGET="_self": Se mostrar en la misma ventana o frame que lo referencia.
TARGET="_parent": Se muestra en la frame o estructura de frames que llam al
documento actual.
TARGET="_top": Indica que se muestre en la ventana completa, eliminando la
estructura de frames que tenga la ventana.
Pgina 24
Manual de HTML
18) INSERCIN DE ELEMENTOS MULTIMEDIA

"Multimedia
La forma bsica de incluir un archivo de un formato no reconocido por el
navegador es incluirlo en una liga o hiperenlace de forma que cuando el usuario
siga el hiperenlace el programa navegador llame a una aplicacin externa que trate
este tipo de archivos. El navegador tendr definida una lista aplicaciones que
trabajarn con los formatos ms comunes de vdeo, audio o imgenes. Esta opcin
es poco operativa ya que no podran incluirse en el documento actual.
El Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que
permiten el uso de elementos multimedia, pero no es estndar y se puede
asegurar que no ser posible verlos en maquinas distintas a los PC con windows, ni
en navegadores distintos a este.
Extensiones Multimedia de Internet Explorer
El Internet Explorer de Microsoft permite mostrar vdeo en formato AVI y
reproducir sonido, de una forma sencilla, para eso aade una nueva etiqueta y un
atributo a la etiqueta de mostrar imgenes.
<BGSOUND ...> Reproduccin de audio
<BGSOUND SRC="archivo de sonido" LOOP= n INFINITE>
Incluiremos una nica vez esta etiqueta en el arcivo que deseemos presente
msica de fondo. En el atributo SRC se indicar el archivo de audio que se debe
reproducir. El archivo podr ser de formato .wav, .au o MIDI (.mid). El atributo
LOOP indica cuantas veces se ejecutar la pieza musical, podr indicarse un
nmero o INFINITE que indicar de forma indefinida.
<IMG DYNSRC...> Reproduccin de vdeo
<IMG DYNSRC="archivo de sonido" LOOP= n INFINITE CONTROLS START=
FILEOPEN
MOUSEOVER>
En este caso es un nuevo atributo para la etiqueta IMG, caso de existir este, en vez
de mostrar una imgen mostrar un vdeo en formato AVI (Vdeo for Windows), se
puede utilizar todas los atributos normales de IMG, pudiendo usar las distintas
alineaciones y colocaciones respecto al texto, adems se podr variar el tamao
del vdeo con los atributos HEIGHT y WIDTH.
Se aaden otros atributos que solo se pueden aplicar al vdeo, el atributo IMG SRC
indica el url del archivo que se mostrar. El atributo LOOP indica el nmero de
Pgina 25
Manual de HTML
veces que se mostrar el vdeo. El atributo CONTROLS indicar si se mostrarn los
botones de control, que permitirn volver a reproducir, regresar, .... El atributo
START indica si la secuencia de vdeo empezar al abrir el archivo (FILEOPEN) o
cuando pase el cursor del ratn encima (MOUSEOVER).
De no poder mostrar el vdeo por tratarse de otro navegador (por ejemplo
Netscape), se podr indicar una imgen que se muestre de manera alternativa,
incluyendo el atributo SRC.
Plug-in's
Plug-in es un programa que extiende las capacidades del navegador de Netscape
en un modo especfico, dado por ejemplo la capacidad de mostrar vdeo, audio,
archivos de un determinado formato (archivos PDF, presentaciones de ASAP,
archivo VRML, etc ...).
No existe actualmente un conjunto estndar de plug-in"s para cada tipo de
documentos, sino que existen diversas aplicaciones, realizadas por diversos
fabricantes, y no todas de libre distribucin. Se puede asegurar que todas las
aplicaciones sern compatibles y si por ejemplo se referencia un archivo de sonido
en formato .wav en su pgina, este podr ser odo por todos aquellos que tengan
un plug-in para este tipo de formatos.
Para que un documento multimedia que es incluido en una pgina sea visible por el
usuario debe cumplir dos condiciones:
-La primera es que posea el navegador de Netscape en su versin 2.0 o superior y
la segunda es:
-Contar con el plug-in correspondiente que trata el documento deseado. Por tanto
se recomienda un uso moderado de los plug-in"s utilizando archivos que sean de
formatos comunes y un uso complementario en una pgina, ya que muchos
usuarios no podrn verlo, o escucharlo. Es aconsejable incluir un enlace en el que
se referencie el archivo, de esta forma un usuario podr seguir el enlace y ver el
documento en un visualizador externo si lo posee.
Existe una instruccin que permite incluir cualquier tipo de archivo dentro de los
documentos HTML.
<EMBED> Insertar archivos
Esta instruccin permite la inclusin de cualquier tipo de documento en la posicin
del documento HTML donde se especifique. Su funcionalidad es similar a la IMG
para incluir imgenes. En este caso para que pueda mostrarse el archivo deber
tener el plug-in adecuado que lo interprete.
El formato es el siguiente:
Pgina 26
Manual de HTML
<EMBED SRC="URL del archivo" WIDTH=n n% HEIGHT=n n%>
En el atributo SRC se indicar el archivo que se desea mostrar, y los atributos
WIDTH y HEIGHT se indicar el tamao que tendr en objeto insertado, siendo
estos opcionales.
El archvio que podr ser vdeo, audio, imgen de algn tipo distinto a los que se
presentan por default, archivo de presentaciones, etc... solo podr ser visto por el
usuario si este posee el plug-in correspondiente que trata ese tipo de documentos,
en caso contrario mostrar un mensaje de error indicando al usuario que debe
proveerse de ese plug-in para poder consultar el documento de forma correcta.
En el caso que se pueda mostrar el plug-in se incluir en la zona del documento
que se indic pudiendo as de este modo insertar dentro de un documento HTML
pelculas de vdeo o incluir sonidos de fondo.
Se recomienda un uso limitado de esta posibilidad, ya que existirn muchas
personas que no posean el Netscape 2.0, o una versin superior y no posean el
plug-in correspondiente, y por lo tanto no podrn ver los atractivos de su pgina.
19) Ejemplos
Ejemplo 1:
Pgina 27
Manual de HTML
Ejemplo2
Pgina 28
Manual de HTML
Pgina 29
Manual de HTML
Ejemplo 3
Pgina 30
Manual de HTML
Pgina 31
Manual de HTML
Ejemplo 4
Pgina 32
Manual de HTML
Ejemplo 5
Ejemplo 6
Pgina 33
Manual de HTML
Ejemplo 7
Pgina 34
Manual de HTML
Ejemplo 8
Pgina 35
Manual de HTML
Ejemplo 9
Pgina 36
Manual de HTML
Ejemplo 10
Ejemplo 11
Pgina 37

Manual de HTML

Uploaded by

Document Information

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 de HTML

Uploaded by

Copyright:

Available Formats

Manual de HTML

2) Cabecera del documento

3) Cuerpo del documento

Profesor: Samuel Molina Javier

4) Caracteres del Documento

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Por lo tanto la palabra computacin se escribira de la siguiente forma::

Profesor: Samuel Molina Javier

6) Espacios y Saltos de Lnea

Profesor: Samuel Molina Javier

Este texto tiene<BR>saltos de linea y <P> de prrafo.

Este texto tiene

<H1>Manual HTML</H1> Manual HTML

Profesor: Samuel Molina Javier

<H3>Pgina Web</H3>Esta es una pgina de prueba. Pgina Web

8) Atributos del Texto

Profesor: Samuel Molina Javier

<UL type = disk >

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

IMAGENES Y MAPAS SENSITIVOS

Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en funcin de la

Profesor: Samuel Molina Javier

<A href = "http://www.yahoo.com/"> ir a la pgina de yahoo

En un grfico quedara de la siguiente forma:

valign = TOP / MIDDLE / BOTTOM

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

14) Campos de Entrada

Profesor: Samuel Molina Javier

15) reas de texto.

En la pgina Web se vera as:

Profesor: Samuel Molina Javier

Atributos de los Frames:

URL: Especifica el documento HTML o fichero que se mostrar en la frame definida. Si

Profesor: Samuel Molina Javier

18) INSERCIN DE ELEMENTOS MULTIMEDIA

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

You might also like