Manual HTML

Manual de HTML
Tecnologa de la Informacin
4 ESO
TEMA 1: Introduccin al HTML

HTML es el acrnimo de HIPERTEXT MARKUP LANGUAGE = LENGUAJE DE ETIQUETAS
DE HIPERTEXTO. En realidad no es un lenguaje sino una forma de definir efectos en el texto de
manera similar a como se haca en los antiguos procesadores de texto para MS-DOS, o como lo
hacen los actuales procesadores de textos pero de forma que no nos damos cuenta ya que estas
tareas estn automatizadas.
An as el HTML no se limita exclusivamente al tratamiento del texto, sino que va ms all, al
introducir fondos de colores en las pginas, imgenes estticas o animadas e incluso vdeo y sonido
como veremos en lecciones sucesivas. Las pginas web se visualizan en un programa llamado
navegador, browser o visualizador. As que para conseguir que se vean en estos programas se les
manda una ORDEN travs de una serie de MARCAS o ETIQUETAS (instrucciones que le dicen al
texto cmo debe presentarse) y una serie de PARAMETROS o ATRIBUTOS (valores que
modifican la ETIQUETA).
Es decir, que todas las ETIQUETAS que forman el HTML no son ms que instrucciones para el
visualizador. Partiendo de esto, se entiende el porqu no se ve lo mismo con todos los
visualizadores. Depende de cmo estn diseados y para qu versin de lenguaje estn diseados.
Actualmente existen multitud de ellos: Explorer, Opera , FireFox y Mozilla
CONSIDERACIONES IMPORTANTES ANTES DE COMENZAR?
1. Un procesador de textos. Si utilizamos uno sencillo mejor:
a. En
Windows
INICIO
ACCESORIOS EDITOR DE TEXTOS

b. En Linux
PROGRAMAS
2. La peor forma de aprender HTML es utilizando un EDITOR DE HTML (Dreamweaver, Namo

WebEditor, Frontpage). Espera a aprender lo bsico y luego aprende a utilizarlo.
3. La otra utilidad que necesitamos es un BROWSER o NAVEGADOR, que como ya hemos
citado anteriormente son FireFox, Mozilla, Explorer y Opera.
4. Tener abiertos el editor de textos y el NAVEGADOR (esto se llama multitarea como ya sabrs
perfectamente). Cuando guardemos una pgina Web o documento HTML se recomienda:
Que sea en minsculas.
Que no haya ni ni tildes.
Que no tenga espacios en el nombre.
Que no exceda de 8 caracteres.
Que la extensin de la pgina sea HTML (nombre.html).
Pg. 1
Manual de HTML
4 ESO
TEMA 2: Esqueleto bsico de un documento HTML

Todo documento HTML est compuesto de ETIQUETAS y ATRIBUTOS. Las principales etiquetas
son las que generan la estructura general de un documento HTML.
1.-Abre el editor de textos y escribe lo siguiente:
<HTML>
</HTML>
Lo que le acabamos de decirle al NAVEGADOR es que ste es el principio (<HTML>) y que este
es el final (</HTML>) del documento HTML. Todas las ETIQUETAS cerradas se comportan
igual, uno empieza y el otro lo acaba con la barra "/" . Hay tambin ETIQUETAS abiertas que ya se
mostrarn en su momento, pero son las menos. Las ETIQUETAS no son sensibles a las maysculas
o minsculas, por eso da lo mismo como se escriban, de todas formas, para ponernos de acuerdo
todos y facilitar su visualizacin intentaremos escribirlas en MAYSCULAS.
2.-Los documentos HTML se estructuran en dos partes fundamentales:
La cabecera (HEAD).- Contiene informacin sobre el documento que normalmente no se visualiza.
El cuerpo (BODY).- Contiene todo lo que queremos mostrar en Internet. Las ETIQUETAS
permitidas en HEAD no se puede poner como ETIQUETAS en BODY, y viceversa. Si has
entendido todo lo expuesto escribe lo siguiente dentro de las etiquetas anteriores:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
3.-Guarda tu documento HTML

Si realizas bien esta operacin desde el principio te ahorrars muchos quebraderos de cabeza en el
futuro. Tienes que disponer de un Pendrive y limpio para ser utilizado. Crea una carpeta con el
nombre HTML. NO ESCRIBAS NI ALMACENES NADA EN ESA CARPETA, SALVO LAS
PAGINAS WEB. Sigue los siguientes pasos:
1.-Archivo Guardar como

2.-Selecciona PENDRIVE
3.-Escribimos un nombre con la extensin HTML (tema2.html)
4.-Pulsamos en TIPO y seleccionamos TODOS LOS ARCHIVOS.
5.-Pulsamos GUARDAR.
Despus de realizar toda esta operacin, nos dirigimos a donde hemos guardado el documento
HTML. Veremos que el icono del documento es
lo que nos indica que se puede abrir con
el EXPLORER.
Pg. 2
Manual de HTML
4 ESO
Realizamos un doble clic y automticamente se abre el navegador. La pgina est vaca de

contenido ... de momento.
TEMA 3: Cabecera de la pgina

La cabecera (HEAD) contiene informacin sobre el documento que normalmente no se visualiza,
PERO que s afectarn a su forma de presentarse y su comportamiento. Por eso es el lugar ms
recomendable para colocar los scripts (JAVASCRIPT) y las hojas de estilo, como veremos en
lecciones posteriores.
Las ETIQUETAS que van en el interior de la cabecera son las siguientes:
<TITLE></TITLE>
Con ella le colocamos a la pgina web un TITULO
que aparecer en la barra azul de la parte superior del
navegador. El nombre que pongamos en como se
conocer la pgina en los buscadores y en los
marcadores o favoritos de los navegadores. Por lo
tanto es importante que la nominemos adecuadamente
(nombre corto y significativo).
<META>
Introduce informacin adicional no definida por otros elementos HTML.
Los navegadores en espaol o ingls suponen por defecto que las pginas web estn escritas en
caracteres de un idioma europeo occidental. Cmo se vera una pgina de estas caractersticas en
Marruecos (caracteres rabes) o en Rusia (caracteres cirlicos)?
Con ello concluimos que el navegador no est configurado igual dependiendo del lugar donde se
viva. Para indicar que estamos utilizando caracteres de un idioma europeo occidental, debemos
colocar la etiqueta siguiente en la cabecera.
<meta http-equiv=content-type content=text/html;charset=ISO-8859-1>
Definimos el contenido y formato de la pgina (text/html) y la pgina de cdigos (ISO-8859-1) que
represente los caracteres del castellano.
Tambin podemos indicar palabras claves para que los buscadores encuentren nuestra pgina
(KEYWORDS), el autor (AUTHOR), la herramienta utilizada para hacer la pgina
(GENERATOR).
<meta name=keywords content=docencia HTML bachillerato informatica>
<meta name=generator content=Editor de textos>
<meta name=author content=Carlos Garca Snchez>
Abre tema2.html y aade todas las etiquetas de esta leccin. El ttulo de la pgina ser el
siguiente: Cabecera en HTML y Etiquetas META
Pg. 3
Manual de HTML
4 ESO
TEMA 4: Espaciados y saltos de lnea

El HTML solo reconoce un espacio entre palabra y palabra, el resto de los espacios sern ignorados.
En el editor de textos escribe con espacios: ESTO
ES
En el navegador se ver como: ESTO ES UNA PRUEBA
UNA
PRUEBA
Asimismo tampoco se respetan las tabulaciones, retornos de carro (pulsar la tecla intro) etc... Para
ello existen una serie de ETIQUETAS que indican estas acciones. La ETIQUETA <PRE></PRE>
obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando tabulaciones,
espacios, intros, ... etc.
Ejemplo
<PRE>
Este texto
ha sido
P R E F O R M A T E A D O.
</PRE>
Se ver como
Este texto
ha sido
P R E F O R M A T E A D O.
Para indicar un salto de lnea se utiliza la ETIQUETA <BR> (BREAK=Romper) y para delimitar un
prrafo (inserta una lnea en blanco antes del texto) se utiliza el ETIQUETA <P> </P>.
Ejemplo
Se ver como
Este texto tiene <BR> saltos de lnea y <P> de Este texto tiene
prrafo. </P>
saltos de lnea y
de prrafo.
La ETIQUETA <P> </P> dispone de atributos como ALIGN que indica al navegador la forma de
"justificar el prrafo. Los valores posibles de este atributo son LEFT, RIGHT, CENTER y
JUSTIFY.
Ejemplo
Se ver como
<P align=right>Este es un ejemplo de un prrafo de texto Este es un ejemplo de un prrafo de texto Justificado a la
Justificado a la derecha.</P>
derecha
<P align=center>Este es un ejemplo de prrafo de texto
Este es un ejemplo de prrafo de texto centrado
centrado.</P>
La etiqueta <DIV> permite justificar el texto dentro de un mismo prrafo a la izquierda (align=left),
derecha (align=right), centro (align=center) o justificado (align=justify). A diferencia de <P> no
introduce ninguna lnea en blanco antes de l.
Ejemplo
Se ver como
<P align=right>Este es un ejemplo de un prrafo de texto Este es un ejemplo de un prrafo de texto Justificado a la
Justificado a la derecha.</P>
derecha
<P align=center>Este es un ejemplo de un prrafo de texto
centrado.</P>
<DIV align=right>Este es un ejemplo de un prrafo de Este es un ejemplo de un prrafo de texto Justificado a la
texto Justificado a la derecha.</DIV >
derecha
<DIV align=center>Este es un ejemplo de un prrafo de
texto centrado.</ DIV >
Pg. 4
Manual de HTML
4 ESO
Abre la tema2.html y aade todas los ejemplos de este tema
TEMA 5: Lnea Horizontal y Colores

La ETIQUETA <HR> muestra una lnea horizontal de tamao determinable. Sin ningn atributo
mostrara una lnea horizontal que ocupara todo el ancho de la pgina.. Tiene los siguientes
atributos opcionales:
align = posicin
Alinea la lnea a la izquierda (left), a la derecha (right) o la centra (center).
noshade
No muestra sombra, evitando el efecto en tres dimensiones.
size = nmero
Indica el grosor de la lnea en pxeles.
width = nmero o porcentaje (%)
Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la ventana del
NAVEGADOR. Tambin se puede especificar un nmero que indicara el ancho de la lnea en
pxeles.
color = Dibuja la barra con el nombre del color o con el cdigo RGB.
Los colores especificados con su nombre que el navegador puede entender son los siguientes:
Black
Red
Olive
Maroon
Silver
Purple
Green
Navy
Gray
Fuchsia
Teal
Blue
White
Yellow
Lime
Aqua
Los colores especificados con el cdigo RGB, es decir, segn la intensidad de rojo, verde y azul
(Red-Green-Blue) que se presentan en pantalla, se escriben de la siguiente forma:
1.- Escribiendo el carcter almohadilla #
2.- A continuacin le siguen 3 nmeros, uno para cada color. Estos nmeros van desde el 0 al 255,
pero escritos en el sistema de numeracin hexadecimal (que tiene base 16 en vez de 10).
El sistema de numeracin hexadecimal utiliza las cifras siguientes:
0123456789
A(=10) B(=11) C(=12) D(=13) E(=14) F(=15)
De esta forma se puede definir, en base a los colores bsicos, una gama de diferentes colores. Si
quieres utilizar toda la gama, proponemos el siguiente truco: Utilizamos el programa
PAINTBRUSH que encontraremos en el sistema operativo. Selecciona uno de los colores de la tabla
de colores para desplegar sus caractersticas (colores personalizados). Podrs comprobar qu valores
adoptan los colores bsicos. Imaginemos que estos valores son:
Rojo: 156
Verde: 87
Azul: 200
Pg. 5
Manual de HTML
4 ESO
Ahora accede a la calculadora de WINDOWS, y en el men VER, selecciona calculadora cientfica.

Asegrate de que est en forma decimal (DEC). Introduce uno de los nmeros y pulsa despus la
opcin para formato hexadecimal (HEX). Ya tienes el formato hexadecimal que buscabas.
EJERCICIO: Guarda el ejercicio con el nombre de tema5.html
<HR color=#FF0000>Rojo 100%
<HR color=#00FF00>Verde 100%
<HR color=#0000 FF >Azul 100%
<HR color=#000000>Negro
<HR color=#FFFFFF>Blanco
<HR color=#FFFF00>Amarillo
<HR color=#8F0000>Rojo 50%
<HR color=#4F0000>Rojo 25%
<HR align= center size= 20 width= 50% color=red>
<HR>
EJERCICIOS: Abre el ejercicio anterior y realiza lo siguiente:
Rellenar el interior del BODY con el siguiente texto:
Aula de Informtica. Estamos aprendiendo a manejar el lenguaje HTML. De momento parece fcil.
Ahora aplica las ETIQUETAS de esta leccin:
<HR>
<P>Aula de informtica</P>
Estamos aprendiendo a manejar HTML<BR>
<P>Parece sencillo.</P>
<HR>
Vamos a complicarlo un poco:
<HR width=300 size=10 align=right noshade>
<P align=right>Aula de informtica</P>
<DIV align=right>Estamos aprendiendo a manejar HTML.</DIV>
<DIV>Parece sencillo.</DIV>
<HR align=right width=300>
Un ejemplo con <PRE>:
<HR>
<PRE>
Aula de informtica. Estamos aprendiendo a manejar
H T M L.
Parece sencillo</PRE>
<HR>
Pg. 6
Manual de HTML
4 ESO
TEMA 6: Cabeceras y atributos del texto

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio
de las ETIQUETAS <H1><H2><H3><H4><H5><H6>. El texto que escribamos entre el inicio y
el fin de la ETIQUETA ser el afectado por las cabeceras. La cabecera <H1> ser la que muestre el
texto en mayor tamao. Todos los ejemplos de esta leccin deben guardarse como tema6.html
EJEMPLO Se vera como
<H1>Encabezado tipo 1</H1>
Encabezado tipo 1
Encabezado tipo 2
Encabezado tipo 3
Encabezado tipo 4
<H5>Encabezado tipo 5</H5> Encabezado tipo

<H6>Encabezado tipo 6</H6> Encabezado tipo 6
Los textos etiquetados como "cabeceras" provocan automticamente un retorno de carro sin
necesidad de incluir la ETIQUETA <BR>.
Ejemplo
Se vera como
<H3>Pgina de prueba</H3>Esta es mi pgina
personal
Esta es mi pgina personal
Pgina de prueba
Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias ETIQUETAS. Algunas de
ellas no son reconocidas por determinados NAVEGADORES de Internet, es por ello que segn el
NAVEGADOR que se utilice se observar correctamente o no.
Atributo
Negrita
ETIQUETA
<B></B>
Cursiva
<I></I> o <EM></EM> <I>Cursiva</l>

(itlica) (nfasis)
<U><U>
<U>Subrayado</U>
Subrayado
Ejemplo
<B>Negrita</B>
Superndice <SUP></SUP>
X<SUP>2</SUP>+Y<SUP>3</SUP>
Subndice
<SUB></SUB>
H<SUB>2</SUB>O
Centrado
<CENTER></CENTER> <CENTER>Centrado</CENTER>
Pg. 7
Resultado
Negrita
Cursiva
Subrayado
X2+Y3
H20
Centrado
Manual de HTML
4 ESO
Por otro lado la ETIQUETA <FONT></FONT> nos permite variar el tamao, el color, y el tipo de
letra de un texto determinado. Utiliza para ello los siguientes atributos:
size = valor
Da al texto un tamao tantas veces superior (+) o inferior (-) como indique el valor. El
tamao (size) por defecto es 3. Si le proporcionamos el valor +3 le estamos diciendo al
navegador que visualice la fuente 3 veces ms grande. Si le decimos que sea 3, le
estamos diciendo lo contrario, es decir, 3 veces menor a su tamao.
color = cdigo de color
Escribe el texto en el color cuyo cdigo se especifica.
face = nombre de la fuente
Escribe el texto en el tipo de letra especificado (Arial, Times New Roman, Comic Sans...etc). Si al
disear una pgina web utilizamos fuentes que no estndares o especiales, normalmente no se
encontrarn en el ordenador por lo que, el navegador que "lee" la pgina, usar la fuente font
predeterminado p.e. la fuente Times New Roman.
Ejemplo
Resultado
<FONT SIZE=4 COLOR=red FACE=comic sans ms> Texto de Texto de prueba
prueba </FONT>
EJERCICIOS: Guarda los ejercicios con el nombre de tema61.html
1.-Escribe los atributos necesarios de manera que se visualice nuestro nombre en diferentes lneas en
negrita, cursiva y subrayado.
2.-Escribir la lnea necesaria para que nuestro nombre se visualice en color verde.
3.-Ahora vamos a poner el nombre con un tamao mayor, utilizando las DOS FORMAS (Cules
son?) que conocemos para aumentar el tamao de la letra.
Pg. 8
Manual de HTML
4 ESO
TEMA 7: Lista de elementos (VIETAS)

Existen tres tipos de listas: (Guarda todos los ejemplos como tema7.html )
1. Ordenadas o Numeradas
2. Desordenadas o No numeradas
3. De definicin
Las listas ordenadas 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 etiqueta <OL></OL> (Ordered list =
Lista Ordenadas). Cada uno de los elementos de la lista ir precedido de la etiqueta <LI>. La
etiqueta <OL> puede llevar los siguientes atributos :
start = num
Indica que nmero ser el primero de la lista. Si no se indica se entiende que empezar por el
nmero 1 .
type = tipo
Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista - ordenada
numricamente (1)
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=Nmeros romanos en minsculas, (i ,ii,iii,iv,v,... etc.)
l=Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.)
Ejemplo
Resultado
<OL>Catalua:
<LI>Tarragona</LI>
<LI>Barcelona</LI>
<LI>Lrida</LI>
<LI>Gerona</LI>
</OL>
Catalua:
1. Tarragona
2. Barcelona
3. Lrida
4. Gerona
<OL type=A>Catalua:
<LI>Tarragona</LI>
<LI>Barcelona</LI>
<LI>Lrida</LI>
<LI>Gerona</LI>
</OL>
Catalua:
A. Tarragona
B. Barcelona
C. Lrida
D. Gerona
Pg. 9
Manual de HTML
4 ESO
Las listas desordenadas o no numeradas representan los elementos de la lista con una etiqueta
que antecede a cada uno de ellos. Se utiliza la etiqueta <UL></UL> (unordered lists) para delimitar
la lista, y <LI> para indicar cada uno de los elementos. La etiqueta <UL> puede contener el
atributo type que indica la forma del "topo" o etiqueta que antecede a cada elemento de la lista. Los
valores de type pueden ser disk, circle o square, con lo que el topo o etiqueta puede ser un disco, un
circulo o un cuadrado. Tambin pueden utilizarse las etiquetas <DIR> y <MENU>
Ejemplo
Resultado
<UL type=disk>Catalua:
<LI>Tarragona</LI>
<LI>Barcelona</LI>
<LI>Lrida</LI>
<LI>Gerona</LI>
</UL>
Catalua:
Tarragona
Barcelona
Lrida
Gerona
<UL type=square>Catalua:
<LI>Tarragona</LI>
<LI>Barcelona</LI>
<LI>Lrida</LI>
<LI>Gerona</LI>
</UL>
Catalua:
Tarragona
Barcelona
Lrida
Gerona
Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino y definicin. Se
utiliza para ellas la ETIQUETA <DL></DL> (definition list). El elemento etiquetado como trmino
se antecede de la ETIQUETA <DT> (definition term), el etiquetado como definicin se antecede de
la ETIQUETA <DD> (definition definition).
Ejemplo
Resultado
<DL>Servicios de Internet:
<DT>WWW
<DD>World Wide Web
<DT>FTP
<DD>File Transfer Protocol
</DL>
Servicios de Internet:
WWW
World Wide Web
FTP
File Transfer Protocol
Pg. 10
Manual de HTML
4 ESO
EJERCICIOS: Guarda el ejercicio con el nombre de tema7.html

<HTML>
<HEAD>
</HEAD>
<BODY>
<P><FONT COLOR=RED><B>Los Meses de INVIERNO:</B></FONT>
<OL>
<LI>Diciembre</LI>
<LI>Enero</LI>
<LI>Febrero</LI>
<LI>Marzo</LI>
</OL>
<P><FONT COLOR=BLUE><B>Los Meses de OTOO:</B></FONT>
<OL type=A>
<LI>Septiembre</LI>
<LI>Octubre</LI>
<LI>Noviembre</LI>
<LI>Diciembre</LI>
</OL>
<P><FONT COLOR=GREEN><B>Los Meses de PRIMAVERA:</B></FONT>
<UL>
<LI>Marzo</LI>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</UL>
<P><FONT COLOR=FUCSIA><B>Los Meses de VERANO:</B></FONT>
<DL>
<DT>Junio
<DD>Julio
<DT>Agosto
<DD>Septiembre
</OL>
</BODY>
</HTML>
Pg. 11
Manual de HTML
4 ESO
TEMA 8: Formatos grficos

Hasta el momento hemos trabajado exclusivamente con el texto que se puede escribir en una pgina
Web, as como sus posibles formatos. Para incluir una imagen en nuestra pgina Web utilizaremos
la ETIQUETA <IMG>. Existen tres formatos grficos que son soportados por todos los
navegadores:
1.-Formato grfico GIF
2.-Formato grfico JPEG
3.-Formato grfico PNG
Cualquier otro tipo de fichero grfico o de imagen no ser mostrado por el NAVEGADOR. La
ETIQUETA <IMG> posee varios atributos:
src=imagen
Indica el nombre del fichero grfico a mostrar.
alt =Texto
Mostrara el texto indicado en el caso de que el navegador utilizado para ver la pgina no sea capaz
de visualizar la imagen. NO OLVIDES PONER LAS COMILLAS.
lowsrc = imagen
Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pgina. Este
atributo no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicacin,
as que en la mayora de los casos ser ignorado mostrndose solo la primera imagen (src). En
Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la
imagen indicada por src. Si las imgenes son iguales pero tienen distinta "resolucin" se conseguir
un efecto tipo "Fade" (sombra). Si las imgenes son de distinto tamao la imagen indicada en src se
redimensionar al tamao indicado por la imagen indicada en lowsrc.
align = TOP / MIDDLE / BOTTOM / LEFT / RIGHT
TOP-MIDDLE-BOTTOM, indican como se alinear el texto que siga a la imagen.
TOP alinea el texto con la parte superior de la imagen
MIDDLE con la parte central
BOTTOM con la parte inferior
LEFT-RIGHT, indican como se alinear la imagen que siga al texto.
LEFT coloca la imagen a la izquierda del texto
RIGHT coloca la imagen a la derecha del texto.
border = tamao del marco
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 enlace o link.
height = altura
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen
original.
width = anchura
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen
original.
hspace = margen
Pg. 12
Manual de HTML
4 ESO
Indica el numero de espacios horizontales, en puntos, que separarn la imagen del texto que la siga
y la anteceda.
vspace = margen
Indica el nmero de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
ismap / usemap
Indica que la imagen es un MAPA. Veremos estos atributos mas adelante.
En nuestro Pendrive, dentro de la carpeta HTML debemos crear una carpeta con el nombre de
IMAGES, en donde colocaremos todos las imgenes que vamos a utilizar en nuestras pginas web.
Dentro de ella slo tienen cabida IMGENES y NO pginas web, que estarn en la raz del
disquete. Cuando construyamos una pgina web y queramos colocar una imagen, haremos alusin a
esta carpeta. Veamos un ejemplo (Guarda el ejemplo con el nombre de tema8.html, separa cada
ejercicio con un lnea horizontal)
Ejemplo
Resultado
<IMG SRC=images/aclown1.gif ALT=Soy PIPO>
<IMG SRC=f:/images/aclown1.gif ALT=Soy PIPO>

<IMG SRC=c:/images/aclown1.gif ALT=Soy PIPO>
<IMG SCR=images/aclown1.gif
ALT=Soy PIPO>
Comentario
La imagen est ubicada en la
carpeta images y as se hace
constar en el cdigo HTML.
Si colocamos en puntero del
ratn encima aparecer un
mensaje: Soy PIPO.
En los casos mostrados se ha
producido un error, que se
traducir
en
la
NO
visualizacin de la imagen o
de la pgina entera. OJO!
GIF Graphics Interchange Format = Formato de intercambio de grficos

Descripcin: Este archivo es uno de los ms usados en el mundo. El porqu de su xito se debe al poco
espacio que consume y a las posibilidades que con ello ofrece a los diseadores de pginas web. Se trata de
un formato comprimido y multiplataforma. En la actualidad existen dos formatos: FORMATO GIF 87a y
FORMATO GIF89a (es una extensin del primero, en el cual se incluye soporte de transparencias, guiones
para animacin y entrelazado (la imagen se muestra progresivamente).
A favor: Este formato no ocupa apenas espacio gracias a su efectiva compresin. Por otro lado esta no es tan
destructiva como el JPEG, con lo que nuestras imgenes no pierden demasiada calidad. Otra cualidad
positiva es que al juntar varios GIFs podemos conseguir realizar una pelcula (los famosos GIFs animados).
En contra: Estos archivos slo trabajan con 256 colores, cifra demasiado baja para lo que se viene dando
hoy en da. Para poder disfrutar tanto del visionado fuera de Internet como de la creacin de pelculas
animadas en GIF necesitamos programas especiales. Para ser usado en programas de creacin propia
deberamos pagar derechos a Compuserve, empresa creadora de este formato.
JPEG Joint Photographic Experts Group = grupo de expertos fotogrficos unidos.

Pg. 13
Manual de HTML
4 ESO
Descripcin; Este formato es uno de los estndares ms usados a la hora de incluir imgenes en la red de
redes. Una de sus cualidades ms sobresalientes es su capacidad de comprimirse a voluntad segn las
necesidades que se tenga.
A favor: El trabajo mediante este formato resulta muy cmodo ya que la carga y el cierre de la imagen ms
compleja en JPEG se realiza de una forma rpida. El espacio de disco duro que consume es tan bajo que
permite administrar nuestro disco duro de una manera ms coherente que otros archivos.
En contra: La compresin que realiza de las imgenes es de las que se llaman destructivas. Al comprimir un
archivo a JPEG se pierde bastante informacin. Adems cada vez que volvamos a grabar este archivo,
aunque sea sobre s mismo, este perder an ms calidad.
PNG Portable Network Graphics = Grficos de red porttiles

Descripcin: Para superar los problemas derivados de los derechos de uso del GIF y de la limitacin de
colores, se cre un nuevo formato propuesto por los creadores de los GIF (Compuserve): GIF24. Este
formato incluye un soporte para imgenes con millones de colores y que utiliza un mtodo de compresin
freeware. Utiliza un sistema de compresin sin prdidas.
A favor; Este formato permite importar informacin de todo tipo de archivos para completar la suya propia.
Al pasar alguno de estos archivos a este formato, toda la informacin que ste llevase guardada se conserva
en su totalidad. Al igual que el formato GIF, con PNG tambin se pueden crear pelculas animadas, teniendo
en cuenta que estas pelculas deben ser una secuencia de PNGs, y que uno solo nunca puede constituir una en
s misma. Por ltimo un PNG ocupa mucho espacio y no tiene una compresin excesivamente destructiva.
En contra: Un PNG tarda mucho en ser abierto, y la propia existencia de los GIFs hacen que no est
demasiado difundidos.
Pg. 14
Manual de HTML
4 ESO
TEMA 9: Links o Hiperenlaces o Enlaces

La caracterstica principal de una pgina Web es que podemos incluir LINKS o Hiperenlaces. Un
LINK es un elemento de la pgina que hace que el navegador acceda a otro recurso, otra pgina
Web, un archivo, etc... Para incluir un LINK se utiliza la ETIQUETA <A></A> (Anchor=Ancla). El
texto o imagen que se encuentre dentro de los lmites de esta ETIQUETA ser sensible, esto quiere
decir que si pulsamos con el ratn sobre l, se realzar la funcin de LINK indicada por dicha
etiqueta.
Si el LINK esta indicado por un texto, este aparecer subrayado y en distinto color, si se trata de una
imagen, esta aparecer con un borde rodendola. Esta ETIQUETA tiene el atributo HREF que
indica el lugar a donde nos llevar el LINK si lo pulsamos. Hay tres tipos de enlaces segn su
aspecto (guarda los ejemplos con el nombre de tema9.html y sepralos con una lnea horizontal):
LINK TEXTO
RESULTADO
Para buscar:
<P>Para buscar:</P>
<A HREF=http://www.google.com>IR A GOOGLE </A>
LINK IMAGEN
IR A GOOGLE
RESULTADO
Quieres
divertite?
<P>Quieres divertirte?</P>
<A HREF=http://www.disney.com><IMG SRC=images/aclown1.gif ></A>
LINK MIXTO
RESULTADO
Quieres
divertirte?
<A HREF=http://www.disney.com>Quieres divertirte?<BR> <IMG SRC=

images/aclown1.gif> </A>
En el primer caso, si pulsamos ir a google enlazaramos con el buscador que est en Internet. En
el segundo caso, ocurrira lo mismo, iramos a Disney. En el enlace mixto ocurre exactamente lo
mismo que en el segundo ejemplo, pero con la particularidad de que el enlace es una imagen y un
texto (MIXTO).
Pero los enlaces no slo sirven para enlazar con otras pginas, o a otros recursos. En algunas
ocasiones las pginas creadas pueden tener una cierta extensin y para moverse por ellas es
necesario dividirla en secciones, para acceder a la informacin de forma ordenada y cmoda.
Estamos hablando de las ANCLAS, que no son ms que enlaces dentro de una misma pgina, e
incluso se puede saltar a otra seccin de otra pgina. Veamos un ejemplo:
Pg. 15
Manual de HTML
4 ESO
Ejemplo
Resultado
<P><A HREF=#disco> Ver la DISQUETERA </A>

<P><A HREF=#mem> Ver la MEMORIA</A>
<P><A HREF=#cd> Ver la CD-ROM</A>
<P><A HREF=#monitor> Ver el MONITOR</A>
<P><A HREF=#impre> Ver la IMPRESORA</A>
Ver la DISQUETERA
Ver la MEMORIA
Ver la CD-ROM
Ver el MONITOR
Ver la IMPRESORA
(......)
Al principio de la pgina hemos colocado un pequeo ndice en donde hacemos constar las partes
principales de la pgina web que estamos creando. Bautizamos las anclas con el nombre que
queramos y siempre precedido de la almohadilla (#). Este smbolo indica al navegador que se trata
de una referencia que se encuentra dentro de la pgina actual.
Ejemplo
<P><A NAME=disco> Informacin sobre la DISQUETERA</A></P>
Al comienzo del apartado DISQUETERA colocamos el destino de las anclas. Se ha de colocar el
mismo nombre con el que habamos bautizado el ancla. Ya est completada nuestra ancla.
Pulsando al principio de la pgina, enlaza automticamente con el apartado elegido.
Ejemplo
Resultado
<P><A HREF=#TOP>Volver al principio</A>
Volver al principio
Este es un tipo de ANCLA que viene ya determinado por el navegador y que no hace falta crear.
Automticamente nos transporta al principio de la pgina.
Adems de enlazar con otras pginas web, podemos enlazar:
1.- Con un grupo de noticias (NEWS):
<A HREF=news://news.actualidad.es>Noticias de actualidad</A>
2.-Con un correo electrnico (E-MAIL):
<A HREF=mailto:j1234@terra.es>Enviar sugerencias</A>
3.-Con pginas de nuestro sitio web
<A HREF=pagina1.htm>Ver prctica de TEXTO</A>
NOTA: Cuando enlacemos pginas de nuestro propio sitio web o sede web, debemos evitar el
colocar direcciones absolutas, es decir, evitaremos aludir a la unidad de disco en la que estamos
trabajando, puesto que el HTML entiende que las pginas web se encuentran en la raz del mismo.
En los ejemplos que siguen, los enlaces funcionarn perfectamente en nuestro equipo, o en nuestro
pendrive, pero si queremos colocarlas en Internet para que los dems usuarios puedan visualizar
nuestra pgina, se encontrarn que los enlaces no funcionan porque estn haciendo llamadas al
Pg. 16
Manual de HTML
4 ESO
disco duro o al pendrive del webmaster o responsable de la creacin de la pgina web. El texto
coloreado de azul debera suprimirse para solucionar este problema (recordamos que las pginas
creadas deben estar en la raz del disquete o en una carpeta del disco duro sin hacer alusiones a la
unidad o la carpeta).
<A HREF=file://c:/Mis documentos/pagina1.htm>Ver prctica de TEXTO</A>
<A HREF=file://f:/pagina1.htm>Ver prctica de TEXTO</A>
EJERCICIOS:
Toma la prctica tema7.html y crea anclas en la parte superior con el resto del contenido.
Guardar la prctica con el nombre de tema9.html.
Pg. 17
Manual de HTML
4 ESO
TEMA 10: Mapas de imgenes

En lecciones anteriores hemos explicado como realizar links o enlaces en HTML:
Enlaces de texto
Enlaces de grficos
Segn lo explicado, una imagen tan slo puede tener un enlace. Con la creacin de MAPAS o
IMGENES SENSIBLES podremos definir distintos enlaces en zonas concretas de una misma
imagen. El MAPA es una imagen que tiene asociado un archivo, el MAPA (de ah su nombre) que
tiene definidas un conjunto de zonas a las que se les ha asociado un enlace.
Cmo determinamos las reas que dispondrn de un enlace? Seguimos dos mtodos
Manual Definimos a mano las coordenadas de las zonas calientes utilizando un programa de
tratamiento de imgenes.
MapEdit Con este programa podremos aadir zonas a la imagen, y seleccionar en qu pgina
HTML se quiere aplicar el mapa de imagen automticamente. Lgicamente es ms cmodo.
UTILIZACIN DEL MAPEDIT

1.- Crear una subcarpeta llamada mapa dentro de la carpeta HTML, y disear tres pginas web:
<HTML>
MAPA.HTML
<HEAD>
<TITLE> Usar los mapas </TITLE>
</HEAD>
<BODY>
<H2>Esta pgina est dirigida a los alumnos de bachillerato. Selecciona la materia que deseas
trabajar:</H2>
<P ALIGN=CENTER><IMG SRC=images/libro.jpg BORDER=0></P>
<HR>
<CENTER>
<A HREF=mates.html>MATEMTICAS</A> - <A HREF=filo.html>FILOSOFIA</A> - <A
HREF=bio.html>BIOLOGIA</A> - <A HREF=literatura.html>LITERATURA</A> - <A
HREF=fisica.html>FISICA Y QUIMICA</A> - <A HREF=ingles.html>INGLES</A>
</CENTER>
</BODY>
</HTML>
<HTML>
MATES.HTML
<HEAD>
<TITLE> Matemticas </TITLE>
</HEAD>
<BODY>
<H2>RECURSOS DE MATEMTICAS</H2>
<HR>
Aqu podemos hablar de las ecuaciones bicuadrticas, integrales y derivadas. Podemos realizar una
pgina con ejercicios de funciones... etc.
<HR>
<A HREF=mapa.html>Volver al men</A> </CENTER>
</BODY>
</HTML>
Pg. 18
Manual de HTML
4 ESO
<HTML>
<HEAD>
<TITLE> Sin zona </TITLE>
</HEAD>
<BODY>
<H2>NO HAS SELECCIONADO UN LIBRO</H2>
<HR>
Intntalo de nuevo
<HR>
<A HREF=mapa.html>Volver al men</A> </CENTER>
</BODY>
</HTML>
NO.HTML
2.- Ejecutar MapEdit y seleccionar OPEN HTML

DOCUMENT en el men FILE. Seleccionar la pgina
MAPA.HTM que acabamos de crear.
El programa examina la pgina web y muestra una lista
con todas las imgenes que contenga. Seleccionamos la
imagen que nos interesa. En nuestro caso slo hay una
imagen: LIBRO.JPG, y pulsamos OK.
3.- Si todo ha ido bien, debemos tener en pantalla la
imagen seleccionada. Ahora nos fijamos en la barra de
herramientas que posee MapEdit.
Definir
RECTANGULOS
Definir
CIRCULOS
Definir
POLIGONOS
Abrir
Documento
HTML
Cerrar
Documento
HTML
Guardar
Documento
HTML
Define un
enlace
Mueve
reas
definidas
Pg. 19
Aade
puntos al
polgono
Suprime
puntos al
polgono
Manual de HTML
4 ESO
Seleccionar la herramienta ADD RECTANGLES (Definir rectngulos). Situar el puntero del ratn
en la esquina del libro de matemticas y cubrir el lomo por completo. Hacer clic con el botn
derecho del ratn y automticamente, aparecer una ventana en donde deberemos introducir la
direccin de la pgina web (mates.html) y un texto alternativo (ALT IR A MATEMTICAS).
Pulsamos OK.
4.- Definir un enlace al que se ir si se realiza un clic en una

zona de la imagen en la cual no hemos definido ninguna
seccin:
Abrir FILE
Seleccionar EDIT DEFAULT FILE y escribir la
direccin NO.HTM
Ir a FILE y seleccionar SAVE HTML
DOCUMENT para guardar el mapa construido
(la pgina web MAPA.HTML ha quedado
modificada).
Observa el cdigo HTML generado:

<HTML>
<HEAD>
<TITLE> Usar los mapas </TITLE>
</HEAD>
<BODY>
<H2>Esta pgina est dirigida a los alumnos de bachillerato. Selecciona la materia que deseas
trabajar:</H2>
<P ALIGN=CENTER>
<IMG SRC=images/libro.jpg BORDER=0 usemap="#libro"> </P>
En esta lnea vemos que se ha introducido una etiqueta nueva USEMAP. Sirve para
indicarle al navegador que estamos utilizando un MAPA CLIENTE, es decir, el
navegador es el que gestiona el mapa. Si por el contrario, la gestin del mapa lo hiciera
SERVIDOR tendramos que utilizar la etiqueta ISMAP. El mapa gestionado por el
servidor tiene fundamentalmente dos problemas:
1.- Es ms lento, pues es el servidor el que posee la informacin relativa a los enlaces y
al pulsar una zona del mapa, el navegador enva las coordenadas al servidor y ste a su
vez el enlace correspondiente a esa zona.
2.- No todos los servidores poseen programas para ejecutar este tipo de mapas (CGI).
<HR>
<CENTER>
Pg. 20
Manual de HTML
4 ESO
<A HREF=mates.html>MATEMTICAS</A> - <A HREF=filo.html>FILOSOFIA</A> - <A

HREF=bio.html>BIOLOGIA</A> - <A HREF=literatura.html>LITERATURA</A> - <A
HREF=fisica.html>FISICA Y QUIMICA</A> - <A HREF=ingles.html>INGLES</A>
</CENTER>
A continuacin vemos la etiqueta <MAP NAME=....> </MAP> que sirve para
definir el nombre del mapa ubicado en la pgina web y que ser tratado por el
navegador. En la <NAME> debemos especificar el nombre del mapa, que ser el mismo
que en la etiqueta <USEMAP>
<MAP name="libro">
<AREA
SHAPE="rect"
ALT="IR
A
MATEMATICAS"
HREF="mates.html" TITLE="IR A MATEMATICAS">
COORDS=88,9,279,43"
Dentro de la etiqueta <AREA> podemos definir una serie de atributos:

SHAPE
COORDS
HREF
ALT
NOHREF
Define la forma de la zona, que podr ser rectangular

(RECT), circular (CIRC), poligonal (POLY).
Coordenadas separadas por comas que definen la zona.
Son n
URL a donde se ir cuando se pulse en la zona
determinada.
Texto alternativo que aparecer en los navegadores no
grficos, y en los grficos cuando el ratn pase por
encima de la zona.
Especifica que una zona no tiene asignado enlaces.
<AREA SHAPE="rect" HREF="no.html" COORDS="0,0,399,359">

</MAP>
</BODY>
</HTML>
Pg. 21
Manual de HTML
4 ESO
TEMA 11: Tablas

La informacin contenida
<TABLE></TABLE>.
en
una
tabla
estar
contenida
entre
las
ETIQUETAS
Cada vez que se inicie una fila de la tabla, se introduce la orden <TR>.
La primera columna se ETIQUETA con la orden <TH>.
Las sucesivas columnas utilizan la orden <TD>.
El grosor del borde de la tabla con el atributo BORDER=n (donde n indica el grosor).
Guarda los ejemplos con el nombre de tema11.html
<TABLE BORDER=1>
<TR>
<TH>ETIQUETA</TH>
<TH>FUNCION</TH>
</TR>
<TR>
<TD>TR</TD>
<TD>Introduce una fila</TD>
</TR>
<TR>
<TD>TH</TD>
<TD>Introduce el encabezado en la columna</TD>
</TR>
<TR>
<TD>TD</TD>
<TD>Introduce texto en la siguiente columna</TD>
</TR>
</TABLE>
El resultado de este cdigo es el siguiente:
ETIQUETA
TR
TH
TD
FUNCION
Introduce una fila
Introduce el encabezado en la columna
Introduce texto en la siguiente columna
Observa como los encabezamientos de las columnas (TH) figuran en negrita y centrados, mientras
que el texto de las celdas (TD) aparecen sin resaltar y alineado a la izquierda. Esto es por defecto. Si
queremos modificar la alineacin dentro de la celda debemos emplear el atributo ALIGN (sus
valores son center, right y left):
<TD ALIGN=center>TEXTO DE LA CELDA
Esta alineacin solo afectar a esa celda.
Si queremos unir o fundir varias celdas utilizamos la ETIQUETA <TH COLSPAN=n> <TD
ROWSPAN=n>, segn sean columnas o filas. Veamos un ejemplo:
Pg. 22
Manual de HTML
4 ESO
<TABLE BORDER=1>
<TR>
<TH COLSPAN=2>ETIQUETA y FUNCION</TH>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=CENTER>TR - Introduce una fila</TD>
</TR>
<TR>
<TD>TH</TD>
<TD>Introduce el encabezado en la columna</TD>
</TR>
<TR>
<TD>TD</TD>
<TD>Introduce texto en la siguiente columna</TD>
</TR>
</TABLE>
TH
TD
ETIQUETA y FUNCION
TR - Introduce una fila
Introduce el encabezado en la columna
Introduce texto en la siguiente columna
Pg. 23
Manual de HTML
4 ESO
TEMA 12: Elementos multimedia

Debemos tener en cuenta el tamao de los ficheros de sonido y vdeo, porque aunque el ADSL y el
Cable est ya muy extendido, an no est exento de problemas dado que a determinadas franjas
horarias se producen atascos en la lnea telefnica y la transmisin de datos puede ser lenta y
dificultosa.
Guarda los ejemplos con el nombre de tema12.html
MARQUESINA
La ETIQUETA <MARQUEE></MARQUEE> crea una marquesina con un texto su interior que se
desplaza. Funciona nicamente con el NAVEGADOR EXPLORER de MICROSOFT. Sus atributos
son los siguientes:
border = nmero
Si no se pone este atributo la marquesina no tiene marco o borde. Cuanto mayor sea el n mayor ser
el marco.
align = top / middle / bottom
Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o
en el centro (middle) de la misma.
bgcolor = cdigo de color
Indica el color del fondo de la marquesina.
direction = left right
Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right)
height = nmero porcentaje
Indica la altura de la marquesina en puntos o porcentaje en funcin de la ventana del
NAVEGADOR.
width = nmero porcentaje
Indica la anchura de la marquesina en puntos o porcentaje en funcin de la ventana del
NAVEGADOR.
loop = nmero / infinite
Indica el numero de veces que se desplazar el texto por la marquesina. Si se indica infinite, se
desplazar indefinidamente.
scrolldelay = nmero
Indica el nmero de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor
nmero mas lentamente se desplazar el texto.
<BODY>
<MARQUEE BGCOLOR=RED WIDHT=50% BORDER=0> Bienvenido a mi pagina personal en
lnternet.</MARQUEE>
</BODY>
Pg. 24
Manual de HTML
4 ESO
SONIDO
Nuestra pgina web puede tener un sonido que se active al entrar en la
pgina web, o un mensaje de bienvenida o una msica de fondo. Al igual que las imgenes existen varios formatos
de sonido. Los ms utilizados son:
Sonido Wave Su extensin es *.wav
Sonido MIDI (Musical Instrument Digital Interface) Su extensin es *.mid
Sonido MPEG Su extensin es *.MP2 *.MP3
Necesitan instalacin de
Sonido RealAudio Su extensin es *.RAM o *.RPM.
PLUG-IN
Sonido Windows Media Su extensin es *.WMA.
RealAudio y Windows Media son formatos de transmisin de audio en tiempo real, es decir, conforme se va
descargando de Internet se puede ir oyendo y no hace falta esperar a que llegue todo el archivo. Hay diferencias a
la hora de introducir sonido en la pgina web, segn el navegador.
NAVEGADOR MICROSOFT EXPLORER La ETIQUETA es <BGSOUND>. Sus atributos son:
src =fichero
Indica el nombre del fichero que contiene el sonido (.wav, .mid). Son los dos formatos permitidos en
Internet aunque existen PLUGINS (pequeas aplicaciones que se descargan de Internet) para
escuchar otros formatos.
loop = num / infinite
Indica el nmero de veces que se reproducir el sonido. Si se indica infinite, el sonido se
reproducir de forma continua hasta que abandonemos la pgina.
<HEAD>
<TITLE>Mi pgina WEB</TITLE>
<BGSOUND SRC=sound/felizc.mid LOOP=2>
</HEAD>
NAVEGADOR NETSCAPE NAVIGATOR La ETIQUETA es <EMBED>. Sus atributos son:
src =fichero (Igual que el explorer)
loop = num / infinite (Igual que el explorer)
hidden = true
Ocultamos los controles de audio del navegador.
autostart = true
El sonido empieza a reproducirse automticamente.
<HEAD>
<TITLE>Mi pgina WEB</TITLE>
<EMBED SRC=sound/felizc.mid LOOP=2 HIDDEN=true AUTOSTART=true>
</HEAD>
Si queremos que el cdigo HTML sea vlido independientemente del navegador, incluiremos
ambos cdigos!
Pg. 25
Manual de HTML
4 ESO
Al igual que las imgenes, deberamos tener una carpeta exclusiva para este recurso. Para ellos
crearamos junto a la carpeta IMAGES, otra con el nombre de SOUND.
SECUENCIA DE PGINAS
Para esta animacin crearemos un subcarpeta dentro de la carpeta HTML, y la llamaremos anima.
Dentro de esta carpeta crearemos las cuatro pginas web necesarias para la animacin. La
animacin ms simple y rudimentaria que podemos realizar en una pgina web consiste en la
sucesin automtica de varias pginas web, al estilo de diapositivas. Para conseguir este efecto
debemos introducir la siguiente etiqueta <META> en la cabecera de la pgina web:
<META HTTP-EQUIV=refresh CONTENT=3;URL=presen2.html>
Este cdigo indica lo siguiente al navegador refresh indica que cargue en 3 segundos la pgina
web presen2.html.
EJERCICIO
Crea 4 pginas web con el nombre de PRESEN1.HTML, PRESEN2.HTML, PRESEN3.HTML
y PRESEN4.HTML
1 pgina
<HTML>
<HEAD>
<META HTTP-EQUIV=Refresh CONTENT=3; URL=presen2.html>
</HEAD>
<BODY>
<CENTER><H1>PRACTICAS DE HTML</H1>
<H3>realizadas por</H3></CENTER>
</BODY>
</HTML>
2 pgina
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER><H3>Sinesio Delgado Garca</H3>
<H2>de 1 de Bachillerato A</H2>
<P>
<P>CONTENIDO:</P></CENTER>
</BODY>
</HTML>
3 pgina
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER><H2>Animacin simple de pginas web</H2>
<HR>
Pg. 26
Manual de HTML
4 ESO
<P>Cada tres segundos se presenta una pgina web nueva</P></CENTER>

</BODY>
</HTML>
4 pgina
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER><H2>Esta animacin se la dedico a mi PROFESOR</H2>
<H2>que tanto confa en que apruebe TECNOLOGA DE LA INFORMACIN</P></CENTER>
</BODY>
</HTML>
Para que la animacin sea fluida, los contenidos de las pginas web no debe contener mucho texto e
imgenes.
VDEO
En la actualidad, los 3 formatos de vdeo ms utilizados en Internet son:
1.-Formato MPEG El ms comprimido y de mejor calidad. Necesita de una tarjeta de vdeo
que disponga de un chip descompresor MPEG, y hasta la aparicin del Pentium, este un requisito
imprescindible para poder utilizar este formato.
2.-Formato Quicktime Tiene extensin *.MOV y es de Apple. Permiten un mayor juego que
el anterior, ya que se puede ser editada. Tambin permite ser comprimida con distintos cdecs
(programas que permiten transformar el vdeo en otros formatos) como CINEPACK, APPLE
VIDEO, YUV, INDEO (Intel).
3.-Formato AVI Es el estndar en Windows y desarrollado por Microsoft. No necesita grandes
cantidades de memoria para visionarse. Utiliza los cdecs INDEO y CINEPACK
Hay formatos de vdeo que se transmiten, al igual que el sonido, en tiempo real, es decir, conforme se va
descargando de Internet se puede ir visualizando el vdeo. Estas clases de vdeo son QUICKTIME - Apple -,
REALVIDEO - Real -, WINDOWS MEDIA - Microsoft -. Todos necesitan de programas especiales instalados
en el servidor web y un plug-in instalado en el navegador para que pueda reproducirse.
En HTML, la etiqueta para visualizar vdeo es la misma que para las imgenes <IMG>, pero con atributos
distintos:
DYNSRC= Nombre del vdeo que se desea mostrar.
START= Tiene dos valores fileopen (el vdeo se ejecuta cuando se abre la pgina web) y
mouseover (el vdeo se ejecuta cuando se pasa el puntero del ratn por encima del vdeo).
LOOP= Indica las veces que se va a repetir el vdeo. Si escribimos INFINITE 1 se ejecutar de
forma continua.
LOOPDELAY= Tiempo de espera en milisegundos antes de empezar a visionarse.
WIDTH= Ancho del vdeo
HEIGHT= Alto del vdeo.
ALIGN= Igual que en la insercin de imagen en la pgina web.
Al igual que las imgenes, deberamos tener una carpeta exclusiva para este recurso. Para ellos
crearamos junto a la carpeta IMAGES, otra con el nombre de VIDEO.
Pg. 27
Manual de HTML
4 ESO
<IMG DYNSRC=video/bolos.avi START=mouseover LOOP=1>
TEMA 13: Colores y fondos

El aspecto de una pgina puede modificarse definiendo los colores del tipo de letra, del fondo de la
pgina, de los enlaces, etc. Tambin puede especificarse una imagen de fondo.
La definicin de estos aspectos se realiza en BODY. Recuerda que esta ETIQUETA es una de las
que definen la estructura bsica del documento HTML, como expusimos en la introduccin.
La ETIQUETA <BODY> puede incluir alguno de los siguientes atributos:
BACKGROUND = nombre de la imagen
Establece una imagen de fondo para toda la pgina. Si adems intercalamos el atributo
BGPROPERTIES=FIXED, conseguiremos el efecto etiqueta de agua, es decir, que el fondo se
queda inmvil mientras el texto de la pgina web se desplaza por encima de l cuando nos
movemos por ella.
BGCOLOR = nombre del color o sistema RGB
Define el color de fondo de la pgina.
TEXT= nombre del color o sistema RGB
Define el color del texto de la pgina.
LINK= nombre del color o sistema RGB
Define el color del texto de los enlaces.
VLINK = nombre del color o sistema RGB
Define el color del texto de los enlaces visitados.
ALINK = nombre del color o sistema RGB
Define el color del texto de los enlaces en el momento de pulsarlos.
EJERCICIO: Aadir color de fondo a la prctica tema2.html e imagen de fondo a la prctica

tema5.html
Ejemplo de cdigo HTML:
<BODY BACKGROUND=images/fondo2.jpg TEXT=#000000 LINK=#FF0000 VLINK=#00FF00> introduce imagen
de fondo
<BODY BGCOLOR=black TEXT=#000000 LINK=#FF0000 VLINK=#00FF00> introduce color de fondo
Pg. 28
Manual de HTML
4 ESO
TEMA 14: Formularios

En las pginas web se puede colocar un enlace al correo electrnico del autor para que el usuario
pueda sugerir o comentar algn punto de su visita (ver 7 LECCIN). Pero si lo que se desea es
solicitar informacin puntual (contestar a unas preguntas, solicitar datos personales... etc) el
mecanismo ms adecuado sera los FORMULARIOS. Con ellos, el usuario puede transmitir la
informacin que se le solicite o que l quiera solicitar.
Un formulario es una pgina web en la cual el usuario puede introducir informacin que
posteriormente recibir el webmaster (creador de las pginas web) para que sea procesada por algn
programa que se encuentre en el servidor.
Vamos a ir paso a paso en la construccin de un formulario: (Guarda los ejemplos con el nombre de
tema14.html)
1.- ETIQUETA <FORM></FORM>
Todos los elementos de un formulario deben estar encerrados por esta etiqueta. Los atributos que
afectan a esta etiqueta son:
Action = Es una cadena de caracteres con la direccin URL donde se enviar la informacin del
formulario. Esta URL puede ser un E-MAIL, o una aplicacin que se encuentre ubicada en el
servidor web y que analizar los datos.
Si optamos por el correo electrnico, la URL deber tener el siguiente formato:
mailto@correo_electrnico (por ejemplo, webmaster@hotmail.com). Si utilizamos una aplicacin
ubicada en el servidor (por ejemplo, analiza.exe), la URL deber tener el siguiente formato:
/cgi-bin/analiza.exe
method = Determina el formato de transmisin de los datos del formulario. Posee dos valores GET
y POST.
Es obligatorio utilizar POST si estamos mandando el formulario a una direccin de correo
electrnico. Y para hacer legible los datos enviados aadiremos el atributo enctype=text/plain.
<HTML>
<HEAD>
<TITLE>Ejemplo de formulario</TITLE>
</HEAD>
<BODY>
<H1>PETICIN DE INFORMACIN</H1>
<P>Rellene el siguiente formulario si desea ms informacin de este sitio web:
<FORM
ACTION=mailto:webmaster32@hotmail.com
METHOD=POST
ENCTYPE=text/plain>>
</FORM>
Pg. 29
Manual de HTML
4 ESO
</BODY>
</HTML>
2.- ETIQUETA <INPUT>

Con esta etiqueta se crea un campo dentro del formulario. Los campos de un formulario son las
partes que permiten al visitante del sitio web introducir varios tipos de informacin. El tipo de
campo viene definido por el atributo type.
type=text
(Caja de texto)
Caja de texto que se utiliza para que el visitante teclee datos tales como su
nombre o identificacin. Se configura utilizando los atributos SIZE (tamao de la
caja de texto), MAXLENGTH (mximo de caracteres que podemos escribir),
NAME (define el nombre de la caja dentro del formulario) y VALUE (el texto
que aparece en la caja).
Valor por defecto de

INPUT. En el ejemplo De qu ciudad eres?<INPUT NAME=ciudad VALUE=Madrid SIZE=10
vemos que no se ha MAXLENGTH=15>
declarado
Hemos creado una caja de texto denominada ciudad cuyo valor por defecto es
TYPE=TEXT
Madrid , con tamao de 10 caracteres y como mximo 15.
type=submit/reset
(Botn de formulario)
Son dos botones: SUBMIT se utiliza para enviar la informacin introducida en el

formulario al servidor, RESET se utiliza para eliminar el contenido del
formulario y proporciona la posibilidad de introducir nuevamente los datos. Se
configura utilizando los atributos NAME y VALUE (texto que aparece en el
botn).
<INPUT TYPE=submit NAME=enviar VALUE=Aceptar>
<INPUT TYPE=reset NAME=borrar VALUE=Rechazar>
type=password
(Contraseas)
Este campo se comporta igual que una caja de texto y por lo tanto se configura
igual que ella. La nica diferencia es que al escribir en su interior aparecern
asteriscos en lugar de caracteres.
Si inicialmente lo queremos marcado aadiremos CHECKED.
type=checkbox
(Casillas de seleccin)
<INPUT TYPE=checkbox NAME=aparatos VALUE=ordenador>

ORDENADOR
<INPUT TYPE=checkbox
NAME=aparatos
VALUE=consola
CHECKED> VIDEOCONSOLA
Cuando utilizamos UNA SOLA casilla de seleccin no disponemos del atributo
VALUE, porque si la casilla se selecciona el valor devuelto ser su nombre igual a
ON.
Type=radio
(Botn de seleccin)
Se utiliza cuando el usuario debe seleccionar UN ELEMENTO de un conjunto

dado. Por ejemplo: ordenador o videoconsola. Slo podemos seleccionar uno de
todo el conjunto a diferencia del CHECKBOX que podra seleccionarse ambos.
<INPUT TYPE=radio NAME=aparatos VALUE=ordenador>
ORDENADOR
<INPUT TYPE=radio NAME=aparatos VALUE=consola CHECKED>
VIDEOCONSOLA
Pg. 30
Manual de HTML
4 ESO
Es un campo no visible al usuario. Se emplea cuando un mismo programa CGI

recibe informacin de distintos formularios. As distingue que formulario enva
los datos.
type=hidden
(Campos ocultos)
type=image
(Imgenes)
<INPUT TYPE=hidden NAME=Curso de HTML VALUE=bachilleratoA>

Una persona que utilice el mismo formulario (Curso de HTML) pero lo aplique a
distintos grupos (bachillerato A, bachillerato B... etc) podr distinguir la
procedencia de la informacin.
Es posible introducir imgenes en un formulario que se comportar igual que un
botn tipo SUBMIT. La informacin que enve al servidor vendr acompaada de
las coordenadas X e Y donde el usuario la puls.
<INPUT TYPE=image SRC=images/aclown1.gif ALT=Pulsa>
para que realicen algn tipo de tarea.
<HTML>
<HEAD>
<TITLE>Ejemplo de formulario</TITLE>
</HEAD>
<BODY>
<H1>PETICIN DE INFORMACIN</H1>
<P>Rellene el siguiente formulario si desea ms informacin de este sitio web:
<FORM ACTION=mailto:leo@hotmail.com METHOD=POST ENCTYPE=text/plain>
D
que
ciudad
MAXLENGTH=15>
eres?<INPUT
NAME=ciudad
VALUE=Madrid
SIZE=10
<P>Cales de estos aparatos tienes en casa?

<BR><INPUT TYPE=checkbox NAME=aparatos VALUE=ordenador> ORDENADOR
<BR><INPUT TYPE=checkbox NAME=aparatos VALUE=consola CHECKED>
VIDEOCONSOLA
<P>Elige un aparato de la lista?
<BR><INPUT TYPE=radio NAME=aparatos VALUE=ordenador> ORDENADOR
<BR><INPUT
TYPE=radio
NAME=aparatos
VALUE=consola
CHECKED>
VIDEOCONSOLA
<P>Ejemplo de imagen en un formulario<INPUT TYPE=image SRC=images/aclown1.gif
ALT=Pulsa>
<HR>
<P><INPUT TYPE=submit NAME=enviar VALUE=Aceptar>
<INPUT TYPE=reset NAME=borrar VALUE=Rechazar>
</FORM>
</BODY>
</HTML>
Pg. 31
Manual de HTML
4 ESO
3.- ETIQUETA <TEXTAREA></TEXTAREA>

Con <INPUT> podemos crear cajas de texto de una sola lnea. SI queremos crae un caja de texto en
la cual podamos escribir ms de un lnea tendremos que utilizar la etiqueta <TEXTAREA>.
Sus atributos son:
name = determinamos su nombre
rows = el tamao en filas. OBLIGATORIA
cols= el tamao en columnas. OBLIGATORIA
<TEXTAREA NAME=Sugerencias ROWS=10 COLS=50>
Escriba aqu su sugerencias
</TEXTAREA>
4.- ETIQUETA <SELECT> </SELECT> y <OPTION>
(LISTA DE SELECCIN)
Con <SELECT> se define una lista y con <OPTION> especificamos los elementos que
compondrn dicha lista y siempre se utilizar dentro de <SELECT>.
Sus atributos son:
name = determinamos su nombre
size = Indica el nmero de opciones que podremos ver. Si su valor es igual a 1 obtendremos como
resultado una lista desplegable, si es mayor de 1 tendremos una lista con el nmero de fila
especificado.
multiple = Si lo indicamos podremos seleccionar ms de un elemento de la lista.
<SELECT NAME=envio>
<OPTION>E-mail
<OPTION>FAX
<OPTION>Correo ordinario
</SELECT>
Aade las etiquetas 3 y 4 a la prctica de este tema.
Pg. 32
Manual de HTML
4 ESO
TEMA 15: Frames o Marcos

Los marcos o frames permiten dividir la ventana del navegador en varias secciones, en cada una de
las cuales se presenta un pgina web distinta. Fue Netscape 2.0 quien introdujo Un marco es una
ventana independiente dentro de la ventana general del navegador y por lo tanto tendr sus propios
bordes y sus propias barras de desplazamiento.
Para crear marcos necesitamos construir una pgina web especfica, en la que se tendrn que definir
cuntos marcos existirn y dnde los vamos a colocar. Vamos a ver cual es la estructura:
<HTML>
<HEAD>
<TITLE>Pgina con marcos</TITLE>
</HEAD>
<FRAMESET COLS=20%,80%>
<FRAME NAME=indice SRC=mapa.htm>
<FRAME NAME=contenido SRC=mates.htm>
</FRAMESET>
</BODY>
<NOFRAMES>
<P>No puedes visualizar esta pgina porque tu navegador no capacidad para visualizar
marcos.</P>
</NOFRAMES>
</BODY>
</HTML>
Observamos que la cabecera (HEAD) es igual a una pgina web normal, pero en lugar de seguirle el
cuerpo (BODY), le sigue <FRAMESET>. Esta etiqueta hace referencia al conjunto de marcos que
se abrir en el navegador. Estos marcos pueden situarse en columnas o en filas. En nuestro ejemplo
hemos dividido la ventana del navegador en dos columnas (<COLS>). Si quisiramos hacerlo en
filas, el atributo que deberamos escribir es <ROWS>.
<ROWS> y <COLS> se emplean para definir el nmero y tamao de filas y columnas. Debemos
asignarles un tamao separado por comas. Se admiten los siguientes formatos de tamao:
PORCENTAJES
ABSOLUTO Es un nmero que indica el tamao en pixels (parte ms pequea de una
imagen que un ordenador puede controlar. La mayora de imgenes se compone de miles
de estos pxeles. Por lo tanto se constituye tambin como medida del rea que aparece en
la pantalla de un ordenador y que principalmente son las siguientes: 640x480, 800x600,
1024x768.
ESPACIO SOBRANTE Si colocamos un asterisco (*), estaremos indicando que todo
el espacio sobrante sea un marco. Si colocamos varios asteriscos y queremos que uno
tenga ms espacio, ponemos un nmero delante: 2* ser dos veces ms grande que el
simple asterisco.
Pg. 33
Manual de HTML
4 ESO
Veamos ejemplos:
El usuario dispone de una resolucin de 800x600 pxeles en su monitor, su FRAMESET podra
quedar de la siguiente manera:
<FRAMESET COLS=20%,*,400,2*>.
Observa que no quedan espacios entre coma y coma. Segn lo escrito en este cdigo deducimos lo
siguiente:
1.- El primer marco ocupa el 20% de la pantalla, es decir, 160 pxeles.
2.- El tercer marco ocupa 400 pxeles y por lo tanto para los otros dos marcos me quedan 320
pxeles (800-160-400=240).
3.- El cuarto marco es el doble del segundo (240:3=80), es decir que el segundo marco dispondr de
80 pxeles y el cuarto de 160.
4.- Suma 160+80+400+160= 800 pxeles de la pantalla.
Consejo: Se recomienda trabajar en porcentajes.
Continuamos con nuestro ejemplo de principio de leccin:
<FRAME NAME=indice SRC=mapa.htm>
<FRAME NAME=contenido SRC=mates.htm>
tenamos dos marcos, uno con el 20% del rea de la pantalla y el otro, mayor, con el 80%. Tras
definir los tamaos, hay que definir las caractersticas de un marco determinado y para ello nos
valemos de la etiqueta <FRAME>. Dentro de ella podemos definir los siguientes atributos:
NAME= Asigna un nombre a un marco para que despus podamos referirnos a l. En
nuestro ejemplo les hemos puesto el nombre de indice y contenido respectivamente.
SRC= Indica la direccin de la pgina web que ocupar el marco. En nuestro caso,
mapa.htm y mates.htm respectivamente.
La etiqueta <NOFRAMES>
<P>No puedes visualizar esta pgina porque tu navegador no tiene capacidad para visualizar
marcos.</P>
</NOFRAMES>
define lo que ver el usuario que no disponga de un navegador preparado para visualizar marcos.
EN DEFINITIVA, lo que hace <FRAMESET> es definir marcos, ponerles nombre,
especificar que pgina web le corresponde en la etiqueta <FRAME> y en el supuesto de
que el usuario no soporte marcos, avisarle.
Otros atributos que podemos colocar dentro de la etiqueta <FRAMESET> son:
FRAMEBORDER= Indica si se visualizan o no los bordes de los marcos. Sus valores son
YES, NO 0.
Pg. 34
Manual de HTML
4 ESO
FRAMESPACING= Es el espacio que deja entre marcos. Si tenemos por ejemplo un border
de tamao 10, e indicamos en el espacio mximo entre marcos sea 5, slo se visualizar la mitad
del border indicado.
BORDER= Permite especificar el ancho del borde entre marcos en pxeles.
BORDERCOLOR= Define el color del borde en formato hexadecimal o en ingls.
Otros atributos que podemos colocar dentro de la etiqueta <FRAME> son:
SCROLLING= coloca barras de desplazamiento al marco para que podamos movernos por
su contenido. Si no se pone el navegador toma la decisin de ponerlas o no segn la extensin del
contenido del marco. Si queremos verlas de todas formas ponemos el valor YES y si no las
queremos ver ponemos NO.
NORESIZE= El usuario no puede cambiar el tamao del marco.
ANIDACIN DE LA ETIQUETA <FRAMESET>

Esta etiqueta se puede anidar, es decir podemos colocar
un <FRAMESET> dentro de otro <FRAMESET> en el
lugar donde colocamos normalmente <FRAME>.
Para qu posee esta caracterstica?
Imaginemos por un momento que deseamos dividir la
pantalla del navegador segn la estructura que vemos
en el dibujo de la izquierda. Para ello el cdigo HTML
que debemos disear es el siguiente: (Guarda los
ejemplos con el nombre de prac14.htm)
<HTML>
<HEAD>
<TITLE>Pgina con marcos</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%*">
<FRAME NAME=cabecera SRC=mates.htm>
<FRAMESET COLS="20%,60%,20%" >
<FRAME NAME=columna1 SRC=no.htm>
<FRAME NAME=columna2 SRC=mapa.htm>
<FRAME NAME=columna3 SRC=mates.htm>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
marcos.</P>
</BODY>
</NOFRAMES>
</HTML>
Pg. 35
Manual de HTML
4 ESO
Descripcin del cdigo: Hemos definido dos filas (ROWS) y en la siguiente lnea llamamos
cabecera a la primera fila y la siguiente fila, en lugar de darle un nombre ANIDO otro conjunto de
marcos (FRAMESET) y defino que en la segunda fila habr 3 columnas, cada una con su nombre,
ancho y pgina web visible. Cerramos <FRAMESET>.
Despus ante la posibilidad de que no se vean los marcos aadimos la etiqueta <NOFRAMES>. El
resultado es la figura superior.
Normalmente vamos a utilizar los marcos para conseguir las siguientes estructuras en la ventana del
navegador:
INDICE
CONTENIDOS
INFORMACIN ADICIONAL
INDICE
CONTENIDOS
INDICE
INFORMACIN
ADICIONAL
CONTENIDOS
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva pgina a la
queremos acceder se ver encerrada en ese mismo marco. Segn los posibles esquemas planteados
anteriormente, nos gustara que los enlaces del marco INDICE se abrieran en el marco
CONTENIDOS. Esto ser posible si utilizamos el ATRIBUTO <TARGET> (=destino, objetivo).
Este atributo nos indica en qu marco deber cargarse la pgina especificada. Tenemos que escribir
el nombre del marco exactamente igual que como lo hemos escrito al definir los marcos, respetando
las maysculas y minsculas.
Por defecto existen nombres de marcos predefinidos y con una funcin determinada:
_blank Carga el enlace en una ventana nueva.

Pg. 36
Manual de HTML
4 ESO
_top Carga el enlace en la ventana donde estn los marcos

_self Carga el enlace en el marco donde tiene su enlace.
_parent Carga el enlace en el marco padre (usualmente la ventana completa del navegador).
CASO PRACTICO:
1.-Creamos una pgina especfica de marcos, que guardaremos como index.html
<HTML>
<HEAD>
<TITLE>Contenido del curso</TITLE>
</HEAD>
<FRAME NAME=indice SRC=indice.html>
<FRAME NAME=contenido SRC=presenta.html>
</FRAMESET>
</BODY>
<NOFRAMES>
marcos.</P>
</NOFRAMES>
</BODY>
</HTML>
2.-Hemos creado una pgina con dos marcos llamados indice y contenido. A la 1 le hemos asociado
una pgina llamada indice.html y a la 2, presenta.html. Como no existen estas pginas las creamos.
3.- Creacin de indice.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<P><FONT COLOR=BLUE><B><U>INDICE</B></U></FONT>
<UL>
<LI><A HREF=tema2.html TARGET=contenido>Esqueleto Cabecera Espaciado </A> </LI>
<LI><A HREF=tema5.html TARGET=contenido>Lnea horizontal y colores</A> </LI>
(....)
</UL>
</BODY>
</HTML>
Hemos creado el ndice de contenidos y con TARGET le estamos indicando que las pginas web se
visualicen en el marco contenido.
4.-Creacin de presenta.html
Creamos una pgina web en donde conste:
1 lnea PRACTICAS DE HTML en <H1>
2 lnea Nombre del alumno/a, Curso y grupo, Materia
3 lnea Ao acadmico, nombre del profesor
5.-Ejecuta index.html
Pg. 37
Manual de HTML
4 ESO
TEMA 16: Consideraciones finales

1.- En ocasiones es importante escribir comentarios en el documento HTML sin que se muestren en
la ventana del navegador. Para ello utilizamos la siguiente etiqueta


todo lo que quede incluido dentro de ellos no se ver a menos que se edite el cdigo HTML.

2.- En HTML existen cuatro caracteres especiales que se utilizan para construir el cdigo y no
pueden ser empleados para nada ms. Pero si deseamos utilizarlos en un momento dado sin que
entrae riesgo para nuestro cdigo, se pueden escribir codificados:
CDIGO RESULTADO
<
>
&
"
<
>
&
En el apndice final encontrars todos los caracteres especiales ISO Latin-1 y ISO 8859-1 que
pueden escribirse en HTML.
3.-Una pgina web debe ofrecer al usuario informacin clara y efectiva. Si una pgina es demasiado
extensa debe descomponerse en varias. Las ventajas son que se cargar antes en el navegador y el
usuario no se empachar de informacin.
4.- Si la informacin es mayoritariamente texto hay que usar encabezamientos y listas.
5.-El encabezamiento H1 es para indicar temas importantes y el H2 para indicar subtemas
relacionados.
6.-Buen gusto en el diseo. No jugar con los colores, ni colocar excesivos grficos (que adems
dificultan la carga rpida de la pgina web). Mantener uniformidad en cuanto a fondos, anagramas,
colores y tipo de fuente. Los fondos no deben impedir la lectura fluida del texto (ESTO ES MUY
IMPORTANTE).
7.-Qu los ttulos de las pginas sean significativos para que cuando el usuario guarde nuestra
pgina en su lista de favoritos pueda saber de qu se trata.
8.-Tiene que existir una pgina introductoria donde quede claro el contenido de nuestro sitio web.
Esto ayuda a los usuarios que no usan navegadores no grficos y a los buscadores que catalogan las
pginas por el contenido de las palabras iniciales.
9.- No hay que abusar de las lneas horizontales (HR).
Pg. 38
Manual de HTML
4 ESO
10.-Hay que ofrecer al usuario la oportunidad de ponerse en contacto con el autor o autores del sitio
web, para que pueda dirigir todo tipo de sugerencias o comentarios a travs del correo electrnico o
mediante libros de visita o formularios.
11.-Ofrecer links a pginas de contenido similar al nuestro. La informacin debe fluir en todas
direcciones. Todos nos beneficiamos.
12.-Es conveniente colocar la fecha de la ltima modificacin, as como escribir un cdigo HTML
claro y limpio, intercalando comentarios aclaratorios por si hay que realizar modificaciones
posteriores.
13.-Respeto ante todo y ante todos. Mucho cuidado con lo que se escribe y cmo se redacta. Piensa
que tu pgina pueden verla miles de personas que buscan una informacin certera, objetiva y
rigurosa. No os inventis los contenidos y siempre que se pueda, hay que plasmar cules son las
fuentes de informacin que se han utilizado.
Pg. 39
Manual de HTML
4 ESO
TEMA 17: Ampliacin

CONTADORES
Uno de los aspectos que ms vistosidad da a una pgina Web es la aparicin de un contador en el
cual aparezca reflejado el nmero de personas que han visitado esa pgina. Este aspecto sirve tanto
para el creador de la pgina Web, que observa la aceptacin que est teniendo su pgina, como para
el visitante, que observa el xito de esa pgina. En todos los servicios de contadores est prohibido
hinchar de una forma artificial este nmero (Por ejemplo, que el creador de la pgina entre 20 o
30 veces al da, para hacer ver que su pgina tiene mucha aceptacin). Un contador no es algo que
cada usuario pueda crear para s, ya que presenta una gran complejidad de programacin as como
de seguridad, por eso existen empresas que, bien sea cobrando o insertando publicidad, permiten
que podamos usar sus contadores.
El PNTIC del MEC, Programa de Nuevas Tecnologas de la Informacin y Comunicacin del
Ministerio de Educacin y Cultura ofrece la posibilidad de usar su servicio de contadores, bscalo
en la pgina web del PNTIC que est en www.pntic.mec.es en la opcin Ayuda sobre Internet/contadores. Si no dispones de esta posibilidad existen empresas que se dedican a dar este servicio.
Puedes averiguarlas usando un buscador en Internet (http://www.servicont.com). Entrando en ellas
podrs ver las condiciones que exigen cada una para poder usar su servicio de contadores: en ciertos
casos exigen como condicin que aparezca su nombre en la pgina Web donde se vaya a insertar el
contador; en otros, que aparezca el icono de su empresa, etc.
Todos los sistemas de contadores son anlogos, disponen de un identificador de usuario, as como
de una clave de acceso con los cuales se garantiza el uso correcto del servicio de contadores. Una
vez que nos hemos dado de alta en alguno de los servicios, nos mandan, ya sea a travs de
informacin por pantalla o bien a travs de un correo electrnico, las instrucciones para poder usar
el contador. En la mayora de los casos suele ser una etiqueta HTML y nosotros slo hemos de
editar la pgina Web e insertar la etiqueta en el punto que ms nos interese. Para aadir estas
etiquetas se recomienda hacerlo con el Editor de textos, aunque tambin se puede hacer con un
editor de pginas web.
PUBLICAR EN INTERNET UNA PGINA WEB
Una vez creada de forma local nuestra pgina Web, llega el momento de colocarla en un ordenador
que pertenezca a Internet (SERVIDOR). Qu pasos debemos seguir para colocar cualquier pgina
Web en otro servidor?
1.
2.
3.
4.
5.
6.
7.
8.
9.
Nos conectamos a Internet.

Abrimos un programa FTP.
Aparece la ventana del programa y superpuesto un cuadro de dilogo en la parte derecha.
Rellenamos los cuadros de texto como indicamos y hacemos clic en el botn Ok. La clave o
Password aparece con asteriscos para que ninguna otra persona pueda utilizar esta cuenta de
correo.
En el programa FTP tenemos dos frames.
En el de la izquierda tenemos el sistema local, es decir, nuestro ordenador. En ste buscamos
la carpeta en la que tenemos nuestra pgina Web. La pgina Web principal, la primera que se
carga, tiene que tener de nombre index.html.
En el de la derecha tenemos el sistema remoto, es decir, nuestra carpeta en el servidor.
Creamos una carpeta en el ordenador remoto y le damos el nombre que deseemos.
Cambiamos a la carpeta recin creada.
Pg. 40
Manual de HTML
4 ESO
10. Seleccionamos en el sistema local todos los archivos que componen nuestra pgina Web:
pginas Web, ficheros grficos, animaciones GIF, etc., y las carpetas que contengan el resto
de archivos y los copiamos en la carpeta creada en el servidor.
A partir de este momento todo el mundo puede acceder a nuestra pgina Web.
HOJAS DE ESTILO o STYLESHEETS
El uso de estilos semnticos en HTML permite especificar el significado de los bloques de texto que
componen un documento, dejando al visualizador la eleccin del estilo fsico concreto que se aplica
a dichos bloques. Sin embargo, cada diseador tiene sus propias preferencias en cuanto a fuentes,
encabezados, colores, etc. En suma, cada diseador tiene lo que se suele denominar un estilo, el
cual desea imprimir a sus documentos.
Hasta ahora, la nica forma de dar un estilo a un documento HTML es a travs de elementos como
FONT o atributos como ALIGN y BGCOLOR, aunque con la desventaja de originar documentos
grandes y algo confusos. La solucin es aadir la informacin correspondiente al estilo del
documento de forma independiente al propio documento. Esto se conoce como el mecanismo de las
hojas de estilo, o stylesheets. Una hoja de estilo es un documento aparte que expresa, mediante un
determinado lenguaje, informacin correspondiente al estilo de un documento HTML. Las hojas de
estilo se pueden mantener de manera independiente y, lo que es ms, se pueden tener varias hojas de
estilo y aplicarlas a un mismo documento para distintos dispositivos de salida (como la pantalla y la
impresora).
Una hoja de estilo puede tener instrucciones como las siguientes:
H1 {font-size=24pt; font-family=arial; text-align: center;}
H2 {font-size=18pt; font-family=arial; text-align: left;}
EM {font-style=italics;}
Las hojas de estilo tienen dos ventajas fundamentales:
Permiten aplicar un mismo estilo a varios documentos
Disminuyen el tamao del documento HTML
Las hojas de estilo se escriben con un lenguaje. El actualmente implementado se denomina CCS
(cascading stylesheets o estilos en cascada), y est diseado para ser simple de usar y de
implementar.
Pg. 41
Manual de HTML
4 ESO
Formas de incluir una hoja de estilo en un documento:

1.- Enlazar el documento con la hoja de estilo mediante el elemento LINK, que tiene la siguiente
sintaxis:
<LINK REL="stylesheet" TYPE="mime/ccs" HREF="estilo.css">
Donde rel="STYLESHEET" indican que el enlace es con una hoja de estilos, type="text/css" indica que el archivo
es de texto, en sintaxis CSS y href="estilo.css" indica el nombre del fichero fuente de los estilos
La ventaja principal de este mtodo es que una misma hoja de estilo se puede usar para varios documentos sin
necesidad de incluirla en todos ellos. El fichero estilo.css es un texto normal, que puede tener cualquier extensin,
aunque le podemos asignar la extensin .css para aclararnos. El texto que debemos incluir debe ser escrito
exclusivamente en sintaxis CSS (NO se puede incluir cdigo HTML) y escrito con el editor de textos. Podemos ver un
ejemplo a continuacin:
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : black;
margin-left: 10%;
margin-right: 10%;
}
2.- Incluir la hoja de estilo en el documento con el elemento STYLE, como muestra el siguiente
ejemplo:
<STYLE>
<!-BODY {
font-family: times, serif;
color: black;
margin-left: 10%;
margin-right: 10%;
}
A:link {color: black; text-decoration: underline}
A:visited {color: black; text-decoration: none}
-->
</STYLE>
Los elementos LINK y STYLE se colocan dentro del elemento HEAD. Los comentarios esconden
la hoja de estilo a los visualizadores que no la interpretan.
Pg. 42
Manual de HTML
4 ESO Tecnologa de la Informacin
Pg. 43
Manual de HTML
4 ESO Tecnologa de la Informacin
Pg. 44

Manual HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual HTML

Загружено:

Авторское право:

Доступные форматы

Manual de HTML

TEMA 1: Introduccin al HTML

ACCESORIOS EDITOR DE TEXTOS

2. La peor forma de aprender HTML es utilizando un EDITOR DE HTML (Dreamweaver, Namo

TEMA 2: Esqueleto bsico de un documento HTML

3.-Guarda tu documento HTML

1.-Archivo Guardar como

Realizamos un doble clic y automticamente se abre el navegador. La pgina est vaca de

TEMA 3: Cabecera de la pgina

TEMA 4: Espaciados y saltos de lnea

Abre la tema2.html y aade todas los ejemplos de este tema

TEMA 5: Lnea Horizontal y Colores

Ahora accede a la calculadora de WINDOWS, y en el men VER, selecciona calculadora cientfica.

TEMA 6: Cabeceras y atributos del texto

<H2>Encabezado tipo 2</H2>

<H3>Encabezado tipo 3</H3>

<H4>Encabezado tipo 4</H4>

<H5>Encabezado tipo 5</H5> Encabezado tipo

<I></I> o <EM></EM> <I>Cursiva</l>

TEMA 7: Lista de elementos (VIETAS)

EJERCICIOS: Guarda el ejercicio con el nombre de tema7.html

TEMA 8: Formatos grficos

<IMG SRC=images/aclown1.gif ALT=Soy PIPO>

<IMG SRC=f:/images/aclown1.gif ALT=Soy PIPO>

GIF Graphics Interchange Format = Formato de intercambio de grficos

JPEG Joint Photographic Experts Group = grupo de expertos fotogrficos unidos.

PNG Portable Network Graphics = Grficos de red porttiles

TEMA 9: Links o Hiperenlaces o Enlaces

<A HREF=http://www.disney.com>Quieres divertirte?<BR> <IMG SRC=

<P><A HREF=#disco> Ver la DISQUETERA </A>

<P><A HREF=#TOP>Volver al principio</A>

TEMA 10: Mapas de imgenes

UTILIZACIN DEL MAPEDIT

2.- Ejecutar MapEdit y seleccionar OPEN HTML

4.- Definir un enlace al que se ir si se realiza un clic en una

Observa el cdigo HTML generado:

<A HREF=mates.html>MATEMTICAS</A> - <A HREF=filo.html>FILOSOFIA</A> - <A

Dentro de la etiqueta <AREA> podemos definir una serie de atributos:

Define la forma de la zona, que podr ser rectangular

<AREA SHAPE="rect" HREF="no.html" COORDS="0,0,399,359">

TEMA 11: Tablas

TEMA 12: Elementos multimedia

<P>Cada tres segundos se presenta una pgina web nueva</P></CENTER>

<IMG DYNSRC=video/bolos.avi START=mouseover LOOP=1>

TEMA 13: Colores y fondos

EJERCICIO: Aadir color de fondo a la prctica tema2.html e imagen de fondo a la prctica

TEMA 14: Formularios

2.- ETIQUETA <INPUT>

Valor por defecto de

Son dos botones: SUBMIT se utiliza para enviar la informacin introducida en el

<INPUT TYPE=checkbox NAME=aparatos VALUE=ordenador>

Se utiliza cuando el usuario debe seleccionar UN ELEMENTO de un conjunto

Es un campo no visible al usuario. Se emplea cuando un mismo programa CGI

<INPUT TYPE=hidden NAME=Curso de HTML VALUE=bachilleratoA>

<P>Cales de estos aparatos tienes en casa?

3.- ETIQUETA <TEXTAREA></TEXTAREA>

Aade las etiquetas 3 y 4 a la prctica de este tema.

TEMA 15: Frames o Marcos

ANIDACIN DE LA ETIQUETA <FRAMESET>

_blank Carga el enlace en una ventana nueva.

_top Carga el enlace en la ventana donde estn los marcos

TEMA 16: Consideraciones finales

TEMA 17: Ampliacin