HTML

Instituto Tecnolgico Especializado en Computacin
I nstituto T ecnolgico E specializado

Derechos
Todos
de
los
trabajo
ningn
puede
medio,
grabacin,
de
Derechos
ni
reproducirse
electrnico
por
informacin,
sin
ningn
Reservados
Reservados.
ni
parte
transmitirse
mecnico,
sistema
permiso
Ninguna
por
de
C omputacin
en
bajo
2008
de
ninguna
incluyendo
almacenamiento
escrito
del
este
cuaderno
forma
fotocopiado
recuperacin
editor.
HTML
Instituto Tecnolgico Especializado en Computacin e Ingls
ALUMNO:
MATRICULA:
GRUPO:
TEL. EMERGENCIA:
DIRECCION:
PROFESOR:
PROFESION:
EXPERIENCIA PROFESIONAL:
HTML
HORARIO:
TIPO DE SANGRE:
TEL. TRABAJO:
Indice
TEMA
PGINA
CAPTULO 1 INTRODUCCIN AL CURSO

1.1 UNA BREVE HISTORIA
1.2 REQUISITOS
1.3 CONTENIDO
1.4 ESTRUCTURA DE LAS PGINAS
1.5 ACCESIBILIDAD
1.6 DISEO
5
6
6
7
8
8
CAPTULO 2 MI PRIMERA PGINA

2.1 EL CDIGO
2.2 LA EXPLICACIN
2.3 EL CUERPO DEL DOCUMENTO
9
10
11
CAPTULO 3 ESTRUCTURA DEL DOCUMENTO

3.1 LA CABECERA
3.2 CONFIGURACIN DEL CUERPO
3.3 FORMATO DE PRRAFO
12
15
18
CAPTULO 4 FORMATO A LA PGINA

4.1 LAS 6 CABECERAS
4.2 CAMBIANDO EL TIPO DE LETRA
4.3 FORMATO DE LA FRASE
4.4 OTROS ELEMENTOS
4.5 CAMBIO DE COLOR
4.6 TAMAOS DEL TEXTO
4.7 TIPOS DE LETRA
20
21
22
23
24
24
25
CAPTULO 5 CARACTERES Y LISTAS

5.1 CARACTERES EXTENDIDOS EN HTML
5.2 CARACTERES CONTROL
5.3 LISTAS DESORDENADAS
5.4 LISTAS ORDENADAS
5.5 LISTAS DE DEFINICIONES
25
26
27
28
29
CAPTULO ENLACES 6
6.1 LA ETIQUETA <A>
6.2 LAS URLS
6.3 ANCLAS
6.4 IMGENES Y ENLACES
6.5 ALINEACIN CON RESPECTO AL TEXTO
30
30
34
35
36
CAPTULO 7 SONIDO
7.1 SONIDO ACTIVADO POR EL USUARIO
7.2 SONIDO DE FONDO
36
37
CAPTULO 8 FORMULARIOS
8.1 CAJAS DE TEXTO
8.2 OPCIONES
8.3 BOTONES DEL FORMULARIO
8.4 OTROS ELEMENTOS
8.5 ETIQUETAS
8.6 AGRUPACIN DE ELEMENTOS
8.7 DESACTIVACIN DE ELEMENTOS
38
40
41
41
42
42
43
HTML
Indice
TEMA
PGINA
CAPTULO 9 MAPAS Y TABLAS

9.1 MAPAS GESTIONADOS POR EL CLIENTE
9.2 COMO USAR UN MAPA
9.3 DEFINIR FILAS
9.4 DEFINIR CELDAS
9.5 TTULO DE LA TABLA
HTML
43
44
45
46
47
1 INTRODUCCIN AL CURSO
1.1 UNA BREVE HISTORIA
HTML, Lenguaje de Marcacin de Hipertexto, es el lenguaje de marcas de texto utilizado normalmente en la WWW
(Internet). Fue creado en 1986 por el fsico nuclear Tim Berners-Lee; el cual tom dos herramientas preexistentes: el
concepto de Hipertexto (conocido tambin como link o ancla) que permite conectar dos elementos entre s y el
SGML (Lenguaje Estndar de Marcacin General) que sirve para colocar etiquetas o marcas en un texto que
indique como debe verse.
HTML es un sistema de etiquetas.
En 1989 Tim Berners-Lee, a la sazn en el Centro Europeo de Investigaciones Nucleares presenta el artculo
Information Management, dedicndose de lleno al desarrollo de un sistema que permitiera el acceso en lnea de manera
uniforme a la informacin disponible en muchos recursos distintos y que pudiese funcionar en mquinas conectadas por
redes.
En 1990 Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized Markup
Language) que ms tarde se llamar nivel 0; soporta encabezados, listas y anclas.
Entonces se crea el nombre World Wide Web (WWW).
1990 Berners-Lee introduce el primer visor de HTML, Line Mode, que trabaja en modo texto y slo en plataformas UNIX.
El Centro Europeo de Investigaciones Nucleares realiza la apertura del primer sitio con acceso pblico de World Wide
Web el 17 de mayo.
HTML
En 1992 Dan Connolly produce la primera definicin de Tipo de Documento (DTD) para el lenguaje, llamada
HTML 1.0, agregando a la definicin original atributos para modificar el estilo fsico del texto. Se distribuye Viola, el
primer visor grfico de Web.
En 1996 Netscape Communications y Microsoft presentan las nuevas versiones de sus visores que
soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que implementan la norma completa de
HTML 3.0.
En 1998 se crea una nueva versin, HTML 4.0.
1.2 REQUISITOS
El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los
sistemas operativos Windows (Bloc de notas), Word Pad, Microsoft Word por mencionar algunos ejemplos.
El nico requisto es que despus de anotar las etiquetas debemos de guardar el archivo la extensin .htm
o .html
Es importante mencionar que despus de guardarlos en formato html esta informacin es presentada por
los visores, en este caso nosotros utilizaremos Microsoft Internet Explorer.
1.3 CONTENIDO
Cualquier pgina ser visitada si su contenido es interesante. Casi da lo mismo su estructura y diseo si la
informacin que contenga es bastante interesante para la persona que la visite. As que es de mucha
importancia pensar en el contenido que va a tener nuestra pgina.
HTML
La mayora de las veces lo que interesa a los usuarios y lo que a nosotros nos interesa, no es lo
mismo. As pues, el mejor modo de conseguir que vean lo que queremos ofrecer es lo que los usuarios desean ver.
Si usted disea una pgina personal que incluya algunos relatos personales o gustos musicales, esta pgina no
tendra mucha difusin, pero tambin puede incluir algunos cursos, canciones o noticias que pueden ser de
inters para muchas personas.
Conviene tambin, sabiendo que la persona que ha acudido a la pgina por el beneficio que le proporciona un
tema especfico, facilitar enlaces a otras pginas donde contengan informacin similar.
1.4 ESTRUCTURA DE LAS PGINAS

Es fundamental que a la hora de crear pginas debemos de pensar en una estructura comn y consistente,
porque facilita la navegacin al usuario y le confiere personalidad propia.
Un tip que se debe tener en cuenta es que las pginas no sean ni muy cortas ni muy largas; las
pginas deben contener informacin suficiente para atraer a las personas que la visiten y no tanta como para cansar
o aburrir al lector.
Conviene que el primer prrafo o las primeras frases de todas las pginas tengan un resumen que
de idea del contenido del resto de la misma. Eso ayuda al usuario a que pueda localizar fcilmente la informacin
que necesite.
A su vez, es conveniente indicar cul es la fecha de la ltima modificacin de la pgina, para que el
usuario se de cuenta de que se ha agregado nueva informacin.
Por ltimo, uno de los aspectos ms importantes de Internet, como medio, es la facilidad de comunicacin
entre creadores y usuarios: se puede facilitar incluyendo una direccin de correo.
HTML
1.5 ACCESIBILIDAD
Se debe tener en cuenta que, en general, no sabemos con qu tipo de navegador visitarn la pgina, ni cmo
estar configurado. As como tampoco sabremos la resolucin del monitor, ni la potencia de su computadora, ni
siquiera si el navegador es capaz de desplegar los grficos Y como se supone que Internet es algo que debe disfrutar todo
el mundo conviene que sea accesible.
Para ello tendremos en cuenta algunas cosas. Por ejemplo, que las pginas siempre se ven distintas dependiendo
del navegador que usemos.
No es conveniente usar elementos que slo funcionen con un navegador, como puede ser el texto
parpadeante (<BLINK>) o las marquesinas (<MARQUEE>). Y siempre ser bueno probar si es posible con ms de un
navegador las pginas: no siempre representan las mismas etiquetas.
En este curso nosotros estaremos utilizando Microsoft Internet Explorer, pero existen otros exploradores que
no identifican algunas etiquetas como el caso de <MARQUEE>, esta etiqueta no es soportada por el explorador de
Netscape o viceversa .
Microsoft Internet Explorer no soporta algunas etiquetas como <BLINK> y tambin existe el caso de
navegadores en modo texto en los cuales nicamente se despliega el texto que tenga nuestra pgina. Ni las imgenes,
formatos de texto e imgenes de fondo se pueden ver en este tipo de navegadores, en el navegador modo texto es ms
rpida la carga de las pginas puesto que no carga ninguna de las opciones antes mencionadas, pero por la misma razn
no es nada vistoso.
El navegador modo texto ms conocido es el lynx que se utiliza en las plataformas Unix, Linux y sus
clones.
1.6 DISEO
Una pgina atractiva, con buenas imgenes, bien escogidas y colocadas, es algo siempre recomendable.
Pero no, si debido a ello, la pgina tarda mucho tiempo en mostrarse en nuestro navegador.
Hay que tener en cuenta que estamos trabajando
en un medio llamado Internet, as que a la hora de
disear nuestras pginas, deberemos cuidar el
equilibrio entre belleza grfica y tiempo de
carga, para que sean ms vistosas y accesibles
al usuario.
Recordemos que la imagen de fondo no debe dificultar
la lectura del texto. Si utilizamos un color oscuro,
procuremos que el color del texto sea claro y
viceversa.
Los grficos animados (gifs animados), en
general resultan muy entretenidos para el programador,
pero poco tiles para el usuario.
Es recomendable que se usen nicamente para cosas sobre las que realmente quieres llamar la atencin
(como el uso del texto parpadeante). Si no es as, debe procurarse que su tamao no sea excesivo.
Mientras se puedan evitar las imgenes netamente ornamentales se debe procurar que stas tengan
algo de utilidad, ya sea como un ttulo, un enlace, etc.
HTML
2 MI PRIMERA PGINA
2.1 EL CDIGO
El cdigo de nuestra pgina se puede escribir en cualquier editor de texto, pero nosotros trabajaremos con el
block de notas de Windows.
Lo primero que debemos hacer es abrir el block de notas, para esto situamos el puntero del mouse sobre el
botn de inicio y daremos un clic, enseguida seleccionaremos men programas, donde elegiremos la
opcin de Accesorios, se desplegar otro men en el cual estar la opcin de Block de notas, la cual
seleccionaremos con un clic del botn izquierdo del mouse. Al hacer esto se abrir una ventana en donde
podremos empezar a escribir el cdigo de nuestra pgina.
Lo primero que debemos hacer es escribir el cdigo de la etiqueta de apertura, escribiremos: <HTML>. Al
final debemos cerrar la etiqueta con </HTML>.
Tanto la cabecera como el cuerpo de nuestra pgina deben estar dentro de estas etiquetas, debido que le
indican a nuestro navegador el lenguaje con que est programada nuestra pgina.
Despus deberemos de agregar la etiqueta de la cabecera, vemos que incluimos el ttulo de nuestra pgina
despus de <HTML>, por medio de la etiqueta: <HEAD>; enseguida escribimos <TITLE> Mi Pgina</TITLE> ,
a continuacin escribiremos la etiqueta de cierre </HEAD>.
Esta es la estructura que nos permitir empezar con el desarrollo de nuestra pgina.
HTML
2.2 LA EXPLICACIN
La sintaxis de programacin del lenguaje HTML se basa en la etiquetas, stas deben estar encerradas entre el smbolo
de mayor y menor, <HTML> .
Estas etiquetas indican la accin que deseamos que el programa realice, para que el programa identifique sobre qu
parte del cdigo se va a realizar alguna accin se utilizan las etiquetas de apertura y de cierre; para cerrar una
etiqueta nicamente se le debe agregar una diagonal al inicio , indicando al programa que es aqu donde finaliza
la accin a realizar.
<HTML> Texto. </HTML>
Esto tambin lo podemos observar en nuestro block de notas donde se muestran todas las etiquetas de apertura
y de cierre, tambin se puede observar la estructura de nuestro cdigo que sirve para tener una mayor legibilidad y
comprensin del mismo para cuando sea necesario modificarlo.
En nuestro cdigo tenemos <TITLE> Mi Pgina</TITLE> , aqu podemos observar la etiqueta de apertura
<TITLE> , el texto que va a tomar en cuenta esta etiqueta es Mi pgina y la etiqueta de cierre </TITLE> .
No todas las etiquetas se cierran, es decir existen algunas que no es necesario cerrarlas para que sepan en
que parte se va a realizar la accin, en los captulos siguientes del presente curso utilizaremos este tipo de etiquetas.
Por mencionar algunas tenemos <BR> , <P> , <HR> , etc.
No es necesario escribir las etiquetas en maysculas, nuestro navegador no toma en cuenta la diferencia
entre maysculas o minsculas, pero para tener una mejor estructura de nuestro cdigo y poder diferenciar entre las
etiquetas y la informacin que va a contener nuestra pgina, vamos a poner todas las etiquetas en maysculas y el resto
en minsculas.
La etiqueta <HEAD> indica al navegador que parte de nuestro cdigo va a ser la cabecera.
La etiqueta <TITLE> que va entre las etiquetas <HEAD> </HEAD> indica cual va a ser el ttulo de
nuestra pgina que se mostrar en la parte superior de nuestro navegador.
Con esto ya tenemos la cabecera de nuestra pgina y proseguiremos colocando el cuerpo de la misma, ms
adelante se explicar la funcin de la cabecera y la configuracin del cuerpo de nuestra pgina.
10
HTML
2.3 EL CUERPO DEL DOCUMENTO

Despus de saber cuales son las etiquetas principales de html para la estructura de una pgina es de
mucha importancia conocer cual es la etiqueta en donde se anotara la informacin de nuestro
contenido.
Aqu vemos un
ejemplo de la utilizacin de <body> en donde hemos anotado una frase de ejemplo y posteriormente hemos
cerrado la etiqueta </body> que indica que es todo el contenido que se visualizar en la pgina.
En el cdigo de ejemplo incluimos una etiqueta que es: <H1> , esta etiqueta (cabecera 1) aumenta el tamao
del texto incluido en ellas, en este ejemplo est al inicio y final de la palabra: Bienvenidos con esto slo aumenta
el tamaote esta palabra.
Despus de realizar nuestro cdigo debemos de aprender a guardarlo como una pgina Web.
Para guardarlo debemos de activar el men archivo y hacer la eleccin de guardar.
HTML
11
En la caja de guardar que se presenta debemos de anotar el nombre en este ejemplo es : Mi pgina.html
y a continuacin presionaremos el botn de guardar.
Algo de mucha importancia es que antes de empezar a guardar nuestras pginas debemos de
crear una carpeta en el escritorio que represente el proyecto que crearemos y todos loas archivos debern
quedar adentro as como archivos html, imgenes con movimiento, imgenes sin movimiento, sonidos y
videos.
A los archivos que guardemos debemos agregarle la extincin .html
contrario no permitir que se muestre por medio del Internet explorer.
o .htm, ya que de lo
Para visualizar nuestra pgina, debemos de minimizar todas las ventanas que tengamos.
En el escritorio aparecer un icono con una e y con el nombre Mi pgina, aqu debemos de dar doble
clic sobre este icono e inmediatamente despus se abrir la ventana de nuestro explorador mostrando la
informacin contenida en la pgina.
3 ESTRUCTURA DEL DOCUMENTO
3.1 LA CABECERA
La cabecera es el lugar ms indicado en donde se colocan todos los elementos de la pgina que no alteran su contenido,
pero s la forma en la que se va a presentar y el comportamiento de sta, como lo es el ttulo, la msica de fondo o
informacin de la misma, como puede ser el nombre del autor la versin del cdigo HTML en que se program etc., esta
informacin no se mostrar en nuestra pgina.
Si observamos nuestro cdigo en el block de notas est de la siguiente manera:
12
HTML
En este que es nuestro primer cdigo observamos <TITLE> Mi Pgina</TITLE>, como indicamos anteriormente
la etiqueta <TITLE> seala a nuestro navegador el nombre de nuestra pgina que se ubica en la barra de ttulo y se
mostrar Mi Pgina Microsoft Internet Explorer.
La etiqueta <TITLE> no es la nica que se puede insertar en nuestra cabecera, ahora en nuestro cdigo
aumentaremos algunas etiquetas ms.
Veamos que en este ejemplo en la ventana del block de notas donde se encuentra el cdigo de nuestra
pgina, hemos situado el cursor al final de la etiqueta de apertura <HEAD> y posteriormente dimos un salto de lnea
presionando el botn enter, enseguida hemos anotado:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Frameset//EN http://w3.org/TR/REC-html40/frameset.dtd>.

La etiqueta que acabamos de incluir indica la versin del cdigo HTML, en donde fue programada
nuestra pgina, en este caso la versin es HTML 4.0.
Se puede programar en versiones anteriores de HTML, aunque las antiguas versiones no soportan algunas
etiquetas de la versin 4.0, a continuacin se muestran las etiquetas que indican versiones anteriores de
programacin HTML.
La diferencia entre la versin de 4.0 que se muestra y la que nosotros utilizamos,se debe a que la que estamos
utilizando soporta ms etiquetas y es la versin ms actualizada.
HTML
13
Veamos otro ejemplo hemos agregado:

<META NAME=AUTHOR CONTENT=Su Nombre>, posteriormente dando un salto de lnea anotamos <META
NAME=DESCRIPTION CONTENT= Esta pgina contiene informacin relacionada con la programacin en
HTML> y finalmente dando un nuevo salto de lnea anotamos:
<META NAME=KEYWORDS CONTENT=Programacin, HTML, Pginas Web>.
Como observamos aqu tenemos una etiqueta que debe cerrarse, la etiqueta <META> ; tambin observamos
que tiene opciones <META NAME=AUTHOR CONTENT=Su Nombre> .
Cabe mencionar que la mayora de las etiquetas que veamos contendrn opciones, que nos servirn para dar caractersticas
un poco ms definidas a las etiquetas que estamos usando; las opciones se utilizan ponindolas con letras
maysculas, seguida de un signo igual, y entre comillas los parmetros que va a contener, posteriormente
cuando veamos el cuerpo de la pgina observaremos ms utilidades.
La etiqueta <META> sirve para indicar a los buscadores en Internet como puede ser, yahoo, altavista, google, etc.,
en este caso con la opcin NAME indicamos que es lo que vamos a describir, ya sea el autor, la descripcin o las
palabras claves con las cuales un buscador pueda encontrarlas fcilmente.
Con la opcin CONTENT indica el contenido que previamente se puso en la opcin NAME, es decir si tenemos la opcin
NAME=AUTHOR, la opcin CONTENT debe contener el nombre del autor de la pgina; si tenemos
NAME=DESCRIPTION, la opcin CONTENT debe incluir una breve descripcin del contenido de nuestra pgina; y por
ltimo NAME=KEYWORDS indica a la opcin CONTENT que debe contener palabras claves con las cuales un buscador
identificar fcilmente nuestra pgina.
Despus de esto procedemos a guardar los cambios de nuestra pgina por medio del men archivo
/ guardar, es importante mencionar que cuando un archivo ya ha sido guardado por vez primera ya no
es necesario guardarla con otro nombre.
Para ver los cambios que se realicen en la pgina

de Internet explorer podemos apoyarnos de la
barra de tareas, ah se ven las aplicaciones
en uso, las que nosotros estaremos utilizando
ser la del bloc de notas e Internet explorer.
Es importante mencionar que
despus de guardar los cambios en el bloc
de notas debemos de ir a la pagina de
Internet explorer que es donde se ven los
resultados y debemos presionar el icono de
actualizar localizado en la barra de
herramientas.
Tambin podemos actualizar la pgina de Internet explorer por medio de la tecla de funcin F5.
14
HTML
3.2 CONFIGURACIN DEL CUERPO

Como ya hemos terminado de poner toda la informacin necesaria en nuestra cabecera, posteriormente procedemos a
dar las opciones al cuerpo de nuestra pgina, estas opciones sirven para darle propiedades a la informacin contenida en
la misma, como puede ser el color de la letra, color de fondo de nuestra pgina, alguna imagen que deseemos colocar en
el fondo, as como los colores que van a tener nuestros enlaces, los cuales explicaremos ms adelante.
Todas estas configuraciones de nuestra pgina se realizan dentro de la etiqueta <BODY>, es decir son opciones de
la misma.
Para insertar la primera opcin, situaremos el cursor al final de la palabra BODY y antes del signo > daremos
un espacio y escribiremos: BGCOLOR=BLUE, con esto estamos indicando el color de fondo que va a tener nuestra
pgina, para ver los cambios debemos guardar nuestro archivo en el bloc de notas y actualizar la pgina
por medio de la ventana de Internet explorer con la tecla de funcin F5.
Para definir algn color se puede realizar de dos formas: la primera es con el nombre del color en ingles,
como por ejemplo nuestro caso BGCOLOR=BLUE, o poner otro color como podran ser:
Rojo (Red) Azul (Blue) Amarillo (Yellow) Verde (Green) Naranja (Orange) Violeta (Violet) Rosa (Pink)
Celeste (Sky Blue) Gris (Grey) Marrn (Brown) Blanco (White) Negro (Black) Dorado (Golden) Plateado
(Silver) Marfil (Ivory)
Con esta lista de colores en ingls podemos cambiar los colores de fondos en el bloc de notas en donde
debemos de guardar los cambios, ir a la pgina de Internet explorer y actualizar con la tecla de funcin
f5.
HTML
15
Otra manera es utilizando cdigo hexadecimal, en este ejemplo hemos borrado el color gray y
anotado: #0000FF, enseguida debemos de guardar la pgina y ver los cambios en la ventana del explorer.
Con este cdigo hexadecimal el color de fondo de nuestra pgina cambiar nuevamente a color
azul.
El cdigo hexadecimal se utiliza de la siguiente manera:
Si vamos a definir un color, primero se debe indicar anteponiendo al nmero el signo # , y posteriormente el
nmero hexadecimal que consta de 6 dgitos, como lo tenemos en nuestra pgina 0000FF, ac se manejan los
valores de RGB (rojo, verde, azul) donde los primeros dos dgitos, en este caso 00 indican la cantidad de color
Rojo que va a tener, los siguientes dos dgitos indican la cantidad de color Verde y los ltimos dos FF indican la
cantidad de color Azul.
La combinacin de estos colores es la que proporciona el color al fondo de nuestra pgina, por ejemplo una
combinacin entre, el color rojo y el verde quedara: #FFFF00 dando como resultado el color amarillo.
Otra cosa que debemos tener en cuenta, es que tambin podemos jugar con el tono de los colores, el nmero
mayor que podemos poner y con el que ya trabajamos es FF y el menor 00, podemos cambiar estos nmeros
tomando en cuenta que la numeracin es: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, siendo 0 el nmero ms pequeo
y F el ms grande.
Por ejemplo: #AAAA00 que es un color amarillo, pero con un tono ms oscuro, y mientras ms
vayamos disminuyendo el nmero, ms oscuro se va tornando nuestro color, as podemos crear combinaciones
de colores ms definidas, a diferencia de escribir nicamente el nombre de color.
Para obtener el color blanco se necesita una combinacin de todos los colores y para el color negro una
ausencia de los mismos, por ejemplo: #FFFFFF
Para el color negro: #000000.
16
HTML
La siguiente opcin de la etiqueta <BODY > que podemos incluir es TEXT , para ello debemos de situar
el cursor antes del signo de > daremos un espacio y anotaremos lo siguiente: TEXT=GREEN , enseguida
debemos de guardar nuestro archivo y actualizarlo en el explorador.
De esta manera veremos el cambio en nuestra pgina en donde el texto de Bienvenidos, hola, esta
es mi primera pgina, cambia a color verde, todo el texto que escribamos en nuestra pgina tendr ese
mismo color, para cambiarlo se utiliza el mismo criterio que hemos explicado anteriormente con los colores en
ingls o colores hexadecimales.
Existe otro mtodo para cambiar los colores, pero no en general, es decir, slo una parte de nuestro texto,
aunque eso lo veremos un poco ms adelante.
Otra etiqueta que se emplea dentro del body es LINK que se anota antes del signo > , en este
ejemplo hemos agregado: LINK=BLUE dando otro espacio, anotamos: ALINK=YELLOW y por ltimo
dando nuevamente un espacio hemos capturado: VLINK=RED.
Estas opciones de la etiqueta <BODY> indican los colores que van a tener los enlaces de nuestra pgina,
los cuales sern explicados ms adelante en este curso, nicamente veremos la diferencia entre estas tres
opciones, la primera LINK=BLUE indica a nuestro navegador el color que van a tener todos los enlaces
no visitados,
HTML
17
un enlace no visitado es aquel al que no le hemos dado un clic con el botn izquierdo del mouse sobre l, la
siguiente opcin ALINK=YELLOW indica qu color va a mostrar el enlace mientras mantengamos presionado
el botn izquierdo del mouse sobre l, y por ltimo VLINK=RED indica el color del enlace que ya hemos
visitado, es decir el enlace en el cual ya hemos dado un clic sobre l.
Para cambiar los colores de los enlaces se toma nuevamente el criterio que hemos mencionado
anteriormente, se puede hacer escribiendo el nombre del color en ingles, o de manera hexadecimal.
Las dos ltimas opciones que veremos son: BACKGROUND y BGPROPERTIES. La primera propiedad nos
sirve para indicarle a nuestro navegador la imagen de fondo que deseamos colocar en nuestra pgina, es
decir, la imagen que se va a mostrar debajo de toda la informacin de nuestra pgina y la segunda opcin
nos sirve para mantener inmvil nuestra imagen de fondo, este efecto lo veremos ms adelante cuando nuestra
pgina contenga ms informacin.
Para incluir estas opciones vemos que hemos situado el cursor antes del signo de > y escribimos lo
siguiente: BACKGROUND=fondo.gif despus debemos dar un espacio y anotaremos:
BGPROPERTIES=FIXED, debemos tener en cuenta que el archivo al que estamos haciendo referencia, en este
ejemplo es una imagen de nombre: fondo.gif, se debe encontrar en el mismo lugar donde est el archivo de nuestra
pgina que tenemos de Internet explorer, por lo cual se recomienda crear una carpeta y ah tener todas las
imgenes, sonidos y pginas de Internet explorer.
3.3 FORMATO DE PRRAFO

Ahora explicaremos como podemos darle formato a nuestro texto, tanto a palabras como a prrafos enteros, dependiendo
de la parte de nuestra pgina que deseemos que contenga este formato.
Veamos algunas etiquetas que nos dan la ventaja de dar formato al texto:
18
HTML
En este ejemplo: <CENTER>SISTEMA SOLAR</CENTER>

Nos indica que la etiqueta <CENTER> le indica a nuestro explorador que el texto que se encuentre
dentro de la etiqueta de apertura y la de cierre debe estar centrada en nuestra pgina.
<LEFT>SISTEMA SOLAR</LEFT>
En este ejemplo se establece una alineacin a la izquierda.
<RIGHT>SISTEMA SOLAR</RIGHT>
En este ejemplo se establece una alineacin a la derecha.
<p>El Sistema, esta formado por el Sol, nueve planetas y sus satlites, asteroides, cometas,
meteoros, polvo y gas interplanetario.<p>
Ac se presenta un ejemplo en el cual se indica el bloque de un prrafo con la etiqueta <p>

contenido de un parrafo. </p>
La etiqueta <P> indica a nuestro navegador que todo lo que est dentro de la etiqueta de apertura y cierre,
en este caso el texto que copiamos anteriormente, lo va a colocar dentro de un prrafo, es decir, que el texto no
se va a seguir de corrido en nuestra pgina, sino que aparecer en forma de prrafo, al final de la
pantalla de nuestro explorador har un salto de lnea y seguir poniendo el texto faltante.
Para darle una organizacin al prrafo correcta de justificacin de prrafo debemos de utilizar la siguiente
sintaxis: <P ALIGN = justify> ac se anota el contenido del prrafo .</p>.
HTML
19
Esto devolver un prrafo justificado y se recomienda emplearlo para todos nuestro prrafos
para que tengan una presentacin y organizacin correcta.
Otros elementos que nos ayudaran a establecer formato de prrafo son:
<P align=center>..........</P> Prrafo centrado
<P align=left>...........</P> Prrafo alineado a la izquierda
<P align=right>...........</P> Prrafo alineado a la derecha
4 FORMATO A LA PGINA
4.1 LAS 6 CABECERAS
Las cabeceras sirven para resaltar el texto, dndole diferentes tamaos a aquel que se encuentre entre las
etiquetas de apertura y de cierre.
<h1> sistema solar </h1>
<h2>sistema solar</h2>
En este ejemplo se indica que podemos cambiar tamaos de textos en donde h1 ser de mayor
tamao y as sucesivamente se ira disminuyendo hasta llegar a h6.
De esta manera debemos de actualizar la pgina y veremos el resultado obtenido.
20
HTML
4.2 CAMBIANDO EL TIPO DE LETRA
Ahora procederemos a cambiar el tipo de letra de parte del prrafo que tenemos en nuestra pgina, para esto
contamos con varias etiquetas, las cuales nos ayudan a darle mayor vistosidad a nuestra pgina.
La primera etiqueta que veremos ser <BIG>, esta etiqueta har que el texto que se encuentre dentro de las
etiquetas sea un poco ms grande en relacin al resto del contenido, un ejemplo sera: <BIG> Sistema </
BIG> solar.
Ac nicamente la palabra sistema aumentar de tamao, de la misma manera se entiende que se

visualizarn las otras etiquetas segn la funcin que se indique, por ello nicamente mencionaremos
su sintaxis pero no lo visualizaremos, nosotros en su momento lo haremos.
Otra etiqueta que tiene la funcin inversa es: SMALL
<SMALL> Sistema </ SMALL > solar
En este ejemplo la palabra sistema se mostrar de menor tamao.
Para establecer que un texto o palabra quede en estilo cursiva o inclinado en direccin derecha se
emplea la etiqueta <I> , enseguida se presenta un ejemplo:
<I> sistema </I>
<u> sistema </u>
solar
solar
en este ejemplo la palabra sistema se presentar en cursiva.

en este ejemplo la palabra sistema se presentar subrayada.
Si deseamos que nuestro texto tenga el tipo de letra como el de una mquina de escribir se utiliza de la
siguiente manera. <tt> sistema </tt>
Otras etiquetas son <SUP> y <SUB>, que tienen la funcin de poner el texto que se encuentre entre las
etiquetas de apertura y de cierre en forma de superndice y subndice, respectivamente.
Tierra 20000 Kms <sup>2</sup>
H<sub>2<sub>0
El resultado sera Tierra 20000 Kms 2. superndice

El resultado sera h2o
subndice
HTML
21
4.3 FORMATO DE LA FRASE
Con las etiquetas que vamos a ver a continuacin se indica el tipo de informacin que se va a tener
dentro de ellas.
La primera es la etiqueta a mencionar es:
<CITE>Sistema Solar </CITE>
En este ejemplo la frase sistema solar se presentar en estilo cursiva sin sangra esta etiqueta suele ser
empleada para citas textuales o notas , ttulos de libros ect.
La etiqueta <CODE> nos sirve para hacer diferenciar un cdigo fuente que se pretende presentar como texto
en la pgina Web y no como cdigo.
La siguiente etiqueta es <STRONG> nos sirve para resaltar alguna informacin importante dentro de nuestro
texto, el cambio del texto es el mismo que la etiqueta <B>.
<STRONG> 50.000 </STRONG>.
Este es el resultado:
50.000
La etiqueta <EM> nos sirve para dar nfasis a una parte del texto que se encuentre en nuestra pgina, un
ejemplo sera:
<EM> Los Cometas </EM>.
Con el empleo de la etiqueta del presentamos un ejemplo:
<DEL> este texto aparecer tachado</DEL>
Como vemos se utiliza para destacar partes del texto que se han corregido y ya no son validas,
presentando el texto tachado como lo vemos enseguida:
La etiqueta (ADDRESS), se utiliza para especificar direcciones personales o de correo electrnico. Ejemplo
<ADDRESS> javcrismon19@hotmail.com </ADDRESS>,
La siguiente etiqueta es <BLOCKQUOTE>......</BLOCKQUOTE>.
22
HTML
Significa (Cita de Bloque). Esta etiqueta tiene la funcin de que el texto contenido entre estas etiquetas
aparecer normalmente sangrado respecto a los mrgenes izquierdo y derecho. Enseguida se presenta un
ejemplo:
En HTML disponemos de etiquetas fsicas y lgicas, y normalmente siempre encontraremos etiquetas de
ambos tipos equivalentes, que produzcan el mismo resultado. La diferencia principal entre ambos estilos
reside en su propia concepcin.
De esta manera hemos visto algunas etiquetas para dar formato a las frases.
4.4 OTROS ELEMENTOS
En esta parte veremos otras tres etiquetas que nos dan la ventaja de mejorar la apariencia de las pginas que
creemos como adornos, empecemos con la etiqueta <HR>, no es necesario que cerremos esta etiqueta, la cual
inserta a nuestra pgina una lnea horizontal que nos sirve para separar informacin en nuestra pgina.
Un ejemplo de la insercin de una lnea es: <HR COLOR=RED WIDTH=70%>.
Con esto insertaremos

una lnea horizontal: la
propiedad COLOR indica aquel
que va a tener nuestra lnea, por
defecto es negro, el color lo
podemos manejar de las dos
f ormas que hemos v isto
anteriormente con el cdigo
hexadecimal o con el nombre del color en ngles.
La opcin WIDTH indica el tamao de la lnea, se puede utilizar en forma de porcentaje, tomado en cuenta
que el 100% es el tamao mximo que tiene horizontalmente la ventana de nuestro navegador y en pxeles esta
opcin se utiliza para dar un tamao ms exacto a la lnea y para utilizarla nicamente se le quita el smbolo de %.
Nuestro navegador no identifica los saltos de lnea, es decir aunque nosotros demos muchos saltos de lnea
entre un rengln y otro, el navegador no los toma en cuenta, si deseamos bajar el texto una lnea, nicamente
tenemos que insertar la etiqueta <BR>.
<p> El sistema se integra por nueve planetas los cuales son:
<br>
Mercurio
<br>
Venus
<br>
Tierra
HTML
23
En este ejemplo se ve que existir una separacin de lnea entre cada uno de los planetas debido a
que estamos utilizando la etiqueta <br> que equivale a un salto de lnea.
Si por alguna razn deseamos incluir un comentario en nuestra pgina, es decir, algo que nos indique lo que
estamos programando, alguna referencia de lo que hace alguna parte del cdigo, utilizaremos la siguiente simbologa.
<! Comentario > , con esto pondremos un comentario dentro de nuestra pgina, el cual no se desplegar
en ella, solamente lo podemos ver cuando estemos observando el cdigo de la misma dentro del su bloc de notas o
cdigo fuente.
Un ejemplo de la agregacin de un comentario es:
<CENTER><H1>SISTEMA SOLAR</H1></CENTER>
<! Esta es mi primera pgina en la cual he visto como agregar un comentario >
4.5 CAMBIO DE COLOR
Como habamos mencionado antes el color del texto se puede definir en la etiqueta <BODY COLOR =RED>, pero si
deseamos que slo parte de nuestro texto cambie de color, debemos incluir la etiqueta <FONT> que nos permite
cambiar el color al texto que nosotros deseemos.
Mientras el texto que no se encuentre entre las etiquetas de apertura y de cierre quedar del color como se ha definido
en <BODY>.
Ac presentamos un ejemplo de como cambiar el color del texto:
<FONT COLOR=blue> Los planetas del sistema son: </font>, Mercurio, Venus, <FONT COLOR=white> Tierra
</font>, Marte, Jpiter, Saturno, Urano, Neptuno y plutn.
En este ejemplo el texto que dice los planetas del sistema son quedar en color azul y l palabra tierra estar
de color blanco, con este ejemplo vemos la manera de establecer el color del texto.
4.6 TAMAOS DEL TEXTO
La etiqueta <FONT> tambin nos es til para cambiar el tamao de la letra del texto que se encuentre dentro de las
etiquetas de apertura y cierre, para hacer esto debemos agregar la opcin de SIZE, que nos permite aumentar o
disminuir el tamao del texto.
24
HTML
En este ejemplo se ve que el ttulo que dice: Los planetas del sistema solar queda de mayor tamao
con el numero 12 y la informacin de los planetas de tamao 5.
Al indicar el tamao del texto se pueden utilizar otros modificadores como: - + que nos sirven para
indicar a nuestro navegador cuanto tamao se va a aumentar o disminuir relativamente del tamao actual de la letra.
<font size=+2> Sistema</font>
Este es un ejemplo para aumentar el tamao de letra a nmero 2
Nosotros tendremos la oportunidad de decidir qu sintaxis emplear para determinar el tamao del
texto.
4.7 TIPOS DE LETRA
La ltima opcin que veremos de la etiqueta <FONT> es la opcin de FACE, que nos permite cambiar el tipo de letra
que se encuentre entre las etiquetas, el problema que presenta es qu no se sabe que tipos de fuentes se tengan
instaladas en la computadora del usuario que est viendo nuestra pgina, por lo tanto es recomendable utilizar tipos
comunes.
Un ejemplo de la aplicacin de tipo de letra es:
<font face=arial black> El sistema solar </font>.
Es recomendable que utilicemos un tipo de letra Standard que maneja Windows, ya que si utilizamos un tipo de
letra que no sea muy comn es probable que nuestro contenido se vea de manera diferente en otras mquinas
que vean nuestra pgina.
En base a esta informacin es recomendable incluir varios tipos separados por comas, por si alguno no se
encuentra instalado siga con el otro y as sucesivamente, un ejemplo de su sintaxis sera:
<font face=arial black,Times New Roman,Comic Sans MS> El sistema solar </font>.
De esta manera en el orden que se agregaron los tipos de letras en caso de que la mquina en donde
se ve la informacin no tuviera el primer tipo de letra devolvera el que le sigue y as sucesivamente.
5 CARACTERES Y LISTAS
5.1 CARACTERES EXTENDIDOS EN HTML
Hasta ahora, en nuestro curso no hemos utilizado algunos caracteres como son: , , , , , , o tambin
letras acentuadas, algunos navegadores no reconocen estos tipos de smbolos, si los anotamos tal cual en el
cdigo de nuestra pgina no se visualizarn de manera correcta. Por ello se tiene un cdigo especial donde
escribirlos y por fortuna ahora lo aprenderemos.
Las computadoras manejan la informacin en formato binario (es decir, en unos y ceros), a estos
nmeros se les asigna una carcter, que a su vez son traducidos a letras mediante tablas, como por ejemplo: el valor
asignado a la letra a es 97, o el nmero asignado para c, el 99.
Un ejemplo al presionar la tecla alt sin soltar y anotar la cantidad de 97 con las teclas
numricas, veremos cmo aparece la letra: a, con la tecla alt y anotar 99 con las teclas numricas:
aparece el carcter c..
HTML
25
La forma de incluir estos caracteres en nuestra pgina Web es anteponiendo al nmero los smbolos &# , y
al final el ; (punto y coma) , por ejemplo &#97.
Existe otra forma abreviada de escribir este tipo de smbolos como es: Á , É , Í ,
á , é , etc.
Esta simbologa nos sirve para poner acentos en las vocales, como se observa se escribe la letra que
deseamos que este acentuada entre el carcter: & y la expresin: acute; con sto nuestra letra aparece acentuada
en nuestra pgina.
A continuacin se vern algunas otras formas abreviadas para otros caracteres especiales.
Cabe mencionar que en el cdigo HTML, nicamente toma en cuenta un espacio entre palabras o frases, es
decir, si tenemos una frase y deseamos que separe varios espacios de otra, entonces se presiona varias veces la barra
espaciadora de nuestro teclado.
Al momento en que nuestra pgina se muestre en el navegador, nicamente mostrar un espacio, debido a que
el navegador toma en cuenta el primer espacio dado.
Para solucionar esto, est el cdigo si deseamos que existan ms espacios entre una letra o frase,
nicamente tendremos que agregar un por cada espacio que deseemos dar.
5.2 CARACTERES CONTROL
Si queremos usar alguno de los caracteres < > , & , , podemos tener problemas en el cdigo de nuestra pgina,
ya que son caracteres que utilizamos para definir etiquetas, cdigo de caracteres especiales y opciones, respectivamente.
Si el texto que contenga nuestra pgina lleva alguno de estos caracteres, podra causarnos ciertas dificultades,
por lo que deberemos utilizar los siguientes cdigos.
Sabiendo esto, podemos escribir una pgina que contenga texto con estos tipos de caracteres.
26
HTML
5.3 LISTAS DESORDENADAS

En ocasiones ser necesario representar algn tipo de informacin en forma de listas.
Por el momento presentamos un ejemplo de su utilidad.
Cuando sea necesario incluir este tipo de listas, es posible utilizar varios tipos de etiquetas las
cuales sern de gran ayuda.
Como vemos en el ejemplo: <UL TYPE = circle>, sirve para indicar el principio de la creacin
de nuestra lista.
Enseguida daremos un salto de lnea y escribimos la etiqueta <LI>Planetas, para indicar que el texto
que se encuentra despus de una lnea de nuestra lista, la etiqueta <LI> es otra de las etiquetas que no requiere una
de cierre.
Ahora, damos nuevamente un salto de lnea y escribimos la etiqueta de cierre </UL>.
Tanto la etiqueta <UL>, como la etiqueta <LI> pueden contener la opcin de TYPE, que nos sirve para
cambiar el tipo de vieta que va a tener cada una de las lneas de nuestra lista; si escribimos TYPE en la etiqueta
<UL> ser una opcin general, es decir, todas las lneas que contenga nuestra lista tendrn esta propiedad, pero si
deseamos cambiar la figura de una vieta en especfico, podemos anotar la opcin TYPE dentro de la etiqueta <LI>,
as nicamente cambiar una vieta.
Los parmetros que puede tener TYPE son TYPE = circle, TYPE = square y TYPE = disc, donde el
parmetro circle muestra el contorno de un crculo; square muestra la vieta en forma de un cuadrado y por ltimo,
disc coloca la vieta en forma de un punto, sta se pone por defecto si no se incluye la opcin en las etiquetas.
Otra opcin con la que cuenta la etiqueta <OL> es COMPACT, con ella se indica al navegador que represente
la lista de la forma ms compacta posible.
El resultado de este cdigo ser el siguiente.
HTML
27
5.4 LISTAS ORDENADAS

Las listas ordenadas, al contrario de las anteriores, en lugar de mostrar una figura en la vieta, muestran un nmero.
sto es til si en alguna ocasin deseamos poner una lista que lleve un orden. La etiqueta para este tipo de
listas es <OL TYPE = I>. Incluiremos esta etiqueta por medio del siguiente ejemplo:
Este sera el resultado obtenido:
28
HTML
Podemos observar en este ejemplo que debajo de la palabra Planetas se encuentran los nueve nombres de
los planetas de nuestro sistema solar, y tambin observamos que esta palabra no est alineada con el nombre
de ellos, debido a que anidamos dos listas, es decir, pusimos una dentro de otra, esto es muy til cuando deseamos
definir por ejemplo: el nombre de un libro y cada uno de sus captulos, al hacerlo nicamente se debe tener cuidado
de abrir y cerrar todas las etiquetas para que no exista algn error en nuestro cdigo.
La etiqueta <OL> tambin puede incluir la opcin TYPE pero con diferentes parmetros los cuales son, a,
A, I, i, los cuales indican el tipo de vieta que se va a tener, las dos primeras ponen la vietas en maysculas A, B,
C, o minsculas a, b, c, y las dos ltimas en nmeros romanos con letras maysculas I, II, III, IV, o minsculas
i, ii, iii, iv,.
Otra opcin que tiene la etiqueta <OL> es la de START que indica el nmero con el cual va a empezar la
numeracin de nuestra lista, por ejemplo deseamos que nuestra lista empiece con un nmero o letra en particular,
por ejemplo START = 3. En este tipo de listas podemos incluir una opcin a la etiqueta <LI> la cual es VALUE;
con esta opcin podemos indicar cual es el nmero que va a llevar una lnea en particular de nuestra lista, por
ejemplo VALUE = 3, pero debemos tener cuidado cuando utilicemos esta opcin, pues todas las lneas siguientes
irn aumentando conforme al valor que hallamos puesto a sta.
La opcin COMPACT tambin se puede incluir en la etiqueta <OL> para que compacte nuestra lista lo ms
que se pueda.
5.5 LISTAS DE DEFINICIONES
Con este tipo de listas se obtiene el mismo efecto que obtuvimos cuando anidamos las dos anteriores, la diferencia
de estas listas es que en ellas no se antepone una vieta al texto que escribamos.
Para propsitos de nuestra explicacin presentamos el siguiente cdigo.
Vemos que las etiquetas <DL> y </DL> indican respectivamente en nuestro cdigo el inicio y el fin de
nuestra lista, la etiqueta <DT> indica el primer elemento de nuestra lista y por ltimo la etiqueta <DD> indica cual es
el sub elemento de la etiqueta <DT>, si deseramos incluir un segundo elemento a nuestra lista, se agregar otra
etiqueta <DT> con sus subsecuentes <DD>. A la etiqueta <DL> tambin se le puede poner la opcin COMPACT
para compactarla.
El resultado sera el siguiente.
HTML
29
6 ENLACES
6.1 LA ETIQUETA <A>
Esta etiqueta nos sirve para incorporar a nuestra pgina un enlace. Para agregar un enlace a nuestra pgina,
debemos de encerrar una entre las etiquetas de apertura <A> y la de cierre </A>, una palabra o frase que se
encuentre en nuestra pgina, o en una imagen, la incorporacin de imgenes a nuestra pgina la veremos ms
adelante.
Un ejemplo sera: <a href=men.html> ir a men </a>
Ac vemos que se establece un hipervnculo, ms adelante lo aplicaremos.
La parte del texto que se encuentre dentro de las etiquetas <A></A>, sufrir dos modificaciones: el
texto cambiar a un color distinto del que tenemos definido, y aparecer subrayado, el color al que cambiar el texto
fue el que definimos anteriormente dentro de la etiqueta <BODY> con las opciones LINK, ALINK y VLINK.
Para que un enlace nos sea de utilidad, debemos indicarle la direccin a la cual va a hacer referencia, en
este caso utilizaremos la opcin HREF, con esta podremos indicarle al navegador la direccin a la cual deseamos
hacer referencia, ya sea una pgina local como las que hemos programado, un archivo de diferente formato (que no
sea una pgina HTML), hacer referencia a una pgina diferente, por mencionar alguna: altavista, google , universidad
en lnea, etc. o a una parte dentro de nuestra pgina.
6.2 LAS URLS
Las URL le indican al navegador la direccin de Internet en la cual se encuentran las pginas que deseemos visitar,
as como el servicio que nos va a proporcionar el servidor, por ejemplo cuando hacemos una referencia a una
direccin de Internet escribiendo http://www.cemdemexico.com estamos indicndole a nuestro navegador que se
dirija y despliegue la pgina contenida en esta direccin.
Para direccionar a un archivo se debe indicar la ruta y el nombre de donde ste se encuentre, vemoslo
grficamente.
Por ahora presentamos un archivo de ejemplo en el bloc de notas de nombre. Men.
30
HTML
Veamos la ubicacin del cursor y fijemos la atencin a la siguiente sintaxis: <A HREF =
mercurio.html> Mercurio. Vemos que al final de palabra mercurio se ha anotado la etiqueta de cierre </A>,
con esto hemos indicado a qu archivo estamos haciendo el hipervnculo, de la misma manera se marcan los
otros ejemplos de los hipervnculos.
Recordemos que para ver los resultados debemos de guardar los cambios en el bloc de notas
y actualizar la informacin en la ventana del Internet explorer.
Con esto notaremos como la palabra mercurio aparece subrayada y de color azul, indicndonos que se
encuentra un enlace, en nuestro caso a la pgina que programamos anteriormente mercurio.html.
Es importante mencionar que cuando llevemos el puntero del mouse sobre la palabra que tenga
el hipervnculo, veremos que el apuntador cambia de una flecha a una forma de una mano, para
indicarnos que la palabra est haciendo referencia hacia otra pgina, una direccin de Internet, un
archivo, etc.
Cabe mencionar que estas pginas se deben encontrar en el mismo lugar donde estn ubicados nuestros
dems archivos. En caso de no ser as el navegador no las encontrar.
En este ejemplo se presenta la manera de establecer un hipervnculo de pginas de Internet por

medio de su direccin completa.
Existe otra forma de direccionar a archivos, la forma absoluta y la forma relativa.

La forma absoluta es aquella en la cual indicamos la ruta completa del lugar donde se encuentra nuestro
archivo, por ejemplo, C:\Documents and Settings\francisco\Escritorio\pgina.html con esto estamos indicando
la localizacin del archivo.
En la forma relativa se hace uso de ./
o
../
la primera hace referencia a una carpeta que se
encuentre en el lugar donde estn ubicados los archivos, es decir, supongamos que en el escritorio
tenemos una carpeta llamada pginas, para hacer referencia a un archivo que se encuentre dentro de esta
carpeta escribimos: ./pgina/nombre del archivo. Ahora bien si el archivo se encuentra fuera de la carpeta
donde estn localizados los archivos, en nuestro caso fuera de la carpeta de escritorio, en la carpeta de
Francisco, escribimos:
../nombre del archivo
HTML
31
Otra opcin que tiene la etiqueta <A> es TARGET que nos sirve para indicarle a nuestro navegador el lugar
donde se va a presentar la pgina a la cual estamos haciendo referencia del hipervnculo, puede ser en el mismo
navegador donde se encuentra nuestra pgina, en una ventana nueva de nuestro navegador o en un MARCO diferente.
La utilidad de los marcos la veremos ms adelante.
Los parmetros que podemos incluir en esta opcin son: _top, _self, _blank,_parent.
El parmetro _self, indicar a nuestro navegador que despliegue la pgina a la cual estamos haciendo
referencia en la misma ventana del navegador.
El parmetro _blank, indicar que la pgina a la que hicimos referencia se muestre en una nueva ventana
del navegador.
Por ahora presentamos un ejemplo de la sintaxis de la aplicacin de target en donde indica que la
pagina de Internet se presentar en una ventana de Internet explorer nueva.
Tambin vemos que las etiquetas <A> ya contienen la opcin de TARGET con las cuales indicamos el lugar
donde se va a desplegar la pgina a la cual hicimos el enlace.
Es importante mencionar que podemos crear una pgina de marcos en donde podemos asignar un
nombre con name al marco ejemplo name=llegada y cuando se haga un hipervnculo en vez de anotar la
siguiente sintaxis de ejemplo.
En target se anotara as: target=llegada

Para comprender de mejor manera la creacin de una pgina de marco presentaremos un
cdigo de ejemplo para profundizar nuestro conocimiento.
32
HTML
Frameset: indica la creacin de una pgina de marcos.

Frameborder=0 indica si aparecer una lnea de division en cada marco de la pgina de marco.
Framespacing=no : indica que no existir un espacio en la division de cada marco.
Noresize: se emplea para indicar la division de un marco y se puede utilizar.
Rows: divisiones horizontales de un marco.
Cools: divisiones de una columna de un marco.
Como vemos en el ejemplo se indican los valores de las divisiones horizontales en 12% ,24%,64%
respectivamente.
Scrolling: indica si tendr barra de desplazamiento.
<Frame src=superioruno.html
name=llegada> con esta sintaxis se indica el nombre del
marco o division que en este ejemplo corresponde al 12% .
Al emplear la etiqueta name=llegada dentro de la asignacin de un marco, es de gran
utilidad cuando en un hipervnculo se indica que se presente la informacin dentro de un marco o
division especfica en este ejemplo: llegada.
Esto har que se presente la informacin en el marco que se llame llegada que se debe de
establecer en la pgina de marcos.
Es de gran importancia que una pgina de marcos debe guardarse con el nombre de index.html ya que
al subirlo en un administrador debe tener ese nombre para que reconozca cual ser la primer
pgina en presentarse.
HTML
33
No olvidemos que debemos de guardar los cambios y ver los resultados por medio de la ventana
de Internet explorer.
6.3 ANCLAS
Las anclas nos son de utilidad cuando es necesario hacer un hipervnculo de un tema o palabra y que su
informacin est en la misma pgina cuando la informacin es muy extensa y no de la otra manera de
mandar jalar un archivo de otra pgina o de Internet.
Como vemos en este ejemplo se entiende que por medio de los ttulos de generales | tierra | saturno | sol
| se establece un ancla , como vemos antes de la palabra generales se utiliza las etiquetas <a href=generales>
, esto indica que est considerando un nombre de un ancla; enseguida est anotada la palabra generales y
se cierra </a>, de la misma forma se emplea para los otros ttulos en este ejemplo cada uno con su
correspondiente nombre de ancla.
Despus de haber determinado cada uno de los nombres de un ancla debemos de utilizarlas en el lugar en donde
esta la informacin cada tema o subttulo de la siguiente manera:
34
HTML
En este ejemplo vemos que primeramente nos debemos ubicar antes de la palabra en donde tenemos la
informacin correspondiente, enseguida vemos que hemos agregado <a name=generales> que corresponde
al nombre de ancla que determinamos en el ejemplo anterior.
Con esto de anotar el nombre de ancla en el lugar que se encuentra el contenido se indica entiende que al dar
clic en el tema que tendremos en la parte de arriba o inicio de nuestra pgina nos llevara al lugar en donde se
hace referencia con su nombre de ancla, de esta manera podemos hacer enlaces internos en una pgina para
cuando la informacin es extensa.
Despus de haber realizado la sintaxis correcta debemos de guardar los cambios y ver el resultado en la
ventana de Internet explorer.
6.4 IMGENES Y ENLACES

En el diseo de pginas web es posible incluir imgenes para hacerla un poco ms vistosa. Los formatos recomendables para utilizar son JPG y GIF. El explorador es capaz de reproducir otro tipo de imgenes, pero es recomendable
que se usen stas, puesto que estn diseadas para que tengan una carga rpida en nuestra pgina.
La etiqueta para incluir una imagen en nuestra pgina es <IMG>, esta es otra de las etiquetas que no es
necesario cerrar.
Una de las opciones que acepta dicha etiqueta y la ms importante es SRC, puesto que indicamos la direccin en donde se encuentra ubicada nuestra imagen.
Las otras opciones de esta etiqueta son WIDTH, HEIGHT y ALT; las primeras dos propiedades nos sirven para
cambiar el ancho y el alto, respectivamente de nuestra imagen y la ltima nos muestra un pequeo letrero cuando
posicionamos el cursor sobre la imagen, tambin mostrar este texto en los navegadores de modo texto, como el
lynx.
Ac vemos un ejemplo para la insercin de una imagen:

<center><IMG SRC=galaxia.jpg ALT=Galaxia WIDTH=400" HEIGHT=250"></CENTER>.
Este ejemplo sirve para indicar la imagen que deseamos mostrar en nuestra pgina, en este caso galaxia.jpg, as
como tambin el ancho (width), alto (heigth) y el mensaje que deseamos que despliegue utilizando Alt.
Tambin incluimos la etiqueta <CENTER> con la cual estamos indicando a nuestro navegador que centre la imagen en
nuestra pgina.
HTML
35
Si notamos, las propiedades de la imagen tienen ciertas caractersticas, por ejemplo en la propiedad WIDTH y
HEIGHT, el tamao est definido por pxeles.
Tambin es posible asignarle a una imagen un enlace a una pgina de la siguiente manera:
<A HREF=http://www.solarviews.com/span/homepage.htm> <IMG SRC= galaxia.jpg ALT = Galaxia
WIDTH = 400 HEIGHT = 250> </a>
Con este ejemplo vemos que utilizamos las etiquetas correspondientes para establecer un hipervnculo
antes de las etiquetas de la insercin de una imagen y despus de las etiquetas que indican la insercin
de una imagen se ve como se cierra </a>
6.5 ALINEACIN CON RESPECTO AL TEXTO
Es posible alinear el texto con respecto a la imagen incluyendo la opcin ALIGN dentro de la etiqueta <IMG >, con
esto podemos alinear el texto centrado a la imagen, del lado derecho, izquierdo, en la parte superior o inferior del
lado derecho de la imagen.
Los parmetros permitidos para esta opcin son TOP con este parmetro estaremos indicndole a nuestro
navegador que posicione la primera lnea de nuestro texto en la parte superior derecha de la imagen; el parmetro es
MIDDLE, que indica que la primera lnea de texto estar colocada en la parte central de la imagen; el parmetro
BUTTOM, el cual es el parmetro por defecto si no incluimos la opcin de ALIGN le indica al navegador que la primera
lnea de nuestro texto se posicionar en la parte inferior derecha de la imagen; las opciones RIGHT y LEFT indicarn al
navegador que posicionen todo el texto del lado derecho o izquierdo respectivamente de la imagen.
Por ahora presentamos un cdigo de ejemplo para ver como alinear una imagen en relacin
al texto.
<IMG src=mercurio.html Alt=planeta mercurio align=bottom> Alinea la imagen abajo del texto.
<IMG src=mercurio.html Alt=planeta mercurio align=middle> Alinea la imagen en el medio
<IMG src=mercurio.html Alt=planeta mercurio align=top> Alinea la imagen arriba del texto.
<IMG src=mercurio.html Alt=planeta mercurio align=left> Alinea la imagen a la izquierda del texto.
<IMG src=mercurio.html Alt=planeta mercurio align=right> Alinea la imagen a la derecha del texto.
7 SONIDO
7.1 SONIDO ACTIVADO POR EL USUARIO
Es posible incluir en nuestra pgina sonidos, tanto activados por el usuario o msica de fondo, la cual se
reproducir al cargar nuestra pgina; el problema al incluir sonido en nuestra pgina es que al momento de que alguien
desee verla desde Internet, la carga ser algo lenta, debido a que los archivos de msica son grandes.
Los formatos de msica soportados son los archivos MID, WAV y MP3 estos dos ltimos no son
recomendables para utilizarlos debido a que son archivos muy grandes y la carga ser demasiado lenta.
36
HTML
Ac presentamos un ejemplo de la sintaxis para reproducir un archivo de msica por medio

de un texto.
<A HREF = laplaya.mid> Sonido </A>
<A HREF = elsol.mid> El sol </A>
Por medio de este ejemplo se indica que al dar un clic en cualquiera de los textos mandar
a reproducir un archivo de msica.
Para hacer referencia al archivo de msica la playa que se debe de encontrar en el mismo lugar donde est
ubicada nuestra pgina mercurio, en este caso en el escritorio.
Recordemos que debemos de guardar los cambios y ver los resultados por medio de la ventana de
Internet explorer.
7.2 SONIDO DE FONDO
Para incluir esta opcin en nuestra pgina nicamente tendremos que agregar la etiqueta <BGSOUND > dentro de
la cabecera; con esto logramos que al momento en que nuestra pgina sea cargada en el navegador, empiece a
reproducir el sonido.
Esta etiqueta tiene la opcin de LOOP para indicar el nmero de veces que se repetir el sonido.
Despus de la etiqueta <body> debemos agregar la siguiente sintaxis.:
<bgsound src=laplaya.mp3" loop=infinite> para indicar al navegador que reproduzca la msica al momento de
cargar la pgina. Nuestro cdigo debe de quedar de la siguiente forma.
Es importante que debemos de guardar el cdigo y ver el resultado por medio de la venta de Internet
explorer.
Existe otra forma de incluir sonido en nuestra pgina y es con la etiqueta <EMBED>, al ponerla indicar al
navegador que habr un reproductor en el cual se reproducir el sonido que le indiquemos. El beneficio de usar esta
etiqueta es que nos muestra los cuadros de controles con los cuales podemos detener, poner pausa, adelantar el
sonido, etc.
En esta etiqueta se pueden utilizar
las opciones SRC, que es la ms importante
porque indica la direccin del sonido WIDHT
y HEIGHT con los cuales sealamos el
tamao que va a tener nuestro reproductor
en la pgina. AUTOSTART nos sirve para
indicar que empiece a reproducir el sonido
automticamente, o cuando presionemos
play y por ltimo la opcin de LOOP
reproduce el sonido infinitamente hasta que
salgamos de la pgina.
HTML
37
Otra manera de insertar un sonido pero que se vea la apariencia del reproductor es:
<EMBED SRC=laplaya.mid height=60" width=250" autostart=false >
SCR declara que archivo de audio se va a ejecutar y este se debe de estar en el directorio junto con el archivo
HTML.
HEIGHT y WIDTH dan la dimensin del cuadro (objeto,frame), si se desea que no sea visible el cuadro asigne el
valor de cero tanto al height como al width.
AUTOSTART =TRUE Indica que al consultar la pgina, automticamente abre la aplicacin y ejecuta, el
archivo mencionado, si se omite la condicin autostart por defecto asume el valor de FALSE
8 FORMULARIOS
8.1 CAJAS DE TEXTO
Una parte interesante de la programacin en HTML es que podemos hacer que nuestra pgina interacte con el
usuario, si deseamos que l nos d su opinin sobre nuestra pgina o responda algunas preguntas relacionadas con
el tema que hemos puesto en ella, es necesario usar formularios con los cuales podemos obtener este tipo de
informacin.
Todo formulario debe ir entre la etiqueta de apertura <FORM> y la de cierre </FORM>, con estas etiquetas
estamos indicando que todo lo que se encuentre entre ellas va a ser parte de nuestro formulario.
Antes de empezar a escribir el cdigo del formulario es necesario explicar algunas opciones que tiene esta
etiqueta, empecemos con la opcin ACTION que indica a nuestro navegador el URL al cual se va a enviar el
formulario, o tambin podemos incluir la direccin de correo electrnico para que en ella recibamos las respuestas
de nuestro formulario.
La opcin METOD nos indica la manera en que se enviar el formulario, en este caso deseamos que sea enviado a
nuestro correo le daremos el parmetro POST y por ltimo el parmetro ENCTYPE, el cual sirve para que la informacin
enviada resulte legible; el parmetro de esta opcin es text/plain.
Por el momento vemos un ejemplo del cdigo de un cuestionario que nos permitir explicar los formularios.
<FORM ACTION=mailto:sucorreo@hotmail.com METHOD=POST ENCTYPE =text/plain>.
De esta forma estamos indicando el principio de nuestro formulario, as como la direccin de correo a la
cual sea va a enviar la informacin con texto sin formato.
Para cuando se pretenden agregar preguntas en la cual el usuario anote una respuesta corta, es
decir, que no exceda de lnea se puede realizar de la siguiente manera como se presenta el
ejemplo.
38
HTML
Ejemplo de pregunta:
Qu extensin tiene el sistema solar?
<INPUT TYPE =Text SIZE=75 VALUE=Pon tu respuesta aqu MAXLENGTH=170 NAME=respuesta1>.
Como vemos en el ejemplo hemos realizado una pregunta para lo cual necesitamos agregar un
cuadro de texto empleando la sintaxis que nosotros agregamos.
<INPUT TYPE =Text con estas etiquetas que acabamos de escribir indican al navegador que incluya una
caja de texto en la cual el usuario podr anotar la respuesta de la pregunta que escribimos anteriormente.
La opcin SIZE sirve para indicar el tamao que va a tener nuestra caja de texto, VALUE agrega el texto que tendr por
defecto la caja de texto que en este ejemplo es Pon tu respuesta aqu; mientras que la opcin MAXLENGTH sirve
para delimitar el tamao mximo de caracteres que va a aceptar la caja de texto, en nuestro caso no ms de 170 y por
ltimo la etiqueta NAME que indica el nombre de nuestra caja de texto, es decir, la variable a la cual se le va asignar un
valor, en este caso la respuesta obtenida.
La opcin TYPE tiene varios parmetros y dependiendo el que pongamos es el tipo de formulario que nos va a
mostrar; si igualamos esta opcin a PASSWORD indica que el texto que se escriba no se mostrar, es decir, en lugar
de que se vea el texto que anotemos mostrar el smbolo * por cada carcter que se escriba, todas las dems
opciones son las mismas que las anteriores, pero en nuestro ejemplo utilizamos text para que se muestre el texto.
Otra etiqueta que sirve para que el usuario pueda escribir algo en nuestra pgina es <TEXTREA> al contrario
de la anterior, esta etiqueta si es necesario cerrarla, y nos mostrar en el navegador una caja de texto, pero de mayores
dimensiones que las anteriores, por si la respuesta que deseemos que se escriba aqu sea demasiado larga.
Las opciones de esta etiqueta son ROWS (reglones ) y COLS (columnas), stas indica los renglones y las
columnas respectivamente que van a nuestra caja de texto, tambin utiliza la opcin de NAME teniendo la misma
funcin que mencionamos anteriormente.
Ac presentamos otro ejemplo en donde se realiza una pregunta en la cual el usuario anotar una
respuesta de ms de una lnea.
Cuntos planetas tiene nuestro sistema solar?
<TEXTREA ROWS=10 COLS=65 NAME=respuesta2> Pon tu Respuesta aqu </TEXTAREA>
Ac presentamos la sintaxis para agregar una caja de texto que permita que el usuario anote una respuesta larga.
Vemos que utilizamos en rows que corresponde a renglones indica 10 filas y cols indica columnas
anotamos 65, es decir 10 filas que permitan anotar 65 letras por cada fila.
HTML
39
8.2 OPCIONES
Por otra parte cuando agreguemos nuestras preguntas a un formulario tendremos la necesidad de agregar
preguntas con respuestas en la cual la persona elija una sola opcin por medio de los grupos de opciones
representados por un crculo y un punto adentro.
Cul es el planeta ms alejado del sol?
Ac presentamos una pregunta en la cual podemos hacer la eleccin de una respuesta por medio del
objeto radio o grupo de opciones.
Como podemos observar el parmetro de la opcin TYPE ha cambiado a radio, con esto indicamos que en lugar de ser
una caja de texto (text), ahora se van a utilizar opciones.
Si notamos en el cdigo que acabamos de escribir todas tienen el mismo parmetro en la opcin NAME debido a que
si no lo hacemos de esta manera se podrn seleccionar todas las respuestas al mismo tiempo y no solamente una.
La opcin VALUE indica el valor que va a tener cada una de ellas, en este caso solamente una ser verdadera, y por
ltimo la opcin de CHECKED, con esta indicamos cual es la respuesta que aparecer marcada por defecto en
nuestro formulario.
Podemos incluir en nuestra pgina otro tipo de formulario, si utilizamos la etiqueta <SELECT> nos muestra
una lista desplegable con varias respuestas, la ventaja es que ocupan poco espacio aunque contengan muchas
respuestas.
Esta etiqueta utiliza las de apertura y de cierre, y entre ellas se debe indicar todas las respuestas anteponiendo la
etiqueta <OPTION> a cada una de ellas.
En este ejemplo indicamos que se agregue un cuadro desplegable con una lista de respuestas.
La etiqueta <SELECT> tiene tres opciones: NAME ya la habamos mencionado anteriormente y su finalidad
es la misma, la opcin SIZE nos sirve para indicar el nmero de filas que se van a ver en nuestro men desplegable y
otra opcin que podemos incluir es la de MLTIPLE, con ella indicamos que es posible seleccionar ms de una
respuesta.
Las opciones de la etiqueta <OPTION> son VALUE y SELECTED, la primera tiene el mismo uso que
mencionamos anteriormente y la segunda indica cul es la repuesta que va a estar seleccionada por defecto.
40
HTML
8.3 BOTONES DEL FORMULARIO

Existen tres tipos de botones que podemos incluir en nuestra pgina, esto se hace cambiando el parmetro de la
opcin TYPE , por BUTTON, SUBMIT y RESET.
El primero nicamente pondr un botn en nuestra pgina sin ninguna funcin que se le pueda asignar va cdigo
HTML, nicamente se le podr asignar alguna funcin a este tipo de botn utilizando algn otro lenguaje de programacin
como puede ser PHP, JavaScript, VBScript, ASP, etc.
El botn SUBMIT nos sirve para enviar el formulario a la direccin que indicamos dentro de la etiqueta <FORM> y
RESET, este tipo de botn sirve para que el usuario pueda borrar toda la informacin o todos los cambios que haya
hecho en el formulario, restaurando los valores por defecto que hayamos definido.
Para incluir estos botones dentro de nuestro cdigo, debemos de utilizar el siguiente cdigo:
<CENTER>
<INPUT TYPE=submit VALUE=Enviar>
<INPUT TYPE=reset VALUE= Borrar>
</CENTER>.
En este ejemplo vemos que se agregarn dos botones de enviar y borrar.
La opcin VALUE indica el texto que se va a desplegar en el botn, con esto estamos incluyendo dos botones en
nuestra pgina; un botn tipo SUBMIT para enviar nuestro formulario y otro tipo RESET para borrar las modificaciones
que se hayan realizado en el formulario.
Estos botones aparecern centrados en nuestra pgina debido a que estn entre las etiquetas de apertura y cierre
<CENTER>.
8.4 OTROS ELEMENTOS
Podramos necesitar que el usuario solamente nos confirme, niegue o pueda seleccionar ms de una respuesta al
mismo tiempo, para ello utilizaremos CHECKBOX, esta opcin pondr un recuadro en nuestra pgina con la que
podremos seleccionar dndole un clic.
Hay algunos tipos de preguntas en la cual el usuario puede seleccionar varias opciones por medio
de las casillas de verificacin representadas por un pequeo cuadro con una palomita, por ahora
veamos cual es la sintaxis que se emplea:
Ac presentamos una pregunta:
Esta pgina s fue de mi inters
Enseguida vemos la sintaxis para agregar una casilla.
<INPUT NAME=si TYPE=checkbox>
La opcin CHECKED tambin puede ser incluida en esta etiqueta para que aparezca seleccionada por defecto.
Cuando nuestro formulario haya sido enviado, recibiremos por correo todas las respuestas, pero si por algn
motivo, tenemos varios formularios tendremos que indicar cules son las respuestas de cada una de ellos, para esto
debemos de situar el cursor al final de la etiqueta:
<FORM ACTION=mailto:sucorreo@hotmail.com METHOD=POST ENCTYPE= text/plain>
HTML
41
Enseguida debemos de dar un salto de lnea escribiremos la etiqueta:

<INPUT TYPE=hidden NAME=cuestionario1 VALUE=respuestas>
Esto no har ningn cambio visible en nuestra pgina, pero cuando enven el formulario sabremos el nombre de
ste.
8.5 ETIQUETAS
En todo el cdigo de nuestro formulario que hemos escrito, el texto que va antes o despus del formulario no est
asociado con las respuestas, para hacer la relacin tenemos la etiqueta <LABEL>, la cual se sita al principio de cada
parte del formulario, y al final se escribe la etiqueta de cierre </LABEL>.
8.6 AGRUPACIN DE ELEMENTOS

Para agrupar todos los elementos de nuestro formulario dentro de un rectngulo, se utiliza la etiqueta <FIELDSET>.
Vemos que en este ejemplo agregamos:

<FIELDSET>
Posteriormente anotamos <LEGEND ALIGN=CENTER> Cuestionario</LEGEND> y finalmente, situamos el cursor
de cierre </CENTER> que se encuentra antes de la etiqueta de cierre <FORM>, y dimos un salto de lnea y tecleamos
la etiqueta de cierre </FIELDSET>.
La etiqueta <LEGEND> nos pone un ttulo que en este caso es cuestionario en el cuadro que coloca la
etiqueta <FIELDSET>, la nica opcin de la etiqueta <LEGEND> es ALIGN con la cual, indicamos el lugar donde se va
a colocar el ttulo. Los parmetros aceptados son TOP, BOTTOM, LEFT, RIGHT, y CENTER, los cuales alinean el ttulo
arriba, abajo, a la izquierda, a la derecha y centrado respectivamente.
42
HTML
Despus de escribir todo esto, procederemos a guardar nuestro cdigo y Ver el resultado por lo cual
nuestro cdigo queda de la siguiente manera:
8.7 DESACTIVACIN DE ELEMENTOS

La opcin DISABLED sirve para desactivar algn control de nuestro formulario. Todos los controles aceptan esta
opcin, tal vez a simple vista parezca ilgico utilizarla y para HTML no es muy til, pero cuando se utiliza algn otro
lenguaje como JavaScript, podemos usarla para desactivar algunas partes de nuestro formulario que no sean
necesarias en algn momento.
Para usar esta opcin, solamente hay que incluirla dentro de las etiquetas de cualquier elemento de nuestro formulario, por ejemplo:
<INPUT TYPE=submit VALUE=Enviar DISABLED>
9 MAPAS Y TABLAS
9.1 MAPAS GESTIONADOS POR EL CLIENTE
Hasta ahora solamente hemos hecho enlaces en un texto o en una imagen, pero tambin existe la posibilidad de que
en una sola imagen se puedan tener varios enlaces ms y a esto se les denomina MAPAS, ello se hace delimitando
zonas en nuestra imagen ya sean crculos, rectngulos o polgonos y definiendo en cada uno de ellos el enlace al
cual deseamos hacer referencia.
Ac presentamos un ejemplo de un mapeo para que podamos comprender su utilidad.
HTML
43
En este cdigo se definen las divisiones de nuestra imagen con la etiqueta <REA> como se aprecia en nuestro cdigo
no es necesario cerrarla; las opciones que se pueden incluir en esta etiqueta son SHAPE, la cual indica el tipo de figura
con la que vamos a delimitar una parte de nuestra imagen. Los parmetros que se pueden utilizar en esta opcin son
RECT, CIRC, y POLY con las cuales indicamos que nuestra divisin va a ser un rectngulo, un crculo o un polgono
respectivamente.
La siguiente opcin es COORDS, en esta opcin le estaremos indicando al navegador las coordenadas que va a
tener nuestra zona en donde deseamos tener un enlace. Las coordenadas van separadas de una coma y el nmero
depende del tipo de parmetro que hayamos definido en el SHAPE.
Si tenemos SHAPE = RECT las coordenadas que tenemos que definir son las de la esquina superior
izquierda (x1,y1) y la de la esquina inferior derecha (x2,y2) de nuestro rectngulo, todas las coordenadas que definamos
son en pxeles y ser necesario utilizar algn programa de manipulacin de imgenes que nos las proporcione.
Si tenemos SHAPE = CIRC las coordenadas que tenemos que definir son las del centro de nuestro crculo
(x1,y1) y las coordenadas del radio.
Si tenemos SHAPE = POLY, tenemos que definir las coordenadas de todas las esquinas de nuestro polgono (x1,y1, x2,y2, x3,y3, x4,y4 .), automticamente la ltima pareja de coordenadas que definamos.
Y por ltimo la opcin HREF, con la cual estamos indicando la pgina a la cual va a ser referencia la parte de la
imagen que hemos definido, el uso de esta opcin y el direccionamiento ya se ha explicado en captulos anteriores.
9.2 COMO USAR UN MAPA
Lo primero que vemos en nuestro cdigo es la etiqueta <MAP NAME = mi_mapa> con la cual estamos indicando
el nombre de nuestro mapa para saber a que imagen le queremos dar esta opcin, esta etiqueta se cierra despus de que
se definen todas las reas en las que deseamos dividir nuestra imagen.
44
HTML
Vemos que por ltimo la etiqueta <IMG SRC=sistema.jpg USEMAP= #mi_mapa BORDER = 0>, con la
cual estamos incluyendo una imagen en nuestra pgina; esto ya lo habamos hecho anteriormente, siendo la nica
opcin que se le agrega a esta etiqueta, USEMAP = #mi_mapa (que es el nombre de la imagen) para indicar que
es en esta imagen donde se va a realizar la delimitacin de la imagen.
Despus de haber creado el cdigo recordemos que debemos de guardar los cambios en el bloc de notas
y visualizar los cambios por medio del explorador, .
9.3 DEFINIR FILAS
La forma ms clara de organizar la informacin de una pgina son las tablas, con ellas es posible dividir nuestra pgina
en segmentos y situar en cada uno de ellos informacin, ya sean textos, imgenes, entre otros.
Para insertar una tabla en nuestra pgina haremos uso de la etiqueta <TABLE> con la cual estamos definiendo
su inicio, cuando acabemos de escribir el cdigo de nuestra tabla es necesario cerrarla con la etiqueta </TABLE>.
Cuando deseemos incluir una tabla en nuestra pgina primero debemos definirla, es decir darle sus caractersticas o
propiedades, posteriormente se establecern las filas y por ltimo las columnas.
Las opciones de la etiqueta <TABLE> son BORDER, BORDERCOLOR, BGCOLOR, BACKGROUND,
CELLSPACING, CELLPADDING, WIDTH y ALIGN.
Con la opcin BORDER se indica el grosor del borde que tendr nuestra tabla. BORDERCOLOR define el color
de los bordes de toda nuestra tabla, es decir todas las lneas que tendrn el color que se defina aqu. BGCOLOR nos sirve
para poner un color de fondo a nuestra tabla.
BACKGROUND en el caso de que deseemos incluir una imagen de fondo en nuestra tabla, esta opcin nos es
til. CELLSPACING define la distancia que va a separar las celdas. CELLPADDING indica la distancia que habr entre
el borde de las celdas y el contenido de las mismas. WIDTH con esta opcin especificamos el tamao de nuestra tabla,
se puede definir en pxeles o en porcentaje, al final del nmero que escribamos.
Y por ltimo ALIGN indica la alineacin que va a tener nuestra tabla y los parmetros que acepta son LEFT,
RIGHT y CENTER, con los cuales alinea la tabla a la izquierda, derecha o la centra, respectivamente.
Las filas en una tabla se definen con la etiqueta <TR> y acepta las opciones ALIGN, VALIGN, BGCOLOR y
BORDERCOLOR.
ALIGN alinea el contenido de la fila horizontalmente utilizando los parmetros LEFT, RIGHT y CENTER para
alinear el contenido de la fila a la izquierda, a la derecha o centrado.
VALIGN alinea el contenido de la fila en forma vertical utilizando los parmetros TOP, MIDDLE y BOTTOM, los
cuales alinean el contenido de la celda en la parte de arriba, centrada o en la parte de abajo respectivamente. BGCOLOR
nos sirve para poner un color de fondo a la fila y por ltimo la opcin BORDERCOLOR, con la cual estaremos indicando
el color del borde de la fila.
HTML
45
9.4 DEFINIR CELDAS

Por ltimo, lo nico que nos falta para hacer buen uso de nuestra tabla es definir las celdas con la etiqueta <TD>, y sus
respectivas opciones, ALIGN, VALIGN, BGCOLOR, BORDERCOLOR, WIDTH, COLSPAN y ROWSPAN.
ALIGN alinea el contenido de la fila horizontalmente utilizando los parmetros LEFT, RIGHT y CENTER para
alinear el contenido de la fila a la izquierda, a la derecha o centrado. VALIGN alinea el contenido de la fila en forma vertical
utilizando los parmetros TOP, MIDDLE y BOTTOM, los cuales alinean el contenido de la celda en la parte de arriba,
centrada o en la parte de abajo respectivamente.
BGCOLOR nos sirve para poner un color de fondo a la fila y por ltimo la opcin BORDERCOLOR, con la cual
estaremos indicando el color del borde de la fila.
Con WIDTH especificaremos el ancho de nuestra celda tanto en pxeles o en porcentaje, cabe mencionar que el
ancho de la celda no va a ser con respecto al tamao total de nuestra pgina, sino al tamao total de la tabla. COLSPAN
indica el nmero de columnas que va a ocupar nuestra tabla, es decir si nuestra tabla tiene 5 columnas e indicamos en
COLSPAN=2 , nuestra celda ocupar 2 columnas de 5 y por ltimo ROWSPAN indicar el nmero de filas que va a
ocupar nuestra celda.
Ac presentamos un ejemplo de cdigo en donde agregamos una tabla.
<TABLE BORDER=1 ALIGN=CENTER WIDTH=50% CELLPADDING= 10>
<TR>
<TD COLSPAN=2 ALIGN=CENTER> PGINAS DE INTERES </TD>
Con esto estamos indicando el principio de nuestra tabla.
<TR> nos permite indicar la primera lnea de nuestra tabla, con este segmento de cdigo estamos indicando que se va
a tener una celda.
En la lnea en la cual empleamos Td colspan indica que va a ocupar dos columnas, finalmente vemos que se
indica el cierre de esta etiqueta con </TR> y con esto indicamos el fin de la primera lnea de nuestra tabla.
<TR> nos permite indicar la primera lnea de nuestra tabla, con este segmento de cdigo estamos indicando que se va
a tener una celda.
En la lnea en la cual empleamos Td colspan indica que va a ocupar dos columnas, finalmente vemos que se
indica el cierre de esta etiqueta con </TR> y con esto indicamos el fin de la primera lnea de nuestra tabla.
46
HTML
En este ejemplo se indica que se agregar una tabla de tres filas que contendrn cada una dos
celdas y el resultado que se ve en el explorer ser el siguiente.
Es importante mencionar que con estos elementos que conocimos podemos crear tablas anidadas, es
decir, que dentro de una celda podamos dividirlas segn nuestras necesidades.
9.5 TTULO DE LA TABLA

Si deseamos agregar ttulo a nuestra pgina, la etiqueta <CAPTION> nos ser de utilidad, esta etiqueta debe ir debajo de
la etiqueta de apertura de nuestra tabla y entre las etiquetas de apertura y de cierre <CAPTION> debe ir el ttulo de
nuestra pgina, por ejemplo <CAPTION> Tabla </CAPTION>, la nica opcin que admite esta etiqueta es ALIGN con
la cual indicamos la alineacin del ttulo; los parmetros admitidos son TOP y BOTTOM con los cuales se sita el ttulo
arriba o debajo de nuestra tabla, respectivamente.
Felicidades, hasta ahora tenemos la capacidad de crear pginas Web de manera correcta con el
uso de las etiquetas de html, recordemos que la calidad de la pgina nosotros la determinaremos segn la
alternacin de las etiquetas que ac se aprendieron y es importante que por nuestra cuenta por medio del
Internet busquemos ms informacin sobre otras etiquetas de html que nos sern de gran utilidad.
HTML
47
PRCTICAS
Capitulo
Tema 1
Con el apoyo del manual de trabajo analice la informacin correspondiente a una breve historia.
Tema 2
Lea el contenido del tema requisitos que tiene en el manual de trabajo.
Tema 3
Analice la informacin correspondiente a contenido que tiene en el manual del curso.
Tema 4
Lea y comprenda la importancia de la estructura de una pgina Web con la informacin contenida en el manual del
curso.
Tema 5
Lea la informacin de accesibilidad que tiene en el manual del curso.
Tema 6
Analice la informacin de diseo que tiene en el manual del curso.
Entre a las siguientes pginas.
www.cemdemexico.com
www.itec.com.mx
www.gratisweb.com/mundoentretenida
Captulo 2
Tema 1
Abra la aplicacin del bloc de notas.
Agregue las etiquetas principales de html.

Tema 2
Analice la funcin del cdigo principal de una pgina Web con el apoyo del manual del curso.
48
HTML
Tema 3
En el escritorio cree una carpeta de nombre sistema solar.
Agregue la etiqueta del cuerpo <body> y capture la informacin que corresponde a la pgina de
mercurio.
Guarde la pgina con el nombre de mercurio.html dentro de la carpeta sistema solar que tiene en el
escritorio.
Abra la carpeta que tiene del proyecto, elija el archivo de nombre mercurio y bralo para ver los
cambios efectuados.
Ahora en cualquier parte vaca de la pagina de un clic derecho y elija ver cdigo fuente, de esta
manera sabemos que podemos seguir haciendo cambios para posteriormente ver los cambios en la
ventana de Internet explorer.
Tema 4
Analice la funcin de las etiquetas de la cabecera.
Ubquese despus de la etiqueta <head> y agregue:
Ahora analice la sintaxis con el apoyo del manual del curso.

Ubquese despus del cdigo que anot y agregue:
Analice la sintaxis con el apoyo del manual del curso.

Guarde los cambios del bloc de notas.
HTML
49
Tema 2
Utilice las etiquetas para establecer los siguientes colores de fondo de la pgina de mercurio.
Rojo, verde, plata, amarillo, azul, blanco y finalmente djelo con color negro.
Analice la informacin que tiene en el manual del curso con relacin a este tema.
Indique en el body el color de texto: blanco.
Color de link: Azul
Color de Alink: amarillo
Vlink: rojo.
Por su cuenta cambie el color del texto a los que sea de tu agrado y finalmente djalo en color blanco.
Visualiza los resultados obtenidos.
Pida al docente que nos proporcione todas las imgenes que utilizars, sonidos y script para el desarrollo
del proyecto.
Dentro del body indique que mande a llamar la imagen de nombre fondo.jpg.
Analice la funcin de cada etiqueta que se agreg con el apoyo del manual del curso.
Guarde los cambios y visualice el resultado obtenido.
Tema 3
Alinea el texto de mercurio a la derecha, ahora a la izquierda, finalmente que quede centrado.
Indique la separacin de los prrafos con el empleo de sus correspondientes etiquetas quedando de la
siguiente manera:
50
HTML
Captulo 4
Tema 1
Al ttulo de mercurio asgnele el tamao de h5, enseguida h4, h3 y finalmente que quede en H2
Tema 2
Despus de la etiqueta de <h2> del ttulo de mercurio agregue la etiqueta de <big> y cirrelo despus
de </h2>.
Guarde los cambios y visualice los cambios en la ventana del explorer.
Ahora en vez de <big> sustityalo por small y cierre su correspondiente etiqueta.
Guarde los cambios y visualice los cambios en el explorer.
Quite las etiquetas <small> </small> ya que pretende que quede con <h2>
Ubique el cursor antes del ttulo que dice: mercurio y agregue la correspondiente etiqueta de apertura de cursiva y
cierre la etiqueta despus del ttulo.
Haga que el ttulo que dice mercurio est subrayado.
Haga que el ttulo de mercurio quede como si fuera letra de mquina de escribir con <tt> </tt>.
Quite las etiquetas de <tt> </tt> ya que no desea que tenga el estilo de mquina de escribir.
Este es el cdigo que debe quedar hasta este momento para el ttulo de mercurio
Busque en el contenido que tiene dentro del body la frase:

para que sea superndice.
km
y agregue la correspondiente etiqueta
De la misma manera hgalo las veces que est esta frase en el contenido.
Ahora busque en el contenido la frase:
subndice.
das
y agregue la correspondiente etiqueta para que sea
De la misma manera hgalo las veces que est esta frase en el contenido.
Guarde los cambios y visualice el resultado en la ventana del explorer.
Regrese al cdigo y quite las etiquetas de <sub>
subndice.
</sub> de la palabras: das ya que no desea que sea
Guarde cambios del bloc de notas y visualice el resultado.
HTML
51
Tema 3
Aplique la etiqueta <cite> al ttulo de mercurio.
Analice la informacin del manual del curso con relacin a <code> </code>
Busque y aplique la etiqueta <strong> a los ttulos que tiene en el contenido de:
58 millones de km
4.875 km
88 das
58,7 das
Busque la palabra: sol y aplique la etiqueta <em> de la misma manera hgalo tantas veces est en este contenido.
Analice la funcin de la etiqueta <del> que est en el manual del curso.
Colquese antes de la etiqueta de </html> y escriba:<br>
Si pretende que le enviemos el artculo con la informacin completa del planeta mercurio enve un correo a la
siguiente direccin:
<ADDRESS> javcrismon19@hotmail.com </ADDRESS>
Analice la funcin de la etiqueta <BLOCKQUOTE> que est en el manual del curso.
Tema 4
Ubquese despus de las etiquetas de:
Y agregue las correspondientes etiquetas para agregar una lnea de color rojo y de ancho 70%.
Ubquese antes de la etiqueta <address> e indique dos saltos de lneas con su etiqueta correspondiente.
Ubquese despus de la etiqueta </address> y agregue lo siguiente:
<! Este curso fue realizado por el profesor Francisco Javier Prez Lpez >
Guardemos los cambios en el cdigo fuente y visualicemos los cambios.
Tema 5
Al ttulo de: mercurio, establezca el color de letra : rojo
Asgnele con el uso de sus correspondientes etiquetas el color amarillo a los textos de los prrafos que
tiene en la pgina de mercurio.
Establezca el color de texto naranja al correo: javcrismon19@hotmail.com que tiene casi al final antes
del cierre del </body>
52
HTML
Tema 6
Indique a todos los prrafos que tenga un tamao de letra: 4.
En este ejemplo ver que slo debe colocar el cursor antes de > que corresponde a font y agregar
size=4 >.
Determine el tamao 6 para la direccin de correo electrnico que est casi al final antes del cierre del
</body>
Tema 7
A todos los prrafos debe establecerles el tipo de letra:
finalmente que quede en: Time new Romn.
Arial black, ahora que sea:
Comics sans ms y
Analice la informacin contenida en el manual del curso.

De la misma forma que termin de aplicar formato a los prrafos como tipo de letra, tamao, color,
alineaciones, debe crear las pginas de cada uno de los planetas del sistema solar (Venus.html,
tierra.html, Marte.html, Jpiter.html, saturno.html, urano.html , neptuno.html y pluton.html).
La informacin de cada planeta puede tomarla de un archivo llamado planetas.doc que su docente le dio cuando
le solicit las imgenes y el material a utilizar.
Es importante mencionar que cada pgina que cree, debe tener el nombre del planeta en letras minsculas y
deber tener la misma imagen de fondo de la pagina; adems debe de utilizar el mismo tipo de letra,
ttulos que representan la informacin del planeta que estn centrados, adems es de mucha importancia
que los prrafos estn justificados y dependiendo del contenido aplicar etiquetas de estilos de los textos para
resaltar ciertas informaciones.
Nivel intermedio
Captulo 1
Tema 1
Analice la informacin del manual del curso en relacin a los caracteres extendidos en html.
Tema 2
Lea la informacin de caracteres de control que tiene en el manual del curso, no lo aplicar ya que en la mayora
de los navegadores se visualiza, pero en caso de que el resultado no sea el esperado sabr como hacerlo.
Tema 3
Abra el bloc de notas.
Agregue el siguiente cdigo:
HTML
53
Guarde la pgina con el nombre de: men.html
dentro de la carpeta del sistema solar.
Analice el cdigo con el apoyo del manual del curso.

Visualice el resultado en el explorador.
Tema 4
Estando en uso el archivo de nombre men.html y viendo el cdigo, ubquese despus de <li> planetas y
agregue:
Con esto indica una lista numerada con nmeros romanos.

Guarde los cambios y visualice el resultado en el explorador.
Ahora analice el cdigo que tiene en el manual del curso para crear una lista pero como tipo de
vietas de crculos, enseguida analice la informacin del manual en relacin a este tema.
Tema 5
Ubquese despus de la etiqueta </ul> de un enter y agregue:
54
HTML
Analice la utilidad de estas etiquetas con el apoyo del manual del curso.
Guarde los cambios y visualice el resultado en el explorador.
Captulo 2
Tema 1
Analice la informacin del manual de trabajo de enlaces.
Tema 2
HTML
55
Guardemos la pgina con el nombre de paginas.html dentro de la carpeta del sistema solar.
Visualice el resultado.
Analice que en el cdigo se ve se presentan cuatro listas de enlaces a otras pginas de Internet en la cual se
han aplicado diferentes tipos de listas numeradas.
En este tipo de hipervnculo vemos que hacemos referencia a target=llegada es decir que en este marco se
presentara la informacin, mas delante crearemos la pagina de marcos.
Cerremos la pgina de nombre paginas.html
Abra la pgina de nombre men.html e indique los hipervnculos para cada pgina de la siguiente manera y
se debe hacer referencia al marco de llegada de nombre target=llegada .
Guarde los cambios.

Pruebe que todos los hipervnculos funcionen.
Cierre la pgina de nombre men.html
Abra el bloc de notas y agregue:
56
HTML

Guarde la pgina con el nombre de index.html dentro de la carpeta de sistema solar.
Abra el archivo index.html y ve el resultado.
Tema 3
Abra el archivo de nombre paginas.html
Analice la parte de los encabezados en donde se utilizaron las anclas para cada ttulo de generales, tierra,
saturno y sol, ac ver que se emple el smbolo de # seguido del nombre del ancla.
Enseguida asigne los nombres de las anclas que hizo anteriormente para que los enlaces internos funcionen.
Guarde los cambios y lo visualice en el explorador

Tema 4
Abra el archivo de nombre mercurio.html
Inserte la imagen que corresponde a mercurio despus de la sintaxis para agregar una lnea, adems con Alt
agregue su texto alternativo, emplee las etiquetas para determinar el tamao de ancho y alto cuidando que se
vea bien (los porcentajes se pueden modificar segn el resultado).

Guarde los cambios y visualcelos en el explorer.
De la misma manera abra cada pgina que corresponde a cada planeta e inserte su correspondiente
imagen, como se hizo en la pgina de mercurio, recuerde que las imgenes estn en el material que el docente
nos dio.
HTML
57
Ahora abra un nuevo bloc de notas y agregue:
Analice nicamente los bloques de las lneas de la insercin de imgenes a la cual se le han establecido
hipervnculos con el apoyo del manual del curso.
Se agregaron otras etiquetas de insercin de una tabla que ms adelante se explicar as como las etiquetas
de marquee.
Tema 5
Analice la informacin del manual de trabajo de alineaciones respecto al texto.
Por su cuenta alinee las imgenes de manera que considere que se ve mejor en cada una de las pginas de
los planetas que ya estn creadas hasta este momento.
58
HTML
Captulo 3
Tema 1
Abra la pgina de nombre mercurio.html
Ubique el cursor antes de la etiqueta de cierre </DL> y de un enter.
Ahora agregue las etiquetas correspondientes para agregar un texto con vietas que diga: sonido y reproduzca el sonido de nombre laplaya.mp3
Guarde los cambios y vea los resultados obtenidos.
Tema 2
Abra la pgina de nombre mercurio.html
Vea el cdigo fuente, colquese despus de la etiqueta de cierre de </title> y agregue las etiquetas
correspondientes para que reproduzca el sonido de nombre laplaya.mp3 y que en el loop se reproduzca 2
veces.
Ahora ubquese antes de la etiqueta de cierre </body> , de un enter y agregue las etiquetas
correspondientes para indicar que se agregue un reproductor de alto 60 y ancho 250 que mande a reproducir
el sonido de nombre: laplaya.mp3 y en su valor de autostar: que sea false.
Con el apoyo del manual del curso analice el cdigo.
Guarde los cambios en el cdigo y visualice los resultados en la ventana del explorador, ac espere a que
termine de reproducir el sonido de fondo de la pgina y enseguida presiona el tringulo del reproductor para ver
que efectivamente funcione.
Captulo 1
Tema 1
Abra otro nuevo bloc de notas y agregue lo siguiente:
HTML
59
Guarde el archivo con el nombre de cuestionario.html dentro de la carpeta sistema solar

Ahora analice la informacin que tiene el manual del curso con relacin a la agregacin de cuadros de
textos que le ayudar a comprender el cdigo que agreg.
Tema 2
Con el apoyo del manual del curso analice el siguiente cdigo que anteriormente agreg del grupo de
opciones.
60
HTML
De la misma manera analice el cdigo de cuadros desplegables:
Tema 3
Analice el cdigo que tiene de la agregacin de los botones enviar y borrar.
Tema 4
Con el apoyo del manual del curso analice el cdigo de:
De la misma manera analice:
Finalmente analice el siguiente cdigo.
Tema 5
Analice la informacin correspondiente a etiquetas.
Tema 6
Con el apoyo del manual del curso agregue la etiqueta <fieldset> de manera que todo el formulario quede
dentro de un cuadro, adems agregue el ttulo al cuadro de cuestionario
HTML
61
Tema 7
Analice la informacin del tema desactivacin de elementos que est en el manual del curso.
Captulo 2
Tema 1
Abra un nuevo bloc de notas y agregue el siguiente cdigo.
Analice el cdigo que acaba de agregar con el apoyo del manual del curso en el tema
gestionados por el cliente y como usar un mapa.
mapas
Guarde la pgina con el nombre de mapa.html dentro de la carpeta de sistema solar y vea los
resultados.
Ahora ubquese despus de las etiquetas de apertura del body y d un enter:
Abra el archivo del bloc de notas de nombre: efecto para texto siguiendo cursor.txt, seleccione todo el
cdigo y cpielo.
Ahora debe pegarlo en la lnea que le sigue despus del body como ya haba mencionado.
Guarde los cambios en el cdigo y vea el resultado en el explorer.
62
HTML
Tema 3
Abra un nuevo bloc de notas y agregue lo siguiente:
Analice el cdigo con el apoyo del manual del curso del tema definir filas, definir celdas y ttulo de
la tabla.
Guarde el archivo con el nombre de superior.html y vea los resultados en el explorador.
Cierre el archivo de nombre superior.html
Abra el archivo de nombre men, ubquese despus de la etiqueta de apertura del <body> y de un enter,
ahora abra el archivo de nombre: saludo buenos das, buenas tardes, buenas noches.txt, copie todo el
cdigo, enseguida pguelo despus del body.
Guarde los cambios en el cdigo y vea los resultados en el explorador.
De esta manera has terminado nuestro proyecto del sistema solar de manera completa y vers la gran aplicacin
de los usos de las etiquetas de html.
HTML
63
Este libro se termino de imprimir en Enero del 2008
Primera edicion de 100 ejemplares

cuadernos de trabajo
HTML ITEC impresarial
64
HTML

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

Instituto Tecnolgico Especializado en Computacin

I nstituto T ecnolgico E specializado

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

CAPTULO 1 INTRODUCCIN AL CURSO

CAPTULO 2 MI PRIMERA PGINA

CAPTULO 3 ESTRUCTURA DEL DOCUMENTO

CAPTULO 4 FORMATO A LA PGINA

CAPTULO 5 CARACTERES Y LISTAS

Instituto Tecnolgico Especializado en Computacin e Ingls

CAPTULO 9 MAPAS Y TABLAS

Instituto Tecnolgico Especializado en Computacin

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

1.4 ESTRUCTURA DE LAS PGINAS

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

2.3 EL CUERPO DEL DOCUMENTO

Para guardarlo debemos de activar el men archivo y hacer la eleccin de guardar.

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Frameset//EN http://w3.org/TR/REC-html40/frameset.dtd>.

Instituto Tecnolgico Especializado en Computacin e Ingls

Veamos otro ejemplo hemos agregado:

Para ver los cambios que se realicen en la pgina

Instituto Tecnolgico Especializado en Computacin

3.2 CONFIGURACIN DEL CUERPO

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

Instituto Tecnolgico Especializado en Computacin e Ingls

3.3 FORMATO DE PRRAFO

Instituto Tecnolgico Especializado en Computacin

En este ejemplo: <CENTER>SISTEMA SOLAR</CENTER>

Ac se presenta un ejemplo en el cual se indica el bloque de un prrafo con la etiqueta <p>

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

4.2 CAMBIANDO EL TIPO DE LETRA

Ac nicamente la palabra sistema aumentar de tamao, de la misma manera se entiende que se

en este ejemplo la palabra sistema se presentar en cursiva.

El resultado sera Tierra 20000 Kms 2. superndice

Instituto Tecnolgico Especializado en Computacin e Ingls

4.3 FORMATO DE LA FRASE

Instituto Tecnolgico Especializado en Computacin

Con esto insertaremos

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

Instituto Tecnolgico Especializado en Computacin e Ingls

Instituto Tecnolgico Especializado en Computacin

5.3 LISTAS DESORDENADAS

Instituto Tecnolgico Especializado en Computacin e Ingls

5.4 LISTAS ORDENADAS

Este sera el resultado obtenido:

Instituto Tecnolgico Especializado en Computacin

Instituto Tecnolgico Especializado en Computacin e Ingls

6.1 LA ETIQUETA <A>

Instituto Tecnolgico Especializado en Computacin

En este ejemplo se presenta la manera de establecer un hipervnculo de pginas de Internet por

Existe otra forma de direccionar a archivos, la forma absoluta y la forma relativa.

Instituto Tecnolgico Especializado en Computacin e Ingls

En target se anotara as: target=llegada

Instituto Tecnolgico Especializado en Computacin

Frameset: indica la creacin de una pgina de marcos.