Академический Документы
Профессиональный Документы
Культура Документы
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
ALUMNO:
MATRICULA:
GRUPO:
TEL. EMERGENCIA:
DIRECCION:
PROFESOR:
PROFESION:
EXPERIENCIA PROFESIONAL:
HTML
HORARIO:
TIPO DE SANGRE:
TEL. TRABAJO:
Indice
TEMA
PGINA
5
6
6
7
8
8
9
10
11
12
15
18
20
21
22
23
24
24
25
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
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.
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
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.
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:
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
14
HTML
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.
18
HTML
<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>
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>
<h3>sistema solar</h3>
<h4>sistema solar</h4>
<h5>sistema solar</h5>
<h6>sistema solar</h6>
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
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.
solar
solar
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
subndice
HTML
21
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%>.
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 a.
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
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
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
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.
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.
32
HTML
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.
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
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
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
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
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:
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
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.
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.
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:
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.
Guarde los cambios y visualice los cambios en el explorer.
Haga que el ttulo que dice mercurio est subrayado.
Guarde los cambios y visualice los cambios en el explorer.
Haga que el ttulo de mercurio quede como si fuera letra de mquina de escribir con <tt> </tt>.
Guarde los cambios y visualice los cambios en el explorer.
Quite las etiquetas de <tt> </tt> ya que no desea que tenga el estilo de mquina de escribir.
Guarde los cambios y visualice los cambios en el explorer.
Este es el cdigo que debe quedar hasta este momento para el ttulo de mercurio
km
De la misma manera hgalo las veces que est esta frase en el contenido.
Ahora busque en el contenido la frase:
subndice.
das
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.
HTML
51
Tema 3
Aplique la etiqueta <cite> al ttulo de mercurio.
Guarde los cambios y visualice el resultado en la ventana del explorer.
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
Guarde los cambios y visualice el resultado en la ventana del explorer.
Busque la palabra: sol y aplique la etiqueta <em> de la misma manera hgalo tantas veces est en este contenido.
Guarde los cambios y visualice el resultado en la ventana del explorer.
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>
Guarde los cambios y visualice el resultado en la ventana del explorer.
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%.
Guarde los cambios y visualice el resultado en la ventana del explorer.
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.
Comics sans ms y
HTML
53
Tema 4
Estando en uso el archivo de nombre men.html y viendo el cdigo, ubquese despus de <li> planetas 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 .
56
HTML
HTML
57
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
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
60
HTML
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:
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
64
HTML