Instituto Tcnico Industrial Rafael Reyes - Duitama

Tecnologia e Informatica
Grado 11

PAGINA WEB
Actividad # 3

Consecucin Creacin HTML

Insertar listas
en el texto

Cuando preparamos material en lnea, frecuentemente preparamos listas de artculos u opciones al

resumir los textos, en la forma:

Los objetivos del ITIRR son:

Desarrollar programas de innovacin y experimentacin educativa, acordes con las polticas

adoptadas por el MEN.

Propiciar alianzas y convenios interinstitucionales para crear espacios de formacin integral.

Explorar, cualificar y atender las competencias existentes en la poblacin estudiantil,

teniendo en cuenta la diversidad cultural y los niveles de desarrollo intelectual respetando
el ritmo de aprendizaje.

Propiciar el desarrollo integral de los educandos con compromiso social, respetando la

individualidad y el goce por la vida.

Ofrecer oportunidades educativas de preferencia a la poblacin de escasos recursos

econmicos que les posibiliten la continuacin de los estudios y desarrollo de las
potencialidades.

En HTML podemos crear fcilmente dichas listas y sangrar cada uno de sus componentes usando las
etiquetas <ul>, <ol> y <li>. Con <ul> (inciales de un-ordered list o lista no ordenada en ingls)
indicamos que vamos a introducir una lista no numerada como en el ejemplo mostrado arriba.

Luego, usamos <li> delante de cada uno de los elementos de la lista y finalmente cerramos o
indicamos el final de la lista con </ul>.

El ejemplo anterior, se escribira as en HTML:

<p>
Los objetivos del ITIRR son:
<ul>
<li>
Desarrollar programas de innovacin y experimentacin educativa, acordes con las polticas
adoptadas por el MEN.
Lic. Esp2. Howard Cabrera M.
Docente Diseo Tecnologico
 Instituto Tcnico Industrial Rafael Reyes - Duitama
Tecnologia e Informatica
Grado 11

<li>
Propiciar alianzas y convenios interinstitucionales para crear espacios de formacin integral.
<li>
Explorar, cualificar y atender las competencias existentes en la poblacin estudiantil, teniendo en
cuenta la diversidad cultural y los niveles de desarrollo intelectual respetando el ritmo de
aprendizaje.
<li>
Propiciar el desarrollo integral de los educandos con compromiso social, respetando la
individualidad y el goce por la vida.
<li>
Ofrecer oportunidades educativas de preferencia a la poblacin de escasos recursos econmicos
que les posibiliten la continuacin de los estudios y desarrollo de las potencialidades
</ul>

En caso de que deseemos que cada opcin sea numerada automticamente, usamos <ol> (iniciales
de ordered list o lista ordenada en ingls) con su correspondiente </ol> para abrir y cerrar la lista y
cada uno de sus elementos ser numerado automticamente como 1., 2., 3., etc. Si deseamos que
la numeracin se haga en forma alfabtica (a., b., c., etc.) en vez de numrica, simplemente
iniciamos la lista entonces con la etiqueta <ol type=a>.

Insertar grficos
en nuestras pginas

Para colocar imgenes, fotos, ilustraciones o cualquier tipo de grficos en nuestras pginas HTML,
debemos usar formatos grficos estndares que puedan ser vistos por la mayora de los usuarios en
Internet. Los dos formatos ms comunes y que son mostrados sin problemas por prcticamente por
todos los navegadores grficos en cualquier plataforma son el gif (Compuserve Graphics Interchange
Format) y el jpeg (Joint Photographic Experts Group). El formato gif se usa comnmente para
grficos e ilustraciones que requieren menos de 256 colores (ste es el lmite de colores que
muestra), mientras que el formato JPEG es la opcin de preferencia para fotografas e imgenes
coloridas porque permite hasta 16 millones de colores y comprime el tamao del archivo,
permitiendo que se puede mostrar ms rpido en nuestras pantallas.

Asegrese de tener su grfico en uno de estos dos formatos, antes de intentar colocarlo en una
pgina web. Si por el contrario estuviera en otro formato, use un programa grfico para convertirlo
a gif o jpeg. La mayora de los programas grficos le permiten grabar sus imgenes e ilustraciones
en estos formatos.

Insertar una imagen en su pgina web es simple una vez que la tenemos en uno de estos formatos.
Si nuestro grfico se llama logo.gif entonces basta con usar la etiqueta <img src=logo.gif>. Si
deseamos que la imagen aparezca a un lado de la pgina y el texto corra a su alrededor, entonces
haramos <img src=logo.gif align=left> para colocarla a la izquierda o <img src=logo.gif align=right>
para colocarla a la derecha.

Lic. Esp2. Howard Cabrera M.

Docente Diseo Tecnologico
 Instituto Tcnico Industrial Rafael Reyes - Duitama
Tecnologia e Informatica
Grado 11

Si queremos que las imgenes muestren un texto explicativo o alternativo en pantalla cuando el
visitante pasa el mouse por encima de ellas, podemos indicarlo incluyendo la opcin alt dentro de
la etiqueta en la forma siguiente <img src=logo.gif align=left alt="texto descriptivo">.

Introducir enlaces
con otras pginas

Adems de permitirnos hacer referencia a otras pginas en Internet, los enlaces nos permiten
segmentar nuestra propia informacin en diferentes pginas conectadas entre s para hacer ms
gil y organizada la presentacin a nuestros visitantes.

Si, por ejemplo, deseamos incluir un enlace para la pgina de las Naciones Unidas en nuestra pgina,
escribiramos <a href=http://www.un.org> Seleccione aqu para visitar las Naciones Unidas</a>.
Fjese que la etiqueta inicial es <a href=> y que se cierra con un simple </a>.

El texto que queda entre las etiquetas <a href=> y </a> aparecer subrayado en la mayora de los
navegadores para indicar que es un enlace de hipertexto.

Adems de texto, podemos incluir imgenes como enlaces entre las etiquetas y as hacer ms
vistosas nuestras pginas, por ejemplo <a href=principal.html><img src=flechita.gif alt="seleccione
aqu para volver a la pgina principal"></a>. En este caso, la imagen flechita.gif aparecer con un
borde a su alrededor y si la seleccionamos con el mouse, nos llevar al archivo principal.html. Si por
razones estticas no deseamos que se muestre el borde alrededor de la imagen, basta con escribir
border=0 dentro de la etiqueta img as: <img src=flechita.gif alt="seleccione aqu para volver a la
pgina principal" border=0>.

Si deseamos que las personas puedan escribirnos directamente a nuestro correo electrnico,
podemos incluir un enlace especial usando el protocolo mailto en nuestra pgina.
En el caso del ITIRR, sera algo as: <a href=mailto:itirr.duitama@gmail.com>Seleccione aqu para
enviarnos un mensaje de correo electrnico</a>. Cuando el visitante, seleccione con el mouse la
opcin anterior, se le abrir una ventana o su programa de correo electrnico favorito (depende de
cmo el visitante tenga configurada su computadora), desde la cual podr enviarnos un mensaje de
correo por la red.

Volvamos a nuestro ejemplo anterior y pongamos en prctica. Si desea ver el resultado de esta
pgina en Internet, codificarla, abrirla en un navegador y subirla a su blog, con el texto a
continuacin que lo define.

Posdata: Los enlaces de este ejemplo son ficticios, buscar algunos existentes con el tema

<html>
<head>
<title>
Bienvenido al ITIRR </title>
</head>
<body bgcolor=navy text=white link=yellow vlink=lime>
Lic. Esp2. Howard Cabrera M.
Docente Diseo Tecnologico
 Instituto Tcnico Industrial Rafael Reyes - Duitama
Tecnologia e Informatica
Grado 11

<a href=http://www.ministeriodeeducacinnacional.org/itirr>
<img src=http://www.mineducacion.com/itirr/graficos/logos/instraw-01.gif align=left
alt="seleccione aqu para visitar la pgina oficial de Instraw" border=0>
</a>
<a href=http://www.ministerio de educacin nacional.org/spanish>
<img src=http://www.mineducacion.com/itirr/graficos/logos/onu-01.gif align=right
alt="seleccione aqu para visitar la pgina oficial de las Naciones Unidas en espaol" border=0>
</a>
<h2 align=center>
<font color=yellow>
Instituto Tcnico Industrial Rafael Reyes<br>
- ITIIRR -
</font>
</h2>
<p>
Bienvenidos a nuestro colegio virtual, donde esperamos brindarles un mejor servicio y una va
directa alternativa de comunicacin e informacin de apoyo para la <i>potenciacin de los
servicios educativos de este plantel</i>.
<hr>
<img src=http://www.mineducacion.com/itirr/graficos/misc/educacion.gif align=left>
<ul>
<li>
<a href=http://www.mineducacion.com/itirr/ejemplo/que-es.html>
Qu es el ITIRR?
</a>
<li>
<a href=http://www.mineducacion.com/itirr/ejemplo/como.html>
Cmo trabajamos en el ITIRR?
</a>
<li>
<a href=http://www.mineducacion.com/itirr/ejemplo/recursos.html>
De dnde vienen los recursos financieros de ITIRR?
</a>
<li>
<a href=http://www.mineducacion.com/itirr/ejemplo/donde.html>
Dnde se encuentra el ITIRR?
</a>
</ul>
<hr>
<p align=right>
<a href=http://www.ministeriodeeducacinnacional.org/itirr>
<img src=http://www.mineducacion.com/itirr/graficos/logos/instraw-02.gif align=right
alt="seleccione aqu para visitar la pgina oficial de ITIRR" border=0>
</a>
<font color=lime size=-1>
Carrera 18 #23 -116 Duitama<br>
Boyac, Colombia<br>
Lic. Esp2. Howard Cabrera M.
Docente Diseo Tecnologico
 Instituto Tcnico Industrial Rafael Reyes - Duitama
Tecnologia e Informatica
Grado 11

(038)7612345 - fax (038)7621345<br>

correo-e: <mailto: itirr.duitama@gmail.com> itirr.duitama@gmail.com </a>
</font>
</body>
</html>

Escriba las lneas del ejemplo en un editor de texto y grbelas en un archivo llamado practica2.htm
en formato ASCII o de texto (Si est usando Microsoft Word for Windows, no use la opcin Save
as HTML. Grbe su archivo en el formato "text-only"), (aunque el archivo puede contener acentos,
el nombre no debe llevarlos, as que recuerde no acentuar la primera "a" en practica2.htm). Luego
vea ese archivo en su navegador favorito escribiendo el nombre completo del archivo y el nombre
o directorio donde se encuentra en la barra de direcciones (donde tpicamente aparece
http://www.ladireccion.com/delsitio/quevisitamos.html). O si lo desea use la opcin de Abrir en el
men File y localice el archivo en su disco duro. Al ver dicho archivo en su navegador, se le mostrar
el texto de la pgina, pero sin las etiquetas usadas.

Lic. Esp2. Howard Cabrera M.

Docente Diseo Tecnologico