Curso HTML Tec Mtry

TEMA 1: Conceptos bsicos de programacin
OBJETIVO
Al finalizar este primer tema, conocers el origen del HTML e
identificars conceptos elementales sobre los lenguajes de
programacin y su aplicacin.
INTRODUCCIN
Te damos la ms cordial bienvenida al curso de programacin
de HTML bsico y creacin de pginas web, a travs del cual podrs
adquirir conocimientos para la programacin de pginas para la WWW.
El Internet es una gran red global que tiene como objetivo acceder y
compartir informacin, noticias, comunicacin de negocios y
entretenimiento.
Los servicios principales que Internet ofrece a sus usuarios son los
siguientes:
Correo electrnico (e-mail).
World Wide Web (WWW).
Transferencia de Archivos (FTP).
Grupos de discusin (NEWSGROUPS).
Acceso remoto a otras computadoras (TELNET).
Noticias o USENET.
Uno de los servicios ms usados es el Word Wide Web ("WWW" o

"Web"), que es un sistema de documentos o pginas electrnicas de
todo el mundo interrelacionadas utilizando ligas entre s.
Una pgina Web es un documento que contiene informacin como

texto, imgenes, animaciones, fotografas, videos, etctera, que estn
relacionados a travs de enlaces dentro de la misma pgina o hacia otras
pginas. A estos enlaces se les conoce comnmente como ligas o
vnculos de hipertexto o hiperenlace. Esta caracterstica proporciona la
facilidad de brincar de una parte a otra en una misma pgina, o bien a
una pgina distinta en bsqueda de informacin. Muchos usuarios
describen este proceso como navegar en un espacio sin lmites. Estas
pginas que existen en la WWW son creadas, en su mayora, utilizando el
lenguaje de programacin conocido como HTML.
Aprender a programar en HTML te brinda la capacidad de transmitir

cualquier tipo de informacin a travs de la WWW. Por ejemplo puedes
intercambiar informacin personal o dar a conocer tu negocio o las
costumbres de tu comunidad.
A lo largo de este primer tema, podrs conocer cul es el origen del

HTML y las bases de un lenguaje de programacin.
1.1 Recursos bsicos de programacin: Qu es el HTML?
Para entrar de lleno a este tema, necesitamos comprender qu es un

lenguaje de programacin. Un lenguaje de programacin son una
serie de instrucciones acomodadas o estructuradas en base a ciertas
reglas que dan por resultado una accin determinada. Existen diferentes
tipos de lenguajes para diferentes tipos de aplicaciones. El lenguaje en
que se enfoca este curso es el HTML.
El HTML (Hyper Text Markup Language - Lenguaje de Marcas de

HiperTexto) es comnmente utilizado para la publicacin de pginas en
la Internet, ya que es el soporte esencial de todos los dems lenguajes
de programacin utilizados con ese objetivo.
Este lenguaje fue creado por el ingls Tim

Berners-Lee, quin desarroll la primera
versin de las instrucciones que componen al
HTML. Originalmente cre un pequeo
programa para uso personal al cual llamaba
"Sustituto de Memoria", y que le ayudaba a
recordar vnculos entre varias personas y los
proyectos en los que estaba trabajando. Al ver los resultados de la
herramienta, pens en extender su uso incorporndolo a una red ms
grande de computadoras en diferentes ubicaciones desde donde se
pudieran enlazar diferentes personas y tipos de informacin. Esta idea se
populariz a tal grado, que dio origen al intercambio de ideas grficas y
textuales a travs de Internet de forma masiva.
Bsicamente el HTML esta conformado por una serie de instrucciones que

le indican al explorador que estemos utilizando, la forma de representar
los elementos (grficos, textos, animaciones, etc.) que contenga el
documento.
1.2 Introduccin a lenguaje HTML: trabajando

con etiquetas
El HTML es un lenguaje diseado para publicar

documentos en la Internet como documentos hipertexto o
hiperenlace. El lenguaje tiene todas las herramientas para definir el
formato de las pginas y permite incluir imgenes as como enlaces
(comnmente conocidas como "ligas") a otros documentos. Los enlaces o
ligas pueden o no ser de texto, ya que tambin pueden ser enlaces a
travs de imgenes o animaciones entre dos ubicaciones fsicamente
alejadas.
Para visualizar un documento en HTML se usan unos programas llamados

exploradores, existen muchos de ellos, entre los ms comunes estn el
Internet Explorer y Netscape Navigator.
Cada uno de ellos tiene caractersticas propias y es por esta razn que
existen reglas generales para estructurar los documentos con el fin de
que todos los exploradores puedan desplegarlos de la forma ms
estandarizada posible.
1.2 Introduccin a lenguaje HTML: trabajando con etiquetas
Las instrucciones del HTML se escriben como etiquetas ("tags" en ingls)

y se identifican porque contienen los caracteres < (menor que) y >
(mayor que). Pueden clasificarse en dos tipos: abiertas y cerradas.
Las etiquetas abiertas se usan en reas grandes del documento o

incluso a todo el documento y este tipo de instrucciones solamente tienen
una palabra clave en el principio de la accin.
Ejemplo:
<hr>
Las etiquetas cerradas son aquellas que se aplican a cierta parte del
documento y se distinguen porque la palabra clave de principio de accin,
es decir < ... > tiene una correspondencia con una palabra clave de fin de
accin a la que se le agrega una diagonal </ ... >
Ejemplo:
<table>
.....Esta es una tabla
</table>
A las etiquetas cerradas tambin se les pueden agregar parmetros, que

son cualidades o propiedades que se aplican de forma especfica a un
objeto o texto.
Ejemplo:
<table width="588" border="0">
.....Esta es una tabla
</table>
CONCLUSIN
Podemos concluir que el HTML es el lenguaje principal para programar
documentos destinados a ser publicados en la WWW. Ahora sabemos que
la estructura de un documento en HTML est basado en instrucciones
llamadas etiquetas.
RECUERDA QUE...
HTML significa "Hypertext Markup

Language"
Fue creado por Tim Berners-Lee a
principios de los noventas.
Un enlace es una liga entre
documentos.
Las instrucciones utilizadas en HTML son
llamadas etiquetas.
El objetivo de esta actividad es que te vayas familiarizando con el

lenguaje HTML a travs de sus etiquetas.
La actividad consiste en elaborar una lista que contenga las etiquetas de

HTML que suelen ser utilizadas en la creacin de pginas de para
Internet.
PASOS:
1. Investigar en la Internet por medio de un
buscador, las etiquetas del HTML.
En la seccin sitios de inters encontrars

algunas sugerencias de buscadores.
Algunas palabras sugeridas para hacer la
bsqueda son: "etiquetas HTML"
2. Sugerimos marcar como "favoritos" las
referencias que localices en la Internet. As podrs
consultarlas nuevamente en temas posteriores.
3. . Debes elaborar un documento en algn
procesador de palabras donde aparezcan las
etiquetas y su significado y/o uso. Este
documento lo debes enviar a tu tutor por medio
de un mensaje antes de la fecha lmite de esta
actividad para que lo califique. Recuerda que esta
actividad vale el 10% de tu calificacin final.
TIP: Mantn a la mano la informacin
recopilada durante esta actividad, ya que
ser una muy prctica gua de consulta para
los prximos temas.
TEMA 2: Estructura de un documento en HTML
OBJETIVO
Al terminar este tema, sers capaz de conocer la estructura bsica de
una pgina web programada con HTML e identificars los elementos
principales que dan formato al documento.
INTRODUCCIN
Una vez aprendidos en el tema anterior los conceptos bsicos que dieron origen
al HTML, entraremos en materia para aprender cmo se escriben las
instrucciones para programar un sitio de Web.
Un sitio web es un conjunto de pginas ligadas entre si. En lo que respecta a

este tema, nos enfocaremos en el estudio de la estructura bsica de una pgina:
cabecera y cuerpo. Es muy importante tener claros estos dos conceptos ya que
en los temas consecutivos aprenders a incluir elementos que le dan forma a la
pgina y forman parte de esas secciones.
Para la creacin de una buena pgina debemos tener en cuenta dos aspectos
importantes: el primero es el conocimiento tcnico para crear el cdigo HTML, y
el segundo aspecto es el buen diseo para la presentacin de la informacin.
Por el momento, profundizars tu conocimiento sobre la parte tcnica de la
creacin de pginas Web
2.1 Cmo escribir en HTML?
Una pgina en HTML es un archivo de texto simple, que puede ser programado
desde en el Notepad de Windows o hasta en un editor de texto avanzado, y
que conitiene una serie de instrucciones identificadas con etiquetas para que el
explorador pueda leer su contenido.
Los archivos de HTML tienen comnmente las extensiones .html o .htm
Es importante que sea cual sea el medio por el cual se programa la pgina, se
mantengan ciertas consideraciones de orden y limpieza del documento.
A continuacin, algunas recomendaciones:
1. Escribir todas las etiquetas en MAYSCULAS.
2. Una etiqueta puede contener atributos o

propiedades que afectan la forma en que se
muestra la informacin. Los atributos se
escriben en minsculas y deben sus valores de
estar enmarcados por doble comillas (" ").
3. Para que una pgina est bien programada, las
etiquetas deben de estar propiamente
acomodadas; se deben de ordenar la primera y
ltima etiqueta en la secuencia correcta.
Esencialmente las etiquetas se colocan de
afuera hacia dentro.
Veamos el ejemplo:
Incorrecto:
<P>Esta es una frase con<B>negritas</P></B>
Correcto:
<P>Esta es una frase con<B>negritas</B></P>
2.2 La estructura bsica de una pgina en HTML es:

index.html
<HTML> Indica el inicio del documento.
<HEAD> Define el inicio de la cabecera.
<TITLE> Inicia el ttulo del documento.
</TITLE> Fin del ttulo del documento.
</HEAD> Define el fin de la cabecera.
<BODY> Inicio del cuerpo del documento.
</BODY> Fin del cuerpo del documento.
</HMTL> Indica el fin del documento.
Ver cdigo completo As se vera la pgina
La primera parte de una pgina HTML es el identificador del lenguaje de

programacin. En esta seccin se le indica a los exploradores (Internet Explorer,
Netscape Navigator, etc.) qu tipo de informacin van a leer.
Para el caso del HTML, el identificador es la etiqueta <HTML></HTML>. stas

deben ser la primera y ltima etiquetas respectivamente, que aparecen en el
documento.
Dentro de estas dos etiquetas identificadoras se distinguen dos secciones

principales:
La cabecera (<HEAD>...</HEAD>)
El cuerpo (<BODY>...</BODY>)
TIPS
La pgina raz del sitio es recomendable que se

guarde con el nombre de index.html o
home.html. Ya que los servidores reconocen estos
nombres de forma automtica para desplegar la
pgina raz del sitio.
2.3 Cabecera del documento (head)
La cabecera est definida por las etiquetas <HEAD>...</HEAD>. Dentro de stas

se definen las caractersticas generales que afectarn a todo el documento.
En ella aparecen por ejemplo: el ttulo de la pgina, la versin del HTML en que
fue escrita, algunos comentarios del autor o incluso puede contener
programacin avanzada en algn otro lenguaje para Internet. Al conjunto de
estos datos se le llama Meta-informacin ("informacin acerca de").
La informacin contenida en la etiqueta de <HEAD>...</HEAD> no se despliega

directamente en el navegador, si no que afecta a las propiedades generales de la
pgina, por esta razn no debe de escribirse ninguna instruccin o comentario
ajeno a las etiquetas estandarizadas propias de esta parte del documento.
De acuerdo al estndar HTML, las etiquetas vlidas a utilizar dentro de la

cabecera son las siguientes:
<BASE> Define la liga de origen de todas las

ligas situadas a lo largo del sitio
completo.
<LINK> Define una referencia a otro
documento.
<META> Describe las caractersticas generales
de la programacin que el autor desee
incluir. Ejemplo: Si deseas incluir el
estndar en que esta programada
aparecer algo como:
<HEAD>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-
8859-1">
</HEAD>
<TITLE> Es el ttulo de la pgina y se despliega
en la parte superior del navegador.
Ejemplo:
<HEAD>
<title>Mi primer pgina de
HTML</title>
</HEAD>
<STYLE> Define caractersticas de formato sobre
los elementos de la pgina. Ejemplo:
El tipo de letra que ser utilizado.
<SCRIPT Ejecutar comandos o programacin
> que complementan el HTML. Ejemplo:
Incluir una lnea de programacin en
Javascript para desplegar una cintilla
de noticias.
Para editar la cabecera de las pginas, sigue

estos pasos:
En la pestaa de HTML
1. Para editar la cabecera

desde el editor, da un clic
en el icono y aparecer
un ventana de dilogo.
2. Por lo general solo se
llena la informacin de los
primeros dos campos:
ttulo de la pgina y el tipo
de escritura. Nota: Siempre define el tipo de
escritura como US/Western European, para que
tus documentos se desplieguen correctamente en
los navegadores..
3. Da un clic OK.
En la pestaa de Design
Se pueden emplear los pasos descritos para la
pestaa de HTML.
TIPS
Dentro de la etiqueta de <HEAD>...</HEAD>

no incluyas informacin que sea destinada a
desplegarse dentro el documento.
2.4 Cuerpo del documento (body)
El cuerpo es la segunda seccin de la estructura del HTML y est definida por las
etiquetas <BODY>...</BODY>.
Dentro de las etiquetas del cuerpo se localiza toda la informacin que ser
desplegada en los exploradores. Por ejemplo, podemos encontrar elementos tales
como: encabezados, textos, tablas, imgenes, animaciones, etctera, que
contienen sus propios atributos y que repasaremos una a una en los siguientes
temas.
A su vez, la etiqueta del cuerpo <BODY>...</BODY>, contienen atributos que

controlan la parte visible del documento. Estos atributos o propiedades son
popularmente usados para agregar color y diseo a la pgina.
Un ejemplo de lo anterior seria:
index.html
<BODY bgcolor="white text="blue" leftmargin="0"
topmargin="0" marginwidth="0"
marginheight="0">
.....Este es el cuerpo de mi pgina
</BODY>
Los atributos comnmente utilizados dentro de la etiqueta <BODY> son los que a
continuacin se listan:
bgcolor Determina el color del fondo de la

pgina.
background Especifica una imagen
determinada para ser usada como
fondo de la pgina.
text Color del texto de la pgina.
link Color de las ligas o enlaces que
contiene la pgina.
vlink Color de las ligas o enlaces
visitadas dentro de la pgina.
alink Color que aparece al darle clic
sobre una liga o enlace.
topmargin Es la distancia en pxeles que
existe entre la orilla superior del
navegador y el contenido.
leftmargin Es la distancia en pxeles que
existe entre la orilla izquierda del
navegador y el contenido.
marginheight Tamao del margen superior e
inferior.
marginwidth Tamao de l margen izquierdo y
derecho.
Para editar la etiqueta de BODY dese el

editor:
1. Posiciona el cursor sobre

la etiqueta de <BODY>.
2. Aparecer en el Panel de
Propiedades, la listas de
ajustes que se pueden
hacer para esa etiqueta.
3. Selecciona o introduce
los valores que consideres
apropiados para tu pgina,
dando un clic en cada campo.
Sigue las indicaciones descritas en la pestaa de
HTML.
Una vez asignados los atributos de la etiqueta <BODY>...</BODY>, se puede

continuar programando el contenido principal del documento, que estudiar
punto por punto en el tema siguiente.
TIPS
Dentro de la etiqueta de <BODY>...</BODY>

se incluye toda la informacin que es destinada a
desplegarse dentro el documento.
CONCLUSIN
Aprendimos a largo de este tema que las secciones principales de un documento
en HTML son HEAD y BODY. El HEAD contiene las caractersticas que darn
formato al documento y el BODY contiene los elementos que son desplegados en
el explorador. Ambas secciones contienen etiquetas y atributos propios que
influyen en la forma en que se mostrar la informacin.
RECUERDA QUE...
La estructura bsica de una pgina en
HTML est compuesta por dos secciones:
cabecera (HEAD) y cuerpo (BODY).
<HEAD> y <BODY> son etiquetas
cerradas: <HEAD>...</HEAD> y
<BODY>...</BODY>
Todas las etiquetas se ordenan de
afuera hacia dentro.
ACTIVIDAD 2: Crea tu primer documento en HTML

(10% calificacin final
El objetivo de esta actividad es que seas capaz de programar tu primer pgina en

HTML, utilizando las etiquetas y atributos estudiados hasta este momento.
La actividad consiste en programar, utilizando el Notepad de Windows como

editor, una pgina de HTML que contenga las caractersticas a continuacin
descritas:
PASOS:
1. Abrir un documento nuevo en Notepad.
El Notepad de Windows podrs encontrarlo en el
men principal: Inicio > Programas > Accesorios.
2. Para empezar el documento incluye las
etiquetas que definen el HTML
(<HTML>..</HTML>)
3. Agrega la etiqueta de la cabecera
(<HEAD>..</HEAD>), incluyendo etiquetas de
Meta-informacin. Por ejemplo el ttulo de la
pgina.
4. Enseguida agrega la etiqueta del cuerpo
(<BODY>..</BODY>) incluyendo al menos 2
atributos de la etiqueta, tales como color de
fondo, color de texto, etc. Para seleccionar los
colores que deseas incluir en tu pgina puedes
consultar este sitio.
5. Entre las etiquetas del <BODY>..</BODY>
escribe una oracin sencilla.
6. Graba el documento creado con el nombre de
index.html
7. Para poder ver si es correcta la programacin,
abre el documento desde un navegador (Internet
Explorer) de la siguiente forma:
Abre una ventana del navegador dando doble clic
sobre el icono correspondiente.
Desde el men de Archivo, ir a la opcin de
ABRIR, la cual desplegar una ventana desde
donde localizars el archivo que creaste,
utilizando el botn de examinar. El documento
sera mostrado en el navegador en base a la
programacin que tu hayas creado.
8. El documento index.html lo debes enviar a tu
tutor por medio de un mensaje antes de la fecha
lmite de esta actividad para que lo califique.
Recuerda que esta actividad vale el 10% de tu
calificacin final.
TEMA 3: Formato bsico del documento
OBJETIVO
Por medio de los conceptos que aprenders durante este
tema, sers capaz de crear una pgina sencilla de HTML,
dando formato a los elementos bsicos que la componen a
travs de un editor de HTML
INTRODUCCIN
Durante el tema anterior aprendiste cul es la estructura bsica de un
documento en HTML y qu es un sitio en la web. Aprendiste conceptos como
etiquetas y atributos, meta-informacin, cabecera y cuerpo del documento, entre
otros.
En este tema entraremos de lleno a la programacin tcnica y diseo de las

pginas. Aprenders a dar formato al texto, a incluir caracteres especiales,
ttulos, a darle formato a prrafos y podrs hacer listas de elementos; pero no te
preocupes, para facilitar tu aprendizaje y la creacin de tu sitio, tambin
aprenders a usar un editor de HTML.
Un editor de HTML es un programa que te facilita la creacin de pginas

ayudndote a colocar las etiquetas disponibles en el cdigo, e incluso, te permite
ver el diseo de la pgina y manejar los archivos de los que dispone el sitio. Para
este curso estaremos aprendiendo a usar el editor Sothink HTML Editor 2.5, que
es un editor de uso libre y gratuito.
Algunas recomendaciones:
Estas notas han sido creadas con mucho detalle para que sean lo ms claras
posibles. An as, habr veces en que no puedas lograr algo o te quedes atorado
sin saber que hacer; en estos casos tenemos dos recomendaciones: s paciente
contigo mismo y repasa las notas con cuidado, probablemente encuentres un
detalle que no tomaste en cuenta la primera vez. En el peor de los casos,
empieza de nuevo para asegurar que tu cdigo es correcto y que al mismo
tiempo te servir de repaso.
Recuerda tener a la mano las notas que hiciste durante la Actividad 1, etiquetas
del HTML.
3.1 Introduccin al Editor
El Editor de HTML Sothink (antes llamado CutePage) es un programa

muy funcional y completo. Ofrece soporte en el uso de etiquetas,
adems de un fcil acceso y administracin del sitio.
Tiene varias cualidades que son muy tiles: consejos para el uso de las
etiquetas, inserta cdigo automticamente, colorea las etiquetas para
identificarlas, enumera las lneas de trabajo, puedes incluir referencias, y la ms
poderosa de sus ventajas es que mientras programas el cdigo, puedes ver los
resultados del mismo sin tener que ir al explorador o navegador para revisarlo.
Este editor incluye un programa complementario, el administrador de sitios y

se instala a la vez con el editor. Es altamente recomendable el uso de
administrador porque facilitar mucho la creacin y administracin del sitio,
como su implementacin en la Internet cuando est finalizado. Ahondaremos
ms en el administrador, en prximos temas.
La pequea desventaja del programa es que est en idioma ingls, pero si

prestas mucha atencin a las notas, podrs aprender sin problema y en caso de
tener dudas, puedes consultar el glosario de trminos.
3.2 Definir un sitio: CMO EMPEZAR?
Las notas que te presentaremos a continuacin son una serie de instrucciones

que te llevarn paso a paso a la creacin de tu pgina y a aprender el uso del
editor. Te recomendamos usar una computadora con Windows 98, con un
explorador o navegador Internet Explorer 5.0 y una pantalla con monitor de 800
x 600, ya que todas las imgenes e instrucciones que se incluyen en el curso
estn preparadas en una computadora con caractersticas como esas.
Crear una pgina para Internet significa realmente, que ests creando un sitio.
Recordemos que un sitio es una serie de pginas ligadas entre s. Por lo tanto, el
primer paso para hacer tu pgina es crear un sitio, para lo cual debers hacer
una carpeta nueva en tu computadora que puedas localizar fcilmente, puesto
que estars guardando mucha informacin en ella.
DEFINE UN SITIO NUEVO

Antes de empezar con la creacin de las pginas web para el sitio, debes crear
una carpeta en tu computadora que ser la carpeta raz del sitio:
A) Debes crear una carpeta nueva en la computadora que se llame "misitio", en

ella guardars todos los archivos referentes al sitio web, es importante que nada
ajeno est en esa carpeta.
B) Dentro de carpeta \misitio crea otra carpeta que se llame \images, en ella
debers colocar todas las imgenes que uses en tu pgina, as podrs localizarlas
rpidamente.
NOTA: Es importante utilizar nombres cortos (mximo 8 letras) y sin espacios ni
caracteres especiales en los nombres de tus carpetas y archivos. Lo anterior con
el fin de asegurarte de que todos los exploradores o navegadores pueden leerlos
sin problema.
C) El siguiente paso es crear el sitio desde el programa Site Manager

(administrador del sitio), que forma parte del editor. Sigue las instrucciones que
encontrars a continuacin.
Para crear un sitio desde el Site Manager:
1. Abre el programa Site Manager.

2. En el Site Manager, elige el men Site, la
opcin New Site, para abrir una ventana de
dilogo.
3. En el campo Site Name, escribe MiSitio para
nombrar al sitio en el que estars trabajando.
4. En el campo de Local Root Folder, escribe la
direccin completa en donde est localizada la
carpeta que creaste. Ejemplo: "C:\Mis
Documentos\misitio"
5. Da un clic en OK.
6. Una ventana aparecer, preguntndote si

deseas crear una carpeta nueva llamada "misitio".
Da un clic en OK.
7. La carpeta "misitio" aparecer en el rea de
Local site.
TIPS
Siempre usa los mismos directorios (carpetas)

que tienes en tu computadora como en el Website,
ya que todos los archivos y enlaces que hagas
dentro de tus archivos sern referencias para ti
como para los visitantes de la pgina.
Lo anterior significa que si la pgina est guardada
en tu computadora en "C:\Mis
Documentos\misitio" y quieres incluir una carpeta
para imgenes "\images", deber de estar tanto en
tu mquina como en tu sitio en el mismo lugar.
3.3 Ajuste de las propiedades de la pgina

Ahora si ya ests listo para empezar a trabajar en el editor. Conozcamos el
entorno del programa:
Abre el editor de HTML y vers que aparece una pestaa debajo de los mens
que dice "Untitled1", ste es un documento nuevo en el que podrs empezar a
programar.
Es recomendable que guardes el archivo bajo el nombre de index.html en el

directorio que creaste anteriormente antes de empezar a trabajar, ya que as
protegers tu trabajo. Y recuerda, guarda tu trabajo continuamente.
Lo primero que te recomendamos hacer es que determines las caractersticas

generales de tu pgina, cmo el color de la letra y los enlaces, el color del fondo,
los mrgenes, etc. y que justamente aprenders en las siguientes secciones.
3.3 Ajuste de las propiedades de la pgina
Ya que has creado tu sitio, empezars a crear las pginas que irn dentro de l.
Primero debers crear un documento en el editor. Abre el editor y obtendrs

automaticamente un documento nuevo al que llamars "index.html", que
guardars dentro de la carpeta de "\misitio" que has creado.
Con ese documento aprenders a ajustar las propiedades generales imagen de
fondo, colores, letras, etc.
Para editar los atributos del documento desde

el editor:
1. Da un clic en la pestaa de Design que se
encuentra en la parte inferior de la ventana del
documento; de esta forma podr editar la pgina y
ver los cambios al mismo tiempo. Si aparece una
ventana de advertencia, da un clic en el espacio
"Don't show this dialog again" y OK para que no lo
vuelvas a ver.
2. Con tu mouse posicionado en la barra de

herramientas, da un clic con el botn derecho y
selecciona Properties Panel, dentro del men
contextual que aparece. Si el Properties Panel
(Panel de Propiedades) ya aparece en la parte
derecha de la venta del documento, omite este
paso. El Panel de Propiedades puede ser arrastrado
y colocado en cualquier punto de la pantalla a tu
conveniencia.
3. Los atributos de la etiqueta del cuerpo <BODY>

aparecern en el Panel de Propiedades. Desde ah
puedes aplicar y configurar las propiedades que se
aplicarn a todo el documento.
Para ajustar las propiedades de la pgina desde el navegador, toma en cuenta las
siguiente notas:
alink Da un clic en el campo de ALINK,

del men que aparece selecciona el
color que aparecer cuando los
enlaces ya han sido visitados.
bgcolor Da un clic en este campo para que
aparezca el men de colores y
puedas seleccionar el color del
fondo que quieras que tenga tu
pgina.
link Selecciona el campo de LINK, para
escoger el color que deseas que
tengan los enlaces en estado
normal.
vlink Da un clic en el campo de VLINK,
para elegir del men, el color que
deseas que aparezca cuando se da
un clic sobre los enlaces.
text Da un clic en el campo de TEXT,
para elegir el color que deseas que
tenga todo el texto del documento.
Recuerda que el color negro est
predeterminado para todo el texto.
3.4 Color y fondo del documento
Una pgina tiene una serie de atributos relacionados con el diseo visual. Por
ejemplo, el fondo (background). En el fondo de la pgina se pueden utilizar
imgenes o colores slidos.
Para establecer una imagen como fondo simplemente se agrega el atributo de

background a la etiqueta de BODY. Veamos el ejemplo:
<BODY background="images/fondoA.gif">...</BODY>
Para establecer un color slido como fondo simplemente se agrega el atributo

de bgcolor a la etiqueta de BODY. Veamos el ejemplo:
<BODY background="#003399">...</BODY>
En el ejemplo anterior, el fondo aparecer de color azul marino debido a que

003399 es el cdigo de color hexadecimal para ese tono.
Para todos los colores que utilizars tanto en el fondo como en los dems
elementos de las pginas existen dos cdigos principales de color. Uno de ellos
son los 16 colores slidos con nombre (aqua, gray, navy, silver, black, green,
olive, real, blue, lime, purple, white, fucsia, maroon, red y yellow) y el otro
cdigo son los colores hexadecimales.
Los colores hexadecimales estn basados en la codificacin numrica entre las
combinaciones del rojo, verde y azul. Para cada uno de estos colores se asigna
un par de dgitos.
Ejemplo: #CC0000 = rojo
Para ver ms ejemplos con guas de colores hexadecimales visita la seccin de
ligas de inters o visita la siguiente pgina:
http://www.december.com/html/spec/color.html
Repasemos lo aprendido con unos ejemplos:
IMAGEN DE FONDO
<HTML>
<HEAD>
<TITLE> Mi primer pgina de HTML</TITLE>
</HEAD>
<BODY background="../images/fondoA.gif">
Este es el cuerpo de mi pgina con una imagen de fondo
</BODY>
</HTML>
COLOR DE FONDO
<HTML>
<HEAD>
<TITLE> Mi primer pgina de HTML</TITLE>
</HEAD>
<BODY bgcolor="#FFFF00">
Este es el cuerpo de mi pgina con un fondo amarillo
</BODY>
</HTML>
3.5 Trabajar con texto
El texto puede insertarse libremente dentro de la etiqueta del cuerpo (BODY),

sin embargo existen algunas opciones para darle formato de manera sencilla y
cmoda. Una de las opciones ms usadas son los prrafos.
Los prrafos dentro del cdigo sirven para designar lneas de texto que
guardan la misma alineacin y propiedades. Para definir un prrafo usamos la
etiqueta <P></P>; la P significa Prrafo o Paragraph en ingls. Esta
etiqueta puede ser abierta, aunque es preferible incluir las etiquetas de
principio y fin de accin para evitar errores al momento de desplegar las
pginas en los diferentes exploradores.
Las propiedades que se pueden controlar a travs de la etiqueta de <P>

</P> son la alineacin, tipo de letra, color y tamao.
Es importante hacer notar que los saltos de lnea dentro de un texto no se

definen dando Enter. En realidad el cdigo del HTML define automticamente
que las lneas continen en el siguiente rengln, a esta propiedad se le llama
en ingls Word wrap. Lo anterior representa una gran ventaja ya que provee
de un ajuste automtico dependiendo del explorador o navegador en el que se
est desplegando la pgina, porque no todos leen de la misma forma el
cdigo.
Para indicar un salto de lnea se utiliza la etiqueta abierta <BR> (Break, que
significa rompimiento en ingls).
Si al usar el salto de lnea pierdes el formato del prrafo, vuelve a indicar una
etiqueta de prrafo <P></P> y copia sus atributos o define unos nuevos
para el siguiente prrafo.
TIPS
Si el texto que utilizars en tu pgina proviene de
algn editor de texto como el Word,
probablemente al copiar y pegar, vers en el
cdigo saltos de lnea. Sin embargo esto no se
desplegar en el navegador. Si realmente deseas
incluir un salto de lnea utiliza la etiqueta de <BR>
3.6 Alineacin
Dentro del cuerpo de tu pgina, define un prrafo con las etiquetas <P>
</P>, dentro de ellas escribe un texto corto. Puedes copiar y pegar el texto
del ejemplo, o escribir uno propio.
Ejemplo:
Mi comunidad est llena de gente alegre y trabajadora. Somos como una
gran familia que trabaja en equipo por el bien de todos. Nos gusta que
nuestros nios crezcan sanos y fuertes, por eso todos nos esforzamos por
dar lo mejor de nosotros mismos. Lo mejor que tenemos es la clidez de
nuestra gente.
Guarda tu documento y ubica en el editor la pestaa de "Preview" para que

veas cmo aparece el texto. El texto aparece alineado a la izquierda? Esto
se debe a que el HTML define por defecto una alineacin izquierda ya que los
navegadores asumen que es as como quieres que aparezca el texto.
Para cambiar la alineacin del texto incluye el atributo align (alinear) a la

etiqueta de iniciar accin del prrafo <P>. El atributo de align acepta tres
diferentes elementos: left (izquierda), center (centrado) o right (derecha).
Veamos cmo se escribe la etiqueta:
<P align="center">Mi comunidad est llena de gente alegre y

trabajadora</P>
Esta es la posicin que determina cada elemento:
Mi comunidad est llena de gente alegre y

left
trabajadora.
center
trabajadora.
right
trabajadora.
Para alinear textos desde el editor, sigue
estos pasos:
1. Selecciona el texto
2. Da un clic en los iconos de alineacin o
selecciona la opcin del men de formato
Format/Left, Format/Right o Format/Center.
Se pueden emplear los

pasos descritos para la
pestaa de HTML o seguir
estos:
1. Selecciona el texto. El atributo de alineacin de
texto ser mostrar en el Panel de Propiedades.
2. Da un clic en el campo de ALIGN y selecciona la
opcin que deseas del men que aparece.
TIPS
Es preciso considerar que el atributo de alineacin
(align) no necesita cerrarse, ya que es parte de la
etiqueta de prrafo que se cierra con </P>. Este
mismo atributo de alineacin puede utilizarse de
muchas formas, incluyendo la alineacin de
imgenes.
3.7 Formato de texto
El texto es el elemento principal de un documento en HTML, y puede ser

formateado o editado por medio de algunas etiquetas bsicas:
NEGRITAS Existen dos etiquetas para

(BOLD) asignar un texto en negritas
<B>...</B>
<STRONG>...</STRONG>
ITLICAS Existen dos etiquetas para
(ITALIC) asignar un texto en negritas
<I>...</I> <EM>...</EM>
TAMAO DE Se indica con el atributo size=*
LA FUENTE dentro de la etiqueta de FONT.
(FONT SIZE) Veamos un ejemplo: <FONT
size=2>...</FONT>
COLOR DE Se indica con el atributo
LA FUENTE color="#******" dentro de la
(FONT COLOR)
etiqueta font. Ejemplo: <FONT
color="#CO0000">...</FONT>
SALTO DE
Se indica utilizando la etiqueta
LNEA (LINE
BREAK) abierta de <BR>
COMENTARI Para escribir un comentario en el

OS cdigo sin que aparezca
(COMMENTS)
desplegado en el navegador
indcalo con .
Ejemplo: 
TIP: Desde el editor puedes dar formato al
texto desde los botones que aparecen en las
descripciones.
En cuanto al color del texto, los navegadores asignan por defecto el color
negro para el texto, azul para los enlaces y morado para los enlaces
visitados. Gracias a los atributos de la etiqueta BODY es posible asignar
colores distintos a los predeterminados.
Repasemos lo aprendido con este ejemplo:
FORMATO DE TEXTO index.html

<BODY bgcolor="#FFFFFF" text="#333333"
link="#FF6600" vlink="#FF9900"
alink="#FF6600">
<!-Inicio de los ejemplos-->
<B>Este es un texto en negritas</B><BR>
<STRONG>Este es un texto en
grueso</STRONG><BR>
<I>Este es un texto en itlicas</I><BR>
<EM>Este tambin es un texto en
itlicas</EM><BR>
<B><I>Este es un texto en negritas e
itlicas</I></B><BR>
<FONT SIZE="4">Este es un texto en tamao
4</FONT><BR>
<FONT COLOR="#339900">Este es un texto
verde</FONT>
<!-Fin de los ejemplos-->
</BODY>
Ver cdigo completo As se vera la pagina
Cmo podrs notar, utilizamos en varios casos la etiqueta de <FONT>

</FONT> para definir aspectos relacionadas con el formato del texto. Se
pueden definir el tipo de letra, el tamao y color de la letra. Las propiedades
relacionadas con el texto pueden utilizarse de forma independiente o
conjunto dentro de la misma etiqueta de <FONT>.
3.8 Ttulos (Encabezados)
Puedes definir ttulos y subttulos dentro de tu documento con una etiqueta

muy sencilla: <H*></H*> (La H es por Headline, "Encabezado" en ingls).
<H1> define el tamao ms grande para los ttulos, <H6> el ms pequeo.
La forma de usar las etiquetas de ttulo es:
TTULOS index.html
<BODY bgcolor="#FFFFCC">
<FONT FACE="Arial" COLOR="#336699">
<H2>Mi comunidad est llena de gente alegre y
trabajadora.</H2><BR>
<P ALIGN="left">Somos como una gran familia que
trabaja en equipo por el bien de todos. Nos gusta
que nuestros nios crezcan sanos y fuertes por eso
todos nos esforzamos por dar lo mejor de nosotros
mismos. Lo mejor que tenemos es la clidez de
nuestra gente.</P>
</FONT>
</BODY>
FALTAN INSTRUCCIONES BOTN H
1. Posiciona el cursor en el ttulo.
2. Da un clic en el icono que se encuentra en la
barra de herramientas, o seleccionar del men
Format/Font para abrir una ventana de dilogo.
3. Selecciona el valor del ttulo (de H1 a H6)
4. Da un clic en OK para cerrar la ventana de
dilogo y ver los cambios en tu documento.
3.9 Listas de elementos
Existen dos tipos de listas de elementos: listas ordenadas ("numbered

lists" o listas numeradas) y listas no ordenadas ("bulleted lists" o listas
con vietas).
Las listas ordenadas se definen a travs de la etiqueta <OL></OL> y las

listas no ordenadas se definen con <UL></UL>. Cada elemento dentro
de una lista tiene que estar identificado con la etiqueta <LI></LI> ("list
item" o elemento de la lista). Veamos un ejemplo:
TTULOS index.html
<H4>Esta es una lista ordenada</H4>

<!-Esta es una lista ordenada-->
<OL>
<LI>Lunes</LI>
<LI>Martes</LI>
<LI>Mircoles</LI>
</OL>
<BR>
<H4>Esta es una lista no ordenada</H4>
<!-Esta es una lista no ordenada-->
<UL>
<LI>Lunes</LI>
<LI>Martes</LI>
<LI>Mircoles</LI>
</UL>
Para establecer una lista desde el editor sigue

estos pasos:
1. Oprime el botn para

asignar listados
2. Aparecer un ventana
de dilogo en donde
encontrars 3 espacios
principales en los cuales
determinars el tipo de
vieta o nmero y la
cantidad de elementos.
3. En el ventana de dilogo que aparece,
selecciona los valores que deseas y da un clic en
OK.
Simplemente sigue los pasos descritos en la
pestaa de HTML.
3.10 Caracteres especiales
Dentro del lenguaje HTML, existe una clasificacin particular para letras o
smbolos que deben de ser codificadas de manera especial. Entre estas letras
estn las letras acentuadas, letras con parntesis, ees, smbolos como el
copyright, etc.
Estos caracteres son de dos tipos: un tipo de caracteres que tienen un

significado especial dentro del cdigo del HTML, como el smbolo de mayor
que ">"; y el otro tipo de caracteres, incluye a los que no pueden ser
escritos directamente desde el teclado, como el smbolo de los derechos
reservados .
Es importante hacer notar que los exploradores (navegadores) y los editores

de HTML son generalmente en ingls, por lo que no pueden leer
directamente los caracteres propios de nuestro idioma (acentos, ees y
diresis), lo que los convierte en caracteres especiales.
A continuacin podrs ver una lista de los cdigos que deben de escribirse,
para ver desplegados en el navegador los caracteres especiales ms
comunes:
Caracter Caracter
Etiqueta Etiqueta
Especial Especial
á ä
Á Ä
é ë
É ë
í ï
Í Ï
ó ö
Ó Ö
ú ü
Ú Ü
ñ ÷
Ñ ø
< <
> >
© €
® ¡

«
»
Para usar los caracteres especiales se sustituye la letra o smbolo con la

etiqueta. Veamos un ejemplo:
El cdigo se
Maía
escribe:
Se despliega: Mara
Existen tambin unos caracteres que hacen funciones de "espaciado" dentro

del cdigo, el ms comn es espacio sin salto de lnea (non-breaking
space en ingls) que se utiliza, por ejemplo, cuando existen celdas vacas en
las tablas. Su etiqueta se inserta al igual que las de caracteres especiales y
en este caso es: &nbsp
En el editor de HTML que estamos usando se
facilita el uso de caracteres especiales
siguiendo estos pasos:
1. Inserta el cdigo directamente, escribiendo la
clave para el caracter que desees desplegar.
2. Como otra posibilidad, sigue los pasos descritos
para la pestaa de Design.
1. Posiciona el cursor en
donde quiere insertar el
caracter especial.
2. Da un clic en el icono de
caracter que est en la
barra de herramientas, o
seleccione el men
Insert/Special Characters
para que se despliegue una ventana.
3. Selecciona el caracter especial dando doble clic
sobre ste. La etiqueta aparecer en el campo
Tags to Insert into HTML.
4. Da un clic en OK y la etiqueta correspondiente
se agregar al cdigo.
CONCLUSIN
Felicidades, acabas de terminar una seccin muy importante del curso!
Hasta el momento te has familiarizado con los elementos bsicos que dan
formato a una pgina de HTML y con ellos ests listo para armar tu primer
documento para la Internet.
Has aprendido a definir un sitio, a ajustar las propiedades de las pginas, a
usar colores de fondo y a formatear un texto. Puedes incluir encabezados y
listas e incluso caracteres especiales.
Adems has estado experimentado el uso de un editor de HTML, que es una
aplicacin de ayuda para la programacin y resulta mucho ms amigable.
Aunque debes de considerar que saber utilizar el cdigo directamente te
permitir construir mejores pginas con cdigos limpios.
RECUERDA QUE...
No debes de mezclar demasiados

colores dentro de una pgina, tantos que
se vuelvan agresivos a la vista. Una
buena pgina debe ser siempre legible.
Cuando creamos un sitio nuevo o una
pgina en HTML, hay que tener en mente
que no todas las computadoras tienen
los mismos tipos de letras o fuentes,
por lo tanto se deben utilizar las fuentes
ms comunes o al menos aquellas que
estn instaladas por defecto en la
mayora de las computadoras. He aqu las
fuentes principales: Arial, Arial Black,
Arial Narrow, ArialRounded MT Bold, MS
Sans Serif, MS Sans Serif, Times New
Roman, Verdana.
Empezaremos a crear tu sitio personal. Primero que nada debers de

seleccionar un tema para que te sirva de inspiracin en la seleccin de los
elementos que incluirs.
PASOS:
1. Abre el editor Sothink HTML, espera unos
segundos a que se active el botn de Continue.
Pasado el tiempo requerido, oprime el botn y el
programa se abrir.
2. Como primer punto debers de crear la pgina
principal de tu sitio, comnmente conocida como
Portada o Home.
3. Dale un nombre a tu pgina en el HEAD, en la
etiqueta de Title, recuerda que ese ttulo
aparecer en el navegador al visualizar tu
documento.
4. Selecciona el color o imagen de fondo que
usars, colocando tu cursor en la etiqueta de
BODY y modificando las propiedades en el Panel
de Propiedades.
5. Determina el color del texto en la etiqueta de
BODY.
6. Coloca un ttulo en tu pgina, usando las
opciones de Heading. Recuerda que debers de
mantener el diseo de tu sitio, as que haz varias
pruebas hasta que quedes convencido de la mejor
opcin.
7. Redacta un pequeo texto que vaya de acuerdo
al tema de tu sitio. Deber ser un prrafo no
menor 8 lneas. El texto debe de llevar formato:
tamao, color y estilo (negrita, itlica) para
resaltar algunas palabras; y deber estar alineado
a tu gusto.
8. Por ltimo, incluye una lista de elementos
dentro de tu texto.
9. El documento creado en el editor Sothink HTML
lo debes enviar a tu tutor por medio de un
mensaje antes de la fecha lmite de esta actividad
para que lo califique. Recuerda que esta actividad
vale el 10% de tu calificacin final.
TEMA 4: Formato avanzado del documento
OBJETIVO
En este tema, aprenders a darle una mejor
apariencia a tu pgina con la ayuda de
elementos de organizacin, principalmente las
tablas y separadores; elementos visuales,
como las imgenes; y elementos de enlace,
como las hiperligas.
Al finalizar, podrs programar una pgina
completa de html en base a los conocimientos tcnicos y diseo que has
aprendido a lo largo del curso.
INTRODUCCIN
Hasta el momento has aprendido cmo editar las propiedades de los documentos
y los elementos principales que los componen, como color y textos.
Lograr un sitio interesante para los usuarios, no slo depende de una buena
programacin tcnica, es tambin importante saber organizar la informacin para
que sta sea clara y atractiva. El diseo visual o grfico tambin forma parte de
la programacin de la pgina para lo cual debemos aprender ciertos conceptos
bsicos de la estructura de la informacin.
La seccin superior de una pgina es la primera que un usuario ve, por lo que
resulta recomendable incluir el logo o el ttulo de la pgina, e incluso en algunas
ocasiones el men.
La seccin del lado izquierdo es importante porque en nuestro idioma, leemos de

izquierda a derecha, por lo que los usuarios vern inevitablemente esa parte. Es
recomendable ubicar los elementos fijos de un sitio dentro de esta rea, por
ejemplo el men.
En la seccin central, que suele ser la ms amplia de las pginas, se incluye el

contenido del sitio. Dentro de esa rea puedes organizar la informacin de la
forma que creas ms conveniente.
Toma como ejemplo prctico, el diseo de la pgina del curso que ests viendo
en este momento. Identificas todas las secciones?
Con este tema damos por terminado el aprendizaje de conceptos bsicos para la
creacin de tu sitio Web. Al finalizar este tema, estars listo para crear tu
proyecto final.
4.1 Hiperligas
Una Hiperliga es un enlace entre documentos (pginas) o

sitios; puede ser una liga en textos (hipertexto) o una liga en
imgenes o animaciones (hipergrfico).
Precisamente el HTML est nombrado a partir de esta caracterstica: Hyper Text
Markup Language - Lenguaje de Marcas de HiperTexto.
Hay distintas formas de llamar a una hiperliga: ligas, enlaces, vnculos o links en
ingls.
Y qu es una liga? Una liga es activar un enlace entre dos puntos, el cul se
navega por medio de un clic del cursor del ratn sobre la palabra subrayada o
imagen sensible. El efecto es ir a un punto determinado del mismo documento,
cambiar de pgina o activar algn elemento como video o sonido. Los enlaces,
vnculos o ligas, son la parte ms importante de la esencia del HTML.
La etiqueta general para definir las ligas es: <A>...</A>

Cuando se trata de ligas hacia alguna pgina se usa el parmetro href
(referencia a):
<A href="URL o direccin o ruta de acceso al documento">...</A>
El elemento que se localice entre esas dos etiquetas ser sensible, es decir que al
tocar sobre ese elemento y dar un clic con el ratn, se crear un hiperenlace
entre ste y la direccin hacia a donde se apunta.
Ejemplo:
<A href="http://www.google.com.mx">Da clic aqu para hacer una
bsqueda en la pgina de Google</A>
Este ejemplo se vera as:

Da clic aqu para hacer una bsqueda en la pgina de Google
Si damos clic sobre la frase, el navegador nos llevar a la pgina web indicada en
el parmetro href, el cul indica la ruta o referencia hacia el punto a enlazar
4.1 Tipos de Hiperligas
Existen diferentes tipos hiperligas:
Vnculo externo
Todos los sitios en la Internet tiene una direccin o URL (Universal Ressource
Locator o en espaol, Localizador Universal de Recursos).
Los vnculos externos son enlaces entre sitios distintos y se indican colocando el
URL de la pgina a dnde queremos enviar al usuario.
Los URL, generalmente son expresados de esta manera:
href="http://www.google.com.mx
Vnculo local
Un sitio es bsicamente un conjunto de pginas ligadas entre si. Sin embargo
los sitios tambin contienen otros archivos, sonidos, imgenes, etc.
Los enlaces hechos entre estos elementos y pginas, se les conoce como locales,
por ubicarse dentro de la misma agrupacin.
Los vnculos locales se indican sealando directamente al archivo dentro de la
organizacin del sitio.
href=archivo.html
Para agregar ligas a un texto:
Como paso previo, crea

dos documentos en html,
te sugerimos que los
llames "uno.html"
y"dos.html". Dentro del
documento uno, escribe
"Ir a pgina dos". Dentro del documento dos,
escribe "Regresar a pgina uno"
1. Selecciona el texto "Ir a pgina dos" o cualquier

otro que desees agregar como liga.
2. Da clic en el icono de ligas (Link) que se
encuentra en la barra de herramientas, para abrir
la caja de dilogo.
3. Escribe "dos.html" en el campo de URL y da clic
en OK.
** Si deseas agregar otras ligas de texto en tu
pgina, repite los pasos 1 a 4. Puedes completar
tu prctica colocando la liga para regresar el
documento uno desde la pgina dos.
4. Da un clic en la pestaa Preview que se
documento, para saber cmo se ver la pgina en
el navegador.
5. Da clic a los textos que pusiste como liga para
que veas que te dirigirn a la pgina que los
enlazaste.
6. Si no colocaste una liga para regresar, puedes ir
la pgina anterior dando un clic con el botn de
regresar o back del navegador o utilizando el botn
derecho del mouse para seleccionar la opcin back
del men que se muestra.
HTML.
Aprendamos a distinguir los tipos de vnculos practicando con el siguiente

ejemplo:
VNCULOS uno.html y dos.html
<!-Este es el ejemplo de Vnculo local-->

<A href="dos.html">
<B>Ir a página dos ></B>
</A>
<!-Aqui podemos ver un Vnculo externo-->
<A href="http://www.cca.org.mx/"
target="_blank">
Visitemos el Portal de los CCA<br>
a través de este vínculo externo
</A>
CDIGO COMPLETO
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000">
<DIV align="center">
<H4><FONT face="Arial, Helvetica, sans-serif">ESTA ES LA
PÁGINA UNO</FONT>
<!-Este es el ejemplo de Vnculo local-->
</H4>
<P><FONT size="2" face="Arial, Helvetica, sans-serif">Un
vínculo local es:<BR>
<A href="dos.html">
<B>Ir a página dos ></B>
</A></FONT><BR>
<BR>
<BR>
<!-Aqui podemos ver un Vnculo externo-->
<FONT size="2" face="Arial, Helvetica, sans-serif">Un
vínculo externo es:<BR>
<A href="http://www.cca.org.mx/puente/homedoc.htm"
target="_blank">Vamos a la página de<BR>
Puentes a Futuro
</A></FONT></P>
</DIV>
</BODY>
</HTML>
4.1 Tipos de Hiperligas
Anclas o Marcadores
Hemos visto los vnculos o ligas hacia otros documentos, de forma local o
externa, sin embargo tambin existen ligas que apuntan hacia lugares precisos
dentro del mismo documento que los contiene u otro. A esto se le conoce
comnmente como anclas (anchor), marcadores o apuntadores.
Las anclas se utilizan comnmente cuando deseas hacer referencias rpidas

hacia tu misma pgina y siempre constan de dos partes: el punto de anclaje o
ancla y la liga que busca a esa ancla.
Por ejemplo, cuando tienes un texto muy largo y deseas volver al inicio sin
tener que utilizar los botones de desplazamiento, puedes colocar un ancla en la
parte superior de la pgina, y una liga en la parte final del documento que
apunte al ancla.
Cabe mencionar que las anclas son elementos invisibles dentro de la forma
visual del documento, ya que permanecen ocultas a simple vista pero estn
presentes dentro del cdigo.
Primero que nada para definir un vnculo de tipo ancla, debes establecer el
punto de anclaje, es decir, el lugar a donde va a llegar la liga. Generalmente el
ancla se coloca cerca del lugar a dnde quieres que se dirija la liga.
La etiqueta que se utiliza en estos casos es: <A name="**"></A>, donde **
es el nombre de el ancla. Recuerda que el ancla es invisible en el documento,
slo podrs verlo dentro del cdigo.
Ejemplo:
<A name="marcador01"></A>
Como segundo paso, debers crear una liga o enlace que apunte hacia el ancla,
lo cual puedes hacer siguiendo los pasos de "Agregar ligas a un texto o una
imagen" descritos anteriormente.
El formato del parmetro href, aparecer de la siguiente manera:
<A href="#marcador01">...</A>
Repasemos la forma para crear un ancla, con este ejemplo:
ANCLAS anclas.html
link="#CC3300" vlink="#FF6600"
alink="#CC3300">

<A name="arriba"></A>
.... Texto y contenido de la pgina... Antes de
finalizar aparece:
<!-Esta es la liga que va al punto de anclaje-->
<A href="#arriba">Regresar al título</A>
</BODY>
TIPS
Evita separar tus documentos html en distintas

carpetas o flders, porque puedes crear errores al
ligar las pginas entre s. Opta por colocar todas
las pginas dentro del mismo directorio.
Si vas a usar la liga para hacer referencia a un
archivo local, es necesario que selecciones "other"
en el tipo de la liga. Si vas a hacer una referencia
a un vnculo externo, es decir, hacia otro sitio
dentro de la Internet entonces tendrs que
seleccionar la opcin "http://" en el tipo de liga.
4.2 Imgenes
Para entender el proceso de insertar imgenes dentro del cdigo de HTML,

primero debemos de hablar de los formatos de imagen.
Formatos de imagen
Los formatos de imagen que se usan regularmente en los documentos en
HTML, son el GIF, JPEG Y BITMAP. Al seleccionar el formato, hay que considerar
particularmente el peso (kilobytes) y la calidad de una imagen (cantidad de
colores).
GIF, es el formato ms usado para la Internet por dos Observa los
razones esenciales: su peso es relativamente el menor de ejemplos:
todos los formatos y permite usar cualidades que ningn
otro formato ofrece como reas "transparentes" e incluso GIF
movimiento.
El GIF contiene imgenes con colores planos (como logos,
ttulos, fondos, etc.) y est basado en un cdigo que solo
puede leer 256 colores. En otros temas de este curso te
has familiarizado con la aplicacin de color para la
Internet y has visto ejemplos de los colores
estandarizados; precisamente son esos colores los que GIF CON ZONAS
encapsula este formato. TRANSPARENTES
JPEG, es el formato de imagen idneo para las
fotografas, imgenes con sombras o mucho detalle,
porque en l se encapsulan millones de colores lo que
provee de gran calidad. Los jpeg a diferencia de los gif,
NO pueden tener zonas transparentes ni movimiento,
suelen ser imgenes ms pesadas que los gif por la GIF ANIMADO
cantidad de colores y por lo mismo hay que tener
precaucin en su uso.
Observa el siguiente ejemplo y compralo con las
imgenes de tipo gif, notas la diferencia en la calidad de
la imagen?
BITMAP, se usa en presentaciones electrnicas donde es JPEG
muy importante el grado de detalle de la imagen y la
calidad, sin embargo el peso (cantidad de bytes) es
demasiado grande. Suele pasar que este formato sea
incorrectamente empleado por usuarios que desconocen
como utilizar su escner y guardar una imagen, o
simplemente las diferencias entre los formatos de
imagen. Esta es una razn por la que debe utilizar
imgenes gif y/o jpeg en los documentos HTML.
4.2 Imgenes
Despus de esta explicacin seguramente te estars preguntando de dnde

sacar imgenes para tu sitio o cmo hacerlas?, bueno existen muchsimos
programas para editar imgenes (como el Corel Paint, Paint shop Pro,
Coffeecup, etc.) y muchos otros sitios ms en la Internet, para obtener
imgenes gratuitamente.
En este caso y como te ests iniciando en el mundo del Internet, te
recomendamos optar por el uso de imgenes de archivo o de coleccin
(conocidos como clipart en ingls). Usando algn buscador podrs localizar
cientos de pginas con archivos de este tipo. La seccin de Sitios de Inters de
este curso cuenta con algunas recomendaciones sobre colecciones de clipart
dentro del Internet.
Otras opciones pueden ser las cmaras digitales o los escners, si dispones
con alguno de estos recursos, podrs generar tus propias imgenes, slo ten
precaucin de mantener las imgenes con bajo peso (menos de 6kb u 8kb para
gifs y menos de 20 kb para los jpeg, es lo ideal).
Para insertar imgenes dentro del cdigo,

debes de:
1. Coloca el cursor en la
posicin donde quieres que
aparezca la imagen.
imagen que se
encuentra en la barra de
herramientas.
3. Se desplegar una caja de dilogo en la cul
aparece un espacio para localizar la ruta de la
imagen oprimiendo el botn Browse. (falta imagen
del editor)
4. Selecciona la imagen y configura su ancho
(width), altura (heigth), alineacin (align).
5. Da clic en OK.
6. La imagen ser insertada en el cdigo y a travs
del Panel de Propiedades, podrs ajustar sus
atributos.
HTML.
Veamos cmo quedara el cdigo cuando insertamos una imagen:
IMGENES imagen.html
link="#9933FF" vlink="#CC99FF"
alink="#9933FF">
<h3 align="center">
<font face="Arial, Helvetica, sans-serif">Esta es la
tiendita de mi comunidad</font><br>
</h3>
<img src="../images/clipart/ft_tiendita.jpg"
width="300" height="225" border="4"
align="right" hspace="5">
....
</BODY>
CDIGO COMPLETO
<HTML>
<HEAD>
<TITLE>Las imágenes en el HTML</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#993300" link="#9933FF" vlink="#CC99FF"
alink="#9933FF">
<h3 align="center">
<font face="Arial, Helvetica, sans-serif">Esta es la tiendita de mi
comunidad</font><br>
</h3>
<img src="../images/clipart/ft_tiendita.jpg" width="300" height="225" border="4"
<font face="Arial, Helvetica, sans-serif" size="2"> <i>Oaxaca México,
CCA
2003</i><br>
<br>
Mi comunidad está llena de gente alegre y trabajadora. Somos como una
gran familia que trabaja en equipo por el bien de todos. Nos gusta que nuestros
niños crezcan sanos y fuertes, por eso todos nos esforzamos por dar lo
mejor de nosotros mismos. Lo mejor que tenemos es la cálidez de nuestra
gente.</font>
</BODY>
</HTML>
4.2 Imgenes
Despus de esta explicacin seguramente te estars preguntando de dnde sacar

imgenes para tu sitio o cmo hacerlas?, bueno existen muchsimos programas
para editar imgenes (como el Corel Paint, Paint shop Pro, Coffeecup, etc.) y
muchos otros sitios ms en la Internet, para obtener imgenes gratuitamente.
En este caso y como te ests iniciando en el mundo del Internet, te
recomendamos optar por el uso de imgenes de archivo o de coleccin
(conocidos como clipart en ingls). Usando algn buscador podrs localizar
cientos de pginas con archivos de este tipo. La seccin de Sitios de Inters de
este curso cuenta con algunas recomendaciones sobre colecciones de clipart
dentro del Internet.
Otras opciones pueden ser las cmaras digitales o los escners, si dispones con
alguno de estos recursos, podrs generar tus propias imgenes, slo ten
precaucin de mantener las imgenes con bajo peso (menos de 6kb u 8kb para
gifs y menos de 20 kb para los jpeg, es lo ideal).
Para insertar imgenes dentro del cdigo,

debes de:
1. Coloca el cursor en la
posicin donde quieres que
aparezca la imagen.
imagen que se
encuentra en la barra de
herramientas.
3. Se desplegar una caja de dilogo en la cul
aparece un espacio para localizar la ruta de la
imagen oprimiendo el botn Browse. (falta imagen
del editor)
4. Selecciona la imagen y configura su ancho
(width), altura (heigth), alineacin (align).
5. Da clic en OK.
6. La imagen ser insertada en el cdigo y a travs
del Panel de Propiedades, podrs ajustar sus
atributos.
HTML.
Veamos cmo quedara el cdigo cuando insertamos una imagen:
IMGENES imagen.html
link="#9933FF" vlink="#CC99FF"
alink="#9933FF">
<h3 align="center">
<font face="Arial, Helvetica, sans-serif">Esta es la
tiendita de mi comunidad</font><br>
</h3>
<img src="../images/clipart/ft_tiendita.jpg"
width="300" height="225" border="4"
....
</BODY>
Cdigo completo
<HTML>
<HEAD>
<TITLE>Las imágenes en el HTML</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#993300" link="#9933FF" vlink="#CC99FF"
alink="#9933FF">
<h3 align="center">
<font face="Arial, Helvetica, sans-serif">Esta es la tiendita de mi
comunidad</font><br>
</h3>
<img src="../images/clipart/ft_tiendita.jpg" width="300" height="225" border="4"
<font face="Arial, Helvetica, sans-serif" size="2"> <i>Oaxaca México,
CCA
2003</i><br>
<br>
Mi comunidad está llena de gente alegre y trabajadora. Somos como una
gran familia que trabaja en equipo por el bien de todos. Nos gusta que nuestros
niños crezcan sanos y fuertes, por eso todos nos esforzamos por dar lo
mejor de nosotros mismos. Lo mejor que tenemos es la cálidez de nuestra
gente.</font>
</BODY>
</HTML>
TIPS
Visita la pgina cmo usar una coleccin de
clipart, para que tengas una idea de dnde y cmo
empezar.
El promedio mximo de una imagen es de unos
6kb u 8kb para gifs y de menos de 30 kb para los
jpeg, estos pesos evitarn que tarde su descarga.
4.2 Imgenes
Las etiquetas para las imgenes
Las imgenes son elementos externos a los documentos de html; al escribir el

cdigo se hace referencia a la ubicacin de esos archivos, el navegador busca la
imagen en la direccin indicada.
Para insertar la referencia de una imagen dentro del cdigo, debe de usarse la
etiqueta: <IMG src="nombre y direccin de la imagen"> Como podrs notar, la
etiqueta de imagen es abierta porque solamente tiene una palabra clave en el
principio de la accin.
Los atributos que acompaan la etiqueta de imagen son:
alt="***" Texto alternativo de la

imagen para navegadores
que no tienen la Opcin de
Imagen Activada y/o tambin
para que el visitante lea
mientras se descarga la
pgina.
width="*" Indica la anchura de la
imagen en pxeles.
height="*" Indica el alto de la imagen,
tambin en pxeles.
border="*" Indica el grosor del borde en
pxeles. Especialmente
cuando la imagen incluye un
hiperenlace.
align="top" Alinear arriba, muy tiles
cuando interactan imgenes
con texto o tablas, los
atributos de alineacin nos
permiten jugar con el
acomodo de los elementos de
nuestra pgina.
align="middle" Alinear en medio.
align="absmiddle Alinear perfectamente en

" medio.
align="bottom" Alinear abajo.
align="left" Alinear hacia la izquierda.

align="right" Alinear hacia la derecha.
Veamos como se comporta el atributo de alineacin de imagen con respecto al

texto:
Esta Esta
imagen
tiene una
alineacin hacia imagen
Esta imagen tiene una
la izquierda
tiene una alineacin alineacin
(left)
hacia enmedio hacia la
(middle) derecha
(right)
Esta
Esta Esta imagen imagen
imagen tiene tiene una alineacin tiene una
una alineacin absoluta hacia alineacin
hacia arriba enmedio hacia
(top) (absmiddle) abajo
(bottom)
TIPS
Usa siempre las propiedades o atributos de

imagen de altura y anchura (width an height).
Estas dos opciones puedes encontrarlas en el
Panel de Propiedades; sirven para cambiar el
tamao de una imagen, aunque su propsito real
es indicar al navegador qu tanto espacio necesita
reservar para desplegarla. Lo que hace el
navegador es iniciar con la descarga del texto y
posteriormente la descarga de imgenes, as el
visitante tendr algo que leer mientras espera a
que todo aparezca en su lugar.
4.2 Imgenes
Recordemos que una imagen tambin puede llevar un hipervnculo o liga, mira
este ejemplo:
Para agregar una liga en las imgenes debers usar la etiqueta:

<A href="nombrearchivo.htm"><IMG src="nombreimagen.gif/jpeg"></A>
Para definir una imgen como liga, debes de:
1. Selecciona la imagen
que desees crear como
liga, dando un clic sobre
ella.
2. Da un clic en el icono
de ligas que se
encuentra en la barra de herramientas, con sto
abrirs una ventana de dilogo.
3. En el campo de Description aparecer la
etiqueta de tu imagen.
4. En el campo de URL escribe o selecciona la
direccin hacia donde apuntars el enlace de la
imagen al dar clic sobre sta.
5. Da un clic en OK.
6. Cuando una imagen se convierte en una liga, el
navegador automticamente convierte el cursos en
una manita al pasar sobre la imagen y crea un
borde alrededor de la imagen. Para eliminar ese
borde debes seleccionar la imagen, ir al Panel de
Propiedades y escribir un "0" (cero) en el campo
de Border.
7. Da un clic en la pestaa Preview que se
documento, para saber cmo se ver la pgina en
el navegador.
8. Da un clic a la imagen para acceder a la liga.
HTML.
Repasemos cmo insertar imgenes o grficos con el siguiente ejemplo:
IMGENES CON LIGAS imgliga.html

link="#FF6600" vlink="#FF9900" alink="#FF6600">
<!-Inicio del ejemplo-->
<A
href="http://www.cca.org.mx/mexico/oferta/homedoc.htm"
target="_blank"><IMG
src="../images/clipart/img_ejimglink.jpg" width="265"
height="101" border="1"></A>
<!-Fin del ejemplo-->
</BODY>
Cdigo completo
<HTML>
<HEAD>
<TITLE>Las imágenes con ligas</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#003399" link="#999900"
vlink="#CCCC00" alink="#999900">
<!-Inicio del ejemplo-->
<h3> <FONT face="Arial, Helvetica, sans-serif">Cursos por
Internet</FONT><br>
</h3>
<font face="Arial, Helvetica, sans-serif" size="2"> Los Centros
Comunitarios de
Aprendizaje son espacios educativos diseñados para que todos
los miembros
de la comunidad puedan encontrar información pertinente
para su desarrollo,
esto es, niños y niñas, jóvenes y adultos. No
existe restricción
alguna de género, edad y/u ocupación.<BR>
<BR>
<A href="http://www.cca.org.mx/mexico/oferta/homedoc.htm"
target="_blank"><IMG src="../images/clipart/img_ejimglink.jpg" width="265"
height="101" border="1"></A>
<BR>
<BR>
</font>
<!-Fin del ejemplo-->
</BODY>
</HTML>
4.3 Separadores
Los separadores o lneas horizontales, son un elemento de organizacin y ayudan

a que el texto y grficos aparezcan mejor ordenados. No toda la gente usa esta
opcin ya que prefieren organizar sus contenidos con tablas por ejemplo, pero
siempre es til saber de su existencia.
Para definir un separador, debers usar la etiqueta abierta <HR> (Horizontal
Rule)
El elemento que aparecer tiene una configuracin predeterminada de grosor (2
pxeles), alineacin centrada y anchura del 100% de la ventana; sin embargo
puede ser configurado a tu gusto o necesidad.
Para ajustar los separadores utiliza los siguientes atributos:
size="*" Determina el grosor del

separador, se define en pxeles.
width="*" Define la anchura del separador,
se puede definir numricamente
en pxeles o en porcentaje.
align="left" Alinear hacia la izquierda.
align="right" Alinear hacia la derecha.
align="center
Alinear hacia al centro.
"
Veamos un ejemplo del uso de separadores:
IMGENES CON LIGAS imgliga.html

<BODY bgcolor="#FFFFFF" text="#000000">
<HR width="350" size="5" align="center">
</BODY>
Define un separador siguiendo estos pasos:
1. Coloca el cursor donde

quieres que aparezca el
separadror.
2. Selecciona y se
desplegar la caja de
dilogo donde configurars
el separador.
3. Configura el ancho (width), la altura (height) y
el estilo (style).
4. Da clic en OK y aparecer el separador en tu
pgina.
HTML.
4.4 Trabajar con Tablas
Las tablas son elementos de organizacin y sirven para estructurar el

documento, situar otros elementos y mejorar el diseo.
Estn conformadas por filas (horizontales) y columnas (verticales) cuya unidad
bsica es la celda, de la cual hablaremos ampliamente en el siguiente tema.
Crear tablas puede parecer muy difcil en un comienzo, pero es cuestin de

reflexionar previamente lo que necesitamos para luego construir el elemento.
Las etiquetas bsicas para construir una tabla son:
<TABLE> Con esta etiqueta se define una

</TABLE> tabla, definiendo dnde inicia y
termina.
<TR></TR> Con estas etiquetas definimos
las filas.
<TD></TD> Y finalmente con esta etiqueta
definimos las celdas.
Repasemos tericamente los pasos para construir una tabla:
a) Primero que nada, necesitamos definir la tabla, para ello usaremos las
etiquetas <TABLE></TABLE>, que van al principio y final respectivamente.
b) Dentro de esas etiquetas colocaremos filas (rows en ingls) con las etiquetas
<TR></TR>. Utiliza una etiqueta por cada fila que desees agregar y no olvides
colocarlas dentro de la definicin de la tabla.
c) Finalmente, para crear las columnas, debers incluir dentro de las etiquetas
de filas las etiquetas de las celdas <TD></TD>. Por ejemplo si deseas definir
tres columnas, colocars tres etiquetas de celdas dentro de una misma etiqueta
de fila. Veamos grficamente este ejemplo:
<TABLE>
<TR> <TD> <TD> <TD> </TR>
Celda 1 Celda 3 Celda 3
</TD> </TD> </TD>
</TABLE>
Como podrs notar, realmente lo que ves como resultado de tu programacin son
el acomodo que hagas de las celdas dentro de la estructura de la tabla.
4.4 Trabajar con Tablas
Las tablas pueden configurarse como cualquier otro elemento dentro del HTML, a
continuacin encontrars los atributos de la etiqueta TABLE:
border="*" Con este atributo podrs

controlar el grosor en pxeles
del borde de la tabla.
cellpadding="* Define el espacio entre el borde
" de la celda y el contenido de la
misma, se mide en pxeles.
cellspacing="* Define el espacio entre celdas y
" est definido tambin en
pxeles.
width="*" Determina la anchura de la
tabla en pxeles o en porcentaje
en relacin al ancho del
documento.
align="***" Especifica la alineacin de la
tabla, izquierda, centrada o
derecha. (left, center, right)
Las instrucciones para crear una tabla son:
1. Coloca el cursor en el
espacio donde deseas
colocar la tabla.
2. Da un clic en el icono
para abrir la caja de
dilogo donde crears tu
tabla.
3. En la caja de dilogo
introducirs los valores
que desees para tu tabla. Lo primero a configurar
es el tamao de la tabla (Table Size) tanto en filas
(rows) como columnas (columns), posteriormente
especfica el ancho (width).
4. Determina los valores de los atributos de
formato, borde (border), espacio interior (cell
padding) y espacio entre celdas (cell spacing).
5. Da un clic en OK y vers como aparece la tabla
en tu pgina, en la pestaa de Preview.
HTML.
Practiquemos la creacin de tablas con estos ejemplos:
TABLA 1 tabla1.html
Tabla de 2 filas por 3 columnas, espacio entre lneas

de 2 px., borde 1
1 2 3
4 5 6
Ver cdigo completo

TABLA 2 tabla2.html
Tabla de 4 filas por 2 columnas, ancho de tabla 300

pxeles con borde 0 y fondo de celda gris y celdas al
50% de ancho.
1 2
3 4
5 6
7 8
Ver cdigo completo
TIPS
Si colocas el borde de la tabla con valor "0"

(cero), vers que se hace invisible en la
visualizacin en el navegador, esta opcin es muy
prctica para organizar todos los elementos de la
pgina. Si realmente deseas que aparezca el
borde, dale un valor de 1 o mayor.
El uso de tablas es muy recomendable para
mejorar el aspecto visual de tu pgina, piensa
cmo ordenaras el texto y la fotos dentro de una
tabla:
Ttulo Ttulo Ttulo Texto de

Texto de Texto de prueba,
prueba,
texto. prueba, texto.
Texto de texto. Texto de
prueba,
Texto de prueba,
texto.
Pie de prueba, texto.
pgina texto. Pie de pgina
Pie de pgina
4.5 Las celdas
La celda es la unidad mnima y principal de una tabla. En ellas podemos colocar

cualquier otro elemento que hayamos visto, ttulos, textos, ligas, imgenes e
incluso otras tablas.
Podemos decir que las celdas son elementos con vida propia, ya que son
configurables totalmente: su borde, altura y anchura, color de fondo e incluso
alineacin de los elementos que en ella se contienen.
Algunas de las etiquetas que se usan para la configuracin de las celdas son:
width="*" Determina el ancho de celda, y

se especifica en pxeles o
porcentaje.
rowspan="*" Permite unir dos o ms celdas en
sentido horizontal (filas), su
medida es la cantidad de filas a
unir.
colspan="*" Permite unir dos o ms celdas en
sentido vertical (columnas), su
valor es la cantidad de columnas
a unir.
bgcolor="#*" Determina el color del fondo de
la celda.
align="***" Especifica la alineacin
horizontal del contenido de la
celda en posiciones: izquierda,
centrada o derecha. (left, center,
right)
valign="***" Especifica la alineacin vertical
del contenido de la celda en
posiciones: arriba, centrada,
abajo. (top, middle, bottom).
Para crear tus tablas, sigue las instrucciones descritas en el tpico anterior y
practiquemos los atributos de celdas con los siguientes ejemplos:
CELDAS A) celdaA.html
Crea una tabla que contenga 2 filas y 2 columnas,
con 90% de ancho y borde de 0 pxel.
celda 1 celda 2
celda 3 celda 4
Ver cdigo completo
CELDAS B) celdaB.html
Ahora haremos que la primera fila se expanda al
ancho de las tres columnas, utilizaremos el atributo
rowspan.
celda 1
celda 3 celda 4
Ver cdigo completo
CELDAS C) celdaC.html
Utilizaremos la primera fila con su celda expandida,
como contenedora de un ttulo, el que t quieras.
En la celda 3 colocaremos una imagen y en la celda
4 un texto. Puedes probar configurando las celdas
de diferente forma hasta que logres el resultado
que mejor te parezca.
Aprendamos a programar tablas

Programar tablas y configurar
celdas con este pequeo
tutorial es muy fcil, todo es
cuestin de practicar.
Una tabla es un elemento de
organizacin y diseo. Es
divertido y prctico.
Ver cdigo completo

Cdigo completo
<HTML>
<HEAD>
<TITLE>Cómo funcionan las anclas</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#333333" link="#CC3300" vlink="#FF6600"
alink="#CC3300">
<TABLE width="90%" cellpadding="3" align="center">
<TR>
<TD colspan="2">
<H4><FONT color="#006600">Aprendamos a programar
tablas</FONT></H4>
</TD>
</TR>
<TR>
<TD width="104"><IMG src="../images/clipart/img_programar.gif"
width="104" height="76"></TD>
<TD valign="top"><FONT face="Verdana, Arial, Helvetica, sans-serif"
size="2" color="#006600">Programar
tablas y configurar celdas con este pequeño tutorial
es muy fácil, todo es cuestión de practicar.<BR>
Una tabla es un elemento de organización y diseño.
Es divertido y práctico.</FONT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Listo! Ya tienes un diseo de pgina. Sigue intentado otras combinaciones de

atributos, tanto de tabla como de celda y consigue el resultado que desees.
TIPS
Puedes utilizar tablas para crear mens, ya sea
con ligas de texto o de imgenes. Si quisieras
hacer un men vertical puedes intentarlo
colocando una sola columna y la cantidad de filas
como secciones tenga. En el caso de ser un men
horizontal puedes colocar una fila y tantas
columnas como secciones. Deja volar tu
creatividad!
CONCLUSIN
Enhorabuena ya estas listo para poner manos a la obra y crear tu propia pgina
de web!
Con este tema, hemos finalizado la enseanza de tcnicas bsicas de
programacin en HTML ahora tienes todas las herramientas que podrn ayudarte a
crear tu pgina para la Internet.
En este momento ya sabes establecer enlaces entre dos puntos, colocar imgenes
y qu tipo usar, podrs usar separadores para mejora el aspecto y lectura del
documento, y tambin eres capaz de crear tablas con bordes y colores de fondo.
RECUERDA QUE...
Debes utilizar colores que faciliten la

lectura de tu informacin, tanto para el
fondo como para los textos que uses.
Cuando de sitios en la Internet se trata,
el enemigo ms cruel para que las
pginas se descarguen lentamente son
las imgenes; cuanto ms grande es la
imagen (tamao y peso) ms largo es el
tiempo de espera No ahuyentes a los
visitantes, evita usar imgenes pesadas!
Intentar disear primero tu pgina sobre
papel haciendo bocetos, eso te ayudar a
analizar tu trabajo de programacin as
podrs preveer incovenientes.
El xito en toda labor es la prctica.
No temas equivocarte, haz todos los
intentos que quieras antes de llegar a tu
versin final.
ACTIVIDAD 4: El Proyecto Integrador

(10% calificacin final)
En el tema 3 estuviste trabajando en la portada para tu sitio, es hora de que le

demos un aspecto ms completo con las opciones que aprendiste durante el tema
que acabas de terminar.
NOTA: Las pginas que resulten de esta ltima actividad del curso sern las que
conformen tu Proyecto Integrador, y que debers de publicar en la Internet
como te mostraremos en el siguiente tema, para que con ello se te otorgue una
ponderacin.
PASOS:
1. Abre el Editor de HTML Sothink.
2. Es hora de que tu pgina vaya tomando
aspecto de un sitio! Debers crear al menos 4
pginas que se vincularn de forma local a tu
portada. Crea secciones que tengan relacin al
tema central de tu pgina, puedes visitar otras
pginas en la Internet para inspirarte.
Consulta los requisitos de las pginas en la
seccin de Descripcin del curso > Cmo
estudiar?
3. Dale vida a tus pginas con imgenes,
separadores y tablas. Recuerda que puedes jugar
con los colores de fondo y bordes de las tablas
para crear efectos divertidos.
4. Es momento de crear las ligas entre tus
pginas. Abre la pgina que creaste en la
actividad pasada. Debers incluir un men con el
cul enlaces los documentos creados.
Puedes hacer un men de hipertexto o
hiperimagen, en el ejemplo encontrars ambas
opciones para que te orientes.
5. Listo! Verdad que no fue tan difcil? Si te ha
nacido la inquietud de convertirte en un
programador debers practicar mucho y aprender
de otras personas, en la Internet encontrars
muchos foros donde podrs compartir tus dudas y
experiencias. Forma parte del mundo de
informacin y divirtete.
6. Ya ests listo para subir tu trabajo a la gran
red, permanece con el mismo nimo que hasta
ahora y complementa tus conocimientos con el
siguiente tema: Publicar pginas en la Web.
7. El documento creado en el editor Sothink HTML
lo debes enviar a tu tutor por medio de un
mensaje antes de la fecha lmite de esta actividad
para que te retroalimente y lo califique. Recuerda
que esta actividad vale el 10% de tu
calificacin final.
TEMA 5: Publicar la pgina en la Web
OBJETIVO
Con el estudio de este ltimo tema, sers capaz de publicar tus

pginas en la gran red. Conocers los mtodos publicacin a travs
de FTP y Administradores de pginas que ofrecen el servicio de
alojamiento.
Tendrs la oportunidad de conocer uno de los proveedores hispanos
que ofrece herramientas de creacin, alojamiento y publicacin de
pginas de HTML gratuitamente.
INTRODUCCIN
Durante los 4 temas anteriores hemos avanzado del 0 al 95% en el

aprendizaje de la programacin de HTML bsico, el porcentaje
restante es simplemente lograr que tu esfuerzo llegue al lugar para el
cual fue creado: la Internet.
El trmino correcto para nombrar la accin de difundir los sitios que

creas, se denomina publicar. Debers considerar los siguientes
puntos: contar con una direccin en la Internet (conocida como URL),
contar con un servidor donde se alojarn los archivos pertenecientes
al sitio y el medio para colocarlos en el lugar adecuado.
Suena complicado? En realidad no lo es, en nuestro caso,

buscaremos opciones gratuitas de alojamiento de sitios Web. La
mayora de las empresas que ofrecen este servicio, otorgan una
direccin o URL automticamente y hasta te brindan las herramientas
tecnolgicas para colocar tus pginas en sus servidores.
Un servidor es una computadora dedicada a hospedar o alojar

archivos para ser compartidos, en el caso del servidor para Internet,
cuenta con una conexin a la red y permite que usuarios externos
accedan a las pginas que contiene, por lo que podemos considerar
que son del dominio pblico.
Como en todas las cosas, hay muchos caminos para llegar a Roma; bueno en este caso,
para lograr la publicacin tus pginas. En este tema te ayudaremos a que tengas un
panorama general de las herramientas y tecnologa, e incluso una opcin concreta. Sin
embargo, en la medida de tu esfuerzo e investigacin podrs encontrar otras opciones
iguales o mejores. La decisin es tuya, a publicar tu pgina!
5.1 Cmo se publica una pgina en el Internet?

Cmo leas en la introduccin a este tema, para que un sitio pueda
ser del dominio pblico a travs de la Internet, debes de contar con
los siguientes puntos:
1. El sitio completo (con todos los archivos html, imgenes y otros

que sean propios del sitio)
2. Un espacio en el servidor de alguna compaa dedicada al
alojamiento de pginas Web.
3. Una herramienta tecnolgica para ubicar tus pginas en el servidor
antes mencionado. Comnmente se utiliza el mtodo FTP -File
Transfer Protocol, o en espaol, Protocolo de Transferencia de
Archivos-
4. La direccin o URL a dnde apuntarn los usuarios para ver tu
pgina.
Si contamos con que ya tienes creado el sitio, podemos brincarnos el

paso 1 y buscar un proveedor que ofrezca gratuitamente el servicio
de publicacin y hospedaje de pginas Web. Antes de continuar, cabe
aclarar que la accin de dejar colocados tus archivos en un servidor,
se le llama alojar y/o hospedar (hosting, en ingls). Precisamente
por esto, a los proveedores de este servicio se les conoce como
proveedores de Hosting o Alojamiento.
Ahora s, entremos completamente en materia, y para ahorrarnos

pasos en el camino, hablaremos de un proveedor de alojamiento
gratuito que ofrece estos todos los elementos: GratisWeb, de la
compaa StarMedia. Adems de las caractersticas descritas
anteriormente le podemos aadir una ventaja adicional, es una
pgina muy grfica y en espaol, por lo que se facilitar an ms el
proceso de publicacin del sitio.
Lo primero que hay que hacer es estar conectados a Internet y escribir en

la barra de direcciones lo siguiente: http://www.gratisweb.com
En la pgina principal de este sitio, encontrars un gran anuncio para

obtener un espacio gratuito. Al dar clic en ese espacio, te conducir a una
ventana donde aparecen las clusulas del contrato de afiliacin a la
Comunidad de StarMedia, lelo detenidamente y si ests de acuerdo en los
trminos, da un clic en el botn de Acepto.
Si deseas construir tu pgina en ese instante, da un clic en el botn

que se indica y aparecer una pantalla personalizada para ti. En esta
pantalla, ubica la seccin de Gestionar/subir archivos.
Finalmente ests listo y en la posicin adecuada para subir tus

documentos, sigue las instrucciones que te ofrece el proveedor y
publica tus pginas en la Web. No olvides probar tu pgina antes de
mandrsela a tu tutor.
Como subir archivos:
1. Ingresa usuario y contrasea.

2. Clic en gestionar y subir archivos.
3. Clic subir archivos de mi disco.
4. Clic examinar y seleccionar los archivos para subir a la pgina.
5. Cuando se completaron los primeros 10 archivos dar clic en subir
archivos.
6. En caso de subir menos de 10 archivos subir slo los necesarios y
dar clic en subir archivos.
7. En caso de que sean mas de 10 archivos repetir el punto 5 hasta
completar el total de archivos para transferir.
8. Cuando se termine la transferencia de archivos dar clic en volver al
administrador.
5.2 Uso de FTP
Cuando compras un dominio o direccin URL, y el hospedaje de tus

pginas en un proveedor no gratuito, generalmente se te otorga una
cuenta de FTP.
Comentamos con anterioridad que FTP significa File Transfer

Protocol, o en espaol, Protocolo de Transferencia de Archivos. Es un
mtodo de compartir documento de una forma rpida y segura.
Mayoritariamente se realiza a travs de pequeos programas que
forman parte de los programas mismos de la creacin de pginas,
como el Site Manager en el caso del editor Sothink, o bien pueden ser
programas creados y dedicados a este efecto. Entre ellos, uno de los
ms usados es el LeechFTP.
Esencialmente para realizar transferencias de archivos bajo est

opcin se necesitan 3 datos:
1. La direccin del servidor (que puede ser numrica o textual).

2. Una cuenta de acceso y su contrasea correspondiente.
3. El programa para realizar la transferencia y claramente conexin a
Internet.
Los programas de FTP, comnmente estn divididos en dos secciones,

en un extremo tendrs la lista de archivos de tu mquina y del otro
extremo tendrs la lista de archivos del servidor, la idea central es
que traslades la misma estructura de documentos que tienes en tu
mquina al servidor.
En nuestro caso especfico, no utilizaremos esta opcin pero si deseas

investigar ms al respecto, consulta los tutoriales de los programas
en cuestin o indaga un poco ms en la Internet
NOTA: Para ver tu pgina, teclea en cualquier navegador,
la direccin que te fue otorgada por el proveedor
Finalmente has llegado a la meta de tu curso: publicar tu sitio en la

red. A lo largo de este ltimo tema, se te present un tutorial para
efectuar esta actividad.
Existen muchos proveedores de Internet gratuito, tienes completa
libertad de seleccionar el que mejor convenga a tus necesidades.
Como nuestra recomendacin, sugerimos aprovechar la herramienta
que te presentamos por sencilla y prctica.
PASOS PARA PUBLICAR TU PGINA A

TRAVS DE GRATISWEB:
1. Ingresa usuario y contrasea.
2. Clic en gestionar y subir archivos.
3. Clic subir archivos de mi disco.
4. Clic examinar y seleccionar los archivos para
subir a la pgina.
5. Cuando se completaron los primeros 10
archivos dar clic en subir archivos.
6. En caso de subir menos de 10 archivos subir
slo los necesarios y dar clic en subir archivos.
7. En caso de que sean mas de 10 archivos repetir
el punto 5 hasta completar el total de archivos
para transferir.
8. Cuando se termine la transferencia de archivos
dar clic en volver al administrador.
9. Anotar bien la direccin o URL que se te asigna,
ya que ste ser tu pase para acreditar el curso.
Debers de probar y envar la liga a tu tutor a
travs de la plataforma. En un perodo no mayor a
1 semana se te notificar sobre tu participacin en
el curso. Recuerda que esta actividad vale el
60% de tu calificacin final.

Curso HTML Tec Mtry

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso HTML Tec Mtry

Hochgeladen von

Copyright:

Verfügbare Formate

TEMA 1: Conceptos bsicos de programacin

Uno de los servicios ms usados es el Word Wide Web ("WWW" o

Una pgina Web es un documento que contiene informacin como

Aprender a programar en HTML te brinda la capacidad de transmitir

A lo largo de este primer tema, podrs conocer cul es el origen del

1.1 Recursos bsicos de programacin: Qu es el HTML?

Para entrar de lleno a este tema, necesitamos comprender qu es un

El HTML (Hyper Text Markup Language - Lenguaje de Marcas de

Este lenguaje fue creado por el ingls Tim

Bsicamente el HTML esta conformado por una serie de instrucciones que

1.2 Introduccin a lenguaje HTML: trabajando

El HTML es un lenguaje diseado para publicar

Para visualizar un documento en HTML se usan unos programas llamados

1.2 Introduccin a lenguaje HTML: trabajando con etiquetas

Las instrucciones del HTML se escriben como etiquetas ("tags" en ingls)

Las etiquetas abiertas se usan en reas grandes del documento o

A las etiquetas cerradas tambin se les pueden agregar parmetros, que

HTML significa "Hypertext Markup

El objetivo de esta actividad es que te vayas familiarizando con el

La actividad consiste en elaborar una lista que contenga las etiquetas de

En la seccin sitios de inters encontrars

Un sitio web es un conjunto de pginas ligadas entre si. En lo que respecta a

2.1 Cmo escribir en HTML?

Los archivos de HTML tienen comnmente las extensiones .html o .htm

1. Escribir todas las etiquetas en MAYSCULAS.

2. Una etiqueta puede contener atributos o

2.2 La estructura bsica de una pgina en HTML es:

Ver cdigo completo As se vera la pgina

La primera parte de una pgina HTML es el identificador del lenguaje de

Para el caso del HTML, el identificador es la etiqueta <HTML></HTML>. stas

Dentro de estas dos etiquetas identificadoras se distinguen dos secciones

La pgina raz del sitio es recomendable que se

2.3 Cabecera del documento (head)

La cabecera est definida por las etiquetas <HEAD>...</HEAD>. Dentro de stas

La informacin contenida en la etiqueta de <HEAD>...</HEAD> no se despliega

De acuerdo al estndar HTML, las etiquetas vlidas a utilizar dentro de la

<BASE> Define la liga de origen de todas las

Para editar la cabecera de las pginas, sigue

1. Para editar la cabecera

Dentro de la etiqueta de <HEAD>...</HEAD>

A su vez, la etiqueta del cuerpo <BODY>...</BODY>, contienen atributos que

Un ejemplo de lo anterior seria:

Ver cdigo completo As se vera la pgina

bgcolor Determina el color del fondo de la

Para editar la etiqueta de BODY dese el

1. Posiciona el cursor sobre

Una vez asignados los atributos de la etiqueta <BODY>...</BODY>, se puede

Dentro de la etiqueta de <BODY>...</BODY>

ACTIVIDAD 2: Crea tu primer documento en HTML

El objetivo de esta actividad es que seas capaz de programar tu primer pgina en

La actividad consiste en programar, utilizando el Notepad de Windows como

En este tema entraremos de lleno a la programacin tcnica y diseo de las

Un editor de HTML es un programa que te facilita la creacin de pginas

3.1 Introduccin al Editor

El Editor de HTML Sothink (antes llamado CutePage) es un programa

Este editor incluye un programa complementario, el administrador de sitios y

La pequea desventaja del programa es que est en idioma ingls, pero si

Las notas que te presentaremos a continuacin son una serie de instrucciones

DEFINE UN SITIO NUEVO

A) Debes crear una carpeta nueva en la computadora que se llame "misitio", en

C) El siguiente paso es crear el sitio desde el programa Site Manager

Para crear un sitio desde el Site Manager:

1. Abre el programa Site Manager.

6. Una ventana aparecer, preguntndote si

< <

> >