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.

TEMA 1: Conceptos bsicos de programacin

1.1

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 deHiperTexto)
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 inglsTim 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
trabajando con etiquetas

HTML:

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.
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.

Etiquetas bsicas de HTML

Headings

Nos definen el tamao de un ttulo o cabecera.

<h1> nos d el tipo de letra ms grande.
<h6> nos d el tipo de letra ms pequeo.
HTML agrega automaticamente un espacio antes y despus de cada ttulo.
<h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya
que es uno de los parmetros que Google y dems buscadores tiene en cuenta,
a la hora de indexar un sitio web.
Ejemplo
Cdigo

Resultado

<html>
Heading 1
<head>
Heading 2
<title>Headings</tit
le>
Heading 3
</head>
Heading 4
<body>
<h1>Heading
1</h1>
<h2>Heading
2</h2>
<h3>Heading
3</h3>
<h4>Heading
4</h4>
<h5>Heading
5</h5>
<h6>Heading
6</h6>
</body>
</html>

Heading 5
Heading 6

Prrafos
Los prrafos se definen con la etiqueta <p>.
Ejemplo
Cdigo

Resultado

<html>
<head>
<title>Prrafos</title>

Este es el primer prrafo.

Y este es el segundo prrafo.

</head>
<body>
<p>Este es el primer prrafo.</p>
<p>Y este es el segundo prrafo.</p>
</body>
</html>

Comentarios
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del cdigo
que estamos escribiendo. El mismo es ignorado por el navegador al momento
de leerlo. Los comentarios nos sirven para explicar mejor el cdigo y son de
gran ayuda en el momento que necesitemos editarlo.
<!-- Esto es un comentario. -->
* Nota que el signo de exclamacin se coloca solo al principio del cdigo.

Salto de lnea
El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando
queremos cortar una lnea sin necesidad de terminar con el prrafo. La
etiqueta <br> obliga a saltar de lnea dondequiera que la ubiquemos.
Ejemplo
Cdigo

Resultado

Esto es <br> un salto de

l<br>nea.

Esto es
un salto de l
nea.

Trazar una lnea

La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan
las distintas secciones de este tutorial.
La etiqueta <hr> no tiene cierre.
Ejemplo
Cdigo
<hr>

Resultado

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
llamadasetiquetas.
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.

TIPS
Dentro de la etiqueta de <HEAD>...</HEAD> no
incluyasinformacin 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>
Ver cdigo completo

As se vera la pgina

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.

marginheig
Tamao del margen superior e inferior.
ht
h

marginwidt Tamao de l margen izquierdo y

derecho.

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 Windowscomo
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.
Ve un ejemplo de esta actividad

Los formularios
Los formularios son usados para que el usuario ingrese datos.
Esos datos son enviados a un documento, que se encuentra en un servidor,
para que los procese (por ej., a un servidor web, a un servidor de email, etc.).
La etiqueta form
La etiqueta <form> se utiliza para definir un formulario.
El atributo action es obligatorio y nos indica el documento que procesar los
datos del formulario enviado.
Tambin contamos con el atributo method que nos define el mtodo por el
cual se enviarn los datos del usuario al servidor.
<form action="URL" method="valor">
...
</form>
La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos.
Los usuarios interaccionan con los formularios a travs de las
llamados controles.
Tipos de controles:

Botones (buttons)
Casillas de verificacin (checkboxes)
Radiobotones (radio buttons)
Menes (menus)
Entrada de texto (text input)

Seleccin de ficheros (file select)

Controles ocultos (hidden controls)
Controles tipo objeto (object controls)
El atributo type especifica el tipo de control a crear.

Sintaxis

Sintaxis
</form>
<input type="control" atributo="valor">
</form>

El control "text"
Crea un control que nos permite ingresar un texto en una lnea.

Ejemplo
Cdigo

Resultado

<form action="datos.php"
Nombre:
method="get">
Nombre: <input type="text" name="
Apellido:
nombre">
Apellido: <input type="text" name="
apellido">
</form>

El control "radio"
Se usa cuando queremos que el usuario elija una sola opcin de entre una serie de
posibilidades.

Ejemplo
Cdigo
<form action="edades.asp" method="post">
Edad?
<input type="radio" name="edad" value="menor">menor de 17
<input type="radio" name="edad" value="adulto">entre 18 y 60
<input type="radio" name="edad" value="mayor">mayor de 61
</form>

Resultado
Edad?
menor de 17
entre 18 y 60
mayor de 61

Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio.
La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese

el formulario.

El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.

Ejemplo
Cdigo

Resultado

<form action="hobbie.php" method="get">

Pasatiempos?
<input type="checkbox" name="pasa" value="tv">TV
<input type="checkbox" name="pasa" value="libros">Libros
<input type="checkbox" name="pasa" value="musica">Msica
<input type="checkbox" name="pasa" value="otros">Otros
</form>

Pasatiempos?
TV
Libros
Msica
Otros

Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox.
La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese
el formulario.

El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de
puntitos. Es utilizado generalmente para ingresar contraseas.

Ejemplo
Cdigo
<form action="verificacion.php" method="post">
Nombre: <input type="text" name="nombre">
Password: <input type="password" name="pass">
</form>

Resultado
Nombre:
Password:

El control "submit" y el control "reset"

El control submit es el botn de envio de datos del formulario y el control reset es el
botn de reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores
iniciales.

Ejemplo
Cdigo
<form action="datos_personales.php" method="post"> Nombre:
Nombre: <input type="text" name="nombre">
Contrasea: <input type="password" name="secreto">
Contrasea:
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">

Resultado

</form>
Enviar

Borrar

Nota: el valor de la propiedad value define el texto dentro del botn.

El control "file"
El control file nos permite enviar archivos por medio de un formulario.

Ejemplo
Cdigo
<form action="archivo.php" method="post">
Ingrese la foto: <input type="file" name="foto">
</form>

Resultado
Ingrese la foto:

El control "hidden"
El control hidden nos permite enviar informacin oculta a los ojos del usuario.

Ejemplo
Cdigo
<form action="oculto.php" method="post">
Nombre: <input type="text" name="nombre">
Contrasea: <input type="password" name="contra">
<input type="hidden" value="cookie">
</form>

Resultado
Nombre:
Contrasea:

El control "image"
El control image nos permite utilizar una imagen personalizada como botn de un
formulario.

Ejemplo
Cdigo
<form action="archivo.php" method="post">
Nombre: <input type="text" name="nombre">
Contrasea: <input type="password" name="contra">
<input type="image" src="/enviar.jpg">
</form>

Resultado
Nombre:
Contrasea:

Las etiquetas select y option

La etiqueta <select> es usada para crear un men desplegable.
Cada opcin ofrecida por el men se representa con la etiqueta <option>

Ejemplo
Cdigo

Resultado

<form action="continentes.php" method="get">

<select name="continente">
<option value="america">Amrica</option>
<option value="asia">Asia</option>
<option value="europa">Europa</option>
<option value="oceania">Oceana</option>
<option value="africa">Africa</option>
</select>
</form>

La etiqueta textarea
Se usa para crear un control de entrada de texto multilnea.
Los atributo rows y cols nos indican la cantidad de filas y columnas que tendr el
recuadro del rea de texto.

Ejemplo
Cdigo
<form action="texto.php" method="post">
<textarea name="eltexto" rows="5" cols="30">
Aqu podemos ingresar un texto introductorio si lo
deseamos.
</textarea>
</form>

Resultado

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.

TEMA 4: Formato avanzado del documento

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 TextMarkup 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
bsqueda
en
la
pgina

aqu
de

para

hacer una
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

Vnculo
Todos
los
sitios
en
la
o URL (UniversalRessource Locator
de Recursos).

tipos

hiperligas:

externo
Internet
tiene
una
direccin
o
en
espaol, Localizador Universal

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

VNCULOS

uno.html y dos.html

<!-Este es el ejemplo de Vnculo local-->

<A href="dos.html">
<B>Ir a p&aacute;gina dos &gt;</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&eacute;s de este v&iacute;nculo externo
</A>
Ver cdigo completo

As se veran las pginas

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

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

<BODY bgcolor="#FFFFFF" text="#333333"

link="#CC3300" vlink="#FF6600" alink="#CC3300">
<!--Este es el punto de anclaje o ancla-->
<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&iacute;tulo</A>

</BODY>
Ver cdigo completo

As se vera la pgina

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 razones
esenciales: su peso es relativamente el menor de todos los
formatos y permite usar cualidades que ningn otro formato
ofrece como reas "transparentes" e incluso 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 encapsula este formato.

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 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 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.

Observa
los
ejemplos:
GIF

GIF
CON
ZONAS
TRANSPAR
ENTES

GIF
ANIMADO

JPEG

Veamos cmo quedara el cdigo cuando insertamos una

imagen:

IMGENES

imagen.html

<BODY bgcolor="#FFFFFF" text="#993300"

link="#9933FF" vlink="#CC99FF" alink="#9933FF">
<!-Inicio de los ejemplos-->
<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>
Ver cdigo completo

As se vera la pgina

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="mid
Alinear en medio.
dle"
align="abs Alinear perfectamente en
medio.
middle"
align="bott
Alinear abajo.
om"
align="left" Alinear hacia la izquierda.
align="righ
t"

Alinear hacia la derecha.

Veamos como se comporta el atributo de alineacin de imagen con respecto al

texto:

Esta imagen
tiene una
alineacin hacia
laizquierda
(left)
Esta imagen tiene
una alineacin
hacia enmedio (middle)

Esta
imagen
tiene una
alineaci
n hacia
la derec
ha

(right)

Esta imagen
Esta imagen tiene
tiene una
una alineacin absoluta
alineacin
hacia enmedio
hacia arriba
(absmiddle)
(top)

Esta
imagen
tiene una
alineaci
n
hacia ab
ajo
(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.

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.