INFORMATICA

UNIDAD 2 DISEO DE PAGINA WEB CON HTML

INTRODUCCIN
En esta unidad conocers y aplicars el lenguaje utilizado para la creacin de pginas web: HTML
(Hyper Text Markup Language). Durante su estudio aprenders los conceptos bsicos y
necesarios para la creacin de una pgina web como: qu es una pgina? o qu herramientas
necesitas para su creacin?, hasta cuestiones como la incorporacin de audio y video para
hacerla ms dinmica y atractiva.
En el primer tema aprenders la estructura bsica de una pgina web, esto es, las etiquetas que
nunca deben faltar y el orden a seguir para su adecuada elaboracin. El segundo tema es muy
enriquecedor, ya que hars uso de diversas etiquetas, que entre otras cosas, te permitirn
destacar ttulos, agregar color, tamao y forma, as como elaborar listas. El tema de tablas e
imgenes, es de gran utilidad para la organizacin de la informacin y la integracin de grficos,
con el fin de hacer ms llamativa tu pgina; para ello, aprenders a definir las etiquetas y vers
los diversos elementos que puedes incluir en una pgina web. El tema de vnculos te ayudar a
enriquecer la informacin que se presenta en la pgina haciendo referencia a otros documentos
ubicados en cualquier parte del mundo. Finalmente, con el tema de audio y video podrs agregar
sonidos e imgenes en movimiento.
Con todos estos elementos logrars que tu pgina web tenga una buena presentacin a los
internautas que deseen visitarla. Adems de aprender los atributos de las etiquetas (tags) que
conforman el lenguaje HTML.
En cada tema de la unidad confirmars tus conocimientos con las diversas actividades diseadas
para tu aprendizaje, ya que la mejor forma de aprender HTML es practicando. Estas actividades
sern de dos tipos:
1. Diseadas para ejemplificar la insercin de cada etiqueta HTML en la pgina web, para que
posteriormente se practiquen; representadas por el tipo de efecto a visualizar (insertar un texto
en cursivas, agregar una tabla, etc.)
2. Diseadas para demostrar tu dominio del HTML, sealadas como actividades de evaluacin.
Durante la realizacin de las actividades te invitamos a participar en los foros programados por
cada tema de la unidad, en los que podrs compartir con tus compaeros y el asesor el
intercambio de conocimientos, resolucin de dudas, observaciones y sugerencias, que sin duda
apoyarn tu aprendizaje.
Al trmino de la unidad sers capaz de crear tu propia pgina web, tomando en consideracin los
principios de creacin de pginas web utilizando el lenguaje HTML (lenguaje de marcado de
hipertexto).

LA WORLD WIDE WEB

La World Wide Web (WWW), tambin conocida con el nombre de Web es un sistema de
navegacin que permite fundamentalmente publicar, consultar y dado el caso, extraer
elementos de informacin ubicados en las llamadas "pginas web" o "documentos", las cuales
estn hospedadas en miles de servidores que se encuentran distribuidos en todo el planeta.
La World Wide Web es la parte ms popular de Internet porque permite establecer, para quienes
la consultan, una comunicacin rica y diversa en contenidos debido a que la informacin la
puede presentar usando recursos tales como: texto, imgenes, grficos, fotos, animaciones,
sonido y video.

Breve historia de la Web

La World Wide Web fue inicialmente desarrollada en 1990 por Tim Berners-Lee en el CERN, el
Laboratorio Europeo de Fsica de Partculas, como un sistema de comunicacin de uso sencillo e
independiente de la plataforma computacional, basado en el lenguaje HTML (Hyper Text Markup
Language, por sus siglas en ingls). HTML es un lenguaje de marcado de etiquetas que describen
un documento elaborado con hipertexto (texto con enlaces a otras partes del documento o a
otros documentos), lenguaje que profundizars ms adelante.
Actualmente, la Web es administrada por la World Wide Web Consortium (Consorcio de la Web o
W3C, en ingls). El W3C centra su trabajo en desarrollar tareas de educacin, difusin y
desarrollo de software. Con el objetivo de que la Web alcance su mximo potencial, las
tecnologas Web ms destacadas deben ser compatibles entre s y permitir que cualquier
hardware y software para acceder a la Web funcione conjuntamente.

CARACTERSTICAS DE LA WEB
La Web trabaja bajo el esquema de una arquitectura denominada cliente-servidor. La
computadora personal es el cliente y la computadora remota que alberga los archivos
electrnicos es el servidor. A continuacin te explicamos cmo funciona:

Por ello, se requieren los siguientes elementos tcnicos:

1.
2.
3.
4.
5.

Una computadora personal.

Una conexin a un proveedor de servicios de Internet.
Un conjunto de computadoras llamadas servidores que albergan informacin digital.
Los enrutadores y conmutadores, cuya funcin es dirigir el flujo de la informacin.
Un navegador de Internet.

La Web se mantiene cohesionada gracias a los:

Debido a estas caractersticas, en la Web se navega o explora a travs de pginas de informacin, conforme a lo que
le desee consultar el usuario en un determinado momento. El acceso a estas pginas es mediante un navegador
(browser) el cual se encuentra instalado en el cliente, es decir, en la computadora personal. En la red existen diversos
navegadores, siendo los ms populares:

Para trabajar, los navegadores necesitan que los documentos o pginas estn en el lenguaje HTML. Es precisamente
este lenguaje el que aprenders en la unidad.

PGINAS WEB
En Internet puedes obtener informacin de los ms variados temas a cualquier da, hora y sin
necesidad de moverte de un espacio fsico. La Web permite acceder de forma simple e intuitiva a
toda esta informacin a travs de las pginas web. Pero, qu es una pgina web?

Por qu aprender HTML si ya existen en el mercado de software muchos programas de diseo de pginas Web que
pueden hacer el trabajo por nosotros?

Como puedes comprender, las ventajas que se pueden tener al aprender HTML son diversas, y
particularmente, ser la base para el estudio de otros lenguajes ms verstiles y complejos para
el diseo de pginas Web.
Para crear una pgina web se requiere una planeacin y el conocimiento de su estructura:

Estructura bsica de una pgina web

Un pgina web (o documento HTML) est formada por dos elementos diferenciados que son:
La informacin que se muestra al usuario (persona que accede a la pgina web)

Las etiquetas (llamadas tags, en ingls)

Caractersticas de las etiquetas

Con el propsito de que lo aprendido hasta el momento te quede ms claro, realiza la siguiente
actividad.
Mi primera pgina web
Crea una pgina web que muestre una frase sencilla en pantalla. Da clic aqu para imprimir las
instrucciones.
Nota: El proceso descrito en los pasos de este ejercicio son los que debes seguir
sistemticamente cada vez que se te pida crear una pgina Web, la cual debers salvar en tu
carpeta pginas web de tu disco duro local.
Anlisis de la estructura bsica de una pgina Web
Veamos las etiquetas que empleaste en el cdigo de tu primera pgina web.

ETIQUETAS MS USADAS CON HTML

La estructura bsica de una pgina web se enriquece y amplia cuando se incorporan otro tipo de
etiquetas, las cuales mejoran la forma de presentar la informacin, como: enfatizar cierta
informacin (ttulos), aplicar formato al texto (negritas, cursivas, etc.), su organizacin (prrafos,
vietas y tablas) e incluir ciertos elementos visuales (imgenes), similar a un documento en
Word. Hars uso de estas etiquetas durante la elaboracin de diversas pginas que almacenars
en tu carpeta pginas web.
Antes de iniciar, te recomendamos lo siguiente:

1. ETIQUETAS PARA TTULOS

Los ttulos son una de las principales herramientas para estructurar un documento HTML,
permiten organizar el contenido en secciones y subsecciones a conveniencia del autor, tal como
haramos al redactar un informe o un trabajo escolar. Los siguientes 6 pares de etiquetas son los
que estn disponibles para los ttulos:

Para que veas cmo funcionan estas etiquetas en la prctica, realiza la siguiente actividad.
Ttulos
Observa cmo se insertan las etiquetas de ttulo en la estructura bsica de la pgina web y su
visualizacin con el navegador.
Da clic en el botn avanzar para seguir cada paso.

2. ETIQUETAS PARA LA ALINEACIN DE ELEMENTOS INDIVIDUALES

Para alinear un elemento o prrafo en la pgina web se usa el atributo align con la etiqueta de
dicho elemento, el cual puede tomar alguno de estos valores: left (izquierda), center (centro),
right (derecha), o justify (justificado).
Para ejemplificar la funcin de estas etiquetas realiza la siguiente actividad.
Alineacin
Observa cmo se insertan las etiquetas de alineacin de elementos individuales en la estructura
bsica de la pgina web y su visualizacin con el navegador.

3. ETIQUETAS PARA EL USO DEL COLOR

Todos conocemos la gama de colores existentes, as como la diversidad de matices posibles de
un tono especfico, por poco que estemos interesados en la pintura. Pero, cmo se los
explicamos a una mquina?
Una computadora no sabe de colores, slo es capaz de entender secuencias de ceros (0s) y
unos (1s). Por ello, los colores se definen mediante un cdigo hexadecimal. Tranquilzate!, no

es necesario aprenderse de memoria todos estos valores. Puedes utilizar las tablas de colores
disponibles en Internet, en algn sitio, como este VisiBone.
Para dar color a cualquier pgina web, se cuentan con dos procedimientos a saber:
A. Escritura del nombre del color
Los 16 colores ms utilizados en Internet se pueden indicar con un nombre ms fcil de recordar,
en ingls. La siguiente tabla nos muestra el tipo de color y su equivalente en cdigo
hexadecimal, los cuales puedes escribir con mayscula o minscula.
Tabla de colores para su uso en Internet
1.

Aqua

#00FFFF

9.

Maroon

#800000

2.

Black

#000000

10.

Navy

#000080

3.

Blue

#0000FF

11.

Olive

#808000

4.

Brown

#993300

12.

Purple

#800080

5.

Fuschia

#FF00FF

13.

Red

#FF0000

6.

Gray

#808080

14.

Silver

#C0C0C0

7.

Green

#008000

15.

White

#FFFFFF

8.

Lime

#00FF00

16.

Yellow

#FFFF00

El nombre de cada color se escribe dentro de los atributos de la etiqueta <body> para asignar:

Por ejemplo:

Para ilustrar el uso de esta etiqueta realiza la siguiente actividad.

Colores 1
Observa cmo se insertan las etiquetas de color en la estructura bsica de la pgina web y su
visualizacin con el navegador.

B. Escritura del cdigo hexadecimal del color

Ahora bien, si deseas escribir el cdigo hexadecimal del color, son 4 partes el que lo conforman:
1.
2.
3.
4.

El signo de nmero #, para indicar que es un valor hexadecimal.

Las posiciones 1 y 2 representan el color rojo.
Las posiciones 3 y 4 representan el color verde.
Las posiciones 5 y 6 representan el color azul.

Cuya sintaxis es, por ejemplo:

Cada par de dgitos pueden representar hasta 256 distintos niveles de color, que en combinacin
con los otros dos pares nos dan un aproximado de 16 millones de colores posibles.
Aplica estos conocimientos con la siguiente actividad.
Colores 2
Observa cmo se insertan las etiquetas de color en la estructura bsica de la pgina web y su
visualizacin con el navegador.

4. Etiquetas para saltos de lnea y prrafos

Cuando estamos elaborando una pgina web, y queremos escribir una prrafo extenso, o bien,
que haya una separacin entre prrafo y prrafo, HTML nos proporciona las etiquetas <br> y
<p>.
Etiqueta <br>
La etiqueta <br> produce un salto de lnea en el punto donde aparece y no es necesario que
lleve su correspondiente etiqueta de cierre </br>. Cuando el navegador encuentra una etiqueta
<br> crea un salto de lnea continuando el texto que exista despus de esa etiqueta alineado al
margen izquierdo, sin producir espacio adicional por arriba o por debajo de la nueva lnea, lo
nico que hace es continuar con el texto en la siguiente lnea.

<br> puede tambin usarse dentro de otros elementos como prrafos y elementos de una lista.
Etiqueta <p>
Para indicar un salto de lnea se utiliza la etiqueta <br>, y para un cambio de prrafo (dejar una
lnea en blanco en medio) se utiliza la etiqueta <p>.
La etiqueta <p> puede usarse tambin como etiqueta "cerrada" <p> y </p> para indicar los
atributos de un prrafo en concreto. Cuando se usa de esta manera tiene el parmetro align, que
aprendiste para la Alineacin de elementos individuales.

Identifica las diferencias entre ambas etiquetas efectuando las actividades siguientes.
Saltos de lnea
Observa cmo se insertan las etiquetas de saltos de lnea en la estructura bsica de la pgina
web y su resultado final con el navegador.

Saltos de prrafo
Observa cmo se insertan las etiquetas de saltos de lnea en la estructura bsica de la pgina
web y su resultado final con el navegador.

5. Etiquetas para lneas horizontales

Las lneas horizontales son excelentes para separar visualmente las secciones de una pgina
web; por ejemplo, antes de un encabezado o para separar el cuerpo del texto de una lnea de
elementos.
Para lo anterior, HTML proporciona la etiqueta <hr>, que crea una lnea horizontal en la pgina
web. Esta etiqueta no tiene par de cierre ni lleva texto asociado, siendo sus atributos:
Size, indica el grosor de la lnea horizontal en pxeles; el valor predeterminado es 2 y es el
mnimo grosor que puede tener la lnea.
Width, indica el ancho horizontal de la lnea y se puede especificar la medida exacta en
porcentaje del ancho de la pantalla (por ejemplo, 20% o 50%).
Align, permite la alineacin de la lnea horizontal; puede ser hacia la izquierda (align = left),
hacia la derecha (align = right) o hacia el centro (align = center). En forma predeterminada, las
lneas horizontales van centradas.
Identifica las diferencias entre ambas etiquetas efectuando la actividad siguiente.
Lneas horizontales
Observa cmo se insertan las etiquetas y atributos de las lneas horizontales en la estructura
bsica de la pgina web y su visualizacin con el navegador.

Etiquetas para formato de caracteres y prrafos

Los textos de las pginas web pueden tener formatos o estilos en su presentacin. Es posible
definir de una manera inmediata algunas de estas caractersticas, como las negritas, itlicas,
etc., para ello debes usar los siguientes pares de etiquetas:

Por ejemplo:

<b> </b>

Texto en negritas

<em> </em>

Texto enfatizado

<i> </i>

Texto en cursivas

<strong> </ strong >

Texto en tipo fuerte

<ul> </ul>

Subrayado

Es importante sealar que el tipo de letra y su tamao tambin puede editarse con el par de
etiquetas <font> </font> y sus correspondientes atributos:

Toma como valor un conjunto de nombres de tipos de letra, escritos entre comillas
y separados por comas.
Sintaxis: <font face=Arial, helvetica>Texto a definir</font>
face

Generalmente, el navegador busca los tipos de letra indicados uno a la vez (p. ej
Arial, helvetica). Si no encuentra el primero, busca el segundo, despus el
tercero y as sucesivamente hasta encontrar un tipo de letra que est instalado en
el sistema; y si no encuentra ninguno de los tipos de letra indicados, entonces usa
el predeterminado por el navegador (Times New Roman).

size

color

Determina el tamao de la letra del texto. Los valores que pueden utilizarse de
forma creciente van del 1 al 7.

Determina el color de las letras del texto. Puedes utilizar la tabla de colores vista
en las etiquetas Uso de los colores.

Es importante considerar que al escribir los textos (o prrafos) junto con sus atributos (tipo de
letra, tamao y color), es conveniente indicar los inicios de cada prrafo con la etiqueta
<p></p>.

Aplica tus conocimientos de esta etiqueta realizando la siguiente actividad.

Formato de caracteres
Observa cmo se insertan las etiquetas y atributos para el formato de caracteres en la estructura
bsica de la pgina web y su visualizacin con el navegador.

7. Listas ordenadas o numeradas

Adems de encabezados y prrafos, otro de los elementos html ms comunes son las listas, las
cuales te servirn para ordenar y agrupar los elementos de la informacin, incluso por orden
jerrquico (con vietas), para facilitar su lectura.
Las listas ordenadas o numeradas van encerradas entre las etiquetas:

Cada elemento de la lista se encierra entre las etiquetas.

Cuando el navegador despliega una lista ordenada, numera cada uno de los elementos en forma
consecutiva de manera que t no tienes que poner los nmeros a las listas que elabores. As que
podemos decir que las listas ordenadas son aquellas donde cada elemento est numerado.
Realiza la siguiente actividad para que veas como se colocan las etiquetas de lista ordenada
para el ttulo de 5 libros famosos y sus correspondientes autores.
Listas ordenadas (a)
Identifica las etiquetas <ol> </ol> y <li> </li> en la estructura bsica de la pgina web y
su visualizacin con el navegador.

Las etiquetas <ol> </ol> cuentan con varios atributos que puedes personalizar para la presentacin de tus listas
ordenadas y se especifican con el parmetro type:

I especifica que se usan nmeros romanos en mayscula para numerar los elementos de la
lista (esto es I, II, III, IV, etc.).
i especifica que se usan nmeros romanos en minscula para numerar los elementos de la
lista (esto es i, ii, iii, iv, etc.).
A especifica que se usan letras maysculas (esto es A, B, C, D, etc.).
a especifica que se usan letras minsculas (esto es a, b, c, d, etc.).
El tipo de numeracin se especifica en la etiqueta <ol> como sigue: <ol type = a>. Cuando
no especificamos el parmetro type dentro de la etiqueta <ol>, el tipo de numeracin
corresponde a los nmeros arbigos.
Lleva a cabo la siguiente actividad para aplicar este atributo.
Listas ordenadas (b)
Observa cmo se colocan las etiquetas de la lista ordenada con el atributo de los nmeros
romanos en maysculas y su visualizacin con el navegador.

Tambin podemos iniciar una lista ordenada partir de un nmero o letra, distintos a 1, I, i, A o a,
mediante el atributo start = numero, en donde el 3 corresponde a 3, III, iii, C y c,
respectivamente, dependiendo del nmero en que queramos empezar la lista.
Ejemplo: <ol type=a start=3>
Por lo que la lista con la sintaxis anterior, mostrar una lista con letras minsculas y el primer
elemento de lista ser la letra c.
8. Listas no numeradas

Las listas no numeradas van encerradas entre las etiquetas <ul> </ul> (del ingls Unordered
List que significa lista no ordenada o no numerada) y cada elemento de la lista se encierra entre
las etiquetas <li> </li>.
Las etiquetas <ul> </ul> cuentan con varios atributos que puedes personalizar para la
presentacin de tus listas no numeradas mediante el uso de vietas especficas y tambin se
establecen con el parmetro type; dichos atributos son los siguientes:
disc especifica el uso de vietas circulares con relleno de la lista (esto es ) para los
elementos de la lista.
circle especifica que el uso de vietas circulares vacas (sin relleno) para los elementos de la
lista (esto es ).
square especifica que se usan vietas cuadradas con relleno para los elementos de la lista
(esto es ).
El tipo de vieta a emplear se especifica en la etiqueta <ul> como sigue:
<ul type = disc>

Cuando no especificamos el parmetro type dentro de la etiqueta <ul>, el tipo de vieta

corresponde al crculo con relleno.
Listas no numeradas
Observa en el siguiente cdigo cmo se colocan las etiquetas de la lista no numerada con el
atributo de las vietas cuadradas y su visualizacin con el navegador.

Como habrs podido observar las listas ordenadas y no numeradas estn desplegados hacia la izquierda de la
pantalla, si quisiramos ubicarlos hacia el centro de la misma, necesitamos incorporar al diseo de nuestra pgina una
Tabla.

Incorporacin de tablas
Las tablas permiten distribuir adecuadamente texto, imgenes y contenidos en filas y columnas,
con o sin borde. La mayora de los principales navegadores cuentan con soporte para ellas.
Su sintaxis es:
<table border = 1>
<tr>
<td>
</td>
</tr>
</table>
Donde el atributo border = 1 indica el grosor del borde de la tabla, segn el valor entero 1
medido en pixeles.
Es importante sealar que una tabla est compuesta de filas (representadas por las etiquetas
<tr></tr>) y de columnas (representadas por las etiquetas <td></td>).
Para que te familiarices con el uso de tablas en el diseo de tus pginas web, elaborars algunas
de ellas muy sencillas. En estas tablas irs incorporando gradualmente sus propiedades en cada
actividad. Realiza cada una para que puedas llevar a cabo con xito la actividad de evaluacin.
Tabla con un rengln y dos columnas
Esta pgina web despliega una tabla formada por un rengln y dos columnas.

1. Captura el cdigo y slvalo como tabla.html. Despligalo con el navegador para

obtener la siguiente pantalla.

Centrar una tabla

Quieres centrar la tabla con respecto a la pantalla, para que se vea como en la
siguiente imagen?

Para ello incorpora el atributo align = center en la sintaxis como se muestra en el

cdigo.

1. Captura el cdigo anterior y slvalo como centrartabla.html. Verifica que funciona

al visualizarlo con el navegador.

Tabla con celdas en color

Elabora una tabla con dos renglones y cuatro columnas y que, adems, las celdas de
la tabla tengan un color diferente al del fondo de la pgina web.
Analiza en el cdigo la insercin de las etiquetas que permiten estas caractersticas.

1. Captura el cdigo como tablascolor.html y visualzalo con el navegador para

verificar su funcionalidad.
Insercin de imgenes
A quin no le gustara mostrar sus imgenes en Internet? Gran parte de la potencia del HTML se
basa en la posibilidad de insertar imgenes en los documentos. Nuestras pginas adquieren un
aspecto visual atractivo, y se convierten en una potente herramienta para transmitir y comunicar
ideas.
Aunque existen varios formatos de imgenes, los ms utilizados para el Web son:
.GIF (Graphics Interchange Format). Este formato se caracteriza por limitar la profundidad del
color a 256 colores y poseer un sistema de compresin rudimentario, que es efectivo nicamente
cuando los colores de la imagen son planos (sin existencia de mltiples transiciones de color).
Por tal motivo, es el formato ideal para iconos, diagramas y grficas.
.JPG (Joint Photographic Experts Group). Surge con la necesidad de crear un formato de
almacenamiento de imgenes con calidad similar a la de una fotografa y con un alto grado de
compresin, este formato soporta 16 millones de colores y es ideal para imgenes con multitud
de colores, como fotografas.

.PNG (Portable Networks Graphic). Es un formato grfico que est basado en un algoritmo de
compresin sin prdidas, y fue desarrollado para resolver las deficiencias del GIF, principalmente
en cuanto a profundidad de color. Una de las ventajas de PNG es, independientemente de la
profundidad de color que se use, la compresin permite archivos de muy bajo peso sin prdida
de calidad.

Para insertar una imagen en el documento se utiliza la etiqueta <img seguida del parmetro src, que especifica la
imagen a visualizar de la siguiente forma:

Ejemplo:
Si en el archivo html deseas insertar una imagen localizada en el subdirectorio imgenes, debes
escribir su ubicacin completa, y adems, alojar este subdirectorio en la misma ruta en la que se
localizan los archivos html.

Por lo anterior, crea un directorio especial para las imgenes que vas a utilizar en tus pginas
web: C:\paginasweb\imagenes. En la carpeta imgenes descarga el banco de imgenes que te
proporcionamos, da clic aqu.
Observa cmo opera esto en la prctica al realizar las siguientes actividades. Al terminar, realiza
la actividad de evaluacin.
INSERTAR UNA IMAGEN
1. Elabora una pgina web que llame a la imagen casa1.jpg, localizada en la carpeta imgenes.
Para ello, captura el siguiente cdigo e identifica la sintaxis para la insercin de imgenes
(marcada en azul).

IMAGEN CENTRADA
Los elementos (la imagen y el texto) de la insertarimagen.html estn alineados a la izquierda,
pero si quieres centrarlos con respecto a la pantalla, bastar con incorporar el par de etiquetas
<center></center> en la lnea de los mismos, como se indica en el cdigo.

Salva el cdigo como imagencentrada.html y visualzalo con el navegador, cuyo resultado final
ser:

IMAGEN ALINEADA A LA DERECHA

Deseas alinear los elementos referidos hacia la derecha de la pantalla? Bueno, pues esto
requiere un poco ms de trabajo en el cdigo, pero tu conocimiento sobre la insercin de tablas
te ayudar.

Basta definir una tabla con una columna y dos renglones, de modo que la primera celda alberge
a la imagen y la segunda al texto; para ocultar el borde de la tabla hay que asignarle al atributo
border el valor de cero (0) e incluir align = right. He aqu el cdigo.

DIMENSIONES DE LA IMAGEN
Deseas reducir las dimensiones de la imagen? Pues es muy fcil, la etiqueta <img src =
imgenes/casa1.jpg> cuenta con otros atributos importantes como son height (altura) y width
(ancho), a los que se les asigna una cantidad entera numrica expresada en pxeles; as como se
indica en el siguiente cdigo:

Aunque estos atributos son muy tiles, podrs observar que la imagen se distorsiona un poco en
cuanto a sus proporciones, es mejor trabajar las imgenes al tamao que las vamos a utilizar y
desde ah definir los atributos de height (altura) y width (ancho).
TEXTO E IMAGEN EN UNA TABLA
Con ayuda de las tablas puedes anexar texto a la izquierda o a la derecha de la imagen; como se
ha incorporado al elemento marycielo.jpg. Identifica esta sintaxis en el siguiente cdigo:

<html>
<head>
<title> Esta es mi p&aacute;gina Texto e imagen en una tabla</title>
</head>
<body bgcolor =navy>
<h3 align=center><b><font color=lime>Cuidemos a la Naturaleza</font></b></h3>
<table border =2 align=center cellpadding="10" >
<tr>
<td bgcolor=red><img src="imgenes/marycielo.jpg" width=240 height=300>
</td>
<td valign=top bgcolor=white><font color=2><b>Todos debemos cuidar y proteger a la
Naturaleza</b>
<center>porque dependemos y somos parte de ella.</center>
<br>
<center>Algunas medidas tiles para este fin son:</center>
<p>
<table border=1 align=center cellpadding=5 bordercolor=green>
<tr>
<td><b>1</b>
</td>
<td bgcolor=gold>
<b><center>No tirar basura en las calles.</center></b>
</td>
</tr>
<tr>
<td><b>2</b>
</td>
<td><b><center>Usar el auto lo menos posible. </center></b>
</td>
</tr>
<tr>
<td><b>3</b>
</td>
<td bgcolor=gold>
<b><center>Sembrar al menos un rbol. </center></b>
</td>
</tr>
<tr>
<td><b>4</b>
</td>
<td>
<b><center>No quemar cohetes.</center></b>
</td>
</tr>
<tr>
<td><b>5</b>
</td>
<td bgcolor=gold>
<b><center>No hacer fogatas. </center></b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

</html>
Observa lo siguiente:
1. El atributo valign = top en las etiquetas <td></td> de la primera tabla permite subir el
texto ubicado en la segunda celda (primer rengln, segunda columna); esta propiedad junto con
el atributo cellpadding = 10 de la misma tabla permiten una distribucin muy adecuada del
texto.
2. La segunda tabla que est anidada (dentro) de la primera tabla permite centrar los elementos
enlistados respecto a la celda.
Salva el cdigo como textoimagentabla.html y verifica su funcionamiento con el navegador,
como se indica.

INSERCIN DE UNA IMAGEN DE FONDO

Hasta ahora, hemos visto cmo poner un fondo de color a nuestras pginas web, pero tambin
es posible tener una imagen de fondo. Cmo hacemos esto? basta con agregar un parmetro a
la etiqueta <body>.
<body background="imgenes/fondo.jpg">
Con esta instruccin indicamos que el fondo de nuestra pgina sea la imagen fondo.jpg,
localizada en la carpeta imgenes.
Esta aplicacin la veremos en nuestros ejemplos de audio y video.

COLOCACIN DE VNCULOS

Los vnculos, llamados tambin enlaces, hipervnculos, links, etc., son conexiones lgicas desde
una pgina web a otro recurso. Los vnculos forman parte de la base de Internet, podemos crear
enlaces a millones de pginas que contienen amplia informacin de los temas de nuestro inters.
Los enlaces pueden ser a travs de un texto o un grfico al hacer clic sobre l, permitiendo al
usuario pasar a otro documento, ya sea en el mismo sitio o en otro.

Se requieren dos cosas para establecer un vnculo en HTML:

1. El nombre, (o el URL) del archivo con el que se quiere establecer el vnculo.
2. El texto (o imagen) que servir como punto de activacin desde el cual se establecer el
vnculo con la pgina web deseada.
Cuando se selecciona el texto o la imagen que apunta a un vnculo, el navegador usa el nombre
(o el URL o la imagen) para saltar hacia la pgina web que se le indica.
Para crear un vnculo se emplean el par de etiquetas siguientes:

Su sintaxis es:
<a href = Nombre de la pgina web hacia la que se desea acceder>Ir a la pgina web</a>

Para ilustrar el uso de la etiqueta de vnculo a partir de un texto, realiza las

siguientes actividades.
Si tienes dudas sobre este tema ingresa al foro de la unidad.

Vnculos
1. Consulta cada paso para insertar un vnculo a partir de un texto.

2. Captura el cdigo para crear los vnculos descritos.

Tambin puedes emplear los vnculos con imgenes como punto de partida hacia otras pginas o
sitios en Internet. Observa cmo se coloca este link en la actividad siguiente.

VNCULOS DE UNA IMAGEN

Puedes emplear imgenes como punto de activacin en tus vnculos hacia otras pginas o sitios
en Internet. En la siguiente ilustracin se muestra como la imagen contiene un vnculo,
nuevamente a la pagina28.html:

1. Identifica la sintaxis (marcado en color verde) en el siguiente cdigo que permite efectuar esta
accin.

Observa los dos nuevos atributos incluidos para las imgenes en la etiqueta del vnculo:
1. title: permite desplegar un pequeo rtulo informativo con fondo amarillo cuando el
puntero del ratn pasa por la imagen.
2. border = "0": evita que la imagen est rodeada de un cuadro azul, indicando el vnculo.
2. Captura el cdigo y slvalo como vinculoimagen.html. Verifica su funcionamiento con el
navegador.

ANCLAS

Cuando se desarrollan pginas web con informacin muy extensa (incluso dividida en secciones),
que no se alcanza a visualizar en la primera pantalla del navegador, y estamos interesados en ir
(acceder) a puntos especficos de la misma, podemos lograrlo incorporando al cdigo HTML la
etiqueta ancla con sus atributos correspondientes.
Las anclas son vnculos que conducen a un recurso que se encuentra en la misma pgina web o
a secciones especficas de documentos remotos. stas son marcas invisibles cuando
visualizamos la pgina en el navegador.
Se pueden anclar textos e imgenes, solo es necesario contener dentro de la etiqueta del ancla
el objeto que se desea anclar.

Para crear anclas usamos el par de etiquetas: <a>

</a>.

El proceso de crear anclas en un documento HTML consta de dos pasos:

1. Hay que insertar el ancla en el lugar de la pgina donde se quiere acceder:

2. Crear un enlace que apunte al ancla:

INCORPORACIN DE AUDIO Y VIDEO

Actualmente es posible escuchar sonidos (o msica) y video desde el propio navegador; el nico
problema es que los archivos suelen ser grandes. Por esta razn, poca gente los incluye en sus
pginas web; no obstante hay dos formas de hacer esto:
1. En forma de archivos que se puedan descargar directamente, o bien

2. Usando un formato que se pueda reproducir desde la pgina web.

La segunda forma es ms compleja y no necesariamente compatible con todos los navegadores,

formatos, reproductores, etc.
Por lo anterior, para que los visitantes a un sitio web que contiene video puedan reproducirlo con
el navegador, necesitan tener instalado en su computadora un plug-in compatible con el formato
de dicho video (o meloda). Existen numerosos formatos de reproduccin de video que no son
compatibles entre s y tambin varios programas que no estn instalados por igual en todos los
navegadores.
Por otra parte, determinados archivos de contenido multimedia se pueden reproducir
directamente en el navegador, el cual se transforma en una plataforma de difusin multimedia.
Formatos de audio
Como se muestra en la siguiente tabla, los formatos de reproduccin de audio ms comunes que
podemos utilizar en la Web son:

FORMATOS DE VIDEO
En lo que respecta al video, hay distintos formatos de codificacin de los datos (cdecs) que
producen y comercializan muchas empresas en el mercado mundial de software.
A continuacin te presentamos una lista de los reproductores de audio y video ms conocidos,
cada uno de los cuales utiliza un formato propio e incompatible con los dems.
1. Microsoft propone Windows Media Player como reproductor. Su formato propio WMV es
naturalmente compatible con Windows e Internet Explorer. Sin embargo no funcionar si los
archivos estn protegidos contra lectura, si se utiliza el navegador Firefox, o MacOSX o Linux.
Este reproductor viene ya incluido en el sistema operativo Windows y puede actualizarse con
cierta regularidad en el sitio siguiente:
http://windows.microsoft.com/en-US/windows/download-windows-media-player
2. Realplayer propone RealMedia cuyo formato tiene necesariamente una calidad de
reproduccin aceptable, se usa mucho y es muy popular. Puede descargarse gratuitamente de la
siguiente direccin:
http://www.real.com/
3. QuickTime de Apple funciona muy bien en Windows, Linux y, obviamente, MacOSX. Ofrece
una calidad de imagen excelente; desafortunadamente no existen muchas soluciones gratuitas
para crear archivos de este tipo. La aplicacin restringida puede bajarse gratuitamente del
siguiente sitio:
http://www.apple.com
4. iTunes adems de ser un reproductor de audio tambin reproduce videos, puede ser usado y
descargado para usuarios de PC. En el programa se pueden trabajar formatos de Quick Time
como mpeg.
http://www.apple.com/itunes/download/
Una vez que ya conoces los formatos para audio y video, te preguntars qu etiquetas permiten
su insercin?
Antes que aprendas cmo incorporar estas etiquetas a tus pginas web:
1. Crea las carpetas audio y video en la carpeta pginas web, localizada en tu computadora
personal.
2. En estas carpetas almacenars los archivos de audio (bella.mp3; cafetacuba.mp3) y video
(monito.swf), que utilizars para elaborar las pginas web de este tema. Da clic aqu para
descargarlos. Tu directorio quedar as:
Si tienes dudas o quieres compartir tus conocimientos sobre este tema ingresa al foro de la
unidad.

Listo, ahora

Incorporacin de audio
Para insertar un vnculo con sonido externo en una pgina web, es necesario tener:
1. El archivo con un formato reconocido por el navegador y su correspondiente plug in.
2. La etiqueta <object> (permite agregar un sonido de fondo incrustado, bajo la forma de
ejecucin de aplicaciones externas) y los parmetros data (especifica la ubicacin de los datos) y
type (designa el tipo de contenido del recurso definido en el atributo "data").
Sintaxis:
<object data="nombre
height="0">...</object>

del

sonido

meloda.extensin"

type="audio/mpeg"

width="0"

Audio
En el siguiente cdigo de la pgina audio.html identifica la sintaxis (marcada en color verde)
para insertar audio.
Cdigo
<html>
<head>
<title> Esta es mi p&aacute;gina Audio </title>
</head>
<body background="imagenes/cafetacuva_bg.jpg">
<object data="audio/eo_cafetacuba.mp3" type="audio/mpeg" width="0" height="0">
</object>
<center>
<img src ="imagenes/cafetacuva1.jpg" height =160 width =410>
</center>
<p>
<center>
<strong><font color="yellow">CAF TACUBA </font></strong>
</center>
<p>
<hr width=500 color=white>
<p>
<center>
<img src = "imagenes/cafetacuva2.jpg" height = 320 width =240>
</center>
<p>
<center>
<font color="yellow">Sizu Yantra</font>

</center>
<hr width=500 color=white>
<p>
<table border=1 align=center>
<tr>
<td>
<img src="imagenes/cafetacuva3.jpg" width="200" height="200">
</td>
<td>
<img src="imagenes/cafetacuva4.jpg" width="200" height="200">
</td>
</tr>
</table>
<p>
<center>
<b><font color="yellow">DISCOGRAFA CAF TACUBA </font></b>
<p>
</center>
<hr width=500 color=white>
</body>
</html>
Observa que:
La etiqueta <body background = " cafetacuva_bg.jpg"> permite que el fondo de la pgina sea
una imagen de fondo, en este caso cafetacuva_bg.jpg.
La etiqueta <object data=" nombre de sonido o de la meloda.extensin "type="audio/mpeg"
width="0" height="0"></object> permite reproducir la meloda eo_cafetacuba en formato mp3.
Nota: Recuerda que, de la misma manera como se almacenan las imgenes en una carpeta
independiente, los archivos de audio siguen esta formalidad. Por ello, el nombre de la carpeta en
donde se localizan debe especificarse en la etiqueta <object> y el parmetro data.
2. Salva el cdigo como audio.html y reprodcelo.
INCORPORACIN DE VIDEO
A modo de referencia, es importante que sepas que un DVD almacena entre 4GB y 9GB de datos,
por tanto sera complicado tratar de reproducir una pelcula completa en calidad DVD en alguna
pgina web.
Lo anterior no es un obstculo, sobre todo para algunos diarios de circulacin nacional e
internacional en Internet, los cuales acostumbran incorporar video para informar a sus visitantes,
aunque sean de corta duracin. Adems, es bien cierto que cuando una computadora personal
cuenta con servicio de banda ancha, el visitante puede ver programas de televisin o
documentales de larga duracin.
Por otra parte, no obstante que la mayor parte de los formatos de video estn optimizados para
la Web, an as sigue representando varios megabytes por un minuto de video de buena calidad.
Por ello, debemos ser prudentes en cuanto a su inclusin en nuestras pginas.
Cabe mencionar que los formatos de video estndar son muy extensos, ocupan mucha memoria
y muchas veces hay que pagar las licencias de uso.
Es posible ejecutar o incrustar vdeos dentro de la pgina web utilizando la siguiente etiqueta:

<embed src="colon.avi" height=300 width=400 autostart = true loop =false>

Donde los atributos:

src: seala la direccin en la que se encuentra y el nombre del archivo de video.
height: indica la altura del cuadro del video y width su ancho.
autostart: seala que el video se reproduzca en cuanto se cargue la pgina.
loop: indica que el video se detenga (false) en cuanto termine de reproducirse o que continu
una y otra vez (true)
Video
A continuacin te presentamos el cdigo HTML que genera una corta animacin Flash, la cual
muestra la creacin de un rtulo hecha por un monito, cuyo archivo (monito2.swf) tan slo
ocupa 46.3 kbs.
<html>
<head>
<title> Esta es mi p&aacute;gina Video </title>
</head>
<body bgcolor=#000080 text=#FFFF00>
<center>
Esta es una animacin llamada:monito
<p>
<embed src= "video/monito3.swf" width="400" height="300">
</center>
</body>
</html>
Nota: Los archivos de video siguen la misma formalidad de los archivos de audio. Por tanto, el
nombre de la carpeta en donde se localizan debe especificarse en la etiqueta <object> y el
parmetro data.
1. Captura el cdigo, slvalo como video.html y reprodcelo. Da clic aqu para visualizar la
pgina web como lo hara el navegador.
Ahora que ya cuentas con todos los elementos bsicos del lenguaje HTML, ests listo para
desarrollar tu propia Web, que puedes publicar. Aprende este ltimo contenido de la unidad.
SUERTE!!!
PUBLICACIN DE LA PGINA WEB
Con el propsito de que tus pginas web puedan ser vistas en Internet, debers cargarlas en un
servidor. El Protocolo de Transferencias de Archivos o FTP (File Transfer Protocol), como su
nombre lo indica, permite realizar esta accin.
En el mercado de servicios en lnea (on line) existen muchos proveedores de alojamiento web en
Internet, algunos de los cuales son privados y cobran una cierta renta al mes o al ao, otros son
gratuitos y permiten alojamientos de pginas web que no sobrepasen los 10 MegaBytes.
Es precisamente tu proveedor de alojamiento web, quien debe proporcionarte los datos de
acceso al servidor FTP; l tambin debe proporcionarte un identificador (login) y una contrasea
(password), ya que sin ellos no se podr instalar nada en el servidor. Adems de tener un

servidor en donde alojar tu informacin, necesitas un dominio (URL)o direccin en Internet; ste
tambin debe comprarse, aunque tambin existen algunos sitios que te permiten utilizar, en
parte, su dominio; pero si deseas un nombre especial, debes apartarlo en el NIC Mxico,
encargado de regir los dominios en Internet.

Qu se debe cargar en el servidor?

Todos los materiales que se utilicen en tu sitio Web tales como:
Las pginas web (archivos de extensin .html)
Las imgenes.
Los sonidos.
Los videos, etc.
Es muy importante que sepas que para que la informacin se vea en la Web, es necesario que se
aloje en la carpeta llamada htdocs o en la que tu proveedor de acceso a Internet te indique; ya
que si no est en el directorio adecuado, no podrs verla.
De esta manera podrs integrar toda la informacin que requieras o desees. Ahora, para realizar
pginas web que incorporen varios elementos (video, audio, animaciones), necesitamos varias
tecnologas que operan entre s.
Una de ellas es el nuevo estndar HTML5, con el que es posible hoy en da agregar nuevas
funcionalidades para que se optimice la experiencia del usuario.
Lo ms importante es que engloba todas las tecnologas que utilizamos para la web en una sola,
de tal manera que la nueva especificacin HTML5 incluye soporte para video y audio sin
necesidad de descargar algn software adicional o plugin para el navegador, de tal manera que
el video y sonido se reproducen automticamente en HTML5. Es por ello, que hoy en da se
considera como el futuro de la Web.
Actualmente todos los navegadores como Google Chrome, Internet Explorer, Firefox, Safari,
Opera, tanto para PC como para dispositivos mviles soportan ya HTML5.
Para saber que tan compatible es t navegador te recomiendo ingreses al sitio
http://html5test.com/, dando clic sobre l. Se trata de un sitio que ofrece una prueba online que

te informa sobre el grado de compatibilidad que hay entre un navegador y el nuevo estndar
HTML5.
Slo tenemos que cargar la direccin del sitio en nuestro navegador y ste nos mostrar que
tanto soporte ofrece dicho navegador para HTML5. El informe evala 160 aspectos entre los que
figuran: video, formularios web, audio, etc.
Las principales compaas de tecnologa estn apoyando a HTML5, como Google, Microsoft o
Apple.
Si deseas saber ms al respecto, revisa los sitios que se presentan al dar clic sobre el logo que
aparece a continuacin.