CENTRO INCA

Anlisis y Programacin de Computadores Arquitectura Web

Ing. Dairo Rodriguez Blanco
Qu es HTML
El HTML (Hyper Text MarkupLanguage) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es
decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin
de cada elemento del documento.
Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede
considerarse como un documento multimedia.
Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que
permiten visualizar las pginas web).
Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web
resultantes del cdigo interpretado.

Versiones de HTML
En noviembre de 1995 se aprob el estndar HTML 2.0. para la creacin de pginas web. Se cre con objetivos divulgativos,
orientado a la actividad acadmica, en el que el contenido de las pginas era ms importante que el diseo.
Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el diseo de las pginas y aadir contenido
multimedia, por lo que Netscape (cuyos navegadores eran los ms utilizados por aquellos aos) comenz a incluir nuevas etiquetas
que no existan en el estndar.
El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el borrador de una nueva versin de
HTML, el borrador de HTML 3.0.
Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la
creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compaas se unieron para
formar un nuevo comit encargado de establecer los estndares del HTML. Este comit pas a llamarse W3C.
En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras proporcionadas por los navegadores
Internet Explorer y Netscape Navigator, que ya haban realizado extensiones sobre el estndar HTML 2.0.
En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los
scripts.
En septiembre de 2001 se aprob el estndar HTML 4.01.

Los navegadores. Compatibilidad

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita
por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados
navegadores distintos o incluso versiones distintas del mismo navegador.
Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los
navegadores para que puedan ser compatibles con esta ltima versin.

Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que
realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los
borradores.
Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de
etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina.

Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya existentes, o se aaden nuevas
etiquetas.
Como resultado a estas extensiones, habrn pginas cuyo cdigo podr ser interpretado completamente por todos los navegadores ,
mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima
versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms
actualizados.

En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente
pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador
diferente al anterior, por lo que nunca sera visualizada en su totalidad por ningn
navegador.

Uno de los retos de los diseadores de pginas web es hacer las pginas ms
atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos
problemas de compatibilidades para que el mayor nmero de internautas vean sus
pginas tal como las ha diseado.

Editores
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten
crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y
generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se
facilita la creacin de las pginas, y el uso de mens permite ganar rapidez.

Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones
puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de
nuestra pginas.
 CENTRO INCA
Anlisis y Programacin de Computadores Arquitectura Web
Ing. Dairo Rodriguez Blanco
Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage,
Adobe Pagemill, NetObjectsFusion, CutePage, HotDogProffesional, Netscape Composer y Arachnophilia, de los cuales algunos
tienen la ventaja de ser gratuitos.

Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo
HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando
fuera necesario.
Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que
proporciona Windows.
A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un editor de textos
muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML.

Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que
componen un documento HTML. Existen dos tipos de etiquetas, la de
comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo est delimitada por los caracteres < y >. Est
compuesta por el identificador o nombre de la etiqueta, y puede contener
una serie de atributos opcionales que permiten aadir ciertas
propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...>
Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida
y pueden tomar cualquier valor propio del usuario, o valores HTML
predefinidos.
La etiqueta de final est delimitada por los caracteres </ y >. Est
compuesta por el identificador o nombre de la etiqueta, y no contiene
atributos. Su sintaxis es: </identificador>
Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a
excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar
etiquetas entre otras etiquetas de comienzo y de cierre.
A continuacin tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:
<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a
www.aulaclic.com</font></p>

Este cdigo dara como resultado el siguiente texto:

Bienvenidos a www.aulaclic.com
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la
etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la<font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la
etiqueta etiqueta <font..>.
Para que te vayas haciendo una idea de cmo crear una pgina html a travs del
Bloc de notas, vamos a crear una pgina web sencilla, con una lnea de texto.
Mi primera pgina
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes
dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de notas.
Seguidamente introduce, en el documento en blanco, el texto siguiente:
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<bodybgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>
Guarda el documento con la extensin html, con el
nombre miprimpag.htm. Puedes guardarlo a travs
del menArchivo, opcin Guardar.
Pulsando dos veces sobre el icono del
archivo miprimpag.htm, ste debera abrirse
automticamente en el navegador que tengas
instalado en tu ordenador.
El navegador deber mostrar una pgina como la de
la derecha.
Como puedes ver, la pgina resultante es una
pgina que solamente tiene una lnea de texto.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA. Este ttulo ha sido
establecido por la lnea <title>MI PRIMERA PAGINA</title>.
El color de fondo de la pgina ha sido establecido por la lnea <body bgcolor="#FFCC99">.
El texto Hola, estoy haciendo pruebas. se ha insertado a travs de lnea <font color="#CC3300" size="5">Hola, estoy haciendo
pruebas.</font>.
 CENTRO INCA
Anlisis y Programacin de Computadores Arquitectura Web
Ing. Dairo Rodriguez Blanco
Disear una pgina web con la siguiente informacin:
<html>
<head>
<title>
INSTRAW en la red
</title>
</head>
<body bgcolor=navy text=white>
<h1 align=center>
<font color=yellow> Instituto Internacional de Investigaciones y Capacitacin para la Promocin de la Mujer<br>
- INSTRAW -
</font>
</h1>
<hr>
<p align=center>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un mejor servicio y una va directa alternativa de
comunicacin e informacin de apoyo para la <i>potenciacin de la mujer</i>.

El Instituto Internacional de Investigaciones y Capacitacin de las Naciones Unidas para la promocin de la

Mujer (UN- INSTRAW) es un organismo de Naciones Unidas dedicado a la investigacin, capacitacin y gestin del
conocimiento para alcanzar la igualdad de gnero y el empoderamiento de las mujeres, y fue creado por el Consejo
Econmico y Social (ECOSOC) de las Naciones Unidas, tras la primera Conferencia Mundial de Mujeres de Mxico de
1975. En colaboracin con los gobiernos, la sociedad civil y el sistema de las Naciones Unidas, el INSTRAW lidera
actuaciones innovadoras y estratgicas que contribuyen a mejorar la vida de las mujeres. Trabaja sobre la base de un
proceso continuo de anlisis, aprendizaje y accin para que los resultados de la investigacin reviertan en el diseo de
los programas de formacin, en la construccin de capacidad y en la formulacin de las polticas.

Las principales reas de actuacin vienen siendo Mujeres, Paz y Seguridad, Mujeres migrantes, Desarrollo y Remesas
y Participacin poltica de las mujeres, particularmente a nivel local. El marco estratgico 2008-2011 consolida los
programas de investigacin y capacitacin desarrollados en el periodo anterior y que han obtenido creciente
reconocimiento y visibilidad.
<hr>
<h4>
Cmo contactarnos
</h4>
<p align=right>
<font color=lime size=-1>
Csar Nicols Penson 102-A<br>
Santo Domingo, Repblica Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e: instraw.hq.sd@codetel.net.do
</font>
</body>
</html>

Realizar los siguientes cambios al aspecto de la pgina

Separar en mnimo 3 prrafos el contenido de la pgina
Cambiar la alineacin del documento a partir del segundo prrafo
Insertar una lnea horizontal ms en el documento
Cambiar el color al texto y al fondo de la pgina

Tomando como base la siguiente informacin, disear una pgina web sencilla y presentarla, se debe realizar
todos los cambios que Ud. Considere necesarios para adaptarla a su necesidad, se debe cambiar el tema de la
pgina y agregarle ms informacin en cuanto a prrafos acordes al tema escogido (tema libre).
 CENTRO INCA
Anlisis y Programacin de Computadores Arquitectura Web
Ing. Dairo Rodriguez Blanco

Estudiante:________________________________________________ cdigo:__________

Fecha:____________________________

1. Un documento de hipertexto solo se compone 11. Las pginas web escritas en HTML tienen
de texto. que tener la extensin html o htm.
a) Verdadero a) Verdadero
b) Falso b) Falso

2. Los navegadores se encargan de interpretar 12. El cdigo de las pginas estar comprendido
el cdigo HTML de los documentos. entre las etiquetas <head> y </head>.
a) Verdadero a) Verdadero
b) Falso b) Falso

3. El nuevo comit encargado de establecer los 13. El ttulo de una pgina se establece dentro
estndares del HTML es el W3C. de la cabecera.
a) Verdadero a) Verdadero
b) Falso b) Falso

4. Los navegadores tienen que ser compatibles 14. El margen que hay entre el borde de la
con la ltima versin HTML para poder insertar ventana y el contenido de la pgina no puede
imgenes. modificarse.
a) Verdadero a) Verdadero
b) Falso b) Falso

5. Siempre que escribimos una etiqueta 15.Cul de estos no es un editor de pginas

debemos escribir su correspondiente etiqueta de web:
cierre. a)Microsoft Frontpage
a) Verdadero b) Adobe Acrobat Reader
b) Falso c) NetObjects Fusion
d) CutePage
6. Si un navegador no reconoce una etiqueta... e) HotDogProffesional
a) la cambia por otra
b) la ignora 16. Las etiquetas <body> y </body> van...
c) muestra una imagen en su lugar a) Justo encima de la cabecera.
b) Dentro de la cabecera.
7. Para realizar las extensiones de los c) Justo debajo de la cabecera.
navegadores ...
a) se aaden nuevos atributos y etiquetas
17. Es posible definir el color de la fuente del
b) se crean nuevos editores visuales
documento mediante...
c) se utilizan editores de texto
a) la etiqueta <html>.
8. Existen dos tipos de etiquetas: b) el atributo bgcolor.
a) La de comienzo de elemento y la de fin de pgina c) el atributo text.
b) La de comienzo de elemento y la de atributo
c) La de comienzo de elemento y la de fin o cierre de 18. Varias compaas se unieron para formar un
elemento nuevo comit encargado de establecer los
estndares del HTML, este comit es:
9. El cdigo de todas las pginas: a) W3CD
a) Puede ser interpretado completamente por todos b) W3HTML
los navegadores. c) W3C
b) No puede ser interpretado completamente por d) W3HTMLC
todos los navegadores.
c) Cualquiera de las dos primeras opciones. 19. El color de fondo de una pgina...
d) Ninguna de las opciones anteriores. a) se especifica en la etiqueta <body>.
b) puede establecerse a travs del atributo bgcolor.
10. Los editores visuales c) las dos afirmaciones anteriores son verdaderas.
a) Pueden generar cdigo basura. d) las tres afirmaciones anteriores son falsas.
b) Permiten crear pginas web sin la necesidad de
escribir ni una sola lnea de cdigo HTML. 20. Los colores se representan en...
c) Cualquiera de las dos primeras opciones. a) binario.
d) Ninguna de las opciones anteriores. b) decimal.
c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas.