Introduccin a HTML

A lo largo de este tema vamos a conocer los conceptos bsicos sobre HTML, y cmo se utiliza para
crear pginas web.
Qu es HTML
El HTML (Hyper Text Markup Language) 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 estensiones 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.
En octubre de 2014. Se public el estndar HTML 5
Es la quinta revisin importante del lenguaje bsico de la World Wide Web, HTML. HTML5
especifica dos variantes de sintaxis para HTML
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.
Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia
Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog
Proffesional, 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.cetcrecer.edu.co</font></p>
Este cdigo dara como resultado el siguiente texto:
Bienvenidos a www.cetcrecer.edu.co
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.
Body
A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina.
El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un
color representado en hexadecimal o por un nombre predefinido.
Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se corresponde
cada uno de ellos, mira el siguiente anexo.
Los colores en HTML se representan mediante un nmero hexadecimal.

Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores
del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F.

Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una
almohadilla, como por ejemplo #FFFFFF
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>
<body bgcolor="#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 men Archivo, opcin Guardar.
Pulsando dos veces sobre el icono del archivo
miprimpag.html, 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>.
Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles
puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen
superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos
marginwidth (anchura del margen) y marginheight (altura del margen).

Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.
Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de
20 pxeles, tendremos que escribir:
...
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
...
</body>
</html>
Taller evaluativa de Introduccin a HTML
Solo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta.
1. Un documento de hipertexto solo se compone de texto.
a) Verdadero b) Falso
2. Las pginas web escritas en HTML tienen que tener la extensin html o htm.
a) Verdadero b) Falso

3. El cdigo de las pginas estar comprendido entre las etiquetas <head> y </head>.
a) Verdadero b) Falso

4. Los navegadores se encargan de interpretar el cdigo HTML de los documentos.

a) Verdadero b) Falso

5. El ttulo de una pgina se establece dentro de la cabecera.

a) Verdadero b) Falso

6. El nuevo comit encargado de establecer los estndares del HTML es el W3C.

a) Verdadero b) Falso

7. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder
insertar imgenes.
a) Verdadero b) Falso

8. El margen que hay entre el borde de la ventana y el contenido de la pgina no puede

modificarse.
a) Verdadero b) Falso

9. Siempre que escribimos una etiqueta debemos escribir su correspondiente etiqueta de

cierre.
a) Verdadero b) Falso
10. Puede establecerse una imagen de fondo a travs del atributo background.
a) Verdadero b) Falso

11. Si un navegador no reconoce una etiqueta...

a) la cambia por otra b) la ignora c) muestra una imagen en su lugar

12. Las etiquetas <body> y </body> van...

a) Justo encima de la cabecera. b) Dentro de la cabecera. c) Justo debajo de la
cabecera.

13. Para realizar las extensiones de los navegadores...

a) se aaden nuevos atributos y etiquetas b) se crean nuevos editores visuales
c) se utilizan editores de texto

14. Es posible definir el color de la fuente del documento mediante...

a) la etiqueta <html>. b) el atributo bgcolor. c) el atributo text.

15. Existen dos tipos de etiquetas:

a) La de comienzo de elemento y la de fin de pgina b) La de comienzo de elemento y la de
atributo c) La de comienzo de elemento y la de fin o cierre de elemento

16. Los atributos leftmargin y topmargin ...

a) no funcionan en Internet Explorer. b) no funcionan en Netscape.
c) funcionan en todos los navegadores.

17. El cdigo de todas las pginas:

a) Puede ser interpretado completamente por todos los navegadores. b) No puede ser interpretado
completamente por todos los navegadores. c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores.

18. El color de fondo de una pgina...

a) se especifica en la etiqueta <body>. b) puede establecerse a travs del atributo bgcolor.
c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son
falsas.

19. Los editores visuales

a) Pueden generar cdigo basura. b) Permiten crear pginas web sin la necesidad de escribir
ni una sola lnea de cdigo HTML. c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores
20. Los colores se representan en...
a) binario. b) decimal. c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas