Liceo Real de Cid

Prof. Selvin de Paz

Prologo
HTML es un lenguaje que utilizamos para crear pginas web, este es un mundo
completamente nuevo y muy complejo, ya que en nuestros das todo lo que realizamos en internet
est compuesto por este increble cdigo abierto, aunque no solo trabaja el HTML hay una variedad
de cdigos que complementan al HTML para as poder expresar al usuario de una forma visual.
A travs de este documento aprenderemos a conocer todos sus conceptos ms bsicos que
necesitamos para la creacin de una pgina web. Pero solo estaremos enfocados al conocimiento
de editores de cdigo de HTML, aunque hay una gran variedad de programas que nos permiten la
creacin de un sitio web. Sin embargo HTML en la actualidad ha quedado obsoleto ya que el cdigo
creaba pginas web de texto sencillo este ha necesitado de su mejor aliado las HOJAS DE
ESTILOS (CSS) cuan la cual ha mejorado muchsimo la apariencia de una pgina sencilla. El mundo
se actualiza diariamente y el cdigo HTML tambin, en la actualidad se usa el HTML5 y CCS3 una
combinacin fascinante que nos permite hacer pginas que interactan con el usuario, para que el
navegar en una pgina no sea solo lectura si no una forma ms entretenida que capte la atencin
de usuario.
Sin ms que hablar adentraremos a un mundo de diferente, esperando que todo lo visto en
las siguientes notas puedan despertar el inters de seguir conociendo ms a fondo este tipo de
programacin, solo te pido que lo poco que veamos utilzalo para mejorar tu vida, adquiere ms
conocimiento y no te quedes con lo bsico por quin sabe si algn da tus ganancias dependan de
esta codificacin.

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

ndice
INTRODUCCIN A HTML

EL CONCEPTO DE LA WEB

LOS ORGENES DE LA WEB

W3C Y SU IMPORTANCIA

LENGUAJES DE ETIQUETAS

10

OTROS LENGUAJES Y TECNOLOGAS RELACIONADOS CON EL DESARROLLO WEB

14

NAVEGADORES

19

EDITORES DE HTML

25

ELEMENTOS DEL HTML

40

SINTAXIS DEL HTML

40

ESTRUCTURA DEL HTML

41

DECLARACIN DE TIPO DE DOCUMENTO

42

MARCADO DE HTML

43

ETIQUETAS

43

CDIGOS DE CARACTERES ESPECIALES

55

ETIQUETA DE ESTILO

58

ENCABEZADOS

61

ATRIBUTOS

62

PRRAFOS

63

CONTENEDORES

63

LISTAS

64

TABLAS

66

HIPERVINCULOS

69

IMGENES

70

CODIFICACIN DE COLORES

75

FORMULARIOS

79

INTRODUCCIN A LOS METADATOS

85

CREACIN DE MARCOS

87

HOJAS DE ESTILOS (CSS)

91

SINTAXIS CSS

95

COLORES CSS

105

CDIGO RGB (ROJO, VERDE, AZUL) EN NOTACIN HEXADECIMAL

106

CDIGO RGB (ROJO, VERDE, AZUL) EN NOTACIN DECIMAL

106

CAPAS

106

PROPIEDADES DE CSS

110

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Introduccin a HTML
HTML (HyperText Mark-Up Language) es lo que se conoce como "lenguaje de marcado", cuya
funcin es preparar documentos escritos aplicando etiquetas de formato. Las etiquetas indican
cmo se presenta el documento y cmo se vincula a otros documentos.
HTML se usa tambin para la lectura de documentos en Internet desde diferentes equipos
gracias al protocolo HTTP, que permite a los usuarios acceder, de forma remota, a documentos
almacenados en una direccin especfica de la red, denominada direccin URL.
La World Wide Web (WWW), o simplemente la Web, es la red mundial formada por todos los
documentos (llamados "pginas Web") conectados entre s por hipervnculos.
A menudo, las pginas web se organizan alrededor de una pgina principal que acta como eje
central para buscar otras pginas con hipervnculos. Este grupo de pginas Web unidas por
hipervnculos y centradas alrededor de una pgina principal se llama sitio Web.
La Web es un amplio archivo dinmico compuesto de una gran variedad de sitios Web y que
permite el acceso a pginas Web que contienen texto formateado, imgenes, sonidos, videos,
etc.

El concepto de la Web
La Web est compuesta por pginas Web almacenadas en servidores Web, equipos que estn
constantemente conectados a Internet y que proveen las pginas que los usuarios solicitan. Cada
pgina Web y, en general, cualquier fuente en lnea (como imgenes, videos, msica y
animaciones) se asocia con una direccin nica llamada URL.
El elemento clave para navegar a travs de pginas Web es el navegador, un programa que enva
solicitudes a los servidores Web, procesa los datos resultantes y muestra la informacin como
se requiere, en base a las instrucciones de la pgina HTML.
Los navegadores ms usados en Internet son:

Mozilla Firefox,
Microsoft Internet Explorer,
Opera,
Safari.

COMPUTACIN

Liceo Real de Cid

Los orgenes de la Web

Prof. Selvin de Paz

Internet no solo ha marcado uno de los ms importantes avances tecnolgicos del siglo XX, sino que
tambin ha acompaado un cambio cultural de trascendencia que, en pleno siglo XXI, se mantiene en
constante evolucin. Pero toda historia tiene un comienzo, e Internet tambin lo tuvo, mucho antes de ser
un fenmeno masivo. La historia cuenta que el antecesor de Internet fue el proyecto conocido como
ARPANET, una red descentralizada que algunos organismos estadounidenses utilizaron a partir de la
dcada del sesenta. Sin embargo, el gran cambio se producira entre finales de los ochenta y principios de
los noventa, con la llegada de lo que se conoce como World Wide Web, es decir WWW, el sistema que se
encarga de permitir la distribucin de informacin mediante hipertexto.
De la mano de este cambio, comienza a popularizarse Internet en la poblacin. Los usuarios ahora podan
acceder a contenidos de la gran red, tan solo con disponer de una conexin mediante un mdem y un
navegador con la capacidad de interpretar contenidos de hipertexto. Esta etapa de Internet, que
comprende aproximadamente desde principios de los noventa hasta el ao 2003, es considerada como
Web 1.0.
El concepto de este primer paradigma de la Web responde a la idea de una web esttica o de una sola
va, donde el usuario es solo un espectador que recibe o lee contenidos, publicados por el Web master
o dueo del sitio. Este paradigma se modificara de manera sustancial con la llegada de la denominada
Web 2.0

Web 2.0
Los cambios en la Web no solo responden a temas tecnolgicos, sino que estos van de la mano con la
evolucin de los hbitos de los usuarios, las tendencias en los modos de navegacin, las necesidades del
mercado y hasta con aspectos culturales que tambin influyen en este conjunto.
La Web 2.0 representa principalmente un cambio cultural en Internet. Los usuarios, cansados de un rol
pasivo, comienzan a buscar alternativas de participacin. Nace una web social, donde los blogs, las
redes sociales y las aplicaciones online son las estrellas.
Esto ocurre a partir del ao 2004, con la aparicin de tcnicas y tecnologas como AJAX y la necesidad
de los usuarios de expresarse de una manera mucho ms fluida en la gran red de redes.

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Web 3.0
El concepto de Web 3.0 es, quizs, ms complejo de definir y discutido que el caso de sus predecesores:
la Web 1.0 y 2.0. Existen diversas caractersticas que la define, entre las cuales podemos mencionar:
semntica, geolocalizacin, Web 3D, accesibilidad desde diversos dispositivos y tambin inteligencia
artificial. La Web semntica, como muchas veces se define a la Web 3.0, se refiere al uso de etiquetas o
bien de metadatos para otorgar un significado semntico a los elementos de la Web. Esto posibilita cierta
automatizacin y la posibilidad de utilizar, con un mayor nivel de efiiencia, los agentes inteligentes que
pueden realizar deteccin de contenidos.
Las caractersticas de geolocalizacin, muy empleadas en los equipos mviles, tambin han llegado a
nuestro escritorio. Aunque an pueden no ser tan precisas, las tcnicas cada vez son ms depuradas, y
las mejoras en este campo no detienen su avance. Poder identifiar a una persona, un dispositivo o
cualquier elemento de manera geoespacial abre todo un mundo de posibilidades en el campo de la
informtica y, en especial, para todo lo referente a Realidad Aumentada.

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Por otra parte, as como el cine renaci con la aparicin del 3D, la Web tambin busca un nuevo horizonte
con la presentacin de contenidos en escenarios tridimensionales, y esto pretende ser una de las
renovaciones que plantea la denominada Web 3.0. La posibilidad de acceder desde distintos dispositivos
es una realidad para una gran cantidad de usuarios y un desafo muy importante para diseadores y
desarrolladores web. Los usuarios ya no estn limitados a utilizar Internet desde una computadora de
escritorio, ni siquiera dependen de una laptop. Telfonos mviles, tablets, lectoresde libros electrnicos
y consolas de videojuegos son solo algunas de las posibilidades que se presentan para que el usuario pueda
acceder a Internet en cualquier momento y desde cualquier lugar.
La inteligencia artifiial es, seguramente, el tem ms ambicioso y tambin ms difcil de alcanzar para la
Web 3.0. Este concepto, muchas veces visto en producciones de ciencia ficin, puede comenzar a
ser viable mediante algunos avances tecnolgicos. Sin embargo, esta alternativa todava no tiene la
madurez necesaria para manejos prcticos, por lo cual an se ubica en una etapa experimental.

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

W3C y Su Importancia
Es importante comprender que el lenguaje HTML es un estndar, compuesto por
recomendaciones publicadas por un consorcio internacional: el World Wide Web Consortium
(W3C).
Las especificaciones oficiales de HTML describen las "instrucciones" del lenguaje, pero no cmo
seguirlas, es decir, cmo las interpretan los programas informticos. Esto permite visualizar
pginas Web independientemente del sistema operativo o la arquitectura del equipo del usuario.
Sin embargo, aunque las especificaciones son muy detalladas, hay cierto margen para la
interpretacin por parte del navegador y esta es la razn por la cual la misma pgina puede
aparecer de modo diferente en un navegador u otro.
Es ms, algunos editores de software agregan instrucciones HTML exclusivas que no se hallan en
las especificaciones de W3C. Por este motivo, las pginas Web que contienen dichas
instrucciones pueden ser vistas en un navegador, y ser completa o parcialmente ilegibles en
otros. Por esto, las pginas Web deben seguir las recomendaciones de W3C, de forma que
lleguen al pblico ms amplio posible.
El World Wide Web Consortium (W3C) es el ente o consorcio, de alcance internacional, que se
encarga de crear las reglas que se utilizan como recomendaciones fundamentales para la
estandarizacin de los principales lenguajes y tecnologas utilizados en Internet, como el caso de
HTML, CSS, XML, DOM y SVG, por ejemplo.
El W3C surgi en el ao 1994 y, bajo su rbita, hoy en da est el desarrollo de la versin 5 de
HTML y el nivel 3 de CSS. Su sitio web oficial es www.w3.org. Es interesante mencionar que su
director es nada menos que el padre de la Web: Tim Berners-Lee.

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Lenguajes de etiquetas
Los lenguajes de etiquetas, tambin conocidos como lenguajes de marcado o de marcas, son los
que nos permiten estructurar un documento mediante el uso de etiquetas. Un ejemplo muy
popular de un lenguaje de etiquetas, conocido con seguridad por todos los que estn leyendo este
libro, es HTML. Los lenguajes de etiquetas no se identifican con los de programacin; esto
ocurre principalmente porque los lenguajes de etiquetas no definen algunos aspectos bsicos
presentes en los lenguajes de programacin, como es el caso de funciones aritmticas o
el uso de variables, por citar algunos ejemplos.
Los lenguajes de marcado tienen una historia bastante extensa. Si bien su concepto fue definido
en la dcada del sesenta, sera en los setenta cuando surgiran las primeras aproximaciones a
estos lenguajes y, en los ochenta, cuando llegaran las estandarizaciones. Claro est que recin
en la dcada del noventa se haran masivos de la mano de HTML y gracias al enorme xito de
Internet.
SGML

Standard Generalized Markup Language, o simplemente conocido como SGML, es un estndar

ISO que permite definir lenguajes de etiquetas. Es estndar ISO desde 1986 (ISO 8879:1986).
Una de las caractersticas ms valoradas de SGML es la de permitir el intercambio de
informacin de una manera sencilla, abstrayndose de la complejidad de la aplicacin. Otro
aspecto para destacar es que permite definir nuevos lenguajes de marcado independientes.
Las etiquetas tienen la funcin de otorgarles nombres a los elementos, posibilitando marcar
comienzo y final de un objeto lgico. Entre los derivados de SGML, uno de los ms destacados y
conocidos es XML. Tambin es importante mencionar que HTML se apoy en SGML en su
definicin, sin basarse en el marcado estricto, tema que luego sera uno de los motivos de la
llegada de XHTML (basado en XML).
XML

Bajo las siglas XML se conoce al metalenguaje de marcas extensible, cuyo nombre en ingls es
Extensible Markup Language. Es importante aclarar que XML no es un lenguaje en s mismo, sino

10

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

que lo que nos ofrece es una manera de especifiar reglas para defiir lenguajes de etiquetas.
En la actualidad, es un estndar que est bajo la rbita del W3C, y su aplicacin en Internet
resulta frecuente. XML es muy utilizado para intercambio de informacin, y su uso se ha visto
potenciado con la llegada de AJAX. Este estndar permite describir datos de manera tal que se
pueda realizar un intercambio de una forma transparente entre aplicaciones. Un caso de uso de
XML que se puede mencionar es el del popular formato RSS, que se emplea para compartir y
difundir informacin en Internet. A continuacin, podemos acceder a un claro jemplo de XML:
<?xml version=1.0?>
<libro>
<titulo>Webmaster Profesional</titulo>
<autor>Damin De Luca</autor>
<formato>Papel</formato>
<peso>420 gr.</peso>
<categoria>Desarrollo Web</categoria>
</libro>

HTML

HTML (HyperText Markup Language o lenguaje de marcado de hipertexto) es el lenguaje de

etiquetas que funciona como una de las piedras angulares de la World Wide Web. Aunque la
evolucin de Internet nos ha trado muchos avances en lo que se refiere a tecnologa (Web 2.0 y
Web 3.0, mediantes), el lenguaje de etiquetas que se populariz en la dcada del noventa sigue
siendo fundamental para el desarrollo web, ya que es el que comprenden e interpretan los
navegadores. Claro est que por s solo ya no es tan potente como lo fue en aquellos tiempos y,
hoy por hoy, necesita combinarse con otras tecnologas y lenguajes para lograr resultados que
estn a la altura de las necesidades del desarrollo web actual. Pero, para comprender un poco
mejor la importancia de HTML, bien vale un pequeo repaso por su historia y sus caractersticas
principales.

XHTML

Mientras HTML quedaba detenido en la versin 4.01, se fue desarrollando una alternativa que
pudiera solucionar algunos de los problemas que se presentaban con este estndar. As surgi
XHTML, que es ni ms ni menos que una adaptacin de HTML al XML. Si miramos el rbol

11

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

genealgico, podremos observar, entonces, que de SGML surgen HTML y XML y que, de este
ltimo, nace XHTML, aunque en realidad, este toma prcticamente todas sus etiquetas de HTML.
La primera gran diferencia entre HTML y XHTML reside en que el primero es blando y
permisivo, mientras que el segundo es estricto. Para entender a qu nos referimos con esta
rigurosidad de XHTML, veremos algunos ejemplos que nos aclararn el tema.

En XHTML, las etiquetas deben ser cerradas de acuerdo con el orden en que abren y segn la
forma en que estn contenidos los elementos. HTML permite hacer algo como lo que vemos en el
siguiente cdigo:
<p>Este es un texto con algunas <strong>palabras destacadas</p></strong>
En cambio, en XHTML es necesario cerrar primero el destacado<strong>, porque ese contenido
est dentro del bloque de prrafo <p>.
El ejemplo correcto en XHTML sera:
<p>Este es un texto con algunas <strong>palabras destacadas</strong></p>
Debemos tener en cuenta que otro de los aspectos que diferencia a HTML de XHTML reside en
que, en este ltimo, es imprescindible que los nombres de las etiquetas y de los atributos se
escriban en minscula, algo que resulta indistinto en HTML.
Veamos un ejemplo vlido en HTML que no puede utilizarse en XHTML:
<H1>Esto es un titular</H1>
La forma correcta de escribir esto en XHTML es la siguiente:
<h1>Esto es un titular</h1>
En XHTML el valor de los atributos debe estar siempre entre comillas, mientras que esto no es
indispensable en HTML.

12

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

El siguiente ejemplo es vlido para HTML, pero no lo es para XHTML:

<p><a href=http://www.misitioweb.com>Mi enlace</a></p>
La alternativa correcta para XHTML es la siguiente:
<p><a href=http://www.misitioweb.com>Mi enlace</a></p>

Otro aspecto importante en XHTML es que todas las etiquetas deben cerrarse. El caso tpico es
<br>, que sirve para indicar un salto de lnea. En XHTML esta etiqueta debe cerrarse y se
escribe <br /> (un mtodo abreviado para evitar tener que escribir <br></br>). En el siguiente
captulo de este libro, aprenderemos ms sobre los elementos de HTML/XHTML y cmo
indicarle al navegador el estndar utilizado. De esta forma lograremos dominar un poco ms los
conocimientos que necesitamos para enfrentar un proyecto web.
HTML5

Al momento de decidir el camino por seguir en la evolucin de HTML/XHTML, se plante la

controversia entre avanzar sobre XHTML 2.0 o bien realizar una nueva versin del lenguaje
HTML. Finalmente, esta ltima idea fue la que triunf y, por tal motivo, HTML5 es la versin que
nos ocupa principalmente en este libro. Vale decir que HTML5 tuvo su primer borrador pblico a
partir del ao 2008.
HTML5 plantea una evolucin necesaria para HTML, que luego de ms de una dcada en la
versin 4.01 necesitaba, de manera imperiosa, una renovacin para estar al da con las
necesidades del desarrollo web actual. En HTML5, se destacan sus caractersticas semnticas,
las posibilidades multimedia que incorpora, las nuevas funciones para formulario y las
caractersticas que se defien para poder integrarse con tecnologas que permitirn abrir una
nueva etapa en Internet, en lo que se refire a la arquitectura de las aplicaciones. Por estos
motivos, HTML5 es considerado como uno de los motores ms importantes de la Web 3.0. Es
necesario destacar, para completar el camino de su evolucin, que, en el mes de mayo de 2011,
HTML5 ingresa en Last Call, y se ha anunciado que llegar a ser recomendacin del W3C en el
ao 2014.

13

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Otros lenguajes y tecnologas relacionados con el desarrollo web

Como veamos en las pginas anteriores, conocer el lenguaje HTML es una de las bases para
poder desarrollar la arquitectura de un sitio web. Pero su interaccin con otros lenguajes y
tecnologas es lo que realmente potencia el desarrollo y lo que nos permitir lograr resultados
acordes a las necesidades que requieren los proyectos web actuales.
Para poder aprovechar al mximo el potencial de HTML5 es fundamental tambin comprender el
rol de las tecnologas que interactan con este lenguaje de etiquetas y de qu manera deben
integrarse. A continuacin, nos centraremos en conocer las caractersticas principales de CSS,
JavaScript, AJAX y las tecnologas del lado servidor.

CSS

Las hojas de estilo en cascada, tal es su traduccin del ingls Cascading Style Sheets (CSS),
tienen como funcin establecer reglas de representacin de un documento en un medio o
dispositivo. Mediante estas reglas podremos establecer medidas, colores o cualquier otra
caracterstica de representacin de una pgina web, para que se vea reflejada en una pantalla de
monitor, de un dispositivo mvil, una Tablet, una impresora, un dispositivo braille o un televisor.
La funcin principal de CSS es, por lo tanto, la de permitir separar el contenido y la estructura
que se define en un documento HTML, de la representacin, que queda a cargo de las hojas de
estilos. Esta separacin es importante para un proyecto web ya que, adems de permitir la
definicin de criterios que se deben respetar en el sitio, ofrece la posibilidad de que se defian
clases para evitar la necesidad de rescribir cdigo y, adems, se pueden crear reglas para que el
sitio se represente de una manera correcta en diferentes dispositivos.
Hay tres formas de incorporar los estilos a nuestro documento HTML. La primera alternativa es
hacerlo online. Si bien es la ms especfica (ms adelante en el libro veremos qu quiere decir

14

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

esto) tambin es la menos recomendable para la mayora de los casos. A continuacin, se muestra
el ejemplo del posicionamiento absoluto de un elemento con el estilo aplicado online:
<div style=position: absolute; left: 20px; top: 50px;>
Otra opcin consiste en definir los estilos directamente en el encabezado dentro de las
etiquetas <style type=text/css> y </style>. Si bien es una alternativa ms prolija que la
anterior, no resulta muy til porque la reusabilidad del cdigo queda acotada a la propia pgina
donde nos preocupamos de definir estos estilos.

JavaScript

Es importante tener en cuenta que JavaScript (dialecto de ECMAScript) es un lenguaje

multiparadigma que requiere de un intrprete para ser ejecutado. As como los navegadores web
cuentan con un motor para representar el contenido de HTML y CSS, tambin tienen un motor
que funciona como intrprete para el cdigo JavaScript. Como lenguaje, JavaScript sali a la luz
en el ao 1995. Luego de pasar por algunos nombres y denominaciones, se fue convirtiendo en
una alternativa para programacin del lado cliente.
Su finalidad principal es permitir la creacin de pginas dinmicas, con cdigo que puede
ejecutarse desde el lado cliente, alivianando la tarea del servidor y disminuyendo la cantidad de
peticiones que se le hagan. Por sus caractersticas, resulta til para validacin de formularios,
mostrar y aplicar efectos, y exhibir avisos en pantalla. Es importante remarcar que su uso cobr
mayor fuerza a partir del xito de AJAX y el importante impulso de la Web 2.0.
La inclusin de un cdigo JavaScript dentro de un documento HTML puede realizarse ubicndolo
en el encabezado entre las etiquetas
<script type=text/javascript> y </script>.
Si bien esta alternativa sigue siendo utilizada, la mejor opcin es externalizar el contenido de
JavaScript en un archivo de extensin .JS. Luego lo incluimos en el documento HTML con una
lnea de cdigo en el encabezado como vemos en el siguiente ejemplo:
<script type=text/javascript src=./js/script.js></script>

15

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

En el valor de la propiedad src, se debe especificar la ruta y el nombre del archivo que contiene
el cdigo JavaScript que se desea incluir.

AJAX

Al hablar de AJAX, debemos comenzar por comprender que no es un lenguaje de programacin,

como JavaScript o PHP, sino que representa una tcnica que rene a un conjunto de tecnologas y
lenguajes para crear lo que se conoce como RIA (Rich Internet Applications). Su nombre se
comenz a utilizar en 2005, en pleno auge de la Web 2.0; sin embargo, los lenguajes y las
tecnologas que son utilizados con AJAX ya existan en ese momento. Lo que ocurri es que, por
las necesidades de desarrollo que comenzaron a florecer en aquella poca, se hizo necesario un
cambio en las tcnicas empleadas, y all fue donde AJAX encontr su lugar.
El trmino AJAX es un acrnimo que proviene de Asynchronous JavaScript And XML, que, al
castellano, podra traducirse como JavaScript asncrono y XML. Justamente este es el punto
fuerte de AJAX: poder trabajar con datos de manera asincrnica, valindose de JavaScript
como lenguaje del lado cliente para manejar datos que le llegan desde el servidor. De esta
manera, el motor de AJAX trabaja como un intermediario entre el cliente y el servidor, pero, en
lugar de demorar procesos, los administra de tal manera que es posible, por ejemplo, la recarga
de solo algunas partes de una pgina web. Esta posibilidad cambia el paradigma de la necesidad
de una recarga completa de la pgina y permite construir aplicaciones web ms potentes,
emulando incluso a muchas de las soluciones que se vean posibles solo en software de escritorio.

Los lenguajes y tecnologas que intervienen en AJAX son:

HTML/XHTML y CSS: ya hemos hablado bastante de ellos, son los que permiten la
representacin en el navegador.
XML y JSON: son los que permiten realizar el intercambio de datos y tambin efectuar la
manipulacin de estos.
XMLHttpRequest: es el que permite realizar el intercambio asncrono de los datos que sean
necesarios.
DOM: es la interfaz que permite acceder a las partes de un documento como si fueran objetos
y, a partir de eso, modificarlas.
JavaScript: es el lenguaje utilizado para hilvanar todo

16

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

XMLHttpRequest

Como su nombre lo indica, XMLHttpRequest es una interfaz que permite realizar peticiones a
servidores web mediante el protocolo HTTP (y tambin utilizando el protocolo HTTPS). Adems
de XML, el formato de transferencia puede ser codifiado en texto plano, HTML y JSON.
XMLHttpRequest es uno de los elementos fundamentales para permitir la transferencia
asincrnica de datos de AJAX.
Esta especifiacin fue creada por Microsoft y se incorpor en Internet Explorer a partir de la
versin 5 (usando ActiveX). Posteriormente fue incorporada por los navegadores Mozilla, Safari
y Opera, entre otros. Al ser un navegador ms joven, Google Chrome lo
utiliza desde el momento de su nacimiento.
DOM

Bajo el nombre de DOM (Document Object Model) se defie una interfaz que permite la
representacin del documento en el modelo de objetos. De esta manera, es posible acceder, por
ejemplo, a los elementos contenidos en un documento HTML o XML con la posibilidad de
manipularlos (crearlos, borrarlos o modifiarlos).
En palabras sencillas, DOM nos permite tener acceso a un documento (que puede ser una pgina
web) representado en una estructura de objetos. Es posible modifiar estos objetos, cambiarles
sus atributos o bien agregarles nuevos. El uso de DOM es una de las caractersticas principales
que le da mayor funcionalidad a AJAX. Utilizando JavaScript, es posible acceder de diferentes
formas directamente al elemento, como por ejemplo, mediante su id con getElementById() o a
travs de su etiqueta con getElementsByTagName().
Vale decir que al acceder a los elementos del documento mediante DOM, podremos manipular su
contenido y tambin sus atributos. As podremos percibir cambios en la pgina sin recargarla por
completo.

JSON

JavaScript Object Notation (JSON) es la denominacin en ingls que recibe el formato de

notacin literal de objetos, el cual es utilizado principalmente para el intercambio de datos en

17

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

AJAX. En la actualidad, se emplea mucho en aquellos proyectos donde, con frecuencia, se

produce un gran nivel de fljo de datos asncronos entre cliente/servidor, ya que permite tener la
informacin organizada y con facilidad de acceso para ser manipulada. Entre estas ventajas se
encuentra la simplicidad con la que permite interactuar con arrays y el uso de objetos. Por sus
caractersticas, en especial su simpleza y efiiencia, JSON se ha convertido en una muy
interesante alternativa a XML, como opcin de codifiacin de datos en AJAX. Pero tambin
resulta importante destacar que, en un mismo desarrollo, es posible utilizar tanto la alternativa
para el manejo con XML con XMLHttpRequest, como la solucin que nos ofrece JSON. Es
importante tener en cuenta que la mayora de los navegadores modernos cuenta con soporte
nativo para JSON.
RIA

Rich Internet Applications (RIA) es el trmino con que se denomina a las aplicaciones de
Internet enriquecidas. En pocas palabras, este tipo de aplicaciones tienen caractersticas
similares a las de escritorio, pero corren directamente en el navegador. Aunque existen
alternativas, debemos tener en cuenta que la ventaja de desarrollar RIA con AJAX es que el
usuario no necesita instalar software adicional en su equipo. Tan solo necesita contar con un
navegador moderno y una buena conexin a Internet; de esta forma estar listo para correr la
aplicacin web.
Frameworks

El concepto de framework es muy usual en el mbito de programacin y ha cobrado gran

importancia en lo que se refiere a desarrollo web. Debemos saber que, en lneas generales, un
framework es un fragmento de cdigo que cuenta con soluciones para enfrentar una necesidad
de desarrollo en particular, resolviendo cuestiones de bajo nivel para simplificar la labor del
programador que lo utiliza.
En AJAX, encontramos varias libreras muy interesantes que simplifican nuestro trabajo con
esta tecnologa. Entre las ms importantes, podemos mencionar a jQuery (que se encuentra en la
direccin http://jquery.com), Prototype (www.prototypejs.org) y MooTools
(http://mootools.net), entre otras.

18

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Navegadores

Ya hemos explicado la importancia de los navegadores para el mundo web: se trata de las
aplicaciones que reciben la informacin, la interpretan y finalmente la muestran al usuario.
Existen navegadores para diferentes dispositivos y plataformas. Cada uno con sus propias
caractersticas, todos tiene la misma finalidad: ofrecerle al navegante una representacin lo ms
fil posible del recurso al que est accediendo, que, por lo general, ser un sitio o una aplicacin
web. Existen diferentes navegadores, pero nos centraremos en los principales: Internet
Explorer, Firefox, Chrome, Apple Safari y Opera.
Internet Explorer

La primera versin de Internet Explorer (IE) apareci en el ao 1995. Eran tiempos de Windows
95, y lo que hoy conocemos como Internet an estaba en paales. La versin 2 sali a la luz hacia
finales de 1995, y la 3 se public en 1996, con mejoras en lo que se refiere a la compatibilidad
con VBScript, JavaScript y tambin CSS. Internet Explorar 4 se lanza en el segundo semestre
de 1997, mejorando la compatibilidad con HTML y CSS. Ya eran tiempos de Windows 98, aunque
esta versin an contemplaba compatibilidad hacia atrs con los sistemas operativos de
Microsoft.
En 1999, con la llegada de Windows 98 SE, aparece IE 5, que ofrece compatibilidad con CSS2.
Con Windows XP, llega IE 6. Corra el ao 2001 y, entre ese ao y los siguientes, Microsoft logr
una cuota del mercado de los navegadores, hasta superar picos de 90% de usuarios. Internet
Explorer 6 correga errores y mejoraba la compatibilidad respecto de las recomendaciones del
W3C. Aunque hoy, pasados los aos, resulta un navegador que se considera obsoleto, en su
momento ofreci varias mejoras para la familia de browsers de Microsoft. Despus de varias
betas y un importante tiempo de desarrollo, en 2006, con el lanzamiento de Windows Vista, llega
Internet Explorer 7. Ms seguro y estable, ofrece varias mejoras respecto de la versin
anterior, en especial, en lo que se refiere a compatibilidad con CSS, navegacin por pestaas,
soporte a transparencias en archivos PNG, correcciones de bugs y renderizado de las pginas.
Aunque para lo que hoy en da se espera en Internet puede resultar anticuado, y, por lo tanto,
an existe una porcin considerable de usuarios que no han migrado y por lo tanto lo siguen
utilizando.
Internet Explorer 8 se lanza en el primer semestre del ao 2009 y es el ltimo de la familia de
navegadores de Microsoft en prestar compatibilidad con el sistema operativo Windows XP. Por
su parte, Internet Explorer 9 se lanza en el ao 2011 y, a partir de esta versin, llega la

19

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

compatibilidad con CSS3 y HTML5. IE9 tambin mejora las funciones de soporte para DOM,
SVG y JavaScript.

Mozilla Firefox

La primera versin de Firefox sali a la luz en noviembre de 2004. Un ao despus y con varios
cambios, llegara la versin 1.5. La navegacin mediante pestaas y el gestor de complementos
seran algunas de las mejoras de la versin 2, que fue publicada en 2006. En 2008, con la versin
3, llegan varias correcciones y ajustes en lo que se refiere al cumplimiento de estndares web.
Un aluvin de descargas en las primeras horas acompaara el xito de esta versin. A partir de
la versin 3.5, publicada en el ao 2009, se comienza a dar soporte a algunas caractersticas de
HTML5, como las etiquetas de <audio> y <video> (con compatibilidad nativa con los cdecs Ogg
Theora y Ogg Vorbis). En esta versin, tambin hay mejoras por el lado de JavaScript con el
motor TraceMonkey. En 2010, llega la versin 3.6, que durante ese mismo ao recibira varias
actualizaciones hasta llegar a la 3.6.13. Entre las mejoras ms importantes que se pueden
mencionar, estn las relacionadas con JavaScript, el soporte a Web Open Font Format (WOFF),
soporte a nuevos atributos de CSS3, DOM y HTML5 (File API y Drag & Drop API). Tambin en
2010, aparece la beta de Firefox 4, cuya versin definitiva se publica en marzo de 2011.
Con Firefox 4, llegan mejoras en lo que se refiere a audio y video; con el soporte a video HD con
WebM, se admite tambin el formato WebGL para grfios 3D en la Web, mejoras en el soporte
a CSS3, soporte a elementos y atributos de formulario de HTML5, soporte multi-touch para
Windows 7, SVG como archivos de imgenes y fondos. En la versin 5 de Firefox, lanzada en
junio de 2011, se actualiza la interfaz, el trabajo con pestaas y su men contextual con ms
funciones integradas; tambin hay mejoras en la gestin de cuentas de usuarios. Su lanzamiento
fue anunciado para mediados de 2011.

20

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Google Chrome

La primera versin de Google Chrome fue lanzada por Google en el ao 2008 y estaba pensada
para plataforma Windows (XP y superiores). La versin 2 de este navegador lleg en el primer
semestre del ao 2009 para ofrecer una mayor cantidad de idiomas. Con la versin 3, publicada
en septiembre de 2009, llega el soporte a las etiquetas <canvas>, <audio> y <video> de HTML5.
Tambin se mejora la performance en el motor correspondiente a JavaScript. Con la versin 4,
publicada en enero de 2010, aparecen tambin las betas para otros sistemas operativos (Linux y
Mac). En lo que se refire a la versin Windows, se mejora el rendimiento general, se suma
soporte para una gran cantidad de extensiones y, en lo vinculado a HTML5, se destaca el soporte
para almacenamiento local.
Google Chrome 5 se publica en el mes de mayo de 2010. Este lanzamiento ya ofrece las versiones
definitivas tanto para Windows como para Mac y Linux. Drag&Drop, geolocalizacin, App Cache y
WebSockets son algunas de las caractersticas relacionadas con HTML5 que ya se pueden
comenzar a utilizar con Google Chrome 5.
En el mes de septiembre de 2010, se publica la versin 6, que cuenta con varias mejoras en las
caractersticas de sincronizacin del navegador. Tambin se destaca por tener el plugin de Flash
Player 10.1 incorporado y activado de manera predeterminada. En lo vinculado con HTML5, se da
soporte a WebM para video. A partir de la versin 7, se comienza a notar con mayor fluidez el
ritmo de actualizacin del navegador de Google, que llega a lanzar una versin cada seis semanas.

21

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

En lo referente a HTML5, Google Chrome 7 incorpora varias mejoras, entre las que se destacan
el soporte a la File API y una performance notable en los tests de HTML5.
Google Chrome 8 se lanza en diciembre de 2010 y principalmente brinda correcciones de bugs,
mejoras de performance y el lector de PDF incorporado activado por defecto.
La versin 9 del navegador de Google nos trae WebGL activado de manera predeterminada
y aislamiento del proceso de Flash Player, entre otras caractersticas de inters.
En la versin 10, se destacan las mejoras en el rendimiento, y es ms veloz que su antecesor
gracias a las actualizaciones realizadas a los motores de renderizado y de JavaScript. En
las siguientes versiones, se mantiene la apuesta por mejorar el rendimiento, aprovechar al
mximo las caractersticas de hardware, corregir errores y brindar mayor compatibilidad a las
nuevas caractersticas de HTML5 y tambin de CSS3. La versin 11 incluye compatibilidad con la
API de voz (Speech to text API) para permitir que el usuario ingrese un texto mediante voz.
En su corta historia, Google Chrome ha evolucionado mucho en su arquitectura y tecnologa, pero
no solo eso, sino que tambin se ha convertido en el navegador preferido por muchos usuarios,
aunque an se encuentra por detrs de IE y de Firefox en las preferencias del pblico. Chrome
se destaca por su frecuencia de actualizacin.

Safari

Desarrollado por Apple, este navegador que primero naci para sistemas Mac, luego supo pegar
el gran salto para plataformas Windows y tambin cuenta con versiones para mviles (iPhone),
reproductores multimedia (iPod Touch) y tablets (iPad).

22

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

La primera versin apareci como beta a principios del ao 2003 y, a mediados de ese ao, fue
lanzada en forma definitiva. En octubre de 2003, con la llegada de la versin 1.1, Safari comenz
a ser el navegador por defecto de los sistemas Mac OSX, lo cual signific un impulso muy
importante para este software. La versin 2 llegara en el ao 2005, y la versin 3 sera lanzada
dos aos despus, ya con el soporte tanto para Mac OSX como para Windows. Safari 4 se publica
en 2009 con la gran novedad en su motor de JavaScript (Nitro). En 2010, llega Safari 5 con
muchas novedades en lo que se refiere al soporte de HTML5: pantalla completa y subttulos para
<video>, geolocalizacin, EventSource, WebSocket, Drag&Drop, etiquetas semnticas y
atributos de formularios, entre otras caractersticas.

Opera

Si hay algo que destaca a Opera, es que podemos encontrar versiones para diferentes sistemas y
dispositivos, entre ellos, equipos de escritorio, smartphones, PDAs y consolas de videojuegos.
Aunque Opera no se encuentra en el podio entre los navegadores ms utilizados de la actualidad,
cuenta con varias caractersticas muy interesantes, que a lo largo de su historia han demostrado
que es un navegador de vanguardia. La primera versin de Opera sali a la luz en 1995, pero,
curiosamente, no se lanz para el pblico general. De esta manera, en el ao 1996, la versin 2 es
la primera en estar disponible para todos los usuarios. En 1997, se publica la versin 3 y, un ao
despus, se lanza la 3.5, con una destacada compatibilidad con CSS.
La versin 4 llega a mediados del ao 2000; esta se destaca por su buen soporte y compatibilidad
con CSS1, CSS2 y HTML4. En las versiones para mviles, se incluye soporte para WAP y WML.
Con Opera 4, tambin llegan las primeras versiones para Linux y Mac. Opera 5 es lanzado a
finales de 2000 e incluye un cambio en la licencia; esta versin muestra un espacio con publicidad

23

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

(que se puede remover si se opta por la versin paga). La versin 6 se presenta en noviembre de
2001 e incorpora importantes cambios en la interfaz. Opera 7, lanzado en el ao 2003, es el
primer navegador de esta familia que incluye el motor de renderizado Presto. Con este cambio,
tambin llegan mejoras en la compatibilidad con los principales estndares web. Esta versin
ofrece uno de los saltos tecnolgicos ms importantes de este navegador. Opera 8, de 2005, se
destaca por su interfaz grfica simplificada y las mejoras en lo que se refiere a la
compatibilidad con JavaScript y AJAX.

Con el navegador web Opera 8.5, lanzado en septiembre de 2005, llega un nuevo cambio en lo que
se refiere a licencia, ya que es la primera versin en pasar a modalidad freeware. La versin 9
llega con mejoras en cunto a soporte SVG 1.1 Basic, aspectos relacionados con la seguridad y el
manejo de widgets. La versin 10 de Opera fue lanzada en 2009 con cambios en la interfaz y
tambin en la compatibilidad con los estndares web. Durante el tiempo en que recibi sucesivas
actualizaciones, fue mejorando el soporte a HTML5; en especial se destaca en lo referido a
atributos de formulario, aspecto en el que logra resultados muy notables. Opera 11, lanzado a
finales del ao 2010, vuelve a poner manos sobre la simplificacin de acceso para el usuario, las
posibilidades de personalizacin, la seguridad y la performance del producto; de esta forma se
presenta como una alternativa ms que eficiente. En esta versin, tambin se incluyen mejoras al
soporte de HTML5 y CSS3, destacndose lo relacionado con WebSockets y geolocalizacin.

24

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Editores de HTML
Debemos tener en cuenta que tanto el lenguaje HTML como CSS y tambin JavaScript son
lenguajes que pueden escribirse en cualquier editor de textos, y no necesitan compilacin. Por
otro lado, las claras ventajas que ofrecen algunas herramientas de desarrollo son las siguientes:
la identificacin del cdigo con diferentes colores, sistema de ayudas en la sintaxis y tambin
otras facilidades relacionadas con la construccin de cdigo.
Primeros editores
Desde CoffeeCup HTML Editor, el primer editor HTML del mercado all por 1994, mucho ha
crecido la web, y con ella los editores web.
En aquella poca las webs eran muy sencillas, construidas bsicamente con HTML, y se podan
crear usando cualquier editor de texto, como el Bloc de Notas, o el Vi. Eran tiempos de frames,
imgenes animadas horribles, y sin ningn tipo de diseo.
Hoy da no slo se usa HTML para crear una web, que incluso se usa una variante de ste,
XHTML . Ahora tienen la misma importancia (X)HTML, CSS, Javascript/ECMAScript, o
lenguajes de servidor como PHP, Java o .NET/ASP. An es posible crear una web con Bloc de
Notas o vi, pero, a riesgo de ser un poco menos geek, los principales editores web del mercado
nos harn la vida mucho ms fcil.
Como en cualquier aspecto de la informtica, no existe una nica aplicacin que sirva para todo, y
el amplio mundo del desarrollo web no es una excepcin. Cada cual utilizar la aplicacin que
mejor se adapte a sus necesidades. Hay que tener en cuenta si se necesita control de versiones
(CVS, Subversion), cliente FTP o WebDAV, documentacin en lnea, lenguajes soportados,
autocompletado de cdigo, WYSIWYG (What You See Is What You Get), depuracin de cdigo,
etc.
Pero una herramienta comn para todos los desarrolladores web, es sin duda alguna Firefox.
Depurar una pgina web nunca fue tan fcil y rpido, gracias a las extensiones de las que
disponemos, como Web Developer o Firebug.
Con sta ltima podremos modificar por completo una pgina web, conviertindose as en un
WYSIWYG imprescindible, adems de un inmejorable inspector del DOM, y un maravilloso
depurador Javascript. Pero desgraciadamente no debemos olvidar que nuestra web tambin debe
visualizarse correctamente en Internet Explorer, donde la depuracin de nuestras webs es
mucho ms tediosa.

25

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Editores Windows
CoffeeCup HTML Editor:
Las principales caractersticas del CoffeeCup HTML Editor son sus asistentes (insercin de
imgenes, enlaces, mens DHTML, etc.) tratando a los elementos HTML como objetos con sus
propiedades, resaltado de sintaxis (HTML, CSS, PHP, ASP), editor de mltiples ficheros,
cliente FTP, editor visual drag&drop (WYSIWYG), y poco ms. Ha quedado un tanto desfasado,
aunque sigue siendo muy vlido como editor HTML.

Adobe Dreamweaver:
Muchos hemos aprendido HTML y CSS gracias al producto de Macromedia Dreamweaver (ahora
propiedad de Adobe). Es muy similar a CoffeeCup aunque con mayores prestaciones, aunque
tambin es mucho ms caro.
En la ltima versin (CS3) dispone de un muy mejorado soporte de CSS, que junto a su
funcionalidad de autocompletado de atributos CSS (ideal para los que empiezan) lo convierte
quizs en uno de los editores ms cmodos para trabajar con CSS, y por ello quizs tambin sea
el ms usado por los diseadores web.

26

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Al igual que CoffeeCup, sus asistentes harn las delicias de los ms novatos, aunque de poca
utilidad para los ms avanzados. Incluye lo que han llamado Spry, una librera de widgets y
efectos mediante Javascript, que en mi opinin ha llegado demasiado tarde y mal, puesto que
existen fabulosas libreras de widgets/efectos, como Dojo Toolkit, jQuery, script.aculo.us, etc.
Podran haber creado asistentes para usar dichas libreras, pero han preferido usar las suyas
propias.

Linux / Multiplataforma

Amaya:
Amaya es ms una curiosidad que una herramienta popular. Est desarrollado por la W3C (World
Wide Web Consortium), la asociacin que se encarga de construir los estndares web.
Es un navegador y un editor web, cuya peculiaridad es que permite editar directamente cualquier
pgina web que se visualice, y que permite editar SVG y MathML, para codificar e integrar junto
con HTML. Es bastante espartano y carece de asistentes, pero sus modos de vistas pueden
resultar muy interesantes.

27

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Aptana:
Este editor est basado en Eclipse, e incluso puede usarse como plugin en ste. Su asistente de
cdigo (HTML, CSS y Javascript) es nico, mostrando documentacin en lnea de todos y cada
uno de los elementos, como en qu navegadores est soportada una funcin de Javascript o un
atributo CSS.
Adems muestra informacin en lnea sobre las funciones Javascript propias. Viene con cliente
FTP y depurador de Javascript. Pero lo mejor es verlo en funcionamiento .Es el editor web ms
completo del mercado y adems es libre (gratuito y con cdigo fuente abierto).

28

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Zend Studio:
Ms que un editor web, Zen Studio es todo un entorno de desarrollo para PHP. Tiene
autocompletado de cdigo HTML (no para Javascript y CSS) adems de para PHP, y no es posible
editar en modo WYSIWYG, aunque el resaltado de sintaxis les podra valer a los desarrolladores
ms expertos.
Su punto fuerte est en su editor y depurador PHP, que a da de hoy no existe nada mejor. Su
soporte para gestionar bases de datos (MySQL, MS SQL Server, Oracle, PostgreSQL, ),
cliente FTP, y soporte de control de versiones integrado (CVS y Subversion), lo convierte en el
mejor entorno de desarrollo web para PHP existente.

29

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Light Table
Light Table es un IDE interactivo en fase alfa, que fue financiado en kickstarter. La premisa de
Light Table es crear un rea de trabajo donde se pueda interactuar por completo con los
programas que se crean. No solo ver las lineas de cdigo sino explorar en un ambiente de trabajo
con ms que texto y archivos.
Los lenguajes ncleo soportados hasta ahora son Javascript, Clojure y Python. Con la promesa de
la implementacin de muchos mas va plugins. Light Table es open source y multiplataforma,
compatible con Windows, Linux y OS X.

30

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Brackets
Brackets es un editor de texto open source orientado al diseo web. Brackets es mantenido
principalmente por Adobe, y esta escrito en HTML, CSS y JavaScript, esta liberado bajo una
licencia MIT.
Brackets se integra con el navegador y cuenta con previsualizacin en vivo del HTML y del CSS,
y de JavaScript cada vez que guardas los cambios en tu documento. Tambin cuenta con
resaltado, sugerencias y autocompletado de tags, propiedades y valores de la sintaxis.
Brackets es multiplataforma y puedes instalarlo en Windows, OS X y Linux.

31

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Sublime Text
Sublime Text es una de los editores ms populares y completos en la actualidad. Tiene una de las
mejores interfaces que existen, con la posibilidad de dividir tu pantalla en grupos de trabajo, y
editar varios documentes lado a lado, aprovechando al mximo las pantallas mltiples.
Sublime Text tiene un gran rendimiento y muchas posibilidades de personalizacin. Soporte para
una infinidad de lenguajes de programacin, y una enorme seleccin de plugins a travs de su API
basada en Python.
Sublime Text es multiplataforma y puedes descargarlo para Linux, Windows y Mac. Aunque es
una aplicacin de pago, puedes descargar la versin de prueba sin limite de tiempo, con el nico
inconveniente de que te recordar cada cierto tiempo que compres la licencia del producto.

32

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

NetBeans
NetBeans es un IDE creado originalmente como una alternativa libre a el IDE de Java.
NetBeans soporta mltiples lenguajes (PHP, JavaFX, C/C++, JavaScript, etc.), y frameworks.
NetBeans fue hecho open source en el 2000 por Sun Microsystems quien permaneci siendo el
principal patrocinador del proyecto hasta el 2010 cuando fueron adquiridos por Oracle.
NetBeans es gratuito, open source, y multiplataforma. Cuenta con una enorme comunidad de
soporte que se encarga de proveer plugins, tutoriales y todo tipo de entrenamiento.

33

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Geany
Geany es un IDE pequeo y ligero, creado con el objetivo de tener la menor cantidad de
dependencias de paquetes para un entorno de escritorio especifico y solo necesita las librerias
de GTK2 para funcionar. Geany es capaz de correr sobre Linux, FreeBSD, NetBSD, OpenBSD,
MacOS X, AIX v5.3, Solaris Express y Windows. Solo a la versin para Windows le faltan
algunas funciones.
Geany soporta mas de 30 lenguajes de programacin y cuenta con resaltado de sintaxis,
autocompletado, cierre automatico de tags, sugerencias, plugins, etc.

34

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Notepad++
Notepad++ es un editor de texto open source para Windows y tambin es un perfecto
reemplazo para Notepad (el simpln bloc de notas de Microsoft). Est bajo una licencia GPL.
Notepad++ se basa en el componente de edicin de cdigo Scintilla, est escrito en C++ y es
sumamente ligero. Cuenta con resaltado de sintaxis, bsqueda, interfaz personalizable, mapa del
documento, autocompletado, pestaas para abrir mltiples documentos al mismo tiempo, etc.

35

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Emacs
GNU Emacs un editor de texto altamente personalizable, bsicamente es un interprete para
Emacs Lips, un dialecto del lenguaje de programacin Lisp, con la adicin de extensiones que
hacen que soporte la edicin de texto.
Emacs soporta el resaltado de la sintaxis con colores, para una gran variedad de lenguajes. El
editor incluye la documentacin y un tutorial para los nuevos usuarios. Soporte completo de
Unicode para casi cualquier lenguaje humano y sus scripts. Y un largo numero de extensiones que
aaden mas funcionalidades. Emacs corre en mltiples sistemas operativos, entre los principales
estn: GNU, GNU/Linux, FreeBSD, NetBSD, OpenBSD, Mac OS X, Windows, y Solaris.

36

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Vim
Vim es un editor de texto avanzado, y altamente configurable. Es una versin mejorada de Vi, el
editor distribuido con la mayora de los sistemas UNIX. Vim es a veces llamado editor para
programadores. Aunque algunos lo consideran un IDE completo, Vim no es solo para
programadores, tambin es perfecto para todo tipo de edicin de texto, desde escribir un email,
hasta editar archivos de configuracin.
Aunque es un editor avanzado y su uso como herramienta de programacin tiene una curva de
aprendizaje un tanto elevada, Vim puede ser configurado para funcionar un una manera muy
simple, al estilo de Notepad. El llamado evim o Easy Vim.
Vim es charityware, es decir, su licencia es compatible con GPL y se distribuye de manera libre y
gratuita, pero los desarrolladores solicitan una donacin para los nios de Uganda a travs de la
ICCF, para quien desee colaborar.
Vim funciona en mltiples sistemas operativos, y est disponible en diferentes versiones.

37

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Eclipse
Eclipse es un IDE basado en Java, con paquetes para Java EE, C/C++, cliente para GIT, multiples
frameworks, etc.; y aunque es un paquete de soluciones bastante grande, para proyectos
complejos puede resultar ideal.
Eclipse tiene una gran comunidad de usuarios, lo que significa que puedes encontrar plugins para
prcticamente cualquier cosa. Todos las herramientas de Eclipse estn disponibles para Linux,
Windows y Mac, bajo una licencia open source.

38

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

EditRocket
EditRocket es un editor de texto y cdigo fuente, que soporta mltiples lenguajes, con funciones
bsicas de autocompletado, bsqueda y resaltado de sintaxis. Adems integra su propio cliente
FTP y SFTP, corrector ortogrfico y un convertidor de texto a HTML.
EditRocket puede ser instalado en Windows, Linux o Mac gratuitamente por un periodo de
prueba de 30 das, posteriormente requiere la compra de una licencia para poder seguir siendo
usado.

39

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Elementos del HTML

SINTAXIS DEL HTML
El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos
etiqueta. A travs de las etiquetas vamos definiendo los elementos del documento, como enlaces,
prrafos, imgenes, etc. As pues, un documento HTML estar constituido por texto y un
conjunto de etiquetas para definir la forma con la que se tendr que presentar el texto y otros
elementos en la pgina.
La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta
etiqueta. As por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos
una frase con el siguiente cdigo:

40

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<b>Esto est en negrita</b>

El resultado Ser:
Esto est en negrita
Las etiquetas <p> y </p> defien un prrafo. Si en nuestro documento HTML escribiramos:
<p>Hola, estamos en el prrafo 1</p>
<p>Ahora hemos cambiado de prrafo</p>
El resultado sera:
Hola, estamos en el prrafo 1
Ahora hemos cambiado de prrafo

ESTRUCTURA DEL HTML

Las pginas web mantienen una estructura muy sencilla que debemos respetar, para que los
navegadores sean capaces de presentarla. No podemos comenzar nuestra pgina con una etiqueta
de prrafo, por ejemplo, sino que debemos indicar qu tipo de pgina estamos generando, qu
informacin adicional llevar y dnde comienza el contenido que debe ser mostrado.
De este modo, cualquier pgina web incluir al menos las siguientes etiquetas:

<html> y </html> colocadas al principio y fin del documento indican dnde comienza y
finaliza la pgina web.

<head> y </head> definen un espacio en el que incluiremos contenidos que no se van a

mostrar directamente en el navegador, sino que sirven para describir determinados
aspectos del documento, como su ttulo, autor, los estilos que emplearemos, pequeas
funciones que se deben realizar, etc.

<body> y </body> en su interior se incluye la informacin que se mostrar en el

navegador. Es el contenido real de la pgina, estructurado mediante las diferentes
etiquetas.

41

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Junto a las tres etiquetas anteriores podemos encontrar algunas ms que son importantes para
que la web se interprete correctamente:

<!DOCTYPE> y <?xml> son dos etiquetas que indican qu tipo de documento estamos
generando y a qu normas se ajusta. Normalmente sern siempre iguales y ser nuestro
editor el que se encargue de colocarlas al principio de la pgina, cuando sea necesario.

Con todo lo anterior, una pgina creada desde cero y con un breve contenido quedara de la
siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera pgina</title>
</head>
<body>
<p>Mi primera pgina web, creada con tan slo copiar y pegar.</p>
</body>
</html>

Declaracin de tipo de documento

La pgina HTML debe incluir la declaracin de tipo de documento, una referencia al estndar HTML que se
utiliza, a fin de especificar el estndar de cdigo que emplea la pgina. La declaracin se hace agregando una
lnea como sta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Contenido de pgina</BODY>
</HTML>

Esto indica qu DTD (Document Type Definition) se est utilizando. DTD es una referencia a las
caractersticas del lenguaje utilizado. La tabla resume las declaraciones para las principales
versiones de HTML:
Versin

Declaracin

HTML
2.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//EN">

HTML
3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

42

COMPUTACIN

Liceo Real de Cid

HTML
4.01

XHTML
1.0

Prof. Selvin de Paz

Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">
Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML
1.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5

<!DOCTYPE html>

Al notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y
minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable
acostumbrarse a escribirlas en minscula ya que otras tecnologas que pueden convivir con
nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas
costumbres desde el principio para evitar fallos triviales en un futuro.

Marcado de HTML
Etiquetas
Una pgina HTML es un archivo de texto bsico que contiene etiquetas(a veces denominado
marcador, o tags en ingls) para formatos especficos de texto, imgenes, etc. La utilizacin de
estas etiquetas se llama lenguaje de marcado.
Una etiqueta es un elemento de texto (un nombre) flanqueado por el smbolo menor que (<) y el
smbolo mayor que (>). Por ejemplo, "<H1>".
Las etiquetas HTML operan en parejas y afectan el elemento al que enmarcan. La primera se llama etiqueta de
apertura y la segunda, etiqueta de cierre. La etiqueta de cierre comienza con una barra inversa ( / ):

43

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<etiqueta> Su texto formateado; </etiqueta>

Por ejemplo, las etiquetas <b> y </b> se usan para poner el texto entre ellas en negrilla:
<b> Este texto est en negrilla </b>

Algunas etiquetas HTML se utilizan solas: la etiqueta <br>, por ejemplo, representa un salto de lnea.
Etiquetas de anidamiento
Las etiquetas HTML pueden anidarse jerrquicamente una dentro de otra para permitir que se
apliquen mltiples propiedades al mismo texto. Pero el estndar HTML no tolera las
superposiciones de etiquetas. Este es un ejemplo de texto formateado con etiquetas anidadas:
<i><u>Comment a Marche</u>, the free IT encyclopedia</i>
El ejemplo precedente da el siguiente resultado:
Comment a Marche, the free IT encyclopedia
Pero el ejemplo siguiente es incorrecto:
<i><u>Comment a Marche</u>, the free IT encyclopedia</i>

Nombre
a
abbr
acronym
address
applet

Etiqueta inicial
<a>
<abbr>
<acronym>
<address>
<applet>

Etiqueta final
</a>
</abbr>
</acronym>
</address>
</applet>

area

<area>

Prohibido

b
base
basefont
bdo
big
blockquote
body
br
button
caption
center
cite

<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
Opcional
<br>
<button>
<caption>
<center>
<cite>

</b>
Prohibido
Prohibido
</bdo>
</big>
</blockquote>
Opcional
Prohibido
</button>
</caption>
</center>
</cite>

Des. DTD

44

Descripcin
Origen o destino del vnculo
Abreviatura (p.ej.:WWW, HTTP, etc.)
Informacin sobre el autor
Applet Java
rea de un mapa de imgenes en el lado del
cliente
Estilo de texto en negrita
URI base del documento
Tamao base de fuente
Anular algoritmo BiDi I18N
Estilo de texto grande
Cita larga
Cuerpo del documento
Salto de lnea forzado
Botn
Ttulo de tabla
Forma abreviada de DIV align=center
Cita
COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

code
col
colgroup
dd
del
dfn
dir
div
dl
dt
em
fieldset
font
form
frame
frameset
h1
h2
h3
h4
h5
h6
head
hr
html
i
iframe
img
input
ins

<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame>
<frameset>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Opcional
<hr>
Opcional
<i>
<iframe>
<img>
<input>
<ins>

</code>
Prohibido
Opcional
Opcional
</del>
</dfn>
</dir>
</div>
</dl>
Opcional
</em>
</fieldset>
</font>
</form>
Prohibido
</frameset>
</h1>
</h2>
</h3>
</h4>
</h5>
</h6>
Opcional
Prohibido
Opcional
</i>
</iframe>
Prohibido
Prohibido
</ins>

isindex

<isindex>

Prohibido

kbd
label
legend
li
link
map
menu
meta

<kbd>
<label>
<legend>
<li>
<link>
<map>
<menu>
<meta>

</kbd>
</label>
</legend>
Opcional
Prohibido
</map>
</menu>
Prohibido

noframes

<noframes>

</noframes>

L
F
F

L
F

45

Fragmento de cdigo de computadora

Columna de una tabla
Grupo de columnas de una tabla
Descripcin de una definicin
Texto borrado
Definicin
Lista tipo directorio
Contenedor genrico de idioma/estilo
Lista de definiciones
Trmino definido
nfasis
Grupo de controles de un formulario
Cambio local de la fuente
Formulario interactivo
Subventana
Subdivisin en ventanas
Encabezado
Encabezado
Encabezado
Encabezado
Encabezado
Encabezado
Cabecera del documento
Separador horizontal
Elemento raiz del documento
Estilo de texto en itlica
Subventana en lnea
Imagen incluida
Control de formulario
Texto insertado
Entrada de texto en una sola lnea con
indicador
Texto que debe introducir el usuario
Texto del rtulo de un campo de formulario
Leyenda de un grupo de campos
Objeto de lista
Un vnculo independiente del medio
Mapa de imgenes en el lado del cliente
Lista tipo men
Metainformacin genrica
Contenedor de contenidos alternativos para la
representacin no basada en marcos

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

noscript

<noscript>

</noscript>

object
ol
optgroup
option
p
param
pre
q
s
samp
script
select
small
span
strike
strong
style
sub
sup
table
tbody
td
textarea
tfoot
th
thead
title
tr
tt
u
ul
var

<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
Opcional
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>

</object>
</ol>
</optgroup>
Opcional
Opcional
Prohibido
</pre>
</q>
</s>
</samp>
</script>
</select>
</small>
</span>
</strike>
</strong>
</style>
</sub>
</sup>
</table>
Opcional
Opcional
</textarea>
Opcional
Opcional
Opcional
</title>
Opcional
</tt>
</u>
</ul>
</var>

Contenedor de contenidos alternativos para la

representacin no basada en scripts
Objeto incluido genrico
Lista ordenada
Grupo de opciones
Opcin seleccionable
Prrafo
Valor de propiedad con nombre
Texto preformateado
Cita corta en lnea
Estilo de texto tachado
Ejemplo de salida de programas, scripts, etc.
Sentencias de script
Selector de opciones
Estilo de texto pequeo
Contenedor genrico de idioma/estilo
Estilo de texto tachado
nfasis fuerte
Informacin de estilo
Subndice
Superndice
Cuerpo de tabla
Celda de datos de una tabla
Campo de texto multilnea
Pie de tabla
Celda de encabezado de tabla
Cabecera de tabla
Ttulo del documento
Fila de una tabla
Estilo de texto de teletipo o monoespacio
Estilo de texto subrayado
Lista no ordenada
Variable o argumento de un programa

Atributos

Un atributo es un elemento que se encuentra dentro de la etiqueta de apertura y que permite

definir propiedades adicionales. Los atributos se muestran frecuentemente como una pareja
clave=valor, pero algunos atributos pueden, a veces, definirse nicamente por su clave.
Este es un ejemplo de un atributo para una etiqueta <p> (que define un prrafo), especificando
que el texto debe estar alineado a la derecha:

46

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<p align="right">Prrafo ejemplo</p>

Cada etiqueta incluye uno o ms atributos, cada uno con uno o varios valores, o incluso ms.
Nombre
abbr

Elementos Relacionados
td, th

accept-charset

form

accept

alink
alt
alt
alt
archive
archive

form, input
a, area, button, input, label,
legend, textarea
form
caption
applet, iframe, img, input,
object
legend
table
hr
div, h1, h2, h3, h4, h5, h6, p
col, colgroup, tbody, td, tfoot,
th, thead, tr
body
applet
area, img
input
applet
object

axis

td, th

background
bgcolor
bgcolor
bgcolor
bgcolor

body
table
tr
td, th
body

border

table

border
cellpadding
cellspacing

img, object
table
table
col, colgroup, tbody, td, tfoot,
th, thead, tr

accesskey
action
align
align
align
align
align
align
align

char

Des. DTD

Descripcin
Abreviatura de celda de cabecera
Lista de codificaciones de caracteres
soportados
Lista de tipos MIME para subir ficheros
Carcter de la tecla de accesibilidad

Procesador de formulario en servidor

Ttulo de una tabla

Alineacin vertical u horizontal

D
D
D
D

L
L
L
L

Leyenda de un grupo de campos

Posicin de la tabla respecto a la ventana

D
D

L
L

D
D
D
D
D

L
L
L
L
L

Color de vnculos seleccionados

Descripcin corta
Descripcin corta
Descripcin corta
Lista de archivos separados por comas
Lista de URIs separados por espacios
Lista de cabeceras relacionadas separadas por
comas
Fichero de textura de fondo del documento
Color de fondo de las celdas
Color de fondo de una fila
Color de fondo de una celda
Color de fondo del documento
Controla la anchura del marco que rodea una
tabla
Anchura del borde de un vnculo
Espacio dentro de celdas
Espacio entre celdas

Alineacin de texto

Carcter de alineacin, por ej.: char=':'

47

COMPUTACIN

Liceo Real de Cid

charoff

col, colgroup, tbody, td, tfoot,

th, thead, tr

charset

a, link, script

checked
cite
cite

classid
clear
code
codebase
codebase
codetype
color
cols
cols
colspan
compact
content
coords

input
blockquote, q
del, ins
Todos los elementos excepto,
base, basefont, head, html,
meta, param, script, style, title
object
br
applet
object
applet
object
basefont, font
frameset
textarea
td, th
dir, dl, menu, ol, ul
meta
area

coords

data
datetime
declare
defer

enctype

object
del, ins
object
script
Todos los elementos excepto
applet, base, basefont, bdo,
br, frame, frameset, iframe,
param, script
bdo
button, input, optgroup,
option, select, textarea
form

face

basefont, font

for

label

class

dir
dir
disabled

Prof. Selvin de Paz

offset para carcter de alineacin
Codificacin de caracteres del recurso
vinculado
Para radiobotones y casillas de verificacin
URI del documento o mensaje fuente
Informacin sobre la razn del cambio
Lista de clases separadas por espacios

D
D

L
L

L
F

Identifica una implementacin

Control del flujo de texto
Fichero de clase applet
URI base para classid, data, archive
URI base opcional para applet
Tipo de contenido para code
Color de texto
Lista de longitudes, por defecto: 100%(1 col)
Nmero de columnas abarcado por celda
Espacio reducido entre objetos
Informacin asociada
Lista de longitudes separadas por coma
Para usar con mapas de mgenes en el
cliente
Referencia a datos del objeto
Fecha y hora del cambio
Declara el objeto pero no lo crea
El AU puede retrasar la ejecucin del script
Direccin de texto dbil/neutral
Direccionalidad
No disponible en este contexto

48

Lista de nombres de fuentes separados por

coma
Empareja segn valor de campo ID

COMPUTACIN

Liceo Real de Cid

frame
frameborder
headers
height
height
height
height
href
href
hreflang
hspace
http-equiv

Prof. Selvin de Paz

language
link

table
frame, iframe
td, th
iframe
td, th
img, object
applet
a, area, link
base
a, link
applet, img, object
meta
Todos los elementos, excepto
base, head, html, meta, script,
style, title
img, input
option
optgroup
Todos los elementos, excepto
applet, base, basefont, br,
frame, frameset, iframe,
param, script
script
body

longdesc

img

longdesc

frame, iframe

marginheight
marginwidth
maxlength
media
media

frame, iframe
frame, iframe
input
style
link

F
F

method

form

multiple
name
name
name
name

select
button, textarea
applet
select
form

id
ismap
label
label
lang

L
L

Qu partes del marco representar

pintar bordes del marco?
Lista de id's de celdas de encabezado
Altura del marco
Altura de una celda
Nueva altura
Altura inicial
URI del recurso vinculado
URI que acta como URI base
Cdigo de idioma
Espacio de relleno horizontal
Nombre de encabezado HTTP de respuesta
id nico en todo el documento
Usar mapa de imgenes en servidor
Para usar en menes jerrquicos
Para usar en menes jerrquicos
Cdigo de idioma

D
D

49

L
L

Nombre del lenguaje predefinido de scripts

Color de los vnculos
Vnculo a descripcin larga (complemente a
alt)
Vnculo a descripcin larga (complemente a
title)
Altura del margen en pxeles
Anchura del margen en pixeles
Mximo de caracteres para campos de texto
Diseado para usar con estos medios
Para representar en estos medios
Mtodo HTTP usado para enviar el
formulario
Por defecto es seleccin simple
Permite a loa applets encontrarse entre s
Nombre del campo
Nombre del formulario, para los scripts
COMPUTACIN

Liceo Real de Cid

name

frame, iframe

name
name
name
name
name
name
nohref

img
a
input, object
map
param
meta
area

noresize

frame

noshade
nowrap
object

hr
td, th
applet
a, area, button, input, label,
select, textarea
input, select, textarea
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
a, area, button, input, label,
select, textarea
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title

onblur
onchange

onclick

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

Prof. Selvin de Paz

F

F
D
D
D

L
L
L

Nombre del marco, para designarlo como

destino
Nombre de la imagen, para los scripts
Vnculo destino con nombre
Enviar como parte del formulario
Para su referencia por usemap
Nombre de propiedad
Nombre de metainformacin
Esta regin no tiene accin
Permitir a los usuarios redimensionar
marcos?
Suprimir ajuste automtico de lneas
Fichero applet serializado
El elemento perdi el foco
El valor del elemento fue modificado

Se hizo clic con un botn del apuntador

Se hizo doble clic con un botn del apuntador

El foco se dirigi hacia el elemento

Se puls una tecla

Una tecla fue pulsada y soltada

Una tecla fue soltada

50

COMPUTACIN

Liceo Real de Cid

onload
onload

onreset
onselect
onsubmit
onunload
onunload

frameset
body
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
Todos los elementos excepto
applet, base, basefont, bdo,
br, font, frame, frameset,
head, html, iframe, isindex,
meta, param, script, style, title
form
input, textarea
form
frameset
body

profile

head

prompt
readonly
readonly
rel
rev
rows
rows
rowspan
rules

isindex
textarea
input
a, link
a, link
frameset
textarea
td, th
table

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

Prof. Selvin de Paz

F

Todos los marcos fueron cargados

El documento fue cargado

Se puls un botn del apuntador

El apuntador se movi al interior del

elemento

El apuntador se quit de encima del elemento

El apuntador se movi encima del elemento

Se solt un botn del apuntador

El formulario fue reinicializado

Se seleccion parte de un texto
El formulario fue enviado
Se quitaron todos los marcos
El documento ha sido quitado
Diccionario con nombres de
metainformacin
Mensaje indicador

Para texto y contraseas

Tipos de vnculos directos
Tipos de vnculos inversos
Lista de longitudes por defecto: 100%(1 fila)

Nmero de filas abarcado por la celda

Lneas de divisin entre filas y columnas

51

COMPUTACIN

Liceo Real de Cid

scheme

meta

scope

td, th

scrolling
selected
shape

frame, iframe
option
area

shape

size
size
size
size
size
span
span
src
src
src
src
standby
start

type
type

hr
font
input
basefont
select
col
colgroup
script
input
frame, iframe
img
object
ol
Todos los elementos, excepto
base, basefont, head, html,
meta, param, script, style, title
table
a, area, button, input, object,
select, textarea
a, area, base, form, link
body
Todos los elementos, excepto
base, basefont, head, html,
meta, param, script, title
a, link
object

type

param

type
type
type
type

script
style
input
li

style
summary
tabindex
target
text
title

Prof. Selvin de Paz

Seleccionar forma de contenido

Campo de aplicacin de una celda de
cabecera
Barra de desplazamiento o no
Controla la interpretacin de las coordenadas
Para usar con mapas de imgenes en el
cliente

D
D

L
L

[+/-]nn p.ej.: size="+1", size="4"

Especfico de cada tipo de campo
Tamao de fuente base para elementos "font"
Filas visibles
Los atributos de "col" afectan a "n" columnas
Nmero de columnas por defecto en el grupo
URI del script externo
Para campos con imgenes
Fuente del contenido del marco
URI de la imagen a incluir
Mensaje a mostrar mientras se carga
Nmero inicial de la secuencia
Informacin de estilo asociada
Propsito/estructura para salida de voz
Posicin en el orden de tabulacin

L
L

Representar en este marco

Color del texto del documento
Ttulo consultivo

52

Tipo de contenido consultivo

Tipo de contenido para los datos
Tipo de contenido para el valor cuando
valuetype=ref
Tipo de contenido para lenguaje de scripts
Tipo de contenido para lenguaje de estilos
Qu tipo de control hace falta
Estilo de objeto de lista
COMPUTACIN

Liceo Real de Cid

type
type
type
usemap
valign

ol
ul
button
img, input, object
col, colgroup, tbody, td, tfoot,
th, thead, tr

value

input

value
value
value
value
valuetype
version
vlink
vspace
width
width
width
width
width
width
width
width
width

option
param
button
li
param
html
body
applet, img, object
hr
iframe
img, object
table
td, th
applet
col
colgroup
pre

Prof. Selvin de Paz

D
D

L
L

Estilo de numeracin
Estilo de grfico de lista
Para usar como botn de formulario
Usar mapa de imgenes en el cliente
Alinecin vertical en celdas

D
D
D
D

L
L
L
L
L

D
D

L
L

Especificar para radiobotones y casillas de

verificacin
Por defecto el contenido del elemento
Valor de propiedad
Se manda al servidor cuando se enva
Reinicializar nmero de secuencia
Cmo interpretar el valor
Constante
Color de los vnculos visitados
Espacio vertical
Anchura del marco
Nueva anchura
Anchura de la tabla
Anchura de la celda
Anchura inicial
Especificacin de la achura de la columna
Anchura por defecto de los COLs contenidos

Espacios, saltos de lnea y tabuladores

El lenguaje HTML no considera espacios, tabuladores y saltos de lnea, o ms precisamente,

considera que una cadena de uno o varios espacios/tabuladores/saltos de lnea son espacios
simples. Esto permite la identificacin del cdigo HTML para ser ms legible, sin cambiar la
forma en que la pgina HTML aparece en el navegador. La nica excepcin se da con los cdigos
contenidos dentro de etiquetas, cuyo objetivo principal es justamente mantener el texto
formateado (espacios, saltos de lnea, etc.)

53

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Nota: La nica excepcin se da con los cdigos contenidos dentro de las etiquetas <PRE>,
cuyo objetivo principal es mantener el texto formateado (espacios, saltos de lnea, etc..)

Las siguientes dos piezas de cdigo HTML dan el mismo resultado:

Ejemplo_ de cdigo
HTML
Ejemplo de cdigo HTML
No obstante, HTML tiene modos de definir expresamente cada uno de estos elementos de
disposicin:

Espacio sin salto de lnea: Un espacio que no puede romperse al final de la lnea. Su
codificacin HTML es .

Salto de lnea manual: Un salto de lnea explcito. Su codificacin HTML es <br> (<br />
conforme con XHTML).
Nota: Las etiquetas <NOBR> </NOBR> hacen lo contrario, impidiendo que el navegador
rompa una lnea automticamente.

Comentarios
Se puede agregar informacin a una pgina Web sin que sea visible en la pantalla mediante un
conjunto de etiquetas llamadas etiquetas con comentarios.
<!-- Este es un comentario -->
Las etiquetas para comentarios se utilizan para realizar comentarios sobre un texto, pero
tambin pueden usarse para comentar el propio cdigo HTML.
Nota: Nota: La nica excepcin es el cdigo contenido dentro de las etiquetas <PRE>, cuyo
objetivo principal es mantener el texto formateado (espacios, saltos de lnea, etc.).

54

COMPUTACIN

Liceo Real de Cid

Cdigos de caracteres especiales

Prof. Selvin de Paz

Los estndares HTML requieren que todos los cdigos se escriban en 7 bits ASCII, lo que
significa que no estn permitidos los caracteres acentuados.
A pesar de esto, los navegadores actuales reconocen los caracteres acentuados: puede escribir
caracteres acentuados
directamente en su editor
de texto, pero su pgina no Carcter Cdigo ISO Cdigo HTML ser legible en la mayora
de los pases.

"

&#34;

&quot;

Para codificar un carcter

&

&#38;

&amp;

&#139;

&lt;

&#155;

&gt;

cadena determinada
de unin (&) y terminando
es una lista de las
para caracteres ASCII

acentuado, introduzca una

comenzando con un smbolo
con punto y coma (;). Esta
representaciones HTML
desde 128 a 255:

Carcter Cdigo ISO Cdigo HTML Smbolos HTML de codificacin

"

&#34;

&quot;

&

&#38;

&amp;

en forma de la pgina, son

usan muy frecuentemente
HTML. El carcter < es

&#128;

&euro;

&#129;

ya que el navegador lo
apertura de una nueva

&#130;

&#131;

&#132;

&#133;

&#134;

&#135;

&#136;

&#137;

&#138;

Algunos caracteres tienen

HTML, estos son muy

Cuando estos caracteres

sitio Web, tambin deben
HTML; de otra forma, el
la pgina con errores.

55

un uso particular en el
importantes para la puesta
los caracteres <, >, " y &se
en el lenguaje de marcado
especialmente importante,
interpreta como la
etiqueta HTML.
se usan en texto de un
estar codificados en
navegador puede mostrar

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

&#139;

&#140;

&#141;

&#142;

&#143;

&#144;

&#145;

&#146;

&#147;

&#148;

&#149;

&#150;

&#151;

&#152;

&#153;

&#154;

&#155;

&gt;

&#156;

&oelig;

&#157;

&#158;

&#159;

&Yuml;

espacio &#160;

&nbsp;

&#161;

&iexcl;

&#162;

&cent;

56

&lt;

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

&#163;

&pound;

&#164;

&curren;

&#165;

&yen

&#166;

&brvbar;

&#167;

&sect;

&#168;

&uml;

&#169;

&copy;

&#170;

&ordf;

&#171;

&laquo;

&#172;

&not;

&#173;

&shy;

&#174;

&reg;

&#175;

&masr;

&#176;

&deg;

&#177;

&plusmn;

&#178;

&sup2;

&#179;

&sup3;

&#180;

&acute;

&#181;

&micro;

&#182;

&para;

&#183;

&middot;

&#184;

&cedil;

&#185;

&sup1;

&#186;

&ordm;

&#187;

&raquo;

57

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

&#188;

&frac14;

&#189;

&frac12;

&#190;

&frac34;

&#191;

&iquest;

texto. Pueden anidarse con

as como con programas

textos.

etiquetas de estilo

&#192;

&Agrave;

&#193;

&Aacute;

&#194;

&Acirc;

reconocidas por la mayora

&#195;

&Atilde;

&#196;

&Auml;

cual a su manera aunque

efectos idnticos):

&#197;

&Aring;

&#198

&Aelig

&#199;

&Ccedil;

&#200;

&Egrave;

&#201;

&Eacute;

&#202;

&Ecirc;

&#203;

&Euml;

&#204;

&Igrave;

&#205;

&Iacute;

&#206;

&Icirc;

&#207;

&Iuml;

&#208;

&eth;

&#209;

&Ntilde;

&#210;

&Ograve;

&#211;

&Oacute;

&#212;

&Ocirc;

Etiqueta de estilo
Las etiquetas de estilo

de los navegadores (cada

algunos pueden tener

58

modifican la tipografa del

otras etiquetas de estilo,
para el procesamiento de
Esta es una lista de las

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

&#213;

&Otilde;

&#214;

&Ouml;

&#215;

&times;

&#216;

&Oslash;

&#217;

&Ugrave;

&#218;

&Uacute;

&#219;

&Ucirc;

&#220;

&Uuml;

&#221;

&Yacute;

&#222;

&thorn;

&#223;

&szlig;

&#224;

&agrave;

&#225;

&aacute;

&#226;

&acirc;

&#227;

&atilde;

&#228;

&auml;

&#229;

&aring;

&#230;

&aelig;

&#231;

&ccedil;

&#232;

&egrave;

&#233;

&eacute;

&#234;

&ecirc;

&#235;

&euml;

&#236;

&igrave;

&#237;

&iacute;

59

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

&#238;

&icirc;

&#239;

&iuml;

&#240;

&eth;

&#241;

&ntilde;

&#242;

&ograve;

&#243;

&oacute;

&#244;

&ocirc;

&#245;

&otilde;

&#246;

&ouml;

&#247;

&divide;

&#248;

&oslash;

&#249;

&ugrave;

&#250;

&uacute;

&#251;

&ucirc;

&#252;

&uuml;

&#253;

&yacute;

&#254;

&thorn;

&#255;

&yuml;

Etiqueta de estilo Efecto Visual

<ABBREV>

Abreviatura

<ACRONYM>

Acrnimo

<AU>

Autor

<B>

Crea texto en negrilla

<BIG>

Fuente ms grande

<BLINK>

Texto que parpadea (solamente Netscape)

60

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<CITE>

Cita

<CODE>

Instrucciones (cdigo de programacin)

<DEL>

Muestra el texto que ha sido eliminado

<DFN>

Definicin de un trmino

<EM>

nfasis

<I>

Itlicas

<INS>

Texto nuevo insertado aqu

<KBD>

Teclado - Muestra exactamente cmo deben escribirse los caracteres

<PERSON>

Acenta al nombre de una persona

<Q>

Enmarca el texto entre comillas

<S>

Tacha

<SAMP>

Ejemplo

<SMALL>

Fuente ms pequea

<STRONG>

Convierte el texto en negrilla

<STRIKE>

Tacha (igual que S)

<SUB>

Subndice

<SUP>

Superndice

<TT>

Para escribir cdigo fuente

<VAR>

Nombre de la variable

Encabezados
HTML acepta seis encabezados para definir la estructura jerrquica de los prrafos en un
documento:
Etiqueta Efecto visual

61

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

H1

Prueba

H2

Prueba

H3

Prueba

H4

Prueba

H5

Prueba

H6

Prueba

Atributos
Los siguientes atributos se ubican dentro de las etiquetas de estructura, de forma que los
elementos pueden mostrarse en ubicaciones especficas:
Atributo Valor

ALIGN

Efecto visual

LEFT

Texto alineado a la izquierda

RIGHT

Texto alineado a la derecha

CENTER Texto centrado

JUSTIFY Texto justificado

NOWRAP

Evita que el navegador crea un salto de lnea.

ID

Otorga una identificacin a la etiqueta. Este atributo es

especialmente til para la programacin con JavaScript

LANG

Especifica un idioma diferente

CLASS

Asigna una clase a los contenidos (para hojas de estilo)

CLEAR

Se usa cuando el texto est rodeando una imagen. Ubica el

texto tan abajo de la pgina como sea necesario para tener
un margen claro.

Este es un ejemplo de encabezado:

<H1 ALIGN=JUSTIFY> Texto justificado </H1>

62

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Prrafos
HTML considera que los prrafos son bloques de texto. Los navegadores hacen lo posible para
adaptar el contenido de los prrafos a la ventana, a menos que los atributos NOWRAP o NOBR
estn explcitamente especificados.
Dentro de un prrafo, todos los espacios, tabuladores y saltos de lnea cuentan como un espacio
simple.
Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Esta etiqueta puede
incluir cualquiera de los atributos mencionados anteriormente.
Los saltos de lnea (saltar de una lnea a la siguiente) se crean usando la etiqueta <br/>.
La etiqueta <hr> se utiliza para insertar una lnea horizontal.
Etiqueta

Atributo Efecto visual

<br/>

Salto de lnea

<p> y </p>

Prrafo

SIZE
<hr size=5 width=20% align=left> WIDTH
ALIGN

Contenedores
Las etiquetas usadas para indentar texto se llaman contenedores.
Contenedor

<blockquote> y
</blockquote>
<address> y </address>

Efecto visual

Texto con indentacin

Para escribir informacin de contacto

63

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<note> y </note>

Para escribir una nota

<fn> y </fn>

Para crear una nota al pie

Hace que un bloque de texto adopte una posicin fija con relacin a

<banner> y </banner>

la pgina
Para escribir texto preformateado; manteniendo espacios,

<pre> y </pre>

saltos de lneas y tabuladores intactos

Listas
Una lista es un prrafo estructurado que contiene una serie de elementos. HTML define tres
tipos de listas:

Listas ordenadas;

Listas no ordenadas;

Listas de definiciones.

Lista ordenada
Contenedor

Tipo de lista

<ol>
<li> tem 1 </li>
<li> tem 2 </li>

Efecto visual

1. tem 1
Lista ordenada

2. tem 2
3. tem 3

</ol>
Lista no ordenada
Contenedor

Tipo de lista Efecto visual

<ul>

No ordenada

64

tem 1

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<li> tem 1 </li>

tem 2

<li> tem 2 </li>

tem 3

</ul>
Lista de definiciones
Contenedor

Tipo de lista Efecto visual

<dl>

tem 1

<dt>Trmino</dt>

definicin 1

<dd>Definicin</dd>

Definicin

</dl>

tem 2
definicin 2

Atributos
Hay varios atributos utilizados nicamente en listas:
Atributo

Valor

Efecto visual

COMPACT

estrecha el espacio entre lneas

(listas ms compactas)

PLAIN

elimina las vietas

SEQNUM

Define el primer nmero

START

Define el primer nmero

CONTINUE

comienza en el nmero donde

la lista se haba detenido

TYPE (para listas ordenadas)

Nmeros arbigos (predeterminado)

Letras maysculas

Letras minsculas

65

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

I

Nmeros romanos (I, II, III, IV ...)

Nmeros romanos en minsculas

Circle
TYPE (para listas no ordenadas) Square
Disc

Vieta circular

Vieta cuadrada

Vieta slida, redonda

Tablas
A menudo resulta til presentar informacin de una manera ms estructurada que en las listas.
Las tablas permiten mostrar esta informacin en filas y columnas. Las tablas se definen como
series de filas.
Una tabla debe respetar las siguientes reglas:

La tabla est enmarcada por las etiquetas <TABLE> y </TABLE>.

El ttulo de la tabla est enmarcado por <CAPTION> </CAPTION>

Cada fila est enmarcada por<TR> </TR> (por Table Row).

Las celdas de encabezamiento estn enmarcadas por <TH> </TH> (por Table Header).

Los datos en cada celda estn enmarcados por <TD> </TD> (Table Data).

Este es un ejemplo de tabla HTML:

<table border="1">
<caption>este es el ttulo de la tabla</caption>
<tr>
<th> ttulo a1 </th>
<th> ttulo a2 </th>
<th> ttulo a3 </th>
<th> ttulo a4 </th>
</tr>
<tr>

66

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<th> ttulo b1 </th>

<td> valor b2 </td>
<td> valor b3 </td>
<td> valor b4 </td>
</tr>
</table>
Los resultados de este cdigo:
Este es el ttulo de la tabla
Ttulo A1 Ttulo A2 Ttulo A3 Ttulo A4
Ttulo B1 Valor B2 Valor B3 Valor B4
Atributos
Atributo

ALIGN

Etiquetas a las
que se aplica

Valor

THEAD

CENTER Centrado

TBODY
TH
TR

LEFT

Izquierda

RIGHT

Derecha

TD

JUSTIFY Justificado
TOP

CAPTION

BORDER=n

Arriba

BOTTOM Abajo

THEAD
VALIGN
(alineacin vertical)

Efecto visual

TOP

TBODY
TH

Arriba

MIDDLE Medio

TR
TD

BOTTOM Abajo

TABLE

Tamao del borde

67

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Deja n pxeles de espacio entre

CELLPADDING=n

TABLE

los contenidos de la celda y el

borde

CELLSPACING=n

TABLE

Grosor del espacio entre celdas

FLOAT

TABLE

COLS=n

TABLE

LEFT

</TABLE>

NONE

Ninguno

Arriba

Arriba

BOTTOM Abajo

TABLE

TOPBOT arriba de todo

tabla)

RULES
(controla los elementos de la
cuadrcula de la celda)

Posicin del texto que sigue a

Nmero de columnas

FRAME
(controla los elementos
individuales del marco de la

RIGHT

TABLE

SIDES

A los costados

ALL

Todo

NONE

Ninguno

BASIC

Bsica

ROWS

Lnea

COLS

Columna

ALL

Todo

THEAD
TBODY
COLSPAN

Hace que las celdas desborden

TH
TR

sobre las columnas adyacentes

TD
THEAD
ROWSPAN

TBODY
TH
TR

Hace que las celdas desborden

sobre las filas adyacentes

TD

68

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Hipervinculos
Los vnculos de hipertexto o hipervnculos (anclajes) son elementos de una pgina HTML que, al
hacer clic sobre ellos, permiten a los lectores navegar hacia una nueva direccin. (el hipervnculo
aparece subrayado de forma predeterminada). Al navegar por la Web, los hipervnculos son los
que conectan las pginas Web unas con otras. Se usan para dirigirse:

a otro punto en el mismo documento

a un archivo HTML en una ubicacin diferente del equipo que aloja la pgina

a otro equipo

El principal atributo de los anclajes es href. Se escribe as:

<a href="Direccin o URL"> .. </a>
Vnculos externos
Un vnculo externo es un vnculo a una pgina *** mediante su direccin URL
. Por ejemplo:
<a href="http://www.commentcamarche.net">Comment a marche? </a>
Vnculos locales
Un vnculo puede apuntar a una pgina ubicada en el mismo equipo, reemplazando la direccin URL
con el archivo de destino.
Esta ubicacin del vnculo puede definirse de forma relativa, describiendo el archivo de destino
con relacin al archivo fuente. Si el archivo fuente es "index.html" ubicado en el directorio
principal puede escribirse un vnculo hacia l:
<a href="../index.html"> ... </a>
Este vnculo puede definirse de forma absoluta escribiendo la direccin del archivo de destino:
<a href="file:///drive:/directory/index.html"> ... </a>
Vnculos locales
Tambin es posible crear un enlace a un punto dentro de una pgina, es decir, marcar un punto
preciso en la pgina donde el hipervnculo llevar al lector. Los vnculos internos se definen con el
atributo NAME o ID. La sintaxis siguiente debe usarse cuando desee que el destino sea:
<a name="vnculo_interno"> ... </a>

69

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Este es el vnculo a esa ubicacin:

<a href="#vnculo_interno"> ... </a>
Con estas etiquetas, puede permitir al usuario subir o bajar por la pgina, o acceder a una
seccin especial en otra pgina:
<a href="url/nombre_archivo.html#vnculo_interno"> ... </a>

Imgenes
Tener algunas imgenes en un sitio Web lo hace ms atractivo e intuitivo. Sin embargo, es
importante no excederse ya que las imgenes pueden llevar mucho tiempo en cargarse y, en
algunos casos, pueden hacer que un documento sea ms difcil de leer.
La etiqueta IMG se usa para insertar imgenes en pginas HTML. La imagen puede ubicarse en el
mismo servidor que la pgina en la que se inserta, pero tambin puede ubicarse en un servidor
diferente si se especifica la direccin URL completa.
Solamente se admiten los siguientes formatos de imagen en los estndares W3C:

imgenes JPEG (.JPG): Imgenes con un gran nmero de colores que han sido comprimidas
en un alto grado para reducir su tamao, de modo que requieren menos tiempo para la
descarga,

imgenes PNG: Tienen un tamao ms pequeo cuando la imagen tiene un nmero reducido
de colores slidos. Este formato permite tambin imgenes entrelazadas (que aparecen
progresivamente) con colores de 24 bits e imgenes en las que uno de los colores se ha
definido como transparente.

imagen GIF: Tienen las mismas ventajas que las imgenes PNG, aunque el formato GIF se
limita a 256 colores y sea un formato no completamente abierto.

Cmo mostrar imgenes en una pgina Web?

Cmo insertar una imagen en una pgina Web? Los principales atributos de la etiqueta IMG son:

SRC: Muestra la ruta donde se ubica la imagen (obligatorio).

ALIGN: Especfica cmo est alineada la imagen en relacin al texto adyacente. Los
valores posibles son TOP, MIDDLE y BOTTOM (encima, en el medio, debajo).

ALT: Permite insertar un texto alternativo cuando la imagen no aparece. Muestra un texto
alternativo si no aparece la imagen.

70

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

TITLE: Muestra informacin cuando el cursor se desplaza sobre la imagen.

WIDTH: Especifica el ancho de la imagen.

HEIGHT: Especifica la altura de la imagen.

As, para insertar una imagen, esta es la clase de etiqueta que debe utilizarse:
<IMG SRC="url_de_imagen"
ALT="Texto alternativo"
TITLE="Texto a mostrar">
Atributo

Valor

Resultado

Efecto visual

Bottom
ALIGN

center
left
middle

Alineacin de imagen.

top
right
Muestra un texto alternativo si no aparece la
imagen.

ALT

Nmero de pxeles en el borde de la imagen. El

BORDER

Nmero
entero

color del borde puede definirse por el atributo

LINK o TEXT de la etiqueta <BODY>. De forma
predeterminada, el atributo BORDER se
establece en 1 para crear un pequeo marco
alrededor de la imagen. Si no lo quiere, puede
establecer el valor en 0.
Altura de la imagen (en pxeles o en %). Cuando
este atributo especifica un tamao diferente a la

HEIGHT

Nmero
entero

altura original del grfico, el navegador

automticamente lo restaura al tamao original,
lo que puede disminuir la calidad de la imagen
mostrada.

HSPACE

Nmero
entero

Nmero de pxeles de ajuste entre la imagen y el

texto adyacente (horizontalmente).

71

Texto
COMPUTACIN

Liceo Real de Cid

LONGDESC

LOWSRC

Prof. Selvin de Paz

URL de la descripcin de la imagen.

Direcciones
URL

Una imagen alternativa (generalmente ms

pequea) que se muestra mientras la imagen real
se carga en el navegador.
Establece el nombre de la imagen. Este atributo

NAME

se usa principalmente para imgenes en

JavaScript.
Direcciones

SRC

URL

La direccin URL de la imagen.

TITLE

Muestra un texto alternativo si no aparece la

imagen.

USEMAP

URL o nombre del anclaje que define la imagen

mapeada.

VSPACE

Nmero de pxeles de ajuste entre la imagen y el

texto adyacente (verticalmente).

Prueba de texto

Ancho de la imagen (en pxeles o en %). Cuando

este atributo especifica un tamao diferente al
WIDTH

Nmero
entero

ancho original del grfico, el navegador

automticamente lo restaura al tamao original,
lo que puede disminuir la calidad de la imagen
mostrada.

Rodear una imagen con texto

Las imgenes se insertan en un texto como caracteres. Esto hace que parezca imposible colocar
texto alrededor de una imagen.
Sin embargo, existen varios mtodos para hacer esto, veremos dos de ellos:

El primero implica la creacin de una tabla con una fila y dos columnas, en las que se ubican
la imagen y el texto.

72

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

El segundo (que es menos preciso) implica la alineacin de la imagen hacia la derecha o

hacia la izquierda con el atributo ALIGN y luego la escritura del texto. Si desea evitar
que el texto rodee las imgenes, use el atributo CLEAR.

Mapas de imgenes
Puede crear diferentes reas de seleccin dentro de una misma imagen usando el atributo
USEMAP conjuntamente con la etiqueta MAP
El atributo USEMAP de la etiqueta <IMG> apunta a una etiqueta <MAP> que contiene una
descripcin de las reas seleccionables en las que se divide el mapa.
La etiqueta <MAP> tiene un atributo NAME para definir su nombre, y tambin declara qu reas
son accesibles usando las etiquetas AREA.
Etiqueta Atributo Valor
MAP

Efecto visual

NAME

RECT

Rectngulo (sus coordenadas son:

"abscisa superior izquierda, ordenada superior izquierda,
abscisa inferior derecha, ordenada inferior derecha")

SHAPE

CIRCLE

Crculo (sus coordenadas son:

"abscisa de centro, ordenada de centro, radio")
Polgono (sus coordenadas son:

AREA

POLY

HREF

Direcciones
URL

COORDS "XX,XX,XX,XX"

"lista de coordinadas, separadas por comas

")
Vnculo a URL
Contiene las coordenadas del rea accesible, separadas por
comas.

A continuacin hay un ejemplo de un mapa de imagen:

<IMG SRC="images/image.gif"
WIDTH=150
HEIGHT=70
USEMAP="#Map">
<MAP NAME="Map">
<AREA SHAPE="rect"

73

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

HREF="start.html"
COORDS="0,0,48,28">

<AREA SHAPE="circle"
HREF="previous.html"
COORDS="50,30,10">

<AREA SHAPE="poly"
HREF="next.html"
COORDS="60,50,80,30,100,40,50,100">
</MAP>
Insertar una imagen de fondo
Una imagen de fondo de una pgina Web puede aplicarse usando la etiqueta <BODY>:
Atributo

Efecto visual

BACKGROUND="imagen"

Muestra la imagen como fondo

BGCOLOR="nombre_del_color o #XXXXXX" Muestra el color especificado como fondo

VNCULO="color"

Establece el color de los hipervnculos

ALINK="color"

Establece el color del vnculo activo

VLINK="color"

Establece el color de los vnculos ya visitados

TEXTO="color"

Color del texto predeterminado

Los colores se definen usando la notacin #RRGGBB, donde RR, GG y BB representa cada uno un valor
hexadecimal entre 00 y FF para rojo, verde y azul, respectivamente.

74

COMPUTACIN

Liceo Real de Cid

Codificacin de colores

Prof. Selvin de Paz

En HTML, los colores se definen mediante tres nmeros hexadecimales que representan los tonos rojo, azul y
verde, usando la codificacin RGB) del color elegido. Esta es la sintaxis para codificar un color en HTML:
color="#RRGGBB"

RR, GG y BB representan, cada uno, un nmero hexadecimal entre 00 y FF para el rojo, el verde y el azul
respectivamente.
Con esta sintaxis, se pueden utilizar ms de 16 millones de colores en las pginas Web. Sin embargo como no
todos los navegadores reconocen los colores del mismo modo, W3C recomienda usar los colores a
continuacin, que han recibido nombres especficos. Por lo tanto, puede (y se aconseja) representar los colores
de esta forma:
color="color_name"

Nombre
del color
IndianRed
LightCoral
Salmon
DarkSalmon
LightSalmon
Crimson
Red
FireBrick
DarkRed
Pink
LightPink
HotPink
DeepPink
MediumVioletRed
PaleVioletRed
LightSalmon
Coral
Tomato
OrangeRed
DarkOrange
Orange
Gold
Yellow

Color
Hexadecimal
#CD5C5C
#F08080
#FA8072
#E9967A
#FFA07A
#DC143C
#FF0000
#B22222
#8B0000
#FFC0CB
#FFB6C1
#FF69B4
#FF1493
#C71585
#DB7093
#FFA07A
#FF7F50
#FF6347
#FF4500
#FF8C00
#FFA500
#FFD700
#FFFF00

Color RGB

Color

205,92,92
240,128,128
250,128,114
233,150,122
255,160,122
220,20,60
255,0,0
178,34,34
139,0,0
255,192,203
255,182,193
255,105,180
255,20,147
199,21,133
219,112,147
255,160,122
255,127,80
255,99,71
255,69,0
255,140,0
255,165,0
255,215,0
255,255,0

75

COMPUTACIN

Liceo Real de Cid

LightYellow
LemonChiffon
LightGoldenrodYellow
PapayaWhip
Moccasin
PeachPuff
PaleGoldenrod
Khaki
DarkKhaki
Lavender
Thistle
Plum
Violet
Orchid
Fuchsia
Magenta
MediumOrchid
MediumPurple
BlueViolet
DarkViolet
DarkOrchid
DarkMagenta
Purple
Indigo
SlateBlue
DarkSlateBlue
GreenYellow
Chartreuse
LawnGreen
Lime
LimeGreen
PaleGreen
LightGreen
MediumSpringGreen
SpringGreen
MediumSeaGreen
SeaGreen
ForestGreen

Prof. Selvin de Paz

#FFFFE0
#FFFACD
#FAFAD2
#FFEFD5
#FFE4B5
#FFDAB9
#EEE8AA
#F0E68C
#BDB76B
#E6E6FA
#D8BFD8
#DDA0DD
#EE82EE
#DA70D6
#FF00FF
#FF00FF
#BA55D3
#9370DB
#8A2BE2
#9400D3
#9932CC
#8B008B
#800080
#4B0082
#6A5ACD
#483D8B
#ADFF2F
#7FFF00
#7CFC00
#00FF00
#32CD32
#98FB98
#90EE90
#00FA9A
#00FF7F
#3CB371
#2E8B57
#228B22

255,255,224
255,250,205
250,250,210
255,239,213
255,228,181
255,218,185
238,232,170
240,230,140
189,183,107
230,230,250
216,191,216
221,160,221
238,130,238
218,112,214
255,0,255
255,0,255
186,85,211
147,112,219
138,43,226
148,0,211
153,50,204
139,0,139
128,0,128
75,0,130
106,90,205
72,61,139
173,255,47
127,255,0
124,252,0
0,255,0
50,205,50
152,251,152
144,238,144
0,250,154
0,255,127
60,179,113
46,139,87
34,139,34

76

COMPUTACIN

Liceo Real de Cid

Green
DarkGreen
YellowGreen
OliveDrab
Olive
DarkOliveGreen
MediumAquamarine
DarkSeaGreen
LightSeaGreen
DarkCyan
Teal
Aqua
Cyan
LightCyan
PaleTurquoise
Aquamarine
Turquoise
MediumTurquoise
DarkTurquoise
CadetBlue
SteelBlue
LightSteelBlue
PowderBlue
LightBlue
SkyBlue
LightSkyBlue
DeepSkyBlue
DodgerBlue
CornflowerBlue
MediumSlateBlue
RoyalBlue
Blue
MediumBlue
DarkBlue
Navy
MidnightBlue
Cornsilk
BlanchedAlmond

Prof. Selvin de Paz

#008000
#006400
#9ACD32
#6B8E23
#808000
#556B2F
#66CDAA
#8FBC8F
#20B2AA
#008B8B
#008080
#00FFFF
#00FFFF
#E0FFFF
#AFEEEE
#7FFFD4
#40E0D0
#48D1CC
#00CED1
#5F9EA0
#4682B4
#B0C4DE
#B0E0E6
#ADD8E6
#87CEEB
#87CEFA
#00BFFF
#1E90FF
#6495ED
#7B68EE
#4169E1
#0000FF
#0000CD
#00008B
#000080
#191970
#FFF8DC
#FFEBCD

0,128,0
0,100,00
154,205,50
107,142,35
128,128,0
102,205,170
143,188,143
32,178,170
0,139,139
0,128,128
0,255,255
0,255,255
224,255,255
175,238,238
127,255,212
64,224,208
72,209,204
0,206,209
95,158,160
70,130,180
176,196,222
176,224,230
173,216,230
135,206,235
135,206,250
0,191,255
30,144,255
100,149,237
123,104,238
65,105,225
0,0,255
0,0,205
0,0,139
0,0,128
25,25,112
255,248,220
255,235,205

77

COMPUTACIN

Liceo Real de Cid

Bisque
NavajoWhite
Wheat
BurlyWood
Tan
RosyBrown
SandyBrown
Goldenrod
DarkGoldenrod
Peru
Chocolate
SaddleBrown
Sienna
Brown
Maroon
White
Snow
Honeydew
MintCream
Azure
AliceBlue
GhostWhite
WhiteSmoke
Seashell
Beige
OldLace
FloralWhite
Ivory
AntiqueWhite
Linen
LavenderBlush
MistyRose
Gainsboro
LightGrey
Silver
DarkGray
Gray
DimGray

Prof. Selvin de Paz

#FFE4C4
#FFDEAD
#F5DEB3
#DEB887
#D2B48C
#BC8F8F
#F4A460
#DAA520
#B8860B
#CD853F
#D2691E
#8B4513
#A0522D
#A52A2A
#800000
#FFFFFF
#FFFAFA
#F0FFF0
#F5FFFA
#F0FFFF
#F0F8FF
#F8F8FF
#F5F5F5
#FFF5EE
#F5F5DC
#FDF5E6
#FFFAF0
#FFFFF0
#FAEBD7
#FAF0E6
#FFF0F5
#FFE4E1
#DCDCDC
#D3D3D3
#C0C0C0
#A9A9A9
#808080
#696969

255,228,196
255,222,173
245,222,179
222,184,135
210,180,140
188,143,143
244,164,96
218,165,32
184,134,11
205,133,63
210,105,30
139,69,19
160,82,45
165,42,42
128,0,0
255,255,255
255,250,250
240,255,240
245,255,250
240,255,255
240,248,255
248,248,255
245,245,245
255,245,238
245,245,220
253,245,230
255,250,240
255,255,240
250,235,215
250,240,230
255,240,245
255,228,225
220,220,220
211,211,211
192,192,192
169,169,169
128,128,128
105,105,105

78

COMPUTACIN

Liceo Real de Cid

LightSlateGray
SlateGray
DarkSlateGray
Black

Prof. Selvin de Paz

#778899
#708090
#2F4F4F
#000000

119,136,153
112,128,144
47,79,79
0,0,0

Formularios
Los formularios interactivos permiten a los autores de pginas Web poner elementos
interactivos en sus pginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar
a las cartas de respuestas que se encuentra en algunas revistas.
El lector escribe la informacin rellenando campos o haciendo clic sobre botones, y luego
presiona un botn de envo para enviarla a una direccin URL que se suele dirigir a una direccin
de correo electrnico o a un script dinmico Web como PHP, ASP o CGI.

La etiqueta FORM
Los formularios estn delimitados con la etiqueta <FORM> ... </FORM>, que permite reunir
varios elementos de formulario, como botones y casillas de texto y que debe poseer los
siguientes atributos:

METHOD indica cmo se enviarn las respuestas

"POST" es el valor que enva los datos al agente de procesamiento almacenndolos en el
cuerpo del formulario, en tanto que "GET" enva los datos agregndolos a la direccin URL
y separndolos de la direccin con un signo de interrogacin (para aprender ms sobre los
mtodos POST y GET, consulte el artculo sobre protocolo HTTP)
ACTION indica la direccin a la que se enviar la informacin (un script CGI o direccin
de correo electrnico (mailto:direccin_de_correo_e@equipo))

Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cmo se codifican los
datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor
predeterminado (application/x-www-form-urlencoded) es el nico valor vlido. El atributo
opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede
enviar.
Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM>

79

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Aqu hay algunos ejemplos de las etiquetas FORM:

<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">
<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">

Dentro de la etiqueta FORM

La etiqueta FORM acta como una especie de contenedor para almacenar elementos que
permiten al usuario seleccionar o introducir datos. Todos los datos se enviarn a la direccin
URL indicada en el atributo ACTION de la etiqueta FORM, por el mtodo indicado en el atributo
METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas
y enlaces), pero los elementos interactivos son los ms interesantes. Estos elementos
interactivos son:

La etiqueta INPUT: Todos los botones y casillas de texto

La etiqueta TEXTAREA: una casilla de texto
La etiqueta SELECT: una lista de opciones mltiples

Envo de datos
Cuando se enva un formulario (haciendo clic en el botn de envo), los datos del formulario se
envan a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos
representados por el nombre del elemento formulario, un signo igual ("=") y luego el valor
asociado. Estos pares nombre/valor se separan unos de otros mediante el smbolo de unin ("&").
Por lo tanto, los datos que se envan al script se vern as:
campo1=valor1&field2;=valor2&field3;=valor3

Con el mtodo GET (enviar los datos mediante una direccin URL), la URL ser una cadena como la siguiente:
http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2

La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear
muchos elementos interactivos. La sintaxis de esta etiqueta es la siguiente:
<INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">

El atributo name es esencial, ya que permite al script CGI reconocer qu campo est asociado
con un par nombre/valor, lo que significa que el nombre del campo estar seguido de un signo

80

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

igual ("=") seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningn valor,
por el valor predeterminado de la etiqueta value.
El atributo type se usa para especificar qu tipo de elemento se representa con la etiqueta
INPUT. Estos son los valores posibles:

checkbox: Las casillas de eleccin pueden adoptar uno de dos estados: checked
(seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par
nombre/valor se enva al CGI.
hidden: Este campo, que el navegador no muestra, es para definir una configuracin nica
que se enviar al CGI como par nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo
que se enviar con el formulario. Los tipos de archivo que pueden ser enviados deben
especificarse utilizando el atributo ACCEPT de la etiqueta FORM.
image: Un botn de envo personalizado que aparece cuando se ubica una imagen en la
ubicacin definida por el atributo SRC.
password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos
para camuflar el texto de entrada.
radio: Un botn que permite al usuario elegir entre varias opciones. Cada uno de estos
botones debe tener el mismo atributo name. El par nombre/valor del botn radio
seleccionado se enviar al CGI. Al aplicar el atributo checked para uno de estos botones
se definir como seleccionado de forma predeterminada.
reset: Un botn de restauracin para quitar todos los elementos en el formulario y
restablecer sus valores predeterminados.
submit: Un botn de envo para enviar el formulario. El texto en el botn puede definirse
usando el atributo value.
text: Una casilla de texto para escribir una lnea de texto. El tamao de la casilla puede
definirse usando el atributo size y la extensin mxima del texto con el atributo
maxlength.

La etiqueta TEXTAREA

La etiqueta TEXTAREA se usa para definir un cuadro de texto ms grande que la lnea simple
propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:

cols: representa el nmero de caracteres que puede contener un lnea

rows: representa el nmero de lneas
name: representa el nombre asociado con el cuadro de texto, que permite su
identificacin en el par nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado en el campo
value: representa el valor predeterminado que se enviar al script si el usuario no ha
escrito nada en el cuadro de texto

81

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

La etiqueta SELECT
La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las
etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:

name: name: representa el nombre asociado con la casilla de texto, que permite su
identificacin en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor puede ser ms grande que el
nmero de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista

Ejemplo de formulario
Los formularios pueden ubicarse en una pgina usando tablas (algo recomendable para una
presentacin profesional). Este es un ejemplo que resume los puntos precedentes, mostrndole
cmo disponer un formulario en una pgina Web mediante una tabla:
<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR>
<TD>Apellido</TD>
<TD>
<INPUT type=text name="apellido">
</TD>
</TR>
<TR>
<TD>Nombre</TD>
<TD>
<INPUT type=text name="nombre">
</TD>
</TR>
<TR>
<TD>Gnero</TD>
<TD>
Hombre:
Mujer: <INPUT type=radio name="gnero" value="M">
<br>Mujer: <INPUT type=radio name="gnero" value="F">
</TD>
</TR>
<TR>
<TD>Ocupacin</TD>

82

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<TD>
<SELECT name="ocupacin">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Comentarios</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Escriba aqu sus comentarios</TEXTAREA>
Enviar
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
Esto es lo que aparece en la pantalla:
Registro de usuario
Apellido
Nombre
Hombre: Mujer:

Gnero

Mujer:
Ocupacin
Es c riba aqu s us c omentarios

Comentarios

83

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Principio del formulario

Atributos de etiquetas FORM y tipos de entrada

Etiqueta

Atributo
METHOD

<FORM> ... </FORM>

Valor
POST
GET

ACTION
ENCTYPE
submit

text
TYPE
<INPUT>

lnea simple de
texto cuya
longitud
se especifica
por el atributo
SIZE
Elimina el
contenido del
formulario

Radio

botn de radio

NAME
SIZE
NAME
ROWS

Efecto visual

Enva a la
direccin
mostrada
Especifica el tipo
de cdigo
realiza la ACTION
de la etiqueta
<FORM>

Reset

Checkbox

<TEXTAREA> ... </TEXTAREA>

Resultado

casilla de
seleccin
Nombre
Tamao del texto
Casilla de texto

COLS

<SELECT>

<OPTION>
</OPTION>

</SELECT>

<OPTION> ... </OPTION>

NAME

Mltiples
selecciones
posibles

MULTIPLE

SELECTED

Eleccin
predeterminada

84

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

VALUE

Valor forzado

Introduccin a los metadatos

Los metadatos son informacin ubicada dentro de un documento con el propsito de describirlo.
Se utilizan para ayudar a los motores de bsqueda a crear un ndice de las pginas Web. Al
utilizar etiquetas que el navegador no muestra, se incluye la informacin sobre la pgina o el sitio
para describir mejor sus contenidos. En particular, puede contener informacin sobre los
autores del documento, su fecha de vencimiento, el idioma usado, etc.
Estos metadatos o "Meta tags" son etiquetas especiales que se encuentran en el encabezado del
documento (la etiqueta HEAD se encuentra antes de la etiqueta BODY) para ofrecer informacin
de forma que los motores de bsqueda pueden indexar las pginas.

Hay dos tipos distintos de metadatos:

Los metadatos NAME , para describir pginas HTML:

<META NAME="Tag Name" CONTENT="Attribute">

Los metadatos HTTP-EQUIV, para enviar informacin adicional al navegador mediante el

protocolo HTTP:
<META HTTP-EQUIV="Tag Name" CONTENT="Attribute">

Pueden incluirse varios metadatos, uno despus de otro, en el encabezado de una pgina.

Metadatos NAME

Nombre de la
etiqueta

Atributo

Uso

Author

"Informacin sobre el autor"

Informacin sobre el autor de la pgina

Copyright

Informacin de Copyright

Brinda informacin sobre los derechos de autor

85

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Description

"Descripcin de su sitio"

Da informacin que aparece en los resultados de una

bsqueda.

Expires

never
"fecha de vencimiento de la
pgina"

Informa al robot cundo caducar la pgina.

Generator

Nombre del software

Nombre del editor HTML que gener la pgina Web.

Keywords

"palabra clave, palabra clave,

etc."

Palabras clave que describen la pgina Web.

Rating

general

Tipo de contenido (pblico apuntado).

Rev

Su@correo electrnico

La direccin de correo electrnico del Webmaster.

Revisit-after

"x das" donde x es el nmero de

Periodo de tiempo antes de una nueva visita del robot
das

Robots

all
none

Permite a los robots indexar la pgina

Evita que los robots la indexen

Subject

"Tema de la pgina"

Especifica el tema de la pgina

Metadatos HTTP-EQUIV

Nombre de la
etiqueta

Atributo

Uso

Pragma

no-cache

Evita que el buscador mantenga la pgina en su cach

Refresh

X;
Carga otra pgina (ubicada en la direccin URL especificada) luego de
URL="address" esperar x cantidad de segundos.

Robots

all
follow
index
nofollow
noindex
none

Permite al robot indexar la pgina entera (predeterminado)

Permite al robot seguir los vnculos de la pgina
Permite al robot indexar la pgina
Evita que el robot siga los vnculos
Evita que el robot indexe la pgina
Detiene la indizacin del robot

Window-target

_blank
_top

Obliga al buscador a mostrar la pgina en un nueva ventana

Muestra la pgina a tamao completo (no en un marco)

86

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Creacin de marcos
Para crear un sitio Web que contenga marcos, basta con crear un archivo con la disposicin de
los marcos. Este archivo HTML es especial ya que usa la etiqueta <FRAMESET> en lugar de la
etiqueta <BODY>. <FRAMESET> es la etiqueta que define los tamaos de los marcos por sus
dimensiones en pxeles o porcentajes (%).
Estos son tres ejemplos:

2 marcos verticales
2 marcos horizontales
1 marco vertical y 2 horizontales

Ejemplo N 1

<FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAME

SRC="frame2.htm" NAME="right"> </FRAMESET>

Ejemplo N 2

<FRAMESET ROWS="20%, 80%">

<FRAME SRC="frame1.htm" NAME="left">
<FRAME SRC="frame2.htm" NAME="right">
</FRAMESET>

Ejemplo N 3

<FRAMESET COLS="20%, 80%">

87

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<FRAME SRC="frame1.htm" NAME="left">

<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm" NAME="upper_right">
<FRAME SRC="frame3.htm" NAME="lower_right">
</FRAMESET>

Atributos de la etiqueta <FRAMESET>

Atributo

Valor

Accin

Rows

porcentaje (entre 1 y 100)

valor en pxeles
Marco horizontal
Estableciendo uno de los valores y asignando al otro el valor *, el
valor se ajusta automticamente.

Cols

porcentaje en pxeles
Estableciendo uno de los valores y asignando al otro el valor *, el Marco vertical
valor se ajusta automticamente.

Frameborder

YES
NO

Indica si el marco tiene o

no un borde

Border=n

n es un valor que define el tamao del borde

Indica el tamao del

borde

Bordercolor

Nombre del color

Valor hexadecimal del color

Indica el color del borde

Framespacing=n n es el valor que define el espacio entre los marcos

Indica el espacio entre los

marcos

Atributos de la etiqueta <FRAMESET>

La etiqueta <FRAME>se usa para definir uno o varios marcos dentro de la etiqueta <FRAMESET>

88

COMPUTACIN

Liceo Real de Cid

Atributo

Prof. Selvin de Paz

Valor

Accin

Src

Direcciones URL

Define la ubicacin de la pgina que se debe mostrar en el

marco

NAME

"Nombre"

Define un nombre que permitir mostrar otro documento en

el marco mediante el atributo Target

Marginwidth=n

n es un entero que especifica

Tamao de los mrgenes laterales
el nmero de pxeles

Marginheight=n

n es un entero que especifica

Tamao de los mrgenes superior e inferior
el nmero de pxeles

Frameborder

YES
NO

Border=n

n es un entero que especifica N es un entero que especifica el valor en pxeles. Tamaos del
el nmero de pxeles
espacio entre los marcos (solamente para Netscape)

Noresize

(Ninguna)

Impide que el usuario modifique los marcos (No es el valor

predeterminado)

Scrolling

YES
NO
AUTO

Habilita o no las barras de desplazamiento (Auto permite que

el navegador decida si es necesario o no habilitarlas)

Determina si los marcos tienen o no borde

Cmo pueden evitarse errores que surgen de navegadores no compatibles?

Las etiquetas <NOFRAMES> y </NOFRAMES> se usan para especificar qu texto HTML debe aparecer si el
navegador no tiene marcos habilitados. El texto entre las etiquetas <NOFRAMES> y </NOFRAMES> debe,
por lo tanto, contener las etiquetas <BODY> ... </BODY>.
Ejemplo:
<FRAMESET COLS="20%, 80%">
<FRAME SRC="frame1.htm" NAME="left">
<FRAME SRC="frame2.htm" NAME="right">
</FRAMESET>
<NOFRAMES> <BODY> Este cdigo HTML requiere un navegador que admita
marcos. Perdone las molestias. </BODY> </NOFRAMES>

89

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Designacin de un marco con un hipervnculo

Para mostrar vnculos en uno de los marcos, use el atributo TARGET en la etiqueta <A HREF ..> para
especificar el nombre del marco dado por el atributo NAME en la etiqueta <FRAME>).
Por ejemplo:
<A HREF="page.htm" TARGET="left">

Valor Accin

Accin

_self

Muestra el destino en el mismo marco que el vnculo

_parent

Muestra el destino en el marco de nivel superior siguiente

_blank

Muestra el destino en una nueva ventana

_top

Muestra el destino en toda la ventana del navegador

90

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Hojas de estilos (CSS)

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los
documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentacin y es imprescindible para crear pginas web complejas.
Separar la definicin de los contenidos y la definicin de su aspecto presenta numerosas
ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado
completo (tambin llamados "documentos semnticos"). Adems, mejora la accesibilidad del
documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento
en infinidad de dispositivos diferentes.
Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los
contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo,
titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre
elementos, posicin de cada elemento dentro de la pgina, etc.

Breve historia de CSS

Las hojas de estilos aparecieron poco despus que el lenguaje de etiquetas SGML, alrededor del
ao 1970. Desde la creacin de SGML, se observ la necesidad de definir un mecanismo que
permitiera aplicar de forma consistente diferentes estilos a los documentos electrnicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el
crecimiento exponencial del lenguaje HTML para la creacin de documentos electrnicos. La
guerra de navegadores y la falta de un estndar para la definicin de los estilos dificultaban la
creacin de documentos con la misma apariencia en diferentes navegadores.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los estndares
relacionados con la web, propuso la creacin de un lenguaje de hojas de estilos especfico para el
lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta
fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).
La propuesta CHSS fue realizada por Hkon Wium Lie y SSP fue propuesto por Bert Bos. Entre
finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor
de cada propuesta y lo llamaron CSS (Cascading Style Sheets).

91

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

En 1995, el W3C decidi apostar por el desarrollo y estandarizacin de CSS y lo aadi a su

grupo de trabajo de HTML. A finales de 1996, el W3C public la primera recomendacin oficial,
conocida como "CSS nivel 1".
A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones:
el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS.
El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendacin oficial,
conocida como "CSS nivel 2". La versin de CSS que utilizan todos los navegadores de hoy en da
es CSS 2.1, una revisin de CSS 2 que an se est elaborando (la ltima actualizacin es del 8 de
septiembre de 2009). Al mismo tiempo, la siguiente recomendacin de CSS, conocida como "CSS
nivel 3", contina en desarrollo desde 1998 y hasta el momento slo se han publicado borradores.
La adopcin de CSS por parte de los navegadores ha requerido un largo periodo de tiempo. El
mismo ao que se public CSS 1, Microsoft lanzaba su navegador Internet Explorer 3.0, que
dispona de un soporte bastante reducido de CSS. El primer navegador con soporte completo de
CSS 1 fue la versin para Mac de Internet Explorer 5, que se public en el ao 2000. Por el
momento, ningn navegador tiene soporte completo de CSS 2.1.
Soporte de CSS en los navegadores
El trabajo del diseador web siempre est limitado por las posibilidades de los navegadores que
utilizan los usuarios para acceder a sus pginas. Por este motivo es imprescindible conocer el
soporte de CSS en cada uno de los navegadores ms utilizados del mercado.
Internamente los navegadores estn divididos en varios componentes. La parte del navegador
que se encarga de interpretar el cdigo HTML y CSS para mostrar las pginas se denomina
motor. Desde el punto de vista del diseador CSS, la versin de un motor es mucho ms
importante que la versin del propio navegador.
La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores ms
utilizados por los usuarios:
Navegador
Google
Chrome
Internet
Explorer

Motor
WebKit

CSS 1
Completo desde la
versin 85 del motor

CSS 2.1 CSS 3

Completo

Todos los selectores, pseudo-clases y

muchas propiedades

Completo desde la
Trident versin 7.0 del

Todos los selectores, pseudo-clases y

Completo muchas propiedades a partir de la

navegador

versin 10.0 del navegador

92

COMPUTACIN

Liceo Real de Cid

Navegador

Motor

Prof. Selvin de Paz

CSS 1

CSS 2.1 CSS 3

Completo desde la
Firefox

Gecko

Safari

WebKit

versin 1.0 del

navegador
Completo desde la
versin 85 del motor

Completo

Completo

Completo desde la
Opera

Presto versin 1.0 del

Completo

navegador

Todos los selectores, pseudo-clases y

muchas propiedades
Todos los selectores, pseudo-clases y
muchas propiedades
Todos los selectores, pseudo-clases y
muchas propiedades

Los navegadores Firefox, Chrome, Safari y Opera son los ms avanzados en el soporte de CSS,
ya que incluyen muchos elementos de la futura versin CSS 3 y un soporte casi perfecto de la
actual version 2.1.
Por su parte, el navegador Internet Explorer slo puede considerarse adecuado desde el punto
de vista de CSS a partir de su versin 7. Internet Explorer 6, utilizado todava por un nmero no
despreciable de usuarios, sufre carencias muy importantes y contiene decenas de errores en su
soporte de CSS. Internet Explorer 8 soporta casi todas las propiedades y caractersticas de
CSS 2.1.
Funcionamiento bsico de CSS
Antes de que se generalizara el uso de CSS, los diseadores de pginas web utilizaban etiquetas
HTML especiales para modificar el aspecto de los elementos de la pgina. El siguiente ejemplo
muestra una pgina HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Ejemplo de estilos sin CSS</title>
</head>

<body>

93

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<h1><font color="red" face="Arial" size="5">Titular de la

pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy
largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el
color, el tipo y el tamao de letra de cada elemento de la pgina.
El problema de utilizar este mtodo para definir el aspecto de los elementos se puede ver
claramente con el siguiente ejemplo: si la pgina tuviera 50 elementos diferentes, habra que
insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 pginas diferentes,
habra que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene tres atributos,
habra que definir 1.5 millones de atributos.
Como el diseo de los sitios web est en constante evolucin, es habitual modificar cada cierto
tiempo el aspecto de las pginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto
del sitio requerira modificar 500.000 etiquetas y 1.5 millones de atributos.
La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red;
p

font-family: Arial;

font-size: large;

{ color: gray; font-family: Verdana; font-size: medium; }

</style>
</head>

<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>

94

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

</html>

CSS permite separar los contenidos de la pgina y la informacin sobre su aspecto. En el ejemplo
anterior, dentro de la propia pgina HTML se crea una zona especial en la que se incluye toda la
informacin relacionada con los estilos de la pgina.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el
cdigo HTML de los contenidos con etiquetas <font>. Como se ver ms adelante, la etiqueta
<style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la pgina.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de la
pgina se deben ver de color rojo, con un tipo de letra Arial y con un tamao de letra grande.
Adems, las etiquetas <p> de la pgina se deben ver de color gris, con un tipo de letra Verdana y
con un tamao de letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la
solucin anterior, pero sigue sin ser una solucin ideal. Como los estilos CSS slo se aplican en la
pgina que los incluye, si queremos que las 10.000 pginas diferentes del sitio tengan el mismo
aspecto, se deberan copiar 10.000 veces esas mismas reglas CSS. Ms adelante se explica la
solucin que propone CSS para evitar este problema.

SINTAXIS CSS

Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los elementos
de la pgina. Una regla CSS se caracteriza por dos elementos principales:

Un selector de tipo para especificar a qu etiquetas del documento se aplica el estilo.

Una declaracin de estilo, que se define entre parntesis, para especificar qu estilo
aplicar a las etiquetas seleccionadas. A su vez, la declaracin est compuesta por:
o

una o ms propiedades, seguidas por el carcter ":" (dos puntos)

uno o ms valores asociados a cada propiedad, entre comillas y separados por comas
si hay mltiples valores, y todos seguidos por un punto y coma.

Por lo tanto, la sintaxis es:

95

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

La siguiente sintaxis define, a forma de ejemplo, el estilo a aplicar a hipervnculos (etiqueta <A>),
especficamente fuente Verdana de 18 pxeles de tamao, en negrita y en color amarillo:
A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow
}
Selectores de tipo
Los "selectores de tipo" (o "selectores de elementos de tipo") son las palabras que estn delante
de los parntesis y que indican las etiquetas a las que se aplica el estilo que aparece entre
parntesis.
Para definir el estilo de una etiqueta HTML en particular, slo debe usarse el nombre de la
etiqueta (sin los caracteres < y >). Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--

tag {properties}
-->
</STYLE>
</HEAD>
<BODY>

<tag> ... </tag>

96

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

...
</BODY>
</HTML>
Selectores mltiples
Tambin se puede aplicar un estilo a mltiples etiquetas al separar los nombres de las mismas
con una coma (,). La sintaxis de tal selector, denominado selector mltiple, es:
type-selector1, type-selector2

{ /* style */

Selector universal
A travs del selector universal ("*") se puede definir un estilo que se aplicar a todos los
elementos HTML. La sintaxis del selector universal es:
*

{ /* style */

El selector universal generalmente no se implementa en navegadores.

Selectores anidados
Se puede seleccionar una etiqueta dentro de un contexto dado, es decir, segn los
elementos que se encuentran alrededor, mediante selectores contextuales.
Existen varios tipos de selectores contextuales:

El selector anidado se usa para crear una regla que se aplica solamente cuando el
elemento Y est anidado dentro del elemento X. Su sintaxis es:

selector_X selector_Y { /* style; */ }

Para el siguiente cdigo HTML:
<p> <i>Nota</i>, esto es una <b>advertencia</b> </p>
<b> Leer detenidamente </b>
La siguiente regla slo afecta a la palabra "advertencia" (la nica rodeada por etiquetas
<B> que estn a su vez anidadas dentro de un grupo de etiquetas <P>):
P B { font-weight: bold; color: red; }

El selector de hermanos adyacentes se usa para crear una regla que se aplica solamente
cuando el elemento Y le sigue inmediatamente al elemento X. Su sintaxis es:

selector_X + selector_Y { /* style; */ }

97

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Para el siguiente cdigo HTML:

<p> <i>Nota</i>, esto es una <b>advertencia</b> </p>
<b> Leer detenidamente </b>
La siguiente regla slo afecta a la palabra "advertencia" (la nica rodeada por etiquetas
<B> que a su vez siguen al grupo de etiquetas <l>):
I + B { font-weight: bold; color: red; }

El selector de hijo se usa para crear una regla que solamente se aplica cuando el elemento
Y es descendiente del elemento X. La regla no se aplica si Y se encuentra dentro de una o
ms etiquetas intermediarias. Su sintaxis es:

selector_X > selector_Y { /* style; */ }

Para el siguiente cdigo HTML:
<p> <b><i> Nota </i></b>, esto es una <i><b> advertencia </b></i> </p>
<b> Leer detenidamente </b>
La siguiente regla slo afecta al elemento "<i> Nota </i>" (la nica rodeada por etiquetas
<B> que estn a su vez dentro de un grupo de etiquetas <P>):
P > B { font-weight: bold; color: red; }

Propiedades de estilo
Comentarios
Es posible (y se recomienda) documentar las hojas de estilo a travs de la incorporacin de
comentarios que aportan informacin adicional (una razn para elegir un estilo u otro, el tipo de
documento al que se va a aplicar, el contexto, etc.). Los comentarios CSS estn marcados con los
signos /* y */:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!-/* Esto es un comentario */
tagA {properties}

98

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

tagB {properties}
tagC {properties}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Un estilo puede aplicarse "en lnea" a cualquier etiqueta HTML, exceptuando lo siguiente:
BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Declaracin de una hoja de estilo

Las hojas de estilo no estn directamente integradas en las recomendaciones HTML de W3C.
Por tal razn, se debe incluir elementos en el cdigo HTML que indiquen tanto el tipo de
documento, es decir la versin de HTML y las recomendaciones CSS utilizadas por la pgina,
como los estilos mismos.

Declaracin de tipo de documento

En la pgina HTML se debe incluir una declaracin de tipo de documento, una referencia a la
norma HTML que se est usando. La declaracin se hace al agregar una lnea como sta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Contenido de la pgina</BODY>
</HTML>

Adems, puede utilizarse un metatag para indicarle al navegador o a los motores de bsqueda
qu idioma se ha utilizado para definir las hojas de estilo. Este metatag, incluido en el
encabezado HTML del documento, se asemeja a lo siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>Contenido de la pgina</BODY>
</HTML>

99

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Incorporacin de estilos
Se pueden incorporar estilos a un documento HTML de cuatro formas distintas:

Estilo de documento: se declara en el encabezado, es decir, dentro de las etiquetas

<HEAD> y </HEAD>.
Estilo en lnea, tiene el mismo significado que los atributos de las etiquetas.
Estilo externo, se declara en un archivo separado con la extensin .css
Estilo importado, se declara en un archivo separado con la extensin .css

Estilo de documento

Las hojas de estilo de una pgina Web se declaran por medio de la etiqueta STYLE, que se ubica
dentro de las etiquetas <HEAD> y </HEAD>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!-Definiciones de estilo;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>

El tipo de atributo ="text/css" en la etiqueta <STYLE> se utiliza para especificar el tipo de hoja de estilo
que se usa. Las etiquetas de comentario <!-- ... --> se usan para prevenir que los navegadores antiguos, que
no son compatibles con las hojas de estilo, muestren esta informacin en la pantalla.
Estilo en lnea

Tambin se puede definir el estilo dentro de las etiquetas de un documento. Este tipo de
declaracin se denomina declaracin en lnea.
No se recomienda este mtodo para definir hojas de estilo porque va en contra del propsito
mismo de las hojas de estilo, ya que el estilo est integrado dentro de cada elemento por
separado. No obstante, puede utilizarse para definir un estilo especial para algn elemento
HTML en particular, que no necesita una definicin universal.
Para definir un estilo en lnea, simplemente se debe agregar el atributo STYLE a la etiqueta
HTML a la que se quiera aplicar un estilo en particular:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>

10
0

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

...
</HEAD>
<BODY>
...
<ETIQUETA Style="style:valor;"> ... </ETIQUETA>
...
</BODY>
</HTML>

Un estilo puede aplicarse "en lnea" a cualquier etiqueta HTML, exceptuando lo siguiente: BASE,
BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

A continuacin encontrar un ejemplo de un estilo aplicado a una etiqueta <H1>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Ttulo </H1>
...
</BODY>
</HTML>

Estilo externo

Es una ventaja poder almacenar definiciones de hojas de estilo fuera del documento ya que por
lo tanto es posible, al editar el archivo que contiene las hojas de estilo, cambiar la apariencia de
todas las pginas Web que utilizan esa hoja.
El primer paso es crear un archivo de texto que contenga las hojas de estilo, cuya extensin es
.css, por ejemplo style.css:
<!-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body
{background-image: home.gif;}
LI
{font: 13px Verdana;}
B
{font: 14px Verdana; font-weight: bold;}
A
{
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1
{font: 16px Arial;font-weight: bold;color=black;}
H2
{font: 14px Arial;font-weight: bold;color=black;}
-->

A continuacin, se debe agregar en cada pgina HTML un acceso directo a la pgina con las
definiciones de estilo:
<HTML>
<HEAD>

10
1

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

<LINK rel="stylesheet" type="text/css" href="style.css">

</HEAD>
...

La etiqueta <LINK> le indica al navegador que debe buscar un documento situado fuera de la pgina
HTML.
El atributo rel="stylesheet" especifica que el documento en cuestin es una hoja de estilo
externa.
El atributo type="text/css" especifica el tipo de hoja de estilo.
El atributo href=" URL " muestra la URL de la hoja de estilo (su ubicacin en Internet).

Estilo importado

Por ltimo, las recomendaciones de W3C tambin ofrecen una manera de incluir hojas de estilo
en un documento: importar las hojas de estilo. Es posible importar hojas de estilo externas
cuando se declara el estilo del documento al insertar el comando @IMPORT inmediatamente
despus de la etiqueta de estilo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!-@IMPORT URL (url de la hoja a importar);
Definicin de los estilos del documento;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>

Si existen muchas definiciones importadas que afecten todas a la misma etiqueta, el navegador
slo utilizar la ltima.

Las etiquetas <SPAN> y <DIV>

En ocasiones, dentro de un mismo prrafo, se deben aplicar estilos diferentes a ciertos
segmentos de texto y es para ello que se utilizan las etiquetas <SPAN> y <DIV>.
La etiqueta <SPAN>

La etiqueta <SPAN> se utiliza para aplicar estilos a los segmentos de un prrafo.

Se puede usar con ID o con CLASS.
Su sintaxis es:
<SPAN class=Nonmbre_de_la_clase> Texto </SPAN>

La etiqueta <DIV>

10
2

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

En lugar de aplicar estilos a unas pocas palabras dentro de un prrafo, esta etiqueta los aplica a
un bloque de texto, que puede ser un prrafo o varios.
La sintaxis de la etiqueta DIV es:
<DIV class=important> prrafos </DIV>

Estilos en cascada

Con la utilizacin de los distintos mtodos de implementacin CSS se pueden definir mltiples
estilos. Por tal razn, activar varias hojas de estilo externas da como resultado lo que se
denomina estilo en cascada, una combinacin de estilos para diferentes elementos HTML. Si
varios estilos afectan al mismo elemento, se mantendr solamente el ltimo.
<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">

Cuando diversos estilos estn en conflicto en las hojas de estilo externas, las recomendaciones
CSS les permiten a los usuarios elegir entre varias hojas de estilo alternativas mediante el
atributo rel de la etiqueta STYLE en combinacin con el atributo TITLE para seleccionarlas por
nombre:
<LINK rel="alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2css" title="style2">
<LINK rel=stylesheet type="text/css" href="style2.css">

Adems, cuando se activan mltiples estilos dentro de una pgina al utilizar varios mtodos de
inclusin posibles y algunos estilos entran en conflicto, se aplica el estilo ms prximo al
contenido. La prioridad, en orden descendente, es la siguiente:

Estilo en lnea > estilo de documento > estilo importado > estilo externo

Unidades
Con las hojas de estilo se pueden usar valores numricos para establecer propiedades de estilo
de varias maneras:

10
3

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

De manera absoluta, es decir, en unidades que son independientes de la forma del

resultado (por ejemplo, en centmetros).

De manera relativa, es decir, en unidades con respecto a un elemento.

Los valores de las hojas de estilo pueden darse en nmeros enteros o en nmeros reales (dgitos
con una parte entera y una parte decimal).
En algunos casos, estos valores pueden ser negativos (precedidos por un signo menos "-"). Sin
embargo, algunas propiedades tienen lmites superiores e inferiores para los valores que pueden
aceptar.
Unidades absolutas
Las unidades absolutas que ofrece el estndar CSS estn resumidas en este cuadro:
unidad descripcin
cm.

centmetros

"

pulgadas (1 pulgada = 2,54 cm)

mm

milmetros

pts

puntos

pc

picas (1 pica = 12 puntos)

Unidades relativas
Las unidades relativas que ofrece el estndar CSS estn resumidas en este cuadro:
unidad descripcin

em

Relativa al tamao de la fuente del elemento indicado. La nica excepcin a esta regla:
cuando la propiedad font-size est definida, es relativa al tamao de fuente del
elemento principal.

ex

Relativo a la altura de las letras minsculas del elemento indicado. La nica excepcin a
esta regla: cuando la propiedad font-size est definida, es relativa a la altura de las
letras minsculas del elemento principal.

10
4

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

El pxel. Esta unidad puede mostrarse diferente segn la resolucin de pantalla del

px

monitor del usuario.

El porcentaje es una unidad relativa al tamao del elemento indicado o de su elemento

principal.

Colores CSS
El estndar CSS ofrece distintas maneras para definir colores:

por nombre
con notacin hexadecimal
con notacin decimal

Designacin de un color por su nombre

HTML tiene un grupo de nombres para una cantidad limitada de colores. La cantidad de colores
que ofrece HTML no alcanza para cubrir todas las necesidades; sin embargo, puede resultar muy
prctico llamar a los colores por su nombre si son colores estndar.
El estndar CSS incluye 16 colores bsicos ya definidos por HTML 4.01 y agrega el naranja. La
lista de colores disponibles en CSS es la siguiente:
aqua

green

orange white

black

lime

purple yellow

blue

maroon red

fuschia navy

silver

gray

teal

olive

Por lo tanto, para establecer los encabezados de nivel 1 en azul (blue), slo se debe agregar una
regla CSS como la siguiente:
h1 {color: blue}

10
5

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

En realidad, los navegadores admiten ms de 140 nombres de colores, pero actualmente no todos
forman parte del estndar CSS.
Cdigo RGB (rojo, verde, azul) en notacin hexadecimal
Pueden definirse ms de 16 millones de colores al especificarse los valores RGB de un color con
la notacin #RRGGBB tomada de HTML, donde RR, GG y BB representan, cada uno, un nmero
hexadecimal entre 00 y FF para rojo, verde y azul, respectivamente.
sta es la misma declaracin que la anterior, pero con notacin hexadecimal:
h1 {color: #0000FF}

Cdigo RGB (rojo, verde, azul) en notacin decimal

CSS tambin define una notacin RGB "funcional" que se utiliza para establecer los valores rojo,
verde y azul al indicar sus proporciones relativas en porcentaje o en nmeros enteros positivos
(cada valor puede ser un nmero entero entre 0 y 255) por medio de alguna de las siguientes
sintaxis:
rgb(100%,100%,100%)
rgb(24,125,255)

Capas
Veamos una pequea introduccin a lo que son las capas, la etiqueta HTML <DIV> utilizada para construirla y
los atributos CSS con los que podemos aplicar estilos.
<SPAN> sirve para aplicarle estilo a una pequea parte de una pgina HTML. Por ejemplo, con ella podramos hacer
que una parte de un prrafo se coloree en rojo. Con <SPAN> no es habitual englobar un trozo muy grande de texto,
por ejemplo el que comprenda a varios prrafos. Con <DIV> tambin podemos aplicar estilo a partes de la pgina
HTML.
La diferencia entre <SPAN> y <DIV> es que con esta ltima si que podemos aplicar estilo a una parte ms amplia de la
pgina, por ejemplo a tres prrafos. Adems que la etiqueta <DIV> tiene un uso adicional que es el de crear
divisiones en la pgina a las que podremos aplicar una cantidad adicional de atributos para modificar sus
comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la divisin al centro, izquierda,
derecha o justificada. Pero su uso ms destacado es el de convertir esa divisin en una capa.
Una capa es una divisin, una parte de la pgina, que tiene un comportamiento muy independiente dentro de la
ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y la podremos mover por ella

10
6

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los efectos ms comunes del
DHTML.
Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son compatibles ms que con
Netscape, por lo que es recomendable utilizar la etiqueta <DIV> para hacer capas preferentemente a las otras dos.
Los atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas <SPAN> y <DIV>, son
principalmente de estilos CSS. Estos atributos nos permiten modificar de una manera muy exhaustiva la
presentacin de los contenidos en la pgina. Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML
style, de esta manera:
<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>
<DIV style="color:red;font-size:10px">...</DIV>

Los atributos para que la divisin sea una capa son varios y se pueden ver a continuacin.
<div id="c1" style="position:absolute; left: 200px; top: 100px;">
Hola!
</div>
El primero, position, indica que se posicione de manera absoluta en la pgina y los segundos, left
y top, son la distancia desde el borde izquierdo de la pgina y el borde superior. Hay otros
atributos especiales para capas como width y height para indicar la anchura y altura de la capa,
Z-index que sirve para indicar qu capas se ven encima de qu otras, clip que sirve para recortar
una capa y hacer que partes de ella no sean visibles, o visibility para definir si la capa es visible o
no.
Posicionamiento absoluto y relativo
El posicionamiento absoluto {position: absolute} est determinado en relacin con la esquina
superior izquierda de la ventana del navegador. Las coordenadas de un punto se dan desde arriba
hacia abajo (arriba) y desde la izquierda hacia la derecha (izquierda).
El posicionamiento relativo se define de acuerdo con otros elementos de la pgina, es decir que
los elementos que contienen las etiquetas DIV o SPAN se posicionarn en base a los elementos
HTML que los precedan.

10
7

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Posicionamiento de texto
Ubiquemos el texto "Cmo funciona?" 80 pxeles desde la parte superior de la ventana y 100
pxeles desde la izquierda:
<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">

Cmo funciona?
</SPAN>
</BODY>
</HTML>

Existen otras maneras de hacer esto, por ejemplo:

<HTML>
<HEAD>
<STYLE>
<!-.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>

10
8

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Cmo funciona?
</DIV>
</BODY>
</HTML>

Posicionamiento de una imagen

Ubiquemos la imagen "test.jpg" 80 pxeles desde la parte superior de la ventana y 100 pxeles
desde la izquierda (la imagen es de 103 x 61):
<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

Es importante especificar el tamao de la imagen en las hojas de estilo para reducir el riesgo de
incompatibilidad con el navegador.
Superposicin de elementos
Vamos a superponer el texto "Cmo funciona?" sobre la imagen "test.jpg":
<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 100 px;">
Cmo funciona?
</SPAN>

10
9

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

</BODY>
</HTML>

Con esta sintaxis se pueden superponer tanto elementos de texto como imgenes.

PROPIEDADES DE CSS
Propiedades de fuente
Propiedad Valor

Descripcin

Fuente especfica (Arial,

fontfamily

Times, Verdana)

Define uno o ms nombres de fuentes o familias de

Familia (serif, sans-serif,

fantasy, monospace,

fuentes. Si se definen mltiples fuentes, se utilizar la

primera que se encuentre en el sistema del usuario.

cursive)
font-style normal, italic, oblique

Define el estilo de la escritura

lighter, normal, bold o

fontweight

bolder.
Valor numrico (100, 200, Define el grosor de la fuente
300, 400, 500, 600, 700,
800, 900)
xx-small, x-small, small,

medium, large, x-large,

font-size xx-large

Define el tamao de la fuente

Tamao en puntos (pt), cm,

%

11
0

COMPUTACIN

Liceo Real de Cid

fontvariant
font

normal, small-caps
font: Verdana, Arial, bold
italic 8px;

Prof. Selvin de Paz

Define una variante (maysculas chicas)

Acceso directo a todas las propiedades

Textos y prrafos
Propiedad

Valor

Descripcin

color

"#RRGGBB"

Define el color del texto

line-height line-height: 12pt;

Define el espacio entre las lneas

text-align

Define la alineacin del texto

left, center, right o justify

text-indent text-indent: 5px;

Define la sangra

blink (parpadeo), underline (subrayado),

line-through (tachado), overline (lnea
Define la decoracin
decoration
sobre el texto) o none (sin decoracin)
text-

Define una sombra paralela del texto y

textshadow

texttransform

whitespace

wordspacing

representa, respectivamente, la sombra

hacia la derecha, hacia abajo, radio de
desenfoque y color.

text-shadow: 1px 2px 4px black;

uppercase (mayscula), lowercase

(minscula) o capitalize (primea letra en Define la capitalizacin del texto
mayscula)
normal (el texto continuar en la
prxima lnea), pre (el texto aparecer
con los espacios en blanco que se
ingresaron), nowrap (el texto no
continuar)

Divisin de palabras

Define cunto espacio insertar entre las

palabras

word-spacing: 6px;

11
1

COMPUTACIN

Liceo Real de Cid

width

height

Prof. Selvin de Paz

en puntos (pts), pulgadas ("),

Define el ancho de un texto o una imagen

centmetros, pxeles (px) o en %

en puntos (pts), pulgadas ("),

Define la altura de un texto o una imagen

centmetros, pxeles (px) o en %

Colores de fondo
Propiedad

Valor

Descripcin

background-color "#RRGGBB"

Define el color de fondo

background-image url(http://url)

Define la imagen de fondo

background-

repeat, repeat-x, repeat-y,

repeat

no-repeat

backgroundattachment

scroll, fixed

Especifica si la imagen de fondo se quedar en

su lugar cuando la pantalla se desplace

background-

top, middle, bottom, left,

Posiciona la imagen con respecto a la esquina

position

center o right

superior izquierda

background

background: url(test.jpg)
fixed repeat;

Acceso directo a las propiedades de fondo

Define cmo se repite la imagen de fondo

Mrgenes
Propiedad

Ejemplo

Descripcin

margin-top

margin-top: 5px;

Valor del margen superior

margin-right

margin-right: 0.5em;

Valor del margen derecho

margin-bottom margin-bottom: 2pt;

Valor del margen inferior

margin-left

margin-left: 0;

Valor del margen izquierdo

margin

margin: 5px 0.5em 2pt 0; Acceso directo a las propiedades de mrgenes

11
2

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

Bordes
Propiedad

Valor

Descripcin

border[-top -left -

en puntos (pts), pulgadas ("), centmetros,

Grosor del borde (para la

bottom -right]-width pxeles (px) o en %

ubicacin dada)

border[-top -left border-left-color: #RRGGBB;

bottom -right]-color

Color del borde (para la

ubicacin dada)

solid (slido), dashed (con trazos), dotted (con

Estilo del borde (para la
puntos), double (dos lneas) o ridge
bottom -right]-style
ubicacin dada)
(tridimensional)
border[-top -left -

border-collapse

collapse
separate

Agrega o elimina el efecto

"3D"

Border

border: 1px 0 0 2px dotted green;

Acceso directo global a

las propiedades de bordes

Relleno
Propiedad

Valor

Descripcin

padding-top

padding-top: 3px;

Relleno entre el elemento y el borde superior

padding-right

padding-right: 0.25em;

Relleno entre el elemento y el borde derecho

padding-bottom padding-bottom: 0;

Relleno entre el elemento y el borde inferior

padding-left

padding-left: 2pt;

Relleno entre el elemento y el borde izquierdo

padding

padding: 3px 0.25em 0 2pt; Acceso directo a las propiedades de relleno

Tablas
Propiedad
bordercollapse

Valor
separate o collapse

Descripcin
Combina los bordes de las celdas (collapse), no
los combina (separate)

11
3

COMPUTACIN

Liceo Real de Cid

borderspacing
captionside

Prof. Selvin de Paz

border-spacing: 4px;

Espacio de las celdas

top, bottom, left o right

Ubica la leyenda de la tabla

Muestra (show) u oculta (collapse) las celdas

empty-cells show o collapse

tablelayout

vacas

fixed (independiente del contenido

de la celda) o auto (depende del
Ancho fijo o variable
contenido de la celda)

speak-

always (siempre antes de cada

headers

celda) o once (slo una vez)

Propiedad destinada para los ciegos y

minusvlidos visuales que indica cmo acta el
sonido al leer las celdas de encabezado de las
tablas

Listas
Propiedad

Valor

Descripcin

list-style-type

decimal, upper-roman, lower-latin, disc, circle,

Tipo de vietas y numeracin
square o none

list-styleimage

list-style-image: url(image.png);

Personaliza las vietas con una

imagen

list-styleposition

inside o outside

Especifica la sangra de las

vietas
Acceso directo a las

list-style

propiedades de lista

Presentacin de la pgina
Propiedad

Valor

Descripcin

@page

@page(size: portrait)

Define la presentacin de impresin

11
4

COMPUTACIN

Liceo Real de Cid

size

auto, landscape o portrait Formato de impresin

margin-top margin-top: 3 cm;

marginright
marginbottom

Prof. Selvin de Paz

Margen superior

margin-right: 1,5 cm;

Margen derecho

margin-bottom: 1 cm;

Margen inferior

margin-left margin-left: 2 cm;

Margen izquierdo

crop (marcas de recorte),

marks

page-breakbefore
page-breakafter

orphans

widows

cross (marcas cruzadas),

none (sin marcas)

Marcas de recorte y marcas cruzadas

Always, avoid

Inserta un salto de pgina antes de un elemento

Always, avoid

Inserta un salto de pgina despus de un elemento

orphans: 2;

widows: 1;

Evita que haya lneas hurfanas al final de una pgina.

Define la cantidad mnima de lneas de un elemento que
quedan en la parte inferior de una pgina antes del
salto de pgina.
Evita que haya lneas viudas al final de una pgina.
Define la cantidad mnima de lneas de un elemento que
quedan en la parte superior de una pgina despus de
un salto de pgina.

11
5

COMPUTACIN

Liceo Real de Cid

Prof. Selvin de Paz

11
6

COMPUTACIN