Académique Documents
Professionnel Documents
Culture Documents
i
Introduccin
El Word Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi
infinita. Pero esta informacin debe estar ordenada de alguna forma de manera que sea posible
encontrar lo que se busca. La unidad bsica donde est almacenada esta informacin son las
pginas Web. Estas pginas se caracterizan por contener texto, imgenes, animaciones... e
ii
Contenido
Introduccin .................................................................................................................................... ii
Captulo 1 HTML ........................................................................................................................... 1
1.1. Qu es? ............................................................................................................................... 1
1.2. Marcador HTML.................................................................................................................. 1
1.2.1. Elementos ..................................................................................................................... 2
1.2.2. Atributos ...................................................................................................................... 2
Captulo 2 Caractersticas ............................................................................................................... 4
2.1. Caractersticas del lenguaje HTML ..................................................................................... 4
2.2. Qu se necesita para crear una pgina web? ...................................................................... 5
2.3. Algunas razones para usar HTML ....................................................................................... 5
2.4. Las bases de HTML ............................................................................................................. 6
Captulo 3 Prrafos en HTML ........................................................................................................ 8
3.1. Saltos de lnea ...................................................................................................................... 9
3.2. Cmo se insertan prrafos .................................................................................................... 9
Captulo 4Qu es un ancla? ......................................................................................................... 10
4.1. Creando anclas ................................................................................................................... 10
4.2. Enlaces a anclas de otras pginas....................................................................................... 11
Referencias .................................................................................................................................... 12
iii
1
Captulo 1 HTML
1.1. Qu es?
estndar que sirve de referencia del software que conecta con la elaboracin de pginas web en
sus diferentes versiones, define una estructura bsica y un cdigo (denominado cdigo HTML)
para la definicin de contenido de una pgina web, como texto, imgenes, videos, juegos, entre
otros. Es un estndar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW,
organizacin dedicada a la estandarizacin de casi todas las tecnologas ligadas a la web, sobre
todos los navegadores actuales han adoptado. (Mora, Wikipedia, 2002, pg. 1)
HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede
incluir o hacer referencia a un tipo de programa llamado script, el cual puede afectar el
HTML consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de
1.2.1. Elementos
Los elementos son la estructura bsica de HTML. Los elementos tienen dos propiedades
bsicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se
considere vlido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio
elemento> ). Los atributos del elemento estn contenidos en la etiqueta de inicio y el contenido
1.2.2. Atributos
En su mayora de los atributos de un elemento son pares nombre-valor, separados por un
signo de igual = y escritos en la etiqueta de comienzo de un elemento, despus del nombre del
elemento. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de
3
910
valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los
valores sin comillas es considerado poco seguro.11 En contraste con los pares nombre-elemento,
hay algunos atributos que afectan al elemento simplemente por su presencia12 (tal como el
Pero empecemos ya con lo que nos interesa. Cmo se hace una pgina Web?
Cuando los diseadores del WWW se hicieron esta pregunta decidieron que se
El Web tena que ser hipertexto y deba ser fcil navegar por l.
Tena que ser compatible con todo tipo de ordenadores (PCs, Macintosh,
gil y rpido.
Estas caractersticas son las que marcaron el diseo de todos los elementos del
en una pgina web con diferentes tipos y tamaos de letra, con imgenes
necesario ningn programa especial para crear una pgina Web. Gracias a ello se ha conseguido
que se puedan crear pginas con cualquier ordenador y sistema operativo. El cdigo HTML,
como hemos adelantado en el prrafo anterior, no es ms que texto y por tanto lo nico necesario
para escribirlo es un editor de texto como el que acompaan a todos los sistemas operativos:
edit en MS-DOS, block de notas en Windows,vien UNIX, etc. Por supuesto estos no son los
nicos editores de texto que pueden ser usados, sino cualquier otro. Tambin se puede usar
procesadores de texto, que son editores con capacidades aadidas, compo pueden ser Microsoft
Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones
automticas del cdigo HTML que no siempre son deseadas. En estos dos ltimos casos, tambin
hay que tener en cuenta que deberemos guardar el archivo en modo texto.
Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e
inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes
6
ventajas: Seremos capaces de aprovechar todas las caractersticas de este lenguaje, incluso las
que ste ha creado. As se pueden corregir errores o incluir etiquetas no soportadas por el editor.
web. Con un simple editor de textos ser suficiente. El principal problema de usar editores
conversores y WYSIWYG es la necesidad de trabajar con dos archivos fuentes por separado, por
un lado, el archivo del editor y por otro el archivo del cdigo HTML una vez generado, lo que
nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo, su utilidad es
innegable y su combinacin con un buen conocimiento del lenguaje HTML nos convertir en
Una vez repasadas unas nociones bsicas de HTML y de la programacin de pginas Web en
general entraremos de lleno en la programacin con este lenguaje. Pronto nos daremos cuenta de
la sencillez de este lenguaje lo que le convierte en un lenguaje muy fcil de aprender y que nos
permitir crear pginas con mayor facilidad an. Las rdenes de este lenguaje estarn formadas
por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura: O bien
esta otra: TEXTO Como vemos, la primera estructura est formada por una nica instruccin y la
segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre
7
ambas. 8 Introduccin al lenguaje HTML, Por ejemplo, para indicarle al navegador que
As de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los smbolos menor que
(), todas las instrucciones de HTML deben ir encerradas entre estos dos smbolos. Pero las
etiquetas no se limitan a indicar ordenes tan sencillas, estas rdenes tienen en ocasiones
parmetros. Por ejemplo, la etiqueta tal y como lo hemos hecho anteriormente dara lugar a la
lnea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una lnea horizontal en
la pantalla. Esta lnea tiene un grosor predeterminado y un ancho variable en funcin del tamao
Ha llegado el momento de aprender a introducir un texto en una pgina web, pero antes es
necesario comprender cmo ser interpretado este texto. Cuando un navegador lee el cdigo
HTML de una pgina y lo interpreta para mostrar la pgina, todos los espaciados mltiples,
tabulados o saltos de lnea que se haya incluido en los textos sern interpretados como un nico
espacio. Esta caracterstica suele sorprender (e incluso molestar) al principio, pero es innegable
que esta forma de actuar es necesaria y concuerda con el carcter descriptivo de HTML. La
mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de cdigo
que sern mostrados de la misma forma por el navegador, aunque algunos contengan saltos de
En estos ejemplos podemos observar diversos saltos de lnea y separaciones en el texto, sin
embargo, el navegador mostrar un solo espacio entre las palabras y producir saltos de lnea
En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo
. Cuando el navegador se encuentra con esta etiqueta provoca un salto de lnea y sigue mostrando
Durante todo el trayecto hasta Woodfield no dej de pensar en los aspectos econmicos, con el
temor de estar cometiendo... En este texto podemos observar cmo tras el primer punto era
Un prrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un prrafo
fin tras la ltima frase. Entre ellas pueden insertarse tantos saltos de lnea como se deseen as
Durante todo el trayecto hasta Woodfield no dej de pensar en los aspectos econmicos, con el
Otra opcin hubiera sido crear un nico prrafo e insertar un salto de lnea tras la primera frase:
Desde una pgina cualquiera y en cualquier lugar de ella se escribe el cdigo para crear un
enlace. Cuando se pulsa sobre el texto activo se salta al comienzo de otra pgina, tal y como
indica la flecha. Usando enlaces a anclas se puede cambiar este comportamiento. Un ancla es una
marca que se sita en un punto determinado de una pgina. Posteriormente se podr crear un
enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra pgina
se salta al lugar donde est el ancla, es decir, ya no se va al comienzo de la pgina como con los
enlaces vistos hasta ahora. Dicho de otra forma usando anclas es posible que un enlace apunte al
lugar concreto de una pgina que se desee. (Ferrer, Manuales-LuCAS, 1998, pg. 42)
Para crear anclas usamos, al igual que para crear enlaces, la etiqueta , sin embargo no debe
confundirse el lector porque aunque ambos elementos estn relacionados y se use la misma
etiqueta para crearlos las funciones 42 La primera pgina Web de cada uno son radicalmente
diferentes. Las anclas slo son marcas y son invisibles cuando visualizamos la pgina con el
navegador. Por esta razn las anclas no definen ningn texto activo. A pesar de ello es habitual
encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo: Comienzo
Este texto no tiene ningn significado especial y ser interpretado por los navegadores de igual
forma que el texto de alrededor. Como se ha adelantado en el ejemplo anterior, al crear anclas no
se emplea el atributo href. En su lugar se usa otro llamado name. Con este atributo se da un
nombre al ancla que luego nos servir para referirse a ella. Un ejemplo donde la utilidad de las
anclas se hace evidente es en aquellas pginas en las que nos encontramos una lista ordenada
alfabticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse
11
molesto. Pero usando anclas el autor de la pgina puede incluir todas las letras al principio de
manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de
la letra S.
Tambin es posible crear un enlace a un ancla de otra pgina. Para ello hay que incluir la
pgina, bien sea mediante su direccin URL o mediante su ruta de directorios, y posteriormente
poner el smbolo # seguido del nombre del ancla. En este caso es obligatorio poner el nombre
del archivo, aunque sea index.html. Siguiendo con el ejemplo anterior para crear un enlace a los
trminos que empiezan por S de la pgina donde se situ el ancla puede emplearse el siguiente
ms complicada que los anteriores. Para crearlos hay que seguir los siguientes pasos: 47 La
primera pgina Web 1. Se parte de un ancla existente en otra pgina o se crea uno 2. Se crea un
enlace a esa pgina 3. Se aade a la direccin del enlace el smbolo # seguido del nombre del
ancla En primer lugar deberemos crear un ancla en la pgina objetivo. Despus deberemos
nombre del ancla. La flecha de la figura 2.16 nos indica el salto que se producir al pulsar sobre
el enlace. Ya no iremos al comienzo de la pgina como pasaba con los enlaces normales sino que
iremos al lugar concreto que hemos elegido (y donde hay un ancla). (Ferrer, Manuales-LuCAS,