1 - Etiquetas del lenguaje HTML

Las Etiquetas
El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos
de texto destacado de una forma especial que permiten la defnicin de las
distintas instrucciones de HTML, tanto los efectos a aplicar sore el texto como
las distintas estructuras del lenguaje! " estas marcas las denominaremos
etiquetas # sern la ase principal del lenguaje HTML! En documento HTML
ser un fc$ero texto con etiquetas que %ariarn la forma de su presentacin!
&na etiqueta ser un texto incluido entre los s'molos menor que ( # ma#or
que )!! El texto incluido dentro de los s'molos ser explicati%o de la utilidad
de la etiqueta! *or ejemplo+
(,) Letra -egrita, del ingl.s ,old /negrita0!
(T",LE) 1efnir una tala!
(2M3) 2nclusin de una 2Ma3en!
Existe normalmente una etiqueta de inicio # otra de fn, la de fn contendr
el mismo texto que la de inicio a4adi.ndole al principio una arra inclinada 5! El
efecto que defne la etiqueta tendr %alide6 para todo lo que este incluido
entre las etiquetas de inicio # fn, #a sea texto plano o otras etiquetas HTML!
(ET27&ET")Elementos "fectados por la Etiqueta(5ET27&ET")
*or ejemplo, con la etiqueta siguiente+
(,)Texto que ser en negrita(5,)!
8tendremos+
Texto que ser en negrita
"lgunas etiquetas no necesitarn la de fn, sern aquellas en las que el fnal
este impl'cito, por ejemplo (*) prrafo, (,9) salto de l'nea (2M3)
inclusin de una imagen! 1efnen un efecto que se producir en un punto
determinado sin afectar a otros elementos!
El uso de ma#:sculas o min:sculas en las etiquetas es indiferente, se
interpretarn del mismo modo en amos casos, pero lo normal es expresarlas
en ma#:sculas para que destaquen con ms nitide6 del texto normal!
"triutos de las Etiquetas
Las etiquetas pueden presentar modifcadores que llamaremos atriutos
que permitirn defnir diferentes posiilidades de la instruccin HTML! Estos
atriutos se defnirn en la etiqueta de inicio # consistirn normalmente en el
nomre del atriuto # el %alor que toma separados por un signo de igual! El
orden en que se inclu#an los atriutos es indiferente, no afectando al resultado!
;i se inclu#en %arias %eces el mismo atriuto con distintos %alores el resultado
otenido ser impre%isile dependiendo de como lo interprete el na%egador!
<uando el %alor que toma el atriuto tiene ms de una palara deer
expresarse entre comillas, en otro caso no ser necesario!
&n ejemplo de atriuto ser+
(" H9E=>?$ttp+55@@@!uca!es?)*agina principal de la &<"(5")
En este caso la etiqueta " presenta un atriuto H9E= cu#o %alor es
$ttp+55@@@!uca!es!
2gualmente una etiqueta podr'a presentar %arios atriutos+
(H9 "L23->LE=T -8;H"1E ;2AE>B C21TH>BDE)
En este caso la etiqueta H9 presenta cuatro atriutos! El segundo atriuto
-8;H"1E es un caso especial que no presenta %alor! El orden en que se
especifquen los atriutos no afectarn al resultado fnal!
Etiquetas correctas
Todo texto que se encuentre entre los caracteres ( # ) se considerar una
etiqueta, si la etiqueta no fuera una de las %alidas del lenguaje HTML no ser
tenida en cuenta, sin causar ning:n tipo de error! 1ejndose el texto o las
etiquetas a las que afectaa como si no existiera la etiqueta extra4a! <uando
se comete un error sintctico al expresar una etiqueta o un atriuto no se
producir ning:n error, simplemente no de otendr el efecto que
deseamos!
El lenguaje HTML es un lenguaje que e%oluciona mu# rpidamente # cada
nue%a %ersin de los programas na%egadores presenta etiquetas nue%as que
causan efectos ms espectaculares o atriutos nue%os de las etiquetas #a
existentes! Esto causa que los programas ms antiguos no entiendan estas
nue%as etiquetas # por tanto las considere errneas # no realice la accin que
deseamos! 1ndose el caso de atriutos que son %alidos solo para un :nico
na%egador!
<uando creemos cdigo HTML $a# que $acerlo lo ms estndar posile para
permitir que el documento pueda ser %isto de forma efecti%a por distintos
na%egadores en maquinas distintas! *or tanto deemos renunciar a efectos
espectaculares que solo tienen %alide6 en un na%egador e intentar comproar
como se %e el documento en una %ariedad de na%egadores, #a que las
personas que se conectan a nuestras pginas no tendrn en la ma#or'a de los
casos el mismo que nosotros! Tamien es interesante como se %er'a el
documento en los distintos tama4os de la %entana del na%egador, teniendo en
cuenta que todos no tienen un monitor con la misma resolucin!
En este manual se $an tratado de incluir las caracter'sticas ms estndar de
HTML # en caso de tratarse de instrucciones ms particulares se indicar
con%enientemente!
QU ES Y PARA QU SIRVE HTML?
HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Est
compuesto por una sere de etiquetas que el navegador interpreta y da forma en la pantalla.
HTML dispone de etiquetas para imgenes, hipervnculos que nos permiten dirigirnos a
otras pginas, saltos de lnea, listas, talas, etc.

!odramos decir que HTML sirve para crear pginas "e, darles estructura y contenido. #n
ejemplo sencillo de c$digo HTML podra ser%
&html'
&ody'
&p'Esto es un prrafo. (ienvenidos a esta pgina "e.&)p'
&)ody'
&)html'


Este ejemplo est formado por * etiquetas HTML. +omo podemos oservar cada una de las
etiquetas dee acaar con su hom$loga de cierre. En este caso la etiqueta &html' dee
cerrarse con &)html', la etiqueta &ody' con &)ody' y la etiqueta &p' con &)p'.
Hay muchas ms etiquetas que veremos ms adelante pero nos dee quedar claro que por
cada etiqueta que aramos, deeremos incluir la correspondiente etiqueta de cierre. ,s
conseguiremos un c$digo HTML ien formado y que los navegadores puedan interpretar
sin amig-edad.
Este sencillo ejemplo mostrara por pantalla lo siguiente.


./u0 ocurrira si una etiqueta que aramos no tiene su correspondiente cierre1 2igamos
que se tratara de un c$digo HTML mal construido, y los navegadores esto lo pueden
interpretar de distintas maneras. /ui3s nos muestren la pgina tal y como esperamos sin
aparente error. /ui3s nos muestren una pgina de error o se quede en lanco el navegador.
4uestro ojetivo ha de ser siempre construir pginas HTML ien estructuradas y sin
amiguedades, es decir, hacer un correcto uso del lenguaje para que los navegadores
puedan saer e5actamente qu0 es lo que pretendemos mostrar.


ALGO DE HISTORIA
HTML naci$ p6licamente en un documento llamado HTML Tags 7Etiquetas HTML8,
pulicado por primera ve3 en 9nternet por Tim (erners:Lee en ;<<;. En esta pulicaci$n se
descrien == etiquetas que mostraan un dise>o inicial y relativamente simple de HTML.
?arios de estos elementos se conservan en la actualidad. @tros se han dejado de usar, y
muchos otros se han ido a>adiendo con el paso de los a>os. 2e esta manera, podemos
halar de que han e5istido distintas versiones de HTML a lo largo de la historia de internet.
4osotros vamos a traajar con el HTML estndar actual, que es el utili3ado por los
navegadores y pginas "e de hoy en da. Ain emargo, no vamos a prestarle atenci$n a las
versiones y especificidades de cada versi$n, ya que el ojetivo de este curso es aprender los
fundamenos de HTML y entender c$mo funciona, no conocer la sinta5is o
especificidades de una versi$n concreta. .!or qu0 no le damos importancia a la versi$n1
!orque una persona que cuenta con los fundamentos y comprensi$n sica sore el
lenguaje es capa3 de adaptarse a las caractersticas particulares de una versi$n sin
prolema. En camio, centrarse en los detalles de una versi$n sin conocer los fundamentos
har que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los
continuos camios que tienen lugar en el mito de los desarrollos "e.
HTML
FHTMG redirige aqu'! *ara otros usos de la sigla, %.ase Hgalo usted mismo!
HTML /H#perText MarHup Language0
HTML!s%g
1esarrollador
Corld Cide Ce <onsortium I CH"TC3
2nformacin general
Extensin de arc$i%o !$tml, !$tm
Tipo de M2ME text5$tml
T#pe code TEJT
&niform T#pe 2dentifer pulic!$tml
Tipo de formato Lenguaje de marcado
Extendido de ;3ML
Extendido a JHTML
Estndar/es0
2;852E< 1BKKB
CL< HTML K!D1
CL< HTMLB /orrador0
=ormato aierto M
HTML, siglas de H#perText MarHup Language /Flenguaje de marcas de
$ipertextoG0, $ace referencia al lenguaje de marcado para la elaoracin de
pginas @e! Es un estndar que sir%e de referencia para la elaoracin de
pginas @e en sus diferentes %ersiones, defne una estructura sica # un
cdigo /denominado cdigo HTML0 para la defnicin de contenido de una
pgina @e, como texto, imgenes, etc! Es un estndar a cargo de la CL<,
organi6acin dedicada a la estandari6acin de casi todas las tecnolog'as
ligadas a la @e, sore todo en lo referente a su escritura e interpretacin! Es
el lenguaje con el que se defnen las pginas @e!
El lenguaje HTML asa su flosof'a de desarrollo en la referenciacin! *ara
a4adir un elemento externo a la pgina /imagen, %'deo, script, etc!0, este no se
incrusta directamente en el cdigo de la pgina, sino que se $ace una
referencia a la uicacin de dic$o elemento mediante texto! 1e este modo, la
pgina @e contiene slo texto mientras que recae en el na%egador @e
/interpretador del cdigo0 la tarea de unir todos los elementos # %isuali6ar la
pgina fnal! "l ser un estndar, HTML usca ser un lenguaje que permita que
cualquier pgina @e escrita en una determinada %ersin, pueda ser
interpretada de la misma forma /estndar0 por cualquier na%egador @e
actuali6ado!
;in emargo, a lo largo de sus diferentes %ersiones, se $an incorporado #
suprimido di%ersas caracter'sticas, con el fn de $acerlo ms efciente # facilitar
el desarrollo de pginas @e compatiles con distintos na%egadores #
plataformas /*< de escritorio, porttiles, tel.fonos inteligentes, taletas, etc!0!
;in emargo, para interpretar correctamente una nue%a %ersin de HTML, los
desarrolladores de na%egadores @e deen incorporar estos camios # el
usuario dee ser capa6 de usar la nue%a %ersin del na%egador con los
camios incorporados! &sualmente los camios son aplicados mediante
parc$es de actuali6acin automtica /=irefox, <$rome0 u ofreciendo una nue%a
%ersin del na%egador con todos los camios incorporados, en un sitio @e de
descarga ofcial /2nternet Explorer0! &n na%egador no actuali6ado no ser capa6
de interpretar correctamente una pgina @e escrita en una %ersin de HTML
superior a la que pueda interpretar, lo que oliga muc$as %eces a los
desarrolladores a aplicar t.cnicas # camios que permitan corregir prolemas
de %isuali6acin e incluso de interpretacin de cdigo HTML! "s' mismo, las
pginas escritas en una %ersin anterior de HTML deer'an ser actuali6adas o
reescritas, lo que no siempre se cumple! Es por ello que ciertos na%egadores
a:n mantienen la capacidad de interpretar pginas @e de %ersiones HTML
anteriores! *or estas ra6ones, a:n existen diferencias entre distintos
na%egadores # %ersiones al interpretar una misma pgina @e!
1efnicin de $tml
HTML es un lenguaje de programacin que se utili6a para el desarrollo de
pginas de 2nternet! ;e trata de la sigla que corresponde a H#perText MarHup
Language, es decir, Lenguaje de Marcas de Hipertexto, que podr'a ser
traducido como Lenguaje de =ormato de 1ocumentos para Hipertexto!
;e trata de un formato aierto que surgi a partir de las etiquetas ;3ML
/;tandard 3enerali6ed MarHup Language0! <oncepto traducido generalmente
como NEstndar de Lenguaje de Marcado 3enerali6adoO # que se entiende
como un sistema que permite ordenar # etiquetar di%ersos documentos dentro
de una lista! Este lenguaje es el que se utili6a para especifcar los nomres de
las etiquetas que se utili6arn al ordenar, no existen reglas para dic$a
organi6acin, por eso se dice que es un sistema de formato aierto!
EL HTML se encarga de desarrollar una descripcin sore los contenidos que
aparecen como textos # sore su estructura, complementando dic$o texto con
di%ersos ojetos /como fotograf'as, animaciones, etc0!
Es un lenguaje mu# simple # general que sir%e para defnir otros lenguajes que
tienen que %er con el formato de los documentos! El texto en .l se crea a partir
de etiquetas, tami.n llamadas tags, que permiten interconectar di%ersos
conceptos # formatos!
*ara la escritura de este lenguaje, se crean etiquetas que aparecen
especifcadas a tra%.s de corc$etes o par.ntesis angulares+ ( # )! Entre sus
componentes, los elementos dan forma a la estructura esencial del lenguaje,
#a que tienen dos propiedades /el contenido en s' mismo # sus atriutos0!
*or otra parte, cae destacar que el HTML permite ciertos cdigos que se
conocen como scripts, los cuales rindan instrucciones espec'fcas a los
na%egadores que se encargan de procesar el lenguaje! Entre los scripts que
pueden agregarse, los ms conocidos # utili6ados son Pa%a;cript # *H*!
El marcado estructural es el que estipula la fnalidad del texto, aunque no
defne cmo se %er el elemento! El marcado presentacional, por su parte, es el
que se encarga de se4alar cmo se %er el texto ms all de su funcin!
*ara conocer el cdigo HTML que utili6a una pgina @e, $a# que seleccionar
Qer cdigo fuente en nuestro na%egador /como 2nternet Explorer o Mo6illa
=irefox0! "l elegir esta opcin, se arir el editor de texto con el cdigo HTML
de la pgina que se est %isuali6ando!
,re%e $istoria del HTML
Este lenguaje fue desarrollado por la 8rgani6acin Europea de 2n%estigacin
-uclear /<E9-0 en el a4o 1RKB con la fnalidad de desarrollar un sistema de
almacenamiento donde las cosas no se perdieran, que pudieran ser conectadas
a tra%.s de $iper%'nculos! *rimeramente crearon un dispositi%o llamado
NmemexO, el cual era considerado como un suplemento para la memoria!
*osteriormente, 1ouglas Engelart, dise4 un entorno de traajo por
computadora que reciir'a el nomre de o-Line ;#stem que pose'a un catlogo
para facilitar la tarea de :squeda dentro de un mismo organismo!
9eci.n en 1RSB, Ted -elson acu4 el t.rmino $iper%'nculo, ideando una
estructura que se encontraa conectada de forma electrnica # que ms tarde
permitir'a la creacin de la Corld Cide Ce /1RTR0, un sistema de $ipertexto a
tra%.s del cual era posile compartir una %ariada informacin sir%i.ndose de
2nternet /ser%'a para la comunicacin entre in%estigadores nucleares que
formaran parte del <E9-0!
El norteamericano Tim ,erners-Lee fue el primero en proponer una descripcin
de HTML en un documento que pulic en 1RR1! "ll' descri'a %eintids
componentes que suponen el dise4o ms sico # simple del HTML!
El tipo de codifcacin que se utili6 para el desarrollo de este sistema de
$iper%'nculos de'a ser comprendido, tanto por ordenadores tontos como por
mega-estaciones, por eso fue necesario crear uno asolutamente simples,
tanto en lo que respectaa al lenguaje de intercamio /HTML0, como el que
$ac'a referencia al protocolo de red /HTT*0!
"l d'a de $o# existen los Editores Ce que permiten que los dise4adores, a
tra%.s de $erramientas grfcas que recien el nomre de CU;2CU3 puedan
crear pginas @e sin conocer el cdigo $tml, este se crea de forma
automati6ada, dndole estructura a la @e # permitiendo que sea ms all del
ordenador donde es creada! Entre los recursos que pueden enla6arse al cdigo
HTML se encuentran fotograf'as, %'deos, arc$i%os de otras @es o incluso de la
misma # todo tipo de contenido que se encuentre suido a la red!
Lee todo en+ 1efnicin de $tml - 7u. es, ;ignifcado # <oncepto
$ttp+55defnicion!de5$tml5Vix66LS*oc,EBl