You are on page 1of 15

Caractersticas bsicas

Captulo 2. Caractersticas bsicas


2.1. Lenguajes de etiquetas
Uno de los retos iniciales a los que se tuvo que enfrentar la informtica fue el de cmo almacenar la informacin en los archivos digitales. Como los primeros archivos slo contenan texto sin formato, la solucin utilizada era muy sencilla: se codifica an las letras del alfa eto y se transforma an en n!meros. "e esta forma, para almacenar un contenido de texto en un archivo electrnico, se utiliza una ta la de conversin que transforma cada carcter en un n!mero. Una vez almacenada la secuencia de n!meros, el contenido del archivo se puede recuperar realizando el proceso inverso.

Figura 2.1 #$emplo sencillo de codificacin de caracteres


El proceso de transformacin de caracteres en secuencias de nmeros se denomina codificacin de caracteres y cada una de las tablas que se han definido para realizar la transformacin se conocen con el nombre de pginas de cdigo. Una de las codificaciones ms conocidas (y una de las primeras que se publicaron) es la codificacin !C"". #a importancia de las codificaciones en $%&# se 'er ms adelante.

Una vez resuelto el pro lema de almacenar el texto simple, se presenta el reto de almacenar los contenidos de texto con formato. #n otras pala ras, %cmo se almacena un texto en negrita& %y un texto de color ro$o& %y otro texto azul, en negrita y su rayado& Utilizar una ta la de conversin similar a las que se utilizan para textos sin formato no es posi le, ya que existen infinitos posi les estilos para aplicar al texto. Una solucin t'cnicamente via le consiste en almacenar la informacin so re el formato del texto en una zona especial reservada dentro del propio archivo. #n esta zona se podra indicar dnde comienza y dnde termina cada formato. (o o stante, la solucin que realmente se emplea para guardar la informacin con formato es mucho ms sencilla: el archivo electrnico almacena tanto los contenidos
()ina *

Caractersticas bsicas
como la informacin so re el formato de esos contenidos. )i por e$emplo se quiere dividir el texto en prrafos y se desea dar especial importancia a algunas pala ras, se podra indicar de la siguiente manera:
<parrafo> Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial. </parrafo>

#l principio de un prrafo se indica mediante la pala ra <parrafo> y el final de un prrafo se indica mediante la pala ra </parrafo>. "e la misma manera, para asignar ms importancia a ciertas pala ras del texto, se encierran entre <importante> y </importante>. #l proceso de indicar las diferentes partes que componen la informacin se denomina marcar *markup en ingl's+. Cada una de las pala ras que se emplean para marcar el inicio y el final de una seccin se denominan etiquetas. ,unque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera:

#tiqueta de apertura: carcter <, seguido del nom re de la etiqueta *sin espacios en lanco+ y terminado con el carcter > #tiqueta de cierre: carcter <, seguido del carcter /, seguido del nom re de la etiqueta *sin espacios en lanco+ y terminado con el carcter >

,s, la estructura tpica de las etiquetas -./0 es:


<nombre_etiqueta> ... </nombre_etiqueta>

-./0 es un lenguaje de etiquetas *tam i'n llamado lenguaje de marcado+ y las pginas 1e ha ituales estn formadas por cientos o miles de pares de etiquetas. "e hecho, las letras 2/02 de la sigla -./0 significan "markup language", que es como se denominan en ingl's a los lenguajes de marcado. ,dems de -./0, existen muchos otros lengua$es de etiquetas como 3/0, )4/0, "oc5oo6 y /ath/0. 0a principal venta$a de los lengua$es de etiquetas es que son muy sencillos de leer y escri ir por parte de las personas y de los sistemas electrnicos. 0a principal desventa$a es que pueden aumentar mucho el tama7o del documento, por lo que en general se utilizan etiquetas con nom res muy cortos.

()ina +

Caractersticas bsicas

2.2. El primer documento HTML


0as pginas -./0 se dividen en dos partes: la ca ecera y el cuerpo. 0a ca ecera incluye informacin so re la propia pgina, como por e$emplo su ttulo y su idioma. #l cuerpo de la pgina incluye todos sus contenidos, como prrafos de texto e imgenes.

Figura 2.2 #squema de las partes que forman un documento -./0 #l cuerpo *llamado body en ingl's+ contiene todo lo que el usuario ve en su pantalla y la ca ecera *llamada head en ingl's+ contiene todo lo que no se ve *con la !nica excepcin del ttulo de la pgina, que los navegadores muestran como ttulo de sus ventanas+. , continuacin se muestra el cdigo -./0 de una pgina 1e muy sencilla:
<html> <head> <title>El primer documento HTM </title> </head> <bod!> <p>El lengua"e HTM es <strong>tan sencillo</strong> que pr#cticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </bod!> </html>

)i quieres pro ar este primer e$emplo, de es hacer lo siguiente: 8. , re un editor de archivos de texto y crea un archivo nuevo 9. Copia el cdigo -./0 mostrado anteriormente y p'galo tal cual en el archivo que has creado
,. 4uarda el archivo con el nom re que quieras, pero con la extensin .html

:ara que el e$emplo anterior funcione correctamente, es imprescindi le que utilices un editor de texto sin formato. )i tu sistema operativo es ;indo1s, puedes utilizar el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++, etc. pero no puedes utilizar un procesador de textos como Word o Open Office. )i utilizas sistemas operativos tipo 0inux, puedes utilizar editores como Gedit, edit, ate e incluso !i, pero no utilices Office ni Open Office.

()ina ,

Caractersticas bsicas
"espu's de crear el archivo con el contenido -./0, ya se puede a rir con cualquier navegador para que se muestre con el siguiente aspecto:

Figura 2. ,specto que muestra el primer documento -./0 en cualquier navegador )i ya ests viendo tu primera pgina -./0 en el navegador, prue a a pulsar so re el men! $er > C%digo fuente y podrs ver el cdigo -./0 de la pgina que est cargada en el navegador. "e hecho, puedes ver el cdigo -./0 de cualquier pgina de <nternet mediante la opcin $er > C%digo fuente. :rue a a ver el cdigo -./0 de tu pgina preferida y vers cuantas etiquetas puede llegar a tener una pgina comple$a. =olviendo al cdigo -./0 del primer e$emplo, es importante conocer las tres etiquetas principales de un documento -./0 *<html>, <head>, <bod!>+:
<html>: indica

el comienzo y el final de un documento -./0. (inguna etiqueta o contenido puede colocarse antes o despu's de la etiqueta <html> *con una sola excepcin que se ver ms adelante+. #n el interior de la etiqueta <html> se definen la ca ecera y el cuerpo del documento -./0 y todo lo que se coloque fuera de la etiqueta <html> se ignora. <head>: delimita la parte de la ca ecera del documento. 0a ca ecera contiene informacin so re el propio documento -./0, como por e$emplo su ttulo y el idioma de la pgina. 0os contenidos indicados en la ca ecera no son visi les para el usuario, con la excepcin de la etiqueta <title>, que se utiliza para indicar el ttulo del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador *si no te has fi$ado anteriormente, vuelve a a rir el primer e$emplo en cualquier navegador y o serva dnde se muestra el ttulo de la pgina+.
<bod!>: delimita

el cuerpo del documento -./0. #l cuerpo encierra todos los contenidos que se muestran al usuario *prrafos de texto, imgenes, ta las+. #n general, el <bod!> de un documento contiene cientos de etiquetas -./0, mientras que el <head> no contiene ms que unas pocas.

()ina -

Caractersticas bsicas

Figura 2.! #squema de las etiquetas principales que contiene un documento -./0 #$ercicio 8 "eterminar el cdigo -./0 correspondiente a la siguiente pgina:

Figura 2." :gina -./0 sencilla que resalta algunas partes del texto :istas: <em> y <del>

Solucin: Ejercicio 1
<&'(CT)*E html *+, -C .///01C//'T' 2HTM 3.4 5trict//E6. .http7//888.81.org/T9/xhtml3/'T'/xhtml3/strict.dtd.> <html xmlns:.http7//888.81.org/3;;;/xhtml. lang:.es. xml7lang:.es.> <head> <title>El primer documento HTM </title> </head> <bod!> <p>El lengua"e HTM es <strong>tan sencillo</strong> que practicamente se entiende sin estudiar el significado de sus etiquetas principales.</p>

()ina .

Caractersticas bsicas
<p><demas de textos en <strong>negrita</strong>= tambien se pueden poner <em>en cursi>a</em> o <del>tachados</del>.</p> </bod!> </html>

2. . Etiquetas # atributos
-./0 define >8 etiquetas que los dise7adores pueden utilizar para marcar los diferentes elementos que componen una pgina:
a, abbr, acron!m, address, applet, area, b, base, basefont, bdo, big, bloc?quote, bod!, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, di>, dl, dt, em, fieldset, font, form, frame, frameset, h3, h@, h1, hA, hB, hC, head, hr, html, i, iframe, img, input, ins, isindex, ?bd, label, legend, li, lin?, map, menu, meta, noframes, noscript, ob"ect, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, stri?e, strong, st!le, sub, sup, table, tbod!, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, >ar.

"e todas las etiquetas disponi les, las siguientes se consideran obsoletas y no se pueden utilizar: applet, basefont, center, dir, font, isindex, menu, s, stri?e, u. , pesar de que se trata de un n!mero de etiquetas muy grande, no es suficiente para crear pginas comple$as. ,lgunos elementos como las imgenes y los enlaces requieren cierta informacin adicional para estar completamente definidos. 0a etiqueta <a> por e$emplo se emplea para incluir un enlace en una pgina. Utilizando slo la etiqueta <a> no es posi le esta lecer la direccin a la que apunta cada enlace. Como no es via le crear una etiqueta por cada enlace diferente, la solucin consiste en personalizar las etiquetas -./0 mediante cierta informacin adicional llamada atributos. "e esta forma, se utiliza la misma etiqueta <a> para todos los enlaces de la pgina y se utilizan los atri utos para indicar la direccin a la que apunta cada enlace.
<html> <head> <title>E"emplo de atributos en las etiquetas</title> </head> <bod!> <p> os enlaces son mu! f#ciles de indicar7 <a>5o! un enlace incompleto= porque no tengo direcci%n de destino</a>. <a href:.http7//888.google.com.>Este otro enlace apunta a la p#gina de Doogle</a>. </p> </bod!> </html>

()ina /

Caractersticas bsicas

Figura 2.$ 0os atri utos permiten personalizar las etiquetas -./0 #l primer enlace del e$emplo anterior no est completamente definido, ya que no apunta a ninguna direccin. #l segundo enlace, utiliza la misma etiqueta <a>, pero a7ade informacin adicional mediante un atri uto llamado href. 0os atri utos se incluyen dentro de la etiqueta de apertura. :or ahora no es importante comprender la etiqueta <a> ni el atri uto href, ya que se explicarn con todo detalle ms adelante. (o todos los atri utos se pueden utilizar en todas las etiquetas. :or ello, cada etiqueta define su propia lista de atri utos disponi les. ,dems, cada atri uto tam i'n indica el tipo de valor que se le puede asignar. )i el valor de un atri uto no es vlido, el navegador ignora ese atri uto. ,unque cada una de las etiquetas -./0 define sus propios atri utos, algunos de los atri utos son comunes a muchas o casi todas las etiquetas. "e esta forma, es ha itual explicar por separado los atri utos comunes de las etiquetas para no tener que volver a hacerlo cada vez que se explica una nueva etiqueta. 0os atri utos comunes se dividen en cuatro grupos seg!n su funcionalidad:

Atributos bsicos0 se pueden utilizar prcticamente en todas las etiquetas $%&#. Atributos para internacionalizacin0 los utilizan las p)inas que muestran sus contenidos en 'arios idiomas. Atributos de eventos0 slo se utilizan en las p)inas 1eb dinmicas creadas con 2a'a!cript. Atributos de foco0 relacionados principalmente con la accesibilidad de los sitios 1eb.

2.3.1. Atributos bsicos


0os siguiente cuatro atri utos sicos se pueden aplicar prcticamente a todas las etiquetas -./0:
()ina 3

Caractersticas bsicas
Atributo
id : .texto. class : .texto. st!le : .texto. title : .texto.

Descripcin Establece un identificador nico a cada elemento dentro de una p)ina $%&# Establece la clase C!! que se aplica a los estilos del elemento Establece de forma directa los estilos C!! de un elemento Establece el ttulo a un elemento (me4ora la accesibilidad y los na'e)adores lo muestran cuando el usuario pasa el ratn por encima del elemento)

0a mayora de pginas 1e actuales utilizan los atri utos id y class de forma masiva. )in em argo, estos atri utos slo son realmente !tiles cuando se tra a$a con C)) y con ?avascript. @especto al valor de los atri utos id y class, slo pueden contener guiones medios */+, guiones a$os *_+, letras yAo n!meros, pero no pueden empezar por n!meros. ,dems, los navegadores distinguen may!sculas de min!sculas y no se recomienda utilizar letras como E y acentos, ya que no es seguro que funcionen correctamente en todas las versiones de todos los navegadores.

2.3.2. Atributos para internacionalizacin


#stos atri utos son !tiles para aquellas pginas que muestran sus contenidos en varios idiomas y para aquellas que quieren indicar de forma expltica el idioma de sus contenidos:
Atributo
lang : .codigo de idioma. xml7lang : .codigo de idioma. dir

Descripcin "ndica el idioma del elemento mediante un cdi)o predefinido "ndica el idioma del elemento mediante un cdi)o predefinido "ndica la direccin del te5to (til para los idiomas que escriben de derecha a izquierda)

#n las pginas 3-./0, el atri uto xml7lang tiene ms prioridad que lang y es o ligatorio incluirlo siempre que se incluye el atri uto lang. 0os idiomas se indican mediante un cdigo estandarizado *es para espa7ol, en para ingl's, etc.+, tal y como se explicar ms adelante en la seccin idioma del enlace del captulo B. Como la pala ra internacionaliFaci%n es muy larga, se suele sustituir por la a reviatura i3Gn *el n!mero 3G se refiere al n!mero de letras que existen entre la letra i y la letra n de la pala ra internacionaliFaci%n+.
()ina 6

Caractersticas bsicas
2.3.3. Atributos de eventos
#stos atri utos slo se utilizan en las pginas 1e que incluyen cdigo ?ava)cript para realizar acciones dinmicas so re los elementos de la pgina. Cada vez que el usuario pulsa una tecla, mueve su ratn o pulsa cualquier otn del ratn, se produce un evento dentro del navegador. Utilizando ?ava)cript y los siguientes atri utos, es posi le responder de forma adecuada a cada evento.
Atributo
onblur

Descripcin 7eseleccionar el elemento

Elementos que pueden usarlo


<button>8 <input>8 <label>8 <select>8 <textarea>8 <bod!>

onchange onclic? ondblclic?

7eseleccionar un elemento que <input>8 <select>8 <textarea> se ha modificado (inchar y soltar el ratn %odos los elementos

(inchar dos 'eces se)uidas con %odos los elementos el ratn !eleccionar un elemento (ulsar una tecla (sin soltar)
<button>8 <input>8 <label>8 <select>8 <textarea>8 <bod!>

onfocus

on?e!do8n

Elementos de formulario y
<bod!>

on?e!press (ulsar una tecla

Elementos de formulario y
<bod!>

on?e!up

!oltar una tecla pulsada #a p)ina se ha car)ado completamente

Elementos de formulario y
<bod!> <bod!>

onload

onmousedo8n

(ulsar (sin soltar) un botn del %odos los elementos ratn %odos los elementos %odos los elementos

onmousemo>e &o'er el ratn

El ratn "sale" del elemento onmouseout (pasa por encima de otro elemento)
onmouseo>er

El ratn "entra" en el elemento %odos los elementos (pasa por encima del elemento) !oltar el botn que estaba pulsado en el ratn "nicializar el formulario (borrar %odos los elementos
<form>

onmouseup onreset

()ina 9

Caractersticas bsicas
Atributo Descripcin todos sus datos)
onresiFe onselect onsubmit onunload

Elementos que pueden usarlo

!e ha modificado el tama:o de <bod!> la 'entana del na'e)ador !eleccionar un te5to En'iar el formulario
<input>8 <textarea> <form>

!e abandona la p)ina (por <bod!> e4emplo al cerrar el na'e)ador)

2.3.4. Atributos de foco


Cuando el usuario selecciona un elemento en una aplicacin, se dice que "el elemento tiene el foco del programa". )i por e$emplo un usuario pincha con su ratn so re un cuadro de texto y comienza a escri ir, ese cuadro de texto tiene el foco del programa, llamado "focus" en ingl's. )i el usuario selecciona despu's otro elemento, el elemento original pierde el foco y el nuevo elemento es el que tiene el foco del programa. 0os elementos de las pginas 1e tam i'n pueden o tener el foco de la aplicacin *en este caso, el foco del navegador+ y -./0 define algunos atri utos especficos para controlar cmo se seleccionan los elementos.
Atributo
access?e! : .letra. tabindex : .numero. onfocus= onblur

Descripcin Establece una tecla de acceso rpido a un elemento $%&# Establece la posicin del elemento en el orden de tabulacin de la p)ina. !u 'alor debe estar comprendido entre 4 y
1@.HCH

Controlan los e'entos 2a'a!cript que se e4ecutan cuando el elemento obtiene o pierde el foco

Cuando se pulsa repetidamente la tecla del ta ulador so re una pgina 1e , el navegador selecciona de forma alternativa todos los elementos de la pgina que se pueden seleccionar *principalmente los enlaces y los elementos de formulario+. #l atri uto tabindex permite alterar el orden en el que se seleccionan los elementos, por lo que es muy !til cuando se quiere controlar de forma precisa cmo se seleccionan los campos de un formulario comple$o. :or su parte, el atri uto access?e! permite esta lecer una tecla para acceder de forma rpida a cualquier elemento. ,unque la tecla de acceso rpido se esta lece mediante -./0, la com inacin de teclas necesarias para activar ese acceso rpido depende del navegador. #n el navegador <nternet #xplorer se pulsa la tecla < T C la tecla definidaD

()ina *;

Caractersticas bsicas
en el navegador Eirefox se pulsa <lt C 5hift C la tecla definidaD en el navegador Fpera se pulsa 5hift C Esc C la tecla definidaD en el navegador )afari se pulsa Ctrl C la tecla definida.

2.!. Elementos HTML


,dems de etiquetas y atri utos, -./0 define el t'rmino elemento para referirse a las partes que componen los documentos -./0. ,unque en ocasiones se ha la de forma indistinta de 2elementos2 y 2etiquetas2, en realidad un elemento -./0 es mucho ms que una etiqueta, ya que est formado por:

Una etiqueta de apertura. Cero o ms atri utos. .exto encerrado por la etiqueta. Una etiqueta de cierre.

#l texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de -./0 no pueden encerrar ning!n texto. #l siguiente esquema muestra un elemento -./0, formado por una etiqueta <p>, atri utos y contenidos de texto:

Figura 2.% #squema de las partes que componen un elemento -./0 0a estructura mostrada en el esquema anterior es un elemento -./0 ya que comienza con una etiqueta de apertura *<p>+, contiene cero o ms atri utos *class:.normal.+, dispone de un contenido de texto *Esto es un p#rrafo+ y finaliza con una etiqueta de cierre *</p>+. :or tanto, si una pgina 1e tiene dos prrafos de texto, la pgina contiene dos elementos y cuatro etiquetas *dos etiquetas <p> de apertura y dos etiquetas </p> de cierre+. "e todas formas, aunque estrictamente no son lo mismo, es ha itual intercam iar las pala ras 2elemento2 y 2etiqueta2. :or otra parte, el lengua$e -./0 clasifica a todos los elementos en dos grupos: elementos en lnea *inline elements en ingl's+ y elementos de bloque *block elements en ingl's+. 0a principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio disponi le en la pgina. 0os elementos de loque siempre empiezan en una nueva lnea y ocupan todo el espacio disponi le hasta el final de la lnea, aunque sus

()ina **

Caractersticas bsicas
contenidos no lleguen hasta el final de la lnea. :or su parte, los elementos en lnea slo ocupan el espacio necesario para mostrar sus contenidos. )i se considera el siguiente e$emplo:
<html> <head> <title>E"emplo de elementos en lInea ! elementos de bloque</title> </head> <bod!> <p> os p#rrafos son elementos de bloque.</p> <a href:.http7//888.google.com.> os enlaces son elementos en lInea</a> <p>'entro de un p#rrafo= <a href:.http7//888.google.com.>los enlaces</a> siguen siendo elementos en lInea.</p> </bod!> </html>

0a siguiente imagen muestra cmo visualizan los navegadores el cdigo -./0 anterior *mediante C)) se han a7adido ordes que muestran el espacio ocupado por cada elemento+:

Figura 2.& "iferencias entre elementos en lnea y elementos de loque #l primer prrafo contiene un texto corto que slo ocupa la mitad de la anchura de la ventana del navegador. (o o stante, el espacio reservado por el navegador para el primer prrafo llega hasta el final de esa lnea, por lo que resulta evidente que los elementos <p> son elementos de loque. :or otra parte, el primer enlace del e$emplo anterior tam i'n tiene un texto corto que ocupa solamente la mitad de la anchura de la ventana del navegador. #n este caso, el navegador slo reserva para el enlace el sitio necesario para mostrar sus contenidos. )i

()ina *+

Caractersticas bsicas
se a7ade otro enlace en esa misma lnea, se mostrara a continuacin del primer enlace. :or tanto, los elementos <a> son elementos en lnea. :or !ltimo, el segundo prrafo sigue ocupando todo el espacio disponi le hasta el final de cada lnea *por ser un elemento de loque+ y el enlace que se encuentra dentro del prrafo slo ocupa el sitio necesario para mostrar sus contenidos *por ser un elemento en lnea+. 0a mayora de elementos de loque pueden contener en su interior elementos en lnea y otros elementos de loque. 0os elementos en lnea slo pueden contener texto u otros elementos en lnea. #n otras pala ras, un elemento de loque no puede aparecer dentro de un elemento en lnea. #n cam io, un elemento en lnea puede aparecer dentro de un elemento de loque y dentro de otro elemento en lnea. 0os elementos en lnea definidos por -./0 son: a, abbr, acron!m, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, ?bd, label, q, s, samp, select, small, span, stri?e, strong, sub, sup, textarea, tt, u, >ar. 0os elementos de loque definidos por -./0 son: address, bloc?quote, center, dir, di>, dl, fieldset, form, h3, h@, h1, hA, hB, hC, hr, isindex, menu, noframes, nos/cript, ol, p, pre, table, ul. 0os siguientes elementos tam i'n se considera que son de loque: dd, dt, frame/set, li, tbod!, td, tfoot, th, thead, tr. 0os siguientes elementos pueden ser en lnea y de loque seg!n las circunstancias: button, del, iframe, ins, map, ob"ect, script.

2.". 'inta(is de las etiquetas )HTML


#l lengua$e -./0 original era muy permisivo en su sintaxis, por lo que era posi le escri ir sus etiquetas y atri utos de muchas formas diferentes. 0as etiquetas por e$emplo podan escri irse en may!sculas, en min!sculas e incluso com inando may!sculas y min!sculas. #l valor de los atri utos de las etiquetas se podan indicar con y sin comillas *.+. ,dems, el orden en el que se a ran y cerra an las etiquetas no era importante. 0a flexi ilidad de -./0 puede parecer un aspecto positivo, pero el resultado final son pginas con un cdigo -./0 desordenado, difcil de mantener y muy poco profesional. ,fortunadamente, 3-./0 soluciona estos pro lemas a7adiendo ciertas normas en la forma de escri ir las etiquetas y atri utos. , continuacin se muestran las cinco restricciones sicas que introduce 3-./0 respecto a -./0 en la sintaxis de sus etiquetas: 8+ Las etiquetas se tienen que cerrar de acuerdo a como se abren: #$emplo correcto en 3-./0:

()ina *,

Caractersticas bsicas
<p>Este es un p#rrafo con <a>un enlace</a></p>

#$emplo incorrecto en 3-./0 *pero correcto en -./0+:


<p>Este es un p#rrafo con <a>un enlace</p></a>

9+ Los nombres de las etiquetas # atributos siempre se escriben en min*sculas: #$emplo correcto en 3-./0:
<p>Este es un p#rrafo con <a href:.http7//888.google.com.>un enlace</a></p>

#$emplo incorrecto en 3-./0 *pero correcto en -./0+:


<*>Este es un p#rrafo con << H9EJ:.http7//888.google.com.>un enlace</<></*>

G+ El +alor de los atributos siempre se encierra con comillas: #$emplo correcto en 3-./0:
<p>Este es un p#rrafo con <a href:.http7//888.google.com.>un enlace</a></p>

#$emplo incorrecto en 3-./0 *pero correcto en -./0+:


<p>Este es un p#rrafo con <a href:http7//888.google.com>un enlace</a></p>

B+ Los atributos no se pueden comprimir: #$emplo correcto en 3-./0:


<dl compact:.compact.>...</dl>

#$emplo incorrecto en 3-./0 *pero correcto en -./0+:


<dl compact>...</dl>

#ste tipo de atri utos en los que el nom re coincide con su valor no son muy ha ituales.

()ina *-

Caractersticas bsicas
H+ Todas las etiquetas deben cerrarse siempre: 0a mayora de etiquetas -./0 encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. )in em argo, algunas etiquetas especiales llamadas "eti"uetas #ac$as" no necesitan encerrar ning!n texto. 0a etiqueta <br> por e$emplo, se utiliza para indicar el comienzo de una nueva lnea, tal y como se ver ms adelante. :or sus caractersticas, la etiqueta <br> nunca encierra ning!n contenido de texto. Como el estndar 3-./0 o liga a cerrar todas las etiquetas a iertas, siempre que se incluya la etiqueta <br> se de era cerrar de forma seguida: <br></br>. :ara que el cdigo resulte ms cmodo de escri ir, 3-./0 permite en estos casos escri ir de forma a reviada una etiqueta que se a re y se cierra de forma consecutiva. #n lugar de a rir y cerrar de forma consecutiva la etiqueta *<br></br>+ se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vaca que se a re y se cierra en ese mismo punto. #n la forma compacta es ha itual equivocarse con la posicin del carcter /. #$emplo correcto en 3-./0:
<br/>

#$emplo incorrecto en 3-./0 *pero correcto en -./0+:


<br>

,dems de estas cinco restricciones sicas, 3-./0 incluye otros cam ios ms avanzados respecto a -./0: 8. ,ntes de acceder al valor de un atri uto, se eliminan todos los espacios en lanco que se encuentran antes y despu's del valor. ,dems, se eliminan todos los espacios en lanco so rantes dentro del valor de un atri uto. #n otras pala ras, si en el interior de un atri uto se incluyen varios espacios en lanco seguidos, se eliminan todos salvo un !nico espacio en lanco utilizado para separar las diferentes pala ras. +. Como se explicar ms adelante al ha lar de la etiqueta <script>, el cdigo ?ava)cript de e encerrarse entre unas etiquetas especiales *<&KC'<T<K y LL>+ para evitar que el navegador interprete de forma errnea caracteres como M y <.
,. 0as pginas 3-./0 de en prescindir del atri uto name para identificar de

forma !nica a los elementos. #n su lugar, siempre de e utilizarse el atri uto id. "e hecho, en la versin 8.I del estndar 3-./0, el atri uto name se ha declarado o soleto para las etiquetas a, applet, form, frame, iframe, img y map.

()ina *.

You might also like