HTML 2 PDF

HTML
Importancia de respetar los estándares
Luis Fernando Llana Dı́az
Departamento de Sistemas Informáticos y Computación

Universidad Complutense de Madrid
7 de mayo de 2007
Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Cómo funciona Internet I
HTML
Cómo funciona Internet II
Fichero HTML
http://antares.sip.ucm.es/~luis/index.php
HTML
Agentes usuario
¿Quién va a ser el agente del usuario de una página WEB?

Navegador gráfico: Internet Explorer, Mozilla, Ópera, Safari,
Konqueror, Epiphany, Galeon, . . . cualquier sujeto (fı́sico o
jurı́dico) podrı́a hacer un navegador.
Navegadores de texto: Lynx.
Dispositivos: Ordenador personal, PDA, impresora, teléfono
móvil, teclado braille.
Es necesario seguir una notación estándar.
No se deben usar tecnologı́as dependientes de un navegador,
dispositivo, marca comercial.
HTML
¿Quién dicta los estándares?
Una compañı́a privada

Peligros de monopolio privado: la compañı́a que posea el
estándar obliga a todo el mundo a aceptar sus condiciones.
ISO (AENOR), W3C (http://www.w3.org/): organismos
independientes
HTML
Estándares en Internet
HTML 4.01 es una recomendación del Web Consortium que es

entendida por el sevidor (el que manda la página) y
el agente de usuario (el que recibe la página).
http://www.w3.org/TR/html4/
XHTML 1.0 http://www.w3.org/TR/xhtml1/
CSS 2.1 http://www.w3.org/TR/CSS21/
WCAG 1.0 es una recomendación del Web Consortium para la
elaboración de contenidos accesibles en la WEB.
http://www.w3.org/TR/WCAG10/
AENOR 139803:2004 norma norma es plenamente compatible con
WCAG 1.0.
HTML
HTML: HyperText Markup Language
Hipertexto: Texto que enlaza referencias, permite la navegación.

Lenguaje de marcado: texto plano con marcas especiales que
indican el cometido de cada parte del mismo.
LATEX: Leslie Lamport TEX(D.E. Knuth).
HTML de Tim Berners-Lee.
XML, XHTML.....
HTML
¿Cómo se genera el HTML?
Manualmente,
Con un editor de texto: emacs, kate, kwrite, gedit, . . . .
Con un editor de HTML: quata, . . .
Mediante un programa
Programas PHP.
Servlets, JSP.
Gestor de contenidos: PLONE.
HTML
Esctructura de un documento HTML
<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN " > 1
< html > 2
< head > 3
< meta http - equiv = " Content - Type " content = " text / html ; charset = utf -8 " > 4
< title > Prueba 1 </ title > 5
</ head > 6
7
< body > 8
< h1 > Prueba 1 </ h1 > 9
<p > Parrafo </ p > 10
< ul > 11
< li > item 1 </ li > 12
< li > item 2 </ li > 13
</ ul > 14
</ body > 15
</ html > 16
HTML
IMPORTANTE
En HTML se representan los elementos, no cómo se pintan.
HTML tiene la estrucutura no la presentación.
HTML
Añadiendo estilo
< head > 1

. . .... .... .... .. 2
< link rel = " stylesheet " type = " text / css " href = " estilo . css " media = " screen " > 3
. . . .. . .. .. . .. . .. . 4
</ head > 5
body { 1
background - color : # ace ; 2
color : black ; 3
font - family : sans - serif ; 4
padding :0; 5
margin :0; 6
} 7
h1 , h2 , h3 , h4 , h5 , h6 { 8
font - variant : small - caps ; 9
background - color :#99 FF33 ; 10
padding - left :1 em ; 11
padding - right :1 em ; 12
border - top : solid 1 pt black ; 13
border - bottom : solid 1 pt black ; 14
text - align : right ; 15
} 16
HTML
HTML
Marcas importantes
Cabeceras: h1, . . . , h6.

Párrafos: p.
Listas: ol, ul, dl.
Tablas: table.
Enlaces: a.
Imágenes: img.
Formularios: form.
Marcas de formato: span, div.
HTML
Cabeceras
Sirven para dar estructura al documento.

Se deben usar de forma ordenada:
Uso adecuado: NO se debe usar para cambiar el tipo de letra.
HTML
< h1 >I Premio Complutense - Microsoft < br > de Diseno Accesible </ h1 > 1
< h2 id = " bases " > Bases </ h2 > 2
<p > La Universidad Complutense de Madrid , a traves del Observatorio 3
Complutense de la Accesibilidad a la Educacion Superior , convoca ... 4
.......................... 5
</ p > 6
< h3 id = " candidatos " > Candidatos </ h3 > 7
< h3 id = " requisitos " > Requisitos </ h3 > 8
.......................... 9
< h2 id = " formularios " > Formularios </ h2 > 10
........................ 11
HTML
Párrafos
Todo el texto debe ir dentro de un bloque

El párrafo es la principal marca de bloque.
<p > Todo el texto deben ir dentro de una marca de bloque . 1
La principal marca de bloque es el parrafo . 2
</ p > 3
4
<p class = " direccion " > 5
Luis Fernando Llana Diaz < br > 6
Dept . Sistemas Informaticos y Programacion < br > 7
Facultad de Informatica < br > 8
Universidad Complutense de Madrid < br > 9
</ p > 10
HTML
Enlaces (Anchors)
Los enlaces hacen que el HTML sea hyper.

<a href = " http :// antares . sip . ucm . es /~ luis " > Luis Fernando Llana Diaz </ a > 1
<a href = " http :// jigsaw . w3 . org / css - validator / " > 1
< img src = " http :// jigsaw . w3 . org / css - validator / images / vcss " 2
alt = " Valid CSS !: validate this page CSS " > 3
4
</ a > 5
HTML
Tipos de URLs
Absoluta:
1 a>
<a href = " http :// antares . sip . ucm . es / ocaes / bases . php # candidatos " > ... </
Relativas:
Al servidor donde está el documento:
<a href = " / ocaes / bases . php # candidatos " > ... </ a > 1
<a href = " / ocaes / bases . php " > ... </ a > 2
<a href = " / ocaes / formulario . sxw " > ... </ a > 3
Al documento actual . . .
<a href = " # candidatos " > ... </ a > 1
<a href = " otro . php # patata " > ... </ a > 2
<a href = " otro . php " > ... </ a > 3
<a href = " formulario . sxw " > ... </ a > 4
. . . o marca base, dentro de la cabecera:

< base href = " http :// antares . sip . ucm . es / ocaes / bases . php " > 1
HTML
Formularios
Interactuar con el servidor:

< div class = " buscar " > 1
< form action = " http :// www . google . es / search " method = " get " > 2
<p > 3
< input type = " hidden " name = " hl " value = " es " > 4
< label for = " buscar " > Buscar </ label > 5
< input id = " buscar " size = " 10 " name = " q " > < br > 6
< button type = " submit " > Buscar en google </ button > 7
</ p > 8
</ form > 9
</ div > 10
AVISO: la etiqueta <button> no funciona bien en IE. El siguiente

NO funciona bien en IE:
< button type = " submit " name = " borrar " value = " 3 " > Borrar </ button > 1
< button type = " submit " name = " modificar " value = " 3 " > Modificar </ button > 2
En IE6 es necesario usar la etiqueta <input type="submit">.
HTML
Formularios
Atributos:
action URL del programa que analiza la petición; puede se
un PHP, JSP o servlet de Java, ASP, Phyton, CGI
(prgrama en cualquier lenguaje de programación:
Python, Perl, C o incluso Pascal).
Salida del programa un fichero HTML.
method dos métodos de dar el input al programa.
get se añaden los parámetros a la URL.
post se añaden el la petición como fichero de
entrada (no aparece en la URL).
HTML
Formularios
Todas las marcas de entrada deben tener el atributo name (para el

servidor) y el atributo id (para la marca label).
Marca input, atributo type:
text Texto normal.
password Texto normal, pero en el echo aparecen *. AVISO no
es seguro.
checkbox Marcado o no, verdadero o falso, etc...
radio Opciones alternativas, sólo se puede seleccionar uno
de los relacionados (tienen el mismo atributo name).
image, reset, submit, button botones, es preferible usar la
etiqueta button, pero cuidado con IE.
HTML
Formularios
Otras marcas de input:

file mandar un fichero, es necesario que el método sea
post.
hidden datos que no se muestran en el navegador.
Otras marcas de entrada (no input):

textarea textos largos.
<select ...><option>...</option>...</select> para listas
desplegables.
http://antares.sip.ucm.es/∼luis/sugerencias.php
HTML
Imágenes
< img src = " nopatentessw . png " 1
2
alt = " En Europa : si a la libertad de innovacion , no a las patentes de programacion " >
Atributos necesarios:
src URL del fichero a ser mostrado, puede ser local o
remoto.
< img src = " http :// jigsaw . w3 . org / css - validator / images / vcss " 1
alt = " Valid CSS !: validate this page CSS " > 2
alt Texto alternativo. Se muestra cuando la imagen no

está disponible:
La imagen no existe.
Navegadores de texto o voz.
Mientras la imagen se carga (poco ancho de
banda).
HTML
Tablas
< table > 1

< col class = " nombre " > < col class = " apellido " > < col class = " telefono " > < col class = " email 2" >
< tbody > 3
< tr > < th > Nombre </ th > < th > Apellidos </ th > < th > Telefono </ th > < th >e - Mail </ th > </ tr > 4
< tr > 5
< td class = " nombre " > Luis Fernando </ td > 6
< td class = " apellidos " > Llana Diaz </ td > 7
< td class = " telefono " > 4527 </ td > 8
< td class = " email " > llana@sip . ucm . es </ td > 9
</ tr > 10
< tr > 11
<! -- one of ( TD TH ) -- > 12
< td class = " nombre " > Jose Luis </ td > 13
14
< td class = " apellidos " > Rodriguez Zapatero </ td > 15
< td class = " telefono " > </ td > 16
< td class = " email " > zp@la - moncloa . es </ td > 17
</ tr > 18
</ tbody > 19
</ table > 20
HTML
Atributos I
src, href, alt, action, method.
Modifican el comportamiento de la marca.
El valor siempre debe ir entre comillas simples ’ o comillas
dobles ".
Obsoleto: <body bgcolor="#cba">. Todo lo relativo a
visualización: colores, tipos de letras, posicionamiento, se debe
dejar en hojas de estilo separadas.
< div id = " izquierda " class = " lateral " > 1
<a class = " noCSS " href = " # contenido " > saltar menu de navegacion </ a > 2
<p > Enlaces : </ p > 3
< ul > 4
< li > <a href = " http :// www . ucm . es " > Universidad Complutense de Madrid </ a > </ 5 li >
< li > <a href = " http :// antares . sip . ucm . es /~ luis " > Pagina de Luis </ a > </ li > 6
< li > <a href = " http :// www . w3 . org " > Pagina del W3C </ a > </ li > 7
</ ul > 8
</ div > 9
HTML
Atributos II
Atributos interactivos: onclick, onmousedown, onmouseup,

onmouseover, onmouseout, onkeypress, onkeydown, ....
Invocan un script cuando algo ocurre. Esnecesario poner una
alternativa funcional en HTML.
Posibles problemas de accesiblidad:
El formulario no se envı́a si no es a través del script; las
comprobaciones se deben hacer también en el servidor en caso
de que el usuario no tenga habilitado JavaScript.
Las páginas tiene información que sólo es accesible con
JavaScript, p.e., menús desplegables.
Siempre se pueden acceder las páginas accesibles.
HTML
Uso bueno del marcado I
Identificación del lenguaje natural:

< html lang = " es " > 1
...... 2
< body > 3
..... 4
<p lang = " en " > ..... </ p > 5
..... 6
</ body > 7
</ html > 8
No usar las comillas:

<q > texto entre comillas </ q > 1
HTML
Uso bueno del marcado II
Citas:
< blockquote cite = " http :// www . mycom . com / tolkien / twotowers . html " > 1
<p lang = " en " > They went in single file , running like hounds on a strong scent , 2
and an eager light was in their eyes . Nearly due west the broad 3
swath of the marching Orcs tramped its ugly slot ; the sweet grass 4
of Rohan had been bruised and blackened as they passed . </ p > 5
</ blockquote > 6
Usar adecuadamente las cabeceras h1,. . . , h6. No usarlo para

cambiar de tamaño de letra.
< style type = " text / css " > 1
span . aviso { 2
font - size : xx - large ; 3
color : red ; 4
} 5
</ style > 6
....... 7
....... 8
< span class = " aviso " > .... </ span > 9
HTML
Uso bueno del marcado III
No usar tablas para maquetado de las páginas.

< body > 1
< div id = " superior " > 2
3
< img src = " nopat - siinno . gif " alt = " En Europa : si a la libertad .... " longdesc = " ....... ">
</ div > 4
< div id = " izquierda " class = " lateral " > 5
<a class = " noCSS " href = " # contenido " > saltar menu de navegacion </ a > 6
<p > Enlaces : </ p > 7
< ul > .... </ ul > 8
</ div > 9
< div id = " centro " > 10
< h1 id = " contenido " > Primera pagina de prueba </ h1 > 11
...... 12
</ div > 13
< div id = " derecha " class = " lateral " > 14
< div class = " noticias " > 15
< ul > .... </ ul > 16
</ div > 17
</ div > 18
</ div > 19
HTML
Uso bueno del marcado IV
Texto en 2 columnas
< div class = " columnaDoble " > 1
< div class = " colIzquierda " > 2
<p > Un parrafo , .... </ p > 3
<p > Otro parrafo , ... </ p > 4
</ div > 5
< div class = " colDerecha " > 6
<p > Un parrafo , ... </ p > 7
</ div > 8
</ div > 9
HTML
Leyendo el estándar I
http://www.w3.org/TR/html401/
Descripción sintáctica de un fichero HTML en sintaxis DTD.
Donde se pueden colocar marcas y donde no. E.j. una referencia
debe estar dentro de una marca de bloque.
Dos clases de marcas block o inline.
<! ELEMENT BODY O O ( % block ;| SCRIPT )+ +( INS | DEL ) -- do c ume n t body -- > 1
<! ATTLIST BODY 2
%attrs ; -- %coreattrs , %i18n , %events -- 3
onload %Script ; # IMPLIED -- the documen t has been loaded -- 4
onunload %Script ; # IMPLIED -- the documen t has been removed -- 5
> 6
<! ENTITY % block 1

" P | %heading ; | %list ; | %preformatted ; | DL | DIV | NOSCRIPT | 2
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS " > 3
HTML
Leyendo el estándar II
<! ELEMENT P - O ( % inline ;)* -- p a r a g r a p h -- > 1

<! ATTLIST P 2
> 4
<! ENTITY % fontstyle 1

" TT | I | B | BIG | SMALL " > 2
3
<! ENTITY % phrase " EM | STRONG | DFN | CODE | 4
SAMP | KBD | VAR | CITE | ABBR | ACRONYM " > 5
6
<! ENTITY % special 7
" A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO " > 8
9
<! ENTITY % formctrl " INPUT | SELECT | TEXTAREA | LABEL | BUTTON " > 10
11
<! ENTITY % inline " # PCDATA | %fontstyle ; | %phrase ; | %special ; | %formctrl ; " > 12
<! ENTITY % flow " %block ; | %inline ; " > 1
HTML
Leyendo el estándar III
<! ELEMENT A - - ( % inline ;)* -( A ) -- anchor -- > 1

<! ATTLIST A 2
charset %Charset ; # IMPLIED -- char encod in g of linked re s ou r ce -- 4
type %ContentType ; # IMPLIED -- advisory content type -- 5
name CDATA # IMPLIED -- named link end -- 6
href %URI ; # IMPLIED -- URI for linked re so u rc e -- 7
hreflang %LanguageCode ; # IMPLIED -- language code -- 8
rel %LinkTypes ; # IMPLIED -- forward link types -- 9
rev %LinkTypes ; # IMPLIED -- reverse link types -- 10
accesskey %Character ; # IMPLIED -- a c c e s s i b i l i t y key c h a r a c t e r -- 11
shape %Shape ; rect -- for use with client - side image maps -- 12
coords %Coords ; # IMPLIED -- for use with client - side image maps -- 13
tabindex NUMBER # IMPLIED -- position in tabbing order -- 14
onfocus %Script ; # IMPLIED -- the element got the focus -- 15
onblur %Script ; # IMPLIED -- the element lost the focus -- 16
> 17
<! ELEMENT BR - O EMPTY -- forced line break -- > 1

<! ATTLIST BR 2
%coreattrs ; -- id , class , style , title -- 3
> 4
HTML

HTML 2 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML 2 PDF

Transféré par

Droits d'auteur :

Formats disponibles

HTML

Importancia de respetar los estándares

Luis Fernando Llana Dı́az

Departamento de Sistemas Informáticos y Computación

Cómo funciona Internet I

¿Quién va a ser el agente del usuario de una página WEB?

Una compañı́a privada

HTML 4.01 es una recomendación del Web Consortium que es

Hipertexto: Texto que enlaza referencias, permite la navegación.

¿Cómo se genera el HTML?

< head > 1

Cabeceras: h1, . . . , h6.

Sirven para dar estructura al documento.

Todo el texto debe ir dentro de un bloque

Los enlaces hacen que el HTML sea hyper.

. . . o marca base, dentro de la cabecera:

Interactuar con el servidor:

AVISO: la etiqueta <button> no funciona bien en IE. El siguiente

En IE6 es necesario usar la etiqueta <input type="submit">.

Todas las marcas de entrada deben tener el atributo name (para el

Otras marcas de input:

Otras marcas de entrada (no input):

alt Texto alternativo. Se muestra cuando la imagen no

< table > 1

Atributos interactivos: onclick, onmousedown, onmouseup,

Identificación del lenguaje natural:

No usar las comillas:

Uso bueno del marcado II

Usar adecuadamente las cabeceras h1,. . . , h6. No usarlo para

No usar tablas para maquetado de las páginas.

Uso bueno del marcado IV

<! ENTITY % block 1

<! ELEMENT P - O ( % inline ;)* -- p a r a g r a p h -- > 1

<! ENTITY % fontstyle 1

<! ENTITY % flow " %block ; | %inline ; " > 1

<! ELEMENT A - - ( % inline ;)* -( A ) -- anchor -- > 1

<! ELEMENT BR - O EMPTY -- forced line break -- > 1

Vous aimerez peut-être aussi