HTML 2 PDF

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 17

HTML

Importancia de respetar los estándares

Luis Fernando Llana Dı́az

Departamento de Sistemas Informáticos y Computación


Universidad Complutense de Madrid

7 de mayo de 2007

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Cómo funciona Internet I

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Cómo funciona Internet II

Fichero HTML

http://antares.sip.ucm.es/~luis/index.php

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Agentes usuario

¿Quién va a ser el agente del usuario de una página WEB?


Navegador gráfico: Internet Explorer, Mozilla, Ó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, teléfono
móvil, teclado braille.
Es necesario seguir una notación estándar.
No se deben usar tecnologı́as dependientes de un navegador,
dispositivo, marca comercial.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
¿Quién dicta los estándares?

Una compañı́a privada


Peligros de monopolio privado: la compañı́a que posea el
estándar obliga a todo el mundo a aceptar sus condiciones.
ISO (AENOR), W3C (http://www.w3.org/): organismos
independientes

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Estándares en Internet

HTML 4.01 es una recomendación del Web Consortium que es


entendida por el sevidor (el que manda la página) y
el agente de usuario (el que recibe la pá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 recomendación del Web Consortium para la
elaboració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.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
HTML: HyperText Markup Language

Hipertexto: Texto que enlaza referencias, permite la navegació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.....

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

¿Có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.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

IMPORTANTE
En HTML se representan los elementos, no cómo se pintan.
HTML tiene la estrucutura no la presentación.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Añ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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Marcas importantes

Cabeceras: h1, . . . , h6.


Párrafos: p.
Listas: ol, ul, dl.
Tablas: table.
Enlaces: a.
Imágenes: img.
Formularios: form.
Marcas de formato: span, div.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Párrafos

Todo el texto debe ir dentro de un bloque


El pá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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Tipos de URLs
Absoluta:
1 a>
<a href = " http :// antares . sip . ucm . es / ocaes / bases . php # candidatos " > ... </

Relativas:
Al servidor donde está 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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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">.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Formularios

Atributos:
action URL del programa que analiza la petición; puede se
un PHP, JSP o servlet de Java, ASP, Phyton, CGI
(prgrama en cualquier lenguaje de programación:
Python, Perl, C o incluso Pascal).
Salida del programa un fichero HTML.
method dos métodos de dar el input al programa.
get se añaden los parámetros a la URL.
post se añaden el la petición como fichero de
entrada (no aparece en la URL).

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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, só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.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Formularios

Otras marcas de input:


file mandar un fichero, es necesario que el mé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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Imá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


está disponible:
La imagen no existe.
Navegadores de texto o voz.
Mientras la imagen se carga (poco ancho de
banda).
Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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
visualizació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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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 través del script; las
comprobaciones se deben hacer también en el servidor en caso
de que el usuario no tenga habilitado JavaScript.
Las páginas tiene información que sólo es accesible con
JavaScript, p.e., menús desplegables.
Siempre se pueden acceder las páginas accesibles.

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Uso bueno del marcado I

Identificació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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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 tamañ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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Uso bueno del marcado III

No usar tablas para maquetado de las pá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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Leyendo el estándar I

http://www.w3.org/TR/html401/
Descripción sintá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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

Leyendo el estándar II

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


<! ATTLIST P 2
%attrs ; -- %coreattrs , %i18n , %events -- 3
> 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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML
Leyendo el estándar III

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


<! ATTLIST A 2
%attrs ; -- %coreattrs , %i18n , %events -- 3
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

Luis Fernando Llana Dı́az Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
HTML

También podría gustarte