PDF de programación - HTML Importancia de respetar los estándares

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

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

Fichero HTMLhttp://antares.sip.ucm.es/~luis/index.php¿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

<! DO CTYP E HTML PUBLIC " -// W3C // DTD HTML 4.01// EN " >
< html >
< head >

< meta http - equiv = " Content - Type " c onte nt = " text / html ; char set = utf -8 " >
< title > Prueba 1 </ title >

</ head >

< body >

< h1 > Prueba 1 </ h1 >
<p > Par rafo </ p >
< ul >

< li > item 1 </ li >
< li > item 2 </ li >

</ ul >
</ body >
</ html >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 >

. . . . . . . . . . . . . . . .
< link rel = " s t y l e s h e e t " type = " text / css " href = " estilo . css " media = " screen " >
. . . . . . . . . . . . . . . . .

</ head >

body {

background - color : # ace ;
color : black ;
font - family : sans - serif ;
pad ding :0;
margin :0;

}

h1 , h2 , h3 , h4 , h5 , h6 {

font - var iant : small - caps ;
background - color :#99 FF33 ;
padding - left :1 em ;
padding - right :1 em ;
border - top : solid 1 pt black ;
border - bottom : solid 1 pt black ;
text - align : right ;

}

1
2
3
4
5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

Diseno A c c e s i b l e </ h1 >

< h1 >I Premio Complutense - M i c r o s o f t < br > de
< h2 id = " bases " > Bases </ h2 >
<p > La U n i v e r s i d a d C o m p l u t e n s e de Madrid , a traves del O b s e r v a t o r i o
C o m p l u t e n s e de la A c c e s i b i l i d a d a la E d u c a c i o n Superior , con voca ...
. . . . . . . . . . . . . . . . . . . . . . . . . .
</ p >
< h3 id = " c a n d i d a t o s " > C a n d i d a t o s </ h3 >
< h3 id = " r e q u i s i t o s " > R e q u i s i t o s </ h3 >
. . . . . . . . . . . . . . . . . . . . . . . . . .
< h2 id = " f o r m u l a r i o s " > F o r m u l a r i o s </ h2 >
. . . . . . . . . . . . . . . . . . . . . . . .

1
2
3
4
5
6
7
8
9
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 .

La p r i n c i p a l marca de bloque

es el par rafo .

</ p >

<p class = " d i r e c c i o n " >

Luis F e r n a n d o Llana Diaz < br >
Dept . S i s t e m a s I n f o r m a t i c o s y P r o g r a m a c i o n < br >
F a c u l t a d de I n f o r m a t i c a < br >
U n i v e r s i d a d C o m p l u t e n s e de Madrid < br >

</ p >

1
2
3
4
5
6
7
8
9
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 :// a ntare s . sip . ucm . es /~ luis " > Luis F e r n a n d o Llana Diaz </ a >

<a href = " http :// jigsaw . w3 . org / css - v a l i d a t o r / " >

< img src = " http :// jigsaw . w3 . org / css - v a l i d a t o r / images / vcss "

alt = " Valid CSS !: v a l i d a t e this page CSS " >

</ a >

1

1
2
3
4
5

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid

HTML

Tipos de URLs

Absoluta:

<a href = " http :// a ntare s . sip . ucm . es / ocaes / bases . php # c a n d i d a t o s " > ... </ a >

1

Relativas:

Al servidor donde está el documento:

<a href = " / ocaes / bases . php # c a n d i d a t o s " > ... </ a >
<a href = " / ocaes / bases . php " > ... </ a >
<a href = " / ocaes / f o r m u l a r i o . sxw " > ... </ a >

Al documento actual . . .

<a href = " # c a n d i d a t o s " > ... </ a >
<a href = " otro . php # patata " > ... </ a >
<a href = " otro . php " > ... </ a >
<a href = " f o r m u l a r i o . sxw " > ... </ a >

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

< base href = " http :// ant ares . sip . ucm . es / ocaes / bases . php " >

1
2
3

1
2
3
4

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 " >

< form action = " http :// www . google . es / search " method = " get " >

<p >

< input type = " hidden " name = " hl " value = " es " >
< label for = " buscar " > Buscar </ label >
< input id = " buscar " size = " 10 " name = " q " > < br >
< button type = " submit " > Buscar en google </ button >

</ p >

</ form >

</ div >

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 >
< button type = " submit " name = " m o d i f i c a r " value = " 3 " > M o d i f i c a r </ button >

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

1
2
3
4
5
6
7
8
9
10

1
2

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.

Lui