PDF de programación - Páginas WEB Accesibles - Una breve introducción al HTML

Páginas WEB Accesibles
Una breve introducción al HTML

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Computación

Universidad Complutense de Madrid

14 de octubre de 2008

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Luis Fernando Llana Díaz

Páginas WEB Accesibles

¿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

Páginas WEB Accesibles

Fichero HTMLhttp://antares.sip.ucm.es/~luis/index.phpFichero de texto: Texto comprensible por humanos. Contiene
letras, números, separadores que se organizan en
palabras. Se puede abrir en un editor de texto.

Fichero binario: sólo entendible por una compuadora.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Fichero Binario

0 0 0 0 0 0 0 0 : 504 b 0304 1400 0000 0000 b656 b132 e1a5
0 0 0 0 0 0 1 0 : 3139 1 e00 0000 1 e00 0000 0800 0000 6 d69
0 0 0 0 0 0 2 0 : 6 d65 7479 7065 6170 706 c 6963 6174 696 f
0 0 0 0 0 0 3 0 : 6 e2f 766 e 642 e 7375 6 e2e 786 d 6 c2e 7772
0 0 0 0 0 0 4 0 : 6974 6572 504 b 0304 1400 0000 0000 b656
0 0 0 0 0 0 5 0 : b132 70 f7 69 db 2400 0000 2400 0000 0 c00
0 0 0 0 0 0 6 0 : 0000 6 c61 796 f 7574 2 d63 6163 6865 0100
0 0 0 0 0 0 7 0 : 0100 7020 0000 0050 0900 0004 1 d00 0000
0 0 0 0 0 0 8 0 : 5009 0000 0438 0000 0050 0900 0004 4 d00
0 0 0 0 0 0 9 0 : 0000 504 b 0304 1400 0800 0800 b656 b132
000000 a0 : 0000 0000 0000 0000 0000 0000 0 b00 0000
000000 b0 : 636 f 6 e74 656 e 742 e 786 d 6 ced 5 d4b 73 db
000000 c0 : c876 dee7 5720 5 cdc b22b a4f8 902 c 4 bbe
000000 d0 : b66e 3 c92 e7c6 29 f9 5196 269 e 2 c9b 4093
000000 e0 : 6 a07 4063 ba01 ca74 ea6e ee3f f1d2 55 f1
000000 f0 : 2235 bbd9 f29f e497 e43c ba01 f029 52 a4
0 0 0 0 0 1 0 0 : 6 cdf 192 f 666 c 018 d 46 f7 797 c e73b a70f
0 0 0 0 0 1 1 0 : e4c7 7 f79 9 fc4 c148 1 aab 74 fa a4d1 ddeb
0 0 0 0 0 1 2 0 : 3402 9986 3 a52 e9f0 49 e3 a7cb 1 f5b 478 d
0 0 0 0 0 1 3 0 : bf9c fcd3 e37f 3 e7b 757 a f99f af9f 057 a
0 0 0 0 0 1 4 0 : 3050 a17c 14 e9 b048 649 a b742 9 de6 f067
0 0 0 0 0 1 5 0 : f0fa a71f ce9f 9 f06 8 d56 bbfd 2 a93 e92b
0 0 0 0 0 1 6 0 : 1 ab6 a7cd b0dd 3 ebb 3 c0b f8e7 33 f7 5400

PK . . . . . . . . . V .2..
1 9 . . . . . . . . . . . . mi
m e t y p e a p p l i c a t i o
n / vnd . sun . xml . wr
iterPK . . . . . . . . . V
.2 p . i . $ ... $ .....
.. layout - cache ..
.. p ... P . . . . . . . .
P . . . . 8 . . . P .... M .
.. PK . . . . . . . . . V .2
. . . . . . . . . . . . . . . .
content . xml .] Ks .
. v .. W \..+... , K .
.n <...). Q .&. ,. @ .
j . @c ... t . n .?.. U .
"5....... <...) R .
l ../ fl .. F . y |.;..
... y ... H .. t .....
4...: R .. I ....[ G .
...... >{ uz ..... z
0 P .|... Hd .. B ... g
. . . . . . . . . V ..*..+
...... >. <...3. T .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Fichero texto

<h2 > Enlaces interesantes </ h2 >
< h3 id = " g h o s t v i e w " > Ghostscript , G h o s t v i e w y GSview </ h3 >
<p > Para poder v i s u a l i z a r los f i c h e r o s P o s t s c r i p t n e c e s i t a r a s un visor .

En los s i s t e m a s Linux suele venir incorporado ,
<a href = " http :// www . cs . wisc . edu /~ ghost / " > el visor para los

s i s t e m a s de Microsoft </ a > ,

tendras que i n s t a l a r l o

m a n u a l m e n t e .
Una curiosidad , los
visores de P o s t S c r i p t pueden v i s u a l i z a r los f i c h e r o s PDF .

< h3 id = " knoppix " > Linux del aula </ h3 >
<p >

Las p r a c t i c a s del aula se r e a l i z a n en esl sistema o p e r a t i v o GNU / Linux .
La i n s t a l a c i o n se ha r e a l i z a d o m e d i a n t e una meta - d i s t r i b u c i o n llamada
<a href = " http :// www . knoppix . net " > Knoppix </ a >. A partir de esta
d i s t r i b u c i o n es b a s t a n t e s e n c i l l a la i n s t a l a c i o n y el uso de
Linux . He m o d i f i c a d o la d i s t r i b u c i o n o r i g i n a l para incluir d i v e r s a s
h e r r a m i e n t a s de p r o g r a m a c i o n . La ultima
<a href = " knoppix / ultima . iso " > imagen iso del CD </ a > ocupa unos 700 Mb ;
tenlo en cuenta
si te la quieres bajar .

</p >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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

Ejemplos
http://antares.sip.ucm.es/~luis/
accesibilidadWEB08-09.php#ejemplos

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Esctructura de un documento HTML

<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN " >
< html >
< head >

< meta http - equiv = " Content - Type " content = " text / html ; charset = iso -8859 -15 " >
< title > Prueba 1 </ title >

</ head >

< body >

<h1 > Prueba 1 </ h1 >
<p > Parrafo </ 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

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

Páginas WEB Accesibles

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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 ;
padding :0;
margin :0;

}

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

font - variant : 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

Páginas WEB Accesibles

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Marcas importantes I

Marcas de bloque
Como párrafos

Cabeceras: h1, . . . , h6.
Párrafos: p.
Listas: ol, ul, dl.
Tablas: table.
Formularios: form.
div.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Marcas importantes II

Marcas inline
Como letras

Enlaces: a.
Imágenes: img.
span.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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

Páginas WEB Accesibles

Diseno Accesible </ h1 >

<h1 > I Premio Complutense - Microsoft < 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 ó n Superior , convoca ...
. . . . . . . . . . . . . . . . . . . . . . . . . .
</p >
< h3 id = " c a n d i d a t o s " > Candidatos </ h3 >
< h3 id = " r e q u i s i t o s " > Requisitos </ h3 >
. . . . . . . . . . . . . . . . . . . . . . . . . .
< h2 id = " f o r m u l a r i o s " > Formularios </ h2 >
. . . . . . . . . . . . . . . . . . . . . . . .

1
2
3
4
5
6
7
8
9
10
11

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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 parrafo .

</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 Programacion < br >
F a c u l t a d de Informatica < 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 >

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Enlaces (Anchors)

Los enlaces hacen que el HTML sea hyper.

<a href = " http :// antares . sip . ucm . es /~ luis " > Luis F e r n a n d o Llana Díaz </ 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 >

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5
6
7
8
9
10

1

1
2
3
4
5

Tipos de URLs

Absoluta:

Relativas:

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

1

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 :// antares . sip . ucm . es / ocaes / bases . php " >

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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 IE6. El siguiente
NO funciona bien en IE6:

< button type = " submit " name = " borrar " value = " 3 " > Borrar </ button >
< button type = " submit " name = " m o d i f i c a r " value = " 3 " > Modificar </ button >

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

Luis Fernando Llana Díaz

Páginas WE