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

21 de abril de 2008

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

< meta http - equiv = " Content - Type " content = " text / html ; charset = utf -8 " >
< 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 >

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

}

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 , convoca ...
. . . . . . . . . . . . . . . . . . . . . . . . . .
</ 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 >
. . . . . . . . . . . . . . . . . . . . . . . .

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

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

Luis Fernando Llana Díaz

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

HTML

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 >

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

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

HTML

Imágenes

< img src = " n o p a t e n t e s s w . png "

alt = " En Europa : si a la l i b e r t a d de innovacion , no a las p a t e n t e s de p r o g r a m a c i o n " >

Atributos necesarios:

src URL del fichero a ser mostrado, puede ser local o

remoto.

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

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 >

< col class = " nombre " > < col class = " a p e l l i d o " > < col class = " t e l e f o n o " > < col class = " email " >
< tbody >

< tr > < th > Nombre </ th > < th > A p e l l i d o s </ th > < th > T e l e f o n o </ th > < th >e - Mail </ th > </ tr >
< tr >

< td class = " nombre " > Luis F e r n a n d o </ td >
< td class = " a p e l l i d o s " > Llana Diaz </ td >
< td class = " t e l e f o n o " > 4527 </ td >
< td class = " email " > l l a n a @ s i p . ucm . es </ td >

</ tr >
< tr >

<! -- one of ( TD TH ) -- >
< td class = " nombre " > Jose Luis </ td >

< td class = " a p e l l i d o s " > R o d r i g u e z Z a p a t e r o </ td >
< td class = " t e l e f o n o " > </ td >
< td class = " email " > zp@la - moncloa . es </ td >

</ tr >

</ tbody >

</ table >

Luis Fernando Llana Díaz

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

HTML

Atributos

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 = " i z q u i e r d a " class = " lateral " >

<a class = " noCSS " href = " # c o n t e n i d o " > saltar menu de n a v e g a c i o n </ a >
<p > Enlaces : </ p >

< ul >

< li > <a href = " http :// www . ucm . es " > 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 > </ li >
< li > <a href = " http :// antares . sip . ucm . es /~ luis " > Pagina de Luis </ a > </ li >
< li > <a href = " http :// www . w3 . org " > Pagina del W3C </ a > </ li >

</ ul >

</ div >

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

......
< body >

.....
<p lang = " en " > ..... </ p >
.....
</ body >

</ html >

No usar las comillas:

<q > texto entre c o m i l l a s </ q >

Luis Fernando Llana Díaz

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

HTML

Uso bueno del marcado II

Citas:

< b l o c k q u o t e cite = " http :// www . mycom . com / tolkien / t w o t o w e r s . html " >
<p lang = " en " > They went in single file , running like hounds on a strong scent ,
and an eager light was in their eyes . Nearly due west the broad
swath of the m a r c h i n g Orcs tramped its ugly slot ; the sweet grass
of Rohan had been bruised and b l a c k e n e d as they passed . </ p >
</ b l o c k q u o t e >

Usar adecuadamente las cabeceras h1,. . . , h6. No usarlo para
cambiar de tamaño de letra.

< style type = " text / css " >

span . aviso {

font - size : xx - large ;
color : red ;

}

</ style >
.......
.......
< span class = " aviso " > .... </ span >

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 >

< div id = " s u p e r i o r " >

< img src = " nopat - siinno . gif " alt = " En Europa : si a la l i b e r t a d .... " l o n g d e s c = " ....... " >

</ div >
< div id = " i z q u i e r d a " class = " lateral " >

<a class = " noCSS " href = " # c o n