HTML HTML: HyperText Markup Language

Transcripción

HTML
Importancia de respetar los estándares
Luis Fernando Llana Dı́az
Departamento de Sistemas Informáticos y Computación
Universidad Complutense de Madrid
21 de abril de 2008
Departamento de Sistemas Informáticos y ComputaciónUniversidad Complutense de Madrid
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 " >
< 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 >
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 >
.. ..............
< link rel = " stylesheet " 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 ;
}
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 >
< h2 id = " bases " > Bases </ h2 >
<p > La Universidad Complutense de Madrid , a traves del Observatorio
Complutense de la Accesibilidad a la Educacion Superior , convoca ...
..........................
</ p >
< h3 id = " candidatos " > Candidatos </ h3 >
< h3 id = " requisitos " > Requisitos </ h3 >
..........................
< h2 id = " formularios " > Formularios </ h2 >
........................
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 .
La principal marca de bloque es el parrafo .
</ p >
<p class = " direccion " >
Luis Fernando Llana Diaz < br >
Dept . Sistemas Informaticos y Programacion < br >
Facultad de Informatica < br >
Universidad Complutense de Madrid < br >
</ p >
HTML
Enlaces (Anchors)
Los enlaces hacen que el HTML sea hyper.
<a href = " http :// antares . sip . ucm . es /~ luis " > Luis Fernando Llana Diaz </ a >
<a href = " http :// jigsaw . w3 . org / css - validator / " >
< img src = " http :// jigsaw . w3 . org / css - validator / images / vcss "
alt = " Valid CSS !: validate this page CSS " >
</ a >
HTML
Tipos de URLs
Absoluta:
<a href = " http :// antares . sip . ucm . es / ocaes / bases . php # candidatos " > ... </ a >
Relativas:
Al servidor donde está el documento:
<a href = " / ocaes / bases . php # candidatos " > ... </ a >
<a href = " / ocaes / bases . php " > ... </ a >
<a href = " / ocaes / formulario . sxw " > ... </ a >
Al documento actual . . .
<a
<a
<a
<a
href = " # candidatos " > ... </ a >
href = " otro . php # patata " > ... </ a >
href = " otro . php " > ... </ a >
href = " formulario . sxw " > ... </ a >
. . . o marca base, dentro de la cabecera:
< base href = " http :// antares . sip . ucm . es / ocaes / bases . php " >
HTML
Imágenes
< img src = " nopatentessw . png "
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 "
alt = " Valid CSS !: validate this page CSS " >
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 >
< col class = " nombre " > < col class = " apellido " > < col class = " telefono " > < col class = " email " >
< tbody >
< tr > < th > Nombre </ th > < th > Apellidos </ th > < th > Telefono </ th > < th >e - Mail </ th > </ tr >
< tr >
< td class = " nombre " > Luis Fernando </ td >
< td class = " apellidos " > Llana Diaz </ td >
< td class = " telefono " > 4527 </ td >
< td class = " email " > llana@sip . ucm . es </ td >
</ tr >
< tr >
<! -- one of ( TD TH ) -- >
< td class = " nombre " > Jose Luis </ td >
< td class = " apellidos " > Rodriguez Zapatero </ td >
< td class = " telefono " > </ td >
< td class = " email " > zp@la - moncloa . es </ td >
</ tr >
</ tbody >
</ table >
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
visualización: colores, tipos de letras, posicionamiento, se debe
dejar en hojas de estilo separadas.
< div id = " izquierda " class = " lateral " >
<a class = " noCSS " href = " # contenido " > saltar menu de navegacion </ a >
<p > Enlaces : </ p >
< ul >
< li > <a href = " http :// www . ucm . es " > Universidad Complutense 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 >
HTML
Uso bueno del marcado I
Identificación del lenguaje natural:
< html lang = " es " >
......
< body >
.....
<p lang = " en " > ..... </ p >
.....
</ body >
</ html >
No usar las comillas:
<q > texto entre comillas </ q >
HTML
Uso bueno del marcado II
Citas:
< blockquote cite = " http :// www . mycom . com / tolkien / twotowers . 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 marching Orcs tramped its ugly slot ; the sweet grass
of Rohan had been bruised and blackened as they passed . </ p >
</ blockquote >
Usar adecuadamente las cabeceras h1,. . . , h6. No usarlo para
cambiar de tamaño de letra.
< style type = " text / css " >
span . aviso {
font - size : xx - large ;
color : red ;
}
</ style >
.......
.......
< span class = " aviso " > .... </ span >
HTML
Uso bueno del marcado III
No usar tablas para maquetado de las páginas.
< body >
< div id = " superior " >
< img src = " nopat - siinno . gif " alt = " En Europa : si a la libertad .... " longdesc = " ....... " >
</ div >
< div id = " izquierda " class = " lateral " >
<a class = " noCSS " href = " # contenido " > saltar menu de navegacion </ a >
<p > Enlaces : </ p >
< ul > .... </ ul >
</ div >
< div id = " centro " >
< h1 id = " contenido " > Primera pagina de prueba </ h1 >
......
</ div >
< div id = " derecha " class = " lateral " >
< div class = " noticias " >
< ul > .... </ ul >
</ div >
</ div >
</ div >
HTML
Uso bueno del marcado IV
Texto en 2 columnas
< div class = " columnaDoble " >
< div class = " colIzquierda " >
<p > Un parrafo , .... </ p >
<p > Otro parrafo , ... </ p >
</ div >
< div class = " colDerecha " >
<p > Un parrafo , ... </ p >
</ div >
</ div >
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 u men t body -- >
<! ATTLIST BODY
%attrs ;
-- %coreattrs , %i18n , %events -onload
%Script ;
# IMPLIED -- the docume nt has been loaded -onunload
%Script ;
# IMPLIED -- the documen t has been removed ->
<! ENTITY % block
" P | %heading ; | %list ; | %preformatted ; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS " >
HTML
Leyendo el estándar II
<! ELEMENT P - O ( % inline ;)*
<! ATTLIST P
%attrs ;
>
-- p a r a g r a p h -- >
-- %coreattrs , %i18n , %events --
<! ENTITY % fontstyle
" TT | I | B | BIG | SMALL " >
<! ENTITY % phrase " EM | STRONG | DFN | CODE |
SAMP | KBD | VAR | CITE | ABBR | ACRONYM " >
<! ENTITY % special
" A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO " >
<! ENTITY % formctrl " INPUT | SELECT | TEXTAREA | LABEL | BUTTON " >
<! ENTITY % inline " # PCDATA | %fontstyle ; | %phrase ; | %special ; | %formctrl ; " >
<! ENTITY % flow " %block ; | %inline ; " >
HTML
Leyendo el estándar III
<! ELEMENT A - - ( % inline ;)* -( A )
<! ATTLIST A
%attrs ;
charset
%Charset ;
# IMPLIED
type
%ContentType ; # IMPLIED
name
CDATA
# IMPLIED
href
%URI ;
# IMPLIED
hreflang
%LanguageCode ; # IMPLIED
rel
%LinkTypes ;
# IMPLIED
rev
%LinkTypes ;
# IMPLIED
accesskey
%Character ;
# IMPLIED
shape
%Shape ;
rect
coords
%Coords ;
# IMPLIED
tabindex
NUMBER
# IMPLIED
onfocus
%Script ;
# IMPLIED
onblur
%Script ;
# IMPLIED
>
<! ELEMENT BR - O EMPTY
<! ATTLIST BR
%coreattrs ;
>
-- anchor -- >
---------------
%coreattrs , %i18n , %events -char encod in g of linked r es o u r ce -a dvisory content type -named link end -URI for linked re s o u r c e -l anguage code -forward link types -reverse link types -a c c e s s i b i l i t y key c h a r a c t e r -for use with client - side image maps -for use with client - side image maps -p osition in tabbing order -the element got the focus -the element lost the focus --
-- forced line break -- >
-- id , class , style , title --
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 = " modificar " value = " 3 " > Modificar </ button >
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

HTML HTML: HyperText Markup Language

Transcripción

Documentos relacionados

Real Madrid cayó ayer ante Celta de Vigo, 3 a 2. La estrella inglesa