Problemas Sist. De Información
Sesión Contenido
1ª Sesión HTML 4.0
2ª Sesión CSSDHTML (JavaScript)
3ª Sesión XML
4ª Sesión JSP
5ª Sesión PHP
ESPECIFICACIÓN HTML 4.01
Alberto Gimeno [email protected]
Área de Lenguajes y Sistemas InformáticosDpto. de Informática e Ingeniería de Sistemas
Universidad de Zaragoza
Alberto Gimeno Arnal HTML 4.01 3
Estructura HTML
Un documento HTML 4 se compone de tres partes:
1. una línea que contiene información sobre la versión de HTML (DTD),
2. una sección de cabecera declarativa (delimitada por el elemento HEAD),
3. un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET.
Alberto Gimeno Arnal HTML 4.01 4
Definición Tipo Documento Estricto (Strict DTD)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> Transicional (Transitional DTD)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DTD Documentos con Marcos (Frameset
DTD) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Alberto Gimeno Arnal HTML 4.01 5
Cabecera <HEAD>... </HEAD> Elemento <TITLE> </TITLE> Metadatos <META>:
Lenguaje de scripts por defecto. Lenguaje de hojas de estilo por defecto. Codificación de caracteres del document
o.
Relación entre documentos <LINK> Ruta de acceso <BASE>
Alberto Gimeno Arnal HTML 4.01 6
Cuerpo <BODY>....</BODY> Atributos soportados:
id, class (identificadores a nivel de documento) lang (información sobre el idioma), dir (
dirección del texto) title (título del elemento) style (información de estilo en línea) bgcolor (color del fondo) onload, onunload (eventos intrínsecos) onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventos intrínsecos)
Alberto Gimeno Arnal HTML 4.01 7
Cuerpo (I): Formato y fuentes Color de fondo, alineación,... CSS Elementos TT, I, B, BIG, SMALL,
STRIKE, S y U Línea horizontal o separador HR Elementos de modificación: FONT y
BASEFONT CSS Encabezados: H1, H2, H3, H4, H5, H6 Elemento ADDRESS Agrupación de elementos: DIV y SPAN
Alberto Gimeno Arnal HTML 4.01 8
Cuerpo (II): Elementos de frase
EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, y ACRONYM
Citas: BLOCKQUOTE y Q Subíndices SUB y superíndices
SUP Párrafo P Saltos de línea BR Texto Preformateado PRE Anotaciones INS y DEL
Alberto Gimeno Arnal HTML 4.01 9
Cuerpo (III): Listas
No ordenada: <UL>...</UL> Ordenada: <OL>...</OL> Definiciones: <DL><DT>...
</DT> <DD>...</DD> </DL> DIR y MENU
Alberto Gimeno Arnal HTML 4.01 10
Cuerpo (IV): TABLA <TABLE>
Grupos de filas: <THEAD><TFOOT><TBODY>
Grupos de columnas <COLGROUP>|<COL>
Fila <TR> Celdas de encabezado <TH|TD>
Alberto Gimeno Arnal HTML 4.01 11
Tablas: Formato Los estilos de los bordes frame,
rules, border. La alineación horizontal y vertical
de los contenidos de las celdas. align, valign, char, charoff.
Los márgenes de las celdas cellspacing, cellpadding.
Alberto Gimeno Arnal HTML 4.01 12
Vínculos, objetos e imágenes Hiperenlaces A y marcadores #
HREF, origen del vinculo TITLE, titulo TARGET, marco destino. _blank, _seft, _parent,
nombre frame
<a href =#p1>1.- Introducción.</a>......<p align=“justify”> <a name=“p1”>HTML</a> ofrece muchas de las
posibilidades de publicación convencionales para la creación de textos enriquecidos y documentos estructurados, pero lo que lo separa de la mayoría de los otros lenguajes para el formato de documentos son sus características para hipertexto y para documentos interactivos .....
Alberto Gimeno Arnal HTML 4.01 13
Vínculos...., LINK Es un vinculo independiente del medio Esta definido en la cabecera del
documento href URI del recurso vinculado (origen) hreflang código de idioma type tipo consultivo de contenido rel tipos de vínculos directos rev tipos de vínculos inversos
Motores de búsqueda.
Alberto Gimeno Arnal HTML 4.01 14
Vínculos.... Ruta de acceso, BASE.
OBJECT Y APPLET, tiene prioridad sobre base.
Inserción de imágenes, IMG. SRC, origen (relativo/absoluto) ALT, descripción. USEMAP, indicador de mascara.
Mascaras o mapas, MAP.
Alberto Gimeno Arnal HTML 4.01 15
...., objetos .... OBJECT
codebase URI base data referencia a los datos del objeto type tipo de contenido de los datos codetype tipo de contenido del código archive lista de URIs separados por espacios standby mensaje a mostrar mientras se carga height especificar nueva altura width especificar nueva anchura usemap usar mapa de imágenes en el cliente name enviar como parte de un formulario tabindex posición en el orden de tabulación
Alberto Gimeno Arnal HTML 4.01 16
Video: object (param)<object width="320" height="252" classid="CLSID:22D6F312-
B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby="Cargando fichero..." type="application/x-oleobject"> <param name="filename" value="Video/1x12.avi"> <param name="showcontrols" value="1"> <param name="showdisplay" value="0"> <param name="showstatusbar" value="1"> <param name="autosize" value="0"> <param name="autostart" value="1"><embed src="Video/1x12.avi" showControls="true" showdisplay="false" showstatusbar="true" width="320" height="252" autostart="true"></embed>
</object>
Alberto Gimeno Arnal HTML 4.01 17
Marcos:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un documento simple con marcos</TITLE>
</HEAD><FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200">
<FRAME src="contenidos_del_marco1.html“ name=“marco1”> <FRAME src="contenidos_del_marco2.gif“ name=“marco2”>
</FRAMESET> <FRAME src="contenidos_del_marco3.html“name=“marco3”>
<NOFRAMES> <P>Este conjunto de marcos contiene: <UL> <LI> <A href="contenidos_del_marco1.html">Contenidos</A>
<LI><IMG src="contenidos_del_marco2.gif" alt="Una imagen"> <LI><A href="contenidos_del_marco3.html">Más contenidos</A> </UL> </NOFRAMES> </FRAMESET> </HTML>
Alberto Gimeno Arnal HTML 4.01 18
Marcos: Frameset ROWS COLS ONLOAD UNLOAD
Alberto Gimeno Arnal HTML 4.01 19
Marcos: Frame longdesc vínculo a descripción larga
(complementa al título) name nombre destino del marco src origen del contenido del marco frameborder bordes marginwidth anchuras de los márgenes en píxeles marginheight alturas de los márgenes en píxeles noresize scrolling barra de desplazamiento
Alberto Gimeno Arnal HTML 4.01 20
Formularios<FORM action="http://algunsitio.com/prog/usuarionuevo"
method="post|get“> <P><LABEL for="nombre">Nombre: </LABEL> <INPUT type="text" id="nombre"><BR> <LABEL for="apellido">Apellido: </LABEL> <INPUT type="text" id="apellido"><BR> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sexo" value="Varón"> Varón<BR> <INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR> <INPUT type="submit" value="Enviar"> <INPUT type="reset">
</FORM>
Alberto Gimeno Arnal HTML 4.01 21
Formularios: Atributos action procesador del formulario en el servidor method (GET|POST) método HTTP usado para enviar
formulario enctype "application/x-www-form-urlencoded“
“multipart/form-data”
“text/plain” accept lista de tipos MIME para subir ficheros name nombre del formulario para los scripts onsubmit el formulario fue enviado onreset el formulario fue reinicializado accept-charset lista de codif. de caracteres
soportadas
Alberto Gimeno Arnal HTML 4.01 22
Formularios: Controles INPUT (text, password, checkbox, radio,
submit, reset, file, hidden, image, button)
LABEL TEXTAREA SELECT ....OPTION OPTGROUP FIELDSET y LEGEND OBJECT
Alberto Gimeno Arnal HTML 4.01 23
Hojas de estilo: CCSEspecificación:
<META http-equiv="Content-Style-Type" content="text/css">
Internas<HEAD> <STYLE type="text/css"> H1 {border-width: 1px;
border: solid; text-align: center} </STYLE> </HEAD> Externas
<LINK href="miestilo.css" rel="stylesheet"
type="text/css">
Alberto Gimeno Arnal HTML 4.01 24
CSS: Declaración de reglas
H2 { font-family: Arial; }
gla
ndeclaració
valorpropiedadselector
Re
;:
Alberto Gimeno Arnal HTML 4.01 25
CSS: Tipos de reglas Clases (.)
<STYLE>P.clsA { font-size : 12px; font-family : Comic Sans MS; font- weight :
italic; border-width :2 ;border-style : solid;text-align : right;}
Pseudoclases (:)A: link { color : white ; }A: visited { color : cyan ; }
A: active { color : green ; } Nuevos identificadores (#)
#sombra {.....}
Alberto Gimeno Arnal HTML 4.01 26
CSS: Propiedades de Bloque. de Tipo de letra. de Formato del texto. de Color y Fondo. de Clasificación.
Alberto Gimeno Arnal HTML 4.01 27
Script’s JavaScript, vbScript, jScript, tlc, py, .... Internos
<head> <SCRIPT type="text/javascript"> function mi_onload() {
window.open("http://www.google.com","","width=550,height=420,menubar=no")
}</SCRIPT></head>
Externos<META http-equiv="Content-Script-Type"
content="text/tcl"> <SCRIPT type="text/vbscript" src="http://algunsitio.com/progs/vbcalc">
Alberto Gimeno Arnal HTML 4.01 28
Script’s: Eventos intrínsecos
onload onunload onclick
ondblclick onmousedown
onmouseup
onmouseover onmousemove
onmouseout
onfocus onblur onkeypress
onkeydown onkeyup onsubmit
onreset onselect onchange