Problemas Sist. De Información

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.


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


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>


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)


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


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


Cuerpo (III): Listas

No ordenada: <UL>...</UL> Ordenada: <OL>...</OL> Definiciones: <DL><DT>...

</DT> <DD>...</DD> </DL> DIR y MENU


Cuerpo (IV): TABLA <TABLE>

Grupos de filas: <THEAD><TFOOT><TBODY>

Grupos de columnas <COLGROUP>|<COL>

Fila <TR> Celdas de encabezado <TH|TD>


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.


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


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.


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.


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


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>


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>


Marcos: Frameset ROWS COLS ONLOAD UNLOAD


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


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>


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


Formularios: Controles INPUT (text, password, checkbox, radio,

submit, reset, file, hidden, image, button)

LABEL TEXTAREA SELECT ....OPTION OPTGROUP FIELDSET y LEGEND OBJECT


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


CSS: Declaración de reglas

H2 { font-family: Arial; }

gla

ndeclaració

valorpropiedadselector

Re

;:


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


CSS: Propiedades de Bloque. de Tipo de letra. de Formato del texto. de Color y Fondo. de Clasificación.


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


Script’s: Eventos intrínsecos

onload onunload onclick

ondblclick onmousedown

onmouseup

onmouseover onmousemove

onmouseout

onfocus onblur onkeypress

onkeydown onkeyup onsubmit

onreset onselect onchange

Problemas Sist. De Información

Documents

Transcript of Problemas Sist. De Información