1 / 28

Problemas Sist. De Información

Problemas Sist. De Información. ESPECIFICACIÓN HTML 4.01. Alberto Gimeno Arnal agimeno@educa.aragon.es. Área de Lenguajes y Sistemas Informáticos Dpto. de Informática e Ingeniería de Sistemas Universidad de Zaragoza. Estructura HTML. Un documento HTML 4 se compone de tres partes:

licia
Download Presentation

Problemas Sist. De Información

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Problemas Sist. De Información

  2. ESPECIFICACIÓN HTML 4.01 Alberto Gimeno Arnal agimeno@educa.aragon.es Área de Lenguajes y Sistemas Informáticos Dpto. de Informática e Ingeniería de Sistemas Universidad de Zaragoza

  3. Estructura HTML Un documento HTML 4 se compone de tres partes: • una línea que contiene información sobre la versión de HTML (DTD), • una sección de cabecera declarativa (delimitada por el elemento HEAD), • un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET. 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"> 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 documento. • Relación entre documentos <LINK> • Ruta de acceso <BASE> 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) 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 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 HTML 4.01

  9. Cuerpo (III): Listas • No ordenada: <UL>...</UL> • Ordenada: <OL>...</OL> • Definiciones: <DL><DT>... </DT> <DD>...</DD> </DL> • DIR y MENU 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> 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 celdascellspacing, cellpadding. 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 ..... 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. 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. 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 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> 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> HTML 4.01

  18. Marcos: Frameset • ROWS • COLS • ONLOAD • UNLOAD 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 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> 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 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 HTML 4.01

  23. Hojas de estilo: CCS Especificació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"> HTML 4.01

  24. CSS: Declaración de reglas H2 { font-family: Arial; } 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 {.....} HTML 4.01

  26. CSS: Propiedades • de Bloque. • de Tipo de letra. • de Formato del texto. • de Color y Fondo. • de Clasificación. 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"> HTML 4.01

  28. Script’s: Eventos intrínsecos HTML 4.01

More Related