WWW y HTML - Universidad de Cantabria
Anuncio
Lenguajes Estructurados HTML y XML José Manuel Gutiérrez Universidad de Cantabria [email protected] Internet HTML JavaScript http://personales.unican.es/gutierjm Java WWW y HTML (HyperText Markup Lenguage) ? WWW es un sevicio de Internet que da acceso mediante documentos hipertexto a un conjunto de información distribuida por toda la red. ? Este servicio surgió en el CERN con los siguientes propósitos: – Almacenamiento de un gran volúmen de información de forma no replicada, distribuida y actualizada, usando un formato común. – Fácil acceso a la información y posibilidad de navegación por la misma. ? De esta forma surgió el formato HTML, que permite crear documentos de texto formateado (tamaño de letra, estilo, etc.) con hiper-enlaces. ? Los ficheros HTML son ficheros ASCII y pueden editarse en cualquier procesador de texto. Mediante una serie de palabras clave contienen información sobre: – Estructura del documento (cabecera, cuerpo del documento, etc.) – Atributos del documento y del texto (color, dimensiones, etc.) – Inclusión de enlaces a otros servicios de Internet (e.g. otras páginas). HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 2 Www.w3c.org (WWW Consortium) local HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 3 Estructura de un documento HTML ? Cada documento HTML tiene asociada una dirección URL (Localizador uniforme de recursos) al que se accede mediante el protocolo HTTP http://personales.unican.es/gutierjm ? La estructura de un documento HTML es sencilla: <HTML> <!-- Documento HTML de prueba --> <HEAD> <TITLE> Prueba </TITLE> </HEAD> <BODY> El navegador interpreta y visualiza el contenido </BODY> </HTML> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 4 Elementos definidos en la cabecera <HTML> <HEAD> <TITLE> Prueba </TITLE> . . . </HEAD> ? <BASE> Almacena la dirección URL del documento. Imagenes/icono1.gif ? <META> Información del documento (creador, tabla caracteres, etc.). ? <SCRIPT> Scripts de Java Script, VB Script, etc. ? <STYLE> Información utilizada por las hojas de estilos en cascada. HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 5 Comandos HTML ? El lenguaje HTML posee una serie de marcas/comandos encerradas entre los signos < y > (signo de marca). Los navegadores ignoran cualquier marca que carezca de sentido y la tratan como texto. ? En el nombre del comando no se distingue el uso de mayúsculas y minúsculas y los cambios de línea y espacios son ignorados al visualizar el contenido. ? Existen dos tipos de comandos HTML: ? Comandos con finalizador. Prueba de <B>texto en negrita</B> ? Comandos sin finalizador. Por ejemplo: <IMG SRC="Imagen.gif"> ? Algunos comandos admiten parámetros: <IMG SRC="Imagen.gif" ALIGN="RIGHT"> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 6 Texto y signos especiales ? Existen comandos para el tamaño del texto <FONT SIZE=+2> Incrementa 2 unidades respecto de la estándar </FONT> <FONT SIZE=+3>B</FONT> <FONT COLOR="#FF0000">Color cambiado</FONT> ? También para cambiar el estilo de un bloque de texto: – Negrita: – Itálica: – Subrayado: <B> ... </B> <I> ... </I> <U>... </U> ? Algunos formatos predeterminados: <CODE> ... </CODE> para códigos de ordenador. ? Existen una serie de comandos para acentos y signos especiales. HTML + XML. (José M. Gutiérrez, Santander) &lt &amp &iquest &Aacute &Eacute &Iacute &Oacute &Uacute &Agrave &Acirc &Auml &Ntilde < & ¿ Á É I´ Ó Ú À Â Ä Ñ &gt &quot &iexcl &aacute &eacute &iacute &oacute &uacute &agrave &acirc &auml &ntilde > ” ¡ á é í ó ú à â ä ñ 2004, slide 7 Bloques de Texto ? Los párrafos deben ser señalados explícitamente. ? <BR> fuerza un cambio de línea. ? <P> y </P> delimitan un párrafo. Al visualizarse, los párrafos son separados por una línea en blanco. ? El texto preformateado es visualizado tal como aparece en el documento HTML, normalmente utilizando la letra Courier. <PRE> ... </PRE> ? El texto sangrado es delimitado por <BLOCKQUOTE> </BLOCKQUOTE> <P>Esto es el primer ejemplo de programa escrito en Java.</P> <BLOCKQUOTE> <PRE> class Bienvenida { public static void main (String args[]) { System.out.println("Bienvenidos!"); }} </PRE> </BLOCKQUOTE> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 8 Documento estructurado <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> <H1> Prueba de estilo de una cabecera </H1> <H2> Prueba de estilo de una cabecera </H2> . . . <H6> Prueba de estilo de una cabecera </H6> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 9 Listas Numeradas y sin Numerar HTML permite la construcción de tres tipos de listas: ? Listas Numeradas <OL> <LI> Item 1 <LI> Item 2 ... </OL> ? Listas de definiciones. Cada elemento de la lista se compone de una cabecera y un párrafo sangrado: ? Listas sin numerar: <UL> <LI> Item 1 <LI> Item 2 ... </UL> <DL> <DT> Cabecera 1 <DD> Parrafo 1 <DT> Cabecera 2 <DD> Parrafo 2 ... </DL> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 10 Insercción de Imágenes Para insertar imágenes el lenguaje HTML dispone del comando <IMG> <IMG SRC="ficheroimagen"> ? Ficheroimagen es el URL que especifica un fichero en alguno de los formatos: ? JPEG (Joint Photographic Experts Group): formato que consigue, mediante técnicas de compresión, reducir el tamaño de almacenamiento de la imagen, aunque a costa de una ligera pérdida de calidad. ? GIF (Graphics Interchange Format): con técnicas de compresión menos optimizadas, aunque sin pérdida de calidad. ? Otros formatos gráficos: PICT, PostScript, TIFF. ? IMG tiene diversos parámetros opcionales: ? ALIGN: modo en el que la imagen se alinea con el texto a su alrededor. TOP, BOTTOM, CENTER, LEFT ? ALT: texto alternativo. ? HEIGHT y WIDTH (altura y anchura). HSPACE y VSPACE (distancia de la figura al texto que la rodea). HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 11 HiperEnlaces ? Los hiperenlaces posibilitan la navegación cómoda entre documentos o dentro de un mismo documento. Un enlace consta de: – Elemento de enlace. Puede ser texto o gráfico y en caso deser seleccionado provoca un salto a otro lugar. <A> ... </A> – Destino. Puede ser otro documento HTML, cualquier punto dentro del documento HTML en curso o de otro documento HTML, cualquier otro documento (ficheros binarios, de texto, imágenes, etc.) El destino se indica mediante el parámetro HREF del comando <A>. <A HREF="Contenidos.html">Tabla de contenidos</A> <A HREF="Info.html"> <IMG SRC="Icono.gif" ALT="[Informacion]"> </A> <A NAME="Nombre"> Texto de destino </A> <A HREF="FichDestino.html#Nombre">Texto de enlace</A> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 12 Tablas <TABLE BORDER=“1”> <TBODY> <TR> <TH>Primera Columna</TH> <TH>Segunda Columna</TH> </TR> <TR> <TD> a </TD> <TD> c </TD> </TR> <TR> <TD> b </TD> <TD> d </TD> </TR> </TABLE> ? ? ? CELLSPACING: Espacio entre celdas (pixeles). CELLPADDING: Espacio entre el borde de la celda y el contenido. ALIGN: “LEFT”, “RIGHT”, “CENTER” HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 13 Formularios. Interacción con el servidor ? La información es enviada a un CGI (Common Gateway Interface) para su procesamiento. ? delimitado por los comandos <FORM> </FORM>. El comando <FORM> admite un parámetro ACTION, cuyo valor es el URL del CGI. Cada campo se define utilizando el comando <INPUT> y puede ser de diferentes tipos, dependiendo del valor de TYPE: text: campo de texto. button: botón. radio: botón de radio. checkbox: caja de selección. submit: botón para el envío. NAME nombre que utilizará el CGI para referirse al campo. reset: borrado. VALUE utilizado para dar al campo valores por defecto. ? SIZE establece el tamaño del campo (número de caracteres) MAXSIZE indica el número máximo de caracteres que puede recibir el campo. HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 14 Ej. de Formulario <html><head> <title>Formularo</title></head><body> <H1>Datos personales</H1> <FORM ACTION="http://servidor/Directorio/Nombre.cgi"> Nombre <INPUT TYPE="text" NAME="Campo1" SIZE=25> Tel&eacute;fono <INPUT TYPE="text" NAME="Campo2" SIZE=10> <BR> Domicilio <INPUT TYPE="text" NAME="Campo3" SIZE=43> <BR> Estado civil: <INPUT TYPE="radio" NAME="ec" VALUE="S">Soltero <INPUT TYPE="radio" NAME="ec" VALUE="C">Casado <INPUT TYPE="radio" NAME="ec" VALUE="D">Divorciado <INPUT TYPE="radio" NAME="ec" VALUE="V">Viudo <BR><BR> Estudios realizados: <SELECT NAME="Estudios"> <OPTION>Sin estudios <OPTION SELECTED>Primarios <OPTION>Bachillerato <OPTION>Universitarios </SELECT> <INPUT TYPE="checkbox" NAME="Cliente"> Cliente actual <BR><BR> Observaciones: <TEXTAREA NAME="Observ" ROWS=3 COLS=35> </TEXTAREA> <BR> <BR> <INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"> </FORM> </body></html> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 15 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 16 XML: Esquema para datos Meteorológicos XML Schema <?xml version="1.0" encoding="UTF-8"?> <Class xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="meteo.xsd"> <Stream model="Wave model"> <Version value="4096"> <Type type="Forecast"> <Date>1967-08-13</Date> <Time>12:00</Time> XML <Step>24</Step> <Number>0</Number> Instance <Level type="Pressure level">1000</Level> <Parameter table="ECMWF">Z</Parameter> </Type> </Version> </Stream> </Class> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 17 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 18 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 19 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 20 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 21 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 22 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 23 HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 24 XML: Fuentes de información http://wwws.sun.com/software/xml/ HTML + XML. (José M. Gutiérrez, Santander) http://www.oasis-open.org/cover/sgml-xml.html 2004, slide 25 SVG. Scalable Vector Graphics En ocasiones, los formatos gráficos de mapas de bits, o comprimidos, no resultan apropiados para mostar información en la Web. Ejemplo svg. <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG20010904/DTD/svg10.dtd"> <svg width= "500" height="500" viewBox="-100 100 200 200" xmlns="http://www.w3.org/2000/svg"> <!--Imprimimos los patrones [5537]"--> <g style="stroke-width:0.5; fill:blue; shaperendering:default"> <circle cx="-26.4095" cy="6.19866" r="0.5"/> <circle cx="-24.9492" cy="13.0801" r="0.5"/> <circle cx="-47.9709" cy="63.9941" r="0.5"/> HTML + XML. (José M. Gutiérrez, Santander) 2004, slide 26 MathML. Mathematica Markup Languaje La notación matemática es de un extremado rigor y está libre de ambigüedad. MathML permite codificar objetos matemáticos definiendo tanto la notación que representa al objeto matemático, como la estructura del mismo objeto: •Marca de presentación / estructura. •Marca de contenido. •MathML Interface. HTML4.0, etc. Contenido HTML + XML. (José M. Gutiérrez, Santander) Estructura 2004, slide 27 XML: Un Paso más en lo Lenguajes Estructurados http://wwws.sun.com/software/xml/ HTML + XML. (José M. Gutiérrez, Santander) http://www.oasis-open.org/cover/sgml-xml.html 2004, slide 28
