WORLD WIDE WEB Lenguaje HTML HyperText Markup Language (HTML) describe los documentos mediante etiquetas. Etiquetas encerradas entre < y > con / indicando fin de etiqueta. Tipos: Pareadas (<H1> </H1> Sin parear (<BR>) Opcionales (<P> </P>)
Lenguaje HTML Anidamiento de etiquetas WORLD WIDE WEB Lenguaje HTML Anidamiento de etiquetas Corrección sintáctica de los documentos: Etiqueta desconocida se ignora Etiqueta con atributo erroneo toma valor por defecto Combinación de etiquetas no permitida se presenta si es posible o se presenta la primera solo
Estructura general de un documento HTML WORLD WIDE WEB Estructura general de un documento HTML <DOCTYPE HTML PUBLIC> <HTML> <HEAD> .................... </HEAD> <BODY> </BODY> </HTML>
Estructura general de un documento HTML WORLD WIDE WEB Estructura general de un documento HTML <DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE>Mi primera página de prueba HTML</TITLE> </HEAD> <BODY> Aquí se pone la información que se desea que tenga el documento... </BODY> </HTML>
Etiquetas para estructurar el texto Párrafos WORLD WIDE WEB Etiquetas para estructurar el texto Párrafos <P>Aquí comienza un párrafo... que termina en la misma línea. <P>Sin embargo este párrafo...<BR>termina en otra línea. <P ALIGN=left>Este párrafo va a la izquierda... <P ALIGN=right>Este a la derecha... <P ALIGN=center><BR><BR>Y este centrado y separado...
Etiquetas para estructurar el texto Títulos WORLD WIDE WEB Etiquetas para estructurar el texto Títulos <H1>Este es el título 1</H1> <H2>Y este el título 2</H2> <H3 ALIGN=center>Y este el título 3 centrado</H3> <H4><P>Y este es un título<BR>formado por varias líneas<P>Y por varios párrafos</H4>
Etiquetas para estructurar el texto Alineación de elementos WORLD WIDE WEB Etiquetas para estructurar el texto Alineación de elementos <CENTER> <P>Este párrafo aparece centrado.<P>Y este también. </CENTER> <DIV ALIGN=right> <P>Y este otro parrafo aparece a la derecha...<P>Junto con este. </DIV>
Etiquetas para estructurar el texto Líneas horizontales WORLD WIDE WEB Etiquetas para estructurar el texto Líneas horizontales Etiqueta sin parear <HR>
Etiquetas para estructurar el texto Líneas horizontales WORLD WIDE WEB Etiquetas para estructurar el texto Líneas horizontales <P>Entre este parrafo</P> <HR SIZE=5 WIDTH=80%> <HR WIDTH=50% ALIGN=left NOSHADE> <P>Y este hemos introducido varias líneas horizontales</P>
Etiquetas para estructurar el texto Sangrado de bloques WORLD WIDE WEB Etiquetas para estructurar el texto Sangrado de bloques <P>Este párrafo no esta sangrado</P> <BLOCKQUOTE> <P>Pero este párrafo si</P> <HR> <P>Y este y la línea anterior más aún</P> </BLOCKQUOTE>
Etiquetas para estructurar el texto Texto preformateado WORLD WIDE WEB Etiquetas para estructurar el texto Texto preformateado <PRE> <P> Este párrafo es preformateado y por tanto saldrá exactamente así. </P> </PRE> <PRE WIDTH=40> <BLOCKQUOTE> Y este esta también preformateado y por tanto también saldrá así............... </BLOCKQUOTE>
Etiquetas para estructurar el texto Direcciones WORLD WIDE WEB Etiquetas para estructurar el texto Direcciones <P>Este texto ha sido escrito por:</P> <ADDRESS> Enrique Bonet (<A HREF="mailto:Enrique.Bonet@uv.es"> Enrique.Bonet@uv.es</A>) </ADDRESS>
Etiquetas de formato del texto WORLD WIDE WEB Etiquetas de formato del texto Dos tipos: Etiquetas de formato lógico. Clasifican el texto en una serie de clases predefinidas. Etiquetas de formato físico. Fijan un estilo en la presentación.
Etiquetas de formato del texto Formato lógico WORLD WIDE WEB Etiquetas de formato del texto Formato lógico
Etiquetas de formato del texto Formato lógico WORLD WIDE WEB Etiquetas de formato del texto Formato lógico <P><CITE>Este párrafo es CITE</CITE> <P><VAR>Este párrafo es VAR</VAR> <P><XMP>Este párrafo utiliza XMP y por ello sale <XMP> literalmente</XMP>
Etiquetas de formato del texto Formato físico WORLD WIDE WEB Etiquetas de formato del texto Formato físico
Etiquetas de formato del texto Formato físico WORLD WIDE WEB Etiquetas de formato del texto Formato físico <P><B><I>Este texto es negrita e itálica</I></B></P> <P>Este es el elemento A<SUB>ij</SUB></P> <P>Y esto es una potencia: 2<SUP>n</SUP></P>
Caracteres especiales WORLD WIDE WEB Caracteres especiales
Listas Cuatro tipos: Desordenadas. Aparecen como una lista con puntos. WORLD WIDE WEB Listas Cuatro tipos: Desordenadas. Aparecen como una lista con puntos. Ordenadas. Aparecen con un número o letra de orden. Menús. Listas desordenadas mostradas de forma más compacta que las desordenadas. De elementos cortos. El cliente WWW decide como las muestra.
WORLD WIDE WEB Listas <P><EM>Elige una opción:</EM></P> <OL START=1 TYPE="A"> <LI>Comprar un producto</LI><BR> <LI>Ver el estado de una compra</LI><BR> <UL TYPE=circle> <LI>De este mes</LI><BR> <LI>De otros meses</LI><BR> </UL> <LI VALUE=10>Salir</LI> </OL>
Listas (Glosario de términos) WORLD WIDE WEB Listas (Glosario de términos) <DL> <DT>Termino 1</DT> <DD>Definición termino 1</DD> <DT>Termino 2</DT> <DD>Definición termino 2</DD> </DL>
Enlaces entre páginas Dos tipos: WORLD WIDE WEB Enlaces entre páginas Dos tipos: Enlaces de destino. Marcan un sitio en el documento al cual se puede ir. Enlaces de origen. Indican una URL o enlace de destino.
Enlaces entre páginas WORLD WIDE WEB <P><A NAME="Capítulo1"><B>Capítulo 1</B></P> <P>...<BR>...<BR>...<BR>...<BR>...<BR>...</P> <A HREF="http://www.uv.es">Web de la UV</A><BR><BR> <A HREF="#Capítulo1">Capítulo 1</A>
Inclusión de imágenes Mediante la etiqueta sin parear <IMG> WORLD WIDE WEB Inclusión de imágenes Mediante la etiqueta sin parear <IMG>
Inclusión de imágenes WORLD WIDE WEB <P>Vamos a insertar una imagen a continuación</P> <P><IMG SRC="imagen.gif" ALT="logo" ALIGN=left>Todo el texto de este párrafo se colocara a la derecha de la imagen al estar esta alineada a la izquierda<BR><BR><BR> Pero al sobrepasar la imagen continuara de forma normal</P>
Tablas Insertadas con la etiqueta pareada <TABLE> </TABLE> WORLD WIDE WEB Tablas Insertadas con la etiqueta pareada <TABLE> </TABLE> Encabezado de tabla representado por <CAPTION> </CAPTION> Filas representadas por <TR> </TR> Columnas representadas por <TD> </TD> Encabezado de columnas representado por <TH> </TH>
Tablas WORLD WIDE WEB <TABLE> <CAPTION>Gastos del mes</CAPTION> <TR><TH>Concepto</TH><TH>Importe</TH></TR> <TR><TD>Alimentacion</TD><TD>20.000</TD></TR> <TR><TD>Vestido</TD><TD>50.000</TD></TR> </TABLE>
Tablas (Atributos de modificación) WORLD WIDE WEB Tablas (Atributos de modificación)
Tablas (Atributos de modificación) WORLD WIDE WEB Tablas (Atributos de modificación)
Tablas WORLD WIDE WEB <TABLE BORDER=2 BGCOLOR="green"> <CAPTION ALIGN=bottom>Gastos del mes</CAPTION> <TR ALIGN=center BGCOLOR="yellow"> <TH>Concepto</TH><TH>Importe</TH><TH>Fecha</TH> </TR> <TR ALIGN=right> <TD ALIGN=left>Alimentación</TD><TD>20.000</TD><TD>1/1/1990</TD> <TD ALIGN=left>Vestido</TD><TD>50.000</TD><TD>10/1/1990</TD> </TABLE>
Marcos (Frames) <DOCTYPE HTML PUBLIC> <HTML> <HEAD> WORLD WIDE WEB Marcos (Frames) <DOCTYPE HTML PUBLIC> <HTML> <HEAD> .................... </HEAD> <FRAMESET> </FRAMESET> </HTML>
Marcos (Frames) WORLD WIDE WEB <DOCTYPE HTML PUBLIC> <HEAD> <TITLE>Marcos en HTML</TITLE> </HEAD> <FRAMESET COLS="25%,75%"> <FRAME SRC="imagen.gif"> </FRAMESET> </HTML>
WORLD WIDE WEB Marcos (Frames)
WORLD WIDE WEB Formularios y CGIs Introducidos con la etiqueta pareada <FORM> </FORM>
WORLD WIDE WEB Formularios y CGIs Campos de entrada especificados con <INPUT> </INPUT>
Formularios y CGIs (Atributo TYPE) WORLD WIDE WEB Formularios y CGIs (Atributo TYPE)
Formularios y CGIs WORLD WIDE WEB <FORM METHOD="POST" ACTION="cgi-bin/prueba.exe"> Nombre: <INPUT TYPE="text" NAME="nombre" SIZE="10" MAXLENGTH="25"> <BR> Primer apellido: <INPUT TYPE="text" NAME="apellido1", SIZE="10" MAXLENGTH="25"> Segundo apellido: <INPUT TYPE="text" NAME="apellido2", SIZE="10" MAXLENGTH="25"> <BR><BR> Curso: Primero <INPUT TYPE="radio" NAME="curso" VALUE="Primero" CHECKED> Segundo <INPUT TYPE="radio" NAME="curso" VALUE="Segundo"> Tercero <INPUT TYPE="radio" NAME="curso" VALUE="Tercero"> Cuarto <INPUT TYPE="radio" NAME="curso" VALUE="Cuarto"> Quinto <INPUT TYPE="radio" NAME="curso" VALUE="Quinto"> <INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"> </FORM>
WORLD WIDE WEB Formularios y CGIs CGI es el programa encargado de procesar el formulario en el servidor. Devuelve al cliente datos de dos formas: Documento generado: 1ª línea: Content-type: tipo/subtipo 2ª línea: En blanco. Referencia a otro documento 1ª línea: Location: URL_doc
Formularios y CGIs printf("Content-type: text/html\n\n"); WORLD WIDE WEB Formularios y CGIs printf("Content-type: text/html\n\n"); printf("<HTML>"); printf("<HEAD><TITLE>Ejemplo de CGI</TITLE></HEAD>"); printf("<BODY>Leidos %d caracteres<BR>",longitud); printf("Caracteres leidos: %s</BODY>",datos); printf("</HTML>");
Imágenes sensibles Dos formas de procesamiento: WORLD WIDE WEB Imágenes sensibles Dos formas de procesamiento: Procesadas en el servidor. Incluidas con el atributo ISMAP de la etiqueta <IMG> Formato del archivo de zonas: método URL c1,…,cN Métodos validos son circle, rect y poly. Procesadas en el cliente. Incluidas con el atributo USEMAP=“nombre_mapa” de la etiqueta <IMG> Formato y métodos de “nombre_mapa” iguales a los anteriores