diapo02
DESCRIPTION
Introducción al HTMLTRANSCRIPT
HTML
Una Introducción
Francisco Ibáñez
Definiciones
• WWW (World Wide Web).Conjunto de ordenadores conectados a Internet que soportan el protocolo de nivel de aplicación HTTP.
• HTTP (HyperText Transfer Protocol).Protocolo usado por un cliente WWW para solicitar documentos a un servidor WWW (p.e. www.terra.es o www.elpais.es), y transferir estos documentos desde el servidor.Los documentos se visualizan en el navegador, p.e: Netscape o Internet Explorer.
Francisco Ibáñez
Proceso
Servidor Web:contiene los documentos.
Cliente Web
Cliente Web
Cliente Web
Clientes web: visualizan los documentos en el
navegador
Petición de docuento
Francisco Ibáñez
Proceso
Servidor Web:contiene los documentos.
Cliente Web
Cliente Web
Cliente Web
Transmisión del documento
Francisco Ibáñez
Definiciones
• HTML: HyperText Markup Language.Lenguaje de marcas usado para diseñar las páginas web.
• Páginas web: textos ASCII escritos en el lenguaje HTML.– Una página web esta compuesta por distintos elementos: texto,
dibujos, tablas, listas, etc. y permiten estructurar la información para mostrarla.
• HTML facilita la interacción con el usuario a través de formularios con posibilidad de introducir datos.
• Los documentos HTML tienen extensión “.html” o “.htm”
Francisco Ibáñez
Elementos de un documento HTML (I)
• HTML ofrece un conjunto de etiquetas o marcas para incluir elementos en un página web.
• Un documento HTML estará formado por:
– Texto.
– Caracteres especiales.• Valores simbólicos:
– acute. Pe: á - á
– tilde. Pe: ñ - ñ
– cedill Pe: ç - ç
– Etiquetas HTML (o directivas).
Francisco Ibáñez
Elementos de un documento HTML (II)
• Etiquetas (directivas o comandos).– Situadas entre dos marcas:
• Marca de apertura <• Marca de cierre >
– Estructura: <etiqueta>.– Tipos:
• Abiertas (unitarias o Sin parear ). Ej: <BR> ab ->salto de línea antes de ab
• Delimitadoras (binarias o Pareadas ). Ej: <B> cde </B> -> pone en negrita cde
• Opcionales (<P> </P>)
Francisco Ibáñez
Elementos de un documento HTML (III)
– Atributos: las etiquetas tienen asociados atributos que modifican su significado o comportamiento.
Se incluyen dentro de la etiqueta de apertura:<NOMBRE_ETIQUETA atributo1=“valor” atributo2=“valor”…>
Algunas etiquetas requieren el uso obligatorio de algún atributo.P.ej.: <h1 align=“center”> Texto </h1>
• Comentarios: <!-- .... -->
Francisco Ibáñez
Publicar una página web
• Crear un documento HTML.• Situarlo en un directorio accesible dentro del
servidor web. • Se accede a la página a través de su dirección URL:
http://maquina/camino/archivo.htmlEj: http//cachanilla.itmexicali.edu.mx/~pacois/
(si se omite el archivo, se supone index.html o index.htm)
Francisco Ibáñez
WORLD WIDE WEB
• Corrección sintáctica de los documentos:– Etiqueta desconocida se ignora
– Etiqueta con atributo erróneo toma valor por defecto
– Combinación de etiquetas no permitida se presenta si es posible o se presenta la primera solo
Lenguaje HTML
Francisco Ibáñez
Estructura general de un documento HTML
WORLD WIDE WEB
<HTML>
</HTML>
• Partes de un documento HTML:
Etiquetas de inicio y final de documento.
Documento HTML.
CabeceraEtiquetas de inicio y final de la cabecera del documento.
<HEAD>
</HEAD>
</BODY>
CuerpoEtiquetas de inicio y final del cuerpo del documento.
<BODY>
Francisco Ibáñez
Estructura general de un documento HTML
WORLD WIDE WEB
<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>
Francisco Ibáñez
Etiquetas para estructurar el texto
WORLD WIDE WEB
<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..
Párrafos
Francisco Ibáñez
Etiquetas para estructurar el textoWORLD WIDE WEB
<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>
Títulos
Francisco Ibáñez
Etiquetas para estructurar el texto
WORLD WIDE WEB
<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>
Alineación de elementos
Francisco Ibáñez
Etiquetas para estructurar el texto
WORLD WIDE WEB
Etiqueta sin parear <HR>
Atributo. Función. Valor por defecto.SIZE= Marca el grosor de la línea. 2WIDTH= Marca la anchura horizontal de la línea. Se
puede expresar en pixels o en porcentaje.El ancho de la pantalla.
ALIGN= Especifica la alineación de la línea, puedeser left, right o center.
Si no se especifica las líneasestán centradas.
NOSHADE Muestra una línea sólida sin aparienciatridimensional.
Línea con aparienciatridimensional.
Líneas horizontales
Francisco Ibáñez
Etiquetas para estructurar el textoWORLD WIDE WEB
<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>
Líneas horizontales
Francisco Ibáñez
Etiquetas para estructurar el texto
WORLD WIDE WEB
<P>Este párrafo no esta sangrado</P>
<BLOCKQUOTE>
<P>Pero este párrafo si</P>
<BLOCKQUOTE>
<HR>
<P>Y este y la línea anterior más aún</P>
</BLOCKQUOTE>
</BLOCKQUOTE>
Sangrado de bloques
Francisco Ibáñez
Etiquetas para estructurar el texto
WORLD WIDE WEB
<PRE>
<P>
Este párrafo es preformateado
y por tanto saldrá exactamente
así.
</P>
</PRE>
<PRE WIDTH=40>
<BLOCKQUOTE>
<P>
Y este esta también preformateado y por
tanto también saldrá así...............
</BLOCKQUOTE>
</PRE>
Texto preformateado
Francisco Ibáñez
Etiquetas para estructurar el texto
WORLD WIDE WEB
<P>Este texto ha sido escrito por:</P>
<ADDRESS>
Pepe Pérez (<A HREF="mailto:[email protected]">
[email protected]</A>)
</ADDRESS>
Direcciones
Francisco Ibáñez
Etiquetas de formato del texto
WORLD WIDE WEB
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.
Francisco Ibáñez
Etiquetas de formato del texto
WORLD WIDE WEB
Estilo lógico. Explicación.<CITE> </CITE> Cita literal de un texto.<CODE> </CODE> Presentación de código fuente.<EM> </EM> Aplica énfasis al texto.<KBD> </KBD> Secuencias de ordenes o comandos que debe introducir el
usuario.<SAMP> </SAMP> Insertar una secuencia de caracteres literales.<XMP> </XMP> Inserta una secuencia de caracteres literales pero ignora
todas las etiquetas HTML de su interior.<STRONG> </STRONG> Aplica énfasis al texto.<VAR> </VAR> Define el nombre de una variable.
Formato lógico
Francisco Ibáñez
Etiquetas de formato del texto
WORLD WIDE WEB
<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>
Formato lógico
Francisco Ibáñez
Etiquetas de formato del texto
WORLD WIDE WEB
Estilo físico. Explicación.<B> </B> Muestra el texto en negrita.<I> </I> Muestra el texto en itálica.<TT> </TT> Muestra el texto como una máquina de escribir.<U> </U> Subraya el texto marcado.<SUB> </SUB> Muestra el texto como un subíndice.<SUP> </SUP> Muestra el texto como un superíndice.<BIG> </BIG> Muestra el texto con un tamaño superior al por defecto.<SMALL> </SMALL> Muestra el texto con un tamaño inferior al por defecto.<BLINK> </BLINK> Muestra el texto parpadeante.<S> </S> Muestra el texto con una tachadura.
Formato físico
Francisco Ibáñez
Etiquetas de formato del texto
WORLD WIDE WEB
<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>
Formato físico
Francisco Ibáñez
Aspecto de los caracteres
• La etiqueta que permite fijar el aspecto de los caracteres es <FONT>
• Podemos cambiar los tamaños de letra con el elemento <FONT > y el atributo VALOR, que puede tomar valores entre 1 y 7. El valor por defecto del texto es 3. <FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font> <FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font><FONT SIZE=5>A</font><FONT SIZE=4>A</font>
<FONT SIZE=3>A</FONT>
Dará como resultado: AAAAAAAAA
Francisco Ibáñez
Aspecto de los caracteres
• Es posible utilizar en la etiqueta <FONT> el atributo FACE que permite elegir tipos de letra.
• Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente
• El navegador mostrará el tipo de letra sólo si dicho tipo está disponible.
• Por ejemplo: <FONT FACE="times new roman">Prueba con TIMES NEW
ROMAN</FONT> Muestra:Prueba con TIMES NEW ROMAN
Francisco Ibáñez
Aspecto de los caracteres
• Si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador
• En la etiqueta <FONT> puede usarse el atributo COLOR para definir el color de la fuente.
Francisco Ibáñez
Caracteres especiales
WORLD WIDE WEB
Carácter Código Carácter Código Carácter Código < < > > & & # # “ " á á é é í í ó ó ú ú Á Á ñ ñ Ñ Ñ ® ® @ © Espacio no divisible.
Francisco Ibáñez
Listas
WORLD WIDE WEB
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.
Francisco Ibáñez
Listas
WORLD WIDE WEB
<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>
Francisco Ibáñez
Listas (Glosario de términos)
WORLD WIDE WEB
<DL>
<DT>Termino 1</DT>
<DD>Definición termino 1</DD>
<DT>Termino 2</DT>
<DD>Definición termino 2</DD>
</DL>
Francisco Ibáñez
Enlaces entre páginas
WORLD WIDE WEB
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.
Atributo. Explicación.NAME=”...” Define un enlace de destino. En la zona entrecomillada se debe incluir un
nombre, único dentro de este documento, que servirá de referencia delbloque seleccionado.
HREF=”...” Define un enlace de origen. En la zona entrecomillada se debe incluir elURL que el cliente recogerá ante la activación del enlace. La URL podráincluir un enlace de destino.
Francisco Ibáñez
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>
Francisco Ibáñez
Inclusión de imágenes
WORLD WIDE WEB
Mediante la etiqueta sin parear <IMG>
Atributo ExplicaciónSRC=”...” Contiene la URL de la imagen a incluir. Este atributo es obligatorio.ALT=”...” Asigna un texto descriptivo relacionado con la imagen.ALIGN= Controla la alineación de la imagen con respecto al párrafo en que esta
insertada. Los valores que puede tomar son: top, middle, bottom, texttop,baseline, absmiddle y absbottom.
ALIGN= Control de la alineación de la imagen, puede tomar los valores left yright y permite que un párrafo fluya sobre el borde de una imagen,bloqueando ésta a la izquierda o derecha del margen. No puede utilizarsejunto con la anterior.
HEIGHT= Informa al cliente Web de la altura de la imagen a insertar.WIDTH= Informa al cliente Web de la anchura de la imagen a insertar.ISMAP Informa al cliente Web de que esta imagen es un mapa activo.BORDER= Fija la anchura del borde que rodeará a la imagen. Un valor de 0
desactiva el borde.HSPACE= Fija la anchura horizontal de los márgenes de la imagen (en pixels).VSPACE= Fija la anchura vertical de los márgenes de la imagen (en pixels).
Francisco Ibáñez
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>
Francisco Ibáñez
Tablas
WORLD WIDE WEB
• 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>
Francisco Ibáñez
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>
Francisco Ibáñez
Tablas (Atributos de modificación)
WORLD WIDE WEB
Etiqueta Atributos Explicación<TABLE> BORDER= Fija el ancho del borde exterior de la tabla (en
pixels).CELLPADDING= Fija la distancia (en pixels) entre el borde de la
celda y su contenido.CELLSPACING= Fija la anchura (en pixels) de la líneas de división
de la tabla.WIDTH= Controla la anchura horizontal de la tabla. Se puede
especificar en pixels o en porcentaje.ALIGN= Control de la alineación de la tabla, puede tomar los
valores left y right y permite que un párrafo fluyasobre el borde de una tabla, bloqueando ésta a laizquierda o derecha del margen
<CAPTION> ALIGN= Fija la posición del título con respecto a la tabla.Puede ser top o bottom.
<TR> ALIGN= Especifica la alineación horizontal del texto en lafila, puede ser left, right o center.
VALING= Especifica la alineación vertical del texto en la fila,puede ser top, bottom, middle o baseline.
Francisco Ibáñez
Tablas (Atributos de modificación)
WORLD WIDE WEB
<TD> ALIGN= Especifica la alineación horizontal del texto en lacelda, puede ser left, right o center.
VALIGN= Especifica la alineación vertical del texto en lacelda, puede ser top, bottom, middle o baseline.
COLSPAN= Indica el número de columnas que ocupara estacelda.
ROWSPAN= Indica el número de filas que ocupara esta celda.NOWRAP= Obliga al cliente Web a no romper las líneas de
texto que contenga la celda.WIDTH= Determina el ancho de la celda. Se puede
especificar como un ancho en pixels o enporcentaje.
<TH> Igual que <TD>. Igual que los atributos de <TD>.
Francisco Ibáñez
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>
</TR>
<TR ALIGN=right>
<TD ALIGN=left>Vestido</TD><TD>50.000</TD><TD>10/1/1990</TD>
</TR>
</TABLE>
Francisco Ibáñez
Marcos (Frames)
WORLD WIDE WEB
<DOCTYPE HTML PUBLIC>
<HTML>
<HEAD>
....................
</HEAD>
<FRAMESET>
....................
</FRAMESET>
</HTML>
Francisco Ibáñez
Marcos (Frames)
WORLD WIDE WEB
<DOCTYPE HTML PUBLIC>
<HTML>
<HEAD>
<TITLE>Marcos en HTML</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%"><FRAME SRC="imagen.gif">
<FRAME SRC="imagen.gif">
</FRAMESET>
</HTML>
Francisco Ibáñez
Marcos (Frames)
WORLD WIDE WEB
Atributo ExplicaciónSRC= Nombre del documento que se quiere colocar dentro del
marco.NAME= Asigna un nombre a un marco de forma que pueda ser el
destino de enlaces situados en otros marcos.MARGINWIDTH= Especifica el margen lateral (en pixels).MARGINHEIGHT Especifica el margen superior e inferior (en pixels).SCROLLING=(yes, no, auto) Si un documento es más largo que el marco aparecen
unas barras de desplazamiento. Este atributo permiteactivar, desactivar o automatizar su aparición.
NORESIZE Evita que el tamaño de los marcos sea alterado.
Francisco Ibáñez
Formularios y CGIs
WORLD WIDE WEB
Introducidos con la etiqueta pareada <FORM> </FORM>
Atributo ExplicaciónACTION Especifica el URL del programa CGI que debe procesar los datos que
envía el formulario. Si se desea enviar correo electrónico se puedeindicar con mailto:dirección de correo.
METHOD Especifica el método que se usa para enviar la información de losdistintos elementos del formulario al programa CGI. Los métodospueden ser GET (el programa CGI recibe los datos en la variable deentorno QUERY_STRING) y POST (el programa CGI recibe los datospor la entrada standard).
Francisco Ibáñez
Formularios y CGIs
WORLD WIDE WEB
Campos de entrada especificados con <INPUT> </INPUT>
Atributos ExplicaciónTYPE Selecciona el tipo de campo de entrada. Es obligatorioNAME Define el nombre del identificador cuyo contenido será enviado. Es
obligatorio.VALUE Inicializa el valor del campo.CHECKED Inicializa campos de entrada de tipo checkbox o radio buttons a su
estado.SIZE Especifica el tamaño visible del texto.MAXLENGTH Especifica el número máximo de caracteres en un campo de entrada
de tipo texto.SRC Especifica el URL para la imagen a usar en el caso de un botón
gráfico.ALIGN Especifica el alineamiento, puede ser top, middle, bottom (por
defecto), left o right.
Francisco Ibáñez
Formularios y CGIs
WORLD WIDE WEB
Valor del atributo ExplicaciónTEXT Valor por defecto. Muestra una línea de texto.PASSWORD Igual que TEXT excepto que los caracteres introducidos son
mostrados como *.CHECKBOX Casilla de verificación con dos estados (marcada o no). Es
obligatorio el uso de VALUE para especificar el nombre de lavariable y el valor que toma ésta.
RADIO Elementos que operan conjuntamente, solo puede estar activadouno de ellos. Es obligatorio el uso de VALUE. Se puede indicarque un valor es por defecto utilizando el atributo CHECKED dela etiqueta INPUT.
SUBMIT Define un botón que envía los datos al programa del CGI. Debeexistir siempre uno en cualquier formulario.
IMAGE Permite definir un botón gráfico.RESET Define un botón que inicializa los valores del formulario al valor
por defecto.FILE Define un método para incluir un fichero en el contenido del
formulario.HIDDEN No son visibles y proporcionan un método de enviar información
sobre el estado, etc. al programa del CGI.
(Atributo TYPE)
Francisco Ibáñez
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"><BR>
Segundo apellido: <INPUT TYPE="text" NAME="apellido2", SIZE="10" MAXLENGTH="25">
<BR><BR>Curso:<BR>
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"><BR><BR>
<INPUT TYPE="submit" VALUE="Enviar">
<INPUT TYPE="reset" VALUE="Borrar">
</FORM>
Francisco Ibáñez
Formularios y CGIs
WORLD WIDE WEB
• 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 documento1ª línea: Location: URL_doc
2ª línea: En blanco.
Francisco Ibáñez
Formularios y CGIs
WORLD WIDE WEB
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>");
Francisco Ibáñez
Imágenes sensibles
WORLD WIDE WEB
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