Lenguaje de definición
de páginas Web:
HTML
21 de Febrero de 2007
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Estructura general de un HTML
• Ficheros puramente ASCII
• Marcas de control llamadas TAGs
– Cuando el navegador lee un fichero ASCII con
extensión *.htm o *.html interpreta estas TAGs
y formatea el texto de acuerdo con ellas.
– Encerradas entre los caracteres menor que ( <)
y mayor que ( >).
– La mayor parte de ellas son dobles.
– La marca de final es como la de comienzo,
pero incluyendo una barra (/).
<COMANDO>Texto afectado</COMANDO>
• Comentarios
<!–- Los comentarios se introducen de esta forma -->
Estructura general de un HTML
• Estructura de un fichero HTML:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Estructura general de un HTML
• Atributos
<BODY background=“imagen.jpg”>
...
</BODY>
<IMG src=“imagen.jpg” width=“33%” height=“60%”>
• [deprecated]
– Pueden quedar obsoletos en futuras versiones
• Style Sheets (Hojas de estilo)
• Efectos acumulativos
<TAG1>
Texto afectado por el TAG1
<TAG2>
Texto afectado por el TAG1 y TAG2
</TAG2>
</TAG1>
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Formato de párrafos
•
•
•
•
•
•
Tag <P>...</P>
Tag <BR>
Tag <HR>
Tag <BLOCKQUOTE>...</BLOCKQUOTE>
Tag <CENTER>...</CENTER>
Tag <PRE>...</PRE>
Ejemplo de Formato de párrafos
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Formato de texto
•
•
•
•
•
•
•
Tag <H>...</H>
Tags <B>...</B>, <I>...</I>, <U>...</U>
Tag <TT>...</TT>
Tag <FONT>...</FONT>
Tags <SUP>...</SUP>, <SUB>...</SUB>
Tags <BIG>...</BIG>, <SMALL>...</SMALL>
Caracteres especiales: Áé :: &Aacute;
&eacute;
Ñ : &Ntilde;
ñ : &ntilde;
Ejemplo de Formato de Texto
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Listas
• Listas desordenadas
– Tag <UL>...</UL> (de unordered list)
– Tag <LI> (de line)
• Listas ordenadas
– Tag <OL>...</OL> (de ordered list)
– Tag <LI> (de line)
• Listas de definiciones
– Tag <DL>...</DL> (de definition list)
– Tag <DT> (de definition term)
– Tag <DD> (de definition description)
Ejemplo de Listas
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Tablas
• Tag <TABLE>...</TABLE>
• Tag <TR>... </TR> (de Table Row)
– Las celdas se agrupan en filas
• Tag <TD>... </TD> (de Table Data)
– Una tabla se compone de celdas de datos
– Las celdas pueden contener cualquier
elemento HTML: texto, imágenes, enlaces e
incluso otras tablas anidadas
• Tag <TH>... </TH> (de Table Header)
– Celdas cuyo texto aparezca resaltado (por
ejemplo, encabezados)
Tablas
• Atributos de <TABLE>
–
–
–
–
width: anchura de la tabla (absoluta o en %)
border: anchura de los bordes de la tabla
cellspacing: espaciado entre celdillas
cellpadding: espacio entre el borde de cada celdilla y
los elementos incluidos en ella
• Atributos de <TR>
– align: alineación del contenido de las celdas de la fila
– valign: posición vertical del contenido de las celdas de
la fila
• Atributos de <TH> y <TD>
–
–
–
–
rowspan: nº de filas que debe abarcar la celda actual
colspan: nº de columnas de la fila que abarcará la celda
align: alineación del contenido de la celda
valign: posición vertical del contenido de la celda
Ejemplo de Tablas
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Anclas y Links
• Tag <A href=“url”>...</A>
• Link:
Ejemplo de Links
– Otra página Web
<A href=“http://www.ehu.es”>Web UPV-EHU</A>
– Enviar un mail
<A href=“mailto:[email protected]>e-mail</A>
– Un archivo local (no recomendable)
– Una dirección relativa
<A href="../dir1/Page1.html">Ir a dir1/Page1.html</A>
• Ancla:
– Saltar a otro punto del propio documento
– Establecer el link <A name=“aliniciodeldocumento”>
– Hacer referencia a dicho link
<A href=“#aliniciodeldocumento”>Ir al Inicio</A>
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Imágenes, clicables y sensibles
• Tag <IMG>
– Inserta una imagen en el documento
• Atributos:
– src: donde se encuentra la imagen. Requerido.
– alt: texto alternativo si no se ve la imagen
– width, height: tamaño de la imagen (absoluto
en pixels o en %)
– align: alineación del texto respecto a la imagen
– border: borde o marco de la imagen
– hspace, vspace: espacio alrededor de la imagen
– lowsrc: Se carga primero una imagen de baja
resolución hasta que se termina de cargar la
versión de alta resolución.
<IMG src=“Imagen.jpg” width=“33%” height=“60%”>
Imágenes, clicables y sensibles
• Imagen clicable:
<A href=“http://www.vc.ehu.es”><IMG src=“campusalava.jpg”></A>
• Imagen sensible (mapa de imágenes):
– Imágenes clicables que permiten acceder a un
URL u otro dependiendo donde se clica.
– Se elabora de la siguiente manera:
<IMG src="concha.gif" usemap="#FOTO" alt="Bahía de San Sebastián">
<MAP name="FOTO">
<AREA shape="RECT" coords=“20,25,155,83” href="historia.html" alt="Historia">
<AREA shape="CIRCLE" coords=“60,150,100,150” href="plano.html" alt="Planos">
<AREA shape="POLY" coords=“106,100,126,170,254,170,254,49,222,100” href="fotos.html" alt="Fotos">
<AREA shape="POLY" coords=“169,26,169,93,267,26” nohref alt="Idioma">
</MAP>
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Frames
• División de la ventana del navegador en
subventanas o frames
• Cada frame puede tener un nombre al
que se puede dirigir el resultado de una
acción
• Tamaño: fijo o variable (ratón)
• Contenido: estático o dinámico
– Clásica división: Índice – Contenido
• Frameset: Ventana con frames
Frames
Ejemplo de Frames
• Estructura:
<HTML>
<HEAD><TITLE>Título de la página</TITLE></HEAD>
<FRAMESET rows=“30%,30%,40%”>
<FRAME name=“cabecera” src=“frame1.html” noresize>
<FRAMESET cols=“25%,25%,50%”>
<FRAME src=“frame2.html” scrolling=“no”>
<FRAME src=“frame3.html” marginwidth=“5”>
<FRAME src=“frame4.html” marginheight=“5”>
</FRAMESET>
<FRAME name=“contenido” src=“frame5.html”>
</FRAMESET>
</HTML>
• Especificar la salida de un link:
<A href=“http://www.ehu.es” target=“contenido”>Web UPV-EHU</A>
target=“_blank”
target=“_self”
target=“_parent”
target=“_top”
:
:
:
:
Salida a una nueva ventana en blanco y sin nombre
Salida a la propia ventana del hiperlink
Salida al frameset padre del documento actual
Destruye todos los frames y la salida se dirige a
la ventana principal del navegador
Índice
•
•
•
•
•
•
•
•
•
Estructura general de un fichero HTML
Formato de párrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imágenes, clicables y sensibles
Frames
Formularios
Formularios
• Hipertexto
– Cierta interactividad mediante la solicitud de
distintos contenidos
• Formularios
– Posibilidad de que el usuario envíe datos al
servidor (datos personales, sugerencias, ...)
• Estructura:
–
–
–
–
Elementos de entrada de datos
Botón de envío (Submit)
Método de envío de datos
Acción que el servidor debe emprender
cuando reciba los datos
Formularios
Servidor
HTTP
Servidor Web
Respuesta
HTML
QUERY
STRING
QUERY STRING
BASE DE DATOS
Respuesta HTML
Cliente
Servidor
Formularios
• Estructura:
<HTML>
<HEAD><TITLE>Formulario Simple</TITLE></HEAD>
<BODY>
<H2>El formulario más simple</H2>
<FORM name="login" action="http://www.ehu.es/cgi-bin/CGI0.exe"
method="POST" target="_self">
Introduzca su nombre:&nbsp;&nbsp;
<INPUT type="text" name="nombre" size="25"><BR><BR>
<INPUT type="submit" value="Enviar">&nbsp;&nbsp;&nbsp;
<INPUT type="reset" value="Borrar">
</FORM>
</BODY>
</HTML>
Formularios
• Elementos:
• Normal
• Cajas de texto
• Password
• Multi-línea
• Hidden
• Botones
• Submit
• Reset
• Genérico
EjemploCajasTextoyBotones
Formularios
• Elementos:
• Casillas de verificación
• Botones de radio
EjemploCasillasyBotonesRadio
• Ventanas de selección simple • De Scroll
• Ventanas de selección múltiple
• Desplegables
EjemploVentanas
Formularios
• Métodos más usados: GET y POST
• GET
– Designado para obtener información (un
documento, un gráfico o el resultado de la
consulta a una BD)
– Usado al escribir una URL en el navegador
– Usado cuando se clica en un hiperlink
• POST
– Designado para enviar información (un nº de
tarjeta de crédito, nuevos datos o información
para guardar en una BD)
• Cualquiera de los dos puede usarse cuando
se envía un formulario HTML
Método GET
• Puede incluir parámetros en el URL
http://www.vc.ehu.es/jiwotvim/IngenieriaSoftware/Herramientas/cedt370r.exe?nombre1=
valor1&nombre2=valor2
• Secuencia de caracteres añadida a la URL:
– QUERY STRING
• No es muy seguro, ya que los datos viajan
junto a la dirección y son vistos por todo el
mundo en la barra de direcciones
• El tamaño de la información enviada estará
limitada
• La URL puede ser guardada o enviada por email
Método POST
• Técnica diferente de envío de información
– En algunos casos se necesita enviar Mb
• Características:
–
–
–
–
–
–
A través de una conexión “socket”
Datos como parte del cuerpo de la petición HTTP
Longitud ilimitada
El intercambio es invisible para el cliente
La URL no cambia en absoluto
La petición no puede ser guardada ni enviada por
e-mail e incluso no puede ser “refrescada”
– Ofrece un extra de seguridad puesto que el
“access log” del servidor que guarda las URLs no
guarda los datos enviados mediante POST.
Descargar

HTML - Arabako Campusa