Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal

Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal Email: ivannc_509@hotmail.com

Í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 (/). • Comentarios <COMANDO>Texto afectado</COMANDO> <!–- 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 • [deprecated] • Pueden quedar obsoletos en futuras versiones • Style Sheets (Hojas de estilo) • Efectos acumulativos <BODYbackground=“imagen.jpg”> ... </BODY> <IMG src=“imagen.jpg”width=“33%”height=“60%”> <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

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: Á : Á é : é Ñ : Ñ ñ : ñ Ejemplo de Formato de Texto

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

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

Anclas y Links Ejemplo de Links • Tag <A href=“url”>...</A> • Link: • Otra página Web • Enviar un mail • Un archivo local (no recomendable) • Una dirección relativa • Ancla: • Saltar a otro punto del propio documento • Establecer el link • Hacer referencia a dicho link <A href=“http://www.ehu.es”>Web UPV-EHU</A> <A href=“mailto:jipotvim@vc.ehu.es”>e-mail</A> <A href="../dir1/Page1.html">Ir a dir1/Page1.html</A> <A name=“aliniciodeldocumento”> <A href=“#aliniciodeldocumento”>Ir al Inicio</A>

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: • 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: <A href=“http://www.vc.ehu.es”><IMG src=“campusalava.jpg”></A> <IMGsrc="concha.gif" usemap="#FOTO" alt="Bahía de San Sebastián"> <MAPname="FOTO"> <AREAshape="RECT" coords=“20,25,155,83” href="historia.html" alt="Historia"> <AREAshape="CIRCLE" coords=“60,150,100,150” href="plano.html" alt="Planos"> <AREAshape="POLY" coords=“106,100,126,170,254,170,254,49,222,100” href="fotos.html" alt="Fotos"> <AREAshape="POLY" coords=“169,26,169,93,267,26” nohrefalt="Idioma"> </MAP>

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: • Especificar la salida de un link: <HTML> <HEAD><TITLE>Título de la página</TITLE></HEAD> <FRAMESETrows=“30%,30%,40%”> <FRAMEname=“cabecera” src=“frame1.html” noresize> <FRAMESETcols=“25%,25%,50%”> <FRAMEsrc=“frame2.html” scrolling=“no”> <FRAMEsrc=“frame3.html” marginwidth=“5”> <FRAMEsrc=“frame4.html” marginheight=“5”> </FRAMESET> <FRAMEname=“contenido” src=“frame5.html”> </FRAMESET> </HTML> <Ahref=“http://www.ehu.es” target=“contenido”>Web UPV-EHU</A> target=“_blank” : Salida a una nueva ventana en blanco y sin nombre target=“_self” : Salida a la propia ventana del hiperlink target=“_parent” : Salida al frameset padre del documento actual target=“_top” : Destruye todos los frames y la salida se dirige a la ventana principal del navegador

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 Web Servidor HTTP Respuesta HTML QUERY STRING BASE DE DATOS QUERY STRING Respuesta HTML Cliente Servidor

Formularios • Estructura: <HTML> <HEAD><TITLE>Formulario Simple</TITLE></HEAD> <BODY> <H2>El formulario más simple</H2> <FORMname="login" action="http://www.ehu.es/cgi-bin/CGI0.exe" method="POST" target="_self"> Introduzca su nombre: <INPUT type="text" name="nombre" size="25"><BR><BR> <INPUT type="submit" value="Enviar"> <INPUT type="reset" value="Borrar"> </FORM> </BODY> </HTML>

Formularios • Elementos: • Cajas de texto • Botones • Normal • Password • Multi-línea • Hidden • Submit • Reset • Genérico EjemploCajasTextoyBotones

Formularios • Elementos: • Casillas de verificación • Botones de radio • Ventanas de selección simple • Ventanas de selección múltiple EjemploCasillasyBotonesRadio • Desplegables • De Scroll 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 • 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 e-mail http://www.vc.ehu.es/jiwotvim/IngenieriaSoftware/Herramientas/cedt370r.exe?nombre1=valor1&nombre2=valor2

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.

Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal