Lenguaje de definicin de pginas Web HTML 31

Lenguaje de definición de páginas Web: HTML 31 de Marzo de 2006

Í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

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 <TAG 1> Texto afectado por el TAG 1 <TAG 2> Texto afectado por el TAG 1 y TAG 2 </TAG 2> </TAG 1>

Í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

Formato de párrafos • • • Tag Tag Tag . . . <HR> <BLOCKQUOTE>. . . </BLOCKQUOTE> <CENTER>. . . </CENTER> <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

Formato de texto • • Tag <H>. . . </H> Tags . . . , . . . , . . . Tag <TT>. . . </TT> Tag . . . Tags . . . , . . . Tags <BIG>. . . </BIG>, . . . Caracteres especiales: Áé : : Á é Ñ : Ñ ñ : ñ 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

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

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

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: jipotvim@vc. ehu. es”>e-mail</A> – Un archivo local (no recomendable) – Una dirección relativa <A href=". . /dir 1/Page 1. html">Ir a dir 1/Page 1. 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

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='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“campusalava.

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, 49, 222, 100” href="fotos. html" alt="Fotos"> <AREA shape="POLY" coords=“ 169, 26, 169, 93, 267, 26” nohref alt="Idioma"> </MAP>

Indice • • Estructura general de un fichero HTML Formato de párrafos Formato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames

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%, 40%”> <FRAME name=“cabecera” src=“frame 1. html” noresize> <FRAMESET cols=“ 25%, 50%”> <FRAME src=“frame 2. html” scrolling=“no”> <FRAME src=“frame 3. html” marginwidth=“ 5”> <FRAME src=“frame 4. html” marginheight=“ 5”> </FRAMESET> <FRAME name=“contenido” src=“frame 5. 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