Fernando Alonso Blázquez
Lenguaje de definición
de páginas Web:
HTML19 de Febrero de 2004
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
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
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<!–- Los comentarios se introducen de esta forma -->
<COMANDO>Texto afectado</COMANDO>
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
<BODY background=“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>
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
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
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
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
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
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
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
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 contenidode 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
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
• Tag <A href=“url”>...</A>• Link:
– Otra página Web
– Enviar un mail
– Un archivo local (no recomendale)– Una dirección relativa
• Ancla:– Saltar a otro punto del propio
documento– Establecer el link– Hacer referencia a dicho link
Anclas y Links
<A name=“aliniciodeldocumento”>
<A href=“#aliniciodeldocumento”>Ir al Inicio</A>
<A href=“mailto:[email protected]”>e-mail</A>
<A href=“http://www.tecnun.es”>Web TECNUN</A>
<A href="../dir1/Page1.html">Ir a dir1/Page1.html</A>
Ejemplo de Links
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
Imágenes, clicables y sensibles• Tag <IMG>
– Inserta una imagen en el documento
• Atributos:– src: dónde 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 text 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 dónde se clica.
– Se elabora de la siguiente manera:
<A href=“http://www.tecnun.es”><IMG src=“tecnun.jpg”></A>
<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>
Ejemplo de Imagenes
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: Indice – Contenido
• Frameset: Ventana con frames
Frames
• Estructura:
• Especificar la salida de un link:
<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>
<A href=“http://www.tecnun.es” target=“contenido”>Web de TECNUN</A>
target=“_blank” : Salida a una nueva ventana en blanco y sin nombretarget=“_self” : Salida a la propia ventana del hiperlinktarget=“_parent” : Salida al frameset padre del documento actualtarget=“_top” : Destruye todos los frames y la salida se dirige a la ventana principal del navegador
Ejemplo de Frames
Ante cualquier duda:
• Página Web de la Asignatura:
http://www.tecnun.es/Asignaturas/Informat3/pagina_8.html
• Profesor de la Asignatura:– Persona simpática pero MUY MUY
ocupada.– Sólo en caso extremo de absoluta
incomprensión de la especificación HTML.
Para finalizar...
Fernando Alonso Blázquez
Lenguaje de definición
de páginas Web:
HTML19 de Febrero de 2004