Lenguaje de definición de páginas Web: HTML
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 <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 <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 Listas ordenadas Listas de definiciones Tag <UL>...</UL> (de unordered list) Tag <LI> (de line) Listas ordenadas Tag <OL>...</OL> (de ordered list) 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> Atributos de <TR> 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
Anclas y Links Tag <A href=“url”>...</A> Link: Ancla: 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 Ejemplo de Links <A href=“http://www.tecnun.es”>Web TECNUN</A> <A href=“mailto:falonso@tecnun.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>
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: Ejemplo de Frames <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”> </HTML> <A href=“http://www.tecnun.es” target=“contenido”>Web de TECNUN</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
Lenguaje de definición de páginas Web: HTML