Lenguaje de definición de páginas Web: HTML

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

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>

Formato de párrafos • Tag ... • Tag • Tag <HR> • Tag <BLOCKQUOTE>...</BLOCKQUOTE> • Tag <CENTER>...</CENTER> • Tag <PRE>...</PRE> Ejemplo de Formato de párrafos

Formato de texto • Tag <H>...</H> • Tags ..., ..., ... • Tag <TT>...</TT> • Tag ... • Tags ..., ... • Tags <BIG>...</BIG>, ... • 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 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

Ejemplo de Links Anclas y Links • 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 <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>

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> <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> Ejemplo de Imagenes

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 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.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

Lenguaje de definición de páginas Web: HTML