Vous êtes sur la page 1sur 23

Lenguaje de definicin

de pginas Web:

HTML
Febrero de 2012

ndice
Estructura general de un fichero HTML Formato de prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, clicables y sensibles Frames

ndice
Estructura general de un archivo HTML Formato de prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, clicables y sensibles Frames

Estructura general de un HTML


Archivos puramente ASCII Marcas de control llamadas TAGs

Cuando el navegador lee un fichero ASCII con extensin *.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 archivo HTML:
<HTML> <HEAD> <TITLE>Ttulo de la pgina</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


<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 prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, clicables y sensibles Frames

Formato de prrafos
Tag Tag Tag Tag Tag Tag <P>...</P> <BR> <HR> <BLOCKQUOTE>...</BLOCKQUOTE> <CENTER>...</CENTER> <PRE>...</PRE>
Ejemplo de Formato de prrafos

ndice
Estructura general de un fichero HTML Formato de prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, 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> : &Aacute; Caracteres especiales: : &eacute;
: &Ntilde; : &ntilde;

Ejemplo de Formato de Texto

ndice
Estructura general de un fichero HTML Formato de prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, clicables y sensibles Frames

Listas
Listas desordenadas Listas ordenadas
Tag <UL>...</UL> (de unordered list) Tag <LI> (de line) Tag <OL>...</OL> (de ordered list) Tag <LI> (de line) Tag <DL>...</DL> (de definition list) Tag <DT> (de definition term) Tag <DD> (de definition description)
Ejemplo de Listas

Listas de definiciones

ndice
Estructura general de un fichero HTML Formato de prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, 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, imgenes, enlaces e incluso otras tablas anidadas
Celdas cuyo texto aparezca resaltado (por ejemplo, encabezados)

Tag <TH>... </TH> (de Table Header)

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: alineacin del contenido de las celdas de la fila valign: posicin vertical del contenido de las celdas de la fila rowspan: n de filas que debe abarcar la celda actual colspan: n de columnas de la fila que abarcar la celda align: alineacin del contenido de la celda valign: posicin vertical del contenido de la celda Ejemplo de Tablas

Atributos de <TH> y <TD>

ndice
Estructura general de un fichero HTML Formato de prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, clicables y sensibles Frames

Anclas y Links
Tag <A href=url>...</A> Link:
Otra pgina Web
Enviar un mail
<A href=mailto:jipotvim@vc.ehu.es>e-mail</A>

Ejemplo de Links

<A href=http://www.ehu.es>Web UPV-EHU</A>

Un archivo local (no recomendable) Una direccin relativa


<A href="../dir1/Page1.html">Ir a dir1/Page1.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 prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, clicables y sensibles Frames

Imgenes, clicables y sensibles


Tag <IMG> Atributos:
Inserta una imagen en el documento src: donde se encuentra la imagen. Requerido. alt: texto alternativo si no se ve la imagen width, height: tamao de la imagen (absoluto en pixels o en %) align: alineacin 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 resolucin hasta que se termina de cargar la versin de alta resolucin.
<IMG src=Imagen.jpg width=33% height=60%>

Imgenes, clicables y sensibles


Imagen clicable:
<A href=http://www.vc.ehu.es><IMG src=campusalava.jpg></A>

Imagen sensible (mapa de imgenes):

Imgenes 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="Baha de San Sebastin"> <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>

Indice
Estructura general de un fichero HTML Formato de prrafos Formato de texto Listas Tablas Anclas y Links Imgenes, clicables y sensibles Frames

Frames
Divisin de la ventana del navegador en subventanas o frames Cada frame puede tener un nombre al que se puede dirigir el resultado de una accin Tamao: fijo o variable (ratn) Contenido: esttico o dinmico
Clsica divisin: ndice Contenido

Frameset: Ventana con frames

Frames
Estructura:
Ejemplo de Frames
<HTML> <HEAD><TITLE>Ttulo de la pgina</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>

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