HTML 00

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 de un archivo HTML:
<HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> ... </HEAD>
<BODY>
... </BODY> </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
Formato de prrafos
Tag Tag Tag Tag Tag Tag ... <HR> <BLOCKQUOTE>...</BLOCKQUOTE> <CENTER>...</CENTER> <PRE>...</PRE>
Ejemplo de Formato de prrafos
ndice
Formato de texto
Tag <H>...</H> Tags ..., ..., ... Tag <TT>...</TT> Tag ... Tags ..., ... Tags <BIG>...</BIG>, ... : Á Caracteres especiales: : é
: Ñ : ñ
Ejemplo de Formato de Texto
ndice
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
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
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
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
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

HTML 00

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML 00

Transféré par

Droits d'auteur :

Formats disponibles

Lenguaje de definicin

Estructura general de un HTML

Estructura general de un HTML

Estructura general de un HTML

Pueden quedar obsoletos en futuras versiones

Style Sheets (Hojas de estilo) Efectos acumulativos

Ejemplo de Formato de Texto

Tag <TD>... </TD> (de Table Data)

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

Atributos de <TH> y <TD>

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

Un archivo local (no recomendable) Una direccin relativa

Imgenes, clicables y sensibles

Imgenes, clicables y sensibles

Imagen sensible (mapa de imgenes):

<AREA shape="POLY" coords=106,100,126,170,254,170,254,49,222,100 href="fotos.html" alt="Fotos">

Frameset: Ventana con frames

Especificar la salida de un link:

Vous aimerez peut-être aussi