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 extension *.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
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 ordenadasTag <OL>...</OL> (de ordered list)Tag <LI> (de line)
Listas de definicionesTag <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 celdaEjemplo 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:
Otra página Web
Enviar un mail
Un archivo local (no recomendale)Una dirección relativa
Ancla:Saltar a otro punto del propio documentoEstablecer el linkHacer referencia a dicho link
<A name=“aliniciodeldocumento”>
<A href=“#aliniciodeldocumento”>Ir al Inicio</A>
<A href=“mailto:[email protected]”>e-mail</A>
<A href=“http://www.terra.com”>Web TERRA</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 imagenwidth, 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.yahoo.es” target=“contenido”>Web de YAHOO</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
Top Related