Ht ml exposicion_2011

Lenguaje de definición
de páginas Web:

HTML

26/11/2011

 Estructura general de un fichero HTML
 Formato de párrafos
 Formato de texto
 Listas
 Tablas
 Anclas y Links
 Imágenes, clicables y sensibles
 Frames

 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 (/).
<COMANDO>Texto afectado</COMANDO>

 Comentarios
<!–- Los comentarios se introducen de esta forma -->

 Estructura de un fichero HTML:

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>

<BODY>
...
</BODY>
</HTML>

 Atributos
<BODY background=“imagen.jpg”>
...
</BODY>

<IMG src=“imagen.jpg” width=“33%” height=“60%”>

 StyleSheets (Hojas de estilo)
 Efectos acumulativos
<TAG1>
Texto afectado por el TAG1
<TAG2>
Texto afectado por el TAG1 y TAG2
</TAG2>
</TAG1>

 Tag ...
 Tag 
 Tag <HR>
 Tag <BLOCKQUOTE>...</BLOCKQUOTE>
 Tag <CENTER>...</CENTER>
 Tag <PRE>...</PRE>

Ejemplo de Formato de párrafos

 Tag <H>...</H>
 Tags ..., ..., ...
 Tag <TT>...</TT>
 Tag ...
 Tags ..., ...
 Tags <BIG>...</BIG>, ...
 Caracteres especiales:
Á : Á
é : é
Ñ : Ñ
ñ : ñ

Ejemplo de Formato de texto

 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

 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)

 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

 Tag <A href=“url”>...</A>
 Link: Ejemplo de Links
 Otra página Web
<A href=“http://www.terra.com”>Web TERRA</A>

 Enviar un mail
<A href=“mailto:jmoreno@starclar.edu.pe”>e-mail</A>

 Un archivo local (no recomendale)
 Una dirección 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>

 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%”>

 Imagen clicable:
<A href=“http://www.tecnun.es”><IMG src=“tecnun.jpg”></A>

 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:
<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

 Divisiónde 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

Ejemplo de Frames
 Estructura:
<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>

 Especificar la salida de un link:
<A href=“http://www.yahoo.es” target=“contenido”>Web de YAHOO</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

Ht ml exposicion_2011

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Ht ml exposicion_2011

Similar a Ht ml exposicion_2011 (20)

Más de Claretiano

Más de Claretiano (14)

Último

Último (20)

Ht ml exposicion_2011