ht ml exposicion_2011

Lenguaje de definición

de páginas Web:

HTML

15/04/2023

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 de un fichero HTML:

<HTML>

<HEAD>

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

...

</HEAD>

<BODY>

...

</BODY>

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

FORMATO DE PÁRRAFOS Tag ... Tag Tag <HR> Tag <BLOCKQUOTE>...</BLOCKQUOTE> Tag <CENTER>...</CENTER> Tag <PRE>...</PRE>

Ejemplo de Formato de párrafos

http://www.tecnun.es/asignaturas/Informat3/Apoyo_Clases/Ejemplos_HTML/Formato_parrafo.html

FORMATO DE TEXTO Tag <H>...</H> Tags ..., ...,

... Tag <TT>...</TT> Tag ... Tags ...,

... Tags <BIG>...</BIG>,

... Caracteres especiales:

Á : Áé : éÑ : Ññ : ñ

Ejemplo de Formato de texto

http://www.tecnun.es/Asignaturas/Informat3/Apoyo_Clases/Ejemplos_HTML/Formato_texto.html

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

http://www.tecnun.es/asignaturas/Informat3/Apoyo_Clases/Ejemplos_HTML/Listas.html

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

http://www.tecnun.es/asignaturas/Informat3/Apoyo_Clases/Ejemplos_HTML/Tablas.html

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

http://www.tecnun.es/Asignaturas/Informat3/Apoyo_Clases/Ejemplos_HTML/Links.html

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

http://www.tecnun.es/asignaturas/Informat3/Apoyo_Clases/Ejemplos_HTML/Imagenes.html

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

http://www.tecnun.es/asignaturas/Informat3/Apoyo_Clases/Ejemplos_HTML/Frames.html

Lenguaje de definición

de páginas Web:

HTML

ht ml exposicion_2011

Education