Lenguaje de definición de páginas Web: HTML. Indice Estructura general de un fichero HTML Formato...

Lenguaje de definición

de páginas Web:

HTML

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 extensión *.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

• [deprecated]– Pueden quedar obsoletos en futuras

versiones

• 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


Formato de párrafos

• Tag ...• Tag • Tag <HR>• Tag

<BLOCKQUOTE>...</BLOCKQUOTE>• Tag <CENTER>...</CENTER>• Tag <PRE>...</PRE>

Ejemplo de Formato de párrafos

Indice


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

Indice


Listas

• 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

Indice


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 celda

Ejemplo de Tablas

Indice


• 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

documento– Establecer el link– Hacer referencia a dicho link

Anclas y Links

<A name=“aliniciodeldocumento”>

<A href=“#aliniciodeldocumento”>Ir al Inicio</A>

<A href=“mailto:[email protected]”>e-mail</A>

<A href=“http://www.tecnun.es”>Web TECNUN</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

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

Indice


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

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


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.tecnun.es” target=“contenido”>Web de TECNUN</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

Lenguaje de definición

de páginas Web:

HTML

Lenguaje de definición de páginas Web: HTML. Indice Estructura general de un fichero HTML Formato...

Documents

Transcript of Lenguaje de definición de páginas Web: HTML. Indice Estructura general de un fichero HTML Formato...