Clase01

Fernando Alonso Blázquez
Lenguaje de definición
de páginas Web:
HTML
19 de Febrero de 2004

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 de un fichero HTML:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</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>

Formato de párrafos
• Tag ...
• Tag 
• Tag <HR>
• Tag <BLOCKQUOTE>...</BLOCKQUOTE>
• Tag <CENTER>...</CENTER>
• Tag <PRE>...</PRE>
Ejemplo de Formato de párrafos

Formato de texto
• Tag <H>...</H>
• Tags ..., ..., ...
• Tag <TT>...</TT>
• Tag ...
• Tags ..., ...
• Tags <BIG>...</BIG>, ...
• Caracteres especiales: Á : Á
é : é
Ñ : Ñ
ñ : ñ
Ejemplo de Formato de texto

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

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

• 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:falonso@tecnun.es”>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

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

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 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
Ejemplo de Frames

Ante cualquier duda:
• Página Web de la Asignatura:
http://www.tecnun.es/Asignaturas/Informat3/pagina_8.html
• Profesor de la Asignatura:
– Persona simpática pero MUY MUY ocupada.
– Sólo en caso extremo de absoluta
incomprensión de la especificación HTML.
Para finalizar...

Clase01

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Clase01

Similar a Clase01 (20)

Más de soltero1980

Más de soltero1980 (18)

Último

Último (20)

Clase01