Unidad 2

Etiquetas
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis
de las etiquetas.
Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.
Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo
<body>,<title> o <p>.
Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por
ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre, está el
contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del tipo de
etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí mismas. Esto se
expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br
/>, que equivaldría a <br></br>. La etiqueta <br /> escribe un salto de línea.
Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el
nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus
valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">.
La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en
minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más de
un valor, se escriben todos los valores dentro de las mismas comillas, separados por
espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.
Hasta hace poco, lo más usual a la hora de escribir páginas web era que cada etiqueta
tuviera bastantes atributos, que se referían a propiedades del formato o representación
de los elementos. La tendencia actual es la de separar el formato del contenido,
descartando estos atributos, sustituyéndolos por propiedades de estilo.
Por ejemplo, para escribir la siguiente línea:
Bienvenidos a www.aulaclic.es
Antes, sin estilos:
<p align="center"><font color="#993366" size="4" face="Comic Sans MS,
Arial, MS Sans Serif">Bienvenidos a www.aulaclic.es</font></p>
Ahora, con estilos:
<p class="presentacion">Bienvenidos a www.aulaclic.es </p>
Como veremos en el siguiente tema, en otro lugar se definen las caracteristicas del
estilo.
Estructura básica de la página
Todo el documento HTML viene contenido dentro de la etiqueta <html></html>.

Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada
por las etiquetas <head></head> y el cuerpo, delimitado por las etiquetas
<body></body>. Por lo tanto, el aspecto básico de cualquier página web, es el siguiente:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
La etiqueta <head> contiene información sobre la página. Por ejemplo contiene
etiquetas que pueden decir de qué va la página, el título que debe de mostrar en la barra
del navegador, o código javascript y estilos, que pueden estar en el propio encabezado o
como llamadas a otros archivos. Normalmente, lo que contiene esta etiqueta no se
muestra en el navegador.
Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De
momento sólo comentaremos que obligatoriamente debe de contener la etiqueta
<title></title>, que contiene el título de la página, que es lo que se ve en la barra de
título del navegador.
En el <body> encontramos el contenido de la página, lo que se ve a través del
navegador: texto, imágenes, enlaces, tablas, etc...
En el siguiente ejemplo, puedes ver que hemos modificado el código que utilizamos en
la página Primera.htm creada en el tema anterior. En él vemos los elementos que hemos
comentado. Hemos añadido la etiqueta <br /> para saltar de línea. Esta es la primera
página del sitio que vamos a ir construyendo a lo largo del curso.
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<p>Bienvenido a Floramics
<br /> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.</p>
</body>
</html>
Imágenes

Uno de los elementos más utilizados en una página web son las imágenes, tanto para
mostrar información como parte del propio diseño de la página. Pueden ser fotografías o
gráficos creados por programas como Photoshop, Illustrator. etc. Más adelante veremos
cómo utilizar dos programas gratuitos de este tipo: Gimp e Inkscape.
Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF, PNG y
JPG. Puedes ver con más detalle cada formato en este básico .
Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los
atributos que como mínimo ha de tener esta etiqueta son los siguientes:
<img src="ubicacion/imagen.gif" alt="texto alternativo" />
Lo primero que debemos de saber es dónde está la imagen, su ubicación, que es lo que
debe contener el atributo src:
 Si la imagen está en una página Web, basta con saber su ruta, por ejemplo
http://www.aulaclic.es/logo_ac1.jpg. Esto es lo que se llama una dirección absoluta.
 Si la imagen está en el mismo sito que la página web, podemos utilizar una dirección
relativa, como imagen.gif o imagenes/imagen.gif. Si no sabes cómo indicar una
dirección relativa, consulta este básico .
Cuando el navegador no encuentre la imagen ubicada en scr no podrá mostrar la
imagen. En su lugar puede mostrar una imagen de error, como en Internet Explorer que
muestra . Además se mostrará el texto contenido en el atributo alt, ya que ésa es su
función: mostrar un texto alternativo cuando no se puede mostrar la imagen. Esto es
importante para la accesibilidad a la web. Imaginemos que tenemos unas imágenes que
hacen de botón para ir a partes de nuestra web, como Inicio o Galería. Si no ponemos el
alt, y no se muestran las imágenes, el usuario no podrá navegar por nuestro sitio.
Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos height
(alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en píxeles.
Al cargar una página, el navegador muestra primero el texto y después las imágenes. Si
conoce las dimensiones de cada imagen, puede dejar un hueco reservado para ellas. Si
no, pondrá el texto y luego irá desplazándolo para colocar las imágenes, lo que hará
incómodo leer la página hasta que no esté totalmente cargada.
Otro atributo frecuente en las imágenes es title. Si lo ponemos en la imagen, al posar
el cursor sobre ella se mostrará su valor. En IE7, cuando se omite title, se muestra el
contenido de alt.
Por ejemplo, para el siguiente código se muestra la siguiente imagen:

<img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41"
title="El logo de aulaClic" />
Los valores de height y width puedes verlos al seleccionar la imagen desde el
Explorador de Windows o desde un programa de gráficos. Si cambias esos valores la
imagen también cambiará. Si reduces los valores, manteniendo la proporción, la imagen
se verá más pequeña, si los aumentas se verá más grande, pero con peor calidad, como
puedes ver en el siguiente ejemplo:
<img src="comunes/aulaclic.gif" alt="aulaClic" width="126" height="56"
title="El logo de aulaClic" />
Para aumentar o disminuir una imagen es conveniente utilizar un programa gráfico, ya
que estos programas tienen opciones para optimizar el tamaño de las imágenes. En el
tema 9 veremos cómo hacerlo con el programa gráfico Gimp.
Vamos a añadir la siguiente imagen a nuestra página de Floramics. La imagen se
encuentra en graficos/flor_ejemplo2.jpg
Hemos reducido su tamaño variando los atributos, lo cual no es una buena técnica ya
que, aunque se ve bien, se tiene que cargar una imagen grande para luego verla más
pequeña.
Este es el código:
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</p>
<img src="graficos/flor_ejemplo2.jpg" width="150" height="150"
alt="No se encuentra esta imagen" />
<h2>Contacto</h2>

<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto.   Te esperamos.</p>
</body>
</html>

Unidad 2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (15)

Similar a Unidad 2

Similar a Unidad 2 (20)

Más de jacinto_chipantiza

Más de jacinto_chipantiza (14)

Unidad 2