Diseño Web - Clase 2

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL
AREA: Tecnología e Informática – Grado 11

TEMA: HTML básico – Imágenes, Enlaces
Introducción
Esta guía contiene información y ejercicios que permitirán comprender el lenguaje HTML para el diseño de páginas web.
Aprenderá a incrustar imágenes y enlaces (hipervínculos) mediante etiquetas 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, o con programas
gratuitos como Gimp e Inkscape.
Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF y PNG (para gráficos simples, dibujos y transparencias
simples) y JPG (fotografías con buena calidad y muchos colores).
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:
 Una dirección absoluta es aquella que incluye toda la ruta hasta el archivo, incluido el protocolo http. Por ejemplo
http://www.aulaclic.es/illustratorcs3/graficos/ej_homer_final.gif, o http://www.aulaclic.es/index.htm.
 Una dirección relativa es aquella que se expresa a partir de una ubicación conocida, dentro de un mismo sitio.
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.
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.
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
Ejercicio: añadir la siguiente imagen a nuestra página del ITSI. La imagen se encuentra en d:\web\entrada.jpg. Este es el código:
<html>
<head>
<title> ITSI. Instituto Técnico Superior Industrial </title>
</head>
<body>
<h1>Bienvenido al ITSI</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre nuestra institución
y una colección de fotografías de las instalaciones </p>
<img src=”file://d:/web/entrada.jpg” width=”404” height=”303”
alt=”No se encuentra la imagen” title=”Entrada al ITSI” />
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. Te esperamos.</p>
</body>
</html>
A la hora de elegir una imagen, hemos de tener en cuenta que para poder mostrarla, el navegador debe de descargarla primero;
cuanto más grande sea la imagen, más ocupa, por lo tanto, hay que procurar usar imágenes lo más pequeñas posibles, siempre
que lo que queramos mostrar se vea con suficiente nitidez.
Enlaces
Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra página del mismo sitio, o a una página de un sitio
distinto. Esto es un enlace o hiperenlace (en inglés link o hyperlink) también llamado hipertexto o hipervínculo.
Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma y pasa de una flecha a una
mano. También es muy frecuente que los enlaces aparezcan subrayados, ya que es la opción por defecto que les asigna el HTML.
En HTML, el enlace se identifica con la etiqueta <a></a>. La forma más básica de un enlace es la siguiente:
<a href="archivo_enlazado">contenido del enlace</a>
El atributo href indica la dirección (URL) a la que se enlaza, que normalmente es un archivo html, por ejemplo
http://www.google.com.co . El contenido del enlace es lo que el usuario ve en la página y que al pulsar sobre él nos lleva al
enlace. Normalmente es texto o una imagen, en el siguiente ejemplo es el texto aquí.
Pulsa <a href="http://www.google.com.co">aquí</a>.
Se verá así: Pulsa aquí.
Es muy común añadir a los enlaces el atributo title, para que muestre información sobre el destino del enlace cuando el usuario
deje unos instantes el cursor encima del enlace. Por ejemplo:
Pulsa aquí:
Pulsa <a href="http://www.colombiaaprende.edu.co" title="Visita el portal de Colombia Aprende">aquí</a>.
Por defecto, el enlace se abrirá en la misma ventana. Si queremos que se abra en una nueva ventana, podemos utilizar el atributo
target="_blank".
Ejercicio: Modifique el código html de nuestra página, tal como aparece a continuación.
<html>
<head>
<title> ITSI. Instituto Técnico Superior Industrial </title>
</head>
<body>
<h1>Bienvenido al ITSI</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre nuestra institución
y una colección de fotografías de las instalaciones </p>
<img src=”file://d:/web/entrada.jpg” width=”404” height=”303”
alt=”No se encuentra la imagen” title=”Entrada al ITSI” />
<p>Visita el portal educativo más importante de Colombia:
<a href=”http://www.colombiaaprende.edu.co” target=”_blank”>Colombia Aprende</p>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. Te esperamos.</p>
</body>
</html>
Ejercicio: Utilizando el bloc de notas, cree una página como la que verá a continuación. Guárdela con el nombre
platosemana.html

Diseño Web - Clase 2

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Diseño Web - Clase 2

Hochgeladen von

Copyright:

Verfügbare Formate

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL

AREA: Tecnología e Informática – Grado 11

Se verá así: Pulsa aquí.

Das könnte Ihnen auch gefallen