diseño web - taller 2
TRANSCRIPT
8/3/2019 Diseño Web - taller 2
http://slidepdf.com/reader/full/diseno-web-taller-2 1/2
I
AREA: Tecnología e In
TEMA: HTML básico –
Introducción
Esta guía contiene información
Aprenderá a incrustar imágenes y
IMÁGENES
Uno de los elementos más utiliza
diseño de la página. Pueden ser
gratuitos como Gimp e Inkscape.
Básicamente, en páginas web nos
simples) y JPG (fotografías con b
etiqueta <img />. Los atributos qu
<img src="ubicaci
Lo primero que debemos de sabe
• Una dirección absoluta
http://www.aulaclic.es/
• Una dirección relativa es
Cuando el navegador no encuent
de error. Además se mostrará el t
no se puede mostrar la imagen.
Aunque no son obligatorios, es
ellos las dimensiones de la imagen
Para aumentar o disminuir una im
optimizar el tamaño de las imáge
Ejercicio: añadir una imagen a nu
<html>
<head>
<title> ITSI. Institut
</head>
<body>
<h1>Bienvenido al ITSI<
<h2>Presentación</h2>
<p> En esta web encontr
y una colección de fot
<img src=”file://d:/web
alt=”No se encuentra l
<h2>Contacto</h2>
<p> Si quieres comunica
visita nuestra página
</body>
</html>
A la hora de elegir una imagen, hcuanto más grande sea la imagen
que lo que queramos mostrar se v
ENLACES
Cualquier página web tiene imáge
distinto. Esto es un enlace o hiper
Un enlace se diferencia del texto
mano. También es muy frecuente
STITUCION EDUCATIVA TECNICO SUPE
formática – Grado 11
Imágenes, Enlaces
y
ejercicios que permitirán comprender e
enlaces (hipervínculos) mediante etiquetas
os en una página web son las imágenes, tan
fotografías o gráficos creados por progra
encontramos tres tipos de imágenes: GIF y
uena calidad y muchos colores). Cuando q
e como mínimo ha de tener esta etiqueta so
on/imagen.gif" alt="texto alte
es dónde está la imagen, su ubicación, que
es aquella que incluye toda la ruta hasta
illustratorcs3/graficos/ej_homer_final.gif ,
aquella que se expresa a partir de una ubic
e la imagen ubicada en scr no podrá mostra
exto contenido en el atributo alt, ya que ésa
uy frecuente añadir a la imagen los atribut
, en píxeles.
agen es conveniente utilizar un programa gr
es
stra página del ITSI. La imagen se encuentra
o Técnico Superior Industrial
/h1>
arás información sobre nuestra
ografías de las instalaciones
/entrada.jpg” width=”404” heig
a imagen” title=”Entrada al IT
rte con nosotros
de contacto. Te e
mos de tener en cuenta que para poder m, más ocupa, por lo tanto, hay que procura
ea con suficiente nitidez.
nes o texto, que al pulsarlos nos llevan a ot
enlace (en inglés link o hyperlink ) también ll
normal porque al colocar el cursor encima
que los enlaces aparezcan subrayados, ya q
IOR INDUSTRIAL
l lenguaje HTML para el diseño de págin
HTML.
to para mostrar información como parte del
as como Photoshop, Illustrator , o con pro
NG (para gráficos simples, dibujos y transp
eremos introducir una imagen, lo hacemo
n los siguientes:
rnativo" />
es lo que debe contener el atributo src:
l archivo, incluido el protocolo http. Por
http://www.aulaclic.es/index.htm.
ción conocida, dentro de un mismo sitio.
r la imagen. En su lugar puede mostrar una
es su función: mostrar un texto alternativo
os height (alto) y width (ancho), introduci
áfico, ya que estos programas tienen opcion
en d:\web\entrada.jpg. Este es el código:
</title>
institución
</p>
ht=”303”
SI” />
speramos.</p>
strarla, el navegador debe de descargarla pusar imágenes lo más pequeñas posibles, s
a página del mismo sitio, o a una página de
mado hipertexto o hipervínculo.
este cambia de forma y pasa de una flech
e es la opción por defecto que les asigna el
s web.
propio
gramas
rencias
con la
jemplo
imagen
cuando
ndo en
es para
rimero;iempre
un sitio
a
a una
HTML.
8/3/2019 Diseño Web - taller 2
http://slidepdf.com/reader/full/diseno-web-taller-2 2/2
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
nuestra_institucion.html . Nota: el escudo se encuentra en la carpeta d:\web
Compromiso:
Diseña en casa una hoja de vida en formato html, empleando etiquetas para dar formato al texto. Envíala por correo
electrónico a [email protected] antes del 11 de febrero.