Manual 1.3 HTML VICTOR

IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA

HIPERENLACES E IMÁGENES

El HTML nos permite establecer enlaces con otras páginas Web, lo mismo que con fotografías,
elementos multimedia, direcciones de correo electrónico, grupos de noticias y archivos que se
puedan descargar.

<a href=”http://www.google.com”> Éste es una con la Página de Google.</a>

Este es el texto que se enlazará
El atributo href señala la con la Página de Google.
ubicación de la página o
sitio en donde estamos
enlazados

Nota: la etiqueta <a> no sirve de mucho si no cuenta con sus atributos. El más común de ellos
es href, que corresponde a una abreviatura de hypertext reference o referencia de
hipertexto le dice al navegador dónde encontrar la información que usted está
enlazando. Los atributos de la etiqueta <a> son name, title accesskey, tabindex y target.

TIPOS DE ENLACES
Enlaces absolutos

Los enlaces absolutos son los que incluyen el nombre de ruta completo. En la mayoría de los
casos, usted usa enlaces absolutos cuando enlaza a páginas o sitios que no son parte de su sitio
Web. Por Ejemplo, si se está conectando desde su sitio con Yahoo, escriba como enlace la
dirección “http//www.yahoo.com; este enlace absoluto incluye todo el nombre de la ruta,
todo los que el navegador necesita para localizarlo el sitio en cuestión.

Enlaces relativos

Los enlaces relativos reciben este nombre debido q que usted no incluye todo el nombre de
ruta de la página con la cual se está enlazando.

Estos tipos de enlace son de uso mas común cuando quiere enlazar desde una página en su
sitio hacia otra. El siguiente es un Ejemplo del aspecto que podría tener un enlace relativo.

< a hret=”contactme.html”> Comuníquese conmigo</a>

Nota: si necesita enlazar a un archivo en una carpeta por encima de la carpeta en donde está
su página, puede agregar “…./” para cada directorio o carpeta hacia arriba en el árbol.
Así el archivo al que está enlazando se halla dos carpetas más arriba de donde usted se
encuentra, podría usar.

<a href=”. ./ . ./contácteme.html”> Comuníquese Conmigo</a>

Ejercicio : Crear un archivo con el nombre Index.html y luego otro 2 archivos con el nombre
Contácteme.html y fotos.html.

DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[1]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS

MALA”
UNIDAD DIÁCTICA

AGREGAR ENLACES A SECCIONES DENTRO DE LA
MISMA PÁGINA

Cuando crea un enlace a una página, el navegador sabe qué es lo que debe buscar porque cada
página tiene un nombre. Sin embargo en ocasiones usted puede desear un enlace a una
sección de texto dentro de una página en su sitio web. Para enlazar a una sección de una
página Web, primero debe darle un nombre a esa sección.

Un ancla es un lugar dentro de una página, que recibe un nombre especial para permitir que
usted establesca más adelante un enlace con ella. Si previamente no le ha asignado un nombre
a la sección, no se puede establecer el enlace. El siguiente es un ejemplo de un ancla:

Este es el atributo actual de la sección que
se representa en la pantalla.

<a name = ”sección1>” Sección 1 </a>

Este atributo de la El valor del atributo
etiqueta <a> le name es el nombre
permite darle un de su sección. Use
nombre a una nombres de sección
sección de su página fáciles de recordar,
Web sin ningún tipo de
espacios o
puntuación.

MALA”
UNIDAD DIÁCTICA

<html>
<head>
<title>Usar Anclas en páginas Largas</title>
</head>
<body text="000000" bgcolor="ffffff">
<a name="#arriba"></a>
<a href="#sección1">Pasar a sección 1</a> 
<hr/>
<a name="sección1">Sección1</a>
El texto de la Sección 1 va aquí:
 .
 .
 .
 . Duplicar Líneas más Abajo para que puedas observar cómo funciona
 .
 .
 
 .
 .
 .
Duplicar Líneas más Abajo para que puedas observar cómo funciona
 .
 .
 .
 
<a href="#arriba">Regresar Arriba</a>
</body>
</html>

CAMBIAR LOS COLORES DE ENLACE
Se puede usar tres atributos más de la etiqueta BODY para adaptar a sus necesidades los tres
colores de enlace de una página Web:
Link : Cambia el color de los enlaces de la página que aún no se han visitado
vlink : Cambia el color de los enlaces de la página que el usuario ya ha visitado.
alink : Cambia el color de la pantalla cuando el visitante presiona el botón del
ratón mientras para sobre un enlace.

MALA”
UNIDAD DIÁCTICA

IMÁGENES EN PRIMER PLANO
Usted puede agregar con facilidad imágenes en cualquier parte de su página web usando la
etiqueta img, que esta es una abreviatura de la palabra imagen. Agregue el atributo src(por
Source o Origen en Ingles).
La imagen debe estar en un formato amigable para la web, como gif, jpg o png.

<img src=”image/photo.jpg”></img>

Atributos de la etiqueta img

width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu
imagen.
height="x" Junto con el atributo width, el navegador puede preparar el espacio
necesario para tu imagen antes de que se muestre.
border="x" Para añadir o eliminar un borde, donde la x será un valor numérico.
align="xxx" Puedes alinear una imagen horizontal y/o verticalmente en una página
usando este atributo.
alt="descripción_de_la_imagen" El atributo alt te permite describir la imagen para los
navegadores de sólo texto, así como etiquetar la imagen antes de que se cargue en
una página.
hspace="x" horizontal space, se usa para añadir espacio vacío, con un valor numérico,
en la coordenada horizontal de una imagen.
vspace="x" vertical space, controla el espacio de la imagen en las coordenadas
verticales.

Ejemplo:
<html>
<head>
<title>Imagen flotante y texto dinámico: izquierda</title>
</head>

<body>

<img src="imagenes/bander.gif" width="86" height="59" border="0" align="left"
alt="Dibujo de una bandera" vsapace=”20”>

En esta pequeña página web te servirá de ejemplo para ver cómo una imagen
puede pasar a ser flotante, de forma que el texto dinámicamente se recoloque por
la pantalla del navegador, y así haya una disposición precisa y clara de todos los
elementos en pantalla, creando a la vez interesantes efectos estéticos, siempre y
cuando esté de acuerdo con el diseño de la página, que intentaremos que sea lo
más armonioso y agradable a la vista que podamos o que esté a nuestro alcance,
dependiendo también del contenido de la página. El diseño y el contenido de una
WEB deben ir parejos, uno depende del otro, eso nos asegurará el éxito de nuestro
sitio web.

</body>

</html>

MALA”
UNIDAD DIÁCTICA

ENLAZAR SECCIONES DE IMAGEN
También puede enlazar secciones de una imagen, creando lo que se conoce mapa de imagen.
Cuando se enlazan únicamente secciones de una imagen , el puntero del visitante sólo cambia
a la forma de mano cuando pasa el ratón sobre uno de los puntos activos predefinidos en la
imagen. Cada punto activo dentro de un mapa de imagen puede enlazar a su propia página
Web.

<html>
<head>
<title>Imagen Mapa</title>
</head>

<body background="imagenes/grass.jpg" bgproperties="fixed" >
<marquee behavior = "alternate" bgcolor = "448800"> BIENVENIDOS AL PERÚ </marquee>


<img src="imagenes/mapaperu.jpg" usemap="#usa" border="0" width="400"
height="500" alt="Usted vive en."></img>


<map name="usa">
<area shape ="rect" cords ="72 , 134 , 79 , 180" href ="http://www.piuraperu.com/ "
alt ="Piura"></area>
<area shape="rect" coords="200 , 32 , 215 , 239" href ="http://www.iquitos-
peru.com/" alt = "Iquitos" ></area>
<area shape="rect" cords ="140 , 300 , 168 , 320" ref ="http://www.munlima.gob.pe/"
target="_blank alt = "Lima" ></area>

</map>
</body>
</html>

DESCRIPCIÓN DE ETIQUETAS Y ATRIBUTOS

usemap = ”#usa” Primero se le dice al navegador que esta imagen se usará como un mapa de
imagen. Use el atributo usemap para hacerlo y decirle al navegador dónde
buscar el archivo del mapa. El atributo usemap debe ir presedido por un
signo(#).NOTA: usemap es un atributo de la etiqueta IMG.
<map name=”usa”> Con esta etiqueta le damos por nombre el mapa (name=”usa”)

<area> con esta etiqueta definimos cada punto activo (pueden ser varios Puntos de
enlace activos.

Shape Este es un atributo de la etiqueta <area> y sus valores del atributo pueden
ser (rect, poly o circle). Define la forma de su punto activo: rect para
rectángulos, poly para plígonos y circle para círculos.

MALA”
UNIDAD DIÁCTICA

Coords este es otro atributo de la etiqueta <area> y sus valores pueden ser para
rect: X1,Y1,X2,Y2. Para Poly: X1,Y1,X2,Y2,X3,Y3….. Y para Circle: X, Y, R.
La cual coords define los límites de su punto activo, en donde x y son las
coordenadas horizontal y vertical, respectivamente, y r es el radio
(únicamente para cículos).
Los Rectangulos se definen por los puntos superior izquierdo e inferior
Derecho.
Los Polígonos se definen por cada pareja de puntos x, y.
Los Círculos se definen con las coordenadas x,y del centro y el radio.
href Define la página a donde usted quiere enlazar el punto activo (solamente
una parte de la Imagen)
alt Define el texto alterno que aparece para cada punto activo.

</map> Cuando se abre una etiqueta <map> y definir todos los puntos activos en la
imagen (etiqueta <area> y sus atributos), no olvide cerrar la etiqueta
</map>.

Nota: Para encontrar las coordenadas puede usar el programa estándar Paint que se incluye
en Windows para encontrar las coordenadas. En dicho programa cuando usa la
herramienta selección y mueve el ratón a los puntos en cuestión, las coordenadas
aparecen en la barra de estado de la parte inferior.

Manual 1.3 HTML VICTOR

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Similar a Manual 1.3 HTML VICTOR

Similar a Manual 1.3 HTML VICTOR (20)

Más de Victor Manuel Chumpitaz Avalos

Más de Victor Manuel Chumpitaz Avalos (6)

Último

Último (20)

Manual 1.3 HTML VICTOR