1
Clase 5 - Enlaces e Imágenes Vie Feb 03, 2012 10:23 pm
Tito
Mensajes : 3392 
Monedas : 6679 Curso WEBD: HTML – Clase 5
Antes que nada quiero pedir perdón por haber tardado tanto en hacer una nueva clase, por cuestiones de tiempo no había podido hacerla.
En esta nueva clase veremos Enlaces e Imágenes que sin duda alguna es algo que todo sitio debe tener. Utilizaremos la etiqueta para colocar enlaces y la etiqueta![]()
(no necesita cerrarse) para colocar imágenes.
Enlaces:
Su sintaxis es:
Estos destinos pueden ser una página web, partes de una misma página, paginas del mismo sitio, archivos y direcciones de correo.
Enlaces a otro sitio web: estos pueden ser los más comunes. Escribiremos:
Dentro del atributo href pondremos el url de un sitio web. Recuerden colocar el http:// porque sino será tomado como un enlace local. Veremos que sucede si colocamos:
Como pueden ver, es interpretado como un enlace local.
Enlace local: Este tipo de enlace nos permite tener como destino una página de nuestro mismo sitio web.
Por ejemplo, podemos enlazar a la pagina de contacto de WD de la siguiente manera:
Sin embargo, al ser este un enlace de nuestro sitio, podremos hacerlo de la siguiente manera:
El resultado es exactamente el mismo, pero sin dudas hacerlo de la segunda forma es mucho más sencillo.
Enlace interno: los enlaces internos tienen como función dirigir, mediante su dirección, a una parte concreta de nuestro sitio web.
Para esto es necesario tener una etiqueta con un atributo id como podría ser
Luego crearemos nuestro enlace colocando en el atributo href la almohadilla (#) + la id de nuestro destino:
Enlace a un archivo: utilizado para descargar archivos directamente, funciona del mismo modo que un enlace a cualquier sitio web, con la diferencia que este archivo tendrá otra extensión como puede ser ".zip"
Enlace a un correo: Aquí hay una diferencia con respecto a los otros tipos de enlaces. Colocaremos el atributo href seguido de malito: y finalmente el mail.
Ejemplo:
La función está bien clara, de esta forma podremos mandar un mail de una forma más sencilla y directa a la dirección que se encuentra en el atributo href.
Imágenes: las imágenes se definen con la etiqueta![]()
(la cual no tiene un cierre) y dentro de ella colocamos una serie de atributos.
La sintaxis de una imagen es la siguiente:
Podremos utilizar 3 formatos diferentes de imágenes: PNG, JPG y GIF. Recomiendo visitar los siguientes links si quieres saber más sobre estos formatos:
PNG - JPG - gif
A su vez, las imágenes pueden llevar dentro una serie de atributos, a continuación explicaré los más importantes:
WIDTH=”valor” le asigna un ancho a la imagen
HEIGHT=”valor” le asigna un alto a la imagen
ALT=”valor” contiene una descripción de la imagen
Ejemplo:
Bueno, con esto damos por finalizada la clase 5. Espero que les sirva a aquellas personas que se están iniciando en html, y a las que no pero pudieron aprender algo nuevo en esta clase
Un saludo
Antes que nada quiero pedir perdón por haber tardado tanto en hacer una nueva clase, por cuestiones de tiempo no había podido hacerla.
En esta nueva clase veremos Enlaces e Imágenes que sin duda alguna es algo que todo sitio debe tener. Utilizaremos la etiqueta para colocar enlaces y la etiqueta
Enlaces:
Su sintaxis es:
- Código:
<a href="destino">Texto</a>
Estos destinos pueden ser una página web, partes de una misma página, paginas del mismo sitio, archivos y direcciones de correo.
Enlaces a otro sitio web: estos pueden ser los más comunes. Escribiremos:
- Código:
<a href="http://www.google.com.ar/">Google</a>
Dentro del atributo href pondremos el url de un sitio web. Recuerden colocar el http:// porque sino será tomado como un enlace local. Veremos que sucede si colocamos:
- Código:
<a href="www.google.com.ar/">Google</a>
Como pueden ver, es interpretado como un enlace local.
Enlace local: Este tipo de enlace nos permite tener como destino una página de nuestro mismo sitio web.
Por ejemplo, podemos enlazar a la pagina de contacto de WD de la siguiente manera:
- Código:
<a href="http://www.webdesignforo.net/contact">Contacto</a>
Sin embargo, al ser este un enlace de nuestro sitio, podremos hacerlo de la siguiente manera:
- Código:
<a href="/contact">Contacto</a>
El resultado es exactamente el mismo, pero sin dudas hacerlo de la segunda forma es mucho más sencillo.
Enlace interno: los enlaces internos tienen como función dirigir, mediante su dirección, a una parte concreta de nuestro sitio web.
Para esto es necesario tener una etiqueta con un atributo id como podría ser
- Código:
<div id="pun-foot">
Luego crearemos nuestro enlace colocando en el atributo href la almohadilla (#) + la id de nuestro destino:
- Código:
<a href="#pun-foot">Ir abajo</a>
Enlace a un archivo: utilizado para descargar archivos directamente, funciona del mismo modo que un enlace a cualquier sitio web, con la diferencia que este archivo tendrá otra extensión como puede ser ".zip"
- Código:
<a href="miarchivo.zip">Descarga el archivo</a>
Enlace a un correo: Aquí hay una diferencia con respecto a los otros tipos de enlaces. Colocaremos el atributo href seguido de malito: y finalmente el mail.
Ejemplo:
- Código:
<a href="mailto:mi@mail.com">Contactar</a>
La función está bien clara, de esta forma podremos mandar un mail de una forma más sencilla y directa a la dirección que se encuentra en el atributo href.
Imágenes: las imágenes se definen con la etiqueta
La sintaxis de una imagen es la siguiente:
- Código:
<img src="tuimagen.png">
Podremos utilizar 3 formatos diferentes de imágenes: PNG, JPG y GIF. Recomiendo visitar los siguientes links si quieres saber más sobre estos formatos:
PNG - JPG - gif
A su vez, las imágenes pueden llevar dentro una serie de atributos, a continuación explicaré los más importantes:
WIDTH=”valor” le asigna un ancho a la imagen
HEIGHT=”valor” le asigna un alto a la imagen
ALT=”valor” contiene una descripción de la imagen
Ejemplo:
- Código:
<img src="http://i41.servimg.com/u/f41/16/71/63/22/logo14.png" width="200" height="50" alt="hola">
Bueno, con esto damos por finalizada la clase 5. Espero que les sirva a aquellas personas que se están iniciando en html, y a las que no pero pudieron aprender algo nuevo en esta clase
Un saludo
