Manual Básico HTML – Cap 4 – Imagenes

  • INCLUSIÓN DE IMÁGENES EN HTML

Vamos a aprender a incluir imágenes en nuestro documeto HTML, algo muy sencillo y que guarda cierta similitud con los enlaces en su sintáxis.

La etiqueta que usaremos será <IMG SRC>, la cual no tiene etiqueta de cierre.

Es decir, si queremos incluir en nuestro documento HTML una imagen, por ejemplo, imagen1.gif (de nuevo hago uso de mi excelsa imaginación), la cual se encuentra en el mismo directorio que nuestro documento HTML, la estructura será la siguiente:

<IMG SRC=”imagen1.gif”>

Sencillo, ¿verdad?, pues como ya aprendimos en el tema de los enlaces, si queremos cargar una imagen que esté en otro directorio sólo tendremos que usar la misma estructura que con dichos enlaces, por ejemplo:

  • Queremos cargar una imagen de nombre imagen2.gif que se encuentra en el directorio imagenes dentro del directorio principal:

<IMG SRC=”imagenes/imagen2.gif”>

  • Queremos cargar una imagen de nombre imagen-externa.gif que se encuentra en un sitio web externo al nuestro, en la URL http://ricalco.com

<IMG SRC=”http://ricalco.com/imagen-externa.gif>

Ya lo vamos teniendo más claro… (Leer más…)

Escrito por rikype | 22 de Octubre de 2008 | 3 comentarios
Programacion Web y Tutoriales.

Manual Básico de HTML – Cap 3 – Los enlaces

Como norma general, los enlaces tendrán la siguiente estructura:

<A HREF=”XXX”> YYY </A>

Es decir, XXX es el destino del enlace mientras que YYY es el texto indicativo de dicho enlace, que se mostrará con un color especial y generalmente subrayado, opciones que veremos más adelante.

En principio, vamos a distinguir cuatro tipos de enlaces:

  • Enlaces dentro de la misma página.
  • Enlaces con otra página de nuestro mismo “dominio”.
  • Enlaces con una página exterior.
  • Enlaces con un correo electrónico.

Vayamos viéndolos uno por uno:

  • Enlaces dentro de la misma página:

Estos enlaces se utilizan generalmente en documentos muy extensos donde nos puede interesar crear saltos desde una posición de ese documento a otra dentro del mismo documento, un claro ejemplo puede ser la realización de un F.A.Q., donde podemos enlazar las diferentes preguntas con su respuesta dentro del documento.

Para hacer esto necesitaremos dos etiquitas, la primera será la ya nombrada <A HREF>, con la particularidad de escribir el símbolo # en el enlace, y su correspondiente cierre </A>, y la segunda será la etiqueta <A NAME> con su cierre </A>.

Es decir, el lugar desde donde queremos saltar se escribirá así:

<A HREF=”#marca”> YYY </A>

y en el lugar donde queramos ir al pulsar YYY:

<A NAME=”marca”></A>

  • Enlaces con otra página de nuestro mismo “dominio”:

Lo normal es que nuestro sistema disponga de varias páginas enlazadas normalmente con una página inicial o también llamada principal así como entre ellas mismas.

Supongamos que tenemos dos páginas, pagina1.html y pagina2.html (que original ¿verdad?), y queremos colocar un enlace en pagina1.html que nos lleve a pagina2.html, pues la estructura sería la siguiente:

<A HREF=”pagina2.html”> Ir a la pagina 2 </A>

En este ejemplo suponemos que ambas páginas se encuentran en el mismo directorio, pero puede ocurrir que pagina1.html se encuentre en el directorio principal y pagina2.html se encuentre en otro, pongamos por ejemplo, el directorio subdir en otro alarde de originalidad por mi parte, tendríamos que hacer lo siguiente:

<A HREF=”subdir/pagina2.html”> Ir a la pagina 2 </A>

Pero también nos puede ocurrir a la inversa y encontrarnos en pagina2.html, dentro del directorio subdir y queremos enlazar con pagina1.html, ¿como podríamos hacerlo?, pues poniendo “../“, es decir, nuestro enlace quedaría tal que así:

<A HREF=”../pagina1.html> Ir a la pagina 1 </A>

  • Enlaces con una pagina exterior:

En muchas ocasiones tendremos la necesidad de enlazar con una página que se encuentre fuera de nuestro sistema, para ello, será necesario conocer su dirección completa o URL (Uniform Resource Locator).

Conociendo este URL, sólo necesitaremos sustituir el XXX de nuestro destino de enlace por éste URL, por ejemplo, si queremos enlazar con google deberíamos poner lo siguiente:

<A HREF=”http://www.google.com“> Pulsa para ir a Google </A>

Fácil, ¿verdad?

  • Enlaces con una dirección de correo electrónico:

Si queremos enlazar con una dirección de correo electrónico debemos sustituir XXX (nuestro destino de enlace) por mailto seguido de la dirección de correo electrónico de la siguiente manera:

<A HREF=”mailto: dirección de email”> Mandame un email </A>

Con esto ya hemos tocado por encima los tipos de enlace en lenguaje HTML, sin embargo, más adelante volveremos a tocar los enlaces y nos adentraremos más en ellos puesto que abarcan mucho más de lo que se ha explicado en este capítulo.

Escrito por rikype | 11 de Octubre de 2008 | 3 comentarios
Programacion Web y Tutoriales.