martes, 12 de febrero de 2013

HTML 7: LINKS

USO DE LOS LINKS: Saltar a otra parte de tu propia web o a otra dirección web.
TIPOS DE LINKS: Texto, Botones o imágenes.

A) USO DE UNA PALABRA COMO LINK:

      A1- SALTAR A OTRA PARTE DE MI WEB (ARCHIVOS): 

     <A HREF="archivo.html"> Palabra utilizada como LINK </A>

    **El archivo.html debe encontrase en el mismo lugar que el archivo al que va a ser unido.

    A2- SALTAR A OTRA WEB DIFERENTE (Dirección URL):

   <A HREF="Dirección URL"> Palabra utilizada como LINK </A>

  **A proviene de "Anchor" (ancla en inglés).

PROBLEMA4: Diseño el código de una página web cuyo color de fondo sea amarillo, tenga como título "LINKS"(centrado, color azul oscuro y ARIAL. En el cuerpo debe incluir  un link al ejemplo1 (colocado a la derecha) y otro a la página web del colegio (centrado).

B) USO DE UN BOTÓN COMO LINK:

En las páginas web podemos incluir botones de acción para redireccionar la navegación a otros puntos (de nuestra propia web o a otra web diferente). Para ello debemos incluir el siguiente código:

<H3 ALIGN="CENTER">
<FORM METHOD="GET" ACTION="Archivo.html o Dirección URL">
<INPUT TYPE="submit" VALUE="
Texto que incluye el botón">
</FORM>
</H3>

Para entender el código, leer la información que viene a continuación:

  B1-  ETIQUETA <FORM> (le dice al buscador que en ese punto se sitúa un objeto y la información que hay  dentro del botón). Le acompañan 2 atributos: METHOD y ACTION.

  B2- ETIQUETA <INPUT> (le dice al buscador lo que debe aparecer físicamente en el buscador).
  Le acompañan 2 atributos: TYPE y VALUE.
**Submit significa "enviar".

PROBLEMA5: Partiendo del PROBLEMA4 añadir un botón cuyo nombre sea "Botón de acción", el cual redireccione la página a la siguiente dirección URL: (http://elprofesoralberto.blogspot.com.es/).


VER DESPUÉS DE TRABAJAR LAS IMÁGENES

B) USO DE UNA IMAGEN COMO LINK:

Delante de la etiqueta <IMG...> se colocará la etiqueta <A HREF......>. Analizar código del ejemplo10.

EJEMPLO10: Guarda la siguiente imagen como (back.gif) y prueba el código que aparece a continuación.

<HTML>
<HEAD>
<TITLE>IMAGE AS A LINK</TITLE>
</HEAD>
<BODY>
<H4 ALIGN="CENTER"><A HREF="Problema1.html"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home"></A> Click on the button to head home</H4><HR>
</BODY>

</HTML>

No hay comentarios:

Publicar un comentario