Pagina Web Definiciones

Introducción:

En esta investigación se muestran diversos atributos que se le pueden ser agregados a una página web como son los hipervínculos, tablas, imágenes, marcos, elementos del formulario, elementos multimedia y plantillas, todos estos como puntos principales a desarrollar en nuestro trabajo.

Desarrollo:

1. Crear Hipervínculos

Concepto de enlace o hipervínculo

Una de las mayores virtudes del lenguaje HTML, y la que le da su nombre, es la posibilidad de crear enlaces o hipervínculos que relacionan diferentes páginas entre sí. HTML son las siglas de HiperText Mark-up Language, que podría traducirse como lenguaje de etiquetas hipertexto.

Los enlaces, vínculos o hipervínculos (también conocidos como links, su denominación inglesa) son simplemente caminos hacia otras páginas de la world wide web. Su funcionamiento es muy simple: el texto que queramos permita ir a otra página se marca de forma especial (ya veremos cómo). A partir de entonces, en la página aparecerá resaltado (originalmente, mediante color azul y subrayado), y cuando el ratón se mueva sobre dicho texto, cambiara el puntero para indicar que ahí tenemos un enlace. Al pulsar sobre él, instruimos al navegador para abrir la página a la que hace referencia.

El resultado es la vinculación de nuestra página y la página a la que hace referencia el enlace. De esta forma, se va creando entre las páginas de diferentes sitios una maraña de hiperenlaces, que da nombre a la world wide web (tela de araña mundial).

Cómo crear un hipervínculo:

Para programar HTML, los hipervínculos se indican con la etiqueta <a>.

Dicha etiqueta <a> deberá incluir el atributo href para especificar el destino del hipervínculo, y luego, como todas las etiquetas de HTML, se deberá cerrar de la manera </a> para indicar el fin del texto o de la imagen que contiene el hipervínculo.

Entonces, el hipervínculo en HTML luce de la siguiente manera:

<a href=”dirección del sitio”>Texto del Hipervínculo</a>

Ejemplo:

<a href=www.basekit.com.mx>BaseKit México</a>

Hipervínculos dentro de una misma página:

Para crear un hipervínculo que vaya a una sección dentro de la misma página, debemos hacer uso del atributo “id”. El título de la sección a la que queramos ir deberá tener este atributo para que después podamos crear un hipervínculo hacia ella.

Por ejemplo, el título luciría así:

<h2 id="conclusion">Conclusión del Debate</h2>

Y después, el hipervínculo hacia dicha sección luciría de esta manera:

<p>Vaya a la sección <a href="#conclusion">Conclusión del Debate</a> para leer las conclusiones y comentarios finales.

Hipervínculos con imágenes:

Para crear un hipervínculo en una imagen, de manera que cuando la gente de click a una imagen se le envíe a algún sitio, simplemente hay que incluir la imagen dentro de la etiqueta <a>, como en el siguiente ejemplo:

Acá tenemos una imagen sin hipervínculo:

<img src="pastel.jpg" alt="Pasteles" width="150" height="125" />

Ahora, si queremos que esta imagen tenga un hipervínculo, lo debemos especificar así:

<a href="pasteles.html"> <img src="pastel.jpg" alt="Pasteles" width="150" height="125" /> </a>

No olvides verificar que el hipervínculo funciona bien y que lleva a la página o a la sección a la que quieres que lleve.

2. Insertar Imágenes

Código Html para insertar una imagen

Para insertar una imagen, se coloca el siguiente código:

<img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion de la imagen">

Vamos a ver lo que hay dentro de ese código.

Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen pertenece a, o está guardada en tu espacio web) o absoluta (siempre que la imagen la estés obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas, no lo olvides.

Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo válido es ponerlo junto, así "100px". Estas cantidades las coloca normalmente el Html-Kit automáticamente y si tú las cambias seguramente la imagen se vea desvirtuada y perderá definición. Si necesitas cambiar el tamaño mejor hacerlo con un programa gráfico y luego la vuelves a pegar en la página.

En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la página fallara, el resto de los elementos como párrafos etc, ocuparían el lugar de esa imagen. Sería como si no existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se muestra, el navegador dejará un rectángulo con esas medidas en blanco, respetando la estructura de la web, sin mover nada.

Por último vemos un alt="........". No es obligatorio, pero para tener un código válido es necesario poner ese alt y además escribir entre las comillas una breve descripción de la imagen.

3. Modificar tablas

Para insertar una tabla en una página de internet debes incluir el código que aparece a continuación. Este puede ser modificado para obtener diferentes resultados y estilos de tablas.

Código:

<table border=1><td>Aqui va el contenido de la tabla, texto, imágenes, etc.</td></table>

Resultado:

Aquí va el contenido de la tabla, texto, imágenes etc.

El número uno se refiere al tamaño del borde de la tabla. Si aumentas el número el borde será más grueso y si escribes 0 la tabla no mostrará borde alguno.

Además de una simple tabla podemos adjudicar varios códigos para obtener una tabla dividida en columnas y encasillados. Veamos los siguientes ejemplos.

Código:

<table border=1><td>Columna #1</td><td>Columna #2</td></table>

Resultado:

Columna #1 Columna #2

Fíjate

...