Presentamos un curso de HTML, desde nivel básico hasta un nivel avanzado el cual os permitirá conocer este lenguaje a fondo, su utilización, y su función en la «Red de redes». Tercera entrega.
<b>Enlaces</b>
Hay 2 tipos de enlaces que se pueden llevar a cabo en una página Web:
– Enlaces internos
– Enlaces externos
El enlace interno, lleva a una página de nuestro site, puede ser a otra página o a una foto, por ejemplo.
El enlace externo, lo que hará es llevarnos a otra página web.
<b>Enlaces externos</b>
La etiqueta para llevar a cabo estos enlaces es <A HREF=https://www.faq-mac.com»> Faq-Mac </A>
Te debes dar cuenta que hay que poner el protocolo al que llamamos a la hora de acceder a una dirección externa. Esto es debido a que podemos acceder a otra cosa que no sean páginas web, como por ejemplo servidores FTP.
Si, en vez de que nuestro enlace sea de texto, queremos que sea una foto la instrucción es la siguiente:
<A HREF = «enlace externo»> <IMG SRC = «la foto que queremos»></A>
Los enlaces nos aparecerán todos subrayados en el caso del texto, y con un pequeño marco de color en el caso de que sea una imagen. El color por defecto es azul, para los enlaces no visitados, y morado para los enlaces visitados.
Si quieres cambiar el color de los enlaces, lo tendrás que llevar a cabo en el BODY y sería una cosa así:
<BODY BGCOLOR=»red» LINK = «El enlace que sea» VLINK = «color del enlace visitado» ALINK = «Color del enlace activo» TEXT =»color del texto» >
Si por el contrario quieres que al pinchar en un enlace se abra una ventana, lo que se denomina un «poup up», lo que tienes que hacer es colocar en la etiqueta del encale esta otra <TARGET = «_blank»>. Quedaría así:
<A HREF = «En enlace que sea» TARGET = «_blank» >
<b>Tablas</b>
Quizá sea la parte más importante de este pequeño manual.
Las funciones de estas tablas, suelen ser principalmente la maquetación de la página mediante la creación de las mismas. En un principio está bien que se aprenda a distribuir el espacio de una página mediante tablas, aunque posteriormente veréis que hay opciones mejores, y utilizareis otras técnicas como las CSS u hojas de estilo.
Es una instrucción doble y las etiquetas correspondientes son <TABLE> </TABLE>
Los parámetros que se le pueden dar a la tabla son:
<WIDTH = «píxels o porcentaje»>
<HEIGHT = «píxels o porcentaje»>
<ALIGN = «left, center, right»> Alineación izquierda, centro o derecha
<BORDER = «píxels» > Anchura del borde de la tabla. Si sólo se quiere maquetar, y no se pretende que la tabla se vea el valor que hay que poner es 0.
<BGCOLOR = «color» > Color de fondo de la tabla.
La división en filas y columnas se hacen con las siguientes etiquetas:
Filas <TR> </TR>
Columnas <TD> </TD>
Para que veáis un ejemplo más gráfico, una tabla de 2 filas por dos columnas, su código sería el siguiente:
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
Por supuesto podemos cambiar el color a una fila o a una columna, con las mismas etiquetas que hemos nombrado antes, pero introducidas dentro de la fila o columna correspondiente.
Un ejemplo sería:
Para dar color a una fila <TR BGCOLOR =»red»> </TR>
Para dar color a una columna <TD BGCOLOR = «yellow»> </TD>
<b>Marcos</b>
Quizá esta se ala parte más complicada de este lenguaje de programación. No porque sea complicada su sintaxis, ni nada parecido, sino por el concepto de qué son los marcos, como se manejan, y como se crean.
Las ideas existentes sobre estos elementos son de todo tipo, hay personas que les gusta trabajar mucho con ellos, otros los ven una pérdida de tiempo, otros no los usan para nada, etc… Una vez que los hayáis probado, opináis vosotros mismos. Como todo tienen sus ventajas y sus inconvenientes.
¿Qué son los marcos?
Son espacios independientes de una página web, los cuales pueden albergar todo tipo de elementos y programación de manera que no haya que repetirla en la navegación de una página, si por ejemplo los dejamos de forma fija en una página.
Un ejemplo de estos marcos, son las clásicas botoneras que se colocan en el lado izquierda de la página Web.
La instrucción para crear un marco es FRAMESET
Los marcos, deben tener como base una página web, y dentro de ella se contendrán los marcos, como páginas web independientes, unas de las otras. Con esto quiero decir, que si colocamos 2 marcos en una página, por ejemplo, lo que tendremos que hacer es crear 3 páginas. Una página por cada marco, y una que contiene todos los marcos. Esto a veces puede liar al principiante, pero calma, que a todo se aprende. El consejo que os damos, que seáis organizados a la hora de crear, y la dificultad disminuirá ostensiblemente.
La página que contiene los marcos, no tendrá BODY. Un ejemplo práctico:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=»25%,*»>
<FRAME SRC=»pag.htm» NAME=»izquierda»>
<FRAME SRC=»pag2.htm» NAME=»derecha»>
</FRAMESET>
</HTML>
Este código tiene como resultado una página web, que contiene 2 marcos. Los marcos estarán divididos por una línea vertical que los delimitará. Los dos marcos se denominan «izquierda» y «derecha» (les he dado este nombre, por poner un ejemplo; el nombre puede variar). Y a su vez, los he enlazado con dos páginas: «pag.htm» y «pag2.htm». En estas dos páginas será donde coloque los contenidos de las páginas web, con su correspondiente diseño y programación. El dato de COLS=»25%,*», significa que la anchura de la columna es del 50% la primera, y del resto la página la segunda (obviamente será un 75%). Esta medida también se puede llevar a cabo con píxels, indicando el número de los mismos.
En el caso que el contenido que coloquemos en los marcos superen las medidas establecidas, nos aparecerán de forma automática, las barras de scroll o barra de desplazamiento. No habrá que decirle nada en la programación para que aparezcan.
Sin embargo si no queremos que aparezcan, corriendo el peligro que nuestro diseño quede recortado, la instrucción a poner es:
SCROLLING=»no»
Por supuesto estos marcos pueden tener imágenes de fondo, y casi todo lo que puedas imaginar. Para colocar una imagen de fondo la instrucción es:
<BODY BGCOLOR=»black» BACKGROUND=»imagen.gif»>
La posición de la imagen siempre será por encima del color de fondo.
Hay una serie de marcos «especiales». Estos son:
_blank -> abre la información solicitada en una ventana nueva
_self -> abre la información en el mismo marco donde le hemos solicitado la información
_top -> lo que hace es eliminar los marcos en la misma ventana en la que estamos trabajando
_parent -> permite subir un nivel en la instrucción FRAMESET, ya que elimina esta última etiqueta
Para mandar el resultado de nuestra demanda a un marco concreto la instrucción es TARGET. Un ejemplo:
<AHREF=»enlace» TARGET=»nombre del marco de destino»>
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.