1. Lenguajes de Internet
Atributos al fondo del documento
Como ya hemos visto podemos asignar la propiedad mas básica para un fondo de documento
HTML como es el color:
background-color: #EABC02;
Esta asignación de valor debe de ir en la etiqueta body para que sea aplicada a todo el documento,
pero además podemos asignar el uso de una imagen de modo que esta se repita en todo el ancho
de nuestro documento, la sintáxis es la siguiente:
background-image: url(../fondo.gif);
background-repeat: repeat-x;
background-attachment: scroll;
Esta clase va dentro de la etiqueta body y responde a las siguientes funciones:
background-image: url(../fondo.gif) : me indica el lugar donde se encuentra la imagen que deseo
utilizar como base de mi fondo
background-repeat: repeat-x : otorga el valor de que mi imagen se repita solo en el eje de las x, es
decir en la horizontal.
background-attachment: scroll : este comportamiento permite que la imagen quede estática en el
fondo de mi documento y solo se pueda desplazar sobre ella como en una capa superior el
contenido del documento.
Patricio Rodríguez M.
Escuela de Diseño | Duoc UC | Sede Viña del Mar
2. Lenguajes de Internet
Vínculos
Un vínculo HTML puede ser básicamente considerado como una referencia a otro recurso. Esta
referencia establece una relación implícita entre el documento y el recurso vinculado. Los vínculos
pueden ser clasificados como visuales (ubicados dentro del contenido del documento) u ocultos
(definiendo información relacional generalizada).
El tag HTML a puede ser usado para insertar vínculos dentro del contenido de un documento. Esto
puede ayudar a los autores a recomendar otros recursos relacionados con el tópico actual, al cual
los usuarios pueden, en la mayoría de los casos, acceder simplemente haciendo un clic en el
contenido vinculado. El contenido vinculado no es otra cosa que el contenido del tag HTML a (o
sea, el pedazo de código ubicado entre los tags de apertura y cierre). Nota que los vínculos son
usualmente graficados de un modo diferente por los navegadores, lo que ayuda a los usuarios a
reconocerlos.
Existen muchas maneras de construir un vínculo, pero básicamente debe constar de, al menos, el
contenido y la dirección del recurso (definida mediante el atributo "href"). En el ejemplo siguiente
definiremos un vínculo básico:
código
El <a href="http://www.htmlquick.com/es/reference/tags/a.html">tag HTML a</a> explicado.
Visualización
El tag HTML a explicado.
La explicación del tag para un vínculo se explica de la siguiente manera:
Un vínculo comienza con <a href= (a = anchor = ancla, href = hyper reference = hiper(texto)-
referencia). Después del signo de igualdad se debe poner la dirección del vínculo. La dirección debe
estar entre comillas. Acto seguido se cierra la etiqueta introductoria con >. A continuación sigue el
texto que el usuario ofrece como texto de referencia (en la mayoría de los navegadores este texto
es de otro color y está a menudo subrayado). En el ejemplo el texto de vínculo es "Referencia".
Después del texto de referencia se pone la etiqueta de cierre </a>.
Patricio Rodríguez M.
Escuela de Diseño | Duoc UC | Sede Viña del Mar
3. Lenguajes de Internet
Vínculos con hojas de Estilo CSS
Una técnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se
podía en HTML, es la definición de estilos en los enlaces, quitandoles el subrayado o hacer enlaces
en la misma página con distintos colores. Esto lo lograbamos antes utilizando alguna aplicación de
javascript.
Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que existen
(visitados, activos, sobre). Utilizaremos la siguiente sintaxis, en la declaración de estilos global de la
hoja de estilos (CSS), de esta manera definimos los atributos de vínculo una sola vez y luego estas
propiedades se replican a cada uno de los vínculos del sitio.
Enlaces normales
A:link {atributos}
Enlaces visitados
A:visited {atributos}
Enlaces activos (Los enlaces están activos en el preciso momento en que se pincha sobre ellos)
A:active {atributos}
Enlaces hover (Cuando el ratón está encima de ellos, solo funciona en iexplorer)
A:hover {atributos}
El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color es
color:tu_color.
Patricio Rodríguez M.
Escuela de Diseño | Duoc UC | Sede Viña del Mar