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
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
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

Edición de documentos

  • 1.
    Lenguajes de Internet Atributosal 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 Unví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ínculoscon 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