SlideShare una empresa de Scribd logo
1 de 3
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

Más contenido relacionado

La actualidad más candente

Tema vinculo e hipervínculo
Tema vinculo e hipervínculoTema vinculo e hipervínculo
Tema vinculo e hipervínculo
aracelyjil
 
Introducción a html5 elementos de la estructura
Introducción a html5 elementos de la estructuraIntroducción a html5 elementos de la estructura
Introducción a html5 elementos de la estructura
mariazeballos
 
Introducción a html5
Introducción a html5Introducción a html5
Introducción a html5
mariazeballos
 

La actualidad más candente (18)

Html
HtmlHtml
Html
 
Mi Primera "Pagina web
Mi Primera "Pagina webMi Primera "Pagina web
Mi Primera "Pagina web
 
Códigos enlaces internos y externos
Códigos enlaces internos y externosCódigos enlaces internos y externos
Códigos enlaces internos y externos
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Crear paginas web
Crear paginas webCrear paginas web
Crear paginas web
 
Tema vinculo e hipervínculo
Tema vinculo e hipervínculoTema vinculo e hipervínculo
Tema vinculo e hipervínculo
 
Introducción a css
Introducción a cssIntroducción a css
Introducción a css
 
Hojas de Estilo
Hojas de EstiloHojas de Estilo
Hojas de Estilo
 
Producto 3
Producto 3 Producto 3
Producto 3
 
Lenguaje html y css ..
Lenguaje html y css ..Lenguaje html y css ..
Lenguaje html y css ..
 
Introducción a html5 elementos de la estructura
Introducción a html5 elementos de la estructuraIntroducción a html5 elementos de la estructura
Introducción a html5 elementos de la estructura
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
 
Selectores css
Selectores cssSelectores css
Selectores css
 
Css
CssCss
Css
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
 
danny
dannydanny
danny
 
Introducción a html5
Introducción a html5Introducción a html5
Introducción a html5
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 

Destacado

Bitacora Personal
Bitacora PersonalBitacora Personal
Bitacora Personal
iConstruye
 

Destacado (12)

Uso de CSS
Uso de CSSUso de CSS
Uso de CSS
 
Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4
 
Examen taller
Examen tallerExamen taller
Examen taller
 
Filezilla
FilezillaFilezilla
Filezilla
 
Bitacora Personal
Bitacora PersonalBitacora Personal
Bitacora Personal
 
Diseño de la información
Diseño de la informaciónDiseño de la información
Diseño de la información
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseño
 
DináMica Espiral
DináMica EspiralDináMica Espiral
DináMica Espiral
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto web
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado Web
 
PiX - Partituras de Interacción
PiX - Partituras de InteracciónPiX - Partituras de Interacción
PiX - Partituras de Interacción
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptuales
 

Similar a Edición de documentos (20)

Investigacion de html y xml
Investigacion de html y xmlInvestigacion de html y xml
Investigacion de html y xml
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Slideshare
SlideshareSlideshare
Slideshare
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Esilo css
Esilo cssEsilo css
Esilo css
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle noguera
 
HTML
HTMLHTML
HTML
 
Html y HTML5
Html y HTML5Html y HTML5
Html y HTML5
 
Produccion de material educ. diapositivas html
Produccion de material educ. diapositivas htmlProduccion de material educ. diapositivas html
Produccion de material educ. diapositivas html
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 
Manual de Introducción a CSS3
Manual de Introducción a CSS3Manual de Introducción a CSS3
Manual de Introducción a CSS3
 
Lenguajes de programacion
Lenguajes de programacionLenguajes de programacion
Lenguajes de programacion
 
CSS
CSSCSS
CSS
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 

Más de iConstruye

Examen edicion
Examen edicionExamen edicion
Examen edicion
iConstruye
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición Multimedia
iConstruye
 

Más de iConstruye (20)

Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion Graphics
 
Examen imagen
Examen imagenExamen imagen
Examen imagen
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrpp
 
Examen edicion
Examen edicionExamen edicion
Examen edicion
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesign
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6
 
Webhost
WebhostWebhost
Webhost
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la web
 
Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición Multimedia
 
Temario examen
Temario examenTemario examen
Temario examen
 
Examen
ExamenExamen
Examen
 
Herramientas para diseño web
Herramientas para diseño webHerramientas para diseño web
Herramientas para diseño web
 
Modelos de representación para web
Modelos de representación para webModelos de representación para web
Modelos de representación para web
 
Nociones básicas de posicionamiento con CSS
Nociones básicas de posicionamiento con CSSNociones básicas de posicionamiento con CSS
Nociones básicas de posicionamiento con CSS
 
Imágenes para la web
Imágenes para la webImágenes para la web
Imágenes para la web
 
Orden y jerarquía de la información
Orden y jerarquía de la informaciónOrden y jerarquía de la información
Orden y jerarquía de la información
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseño
 

Último

PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 

Último (20)

CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo  Nivel 3 Ficha  Lectura pptjsbdkksAnexo  Nivel 3 Ficha  Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkks
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Manual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfManual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdf
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 

Edición de documentos

  • 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