Guia 2 Texto Imagenss Alineacion
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Guia 2 Texto Imagenss Alineacion as PDF for free.
More details
- Words: 3,523
- Pages: 14
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
TALLER NÚMERO 2 A continuación se hace la entrega de la guía numero 2 que habla sobre la forma que nos permite trabajar con imágenes, aplicar tamaños y alinearlas con respecto al texto y demas contenido en una pagina web. Adicional a ello, se menciona en la presente guía la manera en como podemos trabajar un texto y alinearlo (a su izquierda, derecha y justificado). En este taller se deberán presentar 2 ejercicios: 1. Consultar 4 noticias que hable sobre tecnología relacionada con sistemas, computadores, robótica, inteligencia artificial, realidad virtual o afines con sus respectivas imágenes como se menciono en clases anteriores y aplicar alineación de contenido según como vean conveniente, aplicando los conceptos de formato de texto. 2. Al finalizar la guía, se presenta una actividad para su desarrollo, trata de generarla de la misma forma en como esta planteada. 3. Adelanta los conceptos que mencionan sobre el trabajo hipervínculos, lee, analiza y trata de aplicarlos.
Jesus Recalde Meneses
1
con
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
GUIA DE AULA 3 –INSERCIÓN DE IMÁGENES, ALINEACION DE CONTENIDOS Y CREACION DE HIPERVINCULOS. PROGRAMA: Sistemas y computación MATERIA : programación 1 SEMESTRE: Primeros - Segundos RESPONSABLE: Jesús C. Recalde Meneses
I.H.S
4
T.H
64
ESTANDARES • Se aplicar las etiquetas que me permite insertar imágenes a una página web y texturas para ser aplicadas de fondo a la misma, en cuanto a imágenes, se ubicar las imágenes en cualquier área del documento, con tamaño de alto y ancho. • Identifico y aplico la etiqueta font para darle forma y tamaño al texto de mi pagina web, haciendo uso de las propiedades color, size y face para lograr el aspecto del texto, aplicando correctamente sus valores en cada propiedad. • Aplico en mi texto las etiquetas que me permiten darle al texto los efectos de letra NEGRITA, CURSIVA y SUBRAYADA, haciendo uso de las etiquetas , Y . RECUPERACION DE SABERES Y EXPERIENCIAS PREVIAS En un documento elaborado en Microsoft Word, redactar el siguiente escrito, tal yt como se muestra a continuación, haciendo uso de los formatos de fuente, como tamaño (titulo=36 contenido= 18), color (titulo = rojo y contenido = azul) y tipo de letra (Times New Roman), justificándolo y centrando texto inicial y final y ubicando la imagen tal y como se muestra a continuación: El Caballo Amaestrado Un ladron que rondaba en torno a un campamento militar, robo un hermoso caballo aprovechando la oscuridad de la noche. Por la mañana, cuando se dirigía a la ciudad, paso por el camino un batallón de dragones que estaba de maniobras. Al escuchar los tambores, el caballo escapo y, junto a los de las tropas, fue realizando los fabulosos ejercicios para los que había sido amaestrado. ¡Este caballo es nuestro! Exclamo el capitán de dragones. De lo contrario no sabría realizar los ejercicios. ¿Lo has robado tu? Le pregunto al ladrón. ¡Oh, yo...! Lo compre en la feria a un tratante... Entonces, dime como se llama inmediatamente ese individuo para ir en su busca, pues ya no hay duda que ha sido robado.
Jesus Recalde Meneses
2
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
El ladrón se puso nervioso y no acertaba a articular palabra. Al fin, viéndose descubierto, confeso la verdad. ¡Ya me parecía a mí exclamo el capitán Que este noble animal no podía pertenecer a un rufián como tu! El ladrón fue detenido, con lo que se demuestra que el robo y el engaño rara vez quedan sin castigo. Fin.
INCORPORACION DE NUEVA INFORMACION En la programación html, se trabajan con unas etiquetas especiales para poder lograr y elaborar diseños de forma, colores, formatos de texto y trabajo con imágenes, tanto en el fondo de la página como en el cuerpo del documento, texto y alineación de objetos. En html, existe una etiqueta con propiedades que nos dan definición del color o de la imagen del fondo, así como de los colores de los enlaces activos y de los visitados. El elemento se coloca inmediatamente después del cierre de la marca y, en cualquier caso, dentro de los elemenos ; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento. Si el elemento contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página. La sintaxis correcta del elemento es la siguiente: Contenido del documento La marca se utiliza también para proporcionar al navegador información sobre la disposición de los objetos en el documento, así como para impostar varios atributos de visualización para el documento. A continuación veremos cuáles. BGCOLOR El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es: Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:
Jesus Recalde Meneses
3
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar. BACKGROUND BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg. Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:
La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es: El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por ejemplo, sino que llena todo espacio a disposición. Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo más uniforme posible. Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posible al color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejor usar el color negro para el texto y tonos pastel para el fondo. IMÁGENES. Poner imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así:
, siendo "x" la dirección o la url dónde se encuentra situada la foto.
Jesus Recalde Meneses
4
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
La foto podemos alinearla en la página como queramos mediante "align", utilizando los atributos "left" para alinearla a la izquierda, "right" para alinearla a la derecha, "top" para alinearla arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro. También podemos poner una descripción de la imagen dentro de la misma para que la gente pueda leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo "alt" y lo escribiríamos de la siguiente manera: alt= "x", siendo "x" la descripción que le gente leerá al pasar el ratón por encima. Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera visual. Hay algunos que no lo representan. Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen. Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: "border". Después solo tendrás que definir cuál quieres que sea el grosor del borde. Así las cosas, deberemos escribir este código...
...para poder ver esta preciosa fotografía
Dentro de los valores utilizados en la propiedad “align” pueden considerarse los siguientes:
Jesus Recalde Meneses
5
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
Jesus Recalde Meneses
Valor
Significado
absbottom
inferior absoluta
absmiddle
medio absoluta
baseline
línea de base
bottom
inferior
left
izquierda
middle
medio
right
derecha
texttop
texto superior
top
superior
6
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
PARRAFOS Y ALINEACION DE TEXTO Crear párrafos con
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
TALLER NÚMERO 2 A continuación se hace la entrega de la guía numero 2 que habla sobre la forma que nos permite trabajar con imágenes, aplicar tamaños y alinearlas con respecto al texto y demas contenido en una pagina web. Adicional a ello, se menciona en la presente guía la manera en como podemos trabajar un texto y alinearlo (a su izquierda, derecha y justificado). En este taller se deberán presentar 2 ejercicios: 1. Consultar 4 noticias que hable sobre tecnología relacionada con sistemas, computadores, robótica, inteligencia artificial, realidad virtual o afines con sus respectivas imágenes como se menciono en clases anteriores y aplicar alineación de contenido según como vean conveniente, aplicando los conceptos de formato de texto. 2. Al finalizar la guía, se presenta una actividad para su desarrollo, trata de generarla de la misma forma en como esta planteada. 3. Adelanta los conceptos que mencionan sobre el trabajo hipervínculos, lee, analiza y trata de aplicarlos.
Jesus Recalde Meneses
1
con
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
GUIA DE AULA 3 –INSERCIÓN DE IMÁGENES, ALINEACION DE CONTENIDOS Y CREACION DE HIPERVINCULOS. PROGRAMA: Sistemas y computación MATERIA : programación 1 SEMESTRE: Primeros - Segundos RESPONSABLE: Jesús C. Recalde Meneses
I.H.S
4
T.H
64
ESTANDARES • Se aplicar las etiquetas que me permite insertar imágenes a una página web y texturas para ser aplicadas de fondo a la misma, en cuanto a imágenes, se ubicar las imágenes en cualquier área del documento, con tamaño de alto y ancho. • Identifico y aplico la etiqueta font para darle forma y tamaño al texto de mi pagina web, haciendo uso de las propiedades color, size y face para lograr el aspecto del texto, aplicando correctamente sus valores en cada propiedad. • Aplico en mi texto las etiquetas que me permiten darle al texto los efectos de letra NEGRITA, CURSIVA y SUBRAYADA, haciendo uso de las etiquetas , Y . RECUPERACION DE SABERES Y EXPERIENCIAS PREVIAS En un documento elaborado en Microsoft Word, redactar el siguiente escrito, tal yt como se muestra a continuación, haciendo uso de los formatos de fuente, como tamaño (titulo=36 contenido= 18), color (titulo = rojo y contenido = azul) y tipo de letra (Times New Roman), justificándolo y centrando texto inicial y final y ubicando la imagen tal y como se muestra a continuación: El Caballo Amaestrado Un ladron que rondaba en torno a un campamento militar, robo un hermoso caballo aprovechando la oscuridad de la noche. Por la mañana, cuando se dirigía a la ciudad, paso por el camino un batallón de dragones que estaba de maniobras. Al escuchar los tambores, el caballo escapo y, junto a los de las tropas, fue realizando los fabulosos ejercicios para los que había sido amaestrado. ¡Este caballo es nuestro! Exclamo el capitán de dragones. De lo contrario no sabría realizar los ejercicios. ¿Lo has robado tu? Le pregunto al ladrón. ¡Oh, yo...! Lo compre en la feria a un tratante... Entonces, dime como se llama inmediatamente ese individuo para ir en su busca, pues ya no hay duda que ha sido robado.
Jesus Recalde Meneses
2
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
El ladrón se puso nervioso y no acertaba a articular palabra. Al fin, viéndose descubierto, confeso la verdad. ¡Ya me parecía a mí exclamo el capitán Que este noble animal no podía pertenecer a un rufián como tu! El ladrón fue detenido, con lo que se demuestra que el robo y el engaño rara vez quedan sin castigo. Fin.
INCORPORACION DE NUEVA INFORMACION En la programación html, se trabajan con unas etiquetas especiales para poder lograr y elaborar diseños de forma, colores, formatos de texto y trabajo con imágenes, tanto en el fondo de la página como en el cuerpo del documento, texto y alineación de objetos. En html, existe una etiqueta con propiedades que nos dan definición del color o de la imagen del fondo, así como de los colores de los enlaces activos y de los visitados. El elemento se coloca inmediatamente después del cierre de la marca y, en cualquier caso, dentro de los elemenos ; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento. Si el elemento contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página. La sintaxis correcta del elemento es la siguiente: Contenido del documento La marca se utiliza también para proporcionar al navegador información sobre la disposición de los objetos en el documento, así como para impostar varios atributos de visualización para el documento. A continuación veremos cuáles. BGCOLOR El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es: Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:
Jesus Recalde Meneses
3
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar. BACKGROUND BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg. Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:
La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es: El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por ejemplo, sino que llena todo espacio a disposición. Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo más uniforme posible. Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posible al color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejor usar el color negro para el texto y tonos pastel para el fondo. IMÁGENES. Poner imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así:
Jesus Recalde Meneses
4
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
La foto podemos alinearla en la página como queramos mediante "align", utilizando los atributos "left" para alinearla a la izquierda, "right" para alinearla a la derecha, "top" para alinearla arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro. También podemos poner una descripción de la imagen dentro de la misma para que la gente pueda leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo "alt" y lo escribiríamos de la siguiente manera: alt= "x", siendo "x" la descripción que le gente leerá al pasar el ratón por encima. Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera visual. Hay algunos que no lo representan. Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen. Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: "border". Después solo tendrás que definir cuál quieres que sea el grosor del borde. Así las cosas, deberemos escribir este código...
...para poder ver esta preciosa fotografíaDentro de los valores utilizados en la propiedad “align” pueden considerarse los siguientes:
Jesus Recalde Meneses
5
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
Jesus Recalde Meneses
Valor
Significado
absbottom
inferior absoluta
absmiddle
medio absoluta
baseline
línea de base
bottom
inferior
left
izquierda
middle
medio
right
derecha
texttop
texto superior
top
superior
6
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
PARRAFOS Y ALINEACION DE TEXTO Crear párrafos con
La marca
sirve para definir un nuevo párrafo de texto, indicando al navegador que el mismo debe empezar en una nueva línea y colocarse a la derecha, a la izquierda o centrado. Si no se especifica otra cosa, la marca
alinea el texto por defecto a la izquierda. Para indicar otros tipos de alineación, existen atributos específicos:
Define un párrafo y alinea el texto a la izquierda (left).
Define un párrafo y alinea el texto a la derecha (right).
Define un párrafo y centra el texto (center).
Define un párrafo y justifica el texto (center). Salto de línea con
es una marca de interrupción de línea. Tiene un funcionamiento similar a la marca de párrafo vista anteriormente, pero se diferencia porque no indica el inicio de un nuevo párrafo. Dicho de otro modo, su función es parecida a la de la tecla "enter" del teclado. Se usa sin marca de cierre. Disponer el texto con
y El elemento
se utiliza para alinear horizontalmente el texto a la izquierda, a la derecha o en el centro de la página. El atributo ALIGN es fundamental a este respecto.
Jesus Recalde Meneses
7
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
tiene un funcionamiento idéntico al de
Texto e imágenes a la izquierda
Mueve a la izquierda los elementos contenidos dentro de sus marcas. Texto e imágenes a la derecha
Mueve los elementos a la derecha. Texto e imágenes centrados
Centra los elementos.Jesus Recalde Meneses
7
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
Texto e imágenes justificados
Justifica los elementos. Para un ejemplo práctico, haz clic aquí La marca pero su uso ha sido depreciado por el estándar 4 de HTML. El uso de fue introducido por Netscape, justo cuando el HTML preveía la salida de DIV. La enorme difusión inicial de Netscape ha hecho que el uso de esta marca esté también muy difundido, por lo que todavía los navegadores la utilizan y reconocen (incluido MsIe). El uso de es muy simple:
Texto para centrar Líneas horizontales con
Las líneas horizontales constituyen un instrumento idóneo para dividir partes del documento y hacer más legible el texto. La sintaxis necesaria para su inserción en un documento HTML es la siguiente:
La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos: aling="CENTER": define la alineación de la línea (center, right, left). size="2": define el grosor, en píxel, de la línea. width="400": define la longitud horizontal, en píxel, de la línea. Puede también expresarse en tanto por cien respecto al espacio a disposición: width=80%. color="RED": define el color de la línea. noshade: si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente, produce dicho efecto.
ENLACES Habrás oído muchas veces hablar de hipertextos y de cómo éstos sustenten el web. Un hipertexto es un modo de formatear documentos de manera no secuencial. Para comprender esta característica, podemos pensar en un libro impreso en papel cuya estructura fuera índice, capítulos y glosario. Dicha estructura es secuencial en el sentido de que se lee el índice para
Jesus Recalde Meneses
8
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
pasar después a los capítulos (yendo del primero al último) y acabar con el glosario de términos. Al lector, en este caso, se le marca un recorrido que le lleva a leer el primer capítulo para llegar al último. Con el hipertexto esta estructura secuencial desaparece gracias a los enlaces hipertextuales, que permiten leer el documento sin seguir necesariamente un orden predeterminado. La peculiaridad de saltar de un punto a otro del documento es típica del WWW, donde a menudo siguiendo un documento saltamos de un sitio a otro. Los documentos HTML son hipertextos cuyo funcionamiento se debe, en su mayor parte, a los hiperenlaces o anclajes, cuya marca específica es . El elemento (la A corresponde al inglés Anchor) necesita una marca de apertura y una de cierre y entre ellas podemos insertar texto, imágenes y otros elementos multimedia. Para que funcione, el elemento debe estar asociado a otros atributos. De éstos, el más importante es HREF (abreviatura del inglés Hypertext Reference), que contiene el URL o página donde ir. La sintaxis es: Visita HTMLpoint En el código antes citado, si hacemos clic en el texto "Visita HTMLpoint" (comprendido entre las marcas de apertura y cierre), llegamos al URL http://www.htmlpoint.com indicado por el atributo HREF. Es
posible
sustituir
el
texto
con
una
imagen
obteniendo
un
efecto
idéntico.
HREF puede contener tanto enlaces a recursos externos (como en este caso), como enlaces a otros documentos de la misma dirección. Por ejemplo, si nos encontraramos en la página 1.htm y quisiéramos incluir un enlace a la página 2.htm presente en la misma carpeta, el código correcto sería: Haz clic aquí para llegar a la nueva página TARGET TARGET es un atributo implementado por exigencias relacionadas con la gestión de los marcos. En una página dividida en marcos, este atributo indica en cuáles de ellos debe quedar visualizado el documento. No entraremos aquí en detalles sobre los marcos ya que comentaremos este tema más adelante. Sin embargo, sí nos ocuparemos aquí de otro uso de este atributo: gracias a TARGET
Jesus Recalde Meneses
9
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
podemos cargar una página asociada a HREF en otra ventana del navegador usando la siguiente sintaxis: Visita HTMLpoint Aquí tienes el ejemplo práctico: Visita HTMLpoint El atributo TARGET="_new" indica al navegador que debe cargar el enlace con http://www.htmlpoint.com en una nueva (_new) ventana. El empleo de distintas ventanas para cada enlace es muy útil cuando se manda a recursos externos ya que nos permite no perder al visitante: el usuario de este modo tendrá abiertas dos ventanas y no dejará de tener disponible nuestra página. El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. TITLE Al igual que para el elemento IMG, también en el caso de los enlaces hipertextuales podemos definir un texto con un comentario que se activará cuando pasemos el ratón por encima del enlace. La sintaxis es: Visita HTMLpoint
Jesus Recalde Meneses
10
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
Aquí tienes el ejemplo práctico: Visita HTMLpoint MAILTO (enlace a e-mail) Es posible asimismo incluir enlaces con direcciones de correo electrónico utilizando una sintaxis algo distinta de la indicada para los URL. El código es: Escribe a HTMLpoint Aquí tienes ejemplo práctico: Escribe a HTMLpoint Haciendo clic en este enlace se abre automáticamente tu programa de correo electrónico predefinido con el campo TO ya impostado en [email protected]. Enlaces con partes de un mismo documento Hasta ahora hemos analizado los enlaces con recursos externos o con páginas diversas de un mismo sitio. Sin embargo, podemos asimismo crear enlaces con puntos específicos de un mismo documento gracias al código . En otras palabras, si con los enlaces examinados hasta ahora llegamos a un documento, con llegamos a una parte concreta del documento. A continuación, figura el procedimiento que hay que seguir para crear enlaces con puntos internos del documento: Inserta la marca en el punto del documento al que quieres que se llegue (.ANCORA es un identificador del punto en el que el navegador deberá visualizar la página. Obviamente puedes sustituirlo con otros términos). En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente sintaxis: Visita HTMLpoint La almohadilla (#) indica que se trata de un enlace interno. En este ejemplo se manda a un punto de la misma página, porque a la derecha de la almohadilla aparece el nombre del enlace interno, mientras que a su izquierda no hay nada escrito. Si quisiéramos llegar a un punto concreto de un documento externo, la sintaxis correcta sería: Visita HTMLpoint, donde "nome_file.htm" es el nombre del documento al que hay que llegar, y "ancora" es el punto preciso de dicho documento.
Jesus Recalde Meneses
11
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
TRABAJO PRÁCTICO Elaborar la pagina que se muestra en el grafico a continuación.
La pagina debe tener propiedades de color de texto, tamaño de texto, tipo de letra, alineación de texto (centrado y justificado según como se observe en la figura), imagen de fondo, inserción de imagen (aplicando tamaño y alineación de imagen)
Jesus Recalde Meneses
12
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
CODIFICACION EMPLEADA PARA EL USO DE LA ETIQUETA MARQUEE ETIQUETA MARQUEE ETIQUETA MARQUEE
La etiqueta marquee crea una marquesina, un espacio en la pagina donde el contenido se desplaza, por defecto ocupa todo el ancho del documento y el texto se mueve de derecha a izquierda.
Las líneas horizontales constituyen un instrumento idóneo para dividir partes del documento y hacer más legible el texto. La sintaxis necesaria para su inserción en un documento HTML es la siguiente:
La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos: aling="CENTER": define la alineación de la línea (center, right, left). size="2": define el grosor, en píxel, de la línea. width="400": define la longitud horizontal, en píxel, de la línea. Puede también expresarse en tanto por cien respecto al espacio a disposición: width=80%. color="RED": define el color de la línea. noshade: si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente, produce dicho efecto.
ENLACES
Jesus Recalde Meneses
8
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
pasar después a los capítulos (yendo del primero al último) y acabar con el glosario de términos. Al lector, en este caso, se le marca un recorrido que le lleva a leer el primer capítulo para llegar al último. Con el hipertexto esta estructura secuencial desaparece gracias a los enlaces hipertextuales, que permiten leer el documento sin seguir necesariamente un orden predeterminado. La peculiaridad de saltar de un punto a otro del documento es típica del WWW, donde a menudo siguiendo un documento saltamos de un sitio a otro. Los documentos HTML son hipertextos cuyo funcionamiento se debe, en su mayor parte, a los hiperenlaces o anclajes, cuya marca específica es . El elemento (la A corresponde al inglés Anchor) necesita una marca de apertura y una de cierre y entre ellas podemos insertar texto, imágenes y otros elementos multimedia. Para que funcione, el elemento debe estar asociado a otros atributos. De éstos, el más importante es HREF (abreviatura del inglés Hypertext Reference), que contiene el URL o página donde ir. La sintaxis es: Visita HTMLpoint En el código antes citado, si hacemos clic en el texto "Visita HTMLpoint" (comprendido entre las marcas de apertura y cierre), llegamos al URL http://www.htmlpoint.com indicado por el atributo HREF. Es
posible
sustituir
el
texto
con
una
imagen
obteniendo
un
efecto
idéntico.
HREF puede contener tanto enlaces a recursos externos (como en este caso), como enlaces a otros documentos de la misma dirección. Por ejemplo, si nos encontraramos en la página 1.htm y quisiéramos incluir un enlace a la página 2.htm presente en la misma carpeta, el código correcto sería: Haz clic aquí para llegar a la nueva página TARGET TARGET es un atributo implementado por exigencias relacionadas con la gestión de los marcos. En una página dividida en marcos, este atributo indica en cuáles de ellos debe quedar visualizado el documento. No entraremos aquí en detalles sobre los marcos ya que comentaremos este tema más adelante. Sin embargo, sí nos ocuparemos aquí de otro uso de este atributo: gracias a TARGET
Jesus Recalde Meneses
9
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
podemos cargar una página asociada a HREF en otra ventana del navegador usando la siguiente sintaxis: Visita HTMLpoint Aquí tienes el ejemplo práctico: Visita HTMLpoint El atributo TARGET="_new" indica al navegador que debe cargar el enlace con http://www.htmlpoint.com en una nueva (_new) ventana. El empleo de distintas ventanas para cada enlace es muy útil cuando se manda a recursos externos ya que nos permite no perder al visitante: el usuario de este modo tendrá abiertas dos ventanas y no dejará de tener disponible nuestra página. El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. TITLE Al igual que para el elemento IMG, también en el caso de los enlaces hipertextuales podemos definir un texto con un comentario que se activará cuando pasemos el ratón por encima del enlace. La sintaxis es: Visita HTMLpoint
Jesus Recalde Meneses
10
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
Aquí tienes el ejemplo práctico: Visita HTMLpoint MAILTO (enlace a e-mail) Es posible asimismo incluir enlaces con direcciones de correo electrónico utilizando una sintaxis algo distinta de la indicada para los URL. El código es: Escribe a HTMLpoint Aquí tienes ejemplo práctico: Escribe a HTMLpoint Haciendo clic en este enlace se abre automáticamente tu programa de correo electrónico predefinido con el campo TO ya impostado en [email protected]. Enlaces con partes de un mismo documento Hasta ahora hemos analizado los enlaces con recursos externos o con páginas diversas de un mismo sitio. Sin embargo, podemos asimismo crear enlaces con puntos específicos de un mismo documento gracias al código . En otras palabras, si con los enlaces examinados hasta ahora llegamos a un documento, con llegamos a una parte concreta del documento. A continuación, figura el procedimiento que hay que seguir para crear enlaces con puntos internos del documento: Inserta la marca en el punto del documento al que quieres que se llegue (.ANCORA es un identificador del punto en el que el navegador deberá visualizar la página. Obviamente puedes sustituirlo con otros términos). En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente sintaxis: Visita HTMLpoint La almohadilla (#) indica que se trata de un enlace interno. En este ejemplo se manda a un punto de la misma página, porque a la derecha de la almohadilla aparece el nombre del enlace interno, mientras que a su izquierda no hay nada escrito. Si quisiéramos llegar a un punto concreto de un documento externo, la sintaxis correcta sería: Visita HTMLpoint, donde "nome_file.htm" es el nombre del documento al que hay que llegar, y "ancora" es el punto preciso de dicho documento.
Jesus Recalde Meneses
11
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
TRABAJO PRÁCTICO Elaborar la pagina que se muestra en el grafico a continuación.
La pagina debe tener propiedades de color de texto, tamaño de texto, tipo de letra, alineación de texto (centrado y justificado según como se observe en la figura), imagen de fondo, inserción de imagen (aplicando tamaño y alineación de imagen)
Jesus Recalde Meneses
12
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
CODIFICACION EMPLEADA PARA EL USO DE LA ETIQUETA MARQUEE
La etiqueta marquee crea una marquesina, un espacio en la pagina donde el contenido se desplaza, por defecto ocupa todo el ancho del documento y el texto se mueve de derecha a izquierda.
Ejemplo:
<marquee> ME GUSTA JUGAR PING PONG EN MIS TIEMPOS LIBRES
ATRIBUTO BGCOLOR: Define un color de fondo en el espacio por donde los elementos se moveran, ejemplo:
<marquee bgcolor="#000099"> ESTE ES UN TEXTO EN MARQUESINA CON FONDO AZUL
Jesus Recalde Meneses
13
Jesus Recalde Meneses [email protected]
CENTRO DE ESTUDIOS EMSSANAR CETEM Resolución 0136 de 2007, 26 enero de 2007 Secretara de Educación Municipal FORMACION PARA EL TRABAJO Y DESARROLLO HUMANO
ATRIBUTOS WIDTH Y HEIGHT: Definen el tamaño en su ancho y alto de la marquesina, ejemplo: <marquee bgcolor="#000099" width="400" height="30"> MARQUESINA CON ANCHO DE 400 Y ALTO DE 30
PROPIEDAD DIRECTION: Define la direccion hacia la que se dirigira el contenido en la marquesina, ejemplo
<marquee bgcolor="#000099" direction="right"> TEXTO QUE SE DIRIGE HACIA LA DERECHA
<marquee bgcolor="#000099" direction="up" height="40"> TEXTO QUE SE DIRIGE HACIA ARRIBA
<marquee bgcolor="#000099" direction="down" height="40"> TEXTO QUE SE DIRIGE HACIA ABAJO PROPIEDAD SCROLLAMOUNT: Define la velocidad de desplazamiento del contenido en la marquesina, ejemplo,
<marquee bgcolor="#000099" scrollamount="40"> TEXTO CON MAYOR VELOCIDAD
Jesus Recalde Meneses
14
Related Documents
Guia 2 Texto Imagenss Alineacion
July 2020 14
Guia 2 Texto
July 2020 5
Alineacion Vertical 2.docx
May 2020 7
Alineacion Ruedas
April 2020 8
Texto Guia Fis200.pdf
August 2019 20