Professional Documents
Culture Documents
jesusrecalde@gmail.com
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.
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 <b>,<i> Y <u>.
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.
<body></body>
<BODY>
Contenido del documento
</BODY>
<BODY BGCOLOR="red">
Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo
(red) se sustituye de esta manera:
<BODY BGCOLOR="#ff0000">
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:
<BODY BACKGROUND="sfondo.gif">
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í: <img
src="x">, siendo "x" la dirección o la url dónde se encuentra situada la foto.
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.
Valor Significado
bottom inferior
left izquierda
middle medio
right derecha
top superior
La marca <P> 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 <P> alinea el texto por defecto a la izquierda. Para
indicar otros tipos de alineación, existen atributos específicos:
<P ALIGN=left>
Define un párrafo y alinea el texto a la izquierda (left).
<P ALIGN=right>
Define un párrafo y alinea el texto a la derecha (right).
<P ALIGN=center>
Define un párrafo y centra el texto (center).
<P ALIGN=justify>
Define un párrafo y justifica el texto (center).
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:
noshade: si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente,
produce dicho efecto.
ENLACES <HREF>
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
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 <A>.
<A HREF>
El elemento <A> (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 <A> 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:
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.
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:
TARGET
Sin embargo, sí nos ocuparemos aquí de otro uso de este atributo: gracias a TARGET
podemos cargar una página asociada a HREF en otra ventana del navegador usando la
siguiente sintaxis:
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:
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto
de marcos padre.
_self:
_top:
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:
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:
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 <A NAME="ancora">. En otras palabras, si con los
enlaces examinados hasta ahora llegamos a un documento, con <A NAME> 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 <A NAME="ancora"> 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: <A HREF="#ancora">Visita HTMLpoint</A>
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: <A
HREF="nome_file.htm#ancora">Visita HTMLpoint</A>, donde "nome_file.htm" es el
nombre del documento al que hay que llegar, y "ancora" es el punto preciso de dicho
documento.
TRABAJO PRÁCTICO
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)
<html>
<head>
<title>
ETIQUETA MARQUEE
</title>
</head>
<body background="imagenes/agua.jpg">
<center>
<font color="#000099" size="5">
<b>
<i>
ETIQUETA MARQUEE
</i>
</b>
</font>
</center>
<br>
<b>
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.
<p>
Ejemplo:
<br>
<marquee>
<i><u>ME GUSTA JUGAR PING PONG EN MIS TIEMPOS
LIBRES</u></i>
</marquee>
<p>
ATRIBUTO BGCOLOR: Define un color de fondo
en el espacio por donde los elementos se
moveran, ejemplo:
<p>
<marquee bgcolor="#000099">
<font color="#FFFFCC">
ESTE ES UN TEXTO EN MARQUESINA CON FONDO
AZUL
</font>
</marquee>
<p>
ATRIBUTOS WIDTH Y HEIGHT: Definen el tamaño
en su ancho y alto de la marquesina, ejemplo:
<marquee bgcolor="#000099" width="400" height="30">
<font color="#FFFFCC">
MARQUESINA CON ANCHO DE 400 Y ALTO DE 30
</font>
</marquee>
<p>
PROPIEDAD DIRECTION: Define la direccion hacia la que
se dirigira el contenido en la marquesina, ejemplo<p>
</body>
</html>