Curso htm profe. andres l

http://clasewebhtml.blogspot.com/

Clase No. 1
INTRODUCCION AL CURSO
El lenguaje HTML (Hiper Text Markup Languaje), es el formato estándar que se
utiliza para crear e interpretar documentos de texto e imágenes, conocidos
popularmente como páginas Web. Estos documentos, que en realidad son archivos de
texto plano, están compuestos básicamente por:
• La información que el usuario ve en la pantalla cuando accede a una página, y
códigos (tags o etiquetas), transparentes para el usuario, que son interpretados por el
programa del navegador o browser y que controlan la manera como la información es
mostrada en la pantalla.
• El objeto del presente módulo es aprender a utilizar de manera correcta, algunas
de esas etiquetas, con el fin de crear y modificar páginas mediante el uso de cualquier
editor de texto.
El siguiente ejemplo sencillo, contiene lo necesario para crear una página que desplegará
en el explorador (browser o navegador), la frase “Bienvenido al curso de HTML”
<HTML>
<HEAD>
<META NAME=“AUTOR” CONTENT=“Andrés Domínguez”
</HEAD>
<BODY>
Bienvenido al curso de HTML
</BODY>
</HTML>
Las palabras encerradas entre los símbolos menor y mayor (< >), son etiquetas de HTML
y las frases dentro de éstas, constituyen la información que realmente vera el usuario.
Todo archivo HTML comienza siempre con la etiqueta <HTML> y finaliza con la etiqueta
</HTML>. La estructura de una página está compuesta básicamente por dos secciones:
el encabezado (HEAD), y el cuerpo (BODY), delimitados por las
etiquetas<HEAD> y </HEAD>, <BODY> Y </BODY> respectivamente.
El cuerpo contiene toda la información de la página que será desplegada por el browser
al accederla, mientras que el encabezado cuyo contenido generalmente no es visible, se
utiliza principalmente para colocar en él, además del titulo de la página, scripts y otras
etiquetas especiales en la que se consignan datos relacionados con el autor, palabras
claves sobre contenido, descripción, etc.
En un documento HTML se pueden incluir un sin número de etiquetas, que controlan la
manera como la información será presentada por el explorador. Existen etiquetas para
formatear la presentación del texto y las imágenes, otras indican al sistema cómo
responder a eventos generados por el usuario, tales como hacer clic con el ratón o
desplazarlo sobre una imagen, texto o ciertas áreas sensibles.
También hay etiquetas para organizar la información dentro tablas, dividir la pantalla en
secciones o ventanas independientes, etc. Una de las más importantes es la etiqueta que
le permite al usuario “navegar” entre documentos, simplemente dando clic sobre los
denominados “vínculos” (links), sin importar dónde residen las páginas a las cuales
apuntan.
El explorador también conocido como navegador o browser, es el software que permite
acceder, interpretar y visualizar documentos HTML ubicados en cualquier sitio cuya

dirección es conocida. El navegador interpreta las etiquetas y muestra el documento en
pantalla. La principal ventaja del formato HTML es su portabilidad. Es decir, los
exploradores son capaces de interpretar y mostrar la información contenida en una
página Web, independientemente de la plataforma en que se usen (IBM, MAC, UNIX,
LINUX).
QUÉ SE NECESITA PARA CREAR PÁGINAS WEB
Dado que las páginas Web son simples documentos de texto plano, lo único que se
requiere para su creación es un editor de texto. Aunque existen muchas potentes
herramientas para la creación y edición gráfica de documentos HTML, el bloc de notas
(notepad), o cualquier otro editor de textos sirve para nuestro propósito, mientras que
para visualizar documentos HTML, debemos disponer de un explorador como Netscape
Navigator, Mozilla FireFox o Microsoft Internet Explorer, que son los más populares en el
mercado.
LA PRIMERA PÁGINA
Para efectos de organización, les voy a pedir que creen en su disco duro, una carpeta
que se llame cursohtml, en donde guardaremos todos nuestros ejemplos:
Para crear ésta y todas las páginas propuestas, se utilizará el Block de Notas, ábralo y
escriba el siguiente texto.
<HTML>
<HEAD>
<META NAME=“AUTOR” CONTENT=“Andrés Domínguez”>
< META NAME=“FECHA” CONTENT=“30/11/2009”>
</HEAD>
<BODY>
Esta es mi primer página Web
No esta mal para ser la primera vez…
</BODY>
</HEAD>
Guarda este archivo como uno.html en la carpeta cursohtml.Y luego cuélguelo en la
plataforma en tareas, con:
• Nombres completos.
Publicado por Andrés Domínguez Sánchez en 13:11 0 comentarios
Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con Facebook
Etiquetas: crear paginas web, introducción al html, web

Clase No. 2
ETIQUETAS PARA TEXTO
Las etiquetas de texto como su nombre lo indica, permiten cambiar
los atributos y la manera como el texto se verá dentro de la página.
Se puede afectar todo un párrafo, una línea, una palabra o caracteres
individuales simplemente encerrándolos dentro de las etiquetas
apropiadas. Algunos atributos del texto pueden ser controlados por
diferentes etiquetas, obteniendo resultados similares.
RESALTAR LINEAS DE TEXTO
Esta etiqueta, conocida como etiqueta de encabezado (heading), es
utilizada con frecuencia para escribir títulos y subtítulos, dado que
permite mostrar texto en negrillas con seis tamaños diferentes,
dependiendo del valor asignado al atributo X.
Para ver su funcionalidad, escriba las siguientes líneas en un nuevo
archivo:
Una vez guardado el archivo, ábralo en el explorador y observe los
resultados.
La etiqueta <HX> tiene otro atributo que permite controlar la
alineación del texto.
Éste se puede alinear al centro (ALIGN=“CENTER”), a la derecha
(ALIGN=“RIGHT”), a la izquierda, que es la alineación que toma
por defecto cuando el atributo ALIGN es omitido, o justificado
(ALIGN=“JUSTIFY”).

Por ejemplo,
Mostrará la palabra “Texto” alineada al centro de la página, mientras
que
Alineará “texto” a la derecha y
Presentará “Texto” alineada a la izquierda. Lo mismo ocurrirá si se
comete un error al escribir el valor del atributo ALIGN. Veamos un
par de ejemplos:
En general, se puede afirmar que cuando la sintaxis de una etiqueta
no es la correcta, el navegador no generará error o advertencia
alguna al respecto, ni dejará de mostrar la página, simplemente los
resultados no serán los esperados.
Video de la etiqueta H
ETIQUETA 
Esta etiqueta permite controlar tres atributos del texto que se
encuentra encerrado entre ellas: su tamaño (SIZE), su color
(COLOR) y el tipo de fuente (FACE). Por ejemplo, la siguientes líneas
escritas dentro del cuerpo de un nuevo archivo, mostrarán texto con
cuatro tamaños de fuente diferentes:
La sintaxis completa de la etiqueta es la siguiente:


Donde X corresponde como ya se vio, al tamaño de la fuente que
admite valores positivos y negativos.
El atributo COLOR pude ser un valor hexadecimal o el nombre en
inglés de un color especifico. Aunque en teoría se pueden mostrar
millones de colores, existen 16 de ellos que componen la denominada
“paleta Segura”. El uso de cualquiera de esos colores, garantiza que
las páginas podrán ser vistas tal como fueron diseñadas, aun cuando
se utilice para su visualización un monitor con la configuración más
pobre. La tabla siguiente muestra los valores hexadecimales
(códigos) y nombres de los 16 colores mencionados.

Finalmente, Nombre de la fuente es el atributo correspondiente a
los nombres de las fuentes disponibles en el sistema, tales
como: Arial, Helvética, Times New Román, Arial Black,
Chalesworth, etc.
Como ejemplo, se propone escribir las siguientes líneas dentro del
cuerpo de una nueva página:
Cuyo resultado será similar al de la siguiente gráfica:
Video de las etiquetas
ETIQUETA <PRE> </PRE>
HTML sólo reconoce y muestra un espacio en blanco entre palabras,
aunque se hayan escrito dos o más. Tampoco reconocerá tabuladores
o retornos de carro. Es decir, si dentro del cuerpo de un archivo HTML
se escribe el siguiente texto:

Al abrir la página en el explorador se obtendrá:
Si se quiere que el texto se va en la página tal como fue escrito, éste
debe encerrarse dentro de las
etiquetas <PRE> y </PRE> (performated), que forzarán al explorador
a mostrar todos los espacios, tabuladores y retornos de carro que
encuentre.
ETIQUETA Y 
La etiqueta permite forzar un salto de línea dentro de un texto.
Observe que esta etiqueta no se cierra con , razón por la que
se le conoce como etiqueta abierta. es otra etiqueta que
puede utilizarse abierta o cerrada. Si se usa de la primera forma,
iniciará un nuevo párrafo dejando una línea en blanco, si por el
contrario se cierra permite alinear el nuevo párrafo a la
derecha, en el centro, a la izquierda o justificado, dependiendo del
valor asignado al parámetro ALIGN. A continuación se muestran
algunos ejemplos:
Ejemplo Resultado
Texto con salto de línea Texto con salto de línea

En este ejemplo iniciaremos
aquí un nuevo párrafo
En este ejemplo iniciaremos aquí
un nuevo párrafo
 alineado a la
derecha
alineado a la derecha
 alineado a la
izquierda
alineado a la izquierda
 alineado aL
centro
alineado aL centro
ETIQUETA <HR>
Esta etiqueta “abierta”, dibuja una línea horizontal (Horizontal
Rule), con alineación, tamaño y ancho variables. Se utiliza con
frecuencia para separar secciones de contenido. Su sintaxis se ilustra
en las siguientes líneas:
OTRAS ETIQUETAS PARA TEXTO
La siguiente tabla muestra otras etiquetas muy útiles a la hora de
trabajar con texto y los efectos que se conseguirán:
Ejemplo Efecto Resultado
<CENTER>Texto</CENTER> Texto centrado Texto
Texto Texto en negrilla Texto
Texto Texto en cursiva Texto
Texto Texto subrayado Texto
Texto Texto Texto en superíndices TextoTexto
Texto Texto Texto en subíndices TextoTexto
<S>Texto</S> Texto tachado Texto
COMENTARIOS
En HTML, como en cualquier otro lenguaje existe una forma de
escribir comentarios dentro del código. Todo lo escrito dentro de los
signos

<!—y --> será ignorado por el navegador sin que se muestre cuando
la página sea visualizado.
ACTIVIDAD
• Diseña una página Web, para observar cada uno de los 6 estilos
predefinidos, alineando el texto a la izquierda, centro, derecha,
alternativamente, dejando una línea en blanco entre cada línea de
texto. Guarda esta página como dos.html.
• Diseña una página Web (recuerda toda la estructura), en la que
pongas tus datos personales, nombres, edad, domicilio, profesión,
pasatiempos. Resaltando cada uno de estos tópicos con un color y un
estilo de letra diferente, guarda esta página como tres.html.
• Diseña una página Web, en la que pongas un cuento,
resaltando cada uno de los tópicos vistos, guarda este documento
como cuatro.html.
• Comprime estos tres archivos y los envías en uno solo.
Etiquetas: crear paginas web, html, paginas, web

Clase No. 3
LA ETIQUETA BODY <BODY>
Hasta ahora se ha trabajado con páginas cuyos colores son: blanco para el fondo y
negro para el texto escrito en ellas. Estos son los colores que HTML toma por
defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos,
permite entre otras cosas cambiar o establecer: el color del texto, un color o una
imagen de fondo y los colores de los enlaces que tendrá la página. La siguiente es la
sintaxis completa de esta etiqueta:
nombre_imagen se refiere al nombre, o mejor la ubicación del archivo
de una imagen que se quiere aparezca como fondo de la página, color_fondo
, color_texto, color_enlace, color_enlace_V y color_enlace_A corresponden a los
códigos o los nombres de los colores para el fondo de la página, el texto de la
información, el texto de los enlaces no visitados, el texto de los enlaces visitados y
el texto de los enlaces activos respectivamente. El manejo de estos tres últimos
se verá más adelante en el capítulo correspondiente a enlaces.
El siguiente ejemplo desplegará una página con fondo negro (black) y texto de
color lima (#00ff00):


UBICACIÓN DE ARCHIVOS
Antes de comenzar a trabajar con imágenes, es indispensable entender el concepto
de la ubicación relativa de archivos. Existen en HTML algunos atributos que indican
la ruta o el camino donde se encuentran ubicados ciertos elementos y no un valor
simple como un número o el código de un color. Tal es el caso del atributo
background cuyo valor hace referencia a la ubicación y el nombre de una imagen
que se quiere aparezca como fondo en la página (BACKGROUND=”ruta”).
Cualquiera que sea el sistema operativo que se utilice, los programas, aplicaci
ones, archivos y documentos se guardan físicamente en una unidad de almace
namiento, dentro de una jerarquía de directorios y subdirectorios conocida como
Sistema de Archivos.
Un directorio puede contener archivos y otros directorios denominados
subdirectorios. Dependiendo de la ubicación de las páginas y las imágenes u
otros objetos dentro del sistema de archivos, el valor o ruta de los atributos,
cambia. Existen tres posibilidades (ver gráfica de Ejemplo de sistema de Archivos):
1. La página y la imagen se encuentra dentro del mismo subdirect
orio (ejemplos: Página1 e Imagen1, Página 2 e Imagen 2 y Página
3 e Imagen 3).
2. La imagen se encuentra en un subdirectorio ubicado en el mismo
nivel o por debajo del subdirectorio que contiene la página (ejemplos:
Página 3 e Imagen 1, Página 3 e Imagen 2 y Página 1 e Imagen 2).
3. La imagen se encuentra en un subdirectorio arriba del que contiene
la página (ejemplos: Página 2 e Imagen 1, Página 2 e Imagen3 y Página
1 e Imagen 3).


El ejemplo más sencillo se tiene cuando, tanto la imagen de fondo como la página
residen en el mismo directorio o subdirectorio. En este caso la ruta se reduce al
nombre de la imagen:
Si la imagen de fondo reside en un subdirectorio al mismo nivel o por debajo del
directorio que contiene la página, la ruta además del nombre de la imagen
debe estar compuesta por el o los nombres de los subdirectorios que la
contienen, separados por un slash (/). Si por ejemplo, se desea que
“Imagen 2” aparezca como fondo de la Página 3, la ruta será: “D2/D3/Imagen 2”,
con lo que la etiqueta BODY será similar a:
La última posibilidad que existe es que la imagen se encuentre ubicada uno o mas


niveles por encima del directorio que contiene la página. En este caso la ruta estará
compuesta por el nombre de la imagen, precedida por un conjunto de dos puntos y
un slash (../) por cada nivel que sea necesario subir para alcanzar el directorio
donde está ubicada la imagen. Con los siguientes ejemplos se ilustra esta situación:
La “Imagen 1”, ubicada un nivel por encima debe aparecer como fondo de la
“Pagina 2” . La ruta será: “../Imagen 1” y la etiqueta BODY debe ser:
Ahora se quiere que “Imagen 3” sea el fondo de la “Pagina 2”:


Es importante mencionar que HTML soporta sólo ciertos formatos de
imagen. Básicamente se pueden mostrar imágenes creadas en formato GIF y JPG.
Las últimas versiones de navegadores soportan el formato PNG de MACROMEDIA ®.
Etiquetas: body, web

Clase No. 4
LISTAS
En ocasiones es necesario presentar información de manera ordenada
mediante listas con viñetas o listas numeradas. Con HTML se pueden crear tres
de estos tipos de listados: listas ordenadas o numeradas, listas con viñetas o listas
de definición, cada una de ellas con sus variaciones.
LISTA ORDENADA <OL>
Considere el caso en el que debe presentar la lista numerada de algunas de
las dependencias de la empresa donde trabaja, comenzando con un número en
particular:
4. Dirección de Informática
5. Planeación
6. Vicepresidencia Financiera
7. Comunicaciones
El listado anterior se consigue en HTML mediante el uso de las
etiquetas <OL> (Ordered List) y <LI> (List Item):
<OL TYPE ="1" START ="4">
<LI>Dirección de Informática
<LI>Planeación
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>
En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista será
numérica (el número entre comillas puede ser cualquier entero y el resultado será
el mismo), mientras que el atributo START ="4" hace que el primer elemento
del listado esté precedido por el número 4, el segundo por el número
sucesivamente. Sí no se incluye ninguno de los dos atributos anteriores,
el explorador desplegará la misma lista pero comenzando el listado en 1.
Sí se quiere presentar el mismo listado pero de la siguiente manera:
A. Dirección de Informática
B. Planeación
C. Vicepresidencia Financiera
D. Comunicaciones
Bastará con cambiar el 1 del atributo TYPE por una A y el 4 del
atributo START por un 1, o simplemente omitir éste último:
<OL TYPE = "A" START ="1">
<LI>Dirección de Informática
<LI>Planeación

<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>
EJERCICIO PROPUESTO
Cambie la A mayúscula del tributo TYPE por una i, luego por una I y finalmente
por una a y observe los resultados.
LISTA CON VIÑETAS <UL>
Sí en lugar de una letra o un número precediendo los ítems del listado,
lo que se quiere es que aparezca una viñeta, se debe entonces utilizar la
etiqueta <UL> (Unorderd List) de la siguiente manera:
<UL TYPE = "circle">
<LI> Ítem 1
<LI> Ítem 2
<LI> Ítem 3
<LI> Ítem 4
</UL>
lo que producirá una lista similar a:
o Ítem 1
o Ítem 2
o Ítem 3
o Ítem 4
La etiqueta <UL> únicamente tiene el atributo TYPE, que se refiere al tipo
de viñeta que presentará. Pruebe omitiendo este atributo o cambiando circle por
disc o por square.
LISTA DE DEFINICIÓN <DL>
Esta etiqueta como su nombre lo indica, permite desplegar listas de
palabras con su correspondiente definición. Se utiliza típicamente en la
construcción deglosarios. Considere por ejemplo, la siguiente lista de términos que
definen las funciones de algunas dependencias de la empresa:
PLANEACIÓN:
Encargada de ejecutar y revisar los planes de inversión.
INFORMÁTICA:
Encargada de diseñar, implementar y ejecutar los planes de
desarrollo informático en la empresa.
RECURSOS HUMANOS:
Encargada de los asuntos relacionados con el recurso humano.

El listado anterior se comienza y termina con las etiquetas <DL> y </DL>.
Cada uno de los términos a definir se precede con la etiqueta <DT>, mientras
que a la definición en sí, se le antepone la etiqueta <DD>:
<DL>
<DT>PLANEACIÓN:
<DD>Encargada de ejecutar y revisar los planes de inversión.<DT>INFORMÁTICA:
<DD>Encargada de diseñar, implementar y ejecutar los planes de desarrollo
informático
en la empresa.
<DT>RECURSOS HUMANOS.
<DD>Encargada de los asuntos relacionados con el recurso humano.
</DL>


Etiquetas: codigo html, crear paginas web, Listas ordenasa y desordenadas en html

Clase No. 5
TABLAS
Una tabla está compuesta por columnas y filas que conforman un conjunto
de celdas que permiten mostrar información de manera organizada. En una celda
se
puede incluir indistintamente texto, imágenes o cualquier otro elemento soportado
por HTML.
Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos
atributos principales son:
WIDTH ="95%" Ancho de la tabla con respecto al tamaño de la página. En
este caso la tabla ocupará el 95%; oWIDTH ="600", con lo que la tabla tendrá
un ancho de 600 píxeles.
BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla.
CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas
CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su
contenido.
BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul.
En la etiqueta <TABLE> se definen las características principales de la tabla, pero no se dice
de cuántas filas y columnas estará compuesta ni cuál será su contenido. En realidad
existen tres etiquetas adicionales, que colocadas adecuadamente dentro

de <TABLE> y </TABLE>permiten controlar el número de filas y columnas, además
de otras características:
<TR> Se utiliza para definir una nueva fila.
<TD> Permite agregar una celda o columna dentro de una fila
<TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella será
escrito en negrilla.
Lo anterior significa que una tabla en HTML tendrá tantas filas como
etiquetas <TR> contenga y una fila estará compuesta por un número de
celdas igual al de etiquetas <TD> o <TH> que la misma tenga.
Las siguientes líneas ilustran el uso de estas etiquetas para crear una
tabla sencilla, compuesta por dos filas y dos columnas:
Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el
color del fondo de la celda (BGCOLOR=”color”), la alineación del texto o de la
imagen dentro de la celda (ALIGN=”alineación”), y que funcionan de manera
idéntica a los utilizados con las etiquetas <H#>, y . Otro de los
atributos importante de estas dos etiquetas, es el que permite indicar el número de
columnas o de filas que ocupará una celda en particular. Suponga que se
debe crear una tabla similar a la siguiente:
TÍTULO DE LA TABLA
Observe que la tabla está compuesta por dos filas y dos columnas, y que lacelda
del título ocupa dos columnas. Cuando este es el caso, es decir que una celda está
distribuida en dos o mas columnas o filas, se utiliza para su definición el Atributo
COLSPAN=”X” o ROWSPAN=”X” respectivamente. X obviamente corresponde al
número de columnas o filas sobre las que se distribuirá la celda.
Para crear la tabla que se muestra arriba, se debe escribir:


Y si lo que se desea es crear una tabla como la siguiente:
Se debe escribir:
EJERCICIO PROPUESTO


Etiquetas: creacion de tablas con html

Clase No. 6
IMÁGENES
Las páginas Web además de mostrar texto, son capaces de
desplegar imágenes que han de ser creadas en cualquiera de los formatos
aceptados: GIF, JPG o PNG. Una imagen con extensión BMP, CDR, PCX o cualquier
otro formato diferente no será exhibida en el explorador y en su lugar se mostrará
uno de los siguientes iconos, dependiendo del navegador que se tenga:
Una imagen puede ubicarse en cualquier parte de la página, incluso puede ocupar
el lugar de un carácter. Para insertar imágenes lo único que se necesita conocer es
la ruta y el nombre del archivo que la contiene. La etiqueta <IMG> junto con su
atributo SRC ="ruta" permiten mostrar una imagen:
<IMG SRC ="logo.gif">
El ejemplo anterior mostrará la imagen logo.gif ubicada en el mismo
directorio donde reside la página web. Si por el contrario la imagen se encuentra
en otro directorio o subdirectorio, se debe incluir su ruta en el atributo SRC. La
ruta tiene las mismas características ya definidas en el aparte dedicado a
“Ubicación de Archivos” de éste módulo. Por ejemplo, SRC=”Imagenes/logo.gif”
mostrará la imagen logo.gif, ubicada bajo el subdirectorio Imagenes.
La etiqueta <IMG> cuenta además de SRC con otros atributos que controlan la
manera como se desplegarán las imágenes:
ALT ="Texto alternativo" Permite definir un texto que aparecerá en caso de que la
imagen por alguna razón no pueda ser mostrada, o cuando se desplaza el puntero
del ratón sobre la imagen ya desplegada.
HEIGHT = ”XX” y WIDTH = ”XX” Medida en píxeles del alto y ancho de la
imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que
de esta manera el navegador conozca el tamaño de la imagen antes de descargarla.
Con ellos podemos controlar además el tamaño original de una imagen. Si por
ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 píxeles, sea
mostrada a la mitad de su tamaño en el navegador, basta con escribir una de
lastres líneas siguientes, siendo más recomendable la tercera:
<IMG SRC ="Imágeneslogo.gif" HEIGHT = “60” >
<IMG SRC ="Imágeneslogo.gif" WIDTH = “60” >
<IMG SRC ="Imágeneslogo.gif" WIDTH = “60” HEIGHT = “60” >
Sí se desea cambiar el tamaño de la imagen de manera proporcional, solo
es necesario incluir uno de los dos atributos.

ALIGN = ”Alineación de texto” Permite especificar la alineación respecto de la
imagen de un texto que se escriba inmediatamente después de la etiqueta <IMG>.
El texto en mención, puede alinearse arriba, utilizando TOP como valor; en el
centro de la imagen, si utilizamos MIDDLE y en la parte inferior de la misma, si el
valor para ALIGN es BOTTOM. Además, el atributo ALIGNpuede recibir
el valor LEFT, con lo que la imagen se colocará a la izquierda del texto,
o RIGHT,caso en el que la imagen aparecerá a la derecha.
BORDER ="X" Dibuja un borde o marco negro de x puntos alrededor de la imagen.
Si se omite este atributo, simplemente no se dibujará ningún borde.
Para comprender mejor el comportamiento de las imágenes, copie en un directorio
denominado Imágenes el siguiente logotipo y luego escriba en un archivo las líneas
que a continuación se muestran:
<IMG SRC ="Imagenes/logo.gif" ALT ="Logo tamaño 180 x 180 píxeles"
WIDTH = 180 ALIGN = “top” BORDER=”5”>Texto alineado arriba de la
imagen 
<IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamaño original" ALIGN =
“middle” BORDER=”3”>Texto alineado en la mitad de la imagen 
<IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamaño 60 x 60
píxeles" HEIGHT = 80 ALIGN= “Bottom” >Texto alineado abajo de la
imagen 
<IMG SRC ="Noexiste.gif" ALT ="No existe la imagen"> Texto
VÍNCULOS
Como ya se mencionó, una de las etiquetas más importantes de HTML es la
que permite, a través de vínculos o enlaces, navegar por las diferentes páginas y
sitios en la red. Se pueden colocar enlaces que nos lleven a un lugar específico en la
misma página, que abran otra página o un sitio nuevo e inclusive utilizar un vínculo
para enviar un correo electrónico a una dirección dada o permitir que el usuario
descargue y ejecute, o guarde archivos ubicados en una localización remota.
Un vínculo puede ser colocado sobre una zona de texto o sobre una imagen, lo que
lo convierte en un elemento “sensible”. Es decir, el elemento responderá a acciones
tales como hacer clic, doble clic o desplazar el puntero del ratón sobre él. Si el

enlace se coloca sobre una franja de texto, ésta aparecerá subrayada y con
diferente color; si es una imagen la que lo soporta, HTML entonces le colocará
un borde del color definido para el atributo LINK de la etiqueta BODY.
VÍNCULOS DENTRO DE LA PÁGINA
Para facilitar la navegación dentro de una página cuando su contenido es
demasiado largo y al desplegarla ocupa más de una pantalla, se pueden
colocar enlaces que lleven al usuario a sitios específicos o predeterminados de la
misma. Para esto, se deben utilizar dos atributos de la etiqueta <A>:
<A NAME = "nombre">Texto de marca</A> sirve para marcar la zona
de nuestra página a la cual saltará el explorador cuando demos clic sobre el enlace
definido por la etiqueta <A HREF = "#nombre">Texto de enlace</A> que es la que
en realidad contiene el enlace.
EJERCICIO 3


Una vez obtenido el resultado deseado, abra la página en el browser y
observe que su contenido ocupa más de una pantalla. Nos interesa colocar
enlaces sobre los literales a. El motor y b. La transmisión, de tal forma que al dar
clic sobre cualquiera de ellos, el explorador nos lleve a la sección deseada.
Para lograrlo, agregue las siguientes etiquetas en los lugares apropiados:

ENLACES A OTRA PÁGINA
Para ilustrar el uso de enlaces a otras páginas, se utilizarán Menu.html (creada
en el ejercicio 2), Automóvil.html y dos páginas nuevas:
Computador.html y Telefono.html, que se crearán con los siguientes textos:
Computador.txt y Telefono.txt. Las páginas así creadas deben guardarse dentro
del mismo directorio. La idea es que al abrir Menu.html en el explorador, se pueda
desde allí acceder a cualquiera de las otras tres páginas (Automóvil, Computador y
Teléfono). Para esto se debe editar la página Menu.html y agregar los links
faltantes:
<LI><A HREF="Automovil.html">Automóvil</A>
<LI><A HREF="Computador.html">Computador</A> <LI><A
HREF="Telefono.html">Teléfono</A>
En el ejercicio 3, cuando se definieron enlaces a otras secciones dentro de la
misma página, el atributo HREF contenía el nombre de una sección predefinida,
precedida por el signo #. Cuando se quiere crear un enlace a otra pagina que reside
dentro del mismo nivel, vale decir dentro del mismo directorio, el atributo HREF
debe contener la ruta y el nombre completo de la página y su extensión. La ruta
cumple con las mismas características ya explicadas en la sección dedicada a la
ubicación de archivos.
Es importante anotar, que en lo que se refiere a nombres de archivos y páginas,
HTML es sensible a las mayúsculas. Es decir, Telefono.html es diferente
a telefono.html. Lo anterior no se aplica a las etiquetas como ya se explicó.
ENLACES A PÁGINAS REMOTAS
La verdadera potencia del lenguaje HTML consiste en que permite enlazar
y acceder páginas Web localizadas en cualquier servidor y punto geográfico
del mundo, para lo cual lo único que se necesita conocer es su dirección, que
constituye el valor (“nombre”) del atributo HREF.
Por ejemplo, la etiqueta para colocar un enlace a mi servidor, cuya
dirección es www.dokeos.com, es:
<A HREF ="http://www.dokeos.com"> IR A DOKEOS </A>
Los caracteres http se refieren al tipo de servicio o protocolo que presta el servidor,
en este caso protocolo de transferencia de hipertexto, en inglés HyperText Transfer
Protocol. Aunque existen otros servicios como ftp, telnet, y news, no es del alcance
de éste modulo profundizar en ellos.
El procedimiento para utilizar una imagen como elemento de enlace es similar
al anteriormente explicado. En el siguiente ejemplo, se utilizará la imagen
Hormiga.gif como elemento de enlace.
<A HREF ="http://www.masterlinux.org">
<IMG SRC ="Hormiga.gif" HEIGHT=100 ALIGN="left">
</A>
ENLACE AL SERVICIO MAIL

El protocolo o servicio mailto permite definir otro tipo de enlace, que activa la
herramienta de correo electrónico para enviar un mensaje a la dirección definida en
el atributo HREF. Este enlace, al igual que los anteriores, puede ser
colocado indistintamente sobre imágenes o texto.
<A HREF="mailto:cempros@gmail.com"> Escribanos </A> si desea recibir más
información.
Al abrir esta página en el explorador, la palabra “Escribanos” aparecerá subrayada,
y al dar clic sobre ella se desplegará la herramienta de Mail, lista para enviar un
mensaje a mi cuenta de correo.
Etiquetas: crear enlaces entre paginas, crear hipervinculos, insertar imagenes en html

Curso htm profe. andres l

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Curso htm profe. andres l

Similar a Curso htm profe. andres l (20)

Más de Andres Domínguez Sánchez

Más de Andres Domínguez Sánchez (20)

Curso htm profe. andres l