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

http://clasewebhtml.blogspot.com/ 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. Publicado por Andrés Domínguez Sánchez en 11:48 0 comentarios Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con Facebook 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, aplicaciones, archivos y documentos se guardan físicamente en una unidad de almacenamiento, 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 subdirectorio (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

http://clasewebhtml.blogspot.com/ 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 ®. Publicado por Andrés Domínguez Sánchez en 13:40 0 comentarios Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con Facebook 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

http://clasewebhtml.blogspot.com/ <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>

http://clasewebhtml.blogspot.com/ Publicado por Andrés Domínguez Sánchez en 13:01 0 comentarios Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con Facebook 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

http://clasewebhtml.blogspot.com/ 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


Publicado por Andrés Domínguez Sánchez en 12:29 0 comentarios Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con Facebook 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ágenes\logo.gif" HEIGHT = “60” > <IMG SRC ="Imágenes\logo.gif" WIDTH = “60” > <IMG SRC ="Imágenes\logo.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.

http://clasewebhtml.blogspot.com/ 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

http://clasewebhtml.blogspot.com/ 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

http://clasewebhtml.blogspot.com/ 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:[email protected]"> 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.

Publicado por Andrés Domínguez Sánchez en 11:49 0 comentarios Enviar por correo electrónicoEscribe un blogCompartir con TwitterCompartir con Facebook Etiquetas: crear enlaces entre paginas, crear hipervinculos, insertar imagenes en html

curso htm profe. andres l

Documents