Bueno... seguimos ¡¡
ETIQUETAS DE 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.
ETIQUETA <HX> </HX>
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:
<HTML>
<HEAD>
<TITLE> Encabezados</TITLE>
</HEAD>
<BODY>
<H1>Este texto tiene el tamaño que le da la etiqueta H1</H1>
<H2>Este texto tiene el tamaño que le da la etiqueta H2</H2>
<H3>Este texto tiene el tamaño que le da la etiqueta H3</H3>
<H4>Este texto tiene el tamaño que le da la etiqueta H4</H4>
<H5>Este texto tiene el tamaño que le da la etiqueta H5</H5>
<H6>Este texto tiene el tamaño que le da la etiqueta H6</H6>
</BODY>
</HTML>
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,
<H1 align=center>Texto </H1>
mostrará la palabra Texto alineada al centro de la página, mientras que
<H1 align=right>Texto </H1>
alineará Texto a la derecha y
<H1>Texto </H1>
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:
<H1 align=centre>Este texto no se alineará al centro </H1>
<H1 aling=right>Este tampoco se alineará a la derecha</H1>
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.
ETIQUETA <FONT> </FONT>
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, las siguientes líneas escritas dentro del cuerpo de un nuevo archivo, mostrarán texto con cuatro tamaños de fuente diferentes:
Texto con fuente tamaño normal
<FONT SIZE="+1">Texto con fuente tamaño + 1</FONT>
<FONT SIZE="+2">Texto con fuente tamaño + 2</FONT>
<FONT SIZE="-1">Texto con fuente tamaño - 1</FONT>
<FONT SIZE="-2">Texto con fuente tamaño - 2</FONT>
La sintaxis completa de la etiqueta <FONT> es la siguiente:
<FONT SIZE="X" COLOR="color" FACE="Nombre de la fuente">Texto</FONT>
Donde X coresponde como ya se vió, al tamaño de la fuente que admite valores positivos y negativos.
El atributo color puede ser un valor hexadecimal o el nombre en inglés de un color específico. 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.
PALETA SEGURA
Código Nombre Color
#ffffff White Blanco
#000000 Black Negro
#ff0000 Red Rojo
#00ff00 Lime Verde Lima
#0000ff Blue Azul
#ffff80 Yellow Amarillo
#c0c0c0 Silver Plateado
#808080 Gray Gris
#800000 Maroon Marron
#800080 Purple Purpura (morado)
#ff00ff Fuchsia Fucsia o Rosado oscuro
#008000 Green Verde
#808000 Olive Verde oliva
#000080 Navy Azul Naval u Oscuro
#008080 Teal No se xD
#00ffff Aqua Aguamarina
Finalmente, Nombre de la fuente es el atributo correspondiente a los nombres de las fuentes disponibles en el sistema, tales como: Arial, Helvetica,
Times New Roman, Arial Black, Chalesworth, etc.
Como ejemplo, se propone escribir las siguientes líneas dentro del cuerpo de una nueva página:
<FONT SIZE="+1" COLOR="maroon" FACE="Comic Sans MS">TEXTO</FONT>
<FONT SIZE="+2" COLOR="#0000ff" FACE="Tahoma">TEXTO</FONT>
<FONT SIZE="+2" COLOR="Purple" FACE="Stencil">TEXTO</FONT>
<FONT SIZE="+2" COLOR="#ff00ff" FACE="Arial">TEXTO</FONT>
y probarlo en su navegador para ver los resultados obtenidos.
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, sí dentro del cuerpo de un archivo HTML se escribe el siguiente texto:
<BODY>
Este texto tiene
varios espacios y retornos de carro
</BODY>
el navegador omitira todos los espacios y saltos de linea, pues el texto es acomodado al tamaño de pantalla.
Sí se quiere que el texto se vea en la página tal como fue escrito, éste debe encerrarse dentro de las etiquetas <PRE> y </PRE> (preformated), que forzarán al explorador a mostrar todos los espacios, tabuladores y retornos de carro que encuentre.
ETIQUETA <BR> y <P>
La etiqueta <BR> permite forzar un salto de línea dentro de un texto.
Observe que esta etiqueta no se cierra con </BR>, razón por la que se le conoce como etiqueta abierta. <P> 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 con </P> 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:
Texto con<BR> salto de línea Texto con
salto de línea
En este ejemplo iniciaremos aquí <P> un En este ejemplo iniciaremos aquí
nuevo párrafo
un nuevo párrafo
<P ALIGN=right> alineado a la derecha</P> alineado a la derecha
<P ALIGN=left>alineado a la izquierda</P> alineado a la izquierda
<P ALIGN=center>alineado al centro</P> 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:
Línea centrada, de tamaño 10 puntos y ocupando el 30% de la página
<HR ALIGN=center SIZE= 10 WIDTH= 30%>
Línea alineada a la izquierda, de tamaño 5 puntos y ocupando la mitad de la página
<HR ALIGN=left SIZE= 5 WIDTH= 50%>
Línea alineada a la derecha, de tamaño 20 puntos y ocupando la mitad de la página
<HR ALIGN=right SIZE= 20 WIDTH= 50%>
Línea sencilla que ocupará el 90% de la página
<HR>
OTRAS ETIQUETAS PARA TEXTO
La siguiente 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
:: SmartGenius ::
<B>Texto</B> Texto en negrilla
:: SmartGenius :: <I> Texto </I> Texto en itálica
:: SmartGenius :: <U> Texto </U> Texto subrayado
:: SmartGenius :: Texto <SUP>Texto</SUP> Texto en superíndices
:: SmartGenius :: Texto <SUB>Texto</SUB> Texto en subíndices
:: SmartGenius :: <S> Texto </S> Texto tachado
:: SmartGenius ::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 visualizada.
CARACTERES ESPECIALES
Existen una serie de signos que aunque estén disponibles en el teclado, pertenecen a un conjunto específico de caracteres propios del idioma para el cual fue configurado el computador. Es así como, una página escrita por un hispano parlante, que probablemente utiliza el conjunto de caracteres de Europa Occidental, denominado Latin-1 (ISO 8859-1), sea visualizada de manera diferente por un usuario ubicado en un país de Asia o Europa Oriental. Las vocales acentuadas, la letra eñe, el signo del Euro y otros caracteres especiales deben sustituirse por ciertos códigos, para que su visualización sea la correcta, sin importar el conjunto de caracteres predefinido en el navegador.
Por ejemplo, la letra eñe debe ser reemplazada por ñ, de tal forma que la palabra año se escribe dentro de una página Web de la siguiente manera:
año
CARACTERES ESPECIALES
Carácter Código Carácter Codigo
< < > >
& & "
™ © ©
€ ¥ ¥
| ¦ Ø Ø
Ø ø ÷ ÷
± ± ° °
½ ½ ¼ ¼
3 ¾ ¢ ¢
á á é é
í í ó ó
ú ú Á Á
É É Í Í
Ó Ó Ú Ú
ñ ñ Ñ Ñ
Antes de realizar el primer ejercicio, es importante anotar que el lenguaje HTML soporta el anidamiento de etiquetas. Si fuera necesario por ejemplo, exhibir en una página la frase "MÓDULO DE HTML" subrayada, en negrilla, con fuente "VERDANA" y de color azul, bastará con escribir la siguiente línea dentro del cuerpo del archivo:
<FONT SIZE="6" COLOR="#0000ff" FACE="Verdana"> <U><B>MÓDULO DE HTML</B></U></FONT>
Lo anterior significa que un trozo de texto puede estar afectado simultáneamente por varias etiquetas. Lo único que se debe tener en cuenta a la hora de anidarlas es que la primera etiqueta en ser abierta debe ser la última en cerrarse.
LA ETIQUETA <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:
<BODY BACKGROUND = "nombre_imagen" BGCOLOR = "color_fondo" TEXT = "color_texto"
LINK = "color_enlace" VLINK = "color_enlace_V" ALINK = " color_enlace_A">
</BODY>
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):
<HTML>
<HEAD>
<TITLE>Cuerpo</TITLE>
</HEAD>
<BODY BGCOLOR=black TEXT=#00ff00>
<H3>ESTA PÁGINA TENDRÁ FONDO NEGRO Y TEXTO LIMA</H3>
</BODY>
</HTML>
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:
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:
<BODY BACKGROUND=nombre_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:
<BODY BACKGROUND=..D2/D3/Imagen 2>
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.jpg y la etiqueta BODY debe ser:
<BODY BACKGROUND=../Imagen1.jpg>
Autor