Encabezados
Las cabeceras o encabezados proporcionan un medio sencillo pero útil para dividir el cuerpo del documento en secciones.
Existen seis niveles de encabezados <H1> </H1> a <H6> </H6>. Los números indican los niveles de encabezado, el texto de acuerdo con el nivel se despliega con diferente tipografía ya sea más grande o más negra. Provocan una línea en blanco después del mismo.
Cuando se despliegan en el navegador no aparecen numerados, pueden tener cualquier longitud inclusive varias líneas aunque esto no es conveniente ya que puede resultar cansador para el lector.
No deben de usarse los encabezados para resaltar texto en negritas, o resaltar ciertas partes del documento.
Ejemplo:
<HTML>
<HEAD>
<TITLE>P´ginas 1 en Internet</TITLE>
</HEAD>
<BODY>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
<h3>Encabezado H3</h3>
<h4>Encabezado H4</h4>
<h5>Encabezado H5</h5>
<h6>Encabezado H6</h6>
</BODY>
</HTML>
Permite atributos como align (left/ center/ right/ justify).
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
<h3 align="center">Encabezado H3 con alineación centrada</h3>
</BODY>
</HTML>
Párrafos
Cuando se escribe un documento se tiene la costumbre de estructurarlo por medio de párrafos.
Probablemente se está acostumbrado al uso de procesadores de texto en los que un retorno de carro provoca el comienzo de un nuevo párrafo. En HTML esto no funciona, para identificar un fragmento del documento como párrafo es necesario delimitrlo con la etiqueta <P> </P>. La etiqueta de cierre puede ser omitida.
Dependiendo del navegador se pueden visualizar los párrafos con una línea en blanco antes y después de cada párrafo.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas 2 en Internet</TITLE>
</HEAD>
<BODY>
<P>El Imperio Antiguo se inicia con gran esplendor político y artístico. Es este el período de la construcción de las colosales pirámides. En la III dinastía, Zóser construye la pirámide escalonada de Saqqara, prototipo arquitectónico de las edificadas posteriormente. Keops erigió la Gran pirámide de Gizeh, junto a la cual edificarán las suyas los faraones Kefrén y Micerinos. A finales de la IV dinastía comenzó a desestabilizarse el poder político y aumentó notablemente la influencia de los gobernadores provinciales. La consecuencia fue una gran crisis de Estado que desembocaría en el desmoronamiento del Imperio Antiguo.</P>
<P>Cómo y por qué momificaban a los muertos.</P>
<P>Para los egipcios la muerte no era un punto final a su existencia, sino que significaba el inicio de una nueva vida.</P>
</BODY>
</HTML>
En HTML una secuencia de espacios en blanco, introducidos mediante la tecla espaciadora o la tecla de tabulador en el documento, serán visualizados en el navegador como un solo espacio en blanco.
Caracteres
Fuente
Para controlar la forma en que el navegador presenta las fuentes del documento, contamos con las
etiquetas <BASEFONT> y <FONT>.
<BASEFONT>
Permite establecer estándares para la fuente de todo el documento utilizando los atributos de tipo, tamaño y color de fuente (face, size, color).
Ejemplo face="helvética"
·
Size. Permite valores de 1 a 7 en el tamaño de la fuente, si no se ha definido un tamaño el valor por defecto es 3.
Ejemplo size="5"
·
Color. Permite cambiar el color del texto, el cual se define con el nombre del color en inglés o en notación hexadecimal RGB (Red, Green, Blue) indicado por el signo de # (número) y un número hexadecimal de seis dígitos. Los dos primeros corresponden al rojo de 00 (no rojo) a.
FF (rojo intenso), los siguientes dos dígitos corresponden al verde y los dos últimos al azul.
Negro es ausencia de color, #000000 y blanco son todos los colores #FFFFFF.
Ejemplo: color="navy" o color="#000080"
Se define al inicio del cuerpo del documento, aunque no es indispensable. No obstante si dentro de la etiqueta <BASEFONT> se encuentran encabezados éstos permanecerán invariables.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
<basefont size="5" color="navy" face="helvetica">
Fuente Helvética con atributos
<h2>Fuente Helvética con encabezado H2</h2>
</basefont>
</BODY>
</HTML>
Figura 4. Texto con etiqueta <BASEFONT> visto en el navegador.
<FONT>
Permite cambiar el tamaño, color y estilo de fuente (size, color, face), del texto que se encuentre ubicado entre las etiquetas <FONT></FONT>.
Contiene los atributos: size, face y color.
·
Size. Define un tamaño de fuente que puede ir de 1 a 7, conocido como tamaño absoluto. Si se define con el signo (+ o -) el tamaño es relativo al definido como tamaño base utilizando la etiqueta <basefont> o al tamaño predefinido en el navegador.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
<font size="6">
Tamaño de fuente absoluto en 6</font><br>
3
<font size="+2">Tamaño de fuente relativo en +2</font>
</BODY>
</HTML>
·
Face. Permite modificar el estilo o tipo de fuente mostrada por el navegador. El navegador analiza los nombres de las fuentes instaladas en la máquina del usuario, hasta localizar la definida; si ésta no se encuentra instalada en el sistema se despliega la definida como predeterminada en el navegador.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
<font face="helvetica">Fuente helvética</font><br>
<font face="bookman old style">Fuente bookman old style</font>
</BODY>
</HTML>
·
Color. Establece el color del texto contenido dentro de la etiqueta <FONT>. Puede definirse con el nombre del color en inglés como red (rojo), blue (azul), etc.; o en valor hexadecimal RGB indicado por el signo de # (número) y un número hexadecimal de seis dígitos. Los dos primeros corresponden al rojo de 00 (no rojo) a FF (rojo intenso), los siguientes dos dígitos corresponden al verde y los dos últimos al azul. Negro es ausencia de color, #000000 y blanco son todos los colores #FFFFFF.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
<font color="blue">Color azul</font><br>
<font color="#FF00FF">Magenta</font>
</BODY>
</HTML>
Caracteres especiales
No todos los caracteres de texto que utilizamos y tenemos en el teclado pueden ser mostrados por el navegador. Algunos caracteres tienen significados especiales como
< > que delimitan las etiquetas, que podríamos utilizar como menor o mayor en una ecuación matemática y que confunden al navegador.
HTML permite incluir cualquiera de estos caracteres, los cuales comienzan con un ampersand (&) seguido de su nombre o contracción en inglés y terminan con un punto y coma (
; ).
Alternativamente también es posible utilizar el número de posición del caracter en la tabla de caracteres ASCII, precedida por el signo de #.
TABLA DE ALGUNOS CARACTERES ESPECIALES
Entidad Numérica Entidad Nombrada Símbolo
" " ".
< < <
  Espacio
Á Á Á
É É É
Í Í Í
Ñ Ñ Ñ
Ó Ó Ó
Ú Ú Ú
á á Á
é é É
í í Í
ñ ñ Ñ
ó ó Ó
ú ú Ú
Alineación
La etiqueta <CENTER> </CENTER> permite centrar porciones enteras de la página dentro de la ventana del navegador.
Genera un salto de línea automático después de lo contenido dentro de la etiqueta, sin agregar espacio antes o después. Permite centrar texto, imágenes, etcétera.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
<center>Páginas en Internet</center>
Manual realizado en la Dirección General de Servicios de Cómputo Académico UNAM
</BODY>
</HTML>
Saltos de línea
El navegador muestra el texto del documento del margen izquierdo de la ventana hasta llenar cada una de las líneas, pasando automáticamente el texto a la siguiente línea cuando éste ya no puede mostrarse en la ventana. Ajustándose cada vez que se modifica el tamaño de la misma.
La etiqueta <BR> inserta un salto de línea en donde se coloque, enviando el texto que se encuentra después de ella a la siguiente línea sin generar espacios antes o después. No requiere etiqueta de cierre.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
Páginas en Internet<br>
Manual realizado en la<br>
Dirección General de Servicios de Cómputo
Académico<br>
UNAM
</BODY>
</HTML>
Separador horizontal
Una línea horizontal trazada o regleta permite separar visualmente la página para hacer notar algún cambio de tema o como adorno.
Para realizar esto se utiliza la etiqueta <HR> la cual no tiene etiqueta de cierre y permite dibujar una línea horizontal en el ancho de la página, que puede ser de diferente largo, grueso, color, alineación y con o sin sombra.
Si deseamos modificar la línea contamos con los modificadores
Width,
Color,
Size,
Align y
Noshade.
Cuando se requiere que la línea aparezca con relleno utilizamos el modificador
Noshade.
Al utilizar la etiqueta HR, podemos utilizar uno o todos los modificadores. No es recomendable colocar demasiadas líneas horizontales en una página ya que pueden ser distractores para el lector.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
Páginas en Internet
<hr>
Manual realizado en la
<hr align="RIGHT" size="5" width="75%">
Dirección General de Servicios de Cómputo Académico
<hr align="left" size="5" width="25%" color="gray"noshade>
UNAM
</BODY>
</HTML>
Texto con preformato
Cuando escribimos una página y colocamos cualquier espacio en blanco adicional (tabuladores, retorno de carro o espacios), éstos son eliminados por el navegador por lo que al ver nuestra página observaremos que las líneas se unieron y que el texto quedó sin espacios.
Para que el navegador respete lo antes mencionado utilizamos la etiqueta <PRE>.
Esta etiqueta se utiliza con el objeto de que lo que se encuentre dentro de la etiqueta se observe igual en el navegador: alinear o sangrar texto utilizando el tabulador, o generar líneas en blanco con retornos de carro.
La desventaja de utilizar esta etiqueta es que se pierde el formato que se le haya aplicado al texto, sólo presenta el texto con fuente monoespaciada como Courier, las líneas deben de ser de 60 caracteres o menos ya que el navegador no podrá ajustar el largo de la línea, ni dar presentación de encabezado.
Este tipo de etiqueta es útil cuando necesitamos presentar ejemplos de códigos.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Páginas en Internet</TITLE>
</HEAD>
<BODY>
<PRE>
import java.awt.*;
public class Ejemplo1 {
public static void main( String args[] ) {
Frame f = new Frame ("Ejemplo 1" );
f.show();
}
}
</PRE>
</BODY>
</HTML>.Páginas para Internet
