Encabezados

HTML acepta seis encabezados para definir la estructura jerárquica de los párrafos en un documento:

Atributos

Los siguientes atributos se ubican dentro de las etiquetas de estructura, de forma que los elementos pueden mostrarse en ubicaciones específicas:

Este es un ejemplo de encabezado:

<H1 ALIGN=JUSTIFY> Texto justificado </H1>

Párrafos

HTML considera que los párrafos son bloques de texto. Los navegadores hacen lo posible para adaptar el contenido de los párrafos a la ventana, a menos que los atributos NOWRAP o NOBR estén explícitamente especificados.
Dentro de un párrafo, todos los espacios, tabuladores y saltos de línea cuentan como un espacio simple.

Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Esta etiqueta puede incluir cualquiera de los atributos mencionados anteriormente.

Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>.

La etiqueta <hr> se utiliza para insertar una línea horizontal.

Contenedores

Las etiquetas usadas para indentar texto se llaman contenedores.

Para escribir texto preformateado; manteniendo espacios,
		saltos de líneas y tabuladores intactos

Uso de las tablas

A menudo resulta útil presentar información de una manera más estructurada que en las listas. Las tablas permiten mostrar esta información en filas y columnas. Las tablas se definen como series de filas.

Una tabla debe respetar las siguientes reglas:

• La tabla está enmarcada por las etiquetas <TABLE> y </TABLE>.
• El título de la tabla está enmarcado por <CAPTION> </CAPTION>
• Cada fila está enmarcada por<TR> </TR> (por Table Row).
• Las celdas de encabezamiento están enmarcadas por <TH> </TH> (por Table Header).
• Los datos en cada celda están enmarcados por <TD> </TD> (Table Data).

Este es un ejemplo de tabla HTML:

<TABLE BORDER="1">
  <CAPTION>Este es el título de la tabla</CAPTION>
  <TR>
	<TH> Título A1 </TH>
	<TH> Título A2 </TH>
	<TH> Título A3 </TH>
	<TH> Título A4 </TH>
  </TR>
  <TR>
	<TH> Título B1 </TH>
	<TD> Valor B2 </TD>
	<TD> Valor B3 </TD>
	<TD> Valor B4 </TD>
  </TR>
</TABLE>

Los resultados de este código:

Atributos

Introducción a los anclajes

Los vínculos de hipertexto o hipervínculos (anclajes) son elementos de una página HTML que, al hacer clic sobre ellos, permiten a los lectores navegar hacia una nueva dirección. (el hipervínculo aparece subrayado de forma predeterminada). Al navegar por la Web, los hipervínculos son los que conectan las páginas Web unas con otras. Se usan para dirigirse:

• a otro punto en el mismo documento
• a un archivo HTML en una ubicación diferente del equipo que aloja la página
• a otro equipo

El principal atributo de los anclajes es href. Se escribe así:

<a href="Dirección o URL"> .. </a>

Vínculos externos

Un vínculo externo es un vínculo a una página *** mediante su dirección URL
. Por ejemplo:

<a href="http://www.commentcamarche.net">Comment ça marche? </a>

Vínculos locales

Un vínculo puede apuntar a una página ubicada en el mismo equipo, reemplazando la dirección URL con el archivo de destino.

Esta ubicación del vínculo puede definirse de forma relativa, describiendo el archivo de destino con relación al archivo fuente. Si el archivo fuente es “index.html” ubicado en el directorio principal puede escribirse un vínculo hacia él:

<a href="../index.html"> ... </a>

Este vínculo puede definirse de forma absoluta escribiendo la dirección del archivo de destino:

<a href="file:///drive:/directory/index.html"> ... </a>

Vínculos locales

También es posible crear un enlace a un punto dentro de una página, es decir, marcar un punto preciso en la página donde el hipervínculo llevará al lector. Los vínculos internos se definen con el atributo NAME o ID. La sintaxis siguiente debe usarse cuando desee que el destino sea:

<a name="vínculo_interno"> ... </a>

Este es el vínculo a esa ubicación:

<a href="#vínculo_interno"> ... </a>

Con estas etiquetas, puede permitir al usuario subir o bajar por la página, o acceder a una sección especial en otra página:

<a href="url/nombre_archivo.html#vínculo_interno"> ... </a>

¿Cómo mostrar imágenes en una página Web?

Tener algunas imágenes en un sitio Web lo hace más atractivo e intuitivo. Sin embargo, es importante no excederse ya que las imágenes pueden llevar mucho tiempo en cargarse y, en algunos casos, pueden hacer que un documento sea más difícil de leer.

La etiqueta IMG se usa para insertar imágenes en páginas HTML. La imagen puede ubicarse en el mismo servidor que la página en la que se inserta, pero también puede ubicarse en un servidor diferente si se especifica la dirección URL completa.

Solamente se admiten los siguientes formatos de imagen en los estándares W3C:

• imágenes JPEG (.JPG): Imágenes con un gran número de colores que han sido comprimidas en un alto grado para reducir su tamaño, de modo que requieren menos tiempo para la descarga,
• imágenes PNG: Tienen un tamaño más pequeño cuando la imagen tiene un número reducido de colores sólidos. Este formato permite también imágenes entrelazadas (que aparecen progresivamente) con colores de 24 bits e imágenes en las que uno de los colores se ha definido como transparente.
• imagen GIF: Tienen las mismas ventajas que las imágenes PNG, aunque el formato GIF se limita a 256 colores y sea un formato no completamente abierto.

¿Cómo mostrar imágenes en una página Web?

Cómo insertar una imagen en una página Web? Los principales atributos de la etiqueta IMG son:

• SRC: Muestra la ruta donde se ubica la imagen (obligatorio).
• ALIGN: Especifica cómo está alineada la imagen en relación al texto adyacente. Los valores posibles son TOP, MIDDLE y BOTTOM (encima, en el medio, debajo).
• ALT: Permite insertar un texto alternativo cuando la imagen no aparece. Muestra un texto alternativo si no aparece la imagen.
• TITLE: Muestra información cuando el cursor se desplaza sobre la imagen.
• WIDTH: Especifica el ancho de la imagen.
• HEIGHT: Especifica la altura de la imagen.

Así, para insertar una imagen, esta es la clase de etiqueta que debe utilizarse:

<IMG SRC="url_de_imagen"
	ALT="Texto alternativo"
	TITLE="Texto a mostrar">

Atributo	Valor	Resultado	Efecto visual
ALIGN	Bottom center left middle top right	Alineación de imagen.
ALT		Muestra un texto alternativo si no aparece la imagen.
BORDER	Número entero	Número de píxeles en el borde de la imagen. El color del borde puede definirse por el atributo LINK o TEXT de la etiqueta <BODY>. De forma predeterminada, el atributo BORDER se establece en 1 para crear un pequeño marco alrededor de la imagen. Si no lo quiere, puede establecer el valor en 0.
HEIGHT	Número entero	Altura de la imagen (en píxeles o en %). Cuando este atributo especifica un tamaño diferente a la altura original del gráfico, el navegador automáticamente lo restaura al tamaño original, lo que puede disminuir la calidad de la imagen mostrada.
HSPACE	Número entero	Número de píxeles de ajuste entre la imagen y el texto adyacente (horizontalmente).	Texto
LONGDESC		URL de la descripción de la imagen.
LOWSRC	Direcciones URL	Una imagen alternativa (generalmente más pequeña) que se muestra mientras la imagen real se carga en el navegador.
NAME		Establece el nombre de la imagen. Este atributo se usa principalmente para imágenes en JavaScript.
SRC	Direcciones URL	La dirección URL de la imagen.
TITLE		Muestra un texto alternativo si no aparece la imagen.
USEMAP		URL o nombre del anclaje que define la imagen mapeada.
VSPACE		Número de píxeles de ajuste entre la imagen y el texto adyacente (verticalmente).	Prueba de texto
WIDTH	Número entero	Ancho de la imagen (en píxeles o en %). Cuando este atributo especifica un tamaño diferente al ancho original del gráfico, el navegador automáticamente lo restaura al tamaño original, lo que puede disminuir la calidad de la imagen mostrada.

Rodear una imagen con texto

Las imágenes se insertan en un texto como caracteres. Esto hace que parezca imposible colocar texto alrededor de una imagen.

Sin embargo, existen varios métodos para hacer esto, veremos dos de ellos:

• El primero implica la creación de una tabla con una fila y dos columnas, en las que se ubican la imagen y el texto.
• El segundo (que es menos preciso) implica la alineación de la imagen hacia la derecha o hacia la izquierda con el atributo ALIGN y luego la escritura del texto. Si desea evitar que el texto rodee las imágenes, use el atributo CLEAR.

Mapas de imágenes

Puede crear diferentes áreas de selección dentro de una misma imagen usando el atributo USEMAP conjuntamente con la etiqueta MAP
El atributo USEMAP de la etiqueta <IMG> apunta a una etiqueta <MAP> que contiene una descripción de las áreas seleccionables en las que se divide el mapa.

La etiqueta <MAP> tiene un atributo NAME para definir su nombre, y también declara qué áreas son accesibles usando las etiquetas AREA.

A continuación hay un ejemplo de un mapa de imagen:

<IMG SRC="images/image.gif"
	WIDTH=150
	HEIGHT=70
	USEMAP="#Map">
<MAP NAME="Map">
	<AREA SHAPE="rect"
		   HREF="start.html"
		   COORDS="0,0,48,28">

	<AREA SHAPE="circle"
		   HREF="previous.html"
		   COORDS="50,30,10">

	<AREA SHAPE="poly"
		   HREF="next.html"
		   COORDS="60,50,80,30,100,40,50,100">
</MAP>

Codificación de colores

En HTML, los colores se definen mediante tres números hexadecimales que representan los tonos rojo, azul y verde, usando la codificación RGB) del color elegido. Esta es la sintaxis para codificar un color en HTML:

color="#RRGGBB"

RR, GG y BB representan, cada uno, un número hexadecimal entre 00 y FF para el rojo, el verde y el azul respectivamente.

Con esta sintaxis, se pueden utilizar más de 16 millones de colores en las páginas Web. Sin embargo como no todos los navegadores reconocen los colores del mismo modo, W3C recomienda usar los colores a continuación, que han recibido nombres específicos. Por lo tanto, puede (y se aconseja) representar los colores de esta forma:

color="color_name"

Cuando entramos mediante nuestro navegador a una página de Internet, este suele cargar en la barra principal el título de la página web. Pero, ¿de dónde obtiene el navegador dicho título?

Pues esto es muy sencillo y es que los navegadores cargan en la barra principal el valor de la etiqueta TITLE. La etiqueta TITLE tendremos que ponerla dentro dela cabecera de nuestra página HTML. Es decir, dentro de la sección HEAD.

Veamos como quedaría ese código:

 


<html>


<head>


<title>Este es el titulo de la pagina</title>


</head>


<body>


...


</body>


</html>

En ocasiones, cuando abrimos una página web nos aparece un mensaje de error de script:

Se ha producido un error.
Error en el script de esta página.

¿Desea realizar una depuración?
¿Desea continuar ejecutando scripts en esta página?

Este mensaje de error significa que la página web contiene un bug por lo que el navegador no puede leerla. En este caso es inútil efectuar una depuración.

Para que este mensaje no vuelva a aparecer:

• Abre Internet Explorer
• Selecciona Herramientas / Opciones de Internet / Opciones avanzadas
• En la sección Examinar:
  • marca la opción “deshabilitar la depuración de scripts”
  • desmarca la opción “Mostrar una notificación sobre cada error de scripts”.

Si Internet Explorer bloquea las ventanas emergentes de sitios seguros (aquellos cuya dirección comienzan con https) y deseas permitirlas, entonces lee este truco que te explicará como hacerlo:

• Abre el Editor del Registro (Inicio/Ejecutar, escribe regedit y pulsa Aceptar)
• Selecciona la clave HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\New Windows
• Si no existe el valor AllowHttps en esta rama, créalo haciendo clic en Edición / Nuevo / Valor DWORD e ingresa AllowHttps
• Asignar a AllowHttps el valor de 1
• Reinicia Internet Explorer