La etiqueta "blockquote".

Otra etiqueta relacionada con el formato de párrafos en HTML es <blockquote>, que consta de una instrucción de inicio y una de fin y que indica que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador mostrará el texto en u nuevo párrafo con márgenes a la izquierda y a la derecha. En el ejemplo puede verse un uso típico de esta etiqueta.

Líneas horizontales para separar párrafos

Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr>. Su nombre proviene del inglés Horizontal Rule (línea horizontal). Esta etiqueta está

formada por una única instrucción y provoca que el navegador inserte una línea horizontal como la mostrada en figuras anteriores en donde se separaba los dos párrafos que se estaban comparando. Existen cuatro atributos que permiten modificar su apariencia. Estos son:

-’align’: Permite cambiar la alineación de la línea. Puede tomar tres valores:"left", "center" y

"right" para conseguir alineación a la izquierda, centro y derecha respectivamente.

Espacio entre líneas

Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br>. Si se ponen varias seguidas
no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena " ". Por ejemplo para insertar tres líneas en blanco puede usarse:

Uso incorrecto de la etiqueta p

La etiqueta p es usada en muchas páginas de forma incorrecta. El error consiste en emplearla simplemente
para introducir un espacio (vertical) entre líneas. La forma adecuada es introducir las instrucciones
de inicio y fin para marcar el comienzo y el fin de un párrafo.

Cómo se insertan párrafos

Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa la etiqueta
p, situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin </p> tras la última frase.
Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. A continuación se muestra un ejemplo:
<p>
Estaba internándose en lo desconocido.
</p>
<p>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el

temor de estar cometiendo...

Saltos de línea

En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br>. Cuando el navegador se encuentra con esta etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo:
Estaba internándose en lo desconocido. <br>
Durante todo el trayecto hasta Woodfield no dejó de pensar en los
aspectos económicos, con el temor de estar cometiendo...
En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que hemos usado <br>.

Párrafos en HTML

Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Esta característica suele sorprender (e incluso molestar) al principio, pero es innegable que esta forma de actuar es necesaria y concuerda con el carácter descriptivo de HTML.
La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las palabras, etc.

Conclusión

Ya sabemos mucho sobre la programación de páginas. Conocemos las principales características del lenguaje HTML y qué es necesario para crear un Web. Hemos aprendido además las bases del lenguaje y hemos creado nuestra primera página de ejemplo, con texto y encabezados, y la hemos puesto un título.
En la siguiente entrega realizaremos la primera página web completa, con párrafos, imágenes e hiperenlaces.
Aprenderemos también a alinear el texto a los dos lados de la página y a combinar esta alineación con la inclusión de imagenes. Igualmente veremos cómo es posible crear enlaces a distintos puntos de una página así como a otras páginas o puntos concretos de estas.

El ejemplo mejorado

Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura podemos ver cómo se muestran las modificaciones.

Ejemplo de páginaWeb con dos tipos de encabezados y dos párrafos.

Los encabezados

Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia. Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La letra "h" al principio del nombre de estas etiquetas provienen de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura se puede ver un ejemplo de cómo muestra las cabeceras del navegador.

Distintos tipos de encabezados vistos con el navegador.

El código usado en este ejemplo es el siguiente:

<h1>Encabezado 1</h1>

<h2>Encabezado 2</h2>

<h3>Encabezado 3</h3>

<h4>Encabezado 4</h4>

<h5>Encabezado 5</h5>

<h6>Encabezado 6</h6>

NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior.

En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente.

En la figura siguiente podemos apreciar como se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.

Distintos tipos de encabezados vistos con el navegador

Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia.

Primeros pasos con HTML

Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas para

crear nuestra primera página.

Estructura de una página

Todo documento HTML está formado por los bloques que podemos apreciar en la figura. Pasemos a explicar

cada uno de ellos.

Estructura de bloques de un documento HTML.

En primer lugar deberemos

Las bases de HTML

Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún.

Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la

siguiente estructura:

HTML es un lenguaje descriptivo

Probablemente el lector ha usado alguna vez un procesador de texto (Abiword™, MicrosoftWord™o KWord™) o un programa de descripción de páginas (QuarkXPress™). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamaño", "sitúalo a 1 cm. del borde", "usa este sangrado para los párrafos", etc... Con HTML el programador no tiene este tipo de control sobre los elementos que incluirá en su página. El objetivo de este lenguaje será simplemente describir cómo es una página de manera que examinando esa descripción el navegador del usuario final sea capaz de mostrarlo de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un titular, aquí comienza un párrafo, estos son elementos de una lista, etc. posteriormente el navegador decidirá como mostrar esos elementos.

Los navegadores en modo texto como Lynx también pueden mostrar páginas

Web gracias al carácter descriptivo de HTML.

Algunas razones para usar HTML

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la
experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas:
• Seremos capaces de aprovechar todas las características de este lenguaje, incluso las más nuevas.

• Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar
posteriormente el código que éste ha creado. Así se pueden corregir errores o incluir etiquetas no soportadas
por el editor.
• No dependeremos de la disponibilidad de una herramienta concreta para poder crear páginas web. Con un
simple editor de textos será suficiente.
El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivosfuentes por separado, por un lado el archivo del editor y por otro el archivo del código HTML una vez generado, lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y su combinación con un buen conocimiento del lenguaje HTML nos convertirá en unos grandes programadores de páginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad técnica.

Qué se necesita para crear una página web

Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit™ en MS-DOS, block de notas enWindows,vi™en UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.

Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una páginaWeb:

vista del inicio de creación de una pagina web

Características del lenguaje HTML

 ¿Cómo se hace una página Web? Cuando los diseñadores del WWW

se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:
• El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
• El Web tenía que ser hipertexto y debía ser fácil navegar por él.
• Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo
tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Introducción

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta

información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video.

Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los

que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha sido reemplazado todavía y por tanto será el empleado a lo largo de esta obra.

Nuevos atributos para las etiquetas HTML

En esta sección se enumeran los nuevos atributos que podemos utilizar con las etiquetas HTML y que son útiles para trabajar con estilos. Estos atributos pueden ser usados con cualquier etiqueta para especificar su estilo.

Nuevas etiquetas HTML

En esta sección se verán las nuevas etiquetas que han sido añadidas para trabajar con estilos.

Comentarios en las Hojas de estilo

En las hojas de estilo en cascada y en las hojas de estilo en JavaScript se pueden usar comentarios al estilo C. Por ejemplo:

em {color:red;} /* el texto enfatizado será rojo */

tags.em.color="red"; /* el texto enfatizado será rojo */

JavaScript además permite usar comentarios al estilo de C++. Por ejemplo:

tags.em.color="red"; // el texto enfatizado será rojo

Los comentarios no pueden anidarse.