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.

Herencia de Propiedades de Formato de Bloque

Las características de anchura, márgenes, bordes y separadores de los elementos padre no son heredadas por sus hijos. Sin embargo, a primera vista, a veces puede parecer que sí son heredados, pues los valores de los elementos padre afectan a sus elementos hijos. Supongamos que a un elemento <div> le fijamos un margen izquierdo de valor 10 puntos. De esta forma la caja que le rodea se encuentra desplazada 10 puntos hacia la derecha. Además supondremos que no tiene bordes ni separadores. Todos sus elementos hijo estarán pegados a su margen izquierdo, que como está 10 puntos desplazado hacia la derecha, causará un efecto parecido si ellos mismos también tuviesen borde izquierdo.

Pensemos en qué ocurriría si los hijos heredasen estas características de sus padres. El bloque <div> está indentado 10 puntos. Sus hijos a su vez estarán indentados otros 10 puntos con respecto a él, con lo cual el aspecto global es que los hijos estarían indentados 20 puntos.

Separadores

Los separadores indican la distancia entre el borde de un elemento y su contenido. El separador se muestra incluso si el borde del elemento no lo hace. Se puede fijar el tamaño de los separadores de un elemento de bloque utilizando las siguientes propiedades.

Sintaxis CSS

• padding-top
• padding-bottom
• padding-left
• padding-right

Sintaxis JavaScript

• paddingTop
• paddingBottom
• paddingLeft
• paddingRight

Bordes

Se puede fijar la anchura del borde que rodea un elemento de bloque usando las siguientes propiedades.

Sintaxis CSS

• border-top-width
• border-bottom-width
• border-left-width
• border-right-width
• border-width

Sintaxis JavaScript

• borderTopWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderWidths()

Se puede fijar el estilo del borde usando la propiedad border-style de CSS o la propiedad borderStyle de JavaScript. Los valores que pueden tomar son solid, double, groove, ridge, inset y outset.

Márgenes

Los márgenes indican la separación entre el borde del bloque y el borde del documento, o elemento padre. Se pueden fijar los márgenes derecho, izquierdo, superior e inferior. Para ello se deben utilizar los siguientes nombres de propiedad:

Sintaxis CSS

• margin-top
• margin-bottom
• margin-left
• margin-right
• margin

Sintaxis JavaScript

• marginTop
• marginBottom
• marginLeft
• marginRight
• margins()

En vez de especificar los dos márgenes se puede utilizar la propiedad width. Se pueden utilizar valores específicos, como 200 puntos, o valores relativos, como el 50% de la anchura del elemento padre.

Es redundante fijar los dos márgenes y la anchura, pues dos de estos tres valores implican el tercero. Para especificar los márgenes por defecto para un documento se deben especificar para la etiqueta <body>. En el siguiente ejemplo se fijan dichos márgenes en 20 puntos a derecha e izquierda.

Sintaxis CSS

<style type="text/css">

body {margin-left: 20pt; margin-right: 20pt;}

</style>

Sintaxis JavaScript

<style type="text/javascript">

with (tags.body) { marginLeft="20pt"; maginRight="20pt"; }

</style>

Propiedades de Formato de Elementos de Bloque

En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva línea. Por ejemplo, <h1> y <p> son elementos de bloque, pero <em> no lo es. Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de bloque. Después se discutirá cada opción de formato en detalle. Para finalizar se echará un vistazo a su comportamiento respecto a la herencia de propiedades.

Especificación de Estilos para Elementos Individuales

De igual forma que se pueden definir hojas de estilo, podemos utilizar el atributo style de cualquier etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo. Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Así es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algún cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento. A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento <p>. También se muestra el uso de <span> para aplicar un estilo a varios elementos.

Uso de Criterios de Selección Contextual

Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente. Podríamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si el texto enfatizado está en el interior de un título de tamaño 4. Se puede conseguir este nivel de control sobre la aplicación de estilos usando los criterios de selección contextual. Estos, en general, permiten especificar que un estilo se aplicará sólo si un elemento se encuentra anidado dentro de un elemento de otro cierto tipo. Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las llaves. Con sintaxis JavaScript es necesario utilizar el método contextual().

Definición de Estilos Individuales con Nombre

Definición de Estilos Individuales con Nombre

Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar una clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL.

Definición de Clases de Estilo

Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todas las etiquetas de ese tipo en el documento utilizarán dicho estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solución correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento.