HTML (lenguaje de marcas), 3ª Parte, La primera página Web (Párrafos en HTML)

Html logo
Html logo
Html, logo

Tras un primer capítulo en el que hemos aprendido lo sencillo que es crear una página Web con el lenguaje HTML avanzamos en este segundo explicando las etiquetas más usadas a la hora de crear páginas y terminaremos elaborando la nuestra propia.

Hasta ahora hemos creado algunas páginas sencillas en HTML en las que fuimos capaces de introducir encabezados y párrafos sencillos. En este capítulo aprenderemos una serie de etiquetas con las que tendremos conocimientos suficientes para elaborar una página profesional. Los temas que serán cubiertos en este capítulo son: párrafos en HTML, la etiqueta center, cómo insertar imágenes y cómo crear enlaces hipertexto.

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.

En estos ejemplos podemos observar diversos saltos de línea y separaciones en el texto, sin embargo el navegadormostrará un solo espacio entre las palabras y producirá saltos de línea donde sea necesario en función del tamañode la ventana.

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>.

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…
</p>

Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase:

<p>
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…
</p>

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.

Espacio entre líneas

Para introducir un espacio vertical entre líneas debe usarse la etiqueta
. 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:

El atributo ’align’ en la etiqueta <p> permite especificar la alineación del párrafo. Puede tener tres valores: “center”, “left” y “right”, para obtener un párrafo centrado, alineado a la izquierda o alineado a la derecha respectivamente.

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 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.
  • ’noshade’: ’noshade’, que en inglés significa sin sombra, existe porque algunos navegadores gráficos como Navigator™ o Explorer™ muestran las líneas horizontales con un efecto tridimensional con sombra. Al incluir este atributo se elimina este efecto de manera que el navegador sólo mostrará una línea horizontal negra.
  • ’size’: Con este atributo se puede controlar el grosor de la línea. Como valor de este atributo se
    debe especificar el valor deseado en pixeles (puntos de pantalla).
  • ’width’: Este atributo permite especificar el ancho de la línea. El valor puede ser dado de una manera absoluta, especificando el ancho en pixeles (por ejemplo width=100) o de manera relativa respecto al ancho de la ventana del navegador usando porcentajes (por ejemplo width=”90%”). Es más que recomendable usar este último sistema de manera que obtengamos un resultado apropiado independientemente del tamaño que cada usuario quiera dar a la ventana de su navegador.

Estos atributos pueden ser usados conjuntamente para combinar sus efectos.

La etiqueta <blockquote></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.

No abusar de las líneas horizontales

Es conveniente no usar mucho las líneas horizontales, limitándolas al comienzo y fin de la página. La razón de esto es que las líneas en medio de la página dificultan la lectura de esta. Si se desea separar secciones un espacio vertical del tamaño adecuado es más efectivo.

La etiqueta <address></address>

Muy relacionada con la anterior, es la etiqueta <address>, que en inglés significa dirección. Esta etiqueta está compuesta, igualmente, por dos instrucciones y se usa para incluir información sobre el autor de una página WEB o elementos relacionados. Puede encontrarse un ejemplo de su uso en las coletillas existentes al final de muchas páginas en las que se incluye información variada para el usuario como puede ser, además del autor, la fecha de la última modificación, la fecha actual, la URL de la página, etc.

La etiqueta <center></center>

Acabamos de ver una serie de etiquetas que permiten cambiar de línea, crear distintos tipos de párrafos o insertar líneas que les separen. También hemos visto que alguna de las etiquetas utilizadas tienen el atributo ’align’ que permite indicar el alineamiento.

En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro elemento de la página debía ser centrado. Sin embargo no todas las etiquetas tienen el atributo ’align’. La solución es emplear una nueva etiqueta: center. Ésta está compuesta por una instrucción de inicio y una de fin de manera que todo lo que quedaba entre ellas, fuese lo que fuese, estuviese centrado.

Nota

Actualmente existen alternativas mejores que la etiqueta center para especificar el alineamiento. En particular la etiqueta div y las hojas de estilo en cascada que serán tratadas a lo largo de este curso.

Un Saludo.

Anuncios

2 comentarios en “HTML (lenguaje de marcas), 3ª Parte, La primera página Web (Párrafos en HTML)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s