CURSO DE HTML 4.01
Elementos de HTML 4.01, etiquetas, atributos. Base del actual HTML5.
5. Formato de textos
5.1 Etiqueta P
La etiqueta P designa párrafos. Entre párrafo y párrafo -por defecto- hay una línea en blanco.
<p>Este es un párrafo. </p>Este es un párrafo.
Si queremos insertar un corte o salto de línea en un párrafo, utilizamos la etiqueta BR (break, romper). Se coloca donde se quiere cortar el párrafo y no tiene cierre.
<p>Este es <br>
un párrafo.</p>Este es
un párrafo.
La etiqueta P tiene un atributo que permite alinear el texto a la izquierda, derecha, centro o justificado.
El código es el siguiente:
<p align=“center”>Este texto está centrado.</p>Este texto está centrado
Los valores disponibles para el atributo align son: center, left (izquierda), right (derecha), justify (justificado).
5.2 Etiqueta CENTER
Otra manera de centrar datos, ya sean párrafos, imágenes, líneas u otros objetos, es la etiqueta CENTER. Tiene apertura y cierre. Se emplea de la siguiente manera:
<center>
<p>Texto de ejemplo</p>
</center>Texto de ejemplo
5.3 Etiquetas de formato de texto
Las etiquetas siguientes permiten variar el aspecto del texto:
| Etiqueta y código | Significado | Ejemplo |
|---|---|---|
| <strong>Ejemplo</strong> | Negrita | Ejemplo |
| <em>Ejemplo</em> | Cursiva o itálica | Ejemplo |
| Km<sup>2</sup> | Superíndice | Km2 |
| H<sub>2</sub>O | Subíndice | H2O |
| <s>Ejemplo</s> | Tachado | |
| <u>Ejemplo</u> | Subrayado | Ejemplo |
Estas etiquetas se pueden “anidar” (ver Módulo 3) dentro de un mismo párrafo, para lograr efectos en partes del mismo. Por ejemplo:
<p>Los días de la semana son: <br>
<strong>lunes, martes, miércoles, jueves, viernes, sábado y <em>domingo</em></strong>.</p>Los días de la semana son:
Lunes, martes, miércoles, jueves, viernes, sábado y domingo.
Si no cerramos bien las etiquetas anidadas, el navegador no cumplirá la instrucción correctamente, o la cumplirá a medias, tratando de cerrar la instrucción en algún lado y presentando la página con errores (cuando pasa esto, queda indicado en la barra de estado del navegador).
5.3 Etiqueta FONT
La etiqueta FONT nos permite cambiar el tipo, color y tamaño de letra. Actualmente se utiliza poco debido al empleo de CSS.
Los navegadores utilizan por defecto Times New Roman o Arial 12 en color negro. Al hacer una página web, podemos definir otros tipos de letra, tamaños y colores. Existen fuentes comunes a todos los equipos (computadoras), las que vienen instaladas con el sistema operativo. Si deseamos utilizar una fuente (letra) en particular, debemos tener en cuenta que no todos los usuarios la verán, sino sólo aquellos que la posean en su computadora, ya que las fuentes se leen del sistema del usuario. Es posible utilizar CSS para incorporar fuentes que no están en la computadora del usuario.
Veamos los atributos de la etiqueta FONT:
| Atributo | Significado | Código |
|---|---|---|
| face | Designa el tipo de letra (fuente). Generalmente se escribe una o dos fuentes principales y la génerica: sans-serif (estilo Arial), serif (estilo Times New Roman), monospace (estilo Courier, de espaciado fijo) o cursive (tipo mano alzada). | face="Arial, sans-serif" face="Times New Roman, serif" face="Comic Sans MS, cursive" face="Helvetica, sans-serif" face="Courier New, monospace" |
| color | Color de la fuente: Al igual que vimos en la etiqueta BODY, se expresa en valores hexadecimales. Aunque también se pueden emplear los nombres ya mencionados anteriormente, no todos los navegadores los reconocen. | color="#336699" color=red |
| size | Tamaño del texto: Los tamaños estándar van del 1 (más chico) al 7 (más grande). | size="1" size="4" size="7" |
5.4 Etiqueta HR
La etiqueta hr (horizontal rule) muestra una barra horizontal, muy empleada para separar secciones en el documento. Esta etiqueta no tiene cierre.
Sus atributos de son los siguientes:
| Atributo | Significado | Código |
|---|---|---|
| width | Fija el ancho de la línea en x pixeles o porcentaje. | width="x" width="x%" |
| size | Fija el grosor de la línea en x pixels. | size="2" |
| align | Alineación: puede ser izquierda (left), centro (center) (por defecto), derecha (right). | align=“left” align=“center” align=“right” |
| noshade | Despliega la línea sin sombra, compacta. | noshade |
Ejemplos:
1. <hr width="80%" size="4" noshade>
2. <hr width="80%" size="2">
El color está dado por defecto, se puede modificar con CSS.
5.5 Etiqueta PRE
Esta etiqueta tiene inicio y cierre. Se aplica cuando queremos incorporar un texto preformateado. Habíamos dicho que al insertar espacios o escribir el código en diferentes líneas, estos formatos no los leía el navegador. Con esta etiqueta tenemos la posibilidad de que se lea el texto tal como se escribe en el código. El tipo de letra que emplea la etiqueta pre es Courier, una letra de espaciado fijo (cada letra ocupa un espacio idéntico a las demás, no se ajusta cuando tenemos letras más angostas o más anchas). Esta etiqueta es útil para citar textos de código como los aquí empleados para los ejemplos.
5.6 Encabezados (headings)
Al igual que en los capítulos de un libro, se suelen utilizar títulos y subtítulos para destacar apartados dentro de un texto web. En html se denominan encabezados. Los encabezados son importantes, además, para el posicionamiento del sitio, ya que los buscadores los leen.
Van del 1 al 6: H1, H2, H3, H4, H5 y H6, siendo el primero el de mayor relevancia y el último el de menor importancia. Estas etiquetas tienen apertura y cierre y no se pueden anidar con etiquetas de párrafo. Sí se pueden incorporar etiquetas de corte (BR) y etiquetas de formato de texto. Por defecto, cada uno tiene su tamaño y están todos en negrita.
Ejemplo:
<h1><font color="#990000">Título más importante</font></h1>
<h2><font face="Verdana, Geneva, sans-serif" color="#333333">Subtítulo 1</font></h2>
<h3><font face="Verdana, Geneva, sans-serif">Subtítulo 2</font></h3>
<h5><font face="Arial, Helvetica, sans-serif" size="3">Datos de contacto</font></h5>
Algo a tener en cuenta: Los encabezados formatean el texto, pero más importante aún, indican un nivel y orden de lectura. Una página web contiene un solo encabezado de nivel 1 (h1) y continúa en jerarquía descendente. No es recomendable saltar niveles de encabezado para resaltar un texto. Es preferible darle formato con la etiqueta font dentro de un párrafo.
Ejemplos editables
Material adicional
- Editor HTML on-line.
- Usando la tipografía para mejorar el diseño de la web (artículo).
- Encabezados y accesibilidad, de Mozilla.
Actualización: enero, 2021. Elena Navntoft.