El estándar HTML/XHTML incluye numerosas etiquetas para marcar los contenidos de texto. No obstante, la infinita variedad de posibles contenidos textuales hace que no sean suficientes.
Pero, antes de comenzar a trabajar en el ejemplo de hoy, debemos conocer las siguientes etiquetas:
1. Strong:
El elemento strong es el apropiado para marcar con especial énfasis las partes más importantes de un texto.
Sus etiquetas son: <strong> y </strong> (ambas obligatorias)
Crea una caja: en linea.
Está definido como: Elemento de frase.
Puede contener: cero o más elementos en linea
Atributos genéricos
| atributo | descripción | valor | por omisión |
|---|---|---|---|
| Genéricos | |||
| title | Texto informativo o título del elemento. Suele mostrarse a modo de “tool tip”. | Texto legible. Sensible a M/m. | Lo fija el navegador. |
| style | Permite especificar información de estilo. Por defecto, estilos CSS. | Declaraciones de estilo. | Lo fija el navegador. |
- style (información de estilo en línea)
Identificadores: id, class (identificadores a nivel de documento)Idioma: lang (información sobre el idioma), dir (dirección del texto)Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Ejemplo:
<p>
Muerde mi brillante <strong>trasero</strong>.
</p>
2. Acronym
Acromym de acromyn=acrónimo
Es el encargado para marcar estas formas abreviadas (modem, AJAX…). Además, gracias al atributo title podemos indicar la versión extendida del término.
Sus etiquetas son: <abbr> y </abbr> ; <acronym> y </acronym>.
Crea una caja: en linea.
Está definido como: Elemento de frase.
Puede contener: cero o más elementos en linea
Atributos
| atributo | descripción | valor | por omisión |
|---|---|---|---|
| Genéricos | |||
| title | Texto informativo o título del elemento. Suele mostrarse a modo de “tool tip”. | Texto legible. Sensible a M/m. | Lo fija el navegador. |
| id | Le da un nombre al elemento que lo diferencia de todos los demás del documento. | Un nombre único. Sensible a M/m. | Lo fija el navegador. |
| class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | Lista de clases separadas por espacio en blanco. Sensible a M/m. cdata | Lo fija el navegador. |
| style | Permite especificar información de estilo. Por defecto, estilos CSS. | Declaraciones de estilo. | Lo fija el navegador. |
| lang | Información sobre el idioma del contenido del elemento y del valor de sus atributos. | Un código de idioma. | Lo fija el navegador. PD.: “desconocido”. |
| dir | Indica la dirección de texto y tablas. | Uno de los siguientes: ‘ltr’ o ‘rtl’. | Lo fija el navegador. PD.: En castellano ‘ltr’. |
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. | |||
| Específicos | |||
| No tiene | |||
| De transición | |||
| No tiene | |||
| atributo | descripción | valor | por omisión |
Ejemplo:
<p>
En <abbr lang="en" title="Planet Express">P.Ex</abbr> pensamos que nuestra trupulación es
<span style='border-bottom: dotted thin;'
title='esto no es ni una abreviatura ni un acrónimo'>descartable</span>, pero su paquete no.
<acronym lang="en" title="Profesor Hubert Farnsworth"> By el Profesor</acronym>.
</p>
Es interesante copiar estos elementos en Visual Studio Code para comprender cómo funcionan cada uno de los elementos.
3. span
span – abarcar. Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.
Sus etiquetas son: <span> y </span> (ambas obligatorias).
Está definido como: Elemento especial, y por lo tanto en línea.
Crea una caja: En línea.
Puede contener: Texto, y/o Elementos en línea.
Atributos
| atributo | descripción | valor |
|---|---|---|
| Genéricos | ||
| title | Texto informativo o título del elemento. Suele mostrarse a modo de “tool tip”. | Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador. |
| id | Le da un nombre al elemento que lo diferencia de todos los demás del documento. | Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador. |
| class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador. |
| style | Permite especificar información de estilo. Por defecto, estilos CSS. | Declaraciones de estilo. Por defecto: Lo fija el navegador. |
| lang | Información sobre el idioma del contenido del elemento y del valor de sus atributos. | Un código de idioma. Por defecto: “desconocido”. Lo fija el navegador. |
| dir | Indica la dirección de texto y tablas. | Uno de los siguientes: ‘ltr’ o ‘rtl’. Por defecto: En castellano ‘ltr’. Lo fija el navegador. |
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. | ||
| Específicos | ||
datasrc | Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros. | Una dirección URI. Por defecto: Lo fija el navegador. |
datafld | El nombre de una propiedad o columna de datasrc. Reservado para posibles usos futuros. | Por defecto: Lo fija el navegador. |
dataformatas | Indica como deben ser tratados los datos obtenidos de datasrc. Reservado para posibles usos futuros. | Uno de los siguientes: 'paintext' o 'html‘. Por defecto: 'plaintext' |
| De transición | ||
| No tiene | ||
| atributo | descripción | valor |
Ejemplo de span
código:
<div style="border: 1px dotted blue;">
<h4>Bender sobre la amistad con Fry</h4>
<p>
Fry, de todos los amigos que he tenido,
<span style="color: red;"> tú eres… el único. </span>
</p>
</div>
Toca trabajar con nuestro ejemplo
Entonces, ahora que conocemos las etiquetas necesarias, podremos ayudar a Planet Express a realizar un anuncio para su web de paquetería.
Si se considera el siguiente ejemplo:
Importante: si quiere ponerse en contacto con Planet Express, puede hacerlo por olorovisión o a través de la dirección de correo electrónico bender@planetexpress.com
El texto del ejemplo anterior contiene elementos de texto importantes, siglas, números de teléfono y direcciones de correo electrónico. El HTML define la etiqueta <strong> para marcar los elementos importantes y <acronym> para marcar las siglas:
Añadiendo Strong y Acronym a nuestro ejemplo
<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym lang="en" title="Planet express mensajería interplanetaria">Planet express</acronym>, puede hacerlo por olorovisión o a través de la dirección de correo electrónico bender@planetexpress.com
Brindándole más información a nuestro navegador con el spam
Desafortunadamente, XHTML no define ninguna etiqueta específica para marcar números de teléfono o direcciones de correo electrónico. De la misma forma, no define etiquetas para otros posibles elementos que se pueden encontrar en los contenidos de texto.
Por este motivo, el estándar HTML/XHTML incluye una etiqueta llamada <span> que se emplea para marcar cualquier elemento que no se puede marcar con las otras etiquetas definidas.
Siguiendo con el ejemplo anterior, la etiqueta <span> se utiliza para marcar el teléfono y la dirección de correo electrónico:
<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym lang="en" title="Planet express mensajería interplanetaria">Planet express</acronym>, puede hacerlo por olorovisión al <span>900 555 555</span> o a través de la dirección de correo electrónico <span>bender@planetexpress.com</span>
La etiqueta <span> se visualiza por defecto con el mismo aspecto que el texto normal. Por tanto, es habitual utilizar esta etiqueta junto con los atributos id y class para modificar posteriormente su aspecto con CSS:
<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym lang="en" title="Planet express mensajería interplanetaria">Planet express</acronym>, puede hacerlo por olorovisión al <span class="telefono">900 555 555</span> o a través de la dirección de correo electrónico <span class="email">bender@planetexpress.com</span>
Como detalle extra: La etiqueta <span> solo se puede utilizar para encerrar contenidos y etiquetas en línea. Cuando se quieren estructurar elementos de bloque, se usa la etiqueta <div>, tal y como se verá en capítulos posteriores. Sí bien, usamos <div> en uno de los ejemplo, era necesario mencionar a que el detalle vendrá a futuro.
