Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 107

Visitas el mes pasado: 130

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




2. Insertar textos en HTML (II)

2.2 Etiquetas en línea.

html

Las etiquetas en línea son aquellas que modifican el texto para darle otro aspecto, Entre ellas distinguimos las de texto en negrita, las de texto en cursiva, las de subrayado y tachado, las de subíndice y superíndice, las de citas, y otras.

Estas etiquetas tienen todas su apertura y su cierre; El texto que queremos modificar debe ir encerrado entre estas dos etiquetas. También pueden anidarse unas dentro de otras de manera que consigamos resultados diferentes.


Etiquetas de texto en negrita

- Etiqueta <b> ... </b>

Etiqueta para texto en negrita. Es la más utilizada, por ser también la más corta de escribir. El aspecto del texto con esta etiqueta es el siguiente:

Texto escrito dentro de una etiqueta b

Aunque apenas se utiliza apenas también podemos usar la etiqueta <strong> ... </strong> para poner el texto en negrita. El resultado es el mismo que en la anterior.


Etiquetas de texto en Cursiva

- Etiqueta <i> ... </i>

Etiqueta para texto en cursiva. Es la más utilizada, por ser también la más corta de escribir. El aspecto del texto con esta etiqueta es el siguiente:

Texto escrito dentro de una etiqueta i

También podemos utilizar la etiqueta <em> ... </em> para el texto en cursiva


Etiquetas de subrayado y tachado

- Etiqueta <u> ... </u>

Etiqueta para subrayado de texto. Es la más utilizada, por ser también la más corta de escribir. El aspecto del texto con esta etiqueta es el siguiente:

Texto escrito dentro de una etiqueta u

También podemos utilizar la etiqueta <ins> ... </ins> para el subryado del texto.

- Etiqueta <s> ... </s>

Etiqueta para tachado de texto. Es la más utilizada, por ser también la más corta de escribir. El aspecto del texto con esta etiqueta es el siguiente:

Texto escrito dentro de una etiqueta s

También podemos utilizar las siguientes etiquetas para el tachado del texto:

- Etiqueta <strike> ... </strike>

- Etiqueta <del> ... </del>


Etiquetas de subindice y superindice.

El texto en subindice o superindice es de un tamaño más pequeño que el normal, y está está por debajo o por encima de éste. Se suele emplear sobre todo en términos matemáticos y cientíticos (Potencias, fórmulas químicas, etc.)

- Etiqueta <sub> ... </sub>

Etiqueta para texto en subindice. El aspecto del texto con esta etiqueta se ve en la siguiente fórmula (en subindice los números 4 y 10)

La fórmula del butano es C4H10

- Etiqueta <sup> ... </sup>

Etiqueta para texto ensuperindice. El aspecto del texto con esta etiqueta se ve en la siguiente igualdad matemática (en superíndice los números 4 y 2)

54 = 252


Etiquetas de remarcar palabras.

- Etiqueta <abbr> ... </abbr>

Se emplea para marcar abreviaturas. La etiqueta puede llevar un atributo title="texto" donde en "texto" introducimos el significado de la abreviatura. Algunos navegadores muestran por defecto un borde inferior punteado. Al posicionar el puntero del ratón sobre la palabra subrayada, el navegador muestra un pequeño recuadro (llamado tooltip en inglés) con el valor del atributo title:

Veamos un ejemplo en el que se muestra el código y su resultado en el navegador:

código:

<p>Dirección: <abbr title="avenida"> Avda </abbr> Diagonal <abbr title="número"> num </abbr> 235 <abbr title="puerta"> pta </abbr> 5 </p>

En el navegador veremos:

Dirección: Avda Diagonal num 235 pta 5

- Etiqueta <acronym> ... </acronym>

Se emplea para marcar acrónimos o siglas, y su funcionamiento es igual que la anterior. al igual que ésta también se le puede añadir el atributo title y el navegador mostratrá también un recuadro con la explicación del acrónimo.

Veamos un ejemplo en el que se muestra el código y su resultado en el navegador:

código:

<p> Las páginas Web se escriben mediante el lenguaje <acronym title="HyperText Markup Language">HTML</acronym> y el código de estilo <acronym title="Cascading Style Sheets">CSS</acronym>. </p>

En el navegador veremos:

Las páginas Web se escriben mediante el lenguaje HTML y el código de estilo CSS.

- Etiqueta <dfn> ... </dfn>

Funciona igual que las dos anteriores, y sirve para marcar la definición de una palabra o grupo de palabras. Tambien utiliza el atributo title con la misma utilidad. la diferencia con las anteriores es que no subraya las palabras.

Veamos un ejemplo en el que se muestra el código y su resultado en el navegador:

código:

<p> El código <dfn title="Código de programación para construir sitios Web interactivos">javascript</dfn> se utiliza para crear <dfn title="páginas cuyo contenido se genera a partir de lo que un usuario introduce">sitios Web dinámicos </dfn></p>

En el navegador veremos:

El código javascript se utiliza para crear sitios Web dinámicos


Etiquetas de citas

- Etiqueta <cite> ... </cite>

Aunque en la práctica tiene el mismo efecto que las etiquetas para texto en cursiva, se emplea para marcar el autor o fuente de donde proviene una cita. Al igual que las etiquetas anteriores también puede llevar el atributo title

código:

Extracto del libro <cite title="pag. 77 a 80">El señor de los Anillos</cite> de <cite title="escritor británico, poeta, filólogo">John Ronald Reuel Tolkien.</cite>

Vista en el navegador:

Extracto del libro El señor de los Anillos de John Ronald Reuel Tolkien.

- Etiqueta <blockquote> ... </blockquote>

Se emplea para insertar el texto de una cita En el atributo cite podemos indicar la dirección de la Web de donde se extrae la cita.

pulsa en el siguiente enlace para ver un ejemplo: Ver ejemplo 1


Otras etiquetas:

- Etiqueta <tt> ... </tt>

Cambia la letra a un tamaño fijo, y da un estilo parecido al de una máquina de escribir mecánica. El aspecto del texto con esta etiqueta es el siguiente:

Texto escrito dentro de la etiqueta "tt"

- Etiqueta <center> ... </center>

Se emplea para centrar el texto en la página. Esta etiqueta es de bloque, es decir, provoca un salto de línea antes y después del texto.

pulsa en el siguiente enlace para ver un ejemplo: Ver ejemplo 2

Esta etiqueta no se suele usar ya que es sustituida por la alinieación de texto mediante el lenguaje CSS.

- Etiqueta <blink> ... </blink>

Se emplea para insertar texto parpadeante. El aspecto del texto con esta etiqueta es el siguiente:

pulsa en el siguiente enlace para ver un ejemplo: Ver ejemplo 3


Frecuencia de estas etiquetas

Excepto las etiquetas de negrita, cursiva y subrayado, las demás suelen tener una frecuencia de uso escasa, incluso estas anteriores pueden ser sustituídas por código CSS. Sin embargo es útil conocerlas, ya que siempre pueden sacarnos de algún apuro.




En la siguiente página veremos saltos de línea y otras etiquetas para el texto:

Otras etiquetas



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com