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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 62
Visitas el mes pasado: 269
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.
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.
A diferencia de las etiquetas de bloque, las etiquetas en línea no provocan ningún salto de línea, de manera que tanto el texto anterior como el posterior siguen en la misma línea. La mayoría de estas etiquetas provocan un cambio de estilo en el texto, no modificando la estructura del mismo (no se cambian párrafos ni títulos).
La mayoría de estas etiquetas pueden ser reemplazadas por el lenguaje CSS, sin embargo muchas de ellas se siguen usando por su sencillez y practicidad. En el resto de esta página escribiremos en azul lo referente a las etiquetas que apenas se usan, bien porque hay otra etiqueta más sencilla que ejerce la misma función, o bien porque se suele usar código CSS.
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.
Frecuencia de estas etiquetas
Excepto las etiquetas de negrita, cursiva y subrayado, las demás suelen tener una frecuencia de uso escasa. Todas las etiquetas vistas en esta página 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 los saltos de línea y otras etiquetas para el texto:
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com