Etiquetas de texto

Domingo, 23 de diciembre de 2012.Publicado en Secciones » Tutoriales.
Hola creativos, muchos de nosotros como bloggers escribimos nuestras entradas utilizando usualmente las que blogger nos brinda fácilmente en una barra superior de donde escribimos. Esta barra nos fácilita el uso de estilos como:

<strike>tachado</strike> = <s>tachado<s>
<i>cursiva</i> = <em>em</em>
<b>negrita</b> = <strong>strong</strong>
<u>subrayado</u>
listas <ol>ordenadas numericamente</ol> (ordenadas)
listas con<ul>viñetas</ul> (desordenadas).

Pues yo les mostraré algunas que quizás no conocían. Espero les puedan servir en algún momento pues le da un mejor aspecto a nuestras entradas.

Etiqueta big: Ésta etiqueta agranda el tamaño del texto encerrado en ella. Se puede utilizar de manera repetida (sin limites, pueden ser 1, 2, 3, 4, 5....) para hacerlo crecer todavía más. Ejemplo:
Sin big
Big x1 = <big>Big x1</big>
Big x2 = <big><big>Big x2</big></big>
Big x3 = <big><big><big>Big x3</big></big></big>

Etiqueta Small: Ésta etiqueta es contraria a la etiqueta big, ésta en su caso disminuye el tamaño del texto. Tiene el mismo efecto que la etiqueta anterior y se puede usar repetidas ocasiones en un mismo texto. Ejemplo:
Sin Small
Small x1 = <small>Small x1</small>
Small x2 = <small><small>Small x2</small></small>
Small x3 = <small><small><small>Small x3</small></small></small>

Etiqueta Blink: Ésta etiqueta hace parpadear el texto. Quizás le puedan encontrar un buen uso para algún aviso o texto con el que quieran llamar la atención. Ejemplo:
Texto con etiqueta blink = <blink>Texto con etiqueta blink</blink>

Etiqueta Code o kbd o tt: Éstas etiqueta sirven para cambiar el estilo de texto y que parezca escrito con letra de maquina de escribir, las tres funcionan de la misma manera y dan el mismo resultado. Ejemplo:
Texto con etiqueta code... = <code>Texto con etiqueta code...</code>
Texto con etiqueta kbd... = <kbd>Texto con etiqueta kbd...</kbd>
Texto con etiqueta tt... = <tt>Texto con etiqueta tt...</tt>

Etiquetas Samp y pre: Se utiliza para mostrar un ejemplo en pantalla, por lo general un código html, un script, etc. Es similar en uso a la etiqueta code. Y tenemos también la etiqueta Pre con la misma función, pero como se darán cuenta automáticamente baja el texto que le continua a la siguiente línea. Ejemplo:
Texto con etiqueta Samp = <samp>Texto con etiqueta Samp</samp>
Texto con etiqueta Pre
= <pre>Texto con etiqueta Pre</pre>

Etiqueta h1, h2, h3, h4, h5: Éstas etiquetas sirven como títulos, cada blog tiene diferentes de acuerdo a su diseño CSS, pero todas se pueden editar. Cada una tiene diferente tamaño siendo h1 la más grande y h6 la más pequeña. Primero pueden usarlas para ver si les agradan las que ya tienen prediseñadas en su blog. Ejemplo:

Título h1

= <h1>Título h1</h1>

Título h2

= <h2>Título h2</h2>

Título h3

= <h3>Título h3</h3>

Título h4

= <h4>Título h4</h4>

Título h5
= <h5>Título h5</h5>

Título h6
= <h6>Título h6</h6>


[Por alguna razón, quizás la configuración del CSS de mi blog, la entrada no muestra correctamente las siguientes etiquetas. Aun así pueden usarlas en su blog para comprobarlas]


Etiqueta Sup: Ésta etiqueta sirve para convertir el texto en superíndice. Ejemplo:
Etiqueta con superíndice = Etiqueta con <sup>superíndice</sup>

Etiqueta Sub: Ésta etiqueta sirve para convertir el texto en subíndice. Ejemplo:
Etiqueta con subíndice = Etiqueta con <sub>subíndice</sub>

Etiqueta Cite: Ésta etiqueta sirve para escribir una cita de un libro por ejemplo, el efecto es parecido al de la etiqueta de la etiqueta cursiva. Ejemplo:
Cita de un libro... = <cite>Cita de un libro...</cite>

Etiqueta Adress: Ésta etiqueta sirve para escribir la dirección URL del autor, al menos con ese motivo fué creada, pero se puede conseguir un efecto como el de la etiqueta cite o cursiva. Ejemplo:
Etiqueta adress... = <adress>Etiqueta adress...</adress>

[Algunas etiquetas extras...]


Etiqueta br: Ésta etiqueta sirve para crear un salto de línea, si la ponemos al final de un texto, este se saltará al siguiente renglon. Si ponemos 2 veces la etiqueta este dejará doble renglón y el texto que le preceda parecera otro párrafo.

Esta etiqueta como en todas se debe cerrar de la manera tradicional<br></br>, pero como no se debe incluir nada entre esas etiquetas se usa un estilo abreviado así <br />, Ejemplo:
Texto, Fin del renglón
Inicio del otro.

= Texto, Fin del renglón<br />Inicio del otro.

Texto, Fin del renglón

Inicio del otro, dejando un renglón vacío.


= Texto, Fin del renglón<br /><br />Inicio del otro, dejando un renglón vacío.
Etiqueta hr: Ésta etiqueta sirve para crear una línea horizontal como división en nuestra entrada, blog, etc. De igual manera se utiliza su estilo abreviado Ejemplo:
Texto anterior a la división

Inicio del que sigue a la división

= Texto anterior a la división<hr />Inicio del que sigue a la división.

Etiqueta marquee: Ésta etiqueta sirve para crear marquesina, son textos que se desplazan en una dirección, hay formas más complejas de personalizarlo, pero daré las más comunes. Ejemplo:
Texto en marquesinas que se desplaza rápido.Texto en marquesinas que se desplaza normal.Texto en marquesinas que se desplaza lento. =
<marquee direction="right" scrolldelay="10">Texto en marquesinas que se desplaza rápido.</marquee>
<marquee direction="right" scrolldelay="150">Texto en marquesinas que se desplaza normal.</marquee>
<marquee direction="right" scrolldelay="300">Texto en marquesinas que se desplaza lento.</marquee>

[NOTA]: Pueden cambiar los valores de direction que esta claro que es la dirección en la que se movera: up, down, right, left. y de scrolldelay que es la velocidad en milisegundos, mientras menor sea el número, mayor será su velocidad.
Actualizado el día miércoles, 5 de febrero de 2014.

COMENTARIOS BLOGGER

  1. Excelente entrada amigo!
    Hace un tiempo vi en un blog que tenía un texto que se movía. Busqué y busqué y nunca hallé como hacerlo x)
    Ahora lo sé :P
    Gracias :D

    ResponderEliminar
  2. Jeje Me alegra que te sirva amigo.
    Saludos y gracias por comentar C=

    ResponderEliminar

No te pierdas ninguna publicación... suscríbete y recíbelas por correo electrónico »

Creative Commons License
Todas las fotografías y diseños de Luis Alejandro Corona se encuentran bajo una Licencia Creative Commons 4.0. Esto significa que si quieres usar mis imágenes para cualquier página web puedes hacerlo, es simple, solo tienes que mencionar al autor (que soy yo) y poner un enlace a este blog o a alguna de mis redes sociales. Para cualquier otro uso ponte en contacto conmigo. Las imágenes de terceros que hay en el blog están bajo la licencia de sus legítimos propietarios.
© 2017 Luis Alejandro Corona Ramírez. Todos los derechos reservados - All Rights Reserver. + Info ( Volver arriba ↑ )