Noticia aleatoria: Ubuntu portable

Si te ha gustado este post, no olvides suscribirte al Feed RSS de Geek the Planet, ya sea vía RSS o vía e-Mail y recibe diariamente nuestras actualizaciones. También ya nos puedes seguir en Twitter.

Etiquetas HTML que deberias conocer

Es común que un diseñador/desarrollador programe en múltiples lenguajes, por esta razón,es muy dificil sacarle el máximo de potencial a cada lenguaje.

En esta ocasión les mostraré 10 etiquetas HTML, que tal vez muchos hayamos visto, pero que estoy seguro nunca o casi nunca hemos utilizado.

  1. cite: Todos conocemos la etiquete blockquote, que se utiliza normalmente para poner citas, sabian que tiene un hermanito?, sí, es la etiqueta CITE, que se utiliza comunmente para mostrar referencias y citas bibiliográficas.
  2. optgroup: Esta etiquita es una gran manera de añadir un poco de definición entre los grupos de opciones dentro de una caja de selección. Si usted necesita mostrar una serie de películas de cine dependiendo del horario de presentación, seria por ejemplo:
    <label for="showtimes">Showtimes</label>
    <select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select>

    Demo:

  3. acronym: Esta etiqueta es muy útil cuando queremos mostrar el significado de una sigla, por ejemplo (si se paran sobre la palabra SEO podrán ver la caja de texto):
  4. <acronym title="Search Engine Optimization">SEO</acronym> is full of trickery and magic

    Demo: SEO is full of trickery and magic.

  5. address: Esta etiqueta es exactamente para lo que están pensando, sirve para mostrar una dirección de una manera un poco elegante mediante HTML, por ejemplo:
    <address>Glen Stansberry
    1234 Web Dev Lane
    Anywhere, USA
    </address>
  6. ins y del: Este par de etiquetes tal vez sean un poco más usadas, ins sirve para mostrar un texto subrayado y del sirve para mostrarlo tachado, por ejemplo:
    John <del>likes</del> <ins>LOVES</ins> his new iPod.
  7. abrr: Esta etiqueta es muy parecida al acronym, es fácil darse cuenta que sirve para abreviaturas, por ejemplo:
  8. <abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.
    
  9. rel: Esta etiqueta no he sabido bien como funcion, es útil de manera local, y podemos ver más claramente su funcionamiento cuando intentamos agregar un enlace a nuestro blogroll, que nos preguntan si es un contacto, un familiar, un amigo, etc, por ejemplo:
    <a rel="clickable" href="page.html">This link is editable</a>
  10. wbr: Esta etiqueta nunca la habia visto, las anteriores 7 si las conocia, pero esta no se ni de donde salio, igualmente su uso es bastante raro, dudo que alguien alguna vez la vaya a usar, sirve para insertar un salto de línea dentro de un texto, donde el diseñador lo crea conveniente, por ejemplo:
    <span>How do you say Supercalifragilistic<wbr>expialidocious?</span>
  11. bdo: Pensada para elegir la dirección del texto (de izquierda a derecha o de derecha a izquierda). Es obligatorio especificar el atributo dir, con el valor rtl (de derecha a izquierda) o ltr (de izquierda a derecha), por ejemplo:
    <bdo dir="rtl">Esta frase está escrita al derecho, pero debería leerse al revés</bdo>

    Demo:
    Esta frase está escrita al derecho, pero debería leerse al revés

  12. kbd: Pensada para identificar el texto que debe teclear el usuario, por ejemplo:
    En Amaya, para seleccionar un elemento, debes pulsar la tecla <kbd>F2</kbd>
    
  13. var: Pensada para identificar una instancia de una variable o de un argumento de programa, por ejemplo:
    <var>$saludo</var> = "Hola, mundo";

Como verán del post original he quitado un par de etiquetas y en compensación he puesto otras, bastante curiosas y poco usadas por cierto; por otro lado no puse en todos un ejemplo, por la sencilla razón que no tengo su definición en mi CSS y no vale la pena hacerlo para un solo ejemplo.

Visto en: Net Tuts plus

Ver Más: McLibre

, , , , , , , , , , , , ,

4 Comentarios

  1. Exelente el lo personal uso html pero me gustaria aprender php no me podrias mostar unos buenos tutoriales!!

    ↵ Responder
  2. Torrecilla February 22nd, 2010

    Muy buenas, pero yo estudio HTML y CSS a profundidad, y ya vi todas las etiquetas con todos sus atributos y las propiedades CSS con todos sus valores xd no son desconocidas para mi xd

    ↵ Responder
  3. Francisco March 17th, 2010

    ¿Existe una etiqueta cite?
    Yo tenía entendido que cite era un atributo de la etiqueta blockquote en el que se colocaba la URL de donde se obtuvo el texto. Como referencia.

    ↵ Responder
  4. @Francisco: Claro Francisco, la etiqueta cite existe, en esta web puede encontrar más info: http://www.w3schools.com/tags/tag_phrase_elements.asp

    ↵ Responder

Comentar