Sin categoría

Html Básico para escribir posts.

Aunque con los editores WYSIWYG es fácil añadir diferentes estilos a nuestros posts, hay más opciones posibles además de las que suelen ofrecernos por defecto. Para conseguirlo, toca escribir un poco más, pero a veces los resultados merecen la pena.

Resaltar frases del texto
Para realizar esto, existe algún plugin, pero si lo realizamos nosotros nos da un mayor control.

<font size=3><div style="width:150px;height:80px;float: right;border-top: 1px solid #000; border-bottom: 2px solid #000; padding: 5px;">El html dota de mayor atractivo a los artículos</div> </font>

El html dota de mayor atractivo a los artículos


Modificando el “float” con las opciones right o left, puedes situarlo a derecha o izquierda.

Citar a otra persona

Cuando vayas a citar lo dicho por otro bloguer o algo en otra web, utiliza la etiqueta <blockquote> Si quieres también puedes añadir las comillas típicas, (“ – &ldquo; ” – &rdquo;)

Alinear texto con imágenes.

Muchas plantillas para blogs definen una clase que puedes utilizar para alinear imágenes. No obstante, puedes definir el estilo directamente.

<img style="margin: 0 0 2px 5px; float: right;" src="ruta_imagen" /> Añadiendo esto alinear.png consigues alinear una imagen a la derecha, dejando el texto a su izquierda

<img style="margin: 0 5px 2px 0; float: left;" src="ruta_imagen" /> Añadiendo esto consigues alinear una imagen a la izquierda, dejando el texto a su derecha

Otros recursos

Si quieres añadir una linea horizontal puedes utilizar la etiqueta <hr />, puedes añadirle otros atributos como “width”, “size” (establece el grosor), etc..

En muchos editores cuando presionas intro para saltar de línea crea un nuevo párrafo, lo que deja un espacio entre líneas. Si lo que quieres es saltar de línea pero sin dejar un espacio usa la etiqueta <br />

Estas etiquetas son bastante útiles y yo mismo las suelo utilizar, ¿alguna idea más?

About the author

Dimas

View all posts

16 Comments

  • Sí, yo tengo una idea: no usar el tag font. Es preferible un estilo inline (bajo mi punto de vista).

    Font es un tag que ha desaparecido ya en la especificación de xhtml (aunque siga funcionando

    Salud!

  • Hola, el otro día para este post de mi blog innovación y utopía, necesitaba algo así, para mejorar el html para incluir posibles hipervinculos multidireccionales directamente en los posts.

    Bueno, tu aquí hablas de programación básica, pero ¿podría elaborarse algo más complejo mezclando buscadores personalizados y formularios de forma efectiva?. No soy muy bueno programando, pero la idea puede valer la pena. ¿Que opinas?

  • Muy bueno post, claro que no hay que olvidar ciertas cosas:
    * Que HTML no es un lenguaje de programación, es un lenguaje de marcar (a ver si así se le pierde un poco el miedo).
    * Que cada etiqueta tiene una de apertura y otra de cierre (menos la etiqueta de imagen <img>, es decir <blockquote> es un tag de apertura y tiene </blockquote> para cerrar la zona de cita.
    *Que, al igual que las tablas, es mejor reemplazar el tag <Font> por un estilo de fuentes como el siguiente: <div style=”font-size: x-large; width:150px;height:80px;float: right;border-top: 1px solid #000; border-bottom: 2px solid #000; padding: 5px;”>El html dota de mayor atractivo a los artículos</div> , donde x-large puede ser x-small, small, medium, large y x-large.

    Lo demás, viene con probar…
    Excelente blog!

  • Casi me da un ataque cardiaco con estos consejos …. coincido plenamente, NO USAR FONT .
    Para Gallego, el “strike” tampoco se recomienda ya; se le puede dar solución con puro CSS

    saludos!
    Mario

  • Te felicito por el blog porque me ha parecido sencillamente fabuloso. Oro en polvo. He llegado hasta el primer post que escribiste.

    Gracias por toda la información

    Salu2

  • Una corrección básica: el w3c (los que “inventaron” el HTML), recomienda que cuando se use “blockquote” no se añadan manualmente las comillas, ya que de eso se debe encargar el navegador/diseñador-web a través de la hoja de estilos (y como toda recomendación es altamente ignorable) ;).

    Como faltas indispensables en el artículo, los tags para hacer listas: “ul” (delimita listas sin orden, con viñetas), “ol” (delimita listas ordenadas, con números o cosas por el estilo), y “li” (delimita los elementos de cada lista); y los de titulares “h#” (donde # es un número del 1 al 6).

    Comentarios sobre los comentarios:

    #4, la mayor parte de las etiquetas se cierran, pero hay excepciones en las que se prohibe cerrarlas (p.ej. “br” o “hr”), y otras donde la etiqueta de cierre es opcional (p.ej. “p”).

    En un principio yo también me opongo a “font”, no aporta nada frente a un “span” con suficiente estilo (“span” y no “div”, el ejemplo de Daniel en #4 quedaría raro).

    Por otro lado, #5, “strike” sí aporta un significado que no aparece usando estilos CSS. Al igual que “strong” frente a “b” (para hacer negritas), o “em” frente a “i” (para hacer cursiva).

    Estos significados extra se pueden aprovechar, ya que aunque en un principio son cosas que una persona no ve, no sólo las personas ven las webs (p.ej. buscadores), y “ver” no es lo único que pueden hacer las personas con una web (p.ej. se puede oír con un sintetizador de voz).

  • Me ha resultado muy útil lo de alinear las imágenes.

    Yo también utilizo mucho target=”blank” para que el enlace se abra en una ventana independiente, y el usuario no pierda el hilo de la navegación en mi blog. Para los que no lo usan pongo un ejemplo: cuando mencionas un enlace a otra página en el código html aparece enlace. Para que ese enlace se abra en una ventana independiente ponemos enlace

    Espero haberme explicado.

  • Hola, pasaba por acá x primera vez, y me interesó muchisimo…
    Quiero mejorar mi blog, porque mi objetivo es q lo visiten porque es un poco de ayuda para muchos…
    Mi consulta es: cómo puedo agregar en la barra lateral un “contador de accesos”, es decir, quiero saber cuantas personas han entrado al blog desde el día que se creó…

    Porfavor contesten!
    gracias

  • Uno que considero bastante resultón (y que por mas vueltas que doy no consigo encontrar) es ese en el que la palabra está subrayada por puntos y al poner el raton encima, sale una pequeña explicación (perdonad, no conozco su nombre técnico)

    Lo he visto en un plugin de wordpress, pero en html no hay manera de encontrarlo.

    Creo que es interesante porque te añade una escueta explicación a unas siglas o iniciales, sin tener que añadir un vínculo

  • Hola May,

    recomendar es difícil, yo uso en el ordenador w.bloggar, que me resulta cómodo. Puedes probar también windows live writer o ecto disponible para mac y windows.

  • hola quisera saber si puedo cmabiar el color del texto al resaltar una frase y si se puede cómo lo hago. gracias. Muy buenos tus consejos.