HTML BÁSICO: ENTIENDE EL CÓDIGO DE TU BLOG

Tener un mayor control de tu blog, con soluciones a la mano y la libertad para llevar a cabo tus ideas de diseño y usabilidad, es una realidad a la que te lleva entender y usar el HTML.

A modo de introducción, hoy te muestro de qué se trata, cómo funciona y cómo utilizarlo en algunos casos básicos puntuales.

HTML Básico: Entiende el código de tu blog

¿Qué es HTML?

El HTML (HyperText Markup Language), es el lenguaje en el que están escritas las páginas web.

Para poder visualizar el sitio web escrito en HTML, necesitamos un navegador (Chrome, Firefox, Internet Explorer), que ‘traduzca’ el documento .html a lo que veremos en pantalla.

Al igual que cualquier otro lenguaje, el HTML tiene su propia sintaxis, es decir, reglas y principios que indican cómo deben ordenarse y combinarse los elementos.

Reglas principales:

  • Cada una de las etiquetas que componen un elemento, deben ir dentro de <>, por ejemplo <head>, <title>, <body>.

Un elemento está conformado por  <una etiqueta de inicio> + contenido + </una etiqueta de cierre>.

html_elemento

  • Casi siempre hay una etiqueta de inicio y una de cierre, pero algunas etiquetas, llamadas etiquetas vacías, no necesitan cerrarse. Por ejemplo, la etiqueta salto de línea <br>.
  • Todo documento HTML empieza siempre con: <!DOCTYPE html> lo cual le indica al navegador que el lenguaje que está leyendo es HTML.
  • A continuación siempre va <html>que da inicio al documento… Y finaliza con </html>, que es la etiqueta de cierre.
  • La estructura básica de un documento HTML está conformada por las etiquetas <!Doctype>,<html>, <head> y <body>.

1. Cómo dar formato al texto con HTML

Negrita y cursiva.

Hay dos maneras de resaltar un texto con negrita: con la etiqueta <b> (bold) y con la etiqueta <strong>.

La diferencia entre ellas es que la primera solo indica un énfasis físico, mientras que la segunda indica un énfasis conceptual, es decir, cuando usamos <b> los navegadores solo interpretan que el texto debe ir de un color más fuerte, mientras que con <strong> los navegadores y buscadores reconocen al texto como MUY importante, y lo tratan y posicionan como tal, por eso lo resaltan con negrita, pero en algún momento podrían resaltarlo de otra manera.

Es igual para las etiquetas <i> (italic), que solo señala que el texto debe ir en cursiva, y la etiqueta <em>, que los navegadores leen como  texto “importante” (en menor escala que <strong>), y lo muestran en cursiva para señalar esa importancia.

La etiqueta <u>, usada para subrayar, está en desuso. 

html_formato_texto

2. Cómo enlazar un texto con HTML

Para crear un enlace utiliza la etiqueta <a> (anchor), y el atributo: href (hypertext reference), que le indica a <a> el enlace al que queremos ir. 

Continuamos con el texto al que el usuario dará clic, para acceder al sitio enlazado.

Para colocar una descripción, que se vea al pasar el cursor por encima de la foto, usa el atributo title.

Finalizamos con la etiqueta de cierre </a>.

html_texto_con_enlace

3. Abrir enlace del texto en ventana nueva

Para abrir el texto enlazado en una ventana nueva, solo tenemos que agregar: target=”blank”

html_texto_con_enlace_abrir_ventana_nueva

4. Cómo añadir una imagen con HTML

Para añadir una imagen necesitas la etiqueta <img> (image) y el atributo src (source=fuente) que le indica a <img> la ubicación de la imagen.

Para colocar una descripción, que se vea al pasar el cursor por encima de la foto, usa el atributo title.

<img> es una de las etiquetas que no necesita cierre.

html_añadir_imagen

5. Cómo añadir una imagen con enlace con HTML

Al igual que con el texto, para enlazar una imagen, usamos la etiqueta <a> (anchor) y el atributo: href (hypertext reference), que le indica a <a> el enlace al que queremos ir.

A continuación colocamos la etiqueta <img> (image) y el atributo src (source=fuente) que le indica a <img> la ubicación de la imagen.

Si quieres una pequeña descripción emergente, al pasar el cursor por la imagen, usa title.

Si quieres que el enlace se abra en una ventana nueva, usa target=”_blank”

html_añadir_imagen_con_enlace

6. Cómo hacer listas ordenadas con HTML

Las listas ordenadas son las que están numeradas.

Para hacerlas, usa las etiquetas <ol> (ordered list) y <li> (list item).

html_listas_ordenadas

7. Cómo hacer listas NO ordenadas con HTML

Las listas no ordenadas son las que en lugar de números se presentan con símbolos, como puntos o guiones.

Para hacerlas usa las etiquetas <ul> (unordered list) y <li> (list item).

html_listas_no_ordenadas

8. Tamaño de títulos

En HTML se pueden crear títulos de hasta seis niveles de importancia.

La etiqueta <h1> es la de mayor importancia y <h6> la de menor.

html_tamano_titulos

9. Citas

La etiqueta <blockquote> introduce una doble sangría, derecha e izquierda, al texto seleccionado, resaltándolo del resto.

html_citas

Es común (y aceptable) la práctica de copiar y pegar el código, lo recomendable es que vayas un poco más allá y lo comprendas, solo así podrás ajustarlo a tus necesidades y aprovecharlo en su totalidad.

Anuncios

18 comentarios en “HTML BÁSICO: ENTIENDE EL CÓDIGO DE TU BLOG

    • El uso de alt es más para indicarle el contenido de la imagen a los buscadores. Generalmente esta descripción no se ve cuando pasas el cursor por encima (creo que solo en Internet Explorer).

      Lo ideal es usar los dos atributos, cada uno para su función.

  1. Hola, he visto tu post a través de la entrada de hoy de Maider. Esta muy bien explicado y super interesante.
    Tengo un blog también, me gusta el diseño gráfico aunque no soy diseñadora. ;-) Pero me apaño. Tengo que ir avanzado con Ilustrator.
    Te sigo.
    Un abrazo,
    Anne

  2. Acabo de descubrir este blog… Ge-nial! Qué letra estás utilizando para el cuerpo de los posts? Es monísima! Y gracias por la info del HTML.. todavía me estoy familiarizando con él!

  3. Esto esta genial!! Siempre que hago una entrada y pongo vista html empiezo a ver letras y números y no entiendo nada, para crear el índice del blog necesité una tarde entera jajaja.
    Mucho más claro! Gracias:P

  4. Gracias Karen, me podrías ayudar? en mi blog en la plantilla que tengo instalada el texto aparece en sombreado y me gustaría quitarlo pero no encuentro la forma…qué tengo que buscar en html?

    Besos mil

    • Hola Marta, si te refieres a la sombra que tienen los títulos, en la sección Variable definitions puedes hacerlas “invisibles”.

      Creo que modificar el color es una algo práctico, y más fácil de explicar por aquí.

      Antes que todo, recuerda hacer una copia de seguridad de tu plantilla.

      Este es el código correspondiente al color de las sombras. Para encontrarlo, puedes ayudarte escribiendo, por ejemplo, titleshadow en el buscador (Ctrl+F).

       <Variable name="blogTitleShadowColor" description="Blog Title Shadow Color" type="color" default="#bbbbbb" value="#bbbbbb">
      <Variable name="blogTitleShadowColor2" description="Blog Title Shadow Color2" type="color" default="#f5f5f5" value="#f5f5f5">
      <Variable name="postTitleShadowColor" description="Post Title Shadow Color" type="color" default="#bebebe" value="#bebebe">
      <Variable name="postTitleShadowColor2" description="Post Title Shadow Color2" type="color" default="#f5f5f5" value="#f5f5f5">
      <Variable name="sideTitleShadowColor" description="Side Title Shadow Color" type="color" default="#bbbbbb" value="#bbbbbb">
      <Variable name="sideTitleShadowColor2" description="Side Title Shadow Color2" type="color" default="#f5f5f5" value="#f5f5f5"> 

      Las dos primeras líneas corresponden a la sombra del título de la cabecera.
      Las dos del medio, a la de los títulos de las publicaciones.
      Y las dos últimas, a la de los títulos de la barra lateral.

      Selecciona las que quieras modificar, y bórralas (sí solo quieres quitar la sombra de los títulos de las publicaciones, borra solo las 2 líneas de código del centro).
      Guarda los cambios, y listo.

      Un saludo.

    • La otra opción, si no quieres borrar código de tu plantilla, es buscar con Ctrl+F text-shadow en cada elemento que quieras modificar (header, post, sidebar) y cambiar sus valores a 0px (cero pixeles).

  5. Hola Karen… te acabo de descubrir buscando información sobre HTML y me gusta mucho tu blog… por cierto, compartimos mismos conceptos de diseño… ;-)
    Me temo que te voy a hacer una pregunta tan básica que se te pondrán los pelos de punta pero allá voy porque estoy a pesar de llevar ya 5 meses escribiendo no tengo ni idea de HTML y lo peor… no lo encuentro en mi escritorio de WordPress.com… ¿me puedes ayudar con esto último? ¿dónde está que no lo veo? muchas gracias y enhorabuena porque tu blog me parece my util y con una estética muy atractiva (ya de paso parece que barro para casa…jajajaja) . ¡Un saludo!

    • ¡Hola! Gracias a ti. Me alegra que guste el blog y te resulte útil.
      El HTML lo puedes escribir o modificar desde el editor de entradas (donde escribes tus posts), haciendo clic en la pestaña “Texto”.
      La pestaña “Texto” está ubicada en la parte superior derecha del editor, junto a la pestaña “Visual” que es la vista por defecto.
      ¡Saludos!

  6. Pingback: Os Widgets no WordPress |

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s