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.
¿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>.
- 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 señalado 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.
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>.
4. Abrir enlace del texto en ventana nueva
Para abrir el texto enlazado en una ventana nueva, solo tenemos que agregar: target=”blank”
5. 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.
6. 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”
7. 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).
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).
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.
9. Citas
La etiqueta <blockquote> introduce una doble sangría, derecha e izquierda, al texto seleccionado, resaltándolo del resto.
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.
¡Hasta pronto!
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure