Cómo trabajar con títulos y párrafos de texto en HTML

HTML tiene seis etiquetas de títulos/subtítulos: de “<h1>” hasta “<h6>”,

correspondiendo los números al nivel jerárquico.

Es decir, una etiqueta “<h1>” sería el nivel jerárquico máximo, “<h2>” los subtítulos
de los niveles h1 y así sucesivamente.

Por otra parte, los párrafos de texto normal se marcan con “<p>”.

Cómo crear listas en páginas web

Las listas son otro elemento indispensable en un contenido. Es muy fácil crearlas en
HTML, en el caso de las listas enumeradas se usa la etiqueta <ol> y en el caso de
las no enumeradas (con viñetas), se usa la etiqueta <ul>. En ambos casos se
usa <li> para los elementos de la lista.

Ejemplo:
<ol>

 <li>El primer punto</li>

  <li>El segundo punto</li>

  <li>El tercer punto</li>

</ol>

Cómo usar tablas en páginas web

Las tablas son un elemento ya algo más avanzado y, por tanto, aquí me limitará a

una estructura básica de tabla:

<table>

<tr>

<th>Nombre</th>

<th>Apellido</th>
 <th>Web</th>

</tr>

<tr>

<td>Amy</td>

<td>Porterfield</td>

<td>https://www.amyporterfield.com/</td>

</tr>

<tr>

<td>Pat</td>

<td>Flynn</td>

<td>https://www.smartpassiveincome.com/</td>

</tr>

</table>

<table>

<tr>

<th>Nombre</th>

<th>Apellido</th>

<th>Web</th>

</tr>

<tr>

<td>Amy</td>

<td>Porterfield</td>

<td>https://www.amyporterfield.com/</td>

</tr>
 <tr>

<td>Pat</td>

<td>Flynn</td>

<td>https://www.smartpassiveincome.com/</td>

</tr>

</table>

Aquí, la etiqueta <table>, como ya te puedes imaginar, demarca la tabla.

Dentro de ella, cualquier fila de cualquier tipo se demarca con <tr> que viene de

“table-row” (fila de tabla en inglés). Dentro de esto, puede haber diferentes tipos

de filas que se diferencian por el tipo de celdas que contienen.

En este ejemplo, tenemos una primera fila con celdas con la etiqueta <th> (“table

header”, cabecera de tabla en inglés) que actúan como cabecera y luego el resto,

serían celdas ordinarias con datos, <td>, “table data”

Insertar enlaces (links) en páginas HTML

Vamos ahora a lo que es la etiqueta por excelencia en una página web: la
etiqueta de un enlace.

Esta etiqueta es “<a>”, de “anchor” (ancla en inglés) y su sintaxis básica

es la siguiente:
<a target=”_blank” href=”[url del enlace]”>Texto del enlace</a>

<a target=”_blank” href=”[url del enlace]”>Texto del enlace</a>

La información clave, el enlace, viene en el atributo href, aquí debes insertar la

URL del sitio que quiere enlazar.

El atributo target también es muy importante. Sus valores más usados (y los

únicos que necesitas realmente en la práctica) son “_blank”, que quiere decir la

página del enlace se abre en una nueva pestaña/ventana, y “self”, que la abre en

la pestaña/ventana del documento actual.

Si omites este atributo o dejas el valor en blanco, se asume por defecto target =

”self”.

Insertar imágenes en una página HTML

La etiqueta HTML para insertar una imagen en HTML es <img> y su
sintaxis básica la siguiente:

<img src="[url de la

imagen]" alt="[texto]" height="100" width="50">

Aquí el atributo src es el equivalente a href en el caso del enlace anterior, es

decir, una URL que apunta a la imagen que quieres visualizar.

Por ejemplo:
http://midominio.com/imagenes/mi-imagen.png

Otro atributo muy importante es alt. Por una parte, porque en caso de que el

enlace a la imagen esté roto, visualizará un texto alternativo (de aquí, el nombre

de “alt” del atributo) que será el texto asociado a este atributo y, por otra parte,

porque Google lo tiene muy en cuenta para posicionar la imagen (en la búsqueda

de imágenes).

Los atributos height y width te permiten especificar las dimensiones a las que

ajustar la imagen en el navegador. De no ser esas las dimensiones originales de

la imagen, el navegador reducirá o ampliará la imagen, según corresponda, para

ajustarla a estas dimensiones.

No obstante, te recomiendo evitar usar este recurso y usar mejor reglas CSS

para dar los detalles de la maquetación de tus imágenes. En el apartado de

diseño, retomaré el tema CSS.

Cómo insertar audio y vídeo en páginas HTML

Hoy en día estamos acostumbrados a páginas web con vídeo y audio.

La tecnología ha avanzado mucho y es realmente simple trabajar con audio y

vídeo en la web.

Aquí vamos a diferenciar dos casos:

Insertar ficheros alojados por ti de audio y video en HTML (normalmente con

formatos MP3 y MP4).

Insertar audio y vídeo alojado en otras plataformas de podcasting y vídeo como

SoundCloud, iVoox, Youtube, Vimeo y similares.

Usar colores en HTML

Aunque en este post no voy a entrar en el tema diseño de una página web

porque requiere uno o varios posts dedicados (abajo te doy referencias), si quiero

dar, al menos, algunas pinceladas sobre cómo se trabaja con algo tan

fundamental dentro del diseño como lo es el color para los textos, fondos, etc.

Los códigos de colores en HTML

Existen diferentes sistemas para codificar colores. A efectos de la web, nos

interesa el sistema RGB (de “Red Green Blue” en inglés, “rojo verde azul” en

español) que es como el ojo humano percibe el color (con células fotoreceptoras

sensibles a cada uno de estos colores) y el que usan también las pantallas de

casi todos los dispositivos.

El fundamento de este sistema es que cualquier color se puede generar

combinando con diferentes niveles de intensidad estos tres colores básicos: el

rojo, verde y azul. Por razones “informáticas” se suelen usar 256 niveles en cada

uno (de 0 a 255, corresponde a un byte).

Por tanto, con este sistema, tenemos un total de 256*256*256 = 16.777.216

combinaciones posibles que resultan en el mismo número de colores diferentes,

más de lo que el ojo humano puede distinguir.

De ahí que en los códigos de colores en HTML y, en general cuando se trabaja

con colores en un ordenador, se use casi siempre este sistema de codificación

del color.

Estos códigos de colores HTML se suelen especificar en tripletes RGB, por

ejemplo:

0,0,0: negro oscuro (todos los colores con intensidad cero).

255,255,255: blanco (todos los colores con máxima intensidad).

255,0,0: rojo puro intenso (máxima intensidad para el rojo y cero para el resto).

128,128,0: rojo y verde de mediana intensidad lo que daría un marrón verdoso.

Etc.
Cómo poner color al texto en HTML

Ahora ya que lo fácil: ponerle color a un elemento HTML.

De manera general, puedes especificar el color de cualquier elemento HTML con

el atributo style, con la misma sintaxis usada en este ejemplo:

<h2 style=”color=rgb(13,44,84)”>Título H2 en un azul oscuro</h2>

Del mismo modo puedes usar también valores hexadecimales:

<h2 style=”color=#0D2C54”>Título H2 en un azul oscuro</h2>

Cómo poner un color de fondo en HTML

Y esto mismo lo puedes usar también para especificar el color de fondo, en este

caso aplicando a atributo anterior a la etiqueta body:

<body style=”color=#FFB400”>