Ya hemos visto la Estructura básica de una página HTML, ahora vamos a ver cómo proceder a la hora de trabajar con HTML y a continuación las etiquetas básicas para comenzar a agregar contenido a nuestras páginas.

Procedimiento de trabajo con HTML

Lo primero que debemos tener en cuenta es que escribimos las páginas web con HTML en un editor de texto y las visualizamos en el navegador, por tanto, lo normal es tener el documento abierto con ambas aplicaciones a la vez, de forma que cuando guardamos los cambios en HTML, sólo tenemos que actualizar la página en el navegador para ver los cambios.

Cuando guardamos el documento HTML con la extensión .html, ese archivo se asocia al navegador predefinido en el sistema, de forma que al hacer doble clic para abrirlo se abrirá en el navegador.

Para abrirlo también con un editor de texto bajo Windows, hacemos clic derecho, seleccionamos la opción Abrir con… y después el editor de texto deseado, como el Bloc de notas.

Resumen del procedimiento de trabajo con HTML:

  1. Crear un nuevo documento de texto, (.txt).
  2. Renombrar o Guardar como… con el nombre que queramos seguido de la extensión .html.
  3. Abrir el archivo HTML en el navegador.
  4. Abrir el archivo HTML en un editor de texto.
  5. Al hacer cambios con el editor de texto, guardamos y en el navegador recargamos la página (tecla F5).

Editores de código recomendados para HTML

Los editores web son aplicaciones que nos ayudan a la hora de escribir código para páginas web.

Podemos hacerlo con cualquier editor de texto, como el bloc de notas de Windows, pero lo cierto es que un editor específico nos ayuda mucho, ya que nos pone diversos colores en las etiquetas y palabras reservadas para facilitar la lectura, tienen sistemas de autocompletar, y un sinfín de otras funciones que sin duda nos hacen la vida mucho más fácil.

Algunos ejemplos de editores web gratuitos y multiplataforma:

  • Atom: De los creadores de Git. Tiene una enorme cantidad de complementos y está muy enfocado a la edición de código con lenguajes de programación web como JavaScript, más allá de HTML y tiene funcionalidades que nos permiten conectar con Git y GitHub.
  • NotePad++: Aparentemente simple, muy ligero, rápido y eficaz. Además tiene una estupenda funcionalidad para grabar procedimientos, similar a las macros de Excel.
  • Bluefish: Similar al anterior, muy conocido y extendido para los usuarios de Linux.
  • Brackets: Es de Adobe, y han sabido competir con Atom con un editor robusto y completo también sustentado por una gran cantidad de componentes adicionales. Está más orientado al diseño (HTML + CSS) que Atom.

Code Playgrounds

Adicionalmente, en los últimos años han proliferado los denominados Code Playgrounds, aplicaciones web que incluyen editor e intérprete de código en los que podemos directamente ver los resultados de los que programamos.

Ejemplos conocidos son JSFiddle CodePen, con los que verás que incrusto ejemplos en otros artículos de esta secuencia de artículos sobre diseño web.

Etiquetas básicas HTML

Salto de línea

Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importa si cuando creamos la página disponemos cada palabra en una línea distinta, (es decir, un navegador no tiene en cuenta la tecla ENTER).

Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br>.

Cuando aparece la etiqueta <br> el navegador continua con el texto en la línea siguiente. Es uno de los pocos elementos HTML que no tiene cláusula de cierre.

A continuación un ejemplo de una página que muestra los nombres de marcas de coches, uno por línea:

<html>
<head>
</head>
<body>
Seat<br>
Opel<br>
Mercedes Benz<br>
Lancia<br>
Fiat
</body>
</html>

Como vemos sólo hemos agregado la etiqueta <br> cada vez que queremos comenzar una línea. Tengamos en cuenta que es lo mismo si ubicamos la etiqueta br en la misma línea o en la siguiente:

PHP<br>

es lo mismo:

PHP
<br>

Para recordar los nombres de los elementos HTML es bueno ver cual es la palabra completa:
<br> viene de break.

Párrafos

Un párrafo es una frase o conjunto de frases referentes a un mismo tema. Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al siguiente elemento y al anterior.

Dentro de un párrafo puede haber saltos de línea <br>.

Veamos con un ejemplo como disponer dos párrafos:

<html>
<head>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer.</p>

<p>Cum sociis natoque penatibus et magnis...</p>
</body>
</html>

Tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta página, separa los contenidos de los dos párrafos con un espacio horizontal.
Cuando modificamos la ventana del navegador los párrafos se ubican automáticamente de acuerdo al ancho de la ventana.

Para recordar el nombre de esta marca HTML:

<p> viene de paragraph.

Nota: los textos en latín de este ejemplo se han generado con un generador automático de textos de relleno. Hay muchos, Blind Text Generator es uno muy útil ya que nos permite configurar el número de palabras y de párrafos que queremos obtener.

Títulos o encabezados HTML

Otros elementos HTML muy utilizados son para indicar los títulos, para esto contamos con los elementos:
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

El título de mayor nivel es <h1>, es decir, que tiene un tamaño de letra mayor y a nivel semántico es el más importante, normalmente reservado para el título principal de la página.

Según la importancia del título utilizaremos alguno de estos elementos HTML, creando una estructura jerárquica como en un esquema numerado de varios niveles.

Requieren cláusula de cierre.

Ejemplo de página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.

<html>
<head>
</head>
<body>
<h1>Tipos de datos</h1>
<h2>varchar</h2>
<p>
Se usa para almacenar cadenas de caracteres. Una cadena 
Se coloca entre comillas (simples): 'Hola'.<br>
Además...
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numéricos enteros, de -200..
aproximadamente...
</p>
</body>
</html>

Cada título aparece siempre en una línea distinta, no importa si lo escribimos seguido en el archivo, es decir el resultado será igual si hacemos:

<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>

o esto:

<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>

El navegador dispone cada título en una línea nueva.

Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las fuentes. El navegador definirá el tamaño de fuente según el nivel de título que indiquemos. La de tamaño más grande es la de nivel 1 <h1>.

<h1> viene de heading

Heading significa encabezado.

Comentarios HTML dentro del documento

Podemos incluir comentarios dentro de nuestro código. Los comentarios no se ven en el navegador, Sirven para explicar lo que hacemos los desarrolladores a nivel interno.

<!--Esto es un comentario
<B>Al ser un <i>comentario</i></B> no aparecerá ...
<p>Ni las etiquetas HTML tendrán valor</p>-->

Es altamente recomendable acostumbrarse a utilizar comentarios para aumentar la legibilidad de nuestro código y facilitar así su manipulación por terceros o por nosotros mismos en el futuro.

Énfasis con negritas y cursivas

Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o conjunto de palabras.

Para enfatizar textos contamos con los elementos <em> y  <strong>

El elemento de mayor fuerza de énfasis es strong y le sigue em

Veamos un ejemplo del empleo de estos dos elementos HTML:

<html>
<head>
</head>
<body>
<p><strong>Típos de datos</strong> en MySQL</p>
<p><em>TEXTO</em>: Para almacenar texto usamos cadenas...</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos 
para representar enteros, negativos, decimales. </p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone 
de varios tipos: date (fecha), datetime (fecha y hora),  
y timestamp.</p>
</body>
</html>

Podemos ver que la sintaxis para el elemento strong es:

<strong>Típos de datos</strong>

La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en negrita y para el elemento em utilizan letra cursiva.

Otra cosa importante que podemos hacer notar es que estos elementos HTML no producen un salto de línea como los de título (h1,h2 etc.)

Para recordar el nombre de estos elementos HTML:

<em> viene de empathize que significa énfasis.

<strong> viene de strong que significa fuerte.

Etiqueta title, el título del documento HTML

<title> es una de las etiquetas más importantes y de forma excepcional se ubica en el head:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title> 
</head>
<body>
Cuerpo de la página.
</body>
</html>

La etiqueta title sirve para indicar el título de la página y además es lo que se muestra en la pestaña del navegador. Normalmente las páginas tienen por nombre el nombre del sitio web o marca seguido del nombre de la página.

A partir de ahora no te olvides de incluir el título en todas las páginas. Es también de vital importancia en SEO.

Sería genial leer tus experiencias y consejos sobre esto. Comenta y suscríbete a los comentarios para mantenerse al día en la conversación.

Por favor, si te ha gustado, ¡comparte!. Me será de gran ayuda. ¡¡Gracias!!