¿Qué es HTML?

HTML, siglas en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), es un lenguaje de marcado (una forma de codificar un documento), que sirve para realizar páginas web. Gracias al HTML podemos ver las páginas web en navegadores de ordenadores, tabletas y teléfonos.

Este lenguaje está estandarizado por el World Wide Web Consortium (W3C) o Consorcio WWW. Eso permite que todas las personas alrededor del mundo puedan escribir el mismo código y que los navegadores muestren la misma información a todos los visitantes.

¿Cómo funciona el HTML?

HTML le dice a los navegadores el orden donde tiene que mostrarse el contenido de la página web textos, imágenes, videos, sonidos, etc. Eso lo hace a través de etiquetas conocidas en inglés como tags.

Las etiquetas HTML son nombres de elementos rodeados de corchetes angulares <>.

<nombredelaetiqueta>El contenido va aquí</nombredelaetiqueta>

Las etiquetas HTML normalmente vienen en pares como <p> y </ p>

La primera etiqueta en un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de cierre

La etiqueta final se escribe como la etiqueta de inicio, pero con una barra inclinada insertada antes del nombre de la etiqueta.

Elementos HTML

Un elemento HTML por lo general consiste en una etiqueta de inicio y una etiqueta de finalización, con el contenido insertado en el medio:

<nombredelaetiqueta>El contenido va aquí</nombredelaetiqueta>

El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de finalización:

<p> Mi primer párrafo. </ p>

Los elementos HTML pueden tener elementos dentro.

Voy a explicar el ejemplo anterior.

La primera etiqueta, <!DOCTYPE html>, le dice a los navegadores que lo que sigue es código HTML. Esta etiqueta no viene en pares.

Justo después tenemos un inicio de etiqueta, <html>, que no cierra sino hasta el final. Todo lo que está dentro, etiquetas, contenido, etc, que se encuentra dentro de esas etiquetas son contenido y elementos HTML.

Estructura de una página HTML

En general una página HTML tiene esta estructura

<html>
 <head>
 <title>Título de la página</title>
 </head>
 <body>
 <h1>Título</h1>
 <p>Párrafo</p>
 </body>
 </html>

Cierra tus etiquetas <p>Contenido</p>. No las dejes abiertas <p>Contenido

Y te recomiendo que siempre escribas tus etiquetas en minúsculas. Con HTML no pasará nada si escribes tus etiquetas en mayúsculas, pero en otro tipo de documentos como los XHTML si no escribes en minúsculas puede tener errores.

Atributos de las etiquetas

Las etiquetas pueden tener atributos. Los atributos proveen información adicional a los elementos. Los atributos siempre se definen en la etiqueta de apertura.

Aquí tienes algunos ejemplos de atributos:

  • <a href=»https://juanrafaelruiz.com»>Esto es un link</a>

El atributo ‘href’ en la etiqueta <a> señala a donde será redirigido el visitante al darle clic al link

  • <img src=»amanecer.jpg»>

El atributo ‘src’ en la etiqueta ‘<img>’ define la imagen que aparecerá en la página web. El caso de esta etiqueta ‘<img>’ no tiene etiqueta de cierre.

Pueden haber más de un atributo por etiqueta.

  • <img src=» amanecer.jpg» width=»500″ height=»600″ alt=»Sale el sol» >

En este ejemplo no solo estamos diciendo que imagen queremos mostrar sino el tamaño al que la queremos. Ancho de 500 pixeles y altura de 600 pixeles. El atributo alt especifica un texto alternativo que se utilizará cuando una imagen no se puede mostrar.

Al igual que las etiquetas los atributos pueden escribirse tanto en mayúsculas como en minúsculas. Pero al igual que las etiquetas te recomiendo siempre escribirlas en minúsculas.

Otra sugerencia son las comillas. Puedes escribir los atributos con comillas dobles, comillas simples o sin comillas.

  • <img src=»amanecer.jpg»>
  • <img src=’amanecer.jpg’>
  • <img src=amanecer.jpg>

O incluso

  • alt=»Sale el ‘sol’ por el horizonte»
  • alt= ‘Sale el “sol” por el horizonte’

Nota que las comillas con las que abro son las mismas comillas con las que cierro. Y que si necesito utilizar unas comillas en el texto interno utilizo las comillas diferentes con las que abro y cierro.

Te recomiendo que la manera que definas para escribir sea siempre la misma. En mi caso me gusta escribir siempre en minúsculas y con las comillas doble para abrir y cerrar.

Títulos y párrafos

Los títulos en HTML se definen con las etiquetas

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>
<h6> </h6>

Estas etiquetas no solo colocan los textos más grandes, sino que informan a los buscadores como Google de que se trata la página que estás escribiendo. Si solo colocas un texto con un tamaño más grande que los demás textos los buscadores no tendrán idea de que estás escribiendo. Mientras el número de la etiqueta sea menor más importante y genérico será el título.
Por ejemplo:

Animales

Todos los animales

Cuadrúpedos

Solo los que tienen cuatro patas

Perros

Solo los perros

Pastores alemanes

Solo esta raza de perros
Las etiquetas
son para los párrafos.
Cuando escribes los párrafos tienes que tener en consideración que HTML no reconoce los saltos de línea ni los espacios adicionales en blanco. El siguiente ejemplo dará el mismo resultado.

El resultado será:

Este párrafo contiene muchas líneas en el código fuente pero el navegador lo ignorará.

y

Este párrafo contiene muchas líneas y espacios en blanco en el código fuente pero el navegador lo ignorará.

Si necesitas colocar un salto de línea debes utilizar <br>. <br> no necesita un par para cerrarlo. <br> es solo un salto de línea, no quiere decir que se acabe el párrafo.

Si necesitas que se respeten tanto los saltos de línea como los espacios vacíos puedes utilizar la etiqueta <pre></pre>

Estilos, formato de texto, citas y comentarios

Los estilos son atributos de las etiquetas.

<nombredelaetiqueta style=»propiedad:valor;»></ nombredelaetiqueta >

La propiedad en una propiedad CSS y el valor es un valor CSS. En otro artículo veremos qué es y cómo funciona el CSS.

Ahora solo veremos unos ejemplos

  • <body style=»background-color:powderblue;»>

Este estilo le da un color ‘powderblue’ al de fondo a la página.

  • <p style=»color:red;»>Esto es un párrafo.</p>

El color del texto dentro de este párrafo es ‘red’.

  • <h1 style=»font-family:verdana;»>Esto es un título</h1>

La familia de este título es ‘verdana’.

Además, podemos especificar el tamaño del texto y la alineación del texto

Con el formato de texto podemos:

  • <b> – Texto en negrita
  • <strong> – Texto importante
  • <i> – Texto en cursiva
  • <em> – Texto enfatizado
  • <mark> – Texto marcado
  • <small> – Texto pequeño
  • <del> – Texto eliminado
  • <ins> – Texto insertado
  • <sub> – Texto de subíndice
  • <sup> – Texto superíndice

Podemos escribir

<p>En este párrafo tenemos <b>texto en negritas</b>, y <i>texto en cursiva</i> y <em>texto enfatizado</em></p>

Las citas se tratan igual que el formato de texto, pero con la etiqueta <blockquote></blockquote >. Cuando escribes con esta etiqueta el texto que está dentro queda demarcado aumentando el margen a la derecha y a la izquierda.

La etiqueta de comentarios te permite escribir anotaciones en el código fuente sin que aparezcan en la página web <!–Lo que escribas aquí no lo verán los visitantes de tu web–>

Tablas y listas

Las tablas son muy útiles a la hora de mostrar información. Se definen con la etiqueta . son las filas y   las columnas. En el caso de colocar títulos o encabezados utilizamos   Aquí tenemos un ejemplo de una tabla

NombreApellidoEdad
JuanPérez50
PedroGómez25

Las listas también son muy útiles para mostrar contenido organizado. Podemos tener listas sin orden u ordenadas. Las listas sin orden pueden tener diferentes viñetas. El disco es la viñeta por defecto.

  • Ítem
  • Ítem
  • Ítem

Pero también tenemos círculo, cuadrado y nada. Aquí tenemos ejemplos de listas:

  • Viñeta ‘disco’
  • Agua
  • Bebidas gaseosas
  • Leche
  • Viñeta ‘círculo’
  • Viñeta ‘cuadrado’
  • Sin viñeta

Las listas ordenadas comienzan con la etiqueta

    y cada ítem comienza con

  1. .Las listas ordenadas también tienen atributos
    • type = «1» Los elementos de la lista se numerarán con números (valor predeterminado)
    • type = «A» Los elementos de la lista se numerarán con letras mayúsculas
    • type = «a» Los elementos de la lista se numerarán con letras minúsculas
    • type = «I» Los elementos de la lista se numerarán con números romanos en mayúsculas
    • type = «i» Los elementos de la lista se numerarán con números romanos en minúsculas

    También tenemos listas con descripciones. Comienzan con

    , el término se encapsula con

    y la descripción con
    Agua
    – Líquido incoloro y sin sabor
    Leche
    – Líquido blanco
    Agua
    – Líquido incoloro y sin sabor
    Leche
    – Líquido blanco

    También podemos tener listas dentro de listas.

    • Agua
      • Té negro
      • Té verde
    • Leche

    Con CSS podemos tener listas horizontales que son muy útiles para menús. Pero eso es un poco más avanzado. HTML tiene muchas más etiquetas y atributos. Si quieres conocerlas todas puedes hacerlo en las siguientes páginas:

    O puedes escribir tus dudas, preguntas o comentarios aquí abajo. Espero que este artículo te sea de utilidad.

Deja un comentario