HTML, HyperText Markup Language, Lenguaje de Marcado de Hipertexto, es el componente más básico para hacer páginas webs. "Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web.

Para hacer una página web no necesitamos mucho, simplemente hay que abrir un programa de edición de texto sin formato. Hay muchos programas, pero uno de los más usados y además gratuito, es Visual Studio code.

Una vez descargado e instalado, podemos crear un fichero, escribir lo siguiente y guardarlo como web.html.

<html>
  <head>
    <title>Mi primera página web</title>
  </head>

  <body>
    <h1>Los h1 sirven para hacer títulos</h1>
  </body>
</html>

Si abrimos el fichero haciendo doble click podremos ver en nuestro navegador el resultado.

Lo primero que podemos ver es que las tildes no funcionan. Antes de arreglarlo vamos a explicar lo que hemos construido:

  • Casi todas las etiquetas en HTML tienen su cierre.

  • Todo documento de HTML empieza con la etiqueta html.

  • Todo documento HTML tiene un head y un body.

  • En el head configuraremos la página web, como por ejemplo el título que se ve en el tab del navegador.

  • En el body construimos la página.

  • H1 sirve para hacer títulos.

Para poder arreglar las tildes, tendremos que indicar al navegador que estamos usando un idioma que usa tildes y que tiene que usar esa codificación.

Como hemos dicho el Header sirve para configurar la página web; bastaría con añadir una línea nueva.

<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <h1>Los h1 sirven para hacer títulos</h1>
  </body>
</html>

Si refrescamos la página web podremos observar que ahora ya se ven las tildes.

Elementos de HTML

HTML proporciona una gran cantidad de elementos para poder crear páginas webs, ya hemos usado los H1, pero hay muchos más:

<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <h1>h1 title</h1>
    <h2>h2 title</h2>
    <h3>h3 title</h3>
    <h4>h4 title</h4>
    <h5>h5 title</h5>
    <h6>h6 title</h6>
  </body>
</html>

HTML nos proporciona 6 niveles para poder hacer headings:

<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <form>
      <input type="text">
      <input type="radio">
      <input type="checkbox">
      <input type="file">
      <input type="date">
      <input type="color">
      <button>Button</button>
    </form>
  </body>
</html>

También para crear formularios, como la etiqueta form, input y button:

<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <img src="https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <a href="https://www.google.com" target="_blank">Enlace que habre google</a>

    <hr>

    <p>
      target blank hace que los enlaces se abran en un nuevo tab.
      Con P creamos parrafos
      <br>
      Con Br hacemos un salto de linea.
    </p>

    <ul>
      <li>para hacer listas de puntos tenemos que escribir ul y dentro li</li>
      <li>cada li es un nuevo punto</li>
    </ul>
  </body>
</html>

Tenemos enlaces, imágenes, listas, párrafos, separadores y muchos más elementos.

Estructuración

Si hemos visto los ejemplos, podremos haber visto que hay elementos que se posicionan verticalmente como los H y otros que se posicionan en línea como los input.

Es un comportamiento básico de HTML. Existen elementos en bloque (block) y elementos en línea (inline). Simplemente hay que acordarse como funciona cada elemento por defecto, aunque se podrá cambiar.

Existen otros 2 elementos clave que sirven para estructurar el código: div y span. Ambos crean cajas vacías, el primero en bloque y el segundo en línea.

<html>
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>

  <body>
    <form>
      <div>
        <input type="text">
      </div>
      <div>
        <input type="radio">
      </div>
      <div>
        <input type="checkbox">
      </div>
      <div>
        <input type="file">
      </div>
      <div>
        <input type="date">
      </div>
      <div>
        <input type="color">
      </div>
      <div>
        <button>Button</button>
      </div>
    </form>
  </body>
</html>

En este ejemplo de formulario está posicionado en bloque. Si te preguntas si hay una forma más optima de hacer esto, estás en lo cierto. Ya lo aprenderemos.

Con esto cubrimos lo más fundamental para poder hacer páginas webs. Sin embargo, las páginas webs necesitan de un diseño. Para ello utilizaremos un lenguaje de maquetación llamado CSS para poder personalizar los estilos de la web.