▷ Cómo Crear tu Primera Página Web con HTML

En este pequeño tutorial vamos a construir una página web sencilla utilizando HTML. Está dirigido a personas que se inician en el uso de HTML pero que tienen un conocimiento básico de la sintaxis. Si eres completamente nuevo en HTML puedes seguirlo y aprender algunas cosas. Asegúrate de consultar la introducción del W3C a HTML si estás interesado en profundizar en el tema.

Crear un Nuevo Archivo HTML

Lo primero que tenemos que hacer es crear un nuevo documento. Hay varias maneras de crear un documento, pero yo usaré el editor de texto Sublime Text para hacerlo. Puedes usar cualquier editor de texto que prefieras.

Estos son los pasos para crear un nuevo archivo en VS Code.

Abre Sublime Text
Seleccione “New File” en el menú File o pulsa Ctrl + N en Windows o Cmd + N en macOS.
Selecciona “Save” en el menú File o pulsa Ctrl + S en Windows o Cmd + S en macOS. A continuación, se te pedirá que introduzcas un nombre para el archivo.

Los documentos HTML deben tener la extensión de archivo .html.

Por lo general, la página de inicio de un sitio se llama “index.html“. “index” indica que éste es el archivo por defecto que cargará el navegador.

En el nombre de la página sólo deben utilizarse caracteres alfanuméricos, guiones, guiones bajos o tildes.

Nota

No utilices espacios en el nombre del archivo. Utiliza letras minúsculas al nombrar los archivos HTML.

El nombre de un recurso HTML suele utilizarse en una URL. Las URL suelen distinguir entre mayúsculas y minúsculas.

Crear un Documento HTML Básico

Ahora que tenemos un archivo HTML podemos empezar a escribir algo de HTML para crear nuestra página web. Empezaremos añadiendo algunos elementos que se encuentran típicamente en la mayoría de los archivos HTML.

<!DOCTYPE html>

El propósito del DOCTYPE es activar el modo de renderizado correcto. Esto es necesario por razones de legado y si estás empezando no es algo en lo que debas centrarte. <!DOCTYPE html> es recomendado por HTML5 y lo que usarás para la mayoría de los proyectos así como lo que estamos usando para este tutorial. Debe ser lo primero en el archivo HTML y no requiere una etiqueta de cierre.

Añade el DOCTYPE a la primera línea del archivo HTML:

<!DOCTYPE html>

<html>

El elemento html representa la raíz del documento. Todos los demás elementos son descendientes del elemento html. Básicamente, esto le dice al navegador que todo lo que está dentro de este elemento es html. El elemento html generalmente tiene una etiqueta de cierre, pero en algunos casos no es necesaria. También tiene el atributo lang que indica el idioma del documento y ayuda a la síntesis de voz.

Ahora añade el elemento html a tu archivo de la siguiente manera:

<!DOCTYPE html>
<html lang="es"></html>

<head>

El elemento head se utiliza para contener metadatos sobre el documento. Estos metadatos son legibles por la máquina y se utilizan para configurar la presentación o el comportamiento del contenido, o la relación del documento con otros documentos. Pueden ser datos como el título, los scripts, las hojas de estilo CSS, etc.

Añade el elemento head dentro del elemento html:

<!DOCTYPE html>
<html lang="es">
  <head> </head>
</html>

<body>

El elemento body representa el contenido del documento. Sólo puede haber un elemento body en un documento.

Añade el elemento body dentro del elemento html justo después del head:

<!DOCTYPE html>
<html lang="es">
  <head> </head>
  <body></body>
</html>

<title>

El elemento title representará el nombre del documento, esto es lo que aparecerá en la pestaña del navegador. El elemento title es un contenido de metadatos, por lo que se utiliza dentro del elemento head. Sólo debe haber un elemento title por documento.

Añade el elemento title dentro del elemento head y nómbralo como quieras:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi Página HTMLDESDECERO.ES</title>
  </head>
  <body></body>
</html>

Notarás que algunos de los elementos están ahora sangrados, esto se hace para que el código sea más fácil de leer. La sangría es un área de la codificación que suscita opiniones. Todo el mundo tiene sus propias preferencias, pero mientras seas consistente y sirva para aumentar la legibilidad, usa el estilo que prefieras.

Para este tutorial estoy usando un formateador CodeFormatter dentro de Sublime Text, que está configurado para formatear automáticamente el documento HTML cuando lo guardo.

Hay un elemento más que añadiremos a este diseño básico, que verás con frecuencia.

<meta>

El elemento meta representa diferentes tipos de metadatos. Hay muchos usos diferentes para la etiqueta meta, pero hay dos que verás regularmente (especialmente si usas fragmentos de HTML) y estos son los que discutiremos.

Añadamos los dos elementos meta dentro del elemento head:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Página HTMLDESDECERO.ES</title>
  </head>
  <body></body>
</html>

El primer elemento meta con el atributo charset=”UTF-8″ se denomina declaración de codificación de caracteres, e indica qué codificación de caracteres se utiliza para almacenar o transmitir el documento. Si estás empezando, no te preocupes demasiado por los aspectos técnicos de este elemento, pero es una buena idea entender lo que hace si lo ves.

El segundo elemento meta se llama metaetiqueta viewport y fue introducido por Apple para que los desarrolladores pudieran modificar el tamaño y la escala del viewport. Aunque esta metaetiqueta es muy común debido a la necesidad de dar soporte a los dispositivos móviles, no es necesaria para todas las páginas web.

Secciones, Encabezados y Texto de los Párrafos

Si viéramos esta página en un navegador, no veríamos nada en la ventana gráfica. Eso es porque no hemos añadido ningún contenido al elemento body. Así que vamos a añadir algo de contenido a esta página web.

<section> – Un elemento section puede representar una determinada sección del documento. En este ejemplo, la página web va a tener una sección de introducción, una sección de importancia, y una sección de fotos.
Elementos h1, h2, h3, h4, h5 & h6 – Estos representan los encabezados en el documento son una parte importante de una página web. Los titulares tienen un valor SEO y también son importantes para la accesibilidad. Aprenderemos más sobre la semántica y la estructuración de las páginas web en futuros tutoriales, por ahora ten en cuenta que los encabezados son partes importantes de una página web.
– El elemento p representa el texto de un párrafo.

Vamos a añadir la primera sección y sus elementos, siéntete libre de seguir este ejemplo o de darle tu propio giro a la página web.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Página HTMLDESDECERO.ES</title>
  </head>
  <body>
    <h1>HTML para Principiantes</h1>
    <section>
      <h2>Introducción</h2>
      <p>
        HTML significa "lenguaje de marcado de hipertexto". Es un lenguaje de
        codificación utilizado para crear páginas que un navegador web puede
        mostrar. La mayoría de las páginas web que encuentras en Internet,
        incluida la que estás leyendo ahora mismo en este artículo, se
        almacenan como un archivo HTML.
      </p>
    </section>
  </body>

Vista Previa en el Navegador

Ahora que tenemos algo de contenido en el cuerpo (<body>) del documento, echemos un vistazo a cómo se ve en el navegador. Una de las formas más sencillas de hacerlo es arrastrando el archivo HTML a una pestaña abierta del navegador.

Tendrá que recargar la pestaña del navegador para ver cualquier cambio en el HTML que hayas hecho.

Crear una Lista

La segunda sección de contenido de esta página web va a ser una lista, por ejemplo, la importancia de HTML. Echemos un vistazo a los elementos que necesitaremos para crearla.

<ul> – El elemento ul significa lista desordenada y representa una lista de elementos donde el orden de los mismos no es importante.
<li> – El elemento li representa un elemento de la lista.

Ahora que sabemos qué elementos vamos a utilizar, vamos a crear otra sección que contendrá nuestra lista de la importancia de HTML:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Página HTMLDESDECERO.ES</title>
  </head>
  <body>
    <h1>HTML para Principiantes</h1>
    <section>
      <h2>Introducción</h2>
      <p>
        HTML significa "lenguaje de marcado de hipertexto". Es un lenguaje de
        codificación utilizado para crear páginas que un navegador web puede
        mostrar. La mayoría de las páginas web que encuentras en Internet,
        incluida la que estás leyendo ahora mismo en este artículo, se
        almacenan como un archivo HTML.
      </p>
    </section>
      <section>
      <h2>Importancia de HTML</h2>
      <p>
        HTML y CSS son herramientas básicas para el desarrollo y diseño web.
        Es beneficioso aprenderlos para desarrolladores, especialistas 
        en marketing y personas de muchas otras disciplinas. Conocer HTML puede
        ahorrarte horas de frustración, un tiempo precioso con tu equipo de diseño
        o incluso dinero tratando con un contratista externo.
      </p>
      <ul>
        <li>HTML es fácil de aprender y usar.</li>
        <li>HTML es compatible con todos los navegadores.</li>
        <li>HTML es fácil de editar.</li>
        <li>HTML se puede integrar fácilmente con otros lenguajes.</li>
        <li>HTML es básico de todos los lenguajes de programación.</li>
      </ul>
    </section>
  </body>

Formatear el Texto

Ahora que tenemos un poco más de contenido, vamos a añadir algo de formato al texto. El formato cambiará la apariencia del texto y ayudará a que la página sea más legible. Hay varios elementos diferentes que podemos utilizar para lograr esto:

 – Este elemento representa el texto en negrita. Se utiliza para llamar la atención o transmitir una importancia adicional a un texto específico.
– Este elemento representa lo mismo que el elemento , pero  es semántico y ayuda a describir el texto que rodea.
 – Este elemento representa el texto en cursiva y se utiliza para un estado de ánimo alternativo al del texto normal.
 – Este elemento marca el texto para que tenga énfasis.
 – Representa el texto que está resaltado o marcado como referencia.
 – Representa los comentarios laterales y el texto que rodea se hará más pequeño.
<del> – Representa el texto borrado.
<ins> – Se utiliza para representar el texto insertado. ins y del se utilizan para ayudar a seguir los cambios de un documento.
 – Este elemento representa el texto de subíndice. Los subíndices se representan con una línea de base más baja y un texto más pequeño.
 – Este elemento representa el texto en superíndice. El texto se representa con una línea de base elevada y un texto más pequeño.

Sigamos adelante y añadamos algunos de estos elementos a la sección del párrafo anterior que hemos añadido.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Página HTMLDESDECERO.ES</title>
  </head>
  <body>
    <h1>HTML para Principiantes</h1>
    <section>
      <h2>Introducción</h2>
      <p>
        HTML significa "lenguaje de marcado de hipertexto". Es un lenguaje de
        codificación utilizado para crear páginas que un navegador web puede
        mostrar. La mayoría de las páginas web que encuentras en Internet,
        incluida la que estás leyendo ahora mismo en este artículo, se
        almacenan como un archivo HTML.
      </p>
    </section>
      <section>
      <h2>Importancia de HTML</h2>
      <p>
        <mark>HTML y CSS</mark> son herramientas básicas para el desarrollo y diseño web. <strong>Es beneficioso aprenderlos para desarrolladores</strong>, especialistas en marketing y personas de muchas otras disciplinas. <mark>Conocer HTML</mark> puede <em>ahorrarte horas de frustración</em>, un tiempo precioso con tu equipo de diseño o incluso dinero tratando con un contratista externo.
      </p>
      <ul>
        <li>HTML es fácil de aprender y usar.</li>
        <li>HTML es compatible con todos los navegadores.</li>
        <li>HTML es fácil de editar.</li>
        <li>HTML se puede integrar fácilmente con otros lenguajes.</li>
        <li>HTML es básico de todos los lenguajes de programación.</li>
      </ul>
    </section>
  </body>

Crear un Hipervínculo

El inicio de la World Wide Web es la capacidad de definir enlaces de una página a otra, y de seguir los enlaces con un clic. Esto es el hipervínculo.World Wide Web Consortium (W3C)

Los hipervínculos son los que hacen de la web una verdadera web y son una parte importante de cualquier página web. Casi cualquier tipo de contenido puede convertirse en un hipervínculo, de manera que cuando un usuario haga clic en ese enlace sea llevado a otra URL.

Podemos crear un hipervínculo utilizando el siguiente elemento:

<a> – El elemento a o ancla, tiene un atributo llamado href, que cuando se utiliza crea un hipervínculo.

Veamos un ejemplo a continuación:

<a href="https://www.w3.org/">Página Oficial de World Wide Web Consortium</a>.

Lo que resultaría en:

Página Oficial de World Wide Web Consortium

Bien, ahora que sabemos lo básico, vamos a añadir un par de hipervínculos a la lista de importancia HTML. Cuando un usuario los active será llevado a otra dirección.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Página HTMLDESDECERO.ES</title>
  </head>
  <body>
    <h1>HTML para Principiantes</h1>
    <section>
      <h2>Introducción</h2>
      <p>
        HTML significa "lenguaje de marcado de hipertexto". Es un lenguaje de
        codificación utilizado para crear páginas que un navegador web puede
        mostrar. La mayoría de las páginas web que encuentras en Internet,
        incluida la que estás leyendo ahora mismo en este artículo, se
        almacenan como un archivo HTML.
      </p>
    </section>
      <section>
      <h2>Importancia de HTML</h2>
      <p>
        <mark>HTML y CSS</mark> son herramientas básicas para el desarrollo y diseño web. <strong>Es beneficioso aprenderlos para desarrolladores</strong>, especialistas en marketing y personas de muchas otras disciplinas. <mark>Conocer HTML</mark> puede <em>ahorrarte horas de frustración</em>, un tiempo precioso con tu equipo de diseño o incluso dinero tratando con un contratista externo.
      </p>
      <ul>
        <li>HTML es fácil de aprender y usar.</li>
        <li>HTML es compatible con todos los navegadores.</li>
        <li><a href="https://htmldesdecero.es/"
            >HTML es fácil de editar.</a></li>
        <li><a href="https://javadesdecero.es/">HTML se puede integrar fácilmente con otros lenguajes.</a></li>
        <li>HTML es básico de todos los lenguajes de programación.</li>
      </ul>
    </section>
  </body>

Estilo de la Página Web

Si tenemos una vista previa de la página web en este momento, veremos que no es la más emocionante de ver. Podemos cambiar eso añadiendo algunos estilos básicos al documento HTML. Para ello añadiremos un elemento <style> que nos permitirá incrustar CSS en el documento HTML.

Añadiremos el elemento style en el elemento head del documento HTML. No voy a entrar en detalles sobre el CSS que he incluido, si tienes curiosidad por algo específico consulta los documentos de referencia de CSS de MD N.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Página HTMLDESDECERO.ES</title>
     <style>
      html {
        max-width: 800px;
      }
      body {
        background-color: white;
        margin: 0 4rem;
        font-family: cursive;
        font-size: 1.15rem;
      }
      section {
        border-bottom: lightblue solid 2px;
      }
      h1 {
        font-size: 3em;
      }
      ul,
      li {
        list-style: square;
      }
      em {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>HTML para Principiantes</h1>
    <section>
      <h2>Introducción</h2>
      <p>
        HTML significa "lenguaje de marcado de hipertexto". Es un lenguaje de
        codificación utilizado para crear páginas que un navegador web puede
        mostrar. La mayoría de las páginas web que encuentras en Internet,
        incluida la que estás leyendo ahora mismo en este artículo, se
        almacenan como un archivo HTML.
      </p>
    </section>
      <section>
      <h2>Importancia de HTML</h2>
      <p>
        <mark>HTML y CSS</mark> son herramientas básicas para el desarrollo y diseño web. <strong>Es beneficioso aprenderlos para desarrolladores</strong>, especialistas en marketing y personas de muchas otras disciplinas. <mark>Conocer HTML</mark> puede <em>ahorrarte horas de frustración</em>, un tiempo precioso con tu equipo de diseño o incluso dinero tratando con un contratista externo.
      </p>
      <ul>
        <li>HTML es fácil de aprender y usar.</li>
        <li>HTML es compatible con todos los navegadores.</li>
        <li><a href="https://htmldesdecero.es/"
            >HTML es fácil de editar.</a></li>
        <li><a href="https://javadesdecero.es/">HTML se puede integrar fácilmente con otros lenguajes.</a></li>
        <li>HTML es básico de todos los lenguajes de programación.</li>
      </ul>
    </section>
  </body>

Añadir una Imagen a la Página

Las páginas web sin imágenes pueden ser a veces bastante aburridas, así que vamos a añadir una imagen a esta página. Para añadir una imagen utilizaremos el elemento img.

<img> – Este elemento representa una imagen. Debe contener el atributo src que indicará la URL de la imagen. También usaremos el atributo alt que es importante para la accesibilidad. Escribimos un texto alternativo para la imagen, de manera que si cada imagen no estuviera presente, el atributo alt transmitiría el mismo significado.

En este caso vamos a utilizar una imagen de un programador de un sitio web de fotos de stock, sin embargo, también podrías utilizar una imagen guardada localmente. Vamos a añadir otra sección con un título, un breve párrafo que describa la sección y luego nuestra imagen:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Página HTMLDESDECERO.ES</title>
     <style>
      html {
        max-width: 800px;
      }
      body {
        background-color: white;
        margin: 0 4rem;
        font-family: cursive;
        font-size: 1.15rem;
      }
      section {
        border-bottom: lightblue solid 2px;
      }
      h1 {
        font-size: 3em;
      }
      ul,
      li {
        list-style: square;
      }
      em {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>HTML para Principiantes</h1>
    <section>
      <h2>Introducción</h2>
      <p>
        HTML significa "lenguaje de marcado de hipertexto". Es un lenguaje de
        codificación utilizado para crear páginas que un navegador web puede
        mostrar. La mayoría de las páginas web que encuentras en Internet,
        incluida la que estás leyendo ahora mismo en este artículo, se
        almacenan como un archivo HTML.
      </p>
    </section>
      <section>
      <h2>Importancia de HTML</h2>
      <p>
        <mark>HTML y CSS</mark> son herramientas básicas para el desarrollo y diseño web. <strong>Es beneficioso aprenderlos para desarrolladores</strong>, especialistas en marketing y personas de muchas otras disciplinas. <mark>Conocer HTML</mark> puede <em>ahorrarte horas de frustración</em>, un tiempo precioso con tu equipo de diseño o incluso dinero tratando con un contratista externo.
      </p>
      <ul>
        <li>HTML es fácil de aprender y usar.</li>
        <li>HTML es compatible con todos los navegadores.</li>
        <li><a href="https://htmldesdecero.es/"
            >HTML es fácil de editar.</a></li>
        <li><a href="https://javadesdecero.es/">HTML se puede integrar fácilmente con otros lenguajes.</a></li>
        <li>HTML es básico de todos los lenguajes de programación.</li>
      </ul>
    </section>
    <section>
      <h2>Foto de Programador</h2>
      <p>Aquí se muestra una image de una ilustración de programador.</p>
      <img
        src="https://images.pexels.com/photos/5474034/pexels-photo-5474034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=640&w=426"
        alt="una ilustración de un programador"
      />
    </section>
  </body>

Veamos qué aspecto tiene ahora la página web.

No ganarás ningún premio de diseño, pero para ser nuestra primera página web está empezando a tomar forma.

Resumen

En este tutorial aprendimos a crear un documento HTML, conocimos algunos elementos de uso común como listas, imágenes, hipervínculos, encabezados y párrafos. Hemos aplicado algunos estilos y formatos básicos al texto para hacer el diseño un poco más atractivo.

A partir de aquí, te sugiero que te remangues y empieces a codificar tu propia página HTML desde cero. Una vez que tengas un poco más de confianza, construye algo más complejo usando sólo HTML. Hay un montón de frameworks de moda, bibliotecas y otras herramientas por ahí para ayudarte a construir páginas web, pero puedes construir algunas cosas increíbles sólo con HTML y afinar tus habilidades en HTML te hará un mejor desarrollador y la web un lugar mejor.

Califica este post

Cómo Crear una Página Web con HTML

Crear un Nuevo Archivo HTML

Crear un Documento HTML Básico

<!DOCTYPE html>

<html>

<head>

<body>

<title>

<meta>

Secciones, Encabezados y Texto de los Párrafos

Vista Previa en el Navegador

Crear una Lista

Formatear el Texto

Crear un Hipervínculo

Estilo de la Página Web

Añadir una Imagen a la Página

Resumen

Alex Walton

Deja una respuesta Cancelar la respuesta

Presiona ESC para cerrar

Crear un Nuevo Archivo HTML

Crear un Documento HTML Básico

<!DOCTYPE html>

<html>

<head>

<body>

<title>

<meta>

Secciones, Encabezados y Texto de los Párrafos

Vista Previa en el Navegador

Crear una Lista

Formatear el Texto

Crear un Hipervínculo

Estilo de la Página Web

Añadir una Imagen a la Página

Resumen

Compartir Artículo:

Alex Walton

¿HTML Es o No Es, un Lenguaje de Programación?

10 Preguntas que todos los que saben de HTML deberían Responder

Deja una respuesta Cancelar la respuesta