Como crear una página web básica - HTML5 básico - Capítulo 2


En este capítulo vas a aprender nuevas etiquetas html y a crear una página web muy básica. No va a ser nada del otro mundo, pero estás empezando, vamos a hacer las cosas con calma y bien, ya habrá tiempo para crear verdaderas maravillas.

Etiqueta <!doctype html>

Esta etiqueta es la primera que te vas a encontrar en cualquier documento html. Por el momento, no le des importancia, solo que sepas que la tienes que dejar ahí donde está.

Etiqueta <html>

Todo documento html empieza por la apertura de esta etiqueta <html> y termina con su cierre </html> en la última línea del documento.
Encapsula todo el contenido de la página web.

Para que entiendas mejor lo de la encapsulación de las etiquetas, te pongo como ejemplo una matrioska, esas famosas muñecas rusas en las que abres una y te encuentras una más pequeña dentro, la abres y encuentras otra más pequeña y así hasta encontrar a la más pequeña de todas.
Puedes considerar entonces al contenedor <html> como la matrioska más grande, dentro de esta encontraremos otras etiquetas html como son <head> y <body>, cada una de estas con etiquetas que van dentro de estas.

Matrioska

Es algo confuso y abstracto al principio, solo tómate tu tiempo para entenderlo, continua estudiando y verás como pronto lo dominas del todo. Además, deja todas las dudas que tengas en los comentarios y mira el vídeo de cada capítulo para entenderlo todo mejor.

Etiqueta <head>

Las etiquetas <head> siempre va dentro de las etiquetas <html> y encima de las etiquetas <body>.

El head, contiene enlances a archivos externos, etiquetas para buscadores, descripción de la página, título de la página, nombre del autor y muchas cosas más que irás viendo.

Por cierto, "head" (cabeza) se traduce al español como cabecera, es la cabecera de la página web.

Etiqueta <body>

Las etiquetas <body> se escriben después del cierre del head. Puedes traducir "body" (cuerpo) al español como cuerpo de página.

El body contendrá las etiquetas para mostrar cosas al usuario, imágenes, vídeos, texto, tablas, anuncios...

Página web básica html

Ahora que ya conoces las secciones de todo documento html es hora de que crees tu primera página web. Va a ser súper básica, pero por algo se empieza.

Cabeceras html

Las etiquetas h son las denominadas cabeceras, se utilizan en el body para mostrar un título. Tenemos seis tamaños de cabecera, cada uno con su correspondiente etiqueta:

  • <h1> </h1>
  • <h2> </h2>
  • <h3> </h3>
  • <h4> </h4>
  • <h5> </h5>
  • <h6> </h6>

La etiqueta <h1> genera un título muy grande, la <h2> un poco más pequeño que la <h1> y disminuyendo hasta llegar a la <h6> que es el título más pequeño.

Veamos un ejemplo utilizándolas:

Etiquetas HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cabeceras html</title>
</head>

<body>

    <h1>Este es un título de tamaño h1</h1>
    <h2>Este es un título de tamaño h2</h2>
    <h3>Este es un título de tamaño h3</h3>
    <h4>Este es un título de tamaño h4</h4>
    <h5>Este es un título de tamaño h5</h5>
    <h6>Este es un título de tamaño h6</h6>

</body>
</html>

Resultado en el navegador

Cabeceras html

Aún no vamos a entrar en temas de optimización de buscadores ni nada por el estilo, por el momento, quédate con que <h1> se suele utilizar para el título principal que va a ver el usuario, las <h2> y <h3> para subtítulos y el resto para cosas con menos importancia dentro de la página. Ya aprenderás a utilizarlas en su momento adecuado.

Dos cosas, la primera es que es importante que al menos todas las páginas que crees lleven una etiqueta <h1>. La segunda es que te acuerdes siempre que abres una etiqueta, la cierres. <h1> (apertura de etiqueta) </h1> (cierre de etiqueta).

Empecemos a construir la página. Supongamos que tienes una página inicial como esta, si no la tienes, copia y pega o escríbela que también es una buena forma de aprender.

Etiquetas HTML

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

<body>
</body>
</html>

Ahora, a esa página le vas a añadir un título principal y un subtítulo. Tal y como he dicho, para los títulos principales, una etiqueta h1 y para los subtítulos h2 o h3.

Etiquetas HTML

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

<body>

    <h1>Este es el título principal de mi primera página web.</h1>
    <h2>Este es el subtítulo.</h2>

</body>
</html>

Resultado en el navegador

Cabeceras html

Para esta práctica, nos falta añadir algún párrafo para escribir un poco de texto. Puedes escribir los que quieras.

Etiquetas HTML

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

<body>

    <h1>Este es el título principal de mi primera página web.</h1>
    <h2>Este es el subtítulo.</h2>

    <p>Muy lejos, más allá de las montañas de palabras,
      alejados de los países de las vocales y las consonantes,
      viven los textos simulados. Viven aislados en casas de
      letras, en la costa de la semántica, un gran océano de
      lenguas. Un riachuelo llamado Pons fluye por su pueblo
      y los abastece con las normas necesarias. Hablamos de un
      país paraisomático en el que a uno le caen pedazos de frases
      asadas en la boca. Ni siquiera los todopoderosos signos de
      puntuación dominan a los textos simulados; una vida,
      se puede decir, poco ortográfica. Pero un buen día, una
      pequeña línea de texto simulado, llamada Lorem Ipsum,
      decidió aventurarse y salir al vasto mundo de la gramática.
      El gran Oxmox le desanconsejó hacerlo, ya que esas tierras
      estaban llenas de comas malvadas, signos de interrogación
      salvajes y puntos y coma traicioneros, pero el texto simulado
      no se dejó atemorizar. Empacó sus siete versales, enfundó su
      inicial en el cinturón y se puso en camino. Cuando ya había
      escalado las primeras colinas de las montañas cursivas, se
      dio media vuelta para dirigir su mirada por última vez, hacia
      su ciudad natal Letralandia, el encabezamiento del pueblo
      Alfabeto y el subtítulo de su...</p>

</body>
</html>

Resultado en el navegador

Si cargas esta página en el navegador, verás esto:

Cabeceras html

Ejercicios de html

4- Añade un segundo párrafo y un título h3 a tu página web (a la creada en este capítulo, en el último ejemplo, donde hay una etiqueta h1, h2 y una p).

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.