Creando tu primera página web con HTML

En esta primera práctica, vamos a crear una página web muy sencilla utilizando HTML. El objetivo de esta práctica es familiarizarte con la estructura básica de un documento HTML y con algunas de las etiquetas más comunes que se utilizan para crear contenido en la web.

para esta practica vamos crear una nueva carpeta llamada practicas y dentro de esa carpeta vamos a crear una carpeta llamada practica-1, dentro de esta carpeta vamos a crear un archivo llamado index.html, este archivo será el esqueleto de nuestra página web, y vamos a ir editando este archivo a lo largo de esta práctica para ir añadiendo contenido y estructura a nuestra página web, debemos tener la siguiente estructura de archivos:

Directorypracticas - Carpeta raíz de nuestras prácticas
- Directorypractica-1 - Carpeta de la primera práctica
  - index.html - El esqueleto de nuestra página web

Recapitulando lo que hemos visto hasta ahora

Lo primero de todo y mas importante en un documento de html es la etiqueta <html>, esta etiqueta es la raíz de nuestro documento HTML, y dentro de esta etiqueta es donde vamos a escribir todo el contenido de nuestra página web, asi que vamos a empezar por definirla:

<html>
</html>

Si abrimos este archivo index.html en nuestro navegador, no veremos nada, esto es porque no hemos añadido ningún contenido dentro de la etiqueta <html>, así que vamos a añadir un poco de contenido para ver como funciona. ¿Recuerdas que habíamos dicho que la etiqueta <html> tiene dos etiquetas principales dentro de ella, que son <head> y <body>? Pues vamos a añadir estas dos etiquetas dentro de nuestra etiqueta <html>, y vamos a ver que pasa:

<html>
  <head>

  </head>
  <body>

  </body>
</html>

Bueno parece ser que seguimos sin ver nada, esto es normal, todavia no hemos incluido ningun elemento dentro de nuestro <body>, empecemos por un añadir un <h1> para definir un título de nivel 1, igualmente ya tendremos una sección dedicada a los elementos de texto, pero por ahora vamos a añadir un título para ver como funciona:

<html>
  <head>

  </head>
  <body>
    <h1>Hola, mundo!</h1>
  </body>
</html>

!Por fin! Ahora si deberíamos ver un título que dice “Hola, mundo!”, esto es porque hemos utilizado la etiqueta <h1> para definir un título de nivel 1, y hemos escrito el texto “Hola, mundo!” dentro de esa etiqueta, ahora indagaremos en mayor profundidad, esto solo es un pequeño experimento para ver como funciona HTML, y como se estructura el contenido de una página web utilizando etiquetas.

Ahora vamos a pasar al head vamos a añadir un título a nuestra página web utilizando la etiqueta <title>, esta etiqueta se utiliza para definir el título de una página web, y el contenido de esta etiqueta es lo que se muestra en la pestaña del navegador cuando abrimos nuestra página web, así que vamos a añadir un título a nuestra página web:

<html>
  <head>
   <title>Mi primera página web</title>
  </head>
  <body>
    <h1>Hola, mundo!</h1>
  </body>
</html>

Practica 1: Crea tu primera página web

Okey ahora es tu turno, tu tarea es crear una pagina web con las siguientes características:

El título de la página web debe ser “La primera página web de [tu nombre]”, utilizando la etiqueta <title>.
El contenido de la pagina web tiene que tener un titulo de nivel 1 <h1>que diga “Hola mundo”
Investiga en internet que hace la etiqueta <p>, añade uno de estos elementos a tu página web, y escribe dentro de este elemento un texto de tu elección, puede ser una descripción de ti mismo/a, una cita que te guste, o cualquier cosa que quieras compartir.