Curso básico de HTML: Crea tu página web

Página 2: Crea tu página web

/es/curso-basico-de-html/que-es-html/content/

Crea tu página web 

Ahora que ya sabes qué es HTML, es momento de ponerlo en práctica. Puedes escribir y ejecutar tu propio documento en tu computador.

Ten en cuenta que el archivo HTML que crearás en esta lección sólo estará disponible en tu ordenador, nadie podrá acceder a él en línea. Sin embargo, podrás cargarlo en tu navegador como lo haces con las páginas que normalmente visitas.

Crea tu carpeta base

Te recomendamos crear una carpeta donde guardarás todos los ejercicios que realices a lo largo de este curso. ¡Sigue estos pasos!

Paso 1: 

Ubícate en el espacio de tu computador donde quieres guardar tu carpeta. Evita hacerlo en el escritorio. En este caso, nosotros elegimos la carpeta Documentos.

Crea tu primer archivo HTML

Paso 2: 

Una vez estés en su interior, haz clic derecho y selecciona la opción Nueva Carpeta.

Cómo crear tu primer archivo HTML

Paso 3: 

Asígnale un nombre, puede ser "Tutoriales Programación GCF". 

Cómo crear tu primer archivo HTML

Crea tu archivo HTML

Sigue estos pasos para crear tu primer archivo HTML.

Paso 1:

Abre el programa Atom en tu ordenador.

Editor de texto Atom

Para trabajar con código HTML es importante contar con un editor de texto. Si aún no cuentas con uno, puedes descargar Atom haciendo clic aquí. Otros programas que te pueden servir son Sublime Text, Visual Studio Code o tu editor de texto favorito. 

Paso 2: 

Una nueva ventana de color oscuro se abrirá. Haz clic en la opción "Open a project", que se encuentra en la columna derecha. 

Cómo usar un editor de texto para HTML

Recuerda que en el lenguaje HTML encontrarás muchas palabras e instrucciones en inglés, incluso, muchas etiquetas se usan en este idioma y no se pueden traducir porque, por defecto, los navegadores solo las interpretan así. 

Paso 3: 

Vuelve a seleccionar el botón azul llamado "Open a project".

Editores de texto para HTML

Paso 4: 

Busca la carpeta "Tutoriales Programación GCF" que creaste anteriormente. Selecciónala y haz clic en "Abrir".

Cómo crear mi primer archivo HTML

Paso 6: 

En la parte superior izquierda de Atom se mostrará tu carpeta. Haz clic derecho sobre ella y selecciona la opción "New File" o "Nuevo archivo"

Crea tu primer archivo HTML

Paso 7:

Escribe el nombre de tu archivo. En este caso vamos a llamarlo "index.html" y pulsa Enter.

Paso 8:

Ahora tienes un archivo HTML vacío donde podrás escribir tu primer código. 

Escribe tu primer código HTML

No hay muchas diferencia entre este documento y un archivo de texto, que podría llamarse "index.txt". La diferencia es que la extensión ".html" de tu archivo , a diferencia de ".txt", le permitirá a cualquier programa que intente abrir el archivo saber qué tipo de contenido encontrará dentro. 

Curso básico de HTML

El nombre que le has dado, "index.html", es uno de los más usados para la página de inicio de un sitio web. Podrías llamarlo "misitioweb.html" o "Codexx2lovin.html" y funcionaría igual. Sin embargo, "index.html" se ha popularizado tanto que cualquier programador —o incluso tú, si lo olvidas— puede identificar que se trata del archivo principal de un sitio web.

Escribe tu primer HTML

¡Empecemos! Escribe o copia el siguiente código en tu archivo index.html vacío:

<html>
  <body>
    <p>¡Hola, mundo!</p>
  </body>
</html>

Se verá así:

Código HTML en Atom

Como ves hay algunas etiquetas básicas a las que hay que prestarles atención porque son imprescindibles. Por ejemplo: 

  • <html>: este elemento es el contenedor principal de tu página web. Todo lo que añadas debe ir dentro de él.
  • <body>: en este elemento pondrás todo el contenido real de tu página web. Si lo dejas en blanco, al cargar la página solo verás un fondo vacío. Así que, para empezar, pondremos dentro de <body>el elemento párrafo.
  • <p>: este elemento te ayudará a crear párrafos de texto con un poco de espacio arriba y abajo. Normalmente, se encuentran anidados dentro de otros elementos, como los anteriores ↑. 

Ahora, sólo lo que hay dentro del elemento <p>aparecerá realmente en la página web. Los otros son lo que a menudo se conoce como código repetitivo, que significa que aparecen en casi todos los documentos HTML porque los navegadores los requieren. 

Hay otras piezas de código que un navegador necesita para leer el archivo como una página web válida y real, pero las veremos más adelante. ¡Vamos paso a paso! 

Elementos anidados

Como te lo explicamos en la página anterior, los elementos anidados son aquellos que se encuentran dentro de otro elemento. 

Recuerda que la mayoría de los elementos HTML funcionan como contenedores. Por ejemplo, en el código anterior:

  • Las etiquetas <html> y </html> contienen el elemento <body>.
  • Los etiquetas <body> y </body> contienen el elemento<p>.
  • Las etiquetas <p> y <p> guardan el texto. 
Elementos anidados en HTML

Sangrías 

También hay sangrías antes de algunas etiquetas. Son los pequeños espacios que hay entre el margen y una línea de texto.

Están ahí para hacer el código más legible para el programador que trabaja en él. Algunas personas prefieren utilizar la tecla de tabulación para hacer estas sangrías, mientras que otras prefieren pulsar la barra espaciadora. En cualquier caso, el objetivo es tener una cantidad creciente de espacio para cada capa de elementos anidados, lo que hace más fácil identificar qué elementos están dentro de cada uno. 

En cuanto a tu navegador, la cantidad de sangría que uses no hace ninguna diferencia. Tu navegador podría leer ese código de la misma manera, así el código se encuentre en una sola línea:

<html><body><p>¡Hola, mundo!</p></body></html>

Sin embargo, ese tipo de formato te dificultará mucho las cosas y será más fácil cometer un error si quieres cambiar algo más adelante.

Mira tu página web

Una vez que hayas escrito el código en tu archivo HTML en Atom, ¡guárdalo! Solo tienes que dirigirte al menú de herramientas, ubicado en la parte superior izquierda de tu ordenador, seleccionar la opción "File" y elegir "Save", que en español significa "Guardar".

Cómo guardar tu archivo HTML

Así podrás verlo como una página web en tu navegador siguiendo estos pasos: 

Paso 1: 

Busca entre los archivos de tu computador la carpeta que creaste con el nombre "Tutoriales Programación GCF" y haz doble clic sobre ella para abrirla.

Paso 2: 

Verás tu archivo "index.html" acompañado del logo del navegador que estás usando. En este caso, elegimos Google Chrome. Haz doble clic en tu archivo.

Mi código HTML primero

Paso 3: 

El archivo se abrirá y deberás ver algo como esto:

Mi primer código HTML

¡Felicitaciones! Acabas de crear tu primera página web.

Ahora, ¡prueba esto!

Si quieres jugar un poco con las etiquetas básicas, puedes hacerlo.

  1. Vuelve a tu editor Atom y cambia el texto dentro del elemento párrafo por algo que desees. 
  2. Guarda el archivo y actualiza la página en tu navegador. 
  3. Deberías ver tu nuevo texto en la página.

¡Sigue conectado a nuestro Curso de HTML! En la próxima página te enseñamos cómo añadir títulos y encabezados.

/es/curso-basico-de-html/textos-en-html/content/