Como crear tu primera pagina web

Bienvenido al mundo de la programación de paginas web -- o como es llamado en ingles "web development".

Los componentes básicos de una pagina web son tres partes, HTML y CSS.

HTML

El HTML (HyperText Markup Language) es el lenguaje básico de una pagina web, es lo que le da estructura.

Si pensamos en una pagina web como un edificio, el HTML vendría a ser las columnas y vigas que forman el esqueleto del edificio.

Una pagina web tradicional tiene las siguientes elementos de HTML:

<!DOCTYPE>: Este elemento define el typo de documento.
<html>: Este es el elemento principal en el cual todos los otros elementos entran.
<head>: En este elemento se declaran los elementos y opciones que dictan el typo de buscador, el titulo, y otras etiquetas que veremos mas adelante.
<title>: Este elemento contiene el titulo de la pagina.
<body>: Este elemento contiene todos los elementos que aparecen en la pagina.
<h1>: Este elemento indica texto que tiene que ser mostrado como titulo y varia de <h1>, hasta <h6>.
<p>: Este elemento contiene los párrafos de la pagina.
<a>: Este elemento sirve para crear vínculos a otras paginas.
<img>: Este es el elemento que muestra imágenes.

Este es un ejemplo de una pagina muy simple utilizando los elementos que acabamos de mencionar.

<!DOCTYPE>
<html>
  <head>
    <title>Primera pagina</title>
  </head>
  <body>
    <h1>Hola a todos</h1>
    <p>Esta es mi primera pagina web</p>
    <img src="https://placekitten.com/g/200/300" alt="imagen de un gato"/>
    <p><a href="https://google.com">Google</a></p>
  </body>
</html>

Si pasamos ese código nuestro buscador podemos ver que la siguiente pagina web es creada.

Felicitaciones, hemos creado nuestra primera pagina web. Pero hay un problema, esta pagina es muy simple, así que vamos a agregar mas información y hacerla mas bonita e interactiva.

CSS

CSS (Cascading Style Sheets) es lo que vamos a utilizar para decorar nuestra pagina, si volvemos a nuestro ejemplo del edificio, CSS seria la pintura y decoración de nuestro edificio.

Hay 3 maneras que podemos incorporar CSS en nuestra pagina; la primera seria agregando los estilos a cada uno de los elementos en la pagina directamente.

<h1 style="color: red;">Hola a todos</h1>

La segunda manera es poniendo todos los estilos en el <head> de la pagina usando el elemento <style>.

<style>
  h1 {
    color: red;
  }
</style>

La tercera manera seria guardando todos nuestros cambios de CSS en un archivo (ej. estilos.css) e invocándolos en la pagina web usando el elemento <link> en el <head>.

<link rel="stylesheet" src="estilos.css"/>

Vamos a agregar un poco de estilo a nuestra pagina web.

<!DOCTYPE>
<html>
  <head>
    <title>Primera pagina</title>
    <style>
      body {
        background-color: yellow;
      }
      p {
        color: green;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1 style="color: red;">Hola a todos</h1>
    <p>Esta es mi primera pagina web</p>
    <img src="https://placekitten.com/g/200/300" alt="imagen de un gato"/>
    <p><a href="https://google.com">Google</a></p>
  </body>
</html>

Ahora si guardamos nuestros cambios y volvemos a cargar nuestra pagina, podemos ver nuestros cambios de estilo.

Ah, pero un momento, nuestros cambios al <p> fueron aplicados a todos los párrafos, pero solo queremos que sean aplicados al primero, es aquí donde debemos de utilizar los atributos de id y class para poder controlar mejor donde y como se aplican nuestros estilos, asi que vamos a limpiar nuestros estilos, agregar id y class, y por ultimo movamos nuestros estilos a un archivo externo que llamaremos estilos.css.

Una vez que hemos completado nuestros cambios, deberían de verse así... index.html

<!DOCTYPE>
<html>
  <head>
    <title>Primera pagina</title>
  </head>
  <body>
    <h1 id="titulo">Hola a todos</h1>
    <p id="descripción" class="párrafo">Esta es mi primera pagina web</p>
    <img src="https://placekitten.com/g/200/300" alt="imagen de un gato"/>
    <p class="párrafo"><a href="https://google.com">Google</a></p>
  </body>
</html>

estilos.css

#titulo {
  color: navy;
}
#descripción {
  font-weight: bold;
}
.párrafo {
  color: #333;
}

.párrafo a {
  color: inherit;
 }

Como verán ahora, la pagina ya esta aplicando los estilos correctos solo en los lugares que queremos y como queremos.

Una nota importante, como se pueden haber dado cuenta en el ejemplo anterior, utilize class="párrafo" mas de una vez, pero cada id tenia un valor único, y esto es muy importante para crear paginas web correctamente.

Otra nota es que la mejor manera de incluir estilos de CSS en una pagina es incluyendo todos los estilos en un archivo separado y luego usando <link> para incorporar los estilos en la pagina, de esta manera si tiene varias paginas en un sitio web, todas las paginas tendrán el mismo diseño, cargaran mas rápido, y serán mas fáciles de actualizar en el futuro.

Bueno, ya tenemos la estructura, y el estilo de nuestra pagina, ahora hay que agregar un poco de interactividad a nuestra primera pagina web.

Command Palette

HTML

CSS

Comments