Estructura de una Página Web

Una página web está compuesta por tres partes principales:

HTML: Define la estructura de la página.
CSS: Define el estilo de la página.
JavaScript: Define el comportamiento de la página.

En código, podemos definirlo de la siguiente manera:

html

1<!DOCTYPE html>
2<html>
3  <head>
4      <style>
5          body {
6              background-color: #2d2d2d;
7          }
8          h1, p {
9              color: #ffffff;
10          }
11      </style>
12      <script>
13          console.log("Hola mundo");
14      </script>
15      <title>The Binding of Isaac</title>
16  </head>
17  <body>
18      <h1>We need to go deeper!</h1>
19      <p>Isaac and his mother lived alone in a small house on a hill</p>
20  </body>
21</html>

Usando el botón de Download puedes descargar el código y abriéndolo con tu navegador puedes ver el resultado.

Ahora vamos a explicarlo paso a paso:

Lo primero que debemos de definir en nuestra página es <!DOCTYPE html>, la cual es una declaración que le dice al navegador que versión de HTML estamos usando.

Una vez definida la versión de HTML, podemos empezar a definir la estructura de nuestra página con las etiquetas de <html>, las cuales contienen todo el contenido de nuestra página.

Las etiquetas <head> contienen información meta de la página, como el título, las descripciones, las etiquetas, etc. además de los estilos (CSS) y scripts (JavaScript) que se ejecutarán en la página.

Finalmente, la parte que definirá todo aquello que veremos en nuestro sitio serán las etiquetas <body>. En este ejemplo, nuestra página contiene un Título H1 y un párrafo P.

Esto es la base principal de todos las páginas web, en los siguientes temas abarcaremos ejemplos más complejos.

Introducción Texto