Cómo crear un sitio web estático en html

html HTML Html5 Css CSS

¿Necesitas un sitio web para una pequeña empresa? ¿O crear un portafolio para mostrar tu trabajo? En esta guía explicaremos cómo crear un sitio web paso a paso. ¡Vamos a empezar!

Un sitio web estático está organizado por una serie de archivos HTML, cada uno de los cuales representa una página física de un sitio web. En los sitios estáticos, cada página es un archivo HTML separado; por ejemplo, cuando visitas la página de inicio, solo estás viendo el archivo de la página de inicio real.

A diferencia de una aplicación web, no implica interacción con el usuario y su contenido, en lugar de ser generado dinámicamente por un servidor web o construido por el lenguaje Javascript en el navegador, permanece sin cambios, a menos que se cambie el código fuente.

¿Qué significa?

Es simple: incluso si dos páginas contienen una parte de contenido idéntico, como un pie de página, habrá dos versiones separadas del mismo. Entonces, si deseas actualizar el pie de página, debes hacerlo en cada página.

Los sitios web estáticos son bastante simples y todos los sitios web se crearon de esta manera durante los primeros años del world wide web.

¿Qué ventajas tienen?

Son conocidos por ser ultrarrápidos y funcionan particularmente bien tanto para sitios básicos de una página (piensa en sitios web de marketing empresarial) como en sitios con muchas páginas que tengan la misma estructura general (piensa en blogs o sitios de noticias)

¿Cómo crear un sitio web estático en HTML5?

El paso más importante es aprender los conceptos básicos de HTML y comprender la estructura de un documento web.

Antes de empezar, instala tu editor (te recomendamos Visual Studio Code, Atom o Notepad++): esto es importante porque los editores de texto nos facilitan escribir el código y encontrar errores al instante.

¿Entonces, a qué esperas? ¡Abre tu editor, crea una carpeta, luego un archivo dentro de ella y asígnale el nombre "index.html"! Es importante que todos los expedientes, a partir de ahora, tengan esta redacción. Inserta el siguiente bloque:

<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>El titulo de mi sitio web!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Mi primera pagina web.</p>
  </body>
</html>

Lo que se representa con las flechas “<>” se denomina etiqueta html. Siempre que abras una etiqueta (p. ej., <título>), es importante cerrarla (p. ej., </título>). Las etiquetas pueden contener otras etiquetas o texto dentro de ellas. Analicémoslos juntos:

• <!doctype html>: es la primera línea que se debe insertar dentro del documento y se utiliza para declarar el tipo de documento, en este caso en HTML.

• <html>: representa la raíz de un documento HTML. El tag <html> es el contenedor de todos los demás elementos HTML (menos el tag <!DOCTYPE>).

• <title>: el tag <title> define el título del documento. El título debe ser solo texto y se muestra en la barra del navegador o en la pestaña de la página.

• <head>: contiene metadatos y se coloca entre la etiqueta <html> y la etiqueta <body>. Los metadatos se proporcionan en el documento HTML, no se muestran y, por lo general, definen el título del documento, el conjunto de caracteres, los estilos, las secuencias de comandos y otra metainformación.

• <body>: el tag <body> define el cuerpo del documento y contiene todos los contenidos un documento HTML, como títulos, párrafos, imágenes, hipervínculos, tablas, etc…

Guarda, abre tu documento HTML en tu navegador y encontrarás un título en negrita (“Hello, world!”) Y un párrafo ("Mi primera página web").

¡Genial! Logramos crear una pequeña página web basada en dos líneas, ¡no es un mal comienzo! En el ejemplo actual, hemos insertado dos etiquetas: <h1> (que representa el encabezado (que va desde <h1> a <h6>) y la etiqueta <p> (párrafo). En nuestra guía html puedes encontrar todas las etiquetas deseadas, de acuerdo a nuestras necesidades, sin embargo, entre los más utilizados, recordamos:

• <a> para crear un hipervínculo (pasar de un página web a otra);

• <br> para pasar de párrafo;

• <div> un tag contenedor donde puedes crear la estructura deseada;

• <img> para añadir imágenes;

• <ul>, <ol> una lista desordenada y ordenada, respectivamente, y que contiene etiquetas <li> basadas en la cantidad de elementos en la lista;

• <span> para estilizar parte del texto.

Sabemos que HTML define el esqueleto de un sitio web, pero ¿cuántas veces te has preguntado "qué es css"? Bueno, el lenguaje CSS (Cascading Style Sheets) se ocupa del estilo de las etiquetas (tamaño, color, espaciado, etc.). De hecho, al agregar el atributo "estilo" en una etiqueta HTML, será posible proporcionar información precisa sobre el estilo.

Volvamos al ejemplo anterior:

<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>El titulo de mi sitio web!</title>
  </head>
  <body>
    <h1 style=”color:red;font-size:70px;background:yellow”>Hello, world!</h1>
    <p style=”margin-top:10px”>Mi primera pagina web.</p>
  </body>
</html>

Vuelve a abrir tu archivo en el navegador: ¿qué ha cambiado? El título es rojo, la fuente es más grande y tiene un fondo amarillo. El párrafo, por otro lado, es 10 píxeles más bajo que antes: este es el poder de CSS.

Vayamos un paso más allá: en realidad, escribir CSS de esta manera no es beneficioso para los motores de búsqueda y esto desalienta su posición cuando los usuarios buscan el sitio web. La best practice nos informa que tenemos que insertar el código CSS dentro de las hojas de estilo. ¿Qué significa esto?

En el mismo nivel, crea un archivo y asígnale el nombre "style.css" y volvamos al ejemplo:


<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>El titulo de mi sitio web!</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Mi primera pagina web.</p>
  </body>
</html>

// Dentro del archivo style.css

h1{
   color:red;
   font-size:70px;
   background:yellow;
  }

p{
   margin-top:10px;
 }

Actualiza la página web. ¿Que ha cambiado? Nada, todo es igual que antes. Pero, ¿qué pasó realmente?

Con la etiqueta <link> presente en el <head> y con la indicación del archivo CSS (style.css) gracias al atributo "href", hemos creado un enlace entre el documento HTML y la hoja de estilo. Posteriormente, hemos movido nuestras reglas .css dentro del nuevo documento.

¿Cómo se escribe en un archivo .css?

Seguimos estas pequeñas reglas:

• El selector (es. h1) apunta al elemento HTML al que se desea aplicar el estilo.

• El bloque de declaración (encerrado entre los corchetes) contiene una o más reglas css separadas por un punto y coma.

• Cada regla incluye un nombre de propiedad CSS y un valor, separados por dos puntos.

• Una regla CSS termina siempre con un punto y coma y los bloques de declaración están encerrados entre los corchetes.

En nuestro ejemplo actual, a través de la sintaxis declarada en el archivo .css, hemos redefinido las mismas reglas de estilo.

Todo lo que tienes que hacer para crear un sitio web desde cero es entender lo que quieres hacer e intentar "diseñar" a través de las etiquetas y CSS. Este último tema es muy importante para crear un diseño y hacer que vuestro sitio responda a los diversos dispositivos del mercado. ¿Que estás esperando? ¡Consulta nuestra guía de HTML y CSS!

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo