Web Development

Crea tu primer sitio web

Kenia Yaneth Paiz Chacón

2 de jun. de 2023 • 8 min read

En este artículo te enseñaré a crear tu primera página web utilizando HTML y CSS, al tiempo que conoceremos etiquetas básicas para crear la estructura de una página web y agregar estilos.

Antes de iniciar con la creación de la página web debemos tener claro qué es una página web, qué es HTML y qué es CSS. Veamos estos conceptos.

¿Qué es una página web?

Es un documento digital con información donde podemos insertar videos, imágenes, texto, archivos, entre otros. Al crear una página web, podemos darle vida a un blog personal o turístico, hablar de recetas de cocina o hobbies, compartir un portafolio personal o algún tema que nos parezca interesante.

¿Qué es HTML?

Es un lenguaje de marcado de hipertexto que nos sirve para estructurar nuestra página o sitio web. HTML nos ofrece un conjunto de etiquetas para trabajar con el contenido de una página web, por ejemplo, si queremos agregar una imagen utilizamos la etiqueta <img>. Cada etiqueta tiene su propia función al momento de crear nuestra página web.

Más adelante te mostraré las etiquetas básicas de HTML.

¿Qué es CSS?

Son hojas de estilo en cascada que nos sirven para darle vida a nuestra página web. Si bien HTML es para estructurar páginas, no podemos implementar color, animación o diseño al contenido. Por ello, utilizaremos CSS.

Coffee Club

La página web que haremos tratará sobre una pequeña recomendación de los cafés que más nos gustan. La idea es aprender cómo estructurar nuestra página web con HTML y darle diseño con CSS.

Nuestra página contendrá lo siguiente:

Encabezado (título de la página).
Menú de navegación.
Contenido principal.
Pie de página.

Herramientas necesarias

Editor de código: Visual Studio Code.

Para el entorno de trabajo utilizaremos Visual Studio Code. Dejo el enlace para descargarlo. Al momento de la instalación, lo único que tendrás que hacer es seguir los pasos para la instalación o escoger otro editor de tu preferencia.

Pixabay: Herramienta para descargar las imágenes libres de derechos que usaremos en nuestra página web.

Link: https://pixabay.com/es/

unDraw: La utilizaremos también para descargar las imágenes que tendremos en nuestra página web.

Link: https://undraw.co/illustrations

Pigment: Sirve para definir nuestra paleta de colores en la página web.

Link: https://pigment.shapefactory.co/

Estructura de nuestro HTML

Comenzamos con la estructura básica de HTML, incorporando el tipo de documento DOCTYPE, encabezado HEAD y cuerpo de nuestro contenido BODY.

<!DOCTYPE>: Tipo de documento que desarrollaremos.
<head>: Es el encabezado que contiene la información general de la página (conocida como metadatos). Dentro de head asignamos el título de la página, enlaces para hojas de estilos o scripts. Dicha información no será visualizada por el usuario.
<body>: Indica el cuerpo del contenido de la página que será visualizada en la pantalla. Podemos asignar párrafos, imágenes, videos, entre otros.

Dentro del <body> también necesitamos una estructura para manejar la información de nuestro contenido, la cual se divide en encabezado, contenido principal y pie de página.

Tendremos un encabezado con el título principal: Coffee Club.

Para nuestro menú de navegación utilizaremos la etiqueta <nav>. Dentro de nuestro menú tendremos una lista desordenada donde cada elemento de la lista tendrá un link.

Nuestro contenido principal contará con dos secciones: en la primera tendremos una imagen y una frase icónica, mientras que en la segunda habrá una lista de los cafés que nos gusten, incluyendo su nombre y una imagen.

No olvides asignar la propiedad class (como está declarado en el ejemplo). Esto nos ayudará con los estilos que generaremos más adelante.

Para finalizar con el contenido del <body>, tendremos el pie de página que indicará el título de nuestra página web.

Dejo una lista de las etiquetas básicas de HTML:

<tittle>	Define el título de la pestaña del navegador.
<link>	Podemos enlazar archivos .css, hojas de estilo para nuestra página web o si queremos utilizar otros estilos como Bootstrap.
<head>	Provee información general acerca del documento.
<header>	Define el encabezado del cuerpo de la página web, a diferencia del <head>.
<h1> .. <h6>	Sirven para poner títulos dentro de la página de diferentes tamaños. A medida que el número va aumentando, el título muestra menos importancia y se reduce el tamaño de la fuente.
<nav>	Menú de navegación donde podemos insertar enlaces y listas.
<section>	Define secciones donde podemos colocar información de la página web.
<div>	Contenedor para información de la página web.
<p>	Sirve para agrupar un párrafo.
<br>	Sirve para hacer un salto de línea.
<img>	Sirve para añadir imágenes a la página. Con la propiedad src ponemos la dirección donde está ubicada la imagen.
<span>	Es para personalizar o marcar una parte de un texto.
<video>	Para insertar un video.
<audio>	Para insertar un audio dentro de la página.
<iframe>	Inserta contenido de otras páginas como Google Maps.
<ul>	Sirve para listas desordenadas.
<li>	Funciona para elementos dentro de una lista.
<ol>	Ideal para crear listas ordenadas.
<footer>	Define el pie de una página.
<table>	Funciona para crear una tabla.
<tr>	Funciona para crear las filas de una tabla.
<td>	Crea las columnas de una tabla.
<form>	Sirve para hacer un formulario.
<input>	Elemento usado para crear controles de distintos tipos como: Ingresar texto (text). Seleccionar casillas (checkbox). Elegir una opción en específico (radio). Asignar fecha (date). Asignar un botón para generar una acción (submit).
<label>	Aquí se pone el título del <input>.
<textarea>	Útil para introducir textos largos.
<strong>	Resalta el texto importante de una página.
<b>	Necesario para colocar un texto en negritas.
<button>	Para insertar un botón dentro de una página.
<select>	Define un menú desplegable con diferentes elementos.

Cuando ya tengamos lista nuestra estructura HTML, así se visualizará en el navegador:

¡Listo! Ya tenemos nuestra estructura HTML, pero necesitamos que nuestra página web tenga vida. Para ello utilizaremos CSS, a fin de que nuestro sitio tenga estilos y ciertas propiedades como agregar color, tipo de fuente, alinear texto y ajustar elementos.

Cuando agregamos estilos a nuestra página web podemos tener archivos aparte (como su nombre lo indica hojas de estilos) y solo llamar el archivo con la etiqueta <link>, pero también podemos trabajar los estilos dentro del archivo HTML con la etiqueta <style>. En esta ocasión, tendremos los estilos dentro del HTML.

💡

Nota: La etiqueta <style> la tendremos después de la etiqueta <head>.

En CSS tenemos muchas propiedades donde cada propiedad sirve para asignar un estilo, ya sea estilos a las fuentes, asignar color de fondo, color de texto, alinear elementos, asignar ancho o alto a una imagen, contenedor, etc. Pero ¿cómo utilizamos esas propiedades con nuestro código HTML? Fácil: en CSS tenemos selectores.

¿Qué son los selectores?

Los selectores son herramientas para llamar un elemento de un documento en HTML. Tenemos selectores por:

Etiqueta: llamamos la etiqueta propia de HTML. Por ejemplo, si quieres cambiar el color a tu título principal, puedes utilizar la etiqueta propia <h1>.
Clases: en las etiquetas HTML podemos tener clases y, en vez de llamar la etiqueta propia, en CSS puedes llamar sus clases, las cuales se representan con un punto (.) (por ejemplo: .contenedor1).

ID: en las etiquetas HTML podemos tener id, que representa una identificación única a un elemento del HTML. En CSS, los id se representan con el Hashtag (#) (por ejemplo, #contenedor1).

Universal (*): El selector universal toma base general a todos los elementos del HTML. Los estilos que agregues a este selector aplicarán para todo el documento. Normalmente, el universal lo utilizamos para asignar el margin y padding de nuestra página.

Generalmente, los navegadores traen un margen en específico para la página web, pero si no quieres que tu página web lleve ese margen predeterminado, puedes utilizar este selector y asignar el margen que desees.