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.

Estilos de nuestra página web - primera parte

Segunda parte

Lista de propiedades que utilizamos en CSS

margin	Establece los márgenes de un elemento o contenedor, donde podemos asignar margen de los cuatro lados afuera de un elemento como si fuera una caja. top. bottom. left. right.
padding	Establece el espacio que tendremos del contenido que hay dentro de un elemento, es decir, el espacio que habrá dentro de la caja, así como en los cuatro lados. top. bottom. left. right.
font-family	Define el tipo de fuente que queremos utilizar.
font-size	Define el tamaño de la fuente.
text-align	Sirve para la alineación del texto: center. left. right. justify.
display	Propiedad que especifica cómo trabajaremos un elemento (si va a ser flexible, en bloque o bloque en línea): flex. block. inline-block.
justify-content	Define como vamos a justificar los elementos de un contenedor: Center: centra los elementos de una sección Space-round: alinea los elementos con espacios asignados antes, entre y después de líneas. Space-between: alinea los elementos con espacios entre líneas.
font-weight	Establece el peso de la fuente (si la queremos más negrita).
background-color	Sirve para poner un color de fondo.
height	Define el alto de un elemento.
line-height	Útil para el interlineado de un texto.
text-decoration	Ideal para la decoración del texto, como subrayado, por ejemplo.
color	Define el color de la letra.

Ahora nuestra página se verá así ya con el CSS:

Si quieres ver el código de la página y las imágenes que asignamos, puedes ingresar aquí.

Recuerda que esta página es apenas el comienzo para crear algo mucho más avanzado, más creativo y con más contenido visual. Hoy abordamos lo básico de HTML y CSS, pero puedes considerar más elementos para construir el sitio a tu medida.

Espero que esta información haya sido de utilidad. Éxito con tu página web. ¡Saludos!

💡

Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.