Configuración de CSS y HTML para tu sitio web: un tutorial

Preslav Dobrev2022-10-28 · 5 min read

Configuración de CSS y HTML para tu sitio web: un tutorial

Crear sitios web es el paso inicial para comenzar con el desarrollo web. Uno de los primeros cosas que los entusiastas del desarrollo web deben aprender es cómo configurar CSS y HTML para un sitio web. Al configurar la página de introducción básica, un principiante puede prepararse con los conceptos básicos del diseño de sitios web, perfeccionar sus habilidades de desarrollo web y aprender a colaborar con desarrolladores.

Este tutorial le guiará a través de los conceptos básicos de la configuración de archivos HTML y CSS para su sitio web. ¡Comencemos!

Requisitos previos

Un entendimiento básico de HTML y CSS.

Paso 1- Configuración inicial

Inicialmente, crearemos un nuevo directorio de proyecto y lo nombraremos demo-project :

mkdir demo-project

1	mkdir demo-project

A continuación, desplácese al directorio actual usando el cd comando:

cd demo-project

1	cd demo-project

En la carpeta del proyecto, agreguemos los siguientes archivos que necesitaremos para lanzar nuestro sitio web básico:

index.html : Este archivo tendrá todos los códigos HTML.
styles.css : Mantendremos todos los archivos CSS aquí para dar estilo a nuestro sitio web.
images : Todas las imágenes necesarias deben guardarse en esta carpeta.

Ahora que hemos creado nuestro directorio de proyecto y agregado los archivos necesarios, sigamos adelante y agreguemos el contenido HTML en nuestro index.html en el siguiente paso.

Paso 2- Agregar contenido HTML en el archivo index.html File

En el archivo index.html que creamos en el paso anterior, agregaremos los códigos HTML introductorios. Estas líneas HTML básicas servirán como instrucciones para el navegador, pero no se mostrarán en la página web.

Agregue el siguiente bloque de código en su archivo index.html :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>¡Bienvenido a CloudSigma!</title>

</head>

<body>

</body>

</html>

Nota: Asegúrese de que el archivo index.html esté vacío antes de agregar estos bloques de códigos. Además, considere cambiar el título como se destaca en la sección <title> .

Entendamos los términos utilizados:

<!DOCTYPE html> : Es una declaración que informa al navegador sobre el tipo de HTML utilizado en el documento HTML.
- Dado que hay múltiples versiones de estándares HTML disponibles, especificar el DOCTYPE facilita que los navegadores identifiquen la versión de HTML sin esfuerzo. Por ejemplo, en esta guía, estamos utilizando la última versión de HTML5.
<html> : Esta etiqueta informa al navegador que el contenido incluido dentro de ella debe tratarse como HTML. Al abrir un archivo <html> , asegúrese de cerrarlo usando la etiqueta </html> . Esta etiqueta admite atributos lang , y puede especificar el idioma de la página web. Hemos establecido el idioma en inglés en nuestro tutorial utilizando la etiqueta de idioma en .
- Visite el IANA Language Subtag Registry para consultar los otros idiomas disponibles para su uso.
<head> : Esto crea una sección en el documento HTML y contiene información sobre la página web. Sin embargo, no hay detalles de contenido y el navegador no muestra ninguna información aquí en la sección head.
<meta charset="utf-8"> : Especifica el conjunto de caracteres del documento. Debe estar en un formato Unicode, es decir, UTF-8, que admite la mayoría de los idiomas escritos reconocidos.
<title> : La etiqueta <title> informa al navegador sobre el nombre de la página web. El título aparece en la pestaña del navegador cuando el sitio web aparece en los resultados de búsqueda.
<link rel="stylesheet" href="css/styles.css"> : Informa al navegador para identificar la hoja de estilo que contiene los estilos CSS.
<body> : Esta etiqueta contiene el contenido principal de la página web. Al usar una etiqueta <body> , asegúrese de cerrarla usando la etiqueta </body> .

Paso 3- Dar estilo usando CSS

En el archivo styles.css archivo, agregue estilos según las necesidades de su proyecto. En este ejemplo, agregue las siguientes líneas de código en su styles.css archivo:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Finalmente hemos creado los archivos HTML y CSS básicos que necesitaremos para lanzar nuestro sitio web. Además, puede agregar imágenes y guardarlas en la carpeta de imágenes. Guarde y cierre el archivo. Después de eso, abra el index.html archivo en su navegador web favorito y verá una página básica en su pantalla.

Conclusión

En este tutorial introductorio, hemos aprendido los conceptos básicos para configurar HTML y CSS y hemos creado un sitio web rudimentario. Ahora es el momento de crear nuevas páginas, ponerlas a punto, agregar contenido y enlazar todo desde la barra de navegación. Como siguiente paso, intente agregar más contenido al index.html archivo y dele estilo usando CSS.

Además, hay otros tutoriales de HTML y CSS que puede encontrar en nuestro blog:

¡Feliz computación!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev es diseñador creativo en CloudSigma, centrado en una identidad empresarial coherente mediante el uso de canales de marketing tradicionales e innovadores. Es experto en fusionar la visión artística con el marketing estratégico para crear narrativas de marca impactantes.