Cómo crear tu primera página web desde cero con HTML y CSS

En este tutorial aprenderemos cómo crear una página web desde cero utilizando HTML y CSS. Veremos paso a paso cómo estructurar el código y aplicar estilos para tener una página web responsiva y atractiva. No se requiere experiencia previa en programación, así que ¡vamos a comenzar!

Configuración inicial

Antes de empezar, aseg√ļrate de tener instalado un editor de c√≥digo. En este tutorial utilizaremos Visual Studio Code, pero puedes utilizar cualquier otro editor que te resulte m√°s c√≥modo. Tambi√©n necesitar√°s tener un navegador web para visualizar la p√°gina a medida que la vayas construyendo.
Lo primero que haremos es crear una carpeta para nuestro proyecto. Puedes llamarla como prefieras. Luego, abriremos el editor de c√≥digo y crearemos un nuevo archivo HTML. Vamos a llamar a este archivo ¬ęindex.html¬Ľ y dentro de √©l escribiremos la estructura b√°sica de un documento HTML5.

HTML

				
					<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="estilo.css">
<title>Mi Primera P√°gina Web</title>
</head>
<body>
<header>
<h1>Bienvenidos a mi p√°gina web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<h2>Servicios</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus finibus ligula, in porttitor libero viverra ut. Nulla facilisi. Curabitur semper augue non lacus blandit lobortis. Aliquam erat volutpat. Etiam sagittis mauris id risus congue, ut viverra magna accumsan. Vivamus rhoncus dignissim purus, in lacinia nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi.</p>
</main>
<footer>
<p>Derechos de autor © 2024 Mi Página Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
 
				
			

Ahora que tenemos nuestra estructura HTML b√°sica, vamos a agregar estilos CSS para darle un dise√Īo atractivo a nuestra p√°gina. Creamos un archivo llamado¬† ¬ęestilo.css¬Ľ

CSS

				
					body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #1206;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

nav ul {
  list-style-type: none;
  margin top: 2px;
  padding: 0;
  text-align: center;
}

nav ul li {
  display: inline;
  margin: 0 10px;
  
}

nav ul li a {
  text-decoration: none;
  color: #fff;
}

main {
  padding: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}
 
				
			

Resultado

P√°gina web html y css

Ejecuta el código en línea

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *