Tutorial: Tutorial básico para criar uma página web utilizando HTML, CSS e JavaScript

  • Autor Autor Petters
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Petters

Petters

Gamma
Verificado
Tutorial básico para crear una página web utilizando HTML, CSS y JavaScript con algunos ejemplos de código:

1- Crea un nuevo archivo en tu editor de texto y guardalo con la extensión .html

HTML:
<!DOCTYPE html>
<html>
<head>
  <title>Mi Página Web</title>
</head>
<body>
  <header>
    <h1>Bienvenido a mi Página Web</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#sobre-mi">Sobre Mi</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
  <main>
    <h2>Inicio</h2>
    <p>Bienvenido a mi página web.</p>
  </main>
  <footer>
    <p>Copyright ©2022 Mi Página Web</p>
  </footer>
</body>
</html>

2- Crea un archivo CSS y enlázalo en tu archivo HTML utilizando la etiqueta <link>

CSS:
<link rel="stylesheet" type="text/css" href="style.css">

CSS:
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}
header h1 {
  text-align: center;
  color: #333;
}
nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}
nav a {
  padding: 1em;
  text-decoration: none;
  color: #333;
}

3- Crea un archivo JavaScript y enlázalo en tu archivo HTML utilizando la etiqueta <script>

JavaScript:
<script src="script.js"></script>

JavaScript:
function mostrarOcultar() {
  var x = document.getElementById("oculto");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

4- Utiliza un servidor local o sube tu página a un hosting para que sea accesible desde internet.
Recuerda que esto es solo un ejemplo básico, y existen muchas formas de mejorar y ampliar la funcionalidad de tu página web utilizando HTML, CSS y JavaScript. Es importante que sigas investigando y aprendiendo para poder desarrollar páginas web más complejas.

Espero que este tutorial te haya ayudado a entender los conceptos básicos de creación de una página web con HTML, CSS y JavaScript.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Muy interesante. Está entre mi lista de deseos el poder aprender algo de programación. He oído que con ChatGPT se pueden obtener códigos muy interesantes, aunque lo ideal sería saber hacerlo uno mismo! Gracias por el tutorial! Saludos cordiales!
 
Hola muchas gracias por el tutorial seguramente le servirá a muchas personas, sobre todo aquellos que quieren empezar en el mundo de programación desde el principio un saludo
 
Voltar
Topo