Principales Códigos HTML y CSS para Crear una Web

En este tutorial aprenderás los códigos básicos de HTML y CSS que se utilizan para dar estructura y estilo a una página web. Estos elementos forman la base para cualquier proyecto web, desde lo más simple hasta lo más complejo.

Parte 1: Códigos Básicos de HTML

1. Estructura Inicial de una Página HTML

El siguiente código representa la estructura base de cualquier página web:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primera Web</title>
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Web</h1>
    </header>
    <main>
        <p>Esta es la estructura básica de una página web.</p>
    </main>
    <footer>
        <p>&copy; 2024 Mi Primera Web</p>
    </footer>
</body>
</html>

2. Etiquetas Comunes de HTML

Encabezados: Para crear títulos y subtítulos.

<h1>Título Principal</h1>
<h2>Subtítulo</h2>

Párrafos: Para textos normales.

<p>Este es un párrafo.</p>

Enlaces: Para redirigir a otras páginas o sitios web.

<a href="https://www.ejemplo.com">Ir a Ejemplo</a>

Imágenes: Para insertar imágenes en tu página.

<img src="imagen.jpg" alt="Descripción de la imagen">

Listas: Para crear listas ordenadas y desordenadas.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

<ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ol>

Tablas: Para organizar información en filas y columnas.

<table>
    <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
    </tr>
    <tr>
        <td>Dato 1</td>
        <td>Dato 2</td>
    </tr>
</table>

Parte 2: Códigos Básicos de CSS

CSS se utiliza para dar estilo y diseño a las páginas HTML.

1. Estructura Básica de un Archivo CSS

El siguiente ejemplo muestra la estructura de un archivo CSS:

/* Estilo para el cuerpo */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Estilo para encabezados */
h1 {
    color: #333;
    text-align: center;
}

/* Estilo para párrafos */
p {
    color: #666;
    line-height: 1.5;
    margin: 0 20px;
}

/* Estilo para enlaces */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

2. Cómo Vincular CSS con HTML

Agrega este código dentro de la etiqueta <head> del archivo HTML:

<link rel="stylesheet" href="estilos.css">

3. Selectores Comunes de CSS

Selector de Etiqueta:

h1 {
    color: blue;
}

Selector de Clase:

.titulo {
    font-size: 24px;
}

<h1 class="titulo">Texto con Clase</h1>

Selector de ID:

#encabezado {
    background-color: yellow;
}

<h1 id="encabezado">Texto con ID</h1>

Parte 3: Ejemplo Completo

Aquí tienes un ejemplo que combina HTML y CSS para crear una página web simple:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Web</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header>
        <h1>Mi Primera Web</h1>
        <nav>
            <a href="#inicio">Inicio</a>
            <a href="#sobre-mi">Sobre Mí</a>
            <a href="#contacto">Contacto</a>
        </nav>
    </header>
    <main>
        <section id="inicio">
            <h2>Bienvenido</h2>
            <p>Esta es una web de ejemplo creada con HTML y CSS.</p>
        </section>
        <section id="sobre-mi">
            <h2>Sobre Mí</h2>
            <p>Aprender HTML y CSS es el primer paso para convertirse en desarrollador web.</p>
        </section>
    </main>
    <footer id="contacto">
        <p>Contacto: ejemplo@correo.com</p>
    </footer>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #007bff;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

Con estos códigos y conceptos, ya tienes una base sólida para empezar a crear tus propias páginas web. Experimenta con diferentes estilos y diseños para desarrollar tus habilidades.