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:

    
    
    


    

        
Bienvenido a Mi Web
    
    

        
Esta es la estructura básica de una página web.
    
    

2. Etiquetas Comunes de HTML

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

Título Principal
Subtítulo

• Párrafos: Para textos normales.

Este es un párrafo.

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

Ir a Ejemplo

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

• Listas: Para crear listas ordenadas y desordenadas.

    
Elemento 1
    
Elemento 2



    
Elemento 1
    
Elemento 2

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

    

        
Columna 1
        
Columna 2
    
    

        
Dato 1
        
Dato 2
    

---

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 del archivo HTML:

3. Selectores Comunes de CSS

• Selector de Etiqueta:

h1 {
    color: blue;
}

• Selector de Clase:

.titulo {
    font-size: 24px;
}

Texto con Clase

• Selector de ID:

#encabezado {
    background-color: yellow;
}

Texto con ID

---

Parte 3: Ejemplo Completo

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

HTML

    
    
    
    


    

        
Mi Primera Web
        
    
    

        

            
Bienvenido
            
Esta es una web de ejemplo creada con HTML y CSS.
        
        

            
Sobre Mí
            
Aprender HTML y CSS es el primer paso para convertirse en desarrollador web.
        
    
    

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.