Curso de Diseño Web-Módulo 1: Fundamentos de HTML

1.1. Introducción a la Web y los Navegadores

HTML es un lenguaje de marcado que se utiliza para estructurar el contenido en la web. Los navegadores como Chrome y Firefox interpretan este código para mostrar las páginas web.

HTML: Lenguaje de marcado utilizado para estructurar el contenido.
Navegadores web: Programas que interpretan HTML (Chrome, Firefox, etc.).
Servidor y Cliente: El servidor almacena las páginas, y el navegador las solicita y muestra.

1.2. Estructura Básica de un Documento HTML

El siguiente es un ejemplo de la estructura básica de un documento HTML:


<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
    <p>Este es mi primer sitio web con HTML.</p>
  </body>
</html>

1.3. Elementos Comunes de HTML

Estos son algunos elementos comunes utilizados en HTML:

Encabezados: <h1> a <h6>
Párrafos: <p>
Imágenes: <img src="imagen.jpg" alt="Descripción">
Enlaces: <a href="url">Texto del enlace</a>
Listas: Ordenadas (<ol>) y desordenadas (<ul>)

1.4. Atributos en HTML

Los atributos son propiedades adicionales para los elementos HTML. Por ejemplo:


<img src="imagen.jpg" alt="Descripción de la imagen" class="responsive" id="imagen1">

src: Especifica la fuente de la imagen.
alt: Texto alternativo de la imagen.
id: Identificador único del elemento.
class: Clase que agrupa varios elementos.

1.5. Buenas Prácticas en HTML

Algunas buenas prácticas en HTML incluyen:

Usar nombres semánticos para las etiquetas (<nav>, <footer>).
Asegurar que las imágenes tengan el atributo alt.
Organizar el código con sangría y comentarios para hacerlo legible.

Ejemplo de comentario en HTML:

<!-- Este es un comentario en HTML -->

1.6. Proyecto Práctico: Mi Primera Página Web

Crea tu primera página HTML aplicando lo que has aprendido:

Encabezados
Párrafos
Imágenes
Enlaces
Listas
Tablas y Formularios

Módulo 2: Fundamentos de CSS

2.1. Introducción a CSS

CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación de documentos HTML. Permite diseñar páginas web con colores, tipografías, tamaños, y mucho más.

2.2. Cómo Agregar CSS a un Documento HTML

Hay tres formas de agregar CSS a un documento HTML:


1. CSS en línea:
<h1 style="color: red;">Texto en rojo</h1>

2. CSS interno:
<style>
  body {
    background-color: lightgray;
  }
</style>

3. CSS externo:
<link rel="stylesheet" href="styles.css">

2.3. Selectores CSS Comunes

Selector de etiquetas: p { color: green; }
Selector de clases: .clase { font-size: 20px; }
Selector de IDs: #id { background-color: yellow; }

2.4. Colores, Tipografías y Unidades en CSS

CSS permite definir colores, tipografías y unidades de tamaño.

Colores: Hexadecimales, RGB, o nombres.
Tipografías: Usando font-family.
Unidades: Usando px, em, %, entre otros.

2.5. Modelo de Caja (Box Model)

El modelo de caja define la disposición de los elementos.

Content: El contenido real.
Padding: Espacio alrededor del contenido.
Border: El borde.
Margin: Espacio alrededor del borde.

2.6. Diseño Responsivo

CSS permite que una página web se vea bien en pantallas de todos los tamaños mediante Media Queries.


@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

CURSO DE DISEÑO WEB PARA PRINCIPIANTES E INTERMEDIOS

Módulo 1: Fundamentos de HTML