## Objetivos de Aprendizaje - Entender el papel de HTML y CSS en desarrollo web - Aprender la estructura básica de un documento HTML - Vincular CSS a documentos HTML ## ¿Qué es HTML? HTML (HyperText Markup Language) estructura el contenido de una página web usando elementos y etiquetas. ```html

¡Hola, Mundo!

Esta es mi primera página web.

``` ## ¿Qué es CSS? CSS (Cascading Style Sheets) controla la presentación y el estilo visual de los elementos HTML. ```css h1 { color: blue; font-size: 24px; } p { color: gray; line-height: 1.6; } ``` ## Conectar HTML y CSS ### CSS Externo ```html ``` ### CSS Interno ```html ``` ### CSS en Línea ```html

Título Azul

``` ## Estructura Básica de un Documento HTML ```html ``` ## La Declaración DOCTYPE La declaración `` indica al navegador que renderice la página en modo estándar. ## Configurar tu Entorno ### Opción 1: Editor de Texto - Visual Studio Code (recomendado) - Sublime Text - Atom ### Opción 2: Editores en Línea - CodePen - JSFiddle - Replit ## Tu Primera Página Web Crea un archivo llamado `index.html` y añade el siguiente contenido: ```html

Bienvenido a Mi Sitio Web

Acerca de Este Sitio

Esta es mi primera página web construida con HTML y CSS.

``` ## Cómo Funcionan los Navegadores 1. El navegador obtiene el documento HTML 2. El parser lee HTML y construye el árbol DOM 3. El navegador obtiene el CSS vinculado 4. Se crea el CSSOM (CSS Object Model) 5. El árbol de renderizado combina DOM y CSSOM 6. El layout calcula las posiciones de los elementos 7. Painting renderiza los píxeles en pantalla ## Resumen - HTML estructura el contenido usando elementos y etiquetas - CSS estiliza los elementos HTML - Vincula CSS a HTML usando `` para estilos externos - Todo documento HTML necesita ``, ``, ``, y ``