CodeStart

Lo primero que se debe hacer es descargar Visual Studio Code, que será el editor donde se escribirá y organizará el código. Visual Studio Code sirve para crear, editar y trabajar con archivos de programación como HTML, CSS y JavaScript, facilitando el desarrollo gracias a sus herramientas y funciones

Para descargarlo, basta con buscar en el navegador Visual Studio Code y acceder a su página oficial. Luego, se debe seleccionar la versión correspondiente al sistema operativo que se esté utilizando (Windows, macOS o Linux). Una vez descargado el instalador, se ejecuta y se aceptan las opciones que solicita el asistente de instalación. Con esto, Visual Studio Code quedará correctamente instalado en el computador.

.Extension {

1.1. Extensiones recomendadas

Cuando se habla de extensiones en Visual Studio Code, se hace referencia a herramientas que ayudan a que la programación sea más rápida y organizada. Existen muchas extensiones disponibles, pero en este curso solo se utilizarán algunas de ellas.

Prettier

Prettier es una extensión que formatea automáticamente el código para mantener una estructura limpia, ordenada y consistente. Esto mejora la legibilidad del código, facilita su comprensión y ayuda a que todos los archivos del proyecto sigan el mismo estilo de escritura.

Indent-rainbow

Indent-Rainbow es una extensión para Visual Studio Code que utiliza diferentes colores para resaltar los niveles de indentación del código. Esto facilita identificar la estructura del programa y distinguir los bloques de código de forma visual. Si en este momento no resulta muy claro, más adelante se explicará con ejemplos para que sea más fácil comprender su funcionamiento.

Image preview

Image Preview es una extensión para Visual Studio Code que permite visualizar una vista previa de una imagen al colocar el cursor sobre la ruta de un archivo de imagen. De esta forma, es posible comprobar rápidamente el contenido de la imagen sin necesidad de abrir el archivo.

Live Server

Live Server es una extensión para Visual Studio Code que inicia un servidor local para visualizar páginas web durante el desarrollo. Su principal ventaja es que actualiza automáticamente el navegador cada vez que se guardan cambios en el código, evitando la necesidad de recargar la página manualmente y agilizando el proceso de desarrollo.

Palenight Theme

Palenight Theme es un tema para Visual Studio Code que cambia la apariencia del editor mediante una combinación de colores diseñada para mejorar la legibilidad del código. Los diferentes colores ayudan a distinguir con mayor facilidad los elementos del código, haciendo que sea más cómodo de leer y analizar. Su instalación es completamente opcional; sin embargo, en los ejemplos y explicaciones de este curso se utilizará este tema.

}

.HTML_basico {

2. HTML nivel basico

En HTML, el contenido se estructura mediante etiquetas. En la mayoría de los casos, una etiqueta está formada por una etiqueta de apertura y una etiqueta de cierre, las cuales indican dónde comienza y dónde termina un elemento. Es fundamental escribirlas correctamente para que el navegador interprete el código sin problemas.

La estructura general de una etiqueta es la siguiente:

<nombre_etiqueta>arrow_forwardEtiqueta de apertura.

</nombre_etiqueta>arrow_forwardEtiqueta de cierre.

Por Ejemplo:

Documento.html

<html></html>

<div></div>

<body></body>

2.1. Estructura básica de una página web

Todo documento HTML debe comenzar con la declaración <!DOCTYPE>. Esta declaración indica al navegador que el documento utiliza HTML5, permitiendo que la página se interprete y se renderice correctamente. Aunque no es una etiqueta de HTML, es una declaración que siempre debe colocarse al inicio del documento.

Despues se encuentran las etiquetas <html></html>, las cuales delimitan el inicio y el final del documento HTML. Todo el contenido de la página, incluidas las demás etiquetas y estructuras, debe escribirse entre estas dos etiquetas.

Dentro de <html>se encuentra la etiqueta <head>, cuya función es almacenar información y configuraciones del documento que no se muestran directamente en la página web. En esta sección se incluyen elementos como el título de la página, los enlaces a archivos CSS, los scripts de JavaScript, los metadatos y otras configuraciones necesarias para el funcionamiento del sitio. La etiqueta <head>siempre debe ubicarse antes de la etiqueta <body>

Dentro de la etiqueta <head>es común utilizar la etiqueta <title></title>, la cual permite definir el título que aparecerá en la pestaña del navegador cuando el usuario visite la página.

Después de la etiqueta <head> se encuentra la etiqueta <body>, que contiene todo el contenido visible de la página web. En su interior se agregan elementos como títulos, párrafos, imágenes, enlaces, listas, tablas, formularios y cualquier otro contenido que el usuario verá e interactuará en el navegador.

Codigo:

Documento.html


<!DOCTYPE>
<html>
  <head>
    <title> Docmento </title>
  </head>
  <body>
  </body>
</html>



  2.2. Encabezados
    La etiqueta <h1></h1> se utiliza para crear el encabezado principal de una página o de una sección importante del contenido. Generalmente, representa el título más relevante de la página y ayuda tanto a los usuarios como a los motores de búsqueda a comprender de qué trata el contenido.
    HTML dispone de seis niveles de encabezados, que van desde <h1> hasta <h6>. La etiqueta <h1> representa el nivel de mayor importancia, mientras que <h6> corresponde al nivel de menor importancia. Estos encabezados permiten organizar y estructurar el contenido de forma jerárquica, facilitando su lectura y comprensión.
    
      
    



    2.3. Párrafo
    La etiqueta <p></p> se utiliza para crear párrafos en una página web. Dentro de esta etiqueta se escribe el texto que se desea mostrar como parte del contenido. Cada párrafo representa un bloque de texto independiente, lo que ayuda a organizar la información y facilita su lectura.
    
      
        
Documento.html
      
      <p> 
    Lorem ipsum dolor sit amet consectetur, adipisicing 
    Accusantium quasi, iure possimus voluptas iusto, 
    alias suscipit tenetur veniam qui repellat fuga. 
    elit. Neque vitae, atque nisi vero nam tempore. 
    Beatae, consectetur! 
</p>


  2.4. Listas
  Las listas en HTML permiten organizar la información de forma clara y ordenada, facilitando la lectura y comprensión del contenido. Son ideales para presentar pasos, características, elementos o cualquier conjunto de datos relacionados de manera estructurada.


  2.4.1. Lista ordenada
  Para crear una lista ordenada (Ordered List) se utiliza la etiqueta <ol></ol>. Este tipo de lista organiza automáticamente sus elementos mediante una numeración secuencial.
  Dentro de la etiqueta <ol> se agregan los elementos de la lista utilizando la etiqueta <li></li>(List Item), la cual representa cada uno de los elementos que conforman la lista.
  
    
      
Documento.html
    
  <ol> 
    <li>Tomate</li>
    <li>Cebolla</li>
    <li>Pepino</li>
    <li>Lechuga</li>
    <li>Papa</li>
</ol>
  
  Si ejecutamos el código, el resultado se mostrará de la siguiente manera:
  
    Tomate
    Cebolla
    Pepino
    Lechuga
    Papa
  
  


  2.4.2. Lista desordenada
  La etiqueta <ul></ul> se utiliza para crear listas desordenadas (Unordered List), es decir, listas en las que el orden de los elementos no es relevante. A diferencia de la etiqueta <ol>, este tipo de lista no emplea numeración, sino viñetas para representar cada elemento.
  Un uso muy común de las listas desordenadas es la creación de menús de navegación, donde se muestran opciones como Inicio, Inventario, Ajustes o Perfil de usuario. Dentro de la etiqueta <ul> también se utilizan las etiquetas <li></li> (List Item), que representan cada uno de los elementos de la lista.
  
    
      
Documento.html
    
      <ul> 
    <li>Tomate</li>
    <li>Cebolla</li>
    <li>Pepino</li>
    <li>Lechuga</li>
    <li>Papa</li>
</ul>
  
  Si ejecutamos el código, el resultado se mostrará de la siguiente manera:
  
    Tomate
    Cebolla
    Pepino
    Lechuga
    Papa
  
  


  
    2.5. Enlaces
    Para crear un enlace en HTML se utiliza la etiqueta <a></a> En la etiqueta de apertura se debe agregar el atributo href, que indica la dirección a la que se accederá cuando el usuario haga clic en el enlace.
    Después de escribir href, se coloca el signo igual (=) y, entre comillas, la dirección o URL del sitio web al que se desea dirigir al usuario. A continuación, se cierra la etiqueta de apertura (>), se escribe el texto que se mostrará como enlace y, por último, se agrega la etiqueta de cierre </a>
    Es importante tener en cuenta que el atributohrefsolo se incluye en la etiqueta de apertura. La etiqueta de cierre siempre debe escribirse únicamente como </a>
    
      
        
Documento.html
      
      <a href="https://www.youtube.com/"> Youtube </a>
    
    
      Ejemplo:
      Youtube
  
  
    2.5.1. Enlazar documentos
    Los enlaces no solo permiten dirigir al usuario a páginas web externas, sino también vincular diferentes documentos HTML dentro de un mismo proyecto. Por ejemplo, si en una carpeta existen dos archivos HTML, es posible crear un enlace desde uno hacia el otro utilizando la etiqueta <a>
    Para ello, en el atributo href de la etiqueta de apertura se escribe el nombre del archivo al que se desea acceder. De esta manera, al hacer clic en el enlace, el navegador abrirá el documento HTML indicado.
    Por ejemplo, si existen los archivos index.html y contacto.html, desde index.html se puede acceder a contacto.html escribiendo href="contacto.html".
      
        
          
Documento.html
          <a href="contacto.html"> Segundo Documento </a>
        
    
  
    2.5.2 Atributo de la etiqueta <a>
    De forma predeterminada, los enlaces creados con la etiqueta <a> se abren en la misma pestaña del navegador. Si se desea que el enlace se abra en una nueva pestaña, se debe agregar el atributo target con el valor _blank dentro de la etiqueta de apertura.
    El atributo target="_blank" indica al navegador que el enlace debe abrirse en una nueva pestaña o ventana, según la configuración del navegador. Este atributo se escribe junto con href, antes de cerrar la etiqueta de apertura (>)
    
      
        
Documento.html
      
      <a href="https://www.youtube.com/" target="_blank" > Youtube </a>
    
  


    2.6. Imagenes
    En HTML, las imágenes pueden incorporarse de dos formas: utilizando un archivo almacenado dentro del proyecto o mediante la URL de una imagen alojada en Internet.
    Para insertar una imagen se utiliza la etiqueta <img>. Esta etiqueta emplea el atributo src, que indica la ubicación de la imagen que se desea mostrar. En src se puede escribir la ruta de un archivo local por ejemplo, (img/logo.png) o la dirección URL de una imagen en línea.
    También es recomendable incluir el atributo alt, el cual proporciona un texto alternativo que se mostrará si la imagen no puede cargarse. Además, este texto es utilizado por los lectores de pantalla, lo que mejora la accesibilidad de la página. El contenido del atributo alt debe ser breve y describir la imagen de forma clara.
    La etiqueta <img> es una etiqueta autocontenida, por lo que no requiere una etiqueta de cierre. Su estructura básica es la siguiente:
    
      
        
Documento.html
      
      <img src="img/logo.png" alt="Logo de la empresa" >


  2.7. Rutas
  Las rutas en HTML permiten indicar la ubicación de archivos como documentos, imágenes, hojas de estilo o scripts dentro de un proyecto. Gracias a ellas, es posible acceder a archivos que se encuentran en la misma carpeta, en una carpeta diferente o en otro nivel de la estructura de directorios.
  Si el archivo se encuentra dentro de una carpeta ubicada en la misma ubicación que el documento actual, basta con escribir el nombre de la carpeta seguido de una barra (/). Por ejemplo:
  img/logo.png
  En este caso, se accede al archivo logo.png que se encuentra dentro de la carpeta img.
  Por el contrario, si es necesario retroceder un nivel en la estructura de carpetas, se utiliza ../. Cada ../ permite subir una carpeta respecto a la ubicación actual.
  Por ejemplo:
  
    
      
        ../arrow_forward Retrocede una carpeta.
      
    
    
      
        ../../arrow_forwardRetrocede dos carpetas.
      
    
    
      
        ../../../arrow_forwardRetrocede tres carpetas.
      
    
  
  Combinando estas rutas es posible acceder a cualquier archivo dentro del proyecto, sin importar en qué carpeta se encuentre.


  2.8. Formularios
  Los formularios permiten solicitar información a los usuarios dentro de una página web, como su nombre, correo electrónico, contraseña, fecha de nacimiento o cualquier otro dato necesario. Para crear un formulario se utiliza la etiqueta<form></form>, y dentro de ella se agregan uno o varios campos de entrada mediante la etiqueta <input>.
  La etiqueta <input>es una etiqueta autocontenida y utiliza el atributo type para indicar el tipo de información que el usuario podrá ingresar. Dependiendo del valor asignado a este atributo, el navegador mostrará un campo diferente.
  
    type="text"
  
  Se utiliza para crear un campo de texto de una sola línea. Es el tipo de entrada más común y permite al usuario escribir información como su nombre, apellido o ciudad.
  
  
    type="email"
  
  Se utiliza para solicitar una dirección de correo electrónico. Este tipo de campo realiza una validación automática para comprobar que el texto tenga el formato básico de un correo electrónico.
  Si el usuario intenta enviar el formulario, pueden ocurrir dos situaciones de error:
  
    El campo está vacío y además tiene el atributo required; el navegador indicará que debe completarse.
    El usuario escribió un texto que no tiene un formato válido de correo electrónico (por ejemplo, si no contiene el símbolo @ o el dominio correspondiente), por lo que el navegador mostrará un mensaje indicando que la dirección de correo no es válida.
  
  
  
    type="password"
  
  Permite crear un campo para que el usuario escriba una contraseña. Los caracteres ingresados no se muestran directamente en pantalla, sino que aparecen ocultos mediante puntos o asteriscos para proteger la información.
  
  
    type="checkbox"
  
  Crea una casilla que el usuario puede marcar o desmarcar. Se utiliza cuando una o varias opciones pueden seleccionarse de manera independiente, por ejemplo, aceptar los términos y condiciones o elegir varios intereses.
  
  
    type="radio"
  
  Permite mostrar un grupo de opciones entre las que el usuario solo puede seleccionar una. Es útil para preguntas donde únicamente existe una respuesta válida, como seleccionar el género, el método de pago o una respuesta de opción múltiple.
  
  
    type="file"
  
  Permite que el usuario seleccione y cargue un archivo desde su dispositivo, como una imagen, un documento, un archivo PDF o cualquier otro tipo de archivo permitido por el formulario.
  
  
    type="date"
  
  Muestra un selector de fecha para que el usuario elija un día específico desde un calendario. Es muy utilizado para solicitar fechas de nacimiento, reservas, citas o eventos.
  
  
    type="submit"
  
  Se utiliza para crear un botón que envía la información del formulario. Cuando el usuario hace clic en este botón, el navegador envía los datos ingresados para que puedan ser procesados por el servidor o por el programa encargado de recibirlos.
  
  Atributos importantes de <input>
  
    required
  
  El atributo required indica que un campo es obligatorio. Si el usuario intenta enviar el formulario sin completar ese campo, el navegador impedirá el envío y mostrará un mensaje solicitando que lo complete.
  
    name
  
  El atributo name asigna un nombre a cada campo del formulario. Este nombre permite identificar la información cuando el formulario es enviado, de modo que el servidor o el lenguaje encargado de procesar los datos pueda saber qué valor corresponde a cada campo.
  Por ejemplo, un campo con name="nombre" indicará que el dato recibido corresponde al nombre del usuario.
  
    placeholder
  
  El atributo placeholder muestra un texto de ayuda dentro del campo antes de que el usuario escriba. Su función es orientar sobre el tipo de información que debe ingresar. Este texto desaparece automáticamente cuando el usuario comienza a escribir.
  
  
    minlength y maxlength
  
  Los atributos minlength y maxlength permiten establecer la cantidad mínima y máxima de caracteres que el usuario puede escribir en un campo de texto.
  El atributo minlength indica el número mínimo de caracteres que debe contener el campo para que el formulario pueda enviarse. Si el usuario escribe menos caracteres de los especificados, el navegador impedirá el envío del formulario y mostrará un mensaje indicando que debe ingresar más caracteres.
  
      
        
Documento.html
      
      <input type="text" minlength="5" >
      
  Por su parte, el atributo maxlength establece el número máximo de caracteres permitidos. Cuando el usuario alcanza ese límite, el campo no permite seguir escribiendo más texto.
  
      
        
Documento.html
      
      <input type="text" maxlength="8" >
      

}






  .CSS Basico {
    
      3. CSS Basico
      CSS (Cascading Style Sheets) es el lenguaje encargado de definir la apariencia y el diseño de una página web. Gracias a CSS es posible modificar aspectos como los colores, las fuentes, los tamaños, los márgenes, la distribución de los elementos y las animaciones, logrando que un sitio web sea más atractivo y fácil de utilizar.
      Además de mejorar la presentación visual, CSS permite separar el contenido de su diseño. Esto facilita el mantenimiento del código, ya que es posible cambiar la apariencia de una o varias páginas sin modificar su estructura HTML, haciendo el desarrollo más organizado, eficiente y profesional.
    
    
      3.1. Uso de estilos en línea
      Existen tres formas principales de aplicar CSS a un documento HTML. La primera consiste en utilizar estilos en línea (Inline CSS), los cuales se escriben directamente dentro de la etiqueta HTML mediante el atributo style.
      Para aplicar un estilo en línea, se agrega el atributo style="" en la etiqueta de apertura y, dentro de sus comillas, se escriben una o varias propiedades CSS junto con sus respectivos valores.
      Por ejemplo, la propiedad color permite cambiar el color del texto. Si se escribe color: red;, el contenido de esa etiqueta se mostrará en color rojo. Este tipo de estilos solo afecta al elemento en el que se ha escrito el atributo style.
    
    
      
        
Documento.html
      
      <body>
  <p style="color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque commodi voluptatem accusamus, ex laboriosam architecto pariatur illum tenetur nobis, est velit? Reiciendis numquam eos natus quas necessitatibus, eius molestiae repellat.</p>
</body>

  
    Ejemplo:
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam sapiente iusto quidem nam tenetur autem, eum laboriosam fugit aut qui. Non vero molestiae fuga debitis voluptatibus inventore ipsa sed mollitia?
  
    
    
      3.2. Estilos internos (internal)
      La segunda forma de aplicar CSS es mediante la etiqueta <style>, la cual permite escribir reglas de estilo directamente dentro del mismo documento HTML. Generalmente, esta etiqueta se coloca dentro de la sección <head>, ya que allí se reúnen las configuraciones y recursos relacionados con la página.
      Dentro de la etiqueta <style> se escriben las reglas CSS. Cada regla comienza con un selector, que indica el elemento al que se aplicarán los estilos (por ejemplo, p para los párrafos). Después del selector se escriben unas llaves ({}) y, en su interior, se colocan las propiedades y sus respectivos valores que definirán la apariencia de ese elemento.
    
    
  
    
    Documento.html
  
  <!DOCTYPE html>
<html>
  <head>
      <style>
          p {
              color: red;
          }
      </style>
  </head>
  <body>
  </body>
</html>
    
    
    
      3.3. Estilos externos (external)
      La tercera y más recomendada forma de aplicar CSS es mediante una hoja de estilos externa. En este método, los estilos se escriben en un archivo independiente con la extensión .css, el cual posteriormente se vincula al documento HTML.
      Para enlazar el archivo CSS, se utiliza la etiqueta <link> dentro de la sección <head> del documento HTML. Esta etiqueta es autocontenida y requiere, como mínimo, dos atributos importantes:
      
        rel="stylesheet": indica que el archivo vinculado es una hoja de estilos CSS.
        href="...": especifica la ruta o el nombre del archivo CSS que se desea enlazar.
      
      Cuando el navegador carga la página, también carga el archivo CSS y aplica automáticamente todos los estilos definidos en él. Este método es el más utilizado, ya que permite mantener separados el contenido (HTML) y el diseño (CSS), facilitando la organización, el mantenimiento y la reutilización del código.
      
  
    
    Documento.html
  

  <!DOCTYPE html>
<html>
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
  </head>

      
        Una vez que el archivo CSS ha sido vinculado correctamente al documento HTML, todos los estilos pueden escribirse directamente en la hoja de estilos. A partir de ese momento, cualquier cambio realizado en el archivo .css, como modificar colores, tamaños, fuentes, márgenes, posiciones o cualquier otra propiedad de diseño, se aplicará automáticamente a los elementos del documento HTML que coincidan con los selectores definidos.
      
    
    
      3.4. Selectores básicos
      En muchas ocasiones es necesario aplicar estilos únicamente a uno o varios elementos específicos, sin afectar a todos los elementos del mismo tipo. Para ello se utiliza el atributo class.
      Para crear una clase, se agrega el atributo class="" en la etiqueta HTML que se desea identificar y, entre las comillas, se escribe un nombre representativo. Este nombre servirá para asociar ese elemento con una regla de estilos en CSS.
      Posteriormente, en el archivo CSS, la clase se selecciona escribiendo un punto (.) seguido del nombre asignado. Todas las propiedades definidas dentro de esa regla se aplicarán únicamente a los elementos que tengan esa clase.
      
  
    
    Documento.html
  

  <!DOCTYPE html>
<html>
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <p>Hola</p>
      <p class="saludo">Hola</p>
  </body>
</html>

      
  
    
    styles.css
  

  .saludo {
    color: red;
}


  Una de las principales ventajas de class es que la misma clase puede utilizarse en varios elementos, permitiendo aplicar el mismo conjunto de estilos sin necesidad de repetir el código.
  
  
    
    Documento.html
  

  <!DOCTYPE html>
<html>
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <p>Hola</p>
      <p class="saludo">Hola</p>
      <ul>
          <li class="saludo">Papa</li>
          <li>Tomate</li>
          <li class="saludo">Fresas</li>
          <li>Cilantro</li>
      </ul>
  </body>
</html>


    
    
      3.5. Identificador único (id)
      Además del atributo class, HTML dispone de otro identificador llamado id, el cual también permite asignar un nombre a un elemento para poder seleccionarlo posteriormente desde CSS o JavaScript.
      La principal diferencia entre ambos es que el valor de un id debe ser único dentro de un mismo documento HTML. Esto significa que un mismo identificador no debe asignarse a más de un elemento. En cambio, una clase (class) puede reutilizarse en tantos elementos como sea necesario.
      Aunque algunos navegadores permiten que existan varios elementos con el mismo id, esta práctica no sigue el estándar de HTML y puede provocar comportamientos inesperados, especialmente al trabajar con JavaScript o al crear enlaces internos dentro de la página.
      Para seleccionar un elemento mediante su id en CSS, se utiliza el símbolo # seguido del nombre del identificador. Los estilos definidos en esa regla se aplicarán únicamente al elemento que tenga ese id.
      
  
    
    Documento.html
  

  <body>
    <p id="saludo">Hola</p>
</body>


  
    
    styles.css
  

  #saludo {
    color: red;
}

    
    
      3.6. Color
      La propiedad color se utiliza para cambiar el color del texto de un elemento en CSS. Después de escribir el nombre de la propiedad, se colocan dos puntos (:) y, a continuación, el valor correspondiente al color que se desea aplicar.
      En este curso se utilizarán los nombres de los colores en inglés, como red, blue, green o black, ya que es la forma más sencilla de comenzar a trabajar con esta propiedad. Más adelante se estudiarán otros métodos para definir colores, como los valores RGB, HEX y HSL.
    
    
      3.7. Tipo grafía
      La propiedad font-family se utiliza para definir la tipografía de un texto en CSS. Puede aplicarse a cualquier elemento que contenga texto, como títulos, párrafos, enlaces o botones.
      Después de la propiedad font-family, se escriben dos puntos (:) y el nombre de la fuente que se desea utilizar. Si el nombre de la tipografía está compuesto por varias palabras, como Times New Roman, debe escribirse entre comillas simples. En cambio, si el nombre consta de una sola palabra o corresponde a una familia genérica, como Arial o sans-serif, no es necesario utilizar comillas.
      Es recomendable especificar varias fuentes separadas por comas. De esta manera, si el navegador o el sistema operativo del usuario no dispone de la primera tipografía, intentará utilizar la siguiente de la lista. Como última opción, se suele indicar una familia genérica, como serif, sans-serif o monospace, para asegurar que siempre se muestre una fuente adecuada.
      
  
    
    styles.css
  

  .saludo {
    font-family: 'Times New Roman', Times, serif;
}

    
    
      3.8. Tamaño
      La propiedad font-size se utiliza para definir el tamaño del texto en CSS. Puede aplicarse a cualquier elemento que contenga texto, como títulos, párrafos, enlaces o botones.
      Después de la propiedad font-size, se escriben dos puntos (:) y el valor correspondiente al tamaño deseado, seguido de una unidad de medida. En este curso se utilizará la unidad px (píxeles), ya que es una de las más comunes y sencillas para comenzar a trabajar con tamaños de texto.
      Por ejemplo, en los párrafos suelen utilizarse tamaños como 14px, 16px o 18px, dependiendo del diseño de la página. Es importante escribir siempre la unidad de medida después del número; de lo contrario, el valor no será válido en CSS.
      
  
    
    styles.css
  

  .saludo {
    font-size: 18px;
}

    
    
      3.9. Tamaño
      Existen dos formas comunes de mostrar un texto en negrita en una página web.
      La primera consiste en utilizar la etiqueta <b></b> en HTML. Todo el contenido que se encuentre dentro de esta etiqueta se mostrará con un grosor mayor que el texto normal. Sin embargo, esta etiqueta solo modifica la apariencia visual del texto y no le aporta un significado especial.
      
  
    
    Documento.html
  

  <body>
    <p>Lorem, ipsum dolor sit amet <b>consectetur</b> adipisicing elit. Repudiandae optio nemo illum, quam accusamus ipsa dolore pariatur cum. Facere distinctio dolorem, rerum at quia voluptatibus eius blanditiis eos voluptatem accusamus!</p>
</body>

      
        La segunda forma consiste en utilizar CSS mediante la propiedad font-weight. Al asignarle el valor bold, el texto seleccionado se mostrará en negrita. Este método es el más recomendado cuando el objetivo es modificar únicamente la apariencia del texto, ya que mantiene separados el contenido (HTML) y el diseño (CSS).
        
  
    
    styles.css
  

  .saludo {
    font-weight: bold;
}

      
      
        Además del valor bold, la propiedad font-weight permite definir el grosor del texto utilizando valores numéricos. Generalmente, estos valores van de 100 a 900 en incrementos de 100, donde 100 representa un grosor muy delgado y 900 un grosor muy grueso. Cuanto mayor sea el valor, más gruesas se mostrarán las letras, siempre que la tipografía utilizada disponga de esos niveles de grosor.
        
  
    
    styles.css
  

  .saludo {
    font-weight: 100;
}

      
    
    
      
3.10. Resaltar texto con <strong> y <span>
      En ocasiones es necesario aplicar un estilo únicamente a una palabra o a una parte específica de un texto, sin modificar el resto del contenido. Para ello se utiliza la etiqueta <span></span>
      La etiqueta <span> no aplica ningún estilo por sí sola; su función es agrupar una porción de texto para poder seleccionarla posteriormente desde CSS o JavaScript. Es una de las etiquetas más utilizadas cuando se desea cambiar el color, el tamaño, la fuente u otra propiedad de una palabra o frase específica.
      Por otro lado, la etiqueta <strong></strong> se utiliza para indicar que una parte del texto tiene especial importancia. Los navegadores suelen mostrar este contenido en negrita de forma predeterminada, pero, además de modificar su apariencia, <strong> aporta un significado semántico que ayuda a los motores de búsqueda y a las tecnologías de asistencia a identificar que ese contenido es importante.
      En resumen, utiliza <span> uando únicamente necesites aplicar estilos a una parte del texto, y <strong> cuando, además de resaltarlo, quieras indicar que ese contenido tiene una importancia especial.
    








  
    .unidades-de-medida {
    Unidades de medida en CSS
    Las unidades de medida en CSS permiten definir tamaños para diferentes elementos. Existen unidades absolutas como px y relativas como rem, em, %, vw y vh.
    Elegir la unidad adecuada ayuda a crear interfaces responsivas y fáciles de mantener: las unidades relativas se adaptan al contexto —al tamaño de fuente del padre o al tamaño de la ventana— mientras que px se mantiene fijo.
    
      
unidades.css
      .contenedor {
  width: 100%;       /* relativo al padre */
  max-width: 60rem;  /* relativo a la fuente raíz */
  padding: 2vw;      /* relativo al viewport */
  font-size: 1.125em; /* relativo al padre */
}
    
    }
  

  
    .flexbox {
    Flexbox
    Flexbox es un sistema de diseño unidimensional pensado para distribuir elementos en fila o columna. Se activa con display: flex en el contenedor padre.
    Con propiedades como justify-content y align-items se resuelven problemas clásicos de alineación y espaciado que antes requerían trucos con float o posicionamiento absoluto.
    
      
flexbox.css
      .barra-navegacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
    
    }
  

  
    .grid {
    CSS Grid
    Grid es un sistema bidimensional que permite definir filas y columnas al mismo tiempo, ideal para maquetar secciones completas de una página.
    A diferencia de Flexbox, que resuelve un solo eje a la vez, Grid controla tanto el eje horizontal como el vertical desde un mismo contenedor, con propiedades como grid-template-columns.
    
      
grid.css
      .galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 600px) {
  .galeria {
    grid-template-columns: 1fr;
  }
}
    
    }
  

  
    .pseudo {
    Pseudo-clases y pseudo-elementos
    Las pseudo-clases seleccionan elementos según un estado, como :hover o :focus, mientras que los pseudo-elementos dan estilo a una parte específica de un elemento, como ::before o ::first-letter.
    Ambos evitan añadir clases o marcado extra al HTML solo para lograr un efecto visual puntual.
    
      
pseudo.css
      .boton:hover {
  background-color: #5b5fef;
}

.boton:focus-visible {
  outline: 2px solid #ff5d8f;
}

.cita::before {
  content: "“";
  color: #ff5d8f;
}
    
    }
  

  
    .variables {
    Variables CSS (custom properties)
    Las custom properties, conocidas como variables CSS, permiten guardar valores reutilizables como colores, espaciados o tipografías.
    Se definen con dos guiones dentro de un selector —normalmente :root— y se consumen con la función var(), lo que facilita mantener la consistencia visual y cambiar el tema de un sitio desde un solo lugar.
    
      
variables.css
      :root {
  --color-acento: #5b5fef;
  --espaciado-base: 1rem;
}

.tarjeta {
  border: 1px solid var(--color-acento);
  padding: var(--espaciado-base);
}
    
    }
  

  
    .responsive {
    Diseño responsivo con media queries
    Las media queries adaptan los estilos según las características del dispositivo, principalmente el ancho de la ventana, usando la regla @media.
    Combinadas con un enfoque mobile-first —donde los estilos base están pensados para pantallas pequeñas— permiten construir interfaces que funcionan bien en cualquier tamaño de pantalla.
    
      
responsive.css
      .columna {
  width: 100%;
}

@media (min-width: 768px) {
  .columna {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .columna {
    width: 33.333%;
  }
}
    
    }

Aprende Html y CSS Facil y rapido

Contenido de la guía

1. Preparando nuestro entorno de trabajo

1.1. Extensiones recomendadas

Prettier

Indent-rainbow

Image preview

Live Server

Palenight Theme

2. HTML nivel basico

2.1. Estructura básica de una página web

2.2. Encabezados

2.3. Párrafo

2.4. Listas

2.4.1. Lista ordenada

2.4.2. Lista desordenada

2.5. Enlaces

2.5.1. Enlazar documentos

2.5.2 Atributo de la etiqueta <a>

2.6. Imagenes

2.7. Rutas

2.8. Formularios

Atributos importantes de `<input>`

3. CSS Basico

3.1. Uso de estilos en línea

3.2. Estilos internos (internal)

3.3. Estilos externos (external)

3.4. Selectores básicos

3.5. Identificador único (id)

3.6. Color

3.7. Tipo grafía

3.8. Tamaño

3.9. Tamaño

3.10. Resaltar texto con <strong> y <span>

Unidades de medida en CSS

Flexbox

CSS Grid

Pseudo-clases y pseudo-elementos

Variables CSS (custom properties)

Diseño responsivo con media queries