Parte 5_HTML5_CSS_REPASO +++carpeta_20_20_formularios_Y CLASES

-

 PARTE 5___

Parte 2_Lección 1_(repaso)

Quizás ya adivinaste esta parte, pero si no, vamos a decirla de una vez: ¡cualquier elemento de HTML puede ser un selector de CSS! Podéis modificar las <ul>, <table>, e incluso la etiqueta <body> completa, seleccionando ul, table, y body, respectivamente.


<!DOCTYPE html>

<html>

<head>

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

<title></title>

</head>

<body></body>

</html>

parte 2 lección 1 stylesheet.css

body{

background-color:black;

}


parte 2_lección 2_repaso:

En la pestaña CSS, selecciona únicamente el encabezado h3 anidado dentro de tres <div> y cámbiale su color a rojo.

<!DOCTYPE html>

<html>

<head>

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

<title>Result</title>

</head>

<body>

<h3>Soy una simple letra antigua</h3>

<div>

<h3>Y yo también</h3>

<div>

<h3>¿y yo?</h3>

<div>

<h3>¡Olvídense! ¡Estoy a punto de ser roja!</h3>

</div>

</div>

</div>

</body>

</html>

Lección2 parte segunda stylesheet.css


div div div h3{

color:red;

}


parte segunda_lección 3

Usa el selector universal para colocar un borde azul punteado de valor 1px dashed blue alrededor de cada elemento de la página. ¿Ves cómo cada elemento parece estar dentro de su propia caja en la página? Esto es parte del "modelo de caja" de HTML/CSS, que veremos en la siguiente lección.

El selector universal (*) no solo selecciona los div y los p, sino que aplica esa regla a absolutamente todos los elementos que existan dentro del documento HTML (incluyendo html, head, body, title, etc., aunque algunos no muestren bordes visibles por defecto).

En este programa específico, lo que hace es:

Efecto en el documento

  • Borde a todos los elementos: Dibuja un borde de 1 píxel, con línea punteada (dashed) y de color azul alrededor de cada caja o etiqueta HTML presente en la página.

  • Visualización de la estructura: Permite ver cómo se anidan las cajas. Verás un borde azul grande para el body, bordes alrededor de cada uno de los tres div, y bordes alrededor de cada uno de los párrafos (p) que están dentro de los div.


<!DOCTYPE html>

<html>

<head>

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

<title>Resultado</title>

</head>

<body>

<h3>Cajas dentro de cajas</h3>

<div>

<p>Párrafo uno</p>

</div>

<div>

<p>Párrafo dos</p>

</div>

<div>

<p>Párrafo tres</p>

</div>

</body>

</html>


parte segunda lección 3 stylesheet


*{

border: 1px dashed blue;

}


Lección 2 de la parte 2ª

Selectores múltiples

Como ya viste, es posible anidar elementos HTML dentro de otros, así:

<div>
    <div>
        <p>¡Me gustan las empanadas!</p>

¿Y si queréis enfocaros en las <p> que están dentro de dos <div>, y no en todas las <p>?

Podéis seleccionarlas en la pestaña CSS de esta forma:

div div p {
    /*¡Lo de CSS!*/
}



Carpeta 20_20 ejercicio 1_input_formularios


<!DOCTYPE html>

<html>


   <head>

      <title>Entrada de texto </title>

   </head>

   <body>

      

  <p style="font-size:30px;">Formularios</p>

  

  <form >

         Nombre: <input type = "text" name = "nombre_pila" >

         <br>

         Apellidos: <input type = "text" name = "apellidos" >

<br>

Clave: <input type = "password" name = "clave_usuario" >

<br>

Detalles:<br>

<textarea rows ="6" cols="40" name="detalles_usuario">Ingrese los detalles aquí</textarea>

<br>

 

<input type="checkbox" name="patatas" > Me gustan las patatas

<br>

<input type="checkbox" name="tomates" > Me gustan los tomates

<br>

<input type="radio" name="sabores" value="salado"> Me gusta el salado

<input type="radio" name="sabores" value="dulce"> Me gusta el dulce

<input type="radio" name="sabores" value="amargo"> Me gusta el amargo

<br>

 

<select name="tratamiento">

<option value="sra" >Señora</option>

<option value="sr" >Señor</option>

<option value="otr" selected >Otro</option>

</select>

 

 

      </form>

   </body>

</html>

EXPLIcación:

Explicación parte por parte:

  1. <!DOCTYPE html>

    • Es la declaración del tipo de documento. Le indica al navegador que estamos utilizando HTML5.

  2. <head> y <title>

    • Configuran los metadatos de la página. El <title> define el texto que aparece en la pestaña del navegador ("Entrada de texto").

  3. <p style="font-size:30px;">Formularios</p>

    • Un párrafo con estilo en línea (style="...") para hacer el texto más grande.

  4.  <form>El contenedor principal de cualquier formulario. En este caso no tiene atributos como action o method porque es puramente visual/didáctico, pero en una aplicación real serviría para enviar los datos a un servidor.

  5. Los campos de texto y contraseña (<input>)

    • type="text": Crea cajas de texto de una sola línea para el nombre y los apellidos.

    • type="password": Oculta los caracteres con asteriscos o puntos para proteger la clave.

    • name="...": Identifica cada campo para que, al enviar el formulario, el servidor sepa qué dato es cuál.

  6. El área de texto (<textarea>)

    • Permite escribir textos largos (multilínea). Los atributos rows y cols definen su tamaño inicial en filas y columnas.

  7. Casillas de verificación (checkbox) y botones de opción (radio)         <input type="radio" name="sabores" value="amargo">  <input type="checkbox" name="patatas" >

    • type="checkbox": Permite seleccionar múltiples opciones independientes ("Me gustan las patatas", "Me gustan los tomates").

    • type="radio": Permiten elegir una sola opción de un grupo. Nota cómo todos comparten el mismo name="sabores", lo que hace que el navegador entienda que forman parte del mismo grupo y desmarque uno si marcas otro.


  1. Menú desplegable (<select> y <option>)          

    • Crea una lista desplegable. El atributo selected en la opción "Otro" indica que esa será la opción seleccionada por defecto al cargar la página. <select name="tratamiento">

<option value="sra" >Señora</option>

  1. ¿Para qué sirve el atributo value? el atributo value sirve exactamente para:

    Cuando un usuario rellena un formulario y pulsa el botón de enviar, el navegador recopila los datos y se los envía a un servidor (un programa en PHP, Node.js, Python, etc.) para que los procese. El servidor no recibe el texto que hay escrito en la pantalla (como "Me gustan las patatas"), sino que recibe el par nombre=valor que tú hayas definido en el código HTML.

    ¿Por qué los <input type="radio"> y los <select> obligatoriamente necesitan value?

    • En los Radio Buttons (<input type="radio">): Todos comparten el mismo name (en tu caso, name="sabores"), porque el usuario solo puede marcar uno de ellos. El servidor necesita saber cuál de las opciones se ha elegido, y lo sabe gracias al value (salado, dulce o amargo). Si no pusieras value, el servidor solo sabría que marcaron algo, pero no qué opción exacta fue.

    • En el selector (<select>): El desplegable tiene un nombre (name="tratamiento"), pero dentro tiene varias opciones. Cada opción tiene un texto visible ("Señora", "Señor", "Otro") y un value (sra, sr, otr). Cuando el usuario selecciona una opción, el servidor recibe el value correspondiente.


Ejercicio 14_de noviembre_ carpeta 20_20 con listas de distintos tipo_<style> interno para tablas en el <head>


<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title>Página Nueva</title>

    <!-- CSS interno  (Cascade Style Sheet)-->

    <style>

        table,th,td {

            border: 1px solid black; /* Borde de 1 pixel solido negro, otro podria ser, 2px dashed red*/

            text-align:center;

        }


        table {

            border-collapse: separate;


        }


    </style>

</head>



<body>

    <table>

        <tr>

            <th>Cosa</th>       <th>Precio</th>

        </tr>


        <tr>

            <td>Patata</td>     <td>1€</td>

        </tr>

        <tr>

            <td>Tomate</td>     <td>0.5€</td>

        </tr>

    </table>


    <br>


    <table>

        <tr>

            <th>Hora</th>

            <th>Temperatura</th>

        </tr>


        <tr>

            <td>12:00</td>

            <td>22c</td>

        </tr>

        <tr>

            <td>14:00</td>

            <td>17c</td>

        </tr>


    </table>



    <p>Esto es un p, pero puedo hacerlo mas grande que un h1 </p>


    <h1>Este es un h1 (encabezado) "h1 - Header 1"</h1>


    <a href="https://es.wikipedia.org/wiki/James_Stewart" target="_blank">Acceso a Página de James Stewart</a>

    <!-- Ordered List - Ordenada con números-->

    <ol>


        <li>Elemento 1</li>

        <li>Elemento 2</li>

        <li>Elemento 3</li>

        <li>Elemento 4</li>

    </ol>


    <!-- Unordered List Sin ordenar, con "bullets" delante-->

    <ul>


        <li>Elemento 1</li>

        <li>Elemento 2</li>

        <li>Elemento 3</li>

        <li>Elemento 4</li>

    </ul>



</body>

</html>


RESULTADO:

  • (No subir,no hay espacio por la foto)

  • EXPLICACIÓN_mar_a_di

  • <meta charset="UTF-8">: Configura la codificación de caracteres para que los tildes y símbolos especiales (como la eñe o el símbolo del euro €) se vean correctamente.

  • <style>: Contiene reglas CSS para dar formato a las tablas:

    • table, th, td: Aplica un borde sólido de 1px de color negro a todas las tablas, encabezados y celdas, y centra el texto en su interior (text-align: center;).

    • border-collapse: separate;: Indica que los bordes de la tabla deben mantenerse separados (que es el comportamiento por defecto, aunque a veces se usa collapse para unirlos).

    Enlaces y Listas (<a>, <ol> y <ul>)

    • Enlace (<a>): Un hipervínculo que apunta a la página de Wikipedia de James Stewart. El atributo target="_blank" le indica al navegador que debe abrir el enlace en una pestaña o ventana nueva.

    Regla mnemotécnica para recordarlo

    Imagina que la palabra blank es una hoja en blanco o un lienzo nuevo:

    • target = Donde Vas (el destino).

    • _blank = Blanco / Buen sitio nuevo (una pestaña limpia y blanca donde empieza la navegación de cero).

    O simplemente asócialo así:

    target (¿A dónde voy?) ➔ _blank (A una pestaña nueva y en blanco).

    • Lista ordenada (<ol>): Una lista enumerada del 1 al 4 con la estructura clásica de elementos (<li>).

    • Lista desordenada (<ul>): Una lista con viñetas (puntos) también de 4 elementos.

    Tu regla mnemotécnica

    • <ul> = Unordered List (Lista desordenada / de viñetas).

    • <ol> = Ordered List (Lista ordenada / numerada).


    • EJERCICIO 7__20_20_con clases .con-fondo  <p  class="con-fondo"   e identificador   #      id

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <!-- CSS interno  (Cascade Style Sheet)-->

        <style>

            h1 {color:red;

                background-color: #00ff00;

                font-size: 80px;

                }

            #grandes {color:blue; font-size:60px}

            #medianos {color:green; font-size:40px;}

            .con-fondo {background-color: lightblue;}


        </style>

    </head>


    <body>


        <h1>Este es un h1 (encabezado) "h1 - Header 1"</h1>

        <p  class="con-fondo"       style="font-size:40px;">Esto es un texto</p> <!-- CSS "en linea" -->

        <h1>Este es otro h1"</h1>


        <p class="con-fondo" id="grandes">Este texto es del color que tenga el selector grandes (letra grande y azul)</p>

        <p id="medianos">Este texto es del color que tenga el selector medianos (letra mediana y verde)</p>


    </body>

    </html>


    EPLICACIÓN _MA_r_DI

    En HTML y CSS, id es la abreviatura de identificador (identifier en inglés).

    ¿Para qué sirve?

    • Identificador único: Su función principal es asignarle un nombre único a un elemento específico dentro de toda la página web. Ningún otro elemento debería tener el mismo id.

    • Conexión con CSS: Como vemos en tu código (#grandes y #medianos), el símbolo numeral o almohadilla (#) en CSS se utiliza para llamar o seleccionar a ese identificador específico y aplicarle estilos (como color o tamaño de fuente).

    Diferencia clave con las clases (class)

    • id (Identificador): Es único. Solo se puede usar una vez por página en un elemento específico (como #grandes o #medianos).

    • class (Clase): Es reutilizable. Se puede aplicar a varios elementos al mismo tiempo (como .con-fondo, que lo estás usando en dos párrafos diferentes).


    Ejercicio con CSS subrayado con clases 20_20:

    <!DOCTYPE html>

    <html lang="es">

    <head>

    <meta charset= "UTF-8">

    <title> Ejemplos CSS</title>

    <style>

    .tachado {

    text-decoration:line-through; /* esto es efecto tachado*/

    }

    .subrayado {

    text-decoration:underline; /* esto es efecto subrayado*/

    }

    .rayaEncima {

    text-decoration:overline; /* esto es efecto sobre_subrayado*/

    }

    .dobleraya {

    text-decoration:underline overline ; /* esto es efecto subrayado encima y debajo*/

    }

    </style>

    </head>

    <body>


    <h1>Este es el encabezado con h1</h1>

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

    <p>

    <span class="subrayado">Londres</span>, la capital de Inglaterra y del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la época romana. En su centro se alzan el imponente <span class="tachado" >Palacio del Parlamento</span>, la torre del icónico reloj "Big Ben" y la <i class="dobleraya">Abadía de Westminster</i>, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis, la rueda de observación <b class="rayaEncima ">London Eye</b> ofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad </p>


    </body>

    </html>


    Ejercicio font-weight y clases


    <!DOCTYPE html>


    <html lang="es">

    <head>

    <meta charset= "UTF-8">

    <title> Ejemplos CSS</title>

    <style>

    .negrita {

    font-weight:bold;  /* Puede ser también un valor numérico entre 100 y 900*/ 

       /* Los valores en código son: normal, bold, bolder, lighter*/

    }

    .masnegrita {

    font-weight:bolder;

    }

    .cursiva {

    font-style: italic;  /*  hay otro que es oblique */

    }

    </style>

    </head>

    <body>


    <h1>Este es el encabezado con h1</h1>

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

    <p>

    <span class="negrita">Londres, la capital de Inglaterra</span> y del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la

    época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"

    y la <span class="masnegrita">Abadía de Westminster</span>, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis, 

    la rueda de observación <span class="cursiva">London Eye</span> ofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad

    </p>


    </body>

    </html>


    Último ejercicio de este apartado: CSS ALIGN STYLE

    <!DOCTYPE html>


    <html lang="es">

    <head>

    <meta charset= "UTF-8">

    <title> Ejemplos CSS</title>

    <style>

    .justificado {

    text-align:justify;

    }

    .centrado {

    text-align:center;

    }

    .izquierda {

    text-align:left;

    }

    .derecha {

    text-align:right;

    }

    </style>

    </head>

    <body>


    <h1>Este es el encabezado con h1</h1>

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

    <p class="justificado">

    Justificado<br>

    Londres, la capital de Inglaterra y del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la

    época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"

    y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis, 

    la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad

    </p>

    <hr>

    <p class="centrado" >

    Centrado<br>

    Londres, <span style="font-family:'Times New Roman', Times, serif;">la capital de Inglaterra</span> y del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la

    época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"

    y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis, 

    la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad

    </p>

    <hr>

    <p class="izquierda">

    Izquierda<br>

    Londres, <span style="font-family:Arial, Helvetica, sans-serif;">la capital de Inglaterra</span>  del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la

    época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"

    y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis, 

    la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad

    </p>

    <hr>

    <p class="derecha">

    Derecha<br>

    Londres, la capital de Inglaterray del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la

    época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"

    y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis, 

    la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad

    </p>

    <hr>

    </body>

    </html>

    Entradas populares de este blog

    BLOQUE 5_Páginas de IA generativa de video (gratis y sin pagar) para 4º ESO IA artificial_Inteligencia artificial

    -
      Aquí te dejo   algunas plataformas que SÍ generan videos a partir de un prompt de texto   (como: "Haz un video de un perro aprendiendo a leer") y que tienen   versiones gratuitas : 🧠  Páginas de IA generativa de video (gratis y sin pagar): 1.  Pika Labs  ( https://pika.art ) ⚡ IA generativa de video real, solo necesitas escribir un prompt. 🎨 Puedes pedir cosas como:  “Un gato volando en un globo en un cielo rosado” . 👦 Ideal para creatividad con niños. ✅ Gratis (necesitas crear cuenta, pero no tarjeta). 📽️ Algunos videos duran solo unos segundos. 2.  Runway ML (Gen-2)  ( https://runwayml.com ) 🔥 Muy popular para generar videos a partir de texto o imágenes. ✏️ Puedes escribir un prompt como  “Una mariposa mecánica volando sobre flores” . ✅ Plan gratuito (hasta unos minutos de video por mes). 🎓 Ideal para explorar en clases. 3.  Kaiber  ( https://www.kaiber.ai ) 🎥 Transforma texto o imágenes en animaciones y clips. ...
    Leer más

    GrÁfico de lineas, google colab o jupyter ,GRÁFICO DE DISPERSIÓN Y DETECCIÓN DE PROFUNDIDAD, NOTEBOOK, PÍDELE A TU IA FAVORITA,

    -
    Imagen
    # Importar bibliotecas necesarias import numpy as np import matplotlib.pyplot as plt # Datos de ejemplo x = np.linspace(0, 10, 100) y = np.sin(x) # Crear gráfico de líneas plt.figure(figsize=(10, 6)) plt.plot(x, y, label='Seno', color='blue') plt.title('Gráfico de Líneas del Seno') plt.xlabel('X') plt.ylabel('Seno(X)') plt.legend() plt.grid() plt.show() GRÁFICO DE DISPERSIÓN # Importar bibliotecas necesarias import numpy as np import matplotlib.pyplot as plt # Datos de ejemplo x = np.random.rand( 100 ) y = np.random.rand( 100 ) # Crear gráfico de dispersión plt.figure(figsize=( 10 , 6 )) plt.scatter(x, y, color= 'red' ) plt.title( 'Gráfico de Dispersión' ) plt.xlabel( 'Eje X' ) plt.ylabel( 'Eje Y' ) plt.grid() plt.show() Cómo Usar en Google Colab Abre Google Colab. Crea un nuevo notebook. Copia y pega cada uno de estos bloques de código en celdas diferentes y ejecútalos. (Le llama celda a donde pegas todo el pr...
    Leer más