Trabajando con HTML5 - 4to de Sec

 

 CURSO DE HTML5  PARA 4TO DE SECUNDARIA

II BIMESTRE

Estimado estudiante, en el siguiente enlace encontrarás:

1. Un Pdf del curso de HTML5 en donde tendrás que visualizarlo (si tienes la posibilidad de poder imprimirlo y pegarlo en tu cuaderno sería bueno pero sino tendrías que estar visualizandolo en la PC o en un dispositivo móvil, ya que nos servirá también para el II Bimestre) NO ES OBLIGATORIO IMPRIMIRLO.
2. Un Pdf en donde observarás videos de consulta del curso de HTML 5. En Youtube hay una gran cantidad de videos de apoyo para nuestro curso.
3. Un documento en word donde observarás lo que debe de contener TU PÁGINA WEB.

Enlace del contenido:

https://drive.google.com/drive/folders/1BrIeyQIwzRSGIKCu3Ag26B9CEHVA00a_?usp=sharing 

También puedes ir avanzando en tu hogar si tienes una PC o laptop.

Hipervínculos

FORMULARIOS INTERACTIVOS 

Explicación del Formulario:

1. Etiqueta <form>: Es el contenedor del formulario, donde se define el action (URL a la que se enviarán los datos) y el method (tipo de solicitud, en este caso POST).

2. Campo de Nombre:

   • Usa la etiqueta <label> para describir el campo.
   • El campo de texto se crea con <input type="text">, que permite al usuario escribir su nombre.

3. Campo de Correo Electrónico:

   • Se usa <input type="email"> para asegurarse de que el usuario ingrese un formato de correo válido.

4. Campo de Contraseña:

   • <input type="password"> oculta el texto ingresado, mostrando solo asteriscos o puntos.

5. Campo de Teléfono:

   • <input type="tel"> es adecuado para ingresar números de teléfono.

6. Campo de Género:

   • Usa <input type="radio"> para permitir que el usuario seleccione solo una opción de género.

7. Campo de Intereses:

   • <input type="checkbox"> permite que el usuario seleccione múltiples opciones.

8. Campo de Comentarios:

   • <textarea> es un campo de texto de varias líneas, ideal para comentarios largos.

9. Botón de Envío:

   • <input type="submit"> crea un botón para enviar el formulario.

RESULTADO

FORMULARIO 2

Explicación del Formulario:

1. Etiquetas <fieldset> y <legend>:

   • <fieldset>: Agrupa elementos relacionados en el formulario para mejorar la organización.
   • <legend>: Proporciona un título para cada grupo de campos.

2. Información Personal:

   • <input type="text">: Para ingresar el nombre completo.
   • <input type="number">: Para ingresar la edad, con valor preestablecido y limitado a 16 años.
   • <input type="email">: Para ingresar el correo electrónico, validado para un formato de correo.
   • <input type="tel">: Para ingresar el número de teléfono.

3. Selección de Taller:

   • <select>: Un menú desplegable para seleccionar uno de los talleres disponibles.
   • <input type="checkbox">: Casillas de verificación para seleccionar los días disponibles para asistir.

4. Comentarios Adicionales:

   • <textarea>: Un campo de texto más grande para permitir que los estudiantes escriban comentarios o preguntas adicionales.

5. Botón de Envío:

   • <input type="submit">: Un botón para enviar el formulario.

RESULTADO

TABLAS

Realizando un Horario

Explicación de la Tabla:

1. Primera Fila:

   • En la primera fila, se utilizan celdas de encabezado <th> para los días de la semana. La primera celda de esta fila es un encabezado que indica "Hora".

2. Primera Columna:

   • La primera columna de cada fila utiliza <th> para mostrar las horas. Esto es porque esta columna funciona como un encabezado para las horas, similar a cómo los días funcionan como encabezado en la primera fila.

3. Celdas de Datos:

   • Las celdas que representan las materias (<td>) están alineadas bajo los días de la semana y al lado de las horas correspondientes.

Descripción de la Tabla:

• Días de la Semana: Los días están en la primera fila, en la parte superior.
• Horas: Las horas están en la primera columna, a la izquierda.
• Materias: Cada celda en la intersección de un día y una hora muestra la materia que se impartirá.

REALIZANDO UN CATALOGO DE PRODUCTOS TECNOLÓGICOS

Explicación de la Tabla:

1. Primera Fila:
   • Contiene los encabezados de las columnas: "Producto", "Descripción" y "Precio".
2. Filas de Datos:
   • Cada una de las filas siguientes representa un producto tecnológico con sus respectivas características:
     • Producto: Nombre del artículo.
     • Descripción: Breve descripción del producto.
     • Precio: Costo del producto.

Descripción de la Tabla:

• La tabla está organizada en tres columnas:
  • Producto: Lista los nombres de los productos tecnológicos.
  • Descripción: Detalla brevemente las características de cada producto.
  • Precio: Muestra el costo de cada producto en dólares.

1. Nueva Columna para Imágenes:

   • Se ha añadido una columna adicional titulada "Imagen".
   • En cada fila de producto, se incluye una imagen correspondiente, utilizando la etiqueta <img>.

2. Atributos de la Etiqueta <img>:

   • src: Especifica la ruta de la imagen (por ejemplo, "teclado.jpg"). Esta debe ser la ubicación de la imagen en tu servidor o localmente.
   • alt: Proporciona un texto alternativo que describe la imagen (útil si la imagen no se carga).
   • width="100": Ajusta el ancho de la imagen a 100 píxeles para mantener un tamaño uniforme.

Descripción de la Tabla:

• Producto: Nombre del producto.
• Descripción: Breve descripción de las características del producto.
• Precio: Costo del producto.
• Imagen: Vista previa del producto.

RESULTADO