Creamos un nuevo documento para ir probando cada una de las etiquetas nuevas que vamos a aprender.
Usar VISUAL STUDIO CODE.
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.
En general, sirven para representar información tabulada, en filas y columnas.
Para componerlas se hace uso de otras etiquetas, las cuales no tienen sentido sino están situadas dentro de una etiqueta de <table>. Estas etiquetas son las siguientes: <table> <th> <tr> <td>
Se verá así: 
ACLARACIÓN SOBRE los FORMULARIOS:
En este nivel vemos sólo la estética del formulario. 
Combinación de Columnas:
El atributo colspan permite realizar la combinación de varias columnas en una sola. Para especificar el valor del atributo, se debe indicar el número de columnas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles.
Combinación de filas:
También se puede realizar la combinación de filas, mediante el atributo rowspan. Observen en qué fila agregué el atributo rowspan. Agregué más alumnos para que tenga más sentido.
Formularios:
Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación.
Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (más adelante veremos cómo enviar los datos de un formulario).
El HTML de un formulario web está compuesto por uno o más controles de formulario.
Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento <input> aunque hay algunos otros elementos que también hay que conocer.
Primero, se recomienda diseñar el formulario. Tiene que ser simple y conciso: solicita sólo los datos que necesitas.
Etiquetas para crear un formulario:
Etiqueta <form>
Permite definir un formulario de datos, utilizados para transferir datos al servidor. Un formulario puede contener a su vez, elementos de entrada como pueden ser campos de texto, casillas de verificación, botones de radio, botones de envió, listas de selección, áreas de texto, etc.
Etiqueta <input>
Es una de las etiquetas más importante para la solicitud de datos mediante formularios, ya que es la que permite especificar los tipos de datos que se quieren solicitar para su posterior envió.
La etiqueta permite mediante uno de sus atributos especificar el tipo de dato a solicitar, de forma que se pueda componer un formulario que solicite los datos acordes a una estructura idónea para la recepción de los mismos por parte del servidor.
Distintos tipos de datos:
- text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.
- checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se pueden seleccionar varios a la vez.
- file: Control que permite al usuario seleccionar un archivo.
- hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.
- password: Control de línea simple cuyo valor permanece oculto.
- radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Los botones radio que tengan el mismo valor para su atributo name están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.
- submit: Botón que envía el formulario. Etiqueta Representa una etiqueta para un elemento en una interfaz de usuario.
Etiqueta <label>
Representa una etiqueta para un elemento en una interfaz de usuario. Etiqueta <select>
Representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos .
Etiqueta <textarea>
Representa un control para la edición multilínea de texto sin formato.
El funcionamiento de un formulario, para guardar los datos que se ingresan se realiza con programación usando PHP.
EJEMPLO INICIAL:
Observen las etiquetas label e input, y los atributos type y placeholder.
Se ve así 👇
Agregamos el control Sexo con un Radio para contestar.
Usé DIV para separarlo y que aparezca en el renglón de abajo.
Agregamos el control Hobbies con un Checkbox para contestar.
Observen que primero va el INPUT y luego el label.
Prueben invertirlos para entender por qué alteramos el orden.
Se ve así 👇
ACLARACIÓN SOBRE EL ATRIBUTO ID:
El valor de este atributo permite relacionar un control con una etiqueta. Por ejemplo, si un control tiene por id el valor id=”email”, esto significa que ese control está relacionado con la etiqueta (label) cuyo atributo for es for=”email”.
Área para escribir texto (textarea) y luego los botones para enviar y borrar.
Área para escribir texto (textarea) y luego los botones para enviar y borrar.
Multimedia:
¿Qué es HTML 5?
HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML.
Esta nueva versión y en conjunto con CSS3,(que veremos más adelante) define los nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y actualizándolo así a nuevas necesidades.
Etiqueta audio: permite insertar un archivo mp3 para su reproducción desde la página.
atributos:
- src: El origen de donde se encuentra el audio que se va a insertar
- controls: Si está presente este atributo, el navegador ofrecerá controles para permitir que el usuario controle la reproducción de video, incluyendo volumen, búsqueda y pausar/reanudar reproducción.
Atributos:
- poster: una imagen para mostrar el resultado hasta que el usuario reproduzca o busque. Si no se especifica, se muestra el primer cuadro.
- src: ubicación del video
- controls: se usa para que el navegador muestre los controles para pausa, play, ...
Etiquetas semánticas: ¿Qué son?
Semántica: Perteneciente o relativo al significado de las palabras.
En HTML son aquellas etiquetas que dan un significado a las partes del documento.
Por decirlo de otra forma, estamos ante etiquetas que indican qué es el contenido que contienen, en lugar de como se debe formatear al mostrar el documento HTML en un cliente web.
Las etiquetas HTML semánticas no solo son más fáciles de leer y comprender por los buscadores y desarrolladores web, sino que son más accesibles para los lectores con deficiencias visuales y mejoran tu posicionamiento en los buscadores.
- <header>: la etiqueta de encabezamiento define el contenido introductorio de una página o sección.
- <nav>: la etiqueta de navegación se utiliza para los enlaces de navegación. Puede anidarse dentro de la etiqueta <header>, pero las etiquetas <nav> de navegación secundaria también suelen usarse en otras secciones de la página.
- <main>: esta etiqueta contiene el contenido principal (también llamado cuerpo) de una página. Solo debería haber una etiqueta <main> por página.
- <section>: utilizar <section> es una forma de agrupar contenidos que tratan sobre temas similares. Las etiquetas de sección son diferentes a las de artículo, no son necesariamente autónomas, sino que forman parte de algo más.
- <aside>: un elemento "aside" define el contenido de menor importancia. Suele emplearse para las barras laterales, que incluyen información complementaria pero no esencial (por ejemplo, para la visualización de la página en celular, puede haber contenido no relevante que puede no mostrarse).
- <footer>: usa <footer> en la parte inferior de una página. La etiqueta suele incluir información de contacto, derechos de autor y navegación por la web.
