HTML Intermedio
Conozcamos cosas más avanzadas de HTML
⭐ Videos Premium ⭐
Esta sección es parte del curso en Udemy. Si quieres acceder a ella, puedes comprar el curso en Udemy: Bootstrap 5 by bluuweb.
O bien también puedes visualizar los videos siendo miembro en Youtube. Accede a miembros del canal aquí y accede a los videos de esta sección.
Tablas
<table border="1">
<tr>
<td>Gato</td>
<td>3 años</td>
<td>Negro</td>
</tr>
<tr>
<td>Perro</td>
<td>1 mes</td>
<td>Azul</td>
</tr>
</table>
<table></table>
Comienzo y final de una tabla.<tr></tr>
Comienzo y final de una fila.<td></td>
Contenido de una celda.
<table border='1'>
<tr>
<th>Mascota</th>
<th>Edad</th>
<th>Color</th>
</tr>
<tr>
<td>Gato</td>
<td>3 años</td>
<td>Negro</td>
</tr>
<tr>
<td>Perro</td>
<td>1 mes</td>
<td>Azul</td>
</tr>
</table>
<th>Mascota</th>
Define la fila de encabezado
<table border='1'>
<!-- Título de la tabla -->
<caption>Titulo de la tabla</caption>
<tr>
<th>Mascota</th>
<th>Edad</th>
<th>Color</th>
</tr>
...
Estructurar en partes tablas grandes
<table border='1'>
<caption>Titulo de la tabla</caption>
<!-- Encabezado -->
<thead>
<tr>
<th>Mascota</th>
<th>Edad</th>
<th>Color</th>
</tr>
</thead>
<!-- Pie de tabla -->
<tfoot>
<tr>
<th>Mascota</th>
<th>Edad</th>
<th>Color</th>
</tr>
</tfoot>
<!-- contenido -->
<tbody>
<tr>
<td>Gato</td>
<td>3 años</td>
<td>Negro</td>
</tr>
<tr>
<td>Perro</td>
<td>1 mes</td>
<td>Azul</td>
</tr>
</tbody>
</table>
Combinar
<table border='1'>
<thead>
<tr>
<th>Mascota</th>
<th>Edad</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gato</td>
<td>3 años</td>
<td>Negro</td>
</tr>
<tr>
<td>Perro</td>
<td>1 mes</td>
<td>Azul</td>
</tr>
<tr>
<td>Rana</td>
<td colspan="2">Desconocido</td>
</tr>
</tbody>
</table>
<table border='1'>
<thead>
<tr>
<th>Mascota</th>
<th>Edad</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gato</td>
<td>3 años</td>
<td>Negro</td>
</tr>
<tr>
<td>Perro</td>
<td>1 mes</td>
<td rowspan="2">Azul</td>
</tr>
<tr>
<td>Rana</td>
<td>2 semanas</td>
</tr>
</tbody>
</table>
Formularios
https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form 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 ingresar datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento.
form
Define el contenedor para el formulario. Admite algunos atributos específicos para configurar la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:
<form
action=""
method=""
></form>
input
Aquí es donde nuestro usuario puede ingresar datos. Contamos con varios atributos:
type
dato que recibirá el input.placeholder
texto de ayuda para el usuario.id
identificador único.name
nombre del input, nos sire para asociar información al dato ingresado por ejemplo:
curso = "texto proporcionado por el usuario"
<input
id="curso"
type="text"
placeholder="Ingrese un curso"
name="curso"
/>
label
Texto adicional que describe al input
es por esto que cuenta con el atributo for
donde ingresamos el id del input
.
<label for="curso">Curso: </label>
button
Es un botón para procesar nuestro formulario es por esto que cuenta con el atributo submit
<button type="submit">Enviar</button>
Formulario completo
<form
action="recibir.html"
method="GET"
>
<label for="curso">Curso: </label>
<input
id="curso"
type="text"
placeholder="Ingrese un curso"
name="curso"
/>
<button type="submit">Enviar</button>
</form>
Input
Existen diferentes tipos de input
https://www.w3schools.com/tags/tag_input.asp
<form
action="recibir.html"
method="GET"
>
<input
type="email"
required
/>
<button type="submit">Enviar</button>
</form>
<input type="password" />
<textarea
name="mensaje"
rows="10"
cols="30"
>
Ingrese aquí su mensaje
</textarea>
<form>
<input
type="radio"
id="gato"
name="gender"
value="gato"
/>
<label for="gato">Gato</label>
<input
type="radio"
id="perro"
name="gender"
value="perro"
/>
<label for="perro">Perro</label>
<input
type="radio"
id="otro"
name="gender"
value="otro"
/>
<label for="otros">Otro</label>
</form>
<input
type="button"
value="Enviar"
/>
<input type="color" />
<input type="date" /> <input type="datetime-local" />
<input type="file" />
<input type="month" />
<input type="range" />
<input type="time" />
<input type="week" />
En la siguiente sección conoceremos los estilos en CSS y hablaremos un poco más sobre los formularios.