HTML Intermedio

Conozcamos cosas más avanzadas de HTML

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 (opens new window) 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 (opens new window)

<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.