Guías bluuweb

Appearance

Return to top
On this page

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

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

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

html
<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>
html
<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:

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

html
<label for="curso">Curso: </label>

button

Es un botón para procesar nuestro formulario es por esto que cuenta con el atributo submit

html
<button type="submit">Enviar</button>

Formulario completo

html
<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 inputhttps://www.w3schools.com/tags/tag_input.asp

html
<form
  action="recibir.html"
  method="GET"
>
  <input
    type="email"
    required
  />
  <button type="submit">Enviar</button>
</form>
html
<input type="password" />
html
<textarea
  name="mensaje"
  rows="10"
  cols="30"
>
Ingrese aquí su mensaje
</textarea>
html
<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>
html
<input
  type="button"
  value="Enviar"
/>
html
<input type="color" />
html
<input type="date" /> <input type="datetime-local" />
html
<input type="file" />
html
<input type="month" />
html
<input type="range" />
html
<input type="time" />
html
<input type="week" />

En la siguiente sección conoceremos los estilos en CSS y hablaremos un poco más sobre los formularios.