Clase 2

HTML: listas, tablas y

formularios
¿Ponemos a grabar
la clase?
Repaso
La clase anterior aprendimos…

HTML: Es un "lenguaje" de marcado de etiquetas,

que permite crear documentos para web.

Doctype: cuando escribes tu documento HTML, lo primero

que debes hacer es escribir el DOCTYPE, el cual declara el
tipo de documento. Es decir, sirve para indicar que tu
documento está escrito siguiendo la estructura determinada
por un DTD concreto. Un DTD es la definición del tipo de
documento.
Listas
 Listas

HTML permite agrupar elementos que tienen más

significado de forma conjunta.

El menú de navegación de un sitio web, por ejemplo,

está formado por un grupo de palabras.

Aunque cada palabra por separado tiene sentido, de

forma conjunta constituyen el menú de navegación de
la página, por lo que su significado conjunto es mayor
que por separado. Esto se denomina listas.
 Tipos de listas

Listas no Lista Listas de

ordenadas ordenadas definición

Ejemplos: paso a paso de un procedimiento (como una receta de cocina), características de una
persona, galería de imágenes, el menú de una página web, entre otros.
 Viñetas o números

● Las listas numéricas establecen un orden en la lectura de sus ítems.

● Las listas de viñetas no representan ningún orden o importancia entre sus
ítems. Son elementos compuestos

○ <ol>: define una lista ordenada de artículos (numéricas).

○ <ul>: define una lista de artículos sin orden (viñetas).
○ <li>: define un artículo de una lista.
 Ejemplo
Ambas listas se deben insertar mediante la etiqueta <li></li>
(list-item). Ejemplo de servicios de una empresa (lista de
viñetas/sin orden):

<ul>
<li>Home</li>
● Home
<li>Tienda</li> ● Tienda
<li>Servicios</li>
<li>Contacto</li> ● Servicios
</ul> ● Contacto
Tablas
 Listas

Son un conjunto de celdas organizadas, dentro del

cual es posible alojar distintos contenidos.
HTML dispone de una gran variedad de etiquetas y
atributos para crear tablas.

Sirven para representar información tabulada, en

filas y columnas.

En HTML4 las tablas se usaban para maquetar.

Cuando CSS creció y se hizo más fuerte, nacieron los
detractores de las tablas.
 Ejemplo

<table>
La etiqueta <table></table> acepta
<tr><!-- inicio de fila-->
3 atributos de “diseño”:
<td>Fila 1 - Columna 1</td>
● Border: bordes de la tabla.
<td>Fila 1 - Columna 2</td>
● Cellpadding: especifica el
<td>Fila 1 - Columna 3</td>
espacio, en píxeles, entre la
</tr><!-- cierre de fila -->
pared de la celda y su
<tr><!-- inicio de otra fila-->
contenido.
<td>Fila 2 - Columna 1</td>
● Cellspacing: indica la distancia
<td>Fila 2 - Columna 2</td>
entre las celdas y el margen
<td>Fila 2 - Columna 3</td>
exterior de la tabla.
</tr><!-- cierre de la segunda fila -->
</table>
¿Vamos a la
práctica?
¡A practicar!
1. Crea dos listas usando las etiquetas de
HTML: una con viñetas que contenga
cinco nombres, y otra ordenada con 5
pasos para preparar un mate. Cuentas
con 15 minutos para completar la
actividad.
Formularios
Formularios

Son etiquetas donde el usuario

ingresará o seleccionará valores, que
serán enviados a un archivo encargado
de procesar la información.
 Etiqueta <FORM>

Para insertar un formulario se usa la etiqueta <form>, que dentro lleva todos los
controles que vayan al mismo destino.

Un formulario requiere 3 atributos para funcionar:

● Action: documento que se encarga de recibir los datos y procesarlos.

● Method: la forma en que será enviada la información. Existen dos métodos de
envío, que son GET y POST.
● Enctype: cómo se codificarán los contenidos.
 Ingreso de texto

Existen tres controles generales para el ingreso de texto:

● Cajas de texto de una sola línea (no acepta el uso de la tecla Enter).
● Cajas para el ingreso de contraseñas (el contenido no será visible).
● Cajas para contenido multilínea. Puede ser una o muchas líneas de
texto.

- Atributo “name”
- Control de formulario: <input>: Text, Email, Password.
- Control de formulario: <textarea></textarea>
 Botones

Los botones disparan las acciones del formulario.

Hay 3 tipos:

● El que envía los datos al archivo indicado como Action.

● El que vacía todo lo ingresado y resetea los campos.
● El que “no hace nada”, pensado para usarse con Javascript.

Todos los botones son etiquetas <input>, con distintos tipos de “Type”.

El botón debe de estar dentro del <form> que afectará.

 Atributo “value”

Representa la etiqueta del botón, la cual es normalmente mostrada por

los navegadores dentro de éste.

● Input de tipo “submit”: envía el formulario.

● Input de tipo “reset”: resetea el formulario.
● Input de tipo “button”: no tiene acciones por defecto.

<form>
<input type="submit" value="Enviar formulario"/>
<input type="reset" value="Limpiar formulario"/>
<input type="button" value="Sin acciones"/>
</form>
 Controles de selección

En estos casos, el usuario no puede ingresar libremente un texto, sino

que el programador le da una lista predefinida. El dato que llega al
elegir una opción se define desde el atributo “value”. Existen 3 grupos
de controles de selección:

● Botones de radio: sólo se puede elegir una opción.

● Casillas de chequeo: de toda la lista de opciones, el usuario puede
optar por una, todas o ninguna opción.
● Menú desplegable: sólo es posible seleccionar una opción.
 Atributo “value”
En este caso es el valor que se enviará al enviarse el formulario.

<form>
<div>Argentina</div>
<input type="radio" name="pais" value="argentina" />
Botones de radio: <div>Uruguayr</div>
<input type="radio" name="pais" value="uruguay" />
<div>Chile</div>
<input type="radio" name="pais" value="chile" />
</form>

<form>
<div>Acepta términos y condiciones</div>
Casillas de Chequeo: <input type="checkbox" name="acepta" value="1" />
</form>
 Etiqueta <LABEL>

● Define formalmente a cada elemento de un formulario. Esta

etiqueta es de mucha ayuda para generar un formulario
accesible.
● Su principal atributo es “for”, que va a referenciar a “label” con
su elemento del formulario. El valor del atributo “for” debe ser
igual al valor del atributo “id” o “name” del elemento.

<form>
<label for="nombre_apellido">Nombre:</label>
<input type="text" name="nombre_apellido" />
</form>
 Menú desplegable

Es el llamado combo-box, selector o menú.

De toda la lista, se puede elegir una opción (aunque tiene un atributo
que permite cambiarlo). Lo ideal es que sean al menos dos
elementos distintos para observar el select:

<form>
<select name="talles">
<option value="L">Large</option>
<option value="M">Medium</option>
<option value="S">Small</option>
</select>
</form>
 Conjunto de campo

Las etiquetas <fieldset> y <legend> se utilizan en conjunto. La

primera, tiene como objetivo crear grupos de elementos del
formulario que posean un mismo propósito; mientras que la segunda,
define formalmente el propósito del elemento fieldset. Se estructuran
de la siguiente manera:

<form>
<fieldset>
<legend>Talle de remera</legend>
<!-- Aquí irán los elementos de formulario -->
</fieldset>
</form>
Enlaces
 Enlaces

Los enlaces, también conocidos como links o anchors, se utilizan para

relacionar partes del mismo documento.

Por defecto, se visualizan azules y subrayados.

Para crear uno, es necesario utilizar la etiqueta de ancla <a> con el

atributo “href”, que establecerá el destino al que apunta. Por
ejemplo:

<a href="productos.html">Productos</a>
 Enlaces relativos

Los enlaces relativos son aquellos que apuntan a páginas ubicadas

dentro del mismo proyecto.

Si la página referenciada se encuentra en el mismo directorio,

alcanza con mencionar el nombre de la misma para generar el
enlace.

<a href="contacto.html">Contacto</a>
 Enlaces relativos

En caso de que el archivo se encuentre en un directorio específico, el

mismo deberá ser mencionado.

<a href="imagenes/mapa.jpg">ver mapa</a>

 Enlaces absolutos

Los enlaces absolutos son aquellos cuyo destino apunta a un

documento que está fuera del sitio, y debe ser especificado
utilizando la URL completa:

<a href="http://www. mediachicas.com/frontend">Desarrollo Web</a>

 Enlaces internos

Los enlaces internos permiten referenciar secciones de tu página,

para lo cual se utiliza el id:

<a href="#pie">Ir al pie de página</a>

...
<footer id="pie"></footer>
¿Vamos a la
práctica?
¡A practicar!
1. Crea un formulario de contacto como indica la imagen a
continuación, usando los códigos vistos anteriormente.
¿Preguntas?
Desafío 2
Para la prox. semana cada equipo deberá:

● Practicar las etiquetas HTML vistas en clase

● En el Padlet compartido por docente y/o
tutora, las estudiantes deberán anotarse con
nombre y apellido en un equipo de trabajo
● Deberán seleccionar un tema para la página
a desarrollar y sumar en el padlet el título
del mismo
● Ir armando un sketch grupal para las
páginas del proyecto (cada sitio deberá
tener un index + 4 páginas)
¡MUCHAS GRACIAS!