HTML Flashcards
(17 cards)
Listas en HTML
Las listas en HTML son una forma útil de organizar y presentar contenido en una página web. Hay dos tipos principales de listas en HTML:
Listas Ordenadas (<ol>): Estas listas tienen un orden específico y cada elemento de la lista está numerado.
Listas Desordenadas (<ul>): Estas listas no tienen un orden específico y los elementos suelen estar marcados con viñetas.
li
define un articulo de una lista (Puntito)
Tablas
Son un conjunto de celdas organizadas, dentro de las cuales 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.
Las tablas en HTML se crean utilizando varias etiquetas específicas:
<table>: Define la tabla.
<tr>: Define una fila de la tabla (table row).
<th>: Define una celda de encabezado en una tabla (table header). Estas suelen estar en la primera fila y son, por defecto, negritas y centradas.
<td>: Define una celda de datos en una tabla (table data). Estas contienen los datos de la tabla.
</td></th></tr></table>
Etiqueta form
La etiqueta <form> en HTML se utiliza para crear un formulario interactivo que los usuarios pueden completar y enviar.
Atributos de un formulario
action:
Especifica la URL a la que se enviarán los datos del formulario cuando se envíe.
Ejemplo: action=”https://example.com/submit”
method:
Especifica el método HTTP que se utilizará para enviar los datos del formulario.
Valores comunes: get o post.
Ejemplo: method=”post”
enctype:
Especifica cómo se deben codificar los datos del formulario al enviarse al servidor (solo se usa cuando method es post).
Valores comunes: application/x-www-form-urlencoded (por defecto), multipart/form-data (para subir archivos), text/plain.
Ejemplo: enctype=”multipart/form-data”
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.
Botones en formularios html
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></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.
Controles de seleccion
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.
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>Nombre:</label>
<input></input>
</form>
Menu 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>
<option>Large</option>
<option>Medium</option>
<option>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
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>Productos</a></a>
Enlaces relativos
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=mapa.jpg”>ver mapa</a>
En caso de que el archivo se encuentre en un directorio específico, el mismo deberá ser mencionado.
<a>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=”https://www.hola.com/Noticiahoy>Noticias</a>
Enlaces internos
Los enlaces internos permiten referenciar secciones de tu página, para lo cual se utiliza el id:
<a>Ir al pie de página</a>
…
<footer></footer>
También puedes usar como destino una sección específica una página distinta:
<a>Formulario de contacto</a>
