Blog de Notas sobre Temas Introductorios al Desarrollo Web: HTML y CSS

¿Alguna vez has instalado un programa y no se visualizaban correctamente algunos caracteres? ¿Alguna vez te han dado un justificante, un extracto bancario o un recibo en el que no se mostraban correctamente algunos caracteres? ¿Alguna vez has entrado en una página web y te aparecían caracteres chinos cuando la página no estaba en chino? ¿No haz podido ver bien un fichero o su contenido al moverlo de un sistema operativo a otro? Los motivos de estos problemas son los denominados " juegos o mapas de caracteres ": ASCII, ISO-8859-1, Latin-1, ANSI, UTF-8, UTF-8 sin BOM, Unicode, Cotejamiento , entre muchos otros. Sin duda en el campo de la informática, el juego de caracteres es de las cosas más simples que más problemas ocasiona . La codificación de caracteres es el método que permite convertir un carácter de un lenguaje natural (como el de un alfabeto o silabario ) en un símbolo de otro sistema de representación, como un número o una secuencia de pul...

La etiqueta <fieldset> agrupa campos del formulario y la etiqueta <legend> asigna un nombre a cada grupo. <fieldset> agrupa elementos de un formulario que están relacionados entre sí. Por ejemplo, podríamos agrupar los datos personales de un usuario en un <fieldset> y los datos bancarios en otro. Además, este control dibuja un marco alrededor de los componentes encerrados entre <fieldset> y </fieldset>. Ejemplo: < form action = "maneja_formulario.php" method = "post" > < fieldset > < legend > Datos personales < / legend > Nombre < br / > < input type = "text" name = "nombre" value = "" / > < br / > Apellidos < br / > < input type = "text" name = "apellidos" value = "" / > < br / > DNI < br / > < input type = "text...

 El elemento label representa una etiqueta que puede ser asociada a un control de formulario, y que se supone provee una descripción corta para éste. Los navegadores pueden enlazar ambos elementos permitiendo que los usuarios establezcan el enfoque sobre el control al hacer clic en su etiqueta.   Dicho elemento no muestra absolutamente nada en pantalla y, sin embargo, es una etiqueta que mejora la usabilidad y accesibilidad de los formularios . Es fundamental para usuarios que utilicen algún tipo de ayuda a la navegación. Existen dos formas de asociar a un elemento label con un control: insertando al texto de la etiqueta y al control dentro de label (Ejemplo Nº1) ; o haciendo que coincidan los valores del atributo id en el control y del atributo for en label( Ejemplo Nº2) . Ejemplo Nº1: <form action= "../../form-result.php" method= "post" target= "_blank" > <p> <label> Nombre de usuario: <input type= ...

Del mismo modo que “size” en los <input /> de tipo “text” tomaba como parámetro el número de caracteres de ancho, <textarea> define la anchura mediante el atributo cols, por defecto a 20; y el alto mediante “rows”, por defecto a 2 . Ejemplo: <form action= "../../form-result.php" target= "_blank" > <p> Agregar una nueva descripción: </p>   <p> <textarea name= "descripcion" cols= "40" rows= "5" > </textarea> </p> <p> <input type= "submit" value= "Enviar" > </p> </form> Agregar una nueva descripción : Fuentes: Activate, Google España htmlquick

Muchas veces resulta  verdaderamente incómodo insertar grandes cantidades de texto mediante <input /> de tipo texto. Para ello, existe un control específico en HTML llamado <textarea>. El elemento textarea representa un campo para la entrada de texto multilínea . El control asociado a este campo es una caja de texto que permite a los usuarios editar múltiples líneas de texto regular. Los controles textarea son útiles para recolectar o editar líneas largas de texto como mensajes, contenido de archivos, listas, reseñas, artículos, etc. Ejemplo: <form action= "../../form-result.php" target= "_blank" > <p> Mensaje para el autor: </p> <p> <textarea name= "mensaje" placeholder (*) = "Comparte tu opinión con el autor!" > </textarea> </p> <p> <input type= "submit" value= "Enviar mensaje" > </p> </form> Mensaje para el autor...

El atributo disabled deshabilita a un grupo entero de opciones de una sola vez . Esto impide al usuario la interacción con todas las opciones en el grupo deshabilitado. Ejemplo:   <p> Elije una animal: <select> <optgroup label= "África" > <option> Elefante </option> <option> Jirafa </option> <option> Cebra </option> <option> León </option> </optgroup> <optgroup label= "Oceanía" disabled> (*) <option> Demonio de Tasmania </option> <option> Koala </option> <option> Canguro </option> </optgroup> </select> </p> (*) Todas las opciones "Oceanía" aparecerán deshabilitadas en el menú desplegable . Fuentes: Activate, Google España htmlquick  

El elemento < optgroup> representa un grupo de opciones ( option ) temáticamente definido , que forma parte de un control select . Las opciones agrupadas pueden ser etiquetadas mediante el atributo label , que usarán los navegadores para mostrar como nombre del grupo. La agrupación de opciones en un control select puede mejorar la legibilidad y la facilidad de uso. Los autores deberían usar este elemento siempre que sea posible. El atributo label es obligatorio en el elemento optgroup ( mediante el cual se especifica el texto que aparece en el desplegable ) y debería proveer a los usuarios una pista o descripción acerca de los contenidos del grupo. Ejemplo: <p>   Elije un auto:   <select>     <optgroup label= "Fiat" > <option> Punto </option> <option> Panda </option> </optgroup> <optgroup label= "Peugeot" > <option>Ion /option> ...

¿Cómo se recogen los datos del formulario? Lo normal es utilizar una base de datos para recoger la información transmitida a través de un formulario en una página web. Los datos que se introducen en un formulario en el lado del cliente (el navegador web) se envían a través de Internet al servidor web, donde son recogidos y almacenados en una base de datos para su posterior consulta. Pero para hacerlo así es necesario tener conocimientos de programación y de bases de datos y eso está al alcance de los conocimientos de todas las personas. Sin embargo, existe una alternativa fácil de implementar En el atributo action de la etiqueta <form> que define un formulario se puede indicar un correo electrónico para que los datos se envíen directamente a un correo electrónico.     ¿Cómo se hace? Puedes consultar tú los siguientes recursos que contienen ejemplos que puedes copiar a tus páginas web: Cómo utilizar el mailto: protocolo en una acción <form> ...

La conducta del elemento select  varia sustancialmente de acuerdo al valor del atributo múltiple , el cual decide si el control permitirá a los usuarios elegir una sola opción o muchas.  Dependiendo del valor de este atributo, el control select puede compararse con los botones de opción (cuando el atributo múltiple está ausente), que permiten a los usuarios elegir solo una opción entre muchas, y a las casillas de verificación (cuando el atributo múltiple está presente), que permiten a los usuarios la selección de tantas opciones como estén disponibles. Ejemplo definiendo una opción predeterminada . Esta opción aparecerá seleccionada cuando la página se carge por primera vez y cuando el usuario restaure el formulario . Para hacer una opción predeterminada, solo necesitamos declarar el atributo selected para la misma. Si el atributo multiple no está presente en el control, solo una opción en la lista puede tener el atributo selected declarado. <form a...

El elemento select ( <select> ) de HTML representa un control que muestra un menú de opciones . P ermite generar listas desplegables y listas de selección múltiple. Los atributos de select son: "name" (fundamental para el manejo de los datos enviados por el formulario)y "multiple" Permite al usuario elegir de entre un número de opciones. Las opciones en una lista select son provistas con el elemento option y pueden ser agrupadas con el elemento optgroup . Ejemplo de un formulario básico con un solo control <select>: <form action= "../../form-result.php" target= "_blank" > <p> Deporte favorito: <select name= "deporte" > <option> Fútbol </option> <option> Críquet </option> <option> Básquetbol </option> <option> Hockey </option> <option> Tenis </option> </select>...

"reset"  Es el botón que restaura los contenidos de un formulario a sus valores predeterminados , es decir que define un botón que al ser pulsado por el usuario borra todos los datos que hubiera introducido en cualquiera de los campos del formulario . Sus atributos son: value="valor" , que define el texto que va a aparecer en el botón de envío. disabled , que desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pués permanece inactivo. tabindex = "n" , que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario. Fuentes: Activate, Google España HTMLWEB MDNwebdocs aprenderaprogramar.com

"image" introduce un botón definido por una imagen, en vez del formato estándar de botones, con lo que podemos así personalizar el botón.  Admite los parámetros: name="nombre" , que asigna un nombre al botón para identificarlo de forma única y poder así acceder luego a sus propiedades. src= "ruta imagen" , que establece la ruta dónde localizar el fichero de imagen. Esta ruta puede ser relativa al directorio web en el servidor o una URL absoluta que define unívocamente la localización de la imagen. width= "w" , que fija la anchura del botón de imagen. height= "h" , que fija la altura del botón de imagen. align= "left / middle / right / bottom / baseline..." , que define la posición del texto que rodea el botón respecto a este. hspace= "x" , que fija el espacio horizontal que habrá entre el botón y el texto que lo circunda. vspace= "x" , que fija el espacio vertical que habrá entre el bot...