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= &quo

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