XHTML 1. INTRODUCCIÓN Para crear páginas web utilizando las tecnologías estándar recomendadas por la W3C (World Wide Web Consortium) es necesario saber estructurar bien el documento antes de aplicar el formato con CSS para que todo funcione como corresponde. Este documento debe tener el formato XHTML. (Después de leer este manual, puedes revisar nuestro manual de CSS) Sólo necesitarás un editor de texto plano (como Bloc de Notas, Word no, porque da formato), también puedes utilizar Dreamweaver siempre que te acostumbres a usarlo en la vista “Code and Design” o “Código y Diseño” para eliminar el código basura que genera y poder echar mano al código, y un navegador. XHTML significa eXtensive HyperText Markup Language y es la versión evolucionada del HTML. Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan. Por ejemplo, si tenemos el título de nuestra página, en lugar de decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título principal de la página”. Luego podemos controlar el aspecto con las hojas de estilo CSS, pero no del XHTML. XHTML es un lenguaje que se basa en etiquetas (tags). Una etiqueta sería algo como esto: <etiqueta>Algo aquí dentro La etiqueta que sirve para poner el título principal en la página es

.

What is the Matrix?

Entonces,

marca el inicio de la etiqueta y

se encarga de cerrarla. También hay etiquetas que funcionan con una sola parte, así: <etiqueta /> Debes tener en cuenta el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que funcione con los navegadores viejos. Existen algunas etiquetas que se pueden modificar mediante atributos (más adelante veremos cómo funcionan): <etiqueta atributo="valor"> Por último debes recordar escribir las etiquetas siempre en minúsculas y los atributos siempre entre comillas.

2. ESTRUCTURA XHTML La codificación La primera línea que debemos tener en un documento XHTML es la que marca la codificación. El formato en el que se guardan los caracteres en el archivo. La codificación estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos…).

Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode (normalmente es una opción a elegir en el cuadro de diálogo de Guardar como). Hay que escribir esto: La línea anterior tiene que aparecer al principio de todo el documento, antes que ninguna otra. Si usas PHP, la etiqueta que marca el inicio del script puede ser Escoge la opción que quieras, pero sólo una. Por cierto, por motivos de espacio, la línea aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente. El DOCTYPE Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict, que es esta: Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas y . El elemento raíz (HTML) El resto de nuestro documento tiene que ir dentro de la etiqueta . Pero en esa etiqueta debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua estamos usando. Si escribimos en castellano, nos quedaría así: Las letras “es” son el código ISO que representan al idioma "español". La cabecera (HEAD) La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc. Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre y , mientras que para el título usamos la etiqueta El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código El cuerpo (BODY) Por último, nos encontramos con el cuerpo, encerrado entre y , y que contiene toda la Información que de mostrará en el navegador. Quedaría así: Aquí va el cuerpo de la web La plantilla Recopilando todo, nos quedaría algo como esto: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Aquí va el contenido Guarda una copia en un archivito llamado plantilla.html para usos posteriores.

3. ETIQUETAS BÁSICAS Párrafos Los párrafos estructuran el contenido. Contienen una o más frases relacionadas entre sí, igual que en el mundo real. Si queremos crear un párrafo, metemos el texto entre las etiquetas

y

. Por ejemplo:

Hola, me llamo Luke Skywalker y soy piloto de una X- Wing en el Rogue Squadron. También soy un Jedi del Lado Luminoso de la Fuerza. Mis maestros han sido Yoda y Obi -Wan Kenobi.

Si pruebas este ejemplo en el navegador, notarás que pasa por alto los saltos de línea. Podrías haber puesto todo el párrafo en la misma línea y hubieras obtenido el mismo resultado. Saltos de línea Hay veces que necesitamos forzar un salto de línea dentro de un párrafo. Para ello, usamos la etiqueta
, así:

Dark Chest of Wonders
Seen trought the eyes
Of the one with pure heart
Once , so long ago.

Aunque estéticamente podamos obtener el mismo resultado mediante párrafos (con

) que con saltos de línea (
) de forma indiscriminada, debemos recordar que un documento XHTML utiliza un lenguaje semántico, es decir que lo importante para que esté bien estructurado es el significado de las etiquetas que utilizamos y no el efecto estético que generan. Los títulos (headings) Los títulos agrupan y ordenan información. Imaginemos la sección de enlaces de nuestra página. El título principal podría ser Mis links favoritos. Luego tendríamos los links clasificados por secciones, cada una de ellas bajo un subtítulo diferente: Blogs, descargas y videojuegos. Incluso podríamos tener subcategorías dentro de una misma sección, como por ejemplo RPG’s, Aventuras Gráficas y Arcades.

Para conseguir esto, tenemos las etiquetas y , donde x es un número del 1 al 6.

corresponde al título más importante y sólo debería haber uno por página. Luego le siguen

,

, y así sucesivamente. Los elementos de encabezado, deben guardar un orden lógico y no debemos saltar ninguno de los niveles. Ejemplo:

Mis links favoritos

Blogs

Videojuegos

RPG ’s

Arcades

Si ves el código anterior en un navegador, aparecerán los títulos más importantes de mayor tamaño que los menos importantes (pero el tamaño de cada título siempre puede cambiarse con CSS). Citas Hay tres etiquetas diferentes para escribir citas:

, y . Con

y escribimos la cita en sí, mientras que con marcamos su origen (persona, libro, canción, etc.). La diferencia entre

y es que

se emplea para escribir citas largas, esta etiqueta contiene párrafos, en cambió funciona a la inversa porque está hecha para escribir citas cortas, entonces va dentro de párrafos. Técnicamente hablando,

es un elemento block, y es inline, los elementos inline no pueden ir “sueltos” en un documento xhtml. Para ejemplificar todo lo anterior:

Aquí os dejo un fragmento de la canción Die for Rock ’n’ Roll , de Dover:

Everybody danced (while)
I was lying on the floor
I was ready to die
for Rock ’n’ Roll

Mi parte preferida es cuando dice lo de I was ready to die [...] .

Separadores horizontales Para los separadores horizontales se emplea la etiqueta

---

(horizontal rules), pero actualmente casi no son utilizados gracias a que el empleo de estilos CSS permite crear bordes delimitadores muy interesantes. Ejemplo:

Los videojuegos

Bla bla bla…

---

Música

Bla bla bla…

Comentarios Los comentarios se utilizan para indicar partes del código de una página a modo de nota, pero son invisibles para el navegador. Sirven como guía para el desarrollador o como ayuda para usuarios que utilizan navegadores especiales, como por ejemplo los no videntes. Para escribir un comentario en el código fuente, lo hacemos entre , recordando siempre de hacerlo en una sola línea:

4. ETIQUETAS DE FORMATO En este capítulo veremos cómo marcar ciertas partes del contenido para destacarlas y hacer más clara la lectura. Recuerda que siempre nos referimos a destacar semánticamente, el aspecto de todos los formatos se controla con CSS. Acerca de y sus secuaces

Si eres de la vieja escuela de webmasters, probablemente estés acostumbrado a usar etiquetas como , y compañía para poner negrita, cursiva, subrayado, monoespaciado, etc. ¡Olvídalo! El HTML 4 nos permitía controlar el aspecto con el que se iba a mostrar el texto con etiquetas como con la que cambiábamos tamaño, fuente y color del texto. Con XHTML nos limitamos a estructurar el contenido y a asegurarnos de que sea semántico. ¿Qué es esto de la semántica? Sería algo así como lograr que una máquina pueda entender un texto. Por ejemplo, un ordenador no sabe qué significa el que algo esté en negrita. Pero sí entiende que algo que tiene énfasis es “importante”, y debe ser destacado de alguna manera. Puede parecer una tontería, pero a la hora de trabajar con navegadores aurales (para ciegos), de texto, o desde móviles, la cosa cobra importancia.

Énfasis Para dar énfasis a un texto o parte de texto usaremos la etiqueta <em> y si queremos marcar un texto en negritas utilizaremos <strong>. Por ejemplo, este código:

<em>Far is not the word because I'm never far <strong>enough.

Se vería en el navegador así: Far is not the word because I'm never far enough. Es importante que sepas que estas dos etiquetas van dentro de elementos block, como párrafos. Preformato

Si has practicado algo de los capítulos anteriores, te habrás dado cuenta de que cuando el navegador interpreta el código XHTML, ignora múltiples espacios en blanco, saltos de línea, tabuladores, etc. del código. Hay ocasiones en las que necesitamos mantener este “formato”, por ejemplo cuando queremos mostrar código fuente. Para eso existe la etiqueta <pre>, que tampoco se utiliza mucho actualmente. Un ¡Hola mundo! en C nos quedaría así: <pre>#include <stdio.h> int main() { printf("Hello World!n"); return(0); } Acrónimos y abreviaturas Para utilizar acrónimos y abreviaturas tenemos las etiquetas y respectivamente. En el navegador se genera el mismo efecto; se muestra su significado al pasar el mouse por encima. Para que funcionen, estas etiquetas necesitan el atributo title donde colocamos su significado.

Ejemplo:

Mi ordenador tiene 512 MB de memoria RAM.

Si no conoces la diferencia entre acrónimo y abreviatura, en nuestro manual de accesibilidad encontrarás una ayuda.

5. ENLACES Los enlaces, una de las características más importantes de la web, se implementan con la etiqueta . Enlace a una página externa Para enlazar a una página o archivo que se encuentra en otro servidor utilizamos de esta manera: Texto del enlace El atributo href contiene la URL a la que queremos enlazar. Es importante no olvidar el protocolo (en esta caso http://) al escribir la URL para que funcione. En title se escribe una descripción de la página que enlazamos, que se verá en la mayoría de los navegadores al pasar el mouse por encima del link. El texto del enlace es independiente del título y se deben confundir. Por ejemplo: Barrapunto Enlace a una página local Si queremos enlazar a una página que está dentro de nuestro servidor, necesitamos conocer la ruta (o path) desde la página donde está el enlace hasta el documento al que queremos enlazar. Si el origen está en el mismo directorio que el destino, solamente escribimos el nombre del archivo así: Ficha personal En cambio, si el destino de encuentra en un subdirectorio, utilizamos la barra / para indicar el camino: Ver dibujos a color Y si el destino está ubicado en un directorio por encima, ponemos dos puntos y la barra ../ de esta manera: Volver al inicio

Enlace a una dirección de e-mail Si colocamos mailto: en el atributo href, seguido de una dirección de correo electrónico, crearemos un enlace que, al hacer clic sobre él, abrirá automáticamente una ventana del cliente de correo que tenga el usuario para que escriba un mensaje a esa dirección. Por ejemplo: Leia Anclas Con las anclas (anchor) podemos hacer un enlace a una posición concreta de la página. Funcionan así: Primero tenemos que crear el ancla. Esto se hace agregando el atributo id, que se puede utilizar en prácticamente cualquier etiqueta. Por ejemplo:

Lista de comentarios

Después tenemos que crear un link que no lleve a esa ancla. Para esto, ponemos en href el ID precedido de una almohadilla o numeral #, así: Leer comentarios También se puede enlazar a un ancla que esté en otra página: Comentarios del post nº 5 Las anclas son útiles para páginas muy extensas, como las FAQs que tienen un índice de preguntas con enlace al ancla correspondiente de su respuesta. También es habitual otro enlace en la respuesta que lleva a un ancla ubicada en el índice, para facilitar la navegación. 6. LISTAS Listas ordenadas Las listas ordenadas se crean con la etiqueta

y muestran sus elementos numerados:

Mis escritores favoritos (en orden de preferencia):

1. R. A. Salvatore
2. George R. R. Martin
3. Isabel Allende
Tengamos presente que con CSS podremos modificar el número por el que empieza a contar, también elegir el tipo de numeración (números romanos, arábigos, letras, mayúsculas, etc…).

Listas sin ordenar Este tipo de listas sin orden se crean con la etiqueta
y marcan cada elemento con una viñeta:

El helado perfecto (¡ñam!):

• 1 bola de helado de chocolate
• 1 bola de helado de limón
• Trocitos de piña y melocotón en almíbar
• Sirope de chocolate
De la misma manera que con las listas ordenadas, es posible cambiar su aspecto con hojas de estilo y elegir la clase de viñetas e incluso cambiar las viñetas por una imagen. Listas de definición Estas listas son diferentes a las anteriores porque cada ítem se compone de dos elementos; un término y su definición. Las etiquetas que se utilizan son:

para crear la lista,

para cada término y

para las definiciones. Por ejemplo:

Significado de algunos smileys:

:)

Sonrisa

xD

Carcajada

:P

Sacar la lengua

Las palabras término y definición no sólo se refieren a una palabra y a su significado. También podemos usar una lista de definición para crear un perfil (por ejemplo), relacionando los pares Nombre-Leia, Ciudad-Coruscant y Profesión-Senadora. También podemos cambiar su aspecto con CSS. Listas anidadas Anidar significa meter una lista dentro de otra. Las listas anidadas son sólo una combinación de las anteriores.

Por ejemplo:

Algunos libros de Salvatore:

• I Trilogía de El Elfo Oscuro
  1. La Morada
  2. El Exilio
  3. El Refugio
• Trilogía de El Valle del Viento Helado
  1. La Piedra de Cristal
  2. Ríos de Plata
  3. La Gema del Halfling

La precaución que debemos tener es cerrar la etiqueta que corresponda. Cerraremos primero las etiquetas interiores y luego las de afuera. Como se trata de insertar una lista dentro de un ítem de otra lista, debemos cerrar primero la lista interior y después el ítem de la lista exterior. Para esto no podemos ayudar visualmente con un buen tabulado.

7. IMÁGENES Las imágenes nos ayudan a hacer una web más atractiva y a aportar más información. Pero no es recomendable su uso indiscriminado y debemos saber cuándo usarlas. Hay tres formatos de imagen que podemos utilizar: JPEG, GIF y PNG. El JPEG es el más adecuado para imágenes con muchos colores o gradientes, como fotografías. El formato GIF es más adecuado para imágenes con colores planos, sólo pueden almacenar hasta 256 colores diferentes, pero permite que uno de ellos sea transparente. Las imágenes en PNG son el estándar y permiten elegir varias profundidades de paleta (número de colores). También tenemos la posibilidad de agregarle un canal alfa y crear efectos con transparencias de distinta opacidad. Pero hay que tener cuidado porque el navegador Ya-Sabes-Cuál en su versión 6 y anteriores no implementa correctamente el formato PNG. Insertar una imagen La etiqueta mediante la cual insertamos una imagen es , a la que se le agregan unos cuantos atributos más: En src ponemos qué imagen queremos mostrar, teniendo en cuenta, al igual que con los links, la ruta hacia la imagen. Generalmente, por razones de organización las imágenes se colocan en un subdirectorio llamado images, así que tendríamos que escribir src=“images/algo.gif”. Con los atributos width y height establecemos el ancho y el alto de la imagen. Aunque su valor lo podemos indicar tanto en unidades relativas como absolutas, es recomendable utilizar píxeles y hacerlo con las dimensiones reales de la imagen para ahorrar trabajo al navegador a la hora de maquetar la página. Con dimensiones reales me refiero a que si la imagen tiene 200 píxeles de ancho, coloquemos width="200". El atributo alt contiene una descripción de la imagen que se mostrará cuando ésta no se haya podido mostrar en el navegador por algún motivo. También se muestra en la mayoría de los navegadores al pasar el mouse por encima de la imagen. Por cuestiones de accesibilidad, este atributo es obligatorio: hay personas que utilizan navegadores de texto como Lynx, o usuarios que deshabilitan las imágenes para ahorrar tiempo y hay usuarios que sencillamente son ciegos. Ejemplo: Imágenes como links Las imágenes también pueden funcionar como enlaces. Esto lo podemos hacer colocando una imagen dentro de la etiqueta , así:

Los navegadores suelen agregarle un borde azul para indicar que se trata de un link. ¡¡¡No uses el nefasto border=0!!! con CSS se puede cambiar el aspecto. Hay una técnica para implementar galerías de imágenes que consiste en la utilización de thumbnails. Un Thumbnail es una imagen más pequeña que la original, que al pulsar sobre ella se carga la imagen a tamaño completo. A algunos se les ocurre esto: Esto está mal. Si la imagen Trinity pesa 100 KB, tendremos esos 100 KB ¡como thumbnail! Escalar una imagen con width y height no modifica su peso. Justamente si hacemos una galería de imágenes pequeñas, lo que queremos evitar es el peso de las imágenes grandes. Lo que tenemos que hacer es una copia pequeña de la imagen original que ocupe, por ejemplo, 5 KB: Sobre el uso y abuso de imágenes Se dice que una imagen vale más que mil palabras. Pero en web, la sobrecarga de imágenes o la utilización de pocas mal empleadas, son desesperantes. ¿Te ha pasado de entrar en un sitio web con fondo de color estridente, letras fluorescentes, una plaga de GIF’s animados, applets Java, marquesinas, etc? ¿Cuánto tiempo demoras antes de cerrarla? Yo lo hago instantáneamente, temo un ataque de epilepsia. Debemos limitar el uso de GIF’s animados y no poner imágenes indiscriminadamente. Recuerda poner sólo las que sean necesarias, las que aporten, las que sumen, y por otro lado ahorrarás en ancho de banda de tu servidor.

8. TABLAS Las tablas nos sirven para presentar información tabulada, como horarios o resultados de la lotería. Son un poco complicadas de utilizar, pero algunas veces son necesarias. Una tabla básica Las etiquetas principales que tenemos para crear una tabla son:     

: crea la tabla : crea una fila , por cada fila e insertar allí dentro las celdas que correspondan. Atributos de table La etiqueta

: pone título a la tabla

: crea una celda	: crea una celda de encabezamiento Hay que tener precaución de cerrar bien las etiquetas
y	, un buen sangrado servirá de ayuda para eso. En el ejemplo tenemos una tabla de 2x2: Videojuegos Título Género Sonic Plataformas Daría como resultado algo parecido a esto: Videojuegos Título Género Sonic Plataformas El método es el siguiente: Abrir una etiqueta

dispone de una serie de atributos, aunque la mayoría de éstos se controlan mediante CSS (borde, dimensiones, colores, etc.). Podemos modificar la distancia entre celdas con cellspacing y el espacio entre el borde de la celda y su contenido con cellpadding (aunque este último también es preferible manejarlo con hojas de estilo).

A continuación un ejemplo:



Videojuegos

Título	Género
Sonic	Plataformas

Expandir filas y columnas A veces necesitamos que una celda ocupe más de un espacio. El atributo colspan permite expandir una celda por varias columnas. Por ejemplo:





Videojuegos

Título	Género
Sim City	Simulación	Estrategia

Nos quedaría así: Videojuegos Título

Género

Sim City Simulación Estrategia También podemos hacer los mismo con las filas, para eso utilizamos el atributo rowspan.





Videojuegos

Título	Sim City
Géneros	Simulación
	Estrategia

Videojuegos Título

Sim City Simulación

Géneros Estrategia ¿Tablas para layouts? Ni lo pienses A pesar de que CSS está disponible desde 1994, la mayoría de los sitios web en la actualidad están maquetados con tablas. Antes de la llegada del CSS era imposible maquetar páginas sin tablas. CSS implementa capas (divs) con lo que podemos controlar totalmente la colocación de cada elemento, además de su apariencia. Esto nos permite dejar el código XHTML limpio y simple. Muchos piensan que esto de las capas es demasiado complicado, pero no es así, sólo que aprender algo nuevo puede dar pereza. Nuestro manual de CSS puede ser el puntapié inicial. ¿Por qué no debes diseñar con tablas? Porque no se crearon para maquetar y la W3C lo desaconseja. Porque su resultado es completamente imprevisible en navegadores no visuales (para ciegos, de texto o cualquier dispositivo que no sea un monitor). Además, las tablas dan más trabajo, para renovar el diseño de nuestro sitio debemos modificar el código de cada página casi en su totalidad, cuando utilizando layout por capas sólo debemos modificar el archivo CSS. El código de una página maquetada con tablas es más complicado, y por lo tanto más pesado, esto consume más ancho de banda y hace que la página demore más en cargarse en el navegador. El futuro es XHTML. Anímate a cumplir los estándares y no uses tablas para maquetar.

9. FORMULARIOS Los formularios nos sirven para recavar información que el usuario introduce en nuestra web. Esta información puede ser enviada por correo electrónico o procesada mediante un script. Es importante tener en cuenta que la información que se manda por correo electrónico no está cifrada y podría ser interceptada, entonces no debería contener información importante o confidencial. Puede servir para pedir intercambio de links o enviar comentarios sobre nuestra página. Los servidores que disponen de tecnología como PHP o CGI, nos permiten guardar esa información en una base de datos o generar una página dinámicamente, por ejemplo. La etiqueta FORM Todos los formularios están encerrados por

y

. Dentro de estas etiquetas se colocan los campos del formulario, y párrafos y saltos de línea para organizarlos. En el ejemplo hay una etiqueta

para un formulario que se enviará por correo electrónico: En el atributo action se especifica qué es lo que se hará al pulsar el botón de enviar (submit). En el caso del ejemplo, el formulario se enviaría a la dirección [email protected]. Si, en cambio, procesáramos el formulario con un script pondríamos action=“enviar_info.php". Con method establecemos la manera en que se enviará la información. Cuando usamos correo electrónico, le damos el valor post. Para scripts se suele utilizar get, que pone el valor de las variables en la query string (URL). Con enctype=“text/plain” logramos que el formulario llegue a nuestra bandeja de entrada en forma de texto plano, sin caracteres extraños. Campos de texto Casi todos los campos de un formulario se crean con la etiqueta , especificando en su parámetro type el tipo de campo que necesitamos. Un tipo de campo de texto básico sería así: Con el atributo type=“type” indicamos que se trata de una campo de texto. Con size, establecemos el ancho del campo, medido en caracteres. id es un identificador, lo que implica que es un elemento único y no puede haber otro elemento en el documento que se llame igual. Este parámetro sirve para CSS y para usarlo con la etiqueta (que veremos más adelante), entre otras cosas. Con name le damos un nombre a la variable del campo. Por ejemplo, si el visitante escribe “Morpheo” en el formulario que hemos puesto de ejemplo, recibiríamos un e-mail que contendría algo así: nombre = Morpheo

Poner el mismo valor tanto en id como en name simplifica las cosas. Existen otros atributos para los campos de texto. Podemos indicar el ancho, en número máximo de caracteres, que puede introducir el usuario con maxsize. Para que aparezca un valor por defecto, como por ejemplo pedir la dirección de la página web del visitante, utilizamos value=“algo”. Por último, no olvidemos el atributo title, que en formularios funciona igual que con la etiqueta . Campos de contraseña Los campos de contraseña son iguales a los de texto. La única diferencia es que en el campo de texto el usuario ve caracteres y en el de contraseña ve puntos. La información no va cifrada, la diferencia es, entonces, puramente estética. Los atributos que utiliza son los mismos que los del campo de texto, lo único que cambia es el valor de type, en el que escribimos password. Etiquetar campos Cuando debemos indicarle al usuario qué es lo que tiene que escribir en cada campo podríamos hacer esto:

Nombre:


Mal. Los navegadores no visuales pueden tener problemas con esto. Para indicar que la palabra “Nombre” hace referencia al campo con el atributo id=“nombre” utilizamos la etiqueta . Esta etiqueta asocia texto con su campo correspondiente. Tiene un solo atributo; for, en el que tenemos que indicar el id del campo con el que queremos asociar el texto. La manera correcta de hacer lo del ejemplo anterior sería:

Nombre:


Áreas de texto Las áreas de texto permiten al visitante introducir varias líneas de texto. La etiqueta que utilizaremos es .<br /> <br /> La etiqueta <textarea> dispone de los atributos id, name y title, que funcionan como en el resto de campos de formulario. Además, disponemos de otros dos para indicar las dimensiones del área de texto: cols se encarga de establecer el ancho (medido en caracteres) y rows el alto, medido en líneas. Como ejemplo, imaginemos que en una parte del formulario queremos poner un campo para que el visitante deje un comentario. Como probablemente sea largo, utilizamos un textarea: <p> <label for="comentario">¿Algún comentario ?</ label><br /> <textarea name="comentario" id="comentario" cols="30" rows="5"> Bla bla bla </ textarea> Fíjate en que <textarea> tiene etiqueta de cierre. El texto que hay entre la etiqueta de apertura y la de cierre es el valor por defecto que contendrá el campo; en este caso “Bla bla bla”. Casillas de verificación Las casillas de verificación (o checkbox) tienen forma de cuadradito, y el usuario las puede activar o desactivar haciendo clic sobre él. Se crean con la etiqueta <input> y type=“checkbox”. Sus atributos id, name y title funcionan de forma regular, pero value es diferente. En value se escribe lo que aparecerá luego en el e-mail que recibamos como valor de la variable (indicada en name) si la casilla se activa. Por ejemplo: <p>Has jugado a…<br /> <input type="checkbox" name="monkey1" id="monkey1" value="si" /> <label for="monkey1">Monkey Island I</ label> </p> Si el usuario activa la casilla, recibiremos esto en el mail: monkey1=si Añadiendo el atributo checked=“checked” haremos que la casilla aparezca activada por defecto. Por ejemplo: <p>Has jugado a…<br /> <input type="checkbox" name="monkey1" id="monkey1" value="si" checked="checked" /> <label for="monkey1">Monkey Island I</ label> <input type="checkbox" name="xwing" id="xwing" value="si" /> <label for="xwing">X- Wing Alliance</ label> </p> Según este ejemplo “Monkey Island” quedaría activada por defecto y “X-Wing Alliance” desactivada.<br /> <br /> Botones de selección Más conocidos por su nombre en inglés radio buttons, son casillas con forma circular, agrupadas, donde sólo una en el grupo puede estar activada a la vez. Se utilizan cuando necesitamos que el visitante seleccione sólo una de las opciones que se le dan. Se crean con la etiqueta <input> y su parámetro type=“radio”, pero tienen algunas cosas especiales. Supongamos que queremos que el usuario cuál es su película favorita de la trilogía de Star Wars. Como sólo puede elegir una, emplearemos radio buttons en lugar de casillas de verificación. Necesitaremos entonces tres botones, uno por cada película. Primero debemos agruparlos, y lo hacemos dándole a todos los botones el mismo nombre de variable, es decir que todos tendrán el mismo valor en el atributo name. Respecto al id, como no puede haber dos iguales, pondremos identificadores distintos. Resumiendo: los radio buttons son los únicos campos que tienen diferente id y name. También disponemos del atributo checked para activar por defecto alguna de las opciones. Ejemplo: <p>Peli preferida:</br > <input type="radio" name="peli" id="sw_hope" value="hope" checked="checked" /> <label for="sw_hope">A New Hope</ label> <input type="radio" name="peli" id="sw_empire" value="empire" /> <label for="sw_empire">The Empire Strikes Back</ label> <input type="radio" name="peli" id="sw_jedi" value="jedi" /> <label for="sw_jedi">The Return of the Jedi</ label> </p> Aquí utilizamos la palabra “peli” para los tres nombres de variable (name). Luego cada botón tiene asignado su propio id indicando la película (A New Hope tiene asignada la id “peli_hope”). El atributo value contiene el texto que tendrá la variable en caso de ser seleccionado ese botón. Por ejemplo, si el usuario seleccione The Return of the Jedi, recibiremos lo siguiente en el e-mail: peli=jedi Listas de selección Las listas de selección se presentan en forma de lista replegada con múltiples opciones agrupadas (un concepto similar al de los radio buttons). Son útiles cuando necesitamos presentar muchas opciones a elegir<br /> <br /> Se crean con la etiqueta <select> que tiene etiqueta de cierre. Entre las cuales agregamos las opciones con la etiqueta <option>. Si el mismo ejemplo anterior lo hiciéramos en forma de lista de selección lo haríamos así: <p> <label for="peli">Película preferida:</ label><br /> <select name="peli" id="peli"> <option value="hope">A New Hope</ option> <option value="empire">The Empire Strikes Back</ option> <option value="jedi" selected="selected">The Return of the Jedi</ option> </ select> </p> Para indicar la opción por defecto lo hacemos con selected=“selected”. (Como ves, aquí no tenemos el lío aquel con id y name). Botones de enviar y restablecer Los últimos elementos de los que debemos hablar son dos botones especiales: el de enviar (submit) y el de reestablecer (reset). El botón de enviar manda la información del formulario y el botón de reestablecer se encarga de borrar el formulario, pone todos los valores por defecto, se utiliza más para el caso de formularios extensos. Ambos se crean con <input>. En este caso, a menos que queramos cambiar su aspecto de manera especial con CSS, el atributo id no será necesario. Tampoco name, si enviamos el formulario por correo no lo necesitaremos, porque no implementaremos ningún script para tratar la información. En el atributo value escribimos el texto que aparecerá en el botón. Para crear el botón de enviar indicamos type=“submit”: <input type="submit" value="Enviar" /> El botón de reestablecer lo conseguimos con type=“reset”: <input type="reset" value="Borrar" /> De más está decirte que debes diferenciar bien cuál botón es cual. Éste no es precisamente el mejor lugar para innovar, no pongas textos extraños como título de los botones.<br /> <br /> Consultoría y Desarrollo<br /> <br /> Serviweb S.L. Calle Tierno Galván 11, 11, izq. C.P. 30203 - Cartagena (Murcia) Tels.: 902 929 442 / 968 086 993 Fax: 968 086 934 info@serviweb.es<br /> <br /> www.serviweb.es </div> </div> <hr /> <h4>Related Documents</h4> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/xhtml-w63y9q6x7jom" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/w63y9q6x7jom.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/xhtml-w63y9q6x7jom" class="text-dark">Xhtml</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 7</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/xhtml-xlo67ekqlv36" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/xlo67ekqlv36.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/xhtml-xlo67ekqlv36" class="text-dark">Xhtml</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 31</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/xhtml-gl3glxypyopr" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/gl3glxypyopr.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/xhtml-gl3glxypyopr" class="text-dark">Xhtml</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 22</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/xhtml-v8z1d0pdvzry" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/v8z1d0pdvzry.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/xhtml-v8z1d0pdvzry" class="text-dark">Xhtml</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 20</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/xhtml-tutorial-wqzmkexry2o0" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/wqzmkexry2o0.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/xhtml-tutorial-wqzmkexry2o0" class="text-dark">Xhtml Tutorial</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> April 2020</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 4</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://pdfcoke.com/documents/xhtml-basics-64vz09vyvz8l" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/64vz09vyvz8l.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://pdfcoke.com/documents/xhtml-basics-64vz09vyvz8l" class="text-dark">Xhtml Basics</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> August 2019</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 80</small> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer pt-5 pb-0 pb-md-5 bg-primary text-white"> <div class="container"> <div class="row"> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Our Company</h5> <ul class="list-unstyled"> <li><i class="fas fa-location-arrow"></i> 3486 Boone Street, Corpus Christi, TX 78476</li> <li><i class="fas fa-phone"></i> +1361-285-4971</li> <li><i class="fas fa-envelope"></i> <a href="mailto:info@pdfcoke.com" class="text-white">info@pdfcoke.com</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Quick Links</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/about" class="text-white">About</a></li> <li><a href="https://pdfcoke.com/contact" class="text-white">Contact</a></li> <li><a href="https://pdfcoke.com/help" class="text-white">Help / FAQ</a></li> <li><a href="https://pdfcoke.com/account" class="text-white">Account</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Legal</h5> <ul class="list-unstyled"> <li><a href="https://pdfcoke.com/tos" class="text-white">Terms of Service</a></li> <li><a href="https://pdfcoke.com/privacy-policy" class="text-white">Privacy Policy</a></li> <li><a href="https://pdfcoke.com/cookie-policy" class="text-white">Cookie Policy</a></li> <li><a href="https://pdfcoke.com/disclaimer" class="text-white">Disclaimer</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Follow Us</h5> <ul class="list-unstyled list-inline list-social"> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-linkedin"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-instagram"></i></a></li> </ul> <h5 class="text-white font-weight-bold mb-4">Mobile Apps</h5> <ul class="list-unstyled "> <li><a href="#" class="bb-alert" data-msg="IOS app is not available yet! Please try again later!"><img src="https://pdfcoke.com/static/images/app-store-badge.svg" height="45" /></a></li> <li><a href="#" class="bb-alert" data-msg="ANDROID app is not available yet! Please try again later!"><img style="margin-left: -10px;" src="https://pdfcoke.com/static/images/google-play-badge.png" height="60" /></a></li> </ul> </div> </div> </div> </footer> <div class="footer-copyright border-top pt-4 pb-2 bg-primary text-white"> <div class="container"> <p>Copyright © 2024 PDFCOKE.</p> </div> </div> <script src="https://pdfcoke.com/static/javascripts/jquery.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/popper.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootstrap.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/bootbox.all.min.js"></script> <script src="https://pdfcoke.com/static/javascripts/filepond.js"></script> <script src="https://pdfcoke.com/static/javascripts/main.js?v=1732324722"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144986120-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-144986120-1'); </script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>