Inconvenientes del HTML - Recursos | Diseño e implementación de

www.luiscanada.com XHTML
XHTML
¿Qué es el HTML?
HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser
vistas por el usuario mediante un tipo de aplicación llamada navegador.
Podemos decir, por lo tanto, que el HTML es el lenguaje usado por los
navegadores para mostrar las páginas web al usuario.
Un fichero HTML contiene el texto más una serie de códigos que permiten dar formato a la
página en el navegador como, por ejemplo, distribuir en columnas, poner caracteres en
negrita, asignar colores, rodear una imagen con texto...
Inconvenientes del HTML
Inconveniente del HTML: diversidad de navegadores presentes en el mercado (Internet
Explorer, Mozilla Firefox, Google Chrome, Opera, Safari...) los cuales no son capaces de
interpretar un mismo código de una manera unificada.
Esto obliga al webmáster a, una vez creada su página, comprobar que ésta puede ser leída
satisfactoriamente por todos los navegadores o, al menos, los más utilizados.
¿Qué necesito para programar una web?
HTML es únicamente texto, lo que significa que bastará simplemente con el BLOC DE NOTAS
(en Windows) para crear una página web. Existen editores específicos que hacen la tarea
más sencilla, pero es de suma importancia asentar unos conocimientos básicos para
familiarizarnos lo antes posible con el HTML.
¿Y por qué no usar un editor de HTML como Dreamweaver
o FrontPage, que facilitan mucho más la tarea?
A la pregunta sobre si es necesario hoy en día dominar, o al menos tener una idea de cómo
está estructurado el lenguaje html la respuesta es rotundamente SÍ. Francamente, es muy
conveniente tener una idea básica.
Igual que cuando conducimos un coche, sin necesidad de ser unos diplomados en mecánica,
al menos sabemos qué son los componentes principales del coche y para qué sirven...
1 www.luiscanada.com XHTML
Resulta, pues, de suma importancia aprender HTML sin utilizar estas herramientas "más
potentes", que lo que hacen es generar código de forma automática. Una vez asentadas las
bases sobre el lenguaje procederemos a utilizar estos editores más "avanzados".
Los editores HTML permiten diseñar una página de la misma forma que compondríamos un
fichero con Word, pudiendo colocar imágenes, utilizar negritas, cursivas...
Algunas de las diferencias entre programar con un editor de HTML o haciéndolo "de la forma
tradicional" son las siguientes:
HTML
a.- Se domina con mayor precisión el código
y queda mucho más limpio, sin elementos
innecesarios. Si se domina bien nunca se
tendrán problemas para realizar cualquier
cosa que se nos ocurra. El programador
domina a la máquina.
EDITOR HTML
a.- El código es de peor calidad, incluso
llegando a tener errores más o menos
visibles. La máquina domina el trabajo y
al programador.
b.- Su aprendizaje es más complejo, más
lento y, a medida que se va avanzando, la
complejidad va creciendo.
b.- Manejo y aprendizaje rápido.
Sin embargo, a medida que se profundiza, llega un punto en que se combinan ambas
técnicas hasta acabar dominando las dos.
Características del lenguaje HTML
HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La
mayoría de las marcas son semánticas. Es un lenguaje extensible, al que se le pueden añadir
nuevas características, marcas y funciones, dependiendo de la experiencia y la habilidad del
programador.
Los documentos HTML están formados por una serie de bloques de texto (titulares, párrafos,
listas...). La interpretación de estas entidades se deja al navegador.
HTML es un lenguaje estructurado.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final,
mediante las cuales se determina la forma en la que debe aparecer el texto en el
navegador, así como las imágenes y demás elementos.
2 www.luiscanada.com XHTML
Anatomía de una página web
Una página web es superficialmente parecida a cualquier otro documento: un texto, unas
imágenes, todo compuesto de una determinada manera.
¿Qué sucede con las imágenes y otros añadidos que la página web, aparentemente,
"contiene"? Éstos son ficheros adicionales que NO están dentro del fichero html; están
enlazados con un código que indica al navegador qué imagen debe mostrarse, dónde está,
sus dimensiones, si es o no un enlace...
Viendo el código de una página web
Aunque signifique adelantarse a los acontecimientos, es interesante señalar que con una
simple acción podemos ver el código fuente de las páginas, es decir, ver cómo están hechas,
ver su "esqueleto". Para ello, bastará con abrir una página en el navegador y tras hacer click
con el botón derecho escoger la opción "Ver código fuente". Algo tan sencillo como esto
será una pista valiosísima para saber la calidad de una web.
3 www.luiscanada.com XHTML
Archivos HTML
Etiquetas (o tags) HTML
Un lenguaje de etiquetas es un conjunto de palabras o caracteres que se colocan junto al
texto de un documento para especificar una propiedad del mismo.
Toda etiqueta se identifica porque está encerrada entre los signos menor
que y mayor que (< >), y algunas tienen atributos que pueden tomar algún
valor.
Cada etiqueta tiene un significado: <b> significa negrita, <p> significa párrafo, <a> definirá
un enlace...
¿Cómo se aplican las etiquetas?
En general las etiquetas se aplicarán de dos formas especiales:
1.- Se abren y se cierran, encerrando entre ellas un contenido. Por ejemplo: <b>Esto sería
un texto en negrita</b> que se vería en su navegador web como Esto sería un texto en
negrita.
2.- No pueden abrirse y cerrarse, como <hr /> que se vería en el navegador web como una
línea horizontal.
Existen otras etiquetas que no tienen su correspondiente de cierre, como <img /> para las
imágenes, o <br /> para los saltos de línea; las veremos más adelante. Esto ocurre porque
un salto de línea o una imagen no empiezan y acaban más adelante sino que sólo tienen
presencia en un lugar puntual.
Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque de
texto y una etiqueta de fin con el siguiente formato:
<etiqueta> bloque de texto </etiqueta>
Así que la página web, vista con un editor de texto, contiene una mezcla de texto normal y
una serie de códigos.
Por ejemplo, un párrafo se encierra entre las etiquetas o tags <p> y </p>.
4 www.luiscanada.com XHTML
Atributos de los TAGS
Muchos elementos tienen atributos que definen propiedades del elemento:
<etiqueta atributo="valor"> bloque de texto </etiqueta>
Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a
definir el funcionamiento de la etiqueta (o TAG) de una forma personalizada.
El valor de los atributos deberá ir entre comillas.
Estructuración e indentación del código
Las etiquetas tienen que seguir un orden piramidal; las primeras que se abren son las
últimas que se cierran.
<etiqueta 1>
<etiqueta 2>
<etiqueta 3>
Contenido
</etiqueta 3>
</etiqueta 2>
</etiqueta 1>
Sin embargo, existen reglas estructurales que indican dónde pueden y no pueden ir los
elementos. Tenemos el ejemplo de los títulos, que son independientes entre ellos, no
pudiendo contenerse unos a otros. El siguiente código sería incorrecto:
<h1>
<h2>
Contenido
</h2>
</h1>
5 www.luiscanada.com XHTML
HTML: Estructura básica de un fichero
Todo documento HTML deberá estar delimitado por las etiquetas <html> y </html>.
Además deberá definirse:
1.- Encabezado (<head> </head>): contendrá información de caracter informativo y no se
mostrará en el navegador). Entre otros:
•
•
•
Título (<title> </title>)
Palabras clave para los buscadores
Referencias a archivos externos
2.- Cuerpo (<body> </body>): será donde colocaremos nuestro texto e imágenes
delimitados a su vez por otras etiquetas (como las que hemos visto anteriormente).
El resultado será, pues, un documento que seguirá la siguiente estructura (recordar respetar
la indentación del texto: permitirá una mejor comprensión del código y un óptimo
mantenimiento posterior):
<html>
<head>
Contenido que no se mostrará: título, información para buscadores...
</head>
<body>
Contenido que se mostrará: textos, tablas, listas, imágenes...
</body>
</html>
6 www.luiscanada.com XHTML
Primer archivo HTML
Una vez vistas las características que debe cumplir un fichero HTML y la estructura que debe
seguir, ya podemos proceder a crear nuestro primer archivo HTML.
Supongamos que queremos crear una página que deba cumplir los siguientes requisitos:
1.- Título: Bienvenidos al curso de diseño
2.- Contenido: Esta es mi primera página en HTML
Realizaremos los siguientes pasos:
1.- Abrir el bloc de notas: Inicio - Todos los programas - Accesorios - Bloc de Notas
2.- Escribir todas las etiquetas necesarias y obligatorias que debe contener todo fichero
HTML. Es muy importante anidar los tags para que el código sea legible y siga una estructura
ordenada. Lo ideal es, para cada nivel de indentación, un nivel de tabulación.
El resultado de nuestro fichero debería quedar de la siguiente forma:
<html>
<head>
<title>Bienvenidos al curso de diseño</title>
</head>
<body>
Esta es mi primera página en HTML
</body>
</html>
3.- Guardar el archivo en formato HTML (Archivo - Guardar como...). Bastará con
seleccionar dónde almacenar el fichero y guardarlo con el nombre primer-ejemplo.html.
4.- Acceder a la ruta donde se ha almacenado el fichero y abrirlo con el navegador. El
resultado será algo así, dependiendo del navegador:
7 www.luiscanada.com XHTML
Posibles problemas con la extensión de archivos HTML y
Windows
En ocasiones el Bloc de Notas puede ser que no almacene el contenido en formato HTML y lo
guarde como fichero de texto (extensión txt). Para conseguir tener el control de las
extensiones de los ficheros procederemos de la siguiente manera:
Mi PC - Ver - Opciones de Carpeta - Ver - deseleccionar la opción "Ocultar extensiones para
los tipos de archivos conocidos"
Recomendaciones sobre el nombre de los ficheros HTML
Es aconsejable que cada archivo lleve asociado un nombre que haga referencia al contenido
que se quiere mostrar (primer-ejemplo.html). Además, para separar palabras es aconsejable
el uso del guión medio (-) y no el guión bajo (_). En capítulos posteriores se explicará el por
qué.
Por otra parte, tampoco se usarán ni acentos, ni ñ, ni caracteres especiales.
8 www.luiscanada.com XHTML
Texto
Formato de párrafos en HTML
Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos,
introducir viñetas, numeraciones o bien poner en negrita, itálica...
Párrafos (<p> y </p>) y saltos de línea (<br />)
Cada párrafo va definido entre las etiquetas <p> y </p>.
Para insertar un salto de línea, lo haremos con la etiqueta simple <br />.
La diferencia entre ambos es que br hace un cambio de línea mientras que p inserta una
línea en blanco.
Es necesario aclarar que insertar un salto de línea cuando se esté creando el código no
querrá decir que el navegador lo muestre como tal. Véase el ejemplo; supongamos que se
escribe esto en el Bloc de Notas:
<p>Esto es un
simple
ejemplo sin saltos de línea</p>
Se vería en el navegador de la siguiente forma:
Esto es un simple ejemplo sin saltos de línea
Si quisiéramos mostrarlo con saltos de línea el código debería ser:
<p>Esto es un <br />simple<br />ejemplo CON saltos de línea</p>
Y el resultado en el navegador, ahora sí:
Esto es un
simple
ejemplo con saltos de línea
Justificación de párrafos
Los párrafos pueden justificarse a la izquierda, centro o derecha. Para ello deberemos
definir el atributo align dentro de la etiqueta <p> especificando dicha justificación en el
interior de la etiqueta por medio de un atributo align.
9 www.luiscanada.com XHTML
Justificación a la derecha (align="right")
Ejemplo:
<p align="right">Ejemplo de justificación a la derecha</p>. El resultado en el navegador
sería:
Ejemplo de justificación a la derecha
Justificación al centro (align="center")
Ejemplo:
<p align="center">Ejemplo de justificación al centro</p>. El resultado en el navegador
sería:
Ejemplo de justificación al centro
Justificación a la izquierda (align="left")
Ejemplo:
<p align="left">Ejemplo de justificación a la izquierda</p>. El resultado en el navegador
sería:
Ejemplo de justificación a la derecha
El valor de los atributos deberá ir entre comillas. En algunas ocasiones necesitamos
especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos,
el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por
defecto es left.
10 www.luiscanada.com XHTML
CASO: Múltiples párrafos con un mismo formato
Supongamos que queremos alinear 5 párrafos seguidos a la derecha. Tendremos dos
opciones:
•
Alinear cada uno de ellos con su correspondiente atributo (right)
<p align="right">Párrafo 1</p>
<p align="right">Párrafo 2</p>
<p align="right">Párrafo 3</p>
<p align="right">Párrafo 4</p>
<p align="right">Párrafo 5</p>
•
Utilizar la etiqueta <div>: de esta manera conseguiremos simplificar nuestro código y evitar
introducir continuamente el atributo align sobre cada una de nuestros párrafos:
<div align="right">
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
<p>Párrafo 4</p>
<p>Párrafo 5</p>
</div>
PRÁCTICA 1: Confeccionar una página que muestre en un párrafo datos referentes a tus
estudios y en otro párrafo tu nombre y mail
PRÁCTICA 2: Queremos
2 Párrafos centrados
construir
una
página
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda
11 que
tenga,
por
este
orden:
www.luiscanada.com XHTML
Encabezados
Las cabeceras fueron creadas para representar con tamaño adecuado los títulos y/o
subtítulos de una página.
Estos encabezados o cabeceras representan mediante una H (de cabecera - header en inglés)
más un número del uno al seis dependiendo de la importancia dentro de nuestro contenido.
Las cabeceras son, pues, las siguientes: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, siendo 1 la
cabecera más relevante y 6 la que menos.
Las cabeceras toman un rol importante en el posicionamiento web, pues cada header
representa una importancia dentro de nuestro contenido.
Según los estándares web, debe definirse únicamente un título H1 por cada
página.
Tal y como se comentó en capítulos anteriores, un encabezado no puede estar incluido
dentro de otro; deben ser independientes.
Ejemplos
Un encabezado h1 se definará de la siguiente forma:
<h1> Ejemplo de título h1 </h1>
Ejemplo de h1 a h6 | Combinando encabezados y párrafos
El atributo align
El atributo align funciona igual que para los párrafos. De esta manera, si quisiéramos alinear
un encabezado h1 en el centro, por ejemplo, el tag quedaría de la siguiente manera:
<h1 align="center"> Título de ejemplo </h1>
12 www.luiscanada.com XHTML
PRÁCTICA1:
Confeccionar una página que contenga 1 título de primer nivel <h1> y luego 2 títulos de nivel
<h2>. Definir un párrafo para cada título de segundo nivel.
PRÁCTICA2:
Confeccionar el titular de un periódico con título de nivel 1 y título "Diario online".
Luego definir dos títulos de segundo nivel con los textos "Noticias políticas" y "Noticias
deportivas".
Para la sección de política definir el titular de tercer nivel "resultado elecciones europeas" y
para el apartado de deporte el titular "últimos fichajes" (también de nivel 3).
Incluir un párrafo para cada una de las secciones de nivel 3.
Al final de la página mostrar un título de cuarto nivel con tu nombre.
13 www.luiscanada.com XHTML
Formateando textos
En este capítulo aprenderemos las etiquetas básicas para dar estilos negrita, cursiva,
subrayado y tachado estandarizado a nuestros textos.
Lamentablemente el estilo de fuente aplicado mediante HTML quedó obsoleto luego de la
aparición de CSS, siendo reemplazado por las siguientes propiedades:
<b> </b>, reemplazado por la propiedad CSS font-weight:bold (negrita);
<i> </i>, reemplazado por la propiedad CSS font-style:italic (itálica o cursiva);
<u> </u>, reemplazado por la propiedad CSS text-decoration:underline (subrayado);
<s> </s>, reemplazado por la propiedad CSS text-decoration:line-through (tachado);
HTML se utilizará para estructurar el contenido mientras que CSS aplicará
formatos (colores, estilos...).
En próximos capítulos profundizaremos sobre las hojas de estilo.
Caso especial, la etiqueta negrita (<b>)
Ésta es la única etiqueta que se sigue utilizando en el lenguaje HTML. El motivo es para
informar a los principales buscadores de la importancia de esta palabra en el contenido del
documento.
Recuerda que para dar estilos al texto HTML cumpliendo los estándares
usaremos las hojas de estilo (CSS).
14 www.luiscanada.com XHTML
Separador de contenido (<hr />)
El separador de contenidos, más que una etiqueta única, es una herramienta útil para
ordenar y estructurar contenidos del sitio cuando son muy extensos.
La etiqueta muestra una franja horizontal que imprime una línea divisora. Se representa
mediante <hr />.
Supongamos que esto es la primera parte
<hr />
Y ésta es la segunda
Se vería así:
Supongamos que esto es la primera parte
Y ésta es la segunda
Colores y tipos de fuente
Como hemos comentado en el apartado anterior, para aplicar estilos lo más óptimo es el uso
de las hojas de estilo. Sin embargo, daremos una pincelada sobre cómo hacerlo
directamente desde HTML.
La etiqueta <font>
<font> es una etiqueta obsoleta reemplazada por las hojas de estilo. Es común encontrarnos
páginas cuyo código aún las incluyen. No es erróneo, pero su uso implicará no cumplir los
estándares. Dicha etiqueta incluye atributos como "face" (para especificar el tipo de
fuente), "size" (para el tamaño) o color.
Como el HTML es un lenguaje sólo para estructurar textos y no para un
estilo visual adecuado, se ha eliminado, al igual que otras etiquetas y/o
atributos que tienen relación con el aspecto visual de una página web.
Véase el siguiente ejemplo:
<font face="arial" size="12px" color="#0088AA">TEXTO CON FORMATO</font>
15 www.luiscanada.com XHTML
El resultado sería el siguiente:
TEXTO CON FORMATO
Subíndicies <sub> y superíndices <sup>
El subíndice es una letra, número o signo que se coloca a la derecha y en la parte inferior de
un símbolo matemático, químico u otro. El texto irá entre las etiquetas <sub> y </sub>.
Por otra parte, el superíndice es un número o signo que se coloca en el extremo superior
derecho de una palabra o número como indicación de elevación a potencia u otro dato. Se
hará mediante las etiquetas <sup> y </sup>.
El agua está formada por H<sub>2</sub>O.
En la tierra hay unos 1.360.000.000 km<sup>3</sup> de este compuesto químico.
El agua está formada por H2O.
En la tierra hay unos 1.360.000.000 km3 de este compuesto químico.
16 www.luiscanada.com XHTML
Listas
¿Qué es una lista?
Una lista es un conjunto de datos y/o información ordenados verticalmente. Esta
información puede presentarse de 3 maneras: en listas desordenadas, ordenadas y de
definición.
Las listas son utilizadas para citar, numerar y definir.
Listas desordenadas
Las listas desordenadas son también las más usadas. Se delimitan por las etiquetas <ul> y
</ul> (UL = Unordered List), y cada uno de los atributos se citará mediante la etiqueta <li> y
</li> (LI = List Item).
Este tipo de listas no siguen ningún orden lógico.
Un ejemplo sería el siguiente:
<h1>Países del mundo</h1>
<ul>
<li>Australia</li>
<li>España</li>
<li>Brasil</li>
</ul>
El resultado puede verse aquí.
17 www.luiscanada.com XHTML
Listas dentro de listas (SUBLISTAS)
Una anidación de listas consiste en crear la misma estructura de una lista (ordenada o
desordenada) dentro de un ítem de lista del primer nivel.
Esto quiere decir que integraremos una etiqueta <ul> con sus respectivos ítems de listas
dentro de una etiqueta <li>.
Podemos crear tantos niveles como queramos siguiendo bien la estructura lógica de las
listas, como en el siguiente ejemplo.
<h1>Países del mundo</h1>
<ul>
<li>Australia</li>
<li>España
<ul>
</ul>
</li>
<li>Brasil</li>
<li>Zaragoza</li>
<li>Sevilla</li>
<li>Lleida</li>
</ul>
Así lo mostrará el navegador:
18 www.luiscanada.com XHTML
El atributo TYPE para listas desordenadas
Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos
especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>
(<ul type="tipo de viñeta">), si queremos que el estilo sea válido para toda la lista,o dentro
le la etiqueta <li> (<li type="tipo de viñeta">) si queremos hacerlo específico de un solo
elemento.
A continuación se definen los posibles valores de TYPE para listas desordenadas:
circle
disc (es el valor que se toma por defecto)
square
Vamos a ver un ejemplo de lista con un cuadrado en lugar de la clásica viñeta redondeada.
Además, en el último elemento colocaremos un círculo. Para ello vamos a colocar el atributo
type en la etiqueta <ul>, con lo que afectará a todos los elementos de la lista:
<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li type="circle">Elemento 4</li>
</ul>
El resultado será el siguiente:
ƒ
ƒ
ƒ
o
Elemento 1
Elemento 2
Elemento 3
Elemento 4
PRÁCTICA: Confeccionar una página HTML que contenga una lista no ordenada con cuatro
lenguajes de programación populares. Agregar al principio un título de segundo nivel.
19 www.luiscanada.com XHTML
Listas ordenadas
Las lista ordenadas se utilizan para seguir un orden lógico. Estas listas se delimitarán por
<ol> y </ol> (OL = Ordered List). Los tags para definir los items no variarán de las listas
ordenadas (<li> y </li>).
Un ejemplo sería el siguiente:
<h1>Lista de países con más población</h1>
<ol>
<li>China</li>
<li>India</li>
<li>EE.UU</li>
</ol>
El resultado puede verse aquí:
Listas dentro de listas (SUBLISTAS)
El concepto es el mismo que para las listas desordenadas:
<h1>Lista de países con más población</h1>
<ol>
<li>China</li>
<li>India
<ol>
<li>Damán</li>
<li>Pondicheri</li>
<li>Orisa</li>
</ol>
</li>
<li>Brasil</li>
</ol>
Así lo mostrará el navegador:
20 www.luiscanada.com XHTML
Combinando listas ordenadas y desordenadas
Es posible combinar listas ordenadas y no ordenadas sin ningún tipo de impedimento:
<h1>Lista de la compra</h1>
<ol>
<li>Leche</li>
<li>Frutas
<ul>
<li>Manzana</li>
<li>Pera</li>
<li>Melocotón</li>
</ul>
</li>
<li>Carne y pescado</li>
</ol>
Clica aquí para ver el resultado en el navegador:
PRÁCTICA: Crea un documento cuyo resultado sea el siguiente:
21 www.luiscanada.com XHTML
El atributo TYPE para listas ordenadas
Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar
letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el
atributo TYPE del elemento <ol> con los siguientes valores, entrecomillados:
type="1" : Para listas ordenadas con números (1, 2, 3...). Es el valor que se toma por
defecto.
type="A" : Para listas ordenadas con letras mayúsculas (A, B, C...)
type="a" : Para listas ordenadas con letras minúsculas (a, b, c...)
type="I" : Para listas ordenadas con numeración romana (I, II, III, IV, V...)
type="i" : Para listas ordenadas con numeración romana minúscula (i, ii, iii, iv, v...)
El formato será el siguiente:
<ol type="a">...</ol>
<ol type="A">...</ol>
<ol type="i">...</ol>
<ol type="I">...</ol>
22 www.luiscanada.com XHTML
El ejemplo muestra listas con los diferentes valores que puede tomar el atributo TYPE.
El atributo START para listas ordenadas
Puede que en algún caso deseemos comenzar nuestra enumeración por un número o
letra que no tiene por qué ser necesariamente el primero de todos. Para solventar esta
situación, podemos utilizar un segundo atributo, start, que tendrá como valor un número.
Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a
definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se
encarga de hacer la traducción del número a la letra correspondiente. Véanse los siguientes
ejemplos:
23 www.luiscanada.com XHTML
Caso 1: <ol start="4">...</ol>
Caso 2: <ol type="A" start="3">...</ol>
Caso 3: <ol type="i" start="4">...</ol>
Caso 4: <ol type="I" start="9">...</ol>
Caso 1: lista numerada, empezando por 4 (recordar que el atributo type por defecto es la
numeracion común).
Caso 2: lista alfabética, empezando por C.
Caso 3: lista románica en minúsculas, empezando por IV.
Caso 4: lista románica en mayúsculas, empezando por IX.
El resultado puede verse aquí:
24 www.luiscanada.com XHTML
PRÁCTICA: Crea un documento que tenga un resultado como el siguiente:
25 www.luiscanada.com XHTML
Listas de definición
Cada elemento es presentado junto con su definición, como si de un diccionario se tratase.
Estas listas se delimitan por <dl> y </dl> (definition list). La etiquetas del elemento y su
definición son <dt> (definition term) y <dd> (definition definition) respectivamente. Véase
el ejemplo:
<h1>Diccionario de la RAE</h1>
<dl>
<dt>Animal</dt>
<dd>Ser orgánico que vive, siente y se mueve por su propio impulso</dd>
<dt>Persona</dt>
<dd>Perteneciente al hombre, propio de él</dd>
</dl>
Así lo mostrará el navegador:
PRÁCTICA: Confeccionar una lista de definición con 3 conceptos relacionados con "programas
para Windows" y, para cada uno de ellos, hacer una breve descripción.
26 www.luiscanada.com XHTML
Caracteres especiales
Caracteres especiales
Una página web ha de poder verse independientemente del país desde donde se esté
recibiendo la visita. Cada región utiliza un conjunto de caracteres distintos y, para solventar
este problema, HTML nos ofrece una serie de caracteres para que cualquier contenido pueda
verse desde cualquier parte del mundo.
Además, existen ciertos caracteres en HTML que no pueden mostrarse directamente para
que no se creen conflictos, como pueden ser '<' o '>', ya que entrarían en conflicto con los
TAGS HTML.
Los más habituales son los siguientes:
& se utilizará para imprimir el carácter &
< se utilizará para imprimir el carácter < . (lt = "Less Than" o "menor que")
> se utilizará para imprimir el carácter > . (gt = "Greater Than" o "mayor que")
Aunque existen muchos más caracteres no imprimibles (acentos, ñ, letras griegas), los
citados anteriormente son los más comunes.
PRÁCTICA: Crea un documento que tenga un resultado como el siguiente:
Me encanta aprender el <HTML> & XHTML estandarizado para todos los navegadores e
incluso... teléfonos móviles
27 www.luiscanada.com XHTML
Vínculos
Vínculos: ¿qué son?
Un vínculo es una conexión desde un recurso web a otro. Aunque es un concepto simple, el
vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web.
Para colocar un enlace se usarán las etiquetas <a> y </a>.
El atributo href
Dentro de la etiqueta de apertura deberemos especificar el destino del enlace mediante el
atributo href.
La sintaxis sería la siguiente:
<a href="destino" atributo="valor" .....> texto o imagen </A>
El texto o imagen Será la parte que deberemos pulsar para acceder al enlace.
El destino será a la página o archivo a la que se accederá.
El atributo target
La atributo target especificará en qué ventana se va abrir el enlace. Los valores para
“target” pueden ser los siguientes:
target = "_self" : El nuevo documento se abrirá en la misma ventana. Es el valor que se
tomará por defecto.
target = "_blank" : Fuerza que el documento referenciado por el enlace sea mostrado en
una nueva ventana del navegador.
target = "_parent" : Usado para frames (obsoleto) Este valor provoca que el documento sea
mostrado en el FRAMESET padre del frame actual.
target = "_top" : Usado para frames (obsoleto). El documento solicitado se cargará en la
pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior.
28 www.luiscanaada.com w
XHTTML
Tal y como
T
o se ha com
mentado en
e anteriorres sesione
es, el uso de
d frames está anticcuado y no es
ó
óptimo
a la
a hora de indexar en
n buscadorres. Por lo tanto, ún
nicamente deberá re
ecordarse
e el
v
valor
"_bla
ank" (puestto que si no
n se dice lo contrariio se aplica
ará "_self"" por defeccto).
El resultad
E
do del sigu
uiente ejem
mplo sería
a el mismo
o para amb
bos casos (abrir el destino
d
en la
m
misma
págiina en que
e nos encon
ntramos):
< href="p
<a
pagina-destino.html"">Click aquíí para abrir en la mismaa página</a
a>
< href="p
<a
pagina-destino.html"" target="_sself">Click aqquí para abrrir en la misma página</a>
Y el resulta
ado sería el
e siguiente
e:
C
Click
aquí para
p
abrir en la mism
ma página
29 www.luiscanada.com XHTML
El atributo title
Antes de continuar y, para no crear confusiones, debe aclararse que este atributo no tiene
nada que ver con el tag title que se define en la cabecera (que vimos aquí).
Mediante esta propiedad podrá indicarse un mensaje explicativo sobre el destino del enlace.
Este mensaje aparecerá cuando el puntero del ratón se posicione sobre el vínculo.
Supongamos que queramos crear un enlace que cumpla las siguientes condiciones:
1.2.3.4.-
Texto para el enlace: "Ir a Google"
Dirección de destino: http://www.google.es
Texto al situar el mouse encima del enlace: "Click para abrir en nueva ventana"
El vínculo deberá abrirse en una nueva página.
La solución sería:
<a href=http://www.google.es
target="_blank">Ir a Google</a>
title="Click
Y el resultado: Ir a Google
30 para
abrir
en
nueva
ventana"
www.luiscanada.com XHTML
Tipos de enlaces
Los vínculos o enlaces pueden clasificarse en función de su destino (clic sobre cada uno de
ellos para ver su funcionamiento):
1.- Enlaces internos: se dirigen a otras partes dentro de la misma página (son vínculos
dentro de una misma página).
2.- Enlaces locales: se dirigen a otras páginas del mismo sitio web.
3.- Enlaces remotos: dirigidos hacia páginas de otros sitios web.
4.- Enlaces a archivos.
Enlaces internos
Los enlaces internos son aquellos que apuntan a un lugar dentro de la misma página. De
esta forma, el visitante podrá navegar de forma rápida y acceder rápidamente a las
diferentes secciones de la misma.
Se utilizan cuando una misma página es tan extensa que es difícil acceder con facilidad a sus
contenidos (Wikipedia es un ejemplo).
Para crear un vínculo de este tipo es necesario, aparte del enlace de origen propiamente
dicho, un segundo enlace que será colocado en el destino. A modo de ejemplo:
1.- Será necesario fijar el punto de la página al cual va a ir el enlace (destino). Para ello se
usará la siguiente etiqueta:
<a name="enlaces-internos"> </a>
2.- Además deberá definirse el punto (origen) que nos lleve a ese destino ya creado:
<a href="#enlaces-internos">ir abajo</a>
El corchete (#) indica al navegador que el enlace apunta a una sección/párrafo/parte de la
misma página.
Estos vínculos son poco utilizados: es más óptimo mostrar la información justa en cada una
de las páginas (mejorando así los tiempos de carga y evitando condensar la información en
un solo archivo).
31 www.luiscanada.com XHTML
Enlaces locales (a una página del mismo sitio web)
Este tipo de enlaces permiten crear vínculos entre páginas del mismo sitio. La sintaxis no
diferirá de lo ya explicado hasta el momento:
<a href="ruta-destino"> texto o imagen </a>
“ruta-destino” será una página/imagen/archivo que estará ubicado en nuestro servidor.
La estructura de todos los archivos que conforman el sitio web estará jerarquizada en una
serie de carpetas: una para las páginas HTML, otra para las imágenes, otra para los archivos
Javascript, otra con archivos de configuración...
Ejemplo 1
El siguiente ejemplo muestra la estructura de carpetas para el sitio www.luiscanada.com:
Supóngase que nos encontramos en la página:
www.luiscanada.com/cursos/parrafos.html y consideremos los siguientes ejemplos:
1.- Ir a la página 'listas.html': <a href="listas.html"> Click para ir a las listas </a>
2.- Ir a la página 'ejemplo1.html': <a href="ejemplos/ejemplo1.html"> Ver el ejemplo </a>
3.- Ir a la página 'index.html' de la carpeta 'otros': <a href=".../otros/index.html"> Ir a
otros </a>
1.- Si la página destino se encuentra en la misma carpeta que la página origen
(parrafos.html) bastará con utilizar el nombre directamente.
32 www.luiscanada.com XHTML
2.- Si la página está en una subcarpeta de la página origen se deberá especificar la ruta
completa desde el punto de partida hasta llegar a la página destino.
3.- Si la página destino se encuentra en una carpeta no incluida ni incluyente de la
página origen, deberá retrocederse los niveles necesarios mediante “../” hasta llegar a una
carpeta que contenga a la página destino y, a partir de ahí, proceder como en el punto 2.
Ejemplo 2
Enlace desde index.html hacia yyy.html: <a href="seccion1/paginas/yyy.html"> Ir de index
a yyy </a>
Enlace desde xxx.html hacia yyy.html: <a href="../seccion1/paginas/yyy.html"> Ir de xxx a
yyy</a>
Enlace desde yyy.html hacia xxx.html: <a href="../../seccion2/xxx.html"> Ir del yyy a
xxx</a>
Enlazando a una sección concreta de otra página del mismo
sitio
Los enlaces locales pueden a su vez apuntar ya no a la página en sí sino más concretamente
a una sección específica. Este tipo de enlaces resultan ser un híbrido de interno y local. La
sintaxis será del tipo:
<a href="pagina-destino.html#seccion-destino"> contenido </a>
En el código anterior se estaría enlazando a la sección “sección-destino” de la página
“página-destino.html”. Dicha página se encontraría en la misma carpeta que la página de
origen.
33 www.luiscanada.com XHTML
Enlaces externos
Los enlaces externos son aquellos cuyo destino no está incluido en nuestro sitio web. Bastará
con indicar la dirección a la que se quiere acceder (URL) mediante el atributo href, como se
ha ido haciendo hasta ahora. Además podrán utilizarse otros atributos (title, target...):
<a href="http://www.google.com" ... > Ir a Google </a>
http:// indica el protocolo por el cual accede a la página destino. También podría accederse
mediante otros protocolos como el FTP (ftp://).
PRÁCTICA: Confeccionar una lista no ordenada con 4 países europeos. Para cada uno de ellos,
disponer una lista ordenada de 3 elementos con hipervínculos a sitios que contengan
información de éstos.
Enlaces a direcciones de correo
Los enlaces mailto han quedado obsoletos por los inconvenientes que generar, siendo
reemplazados por formularios de contacto. Se definen de la siguiente forma:
<a href="mailto:[email protected]"> Envíame un email </a>
Algunos de los problemas del uso de este tipo de vínculos son:
1.- Por defecto abren la aplicación de gestor de correo (Outlook en Windows, Mail en Mac o
Evolution en Linux), lo que implica que deberá tenerse configurada una cuenta de email en
la aplicación, algo que no sucede en la mayoría de los casos.
2.- Existen multitud de bots que rastrean las páginas en busca de este tipo de enlaces para
posteriormente hacer spam.
Por lo tanto, se evitarán los enlaces mailto y se reemplazarán por formularios de
contacto.
34 www.luiscanada.com XHTML
35 www.luiscanada.com XHTML
Imágenes
Imágenes
En el diseño de una página muchas veces interesará incluir imágenes. Los formatos más
comunes y que interpretan los navegadores son JPG, GIF y PNG, cada uno con sus pros y sus
contras.
Inserción de imágenes en HTML
Para insertar una imagen en HTML se hará mediante la etiqueta <img /> (image). Esta
etiqueta no posee su cierre correspondiente. Obligatoriamente deberemos especificar el
atributo src (source), cuyo valor será la ubicación del archivo de imagen:
<img src="ruta-de-la-imagen" />
La imagen podrá estar ubicada en nuestro servidor o alojada en uno externo. Para indicar la
ruta lo haremos de la misma forma que se definió en los enlaces.
Uso y abuso de imágenes
Las imágenes dan estilo y atraen al usuario. Sin embargo, abusar de ellas provocará tiempos
de carga elevados, saturación visual, poca accesibilidad y/o usabilidad.
Es aconsejable utilizar las imágenes únicamente como apoyo visual para el usuario.
Recomendaciones para el alojamiento de imágenes
Una página puede incluir una imagen de cualquier otro sitio web. Además, existen servicios
gratuitos online (www.tinypic.com) que permiten almacenar nuestras imágenes en
servidores externos.
Esto tendrá ventajas e inconvenientes. El espacio en disco de nuestro servidor será bajo
pero no tendremos control total sobre las imágenes (pudiéndose dar el caso de "imagen
rota", donde se pierde la referencia).
Para evitar esta problemática es aconsejable crear una carpeta con las imágenes que
vayamos a utilizar para tener siempre el control.
Una correcta estructuración de todos los contenidos de nuestro sitio
permitirá un mantenimiento posterior sencillo.
36 www.luiscanada.com XHTML
Formato de imágenes
Los formatos más comunes y que interpretan la mayoría de los navegadores son JPG, GIF y
PNG, cada uno con sus pros y sus contras.
¿GIF o JPG?
El formato GIF se empleará para imágenes pequeñas de la web como botones, iconos, etc.
JPEG (o JPG) se utilizará para gráficos de mayor tamaño como imágenes digitalizadas,
fotografías, etc.
Las imágenes GIF no se utilizan para mostrar imágenes grandes o que necesiten de una
resolución de color muy grande, pues ocupan mucho espacio y además no podrán albergar
más de 256 colores.
37 www.luiscanada.com XHTML
Tampoco se hace uso de imágenes JPEG para mostrar iconos pequeños ya que el algoritmo
de compresión de este formato es degenerativo, y por tanto su resolución en imágenes
pequeñas es de menor calidad que si utilizamos un formato GIF.
Ambos sistemas están basados en mapa de bits, lo cual tiene desventajas importantes.
El formato PNG
El formato PNG dispone de un potente algoritmo de compresión, sin pérdidas (la información
no se altera), y con una tasa muy alta de compresión.
Sin embargo, y aún teniendo todas estas ventajas, el formato PNG no es práctico (aún) para
el uso en páginas web (no es adoptado por todos los navegadores, y aún menos por las
versiones antiguas de los mismos).
Imágenes: texto alternativo (atributo ALT)
Existen otros atributos de gran utilidad para las imágenes. El uso de alt no es obligatorio
pero sí muy recomendable, pues sus ventajas son varias:
1.- En el caso que la imagen no esté disponible se mostrará el mensaje del atributo alt como
alternativa.
2.- Cuando se lleve a cabo el proceso de carga de la página, el navegador mostrará esta
descripción, lo que hará que el usuario pueda hacerse una idea de qué se está cargando.
3.- Muchos usuarios pueden tener deshabilitado el muestreo de imágenes. Si se les ofrece la
información del gráfico podrán saber de qué trata el gráfico y eventualmente cambiar a
modo "con imágenes" para visualizarla.
4.- En el caso de la accesibildad también es importante este atributo, pues determinadas
aplicaciones para discapacitados (como lectores vocales) leen el contenido de este atributo
como alternativa.
5.- Y, finalmente, destacar la importancia de "alt" para el posicionamiento de imágenes en
los buscadores. El buscador interpretará y asociará el contenido de "alt" a la imagen en sí.
(Anécdota Google).
El formato quedará de la siguiente manera:
<img src="ruta-de-la-imagen" alt="descripción de la imagen"/>
38 www.luiscanada.com XHTML
Imágenes: títulos (atributo TITLE)
Este atributo funciona de la misma manera que para los enlaces. Es la encargada de ofrecer
una descripción emergente (tooltip) de la imagen (algunos navegadores utilizan el atributo
"alt" en lugar de "title" para mostrar esta información).
El formato quedará de la siguiente manera:
<img src="ruta-de-la-imagen" alt="descripción de la imagen" title="Texto emergente"/>
Diferencias entre ALT y TITLE
En cuanto al uso de ALT y TITLE en imágenes los resultados serán distintos, como se ha
dicho anteriormente, dependiendo del navegador que se utilice.
Para cumplir los estándares se definirá OBLIGATORIAMENTE el atributo ALT (para garantizar
así la accesibilidad). TITLE será opcional, pues únicamente se encarga de mostrar
información adicional.
39 www.luiscanada.com XHTML
Ejemplo de uso de TITLE y ALT
<img src="imagenes/logo-google.gif" alt="Logo de Google" title="Esto es el mensaje
emergente">
El resultado sería el siguiente:
En caso de que no existiera la imagen "logo-google.gif" en la carpeta "imagenes", el
resultado sería el siguiente:
Tamaño de imágenes
HTML insertará por defecto la imagen en su tamaño original. Sin embargo, podrá
especificarse mediante los atributos width y height una anchura y una altura.
Podremos cambiar el tamaño de la imagen sin distorsionarla especificando únicamente un
atributo (width o height).
En caso que quiera distorsionarse deberá definirse una altura o una anchura.
Los valores para estos atributos pueden especificarse en pixeles o en porcentaje. Cuando el
tamaño se expresa en porcentaje, el resultado variará dependiendo del navegador:
Ejemplo 1: <img src="ruta-de-la-imagen" width="200px" />
Ejemplo 2: <img src="ruta-de-la-imagen" width="50%" />
Ejemplo 3: <img src="ruta-de-la-imagen" width="200px" height="50px" />
Ejemplo 1: Se forzará a mostrar la imagen con una anchura de 200 píxeles y una altura
proporcional. En caso de que la imagen original fuera de 100px de ancho y 200px de alto, se
estaría mostrando la imagen con unas dimensiones de 200px (ancho) y 400px (alto).
40 www.luiscanada.com XHTML
Ejemplo 2: Se forzará a mostrar la imagen incrementada en un 50% de su tamaño real
manteniendo las proporciones de altura y anchura.
Ejemplo 3: Se forzará a mostrar la imagen con un tamaño de 200px de anchura y 50px de
altura. La imagen quedará distorsionada si las proporciones no se mantienen respecto a las
dimensiones del original.
41 www.luiscanada.com XHTML
Bordes y alineación de imágenes
A continuación se va a dar una pincelada sobre bordes y tipo de alineación de imágenes. Sin
embargo, es necesario aclarar que con la aparición de las hojas de estilo (CSS) estos
atributos han quedado desfasados.
Bordes
A las imágenes también se les puede agregar un borde mediante el atributo "BORDER" y
especificando el grosor en píxeles.
Por defecto el valor para este atributo es 0, por lo que si no se dice lo contrario no se
mostrará ningún tipo de borde.
Ejemplo 1: <img src="ruta-de-la-imagen" border="3px" />
El resultado para el ejemplo anterior sería el siguiente:
Alineación de imágenes
Para alinear las imágenes se empleará el atributo ALIGN (como en el caso de los párrafos).
<img src="ruta-de-la-imagen" align="center" />
El resultado será el siguiente:
42 www.luiscanada.com XHTML
Otros atributos
Existen otros atributos para la presentación y posición de imágenes respecto a los demás
elementos de la página (textos, tablas, listas...):
vspace y hspace, por ejemplo, se utilizan para indicar el espacio libre (en píxeles) que ha
de colocarse entre la imagen y los demás objetos.
Sin embargo, es necesario recordar que estos atributos que hacen referencia a aspectos de
presentación han quedado en desuso.
Utilizando imágenes como enlaces
Para enlazar una imagen se debe combinar la etiqueta de enlace (<a> y </a>) y la etiqueta
de imagen (<img />) dentro de ella.
Deberemos especificar los atributos obligatorios HREF, SRC y ALT.
La sintaxis quedará de la siguiente manera.
<a href="destino"> <img src="ruta-de-la-imagen" alt="texto alternativo a la imagen" />
</a>
El destino, al igual que en los enlaces de texto, podrá ser cualquier recurso interno o
externo: una página, una imagen o un archivo...
Además de los atributos obligatorios podremos utilizar atributos opcionales como title,
target...:
<a href="http://www.google.es" target="_blank"> <img src="logo-google.gif" alt="Logo de
Google" title="Abrir Google en nueva ventana" /> </a>
El resultado sería el siguiente:
43 www.luiscanada.com XHTML
Tablas
HTML ofrece el método más utilizado para la organización y presentación de datos: las
tablas.
Las tablas son la mejor opción para organizar datos pero no para organizar
contenidos.
Es un error grave maquetar una web utilizando tablas, pues no fueron creadas para este fin.
Para organizar el contenido de una web será más óptimo utilizar las hojas de estilo.
Las tablas de HTML pueden contener elementos simples, agrupaciones de filas y de
columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos
complejos que se irán viendo en los próximos puntos.
La polémica sobre la estructuración del contenido en tablas o haciendo uso de capas (divs)
creó y sigue creando polémica entre los desarrolladores y diseñadores de páginas web.
Aunque algunos malos diseñadores siguen utilizando hoy en día las tablas para definir la
estructura completa de las páginas web, se trata de una técnica obsoleta y nada
recomendable. El motivo es que se complica en exceso el código HTML y su mantenimiento
es muy complejo. La solución correcta para definir la estructura de las páginas consiste en
la utilización de hojas de estilos CSS.
44 www.luiscanada.com XHTML
Tablas: Estructura
Para definir una tabla deberán utilizarse y combinarse 3 etiquetas: <table>, <tr> (table
row) y <td> (table data cell).
Como recomendación, es aconsejable analizar en primer lugar las filas de que estará
compuesta y a continuación las columnas. El motivo es que HTML procesa primero las filas y
por eso las etiquetas <tr> aparecen antes que las etiquetas <td>.
El tag <table>
La etiqueta <table> define una tabla. En conjunto con las otras dos etiquetas (<tr> y <td>)
determinarán el número de celdas en sus filas y/o columnas.
Los tags <tr> y <td>
Esta etiqueta definirá una fila dentro de la tabla. Además, deberá contener al tag <td>,
cuya función será la de definir una celda dentro de la fila.
<td> se emplea para definir cada una de las celdas que forman las filas de una tabla.
<tr> se emplea para definir cada fila de las tablas de datos.
En el caso de que se quisiera crear una tabla de 3 filas y 4 columnas, visualmente quedaría
de la siguiente forma.
45 www.luiscanada.com XHTML
El código correcto quedaría de la siguiente manera (una correcta indentación del código
permitirá una lectura cómoda y rápida):
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
<td> Datos
<td> Datos
<td> Datos
<td> Datos
Fila
Fila
Fila
Fila
1
1
1
1
Columna
Columna
Columna
Columna
1
2
3
4
</td>
</td>
</td>
</td>
<td> Datos
<td> Datos
<td> Datos
<td> Datos
Fila
Fila
Fila
Fila
2
2
2
2
Columna
Columna
Columna
Columna
1
2
3
4
</td>
</td>
</td>
</td>
<td> Datos
<td> Datos
<td> Datos
<td> Datos
Fila
Fila
Fila
Fila
3
3
3
3
Columna
Columna
Columna
Columna
1
2
3
4
</td>
</td>
</td>
</td>
</tr>
</table>
46 www.luiscanada.com XHTML
Ejemplo
Imagínese una tabla que registre una serie de productos con sus precios unitarios. Un posible
ejemplo sería el que se muestra a continuación:
Producto Cantidad Precio / unidad
Bermudas 26 u.
25 euros
Camisas
10 u.
20 euros
Chanclas 15 u.
10 euros
El código HTML debería ser el siguiente:
<table>
<tr>
</tr>
<tr>
<td> Producto </td>
<td> Cantidad </td>
<td> Precio / unidad </td>
<td> Bermudas </td>
<td> 26 u. </td>
<td> 25 euros </td>
</tr>
<tr>
<td> Camisas </td>
<td> 10 u. </td>
<td> 20 euros </td>
</tr>
<tr>
<td> Chanclas </td>
<td> 15 u. </td>
<td> 10 euros </td>
</tr>
</table>
47 www.luiscanada.com XHTML
A continuación se muestran algunas propiedades, tags y atributos interesantes para definir
partes de las tablas HTML.
La imagen siguiente muestra de modo gráfico su estructura de una tabla y los elementos
utilizados para su construcción:
El atributo summary
El atributo summary puede específicarse dentro del tag table y permite añadir un resumen
del contenido de la tabla. Posteriormente será utilizado para informar a navegadores u otros
agentes de usuario que facilitan el acceso al contenido a usuarios discapacitados.
<table summary="Clasificación final liga BBVA" > .... </table>
Título para una tabla
Para especificar un título para una tabla se usará la etiqueta <caption> (no confundir con
los títulos h1...h6 de los textos).
Este tag deberá escribirse dentro de la etiqueta <table> pero fuera de las etiquetas <tr>, no
importando su lugar.
Por defecto se posicionará encima de todas las celdas.
48 www.luiscanada.com XHTML
Véase el ejemplo siguiente:
Ingresos del año
Septiembre $1.720.000
Octubre
$2.140.000
El código para esta tabla es el siguiente:
<table>
<caption>Ingresos del año</caption>
<tr>
<td>Septiembre</td>
<td>$1.720.000</td>
</tr>
<tr>
<td>Octubre</td>
<td>$2.140.000</td>
</tr>
</table>
Celdas de encabezado
Un encabezado en una tabla es importante, pues define y diferencia el significado de las
filas y/o columnas presentes en la tabla.
Para representar un encabezado en una tabla, deberá reemplazarse la etiqueta <td> por
<th>. El resultado del contenido de todas las celdas de esa fila se mostrarán en negrita.
Sirva el siguiente ejemplo:
Producto Cantidad (kg) Impuestos (euros)
Madera
800
800.000
Vidrio
10
50.000
Pintura
5
20.000
49 www.luiscanada.com XHTML
El código sería el siguiente:
<table>
<tr>
<th>Producto</th>
<th>Cantidad (kg)</th>
<th>Impuestos (euros)</th>
</tr>
<tr>
<td>Madera</td>
<td>800</td>
<td>800.000</td>
</tr>
<tr>
</tr>
<tr>
<td>Vidrio</td>
<td>10</td>
<td>50.000</td>
<td>Pintura</td>
<td>5</td>
<td>20.000</td>
</tr>
</table>
En el capítulo siguiente veremos los posibles atributos para las celdas de cabeceras.
Encabezado, cuerpo y pie de una tabla
Existen ciertas etiquetas que permiten estructurar las partes de una tabla
independientemente del orden en que se escriban en el código HTML. El navegador será
quien se encargue de mostrar los datos de forma lógica y ordenada.
Para ello se emplearán las etiquetas <thead>, <tbody> y <tfoot>.
<thead> proporciona la información de encabezado de una tabla que se mostrará en la
primera línea de la tabla.
La etiqueta <tbody> recogerá los datos del cuerpo de la tabla y <tfoot> encerrará los datos
de pie de la tabla (que generalmente son los resultados expuestos en el cuerpo de la tabla).
Deberán especificarse únicamente una vez para cada tabla. Todas las etiquetas <tr>
deberán estar englobadas dentro de uno de estos tres tags.
50 www.luiscanada.com XHTML
Véase el siguiente ejemplo:
Página
Total
Visitas/día Visitas/semana Visitas/mes
97
713
2820
index.php 20
154
652
HTML.php 42
301
1186
CSS.php
258
982
35
El código para la tabla es el que se muestra a continuación:
<table>
<thead>
<tr>
<th>Página</th>
<th>Visitas/día</th>
<th>Visitas/semana</th>
<th>Visitas/mes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<td>97</td>
<td>713</td>
<td>2820</td>
</tfoot>
<tbody>
</tr>
<tr>
<td>index.php</td>
<td>20</td>
<td>154</td>
<td>652</td>
</tr>
<tr>
<td>HTML.php</td>
<td>42</td>
<td>301</td>
<td>1186</td>
</tr>
<tr>
<td>CSS.php</td>
<td>35</td>
<td>258</td>
<td>982</td>
</tr>
</tbody>
</table>
51 www.luiscanada.com XHTML
Tablas: celdas (<td>), filas (<tr>) y celdas cabecera (<th>)
Mientras que <tr> es utilizado para definir filas, <td> se utilizará para definir cada una de
las celdas y <th> para definir las celdas que son cabecera de una fila o columna. A
continuación se presentan los atributos para cada una de ellas:
Celdas de tabla: <td>
Los atributos para las celdas son los siguientes:
1.- abbr = "texto": Permite describir el contenido de la celda (se emplea sobretodo con los
navegadores de voz utilizados por personas discapacitadas)
2.- scope = "col, row, colgroup, rowgroup": Indica las celdas para las que esta celda será su
cabecera.
Ejemplo: scope="col" indicará que esa celda es la cabecera de todas las demás celdas que
están en la misma columna.
3.- colspan = "número": Número de columnas que ocupa esta celda.
4.- rowspan = "número": Número de filas que ocupa esta celda.
Los atributos más utilizados son rowspan y colspan y se emplean para construir tablas
complejas como las que se ven más adelante.
Celdas cabecera de tabla: <th>
Los atributos para las celdas cabecera de tabla son los mismos que para las celdas comunes
(<td>). Sin embargo, el atributo más utilizado para <th> es scope, que permite indicar si la
celda es cabecera de la fila o de la columna (<th scope="row"> y <th scope="col">
respectivamente).
Supóngase la siguiente tabla:
El código resultante sería el siguiente:
52 www.luiscanada.com XHTML
<h1>Su pedido</h1>
<table>
<tr>
<th scope="col">Nombre producto</th>
<th scope="col">Precio unitario</th>
<th scope="col">Unidades</th>
<th scope="col">Subtotal</th>
</tr>
<tr>
<td>Reproductor MP3 (80 GB)</td>
<td>192.02</td>
<td>1</td>
<td>192.02</td>
</tr>
<tr>
<td>Fundas de colores</td>
<td>2.50</td>
<td>5</td>
<td>12.50</td>
</tr>
<tr>
<td>Reproductor de radio & control remoto</td>
<td>12.99</td>
<td>1</td>
<td>12.99</td>
</tr>
<tr>
<th scope="row">TOTAL</th>
<td>-</td>
<td>7</td>
<td><b>207.51</b></td>
</tr>
</table>
53 www.luiscanada.com XHTML
Tablas: agrupación de filas / columnas
Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas
para formar una columna ancha o une varias filas para formar una fila más alta que las
demás.
Para fusionar filas o columnas se utilizan los atributos rowspan y colspan respectivamente.
Fusión simple de columnas
La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples
para formar una columna más ancha:
El código asociado a la tabla será el siguiente:
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
54 www.luiscanada.com XHTML
Fusión simple de filas
De forma equivalente, el atributo rowspan se empleará de la siguiente manera:
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
Fusión múltiple
Utilizando los atributos rowspan y colspan, es posible diseñar tablas tan complejas como las
que se muestran en los siguientes ejemplos:
55 www.luiscanada.com XHTML
Fusión de múltiples columnas
Ejemplo de fusión de múltiples columnas:
El código será el siguiente:
<table>
<tr>
<td colspan="3">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td colspan="4">F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>
Fusión de múltiples filas
56 www.luiscanada.com XHTML
Ejemplo de fusión de múltiples filas:
El código para la tabla será el siguiente:
<table>
<tr>
<td>A</td>
<td>B</td>
<td rowspan="3">C</td>
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
<td rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
</table>
57 www.luiscanada.com XHTML
Tablas: Atributos
A continuación van a analizarse a grandes rasgos algunos de los atributos para las tablas. Sin
embargo, es recomendable utilizar las hojas de estilo (CSS).
El atributo BORDER
Dicho atributo se incluye en el tag <table>. Los bordes de una tabla NO afectan a todos los
bordes presentes en la tabla; únicamente afectará al borde exterior de la tabla y no al de
las celdas.
Este método de presentación de bordes debería estar obsoleto, pues se trata de un atributo
de visualización, pero está estandarizado correctamente.
Por defecto la tabla no mostrará ningún borde. Para aplicar un borde de 3 píxeles se
procederá de la siguiente manera:
<table border="3px">
...
...
</table>
Ejemplo:
Producto Cantidad Precio / unidad
Bermudas 26 u.
25 euros
Camisas
10 u.
20 euros
Chanclas 15 u.
10 euros
Separación entre celda y celda
Para separar el espacio entre celdas se utilizará el atributo cellspacing en la etiqueta
<table>. El valor deberá definirse en píxeles:
<table cellspacing="13px">
...
...
</table>
Ejemplo:
58 www.luiscanada.com XHTML
Producto
Cantidad
Precio / unidad
Bermudas
26 u.
25 euros
Camisas
10 u.
20 euros
Chanclas
15 u.
10 euros
Separación entre celda y texto
El atributo cellpadding permite separar el texto de la celda por un determinado número de
píxeles:
<table cellpadding="13px">
...
...
</table>
Firefox no muestra correctamente este atributo, lo que indica la no estandarización:
Producto
Cantidad
Precio / unidad
Bermudas
26 u.
25 euros
Camisas
10 u.
20 euros
Chanclas
15 u.
10 euros
(Nota: En los ejemplos se ha hecho uso del atributo border para visualizar los efectos de
separación producidos).
59 www.luiscanada.com XHTML
Formularios
Formularios: introducción
El objetivo de HTML consiste en estructurar los contenidos de una página web. Sin embargo,
también pone a disposición una serie de elementos para crear aplicaciones que interactúen
con aplicaciones más potentes.
Los formularios se definen con las etiquetas <form> y </form>. Dentro de estos tags
incluiremos todos los elementos necesarios (botones, cuadros de texto, listas
desplegables...).
El tag <FORM>: Atributos
Los atributos asociados a esta etiqueta son los que se definen a continuación:
action = "url": indica la URL de la aplicación del servidor que se encarga de procesar los
datos introducidos por los usuarios. Esta aplicación también se encarga de generar la
respuesta que muestra el navegador. Ej: <form action="procesa-datos.php">. Este atributo
será obligatorio.
method = "POST o GET": Método HTTP empleado al enviar el formulario. En caso de utilizar
el método GET los valores del formulario se agregarán a la URL definida en el atributo
action. Ej.: procesa-datos.php?nombre=cecot.
enctype = "application/x-www-form-urlencoded o multipart/form-data": Tipo de
codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita
en los formularios que permiten adjuntar archivos). Por defecto el valor es application/xwww-form-urlencoded. En caso de querer enviar archivos adjuntos utilizaríamos <form
enctype="multipart/form-data">.
accept = "tipo_de_contenido": Define una lista separada por comas de tipos de contenido
que el script manejará correctamente. Se utiliza para filtrar archivos a enviar en el lado
60 www.luiscanada.com XHTML
cliente (por ejemplo, solo permitir la subida de archivos de imagen comprimidos, como JPG
y GIF). Ej: <form accept="image/gif, image/jpg">.
En la mayoría de ocasiones únicamente se utilizarán los atributos action y method.
method="post" o method="get" ¿cuál es mejor?
Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más
información que el método GET. En general, el método GET admite como máximo el envío
de unos 500 bytes de información. La otra gran limitación del método GET es que no permite
el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET
se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página),
mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.
61 www.luiscanada.com XHTML
Elementos de formulario
Los elementos de formulario como botones y cuadros de texto también se denominan
"campos de formulario" y "controles de formulario". La mayoría de controles se crean con la
etiqueta <input>. Para listas desplegables y áreas de texto se utilizarán las etiquetas
<select> y <textarea> respectivamente.
TODOS los controles de formulario se crearán con alguno de estos 3 tags:
1.- INPUT (se especificará qué tipo de elemento es mediante el atributo type)
2.- TEXTAREA
3.- SELECT
El atributo obligatorio para todos los controles: NAME
Independientemente del tag con el que se cree el formulario deberá definirse el atributo
name.
Es el atributo más importante en los campos del formulario. De hecho, si un campo no
incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el
atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de
este campo de formulario.
Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una
aplicación del servidor para que procese la información y genere una respuesta adecuada.
En el servidor, la aplicación que procesa los datos debe obtener en primer lugar toda la
información introducida por el usuario. Para ello, utiliza el valor del atributo name para
obtener los datos de cada control del formulario.
El valor del atributo name no debe contener caracteres problemáticos en programación
(espacios en blanco, acentos y caracteres como ñ o ç).
62 www.luiscanada.com Elemento y tipo
XHTML
Tabla de elementos de formulario (XHTML)
Orden de aparición
Ejemplo
input type="text"
1.- Etiqueta descriptiva
2.- Elemento HTML
Tu nombre<br />
<input type="text" name="txtNombre" />
input
type="password"
1.- Etiqueta descriptiva
2.- Elemento HTML
Código de usuario<br />
<input type="password" name="txtPassword" />
input
type="button"
Elemento HTML
<input type="button" name="disponibilidad"
value="Comprobar disponibilidad" />
input
type="submit"
Elemento HTML
<input type="submit" name="reservar" value="Reservar
vuelo" />
input type="radio"
1.- Elemento HTML
2.- Etiqueta descriptiva
<input type="radio" name="esta-casado" value="si" /> Sí,
casado<br />
<input type="radio" name="esta-casado" value="No" /> No,
soltero<br />
input
type="checkbox"
1.- Elemento HTML
2.- Etiqueta descriptiva
<input type="checkbox" name="suscripcion"
value="Suscribirse" /> Suscribirse al boletín de noticias
select
1.- Etiqueta descriptiva
2.- Elemento HTML
Aficiones<br />
<select name="aficiones-usuario">
...
...
</select>
textarea
1.- Etiqueta descriptiva
2.- Elemento HTML
Comentarios<br />
<textarea name="comentarios-usuario"></textarea>
button
Elemento HTML
<button name="boton-entrar">Click aquí!</button>
El tag <input>
Cuando se define este tag son obligatorios dos atributos:
Atributo "type": Según el valor que contenga se creará un tipo de control o otro. Las
posibilidades para este atributo son:
text | password | checkbox | radio | submit | reset | file | hidden | image | button
El tag input es un tag individual. Una vez definidos sus atributos deberá cerrarse:
<input type="tipo-de-input" name="nombre-unico" value="valor-por-defecto" />
Ejemplo:
<input type="password" name="password-usuario" value="" />
63 www.luiscanada.com XHTML
El tag <textarea>
Este tag definirá un cuadro de texto el cual puede contener gran cantidad de caracteres. Las
áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, pues
permiten múltiples líneas. Conceptualmente es como un <input type="text" ... /> pero con
más capacidad para almacenar información.
El tag <select>
Este tag definirá una lista desplegable. Estos controles permiten agrupar sus opciones (o
items) de forma que el usuario pueda encontrarlos fácilmente.
64 www.luiscanada.com XHTML
Campos de texto
Se distinguen 3 tipos de campos de texto en función de la longitud y de la seguridad que
necesite emplearse:
1.- Cuadro de texto (<input type="text" name="nombre-del-campo" value="valor por
defecto">)
2.- Cuadro texto de contraseña (<input type="password" name="nombre-del-campo">)
3.- Área de texto (<textarea name="nombre-del-campo" cols="XX" rows="XX"> Texto que
se incluirá por defecto </textarea>)
input type="text" | input type="password"
Los cuadros de texto son los elementos más utilizados en los formularios. Este campo puede
ser de "texto común" (type="text") o de contraseña ("type="password". El texto escrito por
el usuario es reemplazado por asteriscos).
Véase el siguiente ejemplo:
Nombre de usuario:
-
Contraseña:
El código es el siguiente:
<form action="script.php" method="post">
Nombre de usuario:<br />
<input type="text" name="usuario" value="-" /><br /><br />
Contraseña:<br />
<input type="password" name="contrasena" value="-" />
<input type="button" value="Entrar" />
</form>
65 www.luiscanada.com XHTML
Textarea
Por otra parte, las áreas de texto son útiles cuando se debe introducir una gran cantidad de
texto, pues es mucho más cómodo y permiten una extensión más larga que los campos de
texto comunes.
El atributo "cols" define el número de caracteres máximos que podrán escribirse en cada
fila mientras que "rows" especifica el número de filas del área de texto.
Véase el siguiente ejemplo:
Consulta:
Escribe aquí tu consulta...
El código es el siguiente:
<form action="script.php" method="post">
Consulta:<br />
<textarea name="consulta" cols="20" rows="3">Escribe aquí tu consulta...</textarea>
<input type="button" value="Enviar" />
</form>
PRACTICA: Codificar el formulario siguiente:
66 www.luiscanada.com XHTML
Listas desplegables
Las listas desplegables se definen con la etiqueta <select> y </select>. Cada uno de los
elementos que conformen la lista se definirán entre las etiquetas <option> y </option>.
Como se ha comentado en apartados anteriores, el tag select deberá definir
obligatoriamente el atributo name.
El tag <select> y el tag <option>
La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista.
Cada una de las opciones de la lista se define mediante una etiqueta <option>.
Conceptualmente funcionan como las listas, donde se definía el inicio y el fin (mediante
<ul></ul>, <ol></ol> o <dl><dl>) y todos sus items que contenía la lista con la etiqueta <li>.
El tag option deberá definir obligatoriamente el atributo value:
<option value="nombre-identificativo-del-atributo"... >. Este el dato que se enviará al
servidor cuando el usuario envíe el formulario. El valor de este atributo deberá ser único
para cada lista desplegable.
Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo
selected="selected" a la opción deseada.
Véase el siguiente ejemplo:
Sistema operativo:
Window s
El código es el siguiente:
<form action="script.php" method="post">
Sistema Operativo:<br />
<select name="programa">
<option value="Windows" selected="selected">Windows</option>
<option value="Machintosh">Mac</option>
<option value="Linux">Linux</option>
</select>
</form>
En caso de que el usuario seleccionara la opción Mac y enviara la información, los datos que
se enviarían al servidor serían programa=Machintosh. Estos datos se enviarán por el método
post.
67 www.luiscanada.com XHTML
PRÁCTICA: Codificar el siguiente formulario con todos los atributos obligatorios. Por
defecto la opción "Tecnología" será la que esté habilitada. El 'select' se identificará
como 'aficiones' dentro del formulario y el valor para cada una de las opciones será el
texto que contengan seguido del texto '001':
Casillas de verificación o CHECKBOX
Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario
seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran
varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por
este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones
relacionadas pero no excluyentes.
Puestos de trabajo buscados<br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico
<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado
El valor del atributo type para estos controles de formulario es checkbox. Como se muestra
en el ejemplo anterior, el texto que se encuentra al lado de cada checkbox no se puede
establecer mediante ningún atributo, por lo que es necesario añadirlo manualmente fuera
del control del formulario. Si no se añade un texto al lado de la etiqueta <input /> del
checkbox, el usuario sólo ve un pequeño cuadrado sin ninguna información relativa a la
finalidad de esa casilla.
68 www.luiscanada.com XHTML
El valor del atributo value, junto con el valor del atributo name, es la información que
llega al servidor cuando el usuario envía el formulario.
Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked. Si
el valor del atributo es checked, el checkbox se muestra seleccionado. En cualquier otro
caso, el checkbox permanece sin seleccionar. Aunque resulta redundante que el nombre y el
valor del atributo sean idénticos, es obligatorio indicarlo de esta forma porque los atributos
en XHTML no pueden tener valores vacíos.
<input type="checkbox" checked="checked"... /> Checkbox seleccionado por defecto
Botones de selección (radiobutton)
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero
presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se
utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones
relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente
se deselecciona la otra opción que estaba seleccionaba.
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer
El valor del atributo type para estos controles de formulario es "radio". El atributo name
se emplea para indicar los radiobutton que están relacionados.
Edad:
Género:
+18
-18
HOMBRE
MUJER
<form>
Edad:
<input type="radio" name="edad" value="mayor" /> +18
69 www.luiscanada.com XHTML
<input type="radio" name="edad" value="menor" /> -18
Género:
<input type="radio" name="genero" value="hombre" /> HOMBRE
<input type="radio" name="genero" value="mujer" /> MUJER
</form>
Por lo tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el
navegador sabe que están relacionados y puede deseleccionar una opción del grupo de
radiobutton cuando se seleccione otra opción.
Botones de formulario
Enviar los datos (type = "submit")
La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos
por el usuario:.
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador se
encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de
botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el
atributo value, el navegador muestra un texto predefinido.
Resetear los datos (type="reset")
Aunque su uso era muy popular hace unos años, la mayoría de formularios modernos ya no
utilizan este tipo de botón. Se trata de un botón especial que borra todos los datos
introducidos por el usuario y devuelve el formulario a su estado original:
<input type="reset" name="limpiar" value="Borrar datos del formulario" />
70 www.luiscanada.com XHTML
El valor del atributo type para este control de formulario es reset. Cuando el usuario pulsa
este botón, el navegador borra toda la información introducida y muestra el formulario en su
estado original. Si el formulario no contenía originalmente ningún valor, el botón de reset lo
vuelve a mostrar vacío. si el formulario contenía información, el botón reset vuelve a
mostrar la misma información original.
Como es habitual en los botones de formulario, el atributo value permite establecer el texto
que muestra el botón. Si no es utiliza este atributo, el navegador muestra el texto
predefinido del botón, que en este caso es Restablecer.
Botones con comportamientos especiales
(type="button")
Algunos formularios complejos necesitan botones más avanzados que los de enviar datos
(type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar
HTML/XHTML define un botón de tipo genérico:
El valor del atributo type para este control de formulario es button. Al pulsar este botón no
se envían los datos al servidor ni se borran los datos introducidos.
Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación
JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden
programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos.
Ficheros adjuntos
Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde
el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número,
tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden
restricciones por motivos de seguridad.
Fichero adjunto
<input type="file" name="adjunto" />
El valor del atributo type para este control de formulario es file. El navegador se encarga de
mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón
que permite navegar por los directorios y archivos del ordenador del usuario.
Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype con
valor multipart/form-data en la etiqueta <form> del formulario:
71 www.luiscanada.com XHTML
<form action="..." method="post" enctype="multipart/form-data">
...
</form>
PRÁCTICA: Codificar el siguiente formulario siguiendo las pautas que se exponen:
1.- Elegir el método más adecuado para el formulario (GET o POST) y cualquier otro
atributo necesario.
2.- La aplicación que se encarga de procesar el formulario se encuentra en la raíz del
servidor, carpeta "php" y archivo "insertar_cv.php".
3.- El nombre puede tener 30 caracteres como máximo, los apellidos 80 caracteres y la
contraseña 10 caracteres como máximo.
4.- Asignar los atributos adecuados al campo del DNI.
5.- Por defecto, debe estar marcada la casilla de suscripción al boletín de novedades.
72 www.luiscanada.com XHTML
Campos ocultos
Los campos ocultos se emplean para añadir información oculta en el formulario:
<input type="hidden" name="url_previa" value="/articulo/primero.html" />
El valor del atributo type para este control de formulario es hidden. Los campos ocultos no
se muestran por pantalla, de forma que el usuario desconoce que el formulario los incluye.
Se utilizan para incluir información que necesita el servidor pero que no es necesario o no es
posible que la establezca el usuario.
Dando estilo a los formularios
Utilizando solamente las etiquetas <form> y <input> es posible diseñar la mayoría de
formularios de las aplicaciones web. No obstante, HTML define algunos elementos
adicionales para mejorar la estructura de los formularios creados. Para ello utilizaremos las
etiquetas dobles <fieldset>, <legend> y <label>.
La siguiente imagen muestra un formulario que agrupa sus elementos y añade etiquetas a
cada campo para mejorar su estructura:
73 www.luiscanada.com XHTML
La etiqueta <fieldset> agrupa campos del formulario y la etiqueta <legend> asigna un
nombre a cada grupo.
A continuación se muestra el código HTML del formulario correspondiente a la imagen
anterior y que hace uso de <fieldset> y <legend> para agrupar los campos del formulario:
<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" name="dni" value="" size="10" maxlength="9" />
</fieldset>
<fieldset>
<legend>Datos de conexión</legend>
Nombre de usuario<br/>
<input type="text" name="nombre" value="" maxlength="10" />
<br/>
Contraseña<br/>
<input type="password" name="password" value="" maxlength="10" />
<br/>
Repite la contraseña<br/>
74 www.luiscanada.com XHTML
<input type="password" name="password2" value="" maxlength="10" />
</fieldset>
</form>
La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El
navegador muestra por defecto un borde resaltado para cada agrupación. La etiqueta
<legend> se incluye dentro de cada etiqueta <fieldset> y establece el título que muestra el
navegador para cada agrupación de elementos.
Por otra parte, todos los controles de formulario salvo los botones presentan una carencia
muy importante: no disponen de la opción de establecer el título o texto que se muestra
junto al control. En el código HTML del ejemplo anterior, el nombre de cada campo se
incluye en forma de texto normal, sin ninguna relación con el campo al que hace referencia.
HTML incluye una etiqueta denominada <label> y que se utiliza para establecer el título de
cada campo del formulario. El único atributo que suele utilizarse con la etiqueta <label> es
"for", que indica el identificador (atributo id) del campo de formulario para el que esta
etiqueta hace de título.
El código que teníamos en el ejemplo anterior era como el siguiente:
Nombre <br/>
<input type="text" name="nombre" value="" />
Apellidos <br/>
<input type="text" name="apellidos" value="" />
DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
Utilizando la etiqueta <label>, cada campo de formulario puede disponer de su propio
título:
<label for="nombre">Nombre</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
<label for="apellidos">Apellidos</label> <br/>
<input type="text" id="apellidos" name="apellidos" value="" />
<label for="dni">DNI</label> <br/>
<input type="text" id="dni" name="dni" value="" size="10" maxlength="9" />
La principal ventaja de utilizar <label> es que el código HTML está mejor estructurado y se
mejora su accesibilidad.
75 www.luiscanada.com XHTML
Además, al pinchar sobre el texto del <label>, el puntero del ratón se posiciona
automáticamente para poder escribir sobre el campo de formulario asociado. Este
comportamiento es especialmente útil para los campos de tipo radiobutton y checkbox.
PRÁCTICA: Determinar el código HTML necesario para crear el formulario que se
muestra en la siguiente imagen:
76 www.luiscanada.com XHTML
Metainformación
Las páginas y documentos HTML incluyen más información de la que los usuarios ven en sus
pantallas. Estos datos adicionales siempre están relacionados con la propia página, por lo
que se denominan metainformación o metadatos.
La metainformación siempre se incluye en la sección de la cabecera, es decir, dentro de la
etiqueta <head>.
Aunque la metainformación más conocida y utilizada es el título de la propia página, se
puede incluir mucha otra información útil para los navegadores y para los buscadores.
Estructura de la cabecera
Como se explicó anteriormente, las páginas XHTML se dividen en dos partes denominadas
cabecera y cuerpo. La sección de la cabecera está formada por todas las etiquetas
encerradas por la etiqueta <head>:
La cabecera típica de una página HTML completa presenta la siguiente estructura:
<head>
<!-- Zona de etiquetas META -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Zona de título -->
<title>El título del documento</title>
<!-- Zona de recursos enlazados (CSS, RSS, JavaScript) -->
<link rel="stylesheet" href="#" type="text/css" media="screen" />
<link rel="stylesheet" href="#" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="#" />
<script src="#" type="text/javascript"></script>
</head>
El valor de <title> no sólo es importante para los usuarios, sino que también es importante
para que los usuarios encuentren las páginas a través de los buscadores.
Un error común de muchos sitios web consiste en mostrar un mismo título genérico en todas
sus páginas. Cada página debe mostrar un título corto, adecuado, único y que describa
inequívocamente los contenidos de la página.
77 www.luiscanada.com XHTML
Metadatos
Una de las partes más importantes de la metainformación de la página son los metadatos,
que permiten incluir cualquier información relevante sobre la propia página.
La especificación oficial de HTML no define la lista de metadatos que se pueden incluir, por
lo que las páginas tienen libertad absoluta para definir los metadatos que consideren
adecuados. La etiqueta empleada para la definición de los metadatos es <meta>.
Atributos específicos
1.- name = "texto": El nombre de la propiedad que se define (no existe una lista oficial de
propiedades)
2.- content = "texto": El valor de la propiedad definida (no existe una lista de valores
permitidos)
3.- http-equiv = "texto": En ocasiones, reemplaza al atributo “name” y lo emplean los
servidores para adaptar sus respuestas al documento
4.- scheme = "texto": Indica el esquema que se debe emplear para interpretar el valor de la
propiedad
Los metadatos habituales utilizan solamente los atributos name y content para definir el
nombre y el valor del metadato:
<meta name="autor" content="Juan Pérez" />
No obstante, algunas etiquetas <meta> muy utilizadas hacen uso del atributo http-equiv.
Este atributo se utiliza para indicar que el valor establecido por este metadato puede ser
utilizado por el servidor al entregar la página al navegador del usuario. El siguiente
metadato indica al servidor que el contenido de la página es código HTML y su codificación
de caracteres es UTF-8:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Aunque no existe una lista oficial con los metadatos que se pueden definir, algunos de ellos
se utilizan en tantas páginas que se han convertido prácticamente en un estándar. A
continuación se muestran los metadatos más utilizados:
78 www.luiscanada.com XHTML
Definir el autor del documento:
<meta name="author" content="Juan Pérez" />
Definir el programa con el que se ha creado el documento:
<meta name="generator" content="WordPress 2.8.4" />
Definir la codificación de caracteres del documento:
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8"
/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Definir el copyright del documento:
<meta name="copyright" content="librosweb.es" />
Definir el comportamiento de los buscadores:
<meta name="robots" content="index, follow" />
Definir las palabras clave que definen el contenido del documento:
<meta name="keywords" content="diseño, css, hojas de estilos, web, html" />
Definir una breve descripción del sitio:
<meta name="description"
accesibilidad" />
content="Artículos
sobre
diseño
web,
usabilidad
y
La etiqueta que define la codificación de los caracteres (http-equiv="Content-Type") se
emplea prácticamente en todas las páginas y las etiquetas que definen la descripción
(description) y las palabras clave (keywords) también son muy utilizadas.
79 www.luiscanada.com XHTML
Doctype
El estándar XHTML deriva de XML, por lo que comparte con él muchas de sus normas y
sintaxis. Uno de los conceptos fundamentales de XML es la utilización del DTD o Document
Type Definition ("Definición del Tipo de Documento").
Un DTD es un documento que recoge el conjunto de normas y restricciones que deben
cumplir los documentos de un determinado tipo. Si, por ejemplo, se define un DTD para los
documentos relacionados con libros, se puede fijar como norma que cada libro tenga un
título y sólo uno, que tenga uno o más autores, que la información sobre el número de
páginas pueda ser opcional, etc.
El conjunto de normas, obligaciones y restricciones que se deben seguir al crear un
documento de un determinado tipo, se recogen en su correspondiente DTD. El estándar
XHTML define el DTD que deben seguir las páginas y documentos XHTML. En este documento
se definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de
valores que puede tener cada atributo.
En realidad, la versión 1.0 del estándar de XHTML define tres DTD diferentes. Para indicar el
DTD utilizado al crear una determinada página, se emplea una etiqueta especial llamada
doctype. La etiqueta doctype es el único elemento que se incluye fuera de la etiqueta
<html> de la página. De hecho, la declaración del doctype es lo primero que se debe incluir
en una página web, antes incluso que la etiqueta <html>.
Para que una página XHTML sea correcta y válida es imprescindible que incluya el
correspondiente doctype que indica el DTD utilizado. A continuación se muestran los tres
DTD que se pueden utilizar al crear páginas XHTML:
XHTML 1.0 Estricto
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1.0
Strict//EN"
Se trata de la variante con las normas más estrictas y las restricciones más severas. Las
páginas web que incluyan este doctype, no pueden utilizar atributos relacionados con el
aspecto de los contenidos, por lo que requiere una separación total de código HTML y estilos
CSS.
XHTML 1.0 Transitorio
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.0
Transitional//EN"
Se trata de una variante menos estricta que la anterior, ya que permite el uso de algunos
atributos HTML relacionados con el aspecto de los elementos.
80 www.luiscanada.com XHTML
XHTML 1.0 Frameset
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1.0
Frameset//EN"
Esta última variante la utilizan las páginas que están formadas por frames, una práctica
completamente desaconsejada y que hoy en día sólo utilizan los sitios web obsoletos.
Si no se tiene claro el DTD a utilizar, debería utilizarse el XHTML 1.0 transitorio, ya que es
más fácil crear páginas web válidas. Si tienes conocimientos avanzados de XHTML, puedes
utilizar XHTML 1.0 estricto.
Por otra parte, además del DOCTYPE apropiado, también es necesario que las páginas web
indiquen el namespace asociado. Un namespace en un documento XML permite diferenciar
las etiquetas y atributos que pertenecen a cada lenguaje.
Si en un mismo documento se mezclan etiquetas de dos o más lenguajes derivados de XML
(XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podría determinar a qué
lenguaje pertenece cada etiqueta y por tanto, no se podría interpretar esa etiqueta o ese
atributo. Los namespaces se indican mediante una URL.
El namespace que utilizan todas las páginas XHTML (independientemente de la versión y del
DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
De esta forma, es habitual que las páginas XHTML comiencen con el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
Aunque el código anterior es mucho más complicado que una simple etiqueta <html>, es
imprescindible para que las páginas XHTML creadas sean correctas y superen
satisfactoriamente el proceso de validación.
Si se utiliza un editor avanzado como Dreamweaver para crear las páginas, todo el código
anterior se incluye de forma automática. Si se crea la páginas "a mano", deberá copiar y
pegarse ese código en cada nueva página.
81 www.luiscanada.com XHTML
HTML
URLs
Una URL (Uniform Resource Locator) identifica un documento (HTML o no) en la red.
Comprendiendo las URLs
Toda URL está compuesta por varias partes:
1.- Protocolo mediante el cuál se accede al documento (http, ftp...).
2.- Nombre del dominio.
3.- Nombre de la carpeta del servidor en que está el documento.
4.- Nombre del documento.
http://www.luiscanada.com/manualHTML/url.php
Protocolo: http
Dominio: luiscanada.com
Carpeta: manualHTML
Nombre del documento: url.php
No todas las partes tienen por qué estar presentes. Si el archivo se encuentra en la raíz, por
ejemplo, no existirá la carpeta. Veamos el ejemplo:
http://www.luiscanada.com/pagina.html
82 www.luiscanada.com XHTML
Alojamiento Web o webhosting
El alojamiento web es un servicio que permite almacenar nuestras páginas web, imágenes y
videos y poder compartirlos en la red.
Tipos de alojamiento
Existen 6 tipos de alojamiento distinto:
1.- Servidores gratuitos: muy limitados / agregan publicidad. (Ejemplo)
2.- Servidores compartidos: varios clientes bajo un mismo servidor. Ideal para pequeños y
medianos clientes (más info).
3.- Resellers (o revendedores): Para aquellos que ofrecen el servicio de hosting a otros.
(Concepto similar al franquiciado) (más info).
4.- Servidores virtuales: Una máquina física se divide en N particiones independientes,
simulando así N máquinas (más info).
5.- Servidores dedicados: El cliente compra o alquila un ordenador completo, al que tiene
control completo (más info).
6.- Housing: Espacio físico que se vende en un Centro de Datos para albergar allí el propio
servidor (más info).
83 www.luiscanada.com XHTML
Ejercicios varios
PRÁCTICA 1: Crea una página cuyo resultado sea como el siguiente:
PRÁCTICA 2: Crear una página que contenga 5 imágenes que enlacen a una web
diferente. La nueva página deberá abrirse en una nueva ventana y deberá
especificarse un texto alternativo. Además, deberá mostrarse un mensaje emergente
cuando se pase el mouse por encima de cada una de ellas.
84 www.luiscanada.com XHTML
PRÁCTICA 3: Crear una lista como la del siguiente ejemplo:
85 www.luiscanada.com XHTML
PRÁCTICA 4: Codificar la siguiente tabla:
PRÁCTICA 5: Codificar la siguiente tabla:
86 www.luiscanada.com XHTML
PRÁCTICA 6: Codificar la siguiente tabla. Descargar las imágenes desde aquí:
PRÁCTICA 7: Codificar la siguiente tabla. Descargar las imágenes desde aquí:
87