elaboración de documentos web mediante lenguajes de marcas

Elaboración de documentos web

mediante lenguajes de marcas.

Programación web en el entorno cliente.

29/09/2017 José Miguel Castillo Castillo

ELABORACIÓN DE DOCUMENTOS WEB MEDIANTE LENGUAJES DE MARCAS

1

ÍNDICE DE CONTENIDO. ELABORACIÓN DE DOCUMENTOS WEB MEDIANTE LENGUAJES DE MARCAS 1. DISEÑO WEB 1.1 Principios de diseño web 1.2 El proceso de diseño web 2. LENGUAJES DE MARCADO GENERALES 2.1 Origen de los lenguajes de marcado generales - SGML y XML 2.2 Características generales de los lenguajes de marcado 2.3 Estructura general de un documento con lenguaje de marcado 2.4 Documentos válidos y bien formados 3. LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB 3.1 Historia de HTML y XHTML 3.2 Estructura de un documento 3.3 Color 3.4 Texto 3.5 Enlaces de hipertexto 3.6 Imágenes 3.7 Listas 3.8 Tablas 3.9 Marcos 3.10 Formularios 3.11 Elementos específicos para tecnologías móviles 3.12 Elementos en desuso 4. HOJAS DE ESTILO WEB 4.1 Tipos de hojas de estilo - estáticas y dinámicas 4.2 Elementos y estructura de una hoja de estilo 4.3 Diseño de estilos para diferentes dispositivos 4.4 Buenas prácticas en el uso de hojas de estilo


2

1. DISEÑO WEB

El diseño web consiste en aplicar una serie de técnicas destinadas a crear un sitio web útil y atractivo a la vez. Según muchos autores sólo un bajo porcentaje de las páginas existentes tienen un buen diseño, siguiendo fielmente los principios básicos del diseño web.

El diseño web utiliza técnicas que se basan, como es normal, en el diseño en general, y en una serie de reglas más o menos definidas que sirven para crear entornos que resulten accesible y atractivo simultáneamente.

1.1. Principios de diseño web

El diseño web tiene dos partes bien diferenciadas: la funcionalidad o usabilidad y la estética. No debemos prescindir de ninguna puesto que una página funcional pero con mala estética no atraerá la atención de posibles usuarios o visitantes y lo contrario, una página muy atractiva visualmente pero que funcione mal hará que los visitantes no al no encontrar lo que necesitan o haberles supuesto demasiado esfuerzo el navegar por ella.

Resumiendo los principales estudios sobre la materia se han concretado una serie de principios que permiten establecer unos mínimos básicos en el diseño, los llamados principios de diseño web:

Contraste. Consiste en exponer de forma visual y evidente dos elementos contrapuestos para enfocar la atención del usuario sobre los elementos más importantes de la página. Estos contrastes pueden ser elementos grandes con otros más pequeños, texturas o fondos diferentes, etc.

El balance es el equilibrio que debe existir entre los diferentes elementos que componen una página. Entran en juego tanto las imágenes como el texto, los elementos grandes y pequeños, las zonas oscuras y claras, etc.

La idea de proximidad es un concepto que hace referencia a la distancia que mantienen los elementos relacionados para dar diferentes sensaciones visuales.

Con el énfasis podremos destacar un elemento que se encuentra dentro de otro y por tanto en principio pudiera pasar desapercibido.

El ritmo (también llamado repetición) es una forma de establecer patrones con los que se ordenan los elementos de la página. Este punto es clave para mantener la usabilidad del sitio ya que ofrece ayuda visual en la búsqueda de contenidos.

Diseño orientado al usuario

El resultado de un diseño web puede ser novedoso y atractivo para un grupo de diseñadores, pero puede ser realmente inútil para el usuario medio, por su complicada navegación y sin disponer de las ayudas habituales que les permitan obtener información específica. Algunos casos de web simples y básicas en la estructura logran tener un éxito total en la web, sencillamente porque ofrecen fácilmente lo que los usuarios busca, y no se enredan en extrañas formas de navegación asociadas a la tendencia del momento.

NOTA: Los intereses del público objetivo siempre deben ser lo primero en la elección del estilo del sitio


3

No debemos, naturalmente, evitar crear un diseño elegante y moderno, siempre que conserve los mínimos de usabilidad. Así, estaremos más cerca del éxito, sin duda.

Por ejemplo, el diseño y el estilo se deben centrar en destacar la herramienta de búsqueda, en lugar de añadir elementos flash al diseño como elementos centrales de la estructura del sitio.

Partiendo de la idea de crear un sitio web orientado al usuario como hilo argumental del mismo, podríamos concretar que el objetivo clave de cualquier sitio es proporcionar información, y hacerlo de una manera eficiente y fácil de acceder. Los usuarios deben tener todo lo que necesitan a su alcance sin necesidad de navegar por toda la web para localizar lo que buscan.

Por ejemplo, centrarse en crear una navegación eficaz para ofrecer el contenido de forma limpia y organizada.

Por tanto, necesitaremos un equilibrio entre la apariencia y la funcionalidad y siempre destacando la imagen de la marca que representa, es decir, el diseño debe tener en cuenta la imagen corporativa asegurando así una coherencia con la estrategia global de comunicación de la empresa.

Por lo tanto, podemos también concretar que los malos sitios web tienden a dar más importancia a los aspectos puramente visuales antes que a los funcionales.

Por ejemplo, si una página web utiliza muchas animaciones pueden distraer la atención de lo que es realmente importante y convertirlo en un sitio donde es difícil acceder a la información. En el diseño de estas páginas web no se ha pensado en la navegación, ni en el usuario final, y habitualmente hay problemas para acceder a estos sitios desde móviles y otros dispositivos.

La mayoría de las páginas que relegan al usuario a un segundo término olvidan el tema de la velocidad de descarga. Un sitio web debe permitir la carga de los elementos e información lo más rápidamente posible, de otra manera, muchos visitantes abandonarán el sitio antes de conocer sus contenidos. Es necesario tener un sitio sencillo, sin demasiados elementos que pueden afectar a la velocidad de carga.

Ejemplo de aviso por parte de Google que una web tiene una descarga lenta,


4

El diseño web orientado al usuario es conocido en muchos ámbitos como el diseño web orientado a la experiencia de usuario. Algunas de los elementos prácticos que lo caracterizan son:

Menús de navegación intuitivos, fáciles y accesibles. Si es posible que no superen los tres sub-niveles.

Por ejemplo, menús sencillos y desplegables,

Por ejemplo, LBVD en donde la navegación web consiste simplemente en hacer clic sobre el texto en negrita que se muestra por toda la página. Cada vez que se hace esto, una ventana con información e imágenes aparece en pantalla.

Elimina todos los elementos innecesarios, cuanto más simple sea el diseño más posibilidades de éxito tiene.

Ejemplo de diseño limpio,


5

No agobie al usuario llenando todos los espacios. Juegue con los espacios en blanco.

Ejemplo de distribución de contenidos haciendo uso de los espacios en blanco

Imagine que cada sitio web tiene una estructura de navegación distinta, nos volveríamos locos buscando dónde está el menú, dónde el pie o dónde la cabecera.

Buscador interno. Hay que fomentar su uso, ya que muchos visitantes no desean navegar por el sitio web si no que quieren ir directamente a por lo que han entrado. Es muy interesante analizar las búsquedas internas para tomar decisiones en futuras revisiones de la web.

Ejemplos de buscadores internos dentro de las webs


6

Olvídese de las grandes cabeceras suele ser más productivo crear slides o diapositivas con uno o dos botones que llamen a la acción principal o un sencillo formulario (con frases del tipo: apuntarse al boletín, descargarse un pdf, probar un tiempo, comprar con descuento, nueva colección, últimos días para…). Pensando en lograr objetivos.

Ejemplo de diseño usando slides o diapositivas que van variando mostrando diferentes imágenes sobre las que se puede hacer clic,

Establezca una jerarquía en los contenidos, es decir, establezca titulares, subtitulares y cuerpo.

No obligue a los usuarios a registrarse desde el principio. Permita que navegue por el sitio sin tener que hacerlo.

Simplifique los procesos, especialmente en los formularios y en el uso de los carritos de la compra.


7

Por ejemplo, intente que todo el formulario esté en la misma página y no obligue al visitante a escribir datos innecesarios. Se pueden ofrecer botones de borrado y, si tiene que volver hacia atrás permita conservar lo escrito.

Busque la calidad en los contenidos, es decir, procure que sean concisos, útiles y sin faltas de ortografía. Evite los textos copiados de otros sitios webs.

Utilice frases cortas y rápidas para ello el diseño ofrece para llamar la atención herramientas como viñetas y elementos visuales.

Es fundamental romper la monotonía para atrapar al visitante.

Por ejemplo destaque bien grande las palabras que quiera que vean primero (GRATIS, REGALO, SE LO ENVIAMOS HOY,…), utilizando negritas y colores para subtitulares. Hay que dirigir el escaneo visual donde se desee.

No escriba textos largos. No lo van a leer. Recuerde que el usuario no lee, escanea en busca de algo.

Facilite siempre la ubicación donde se encuentra dentro del sitio. Permita que el visitante pueda utilizar el botón back (volver), agregue migas de pan o breadcrumb, que es una técnica que va poniendo el camino por donde hemos pasado para llegar al sitio actual, con enlaces para volver a cada etapa cuando deseemos.

Ejemplos de miguitas de pan,

Destaque los dos o tres objetivos principales y llame a la acción. Informe sobre las importante, no dejes que tengan que buscarlas

Evite el uso de pop ups, nuevas ventanas, publicidad invasiva, etc. Estas formas de intromisión no esperada no gustan a los visitantes.


8

Por ejemplo,

Practique el feedback.

Ejemplo: ¿Y si le pregunta al visitante como cómo le ha ido en la web? Si contesta, la información que va a recibir puede considerarse como un regalo.

Pruebe el diseño, pueden hacerlo compañeros suyos que no lo hayan visto desde el principio, pueden ser incluso amigos o familiares, pídeles que hagan lo que quieres que se haga en el sitio y… observe lo que hacen, apúntelo todo sobretodo dificultades encontradas.

Diseño orientado a objetivos.

Una web centrada en objetivos es aquella cuyo análisis, diseño, contenidos y mantenimiento están dirigidos a lograr unos resultados concretos.

Existe una premisa inicial que guía las acciones en estos sitios web: la rentabilidad. La web forma parte del entramado de toda empresa, hay que obtener unos beneficios ya sea directa o indirectamente.


9

Los beneficios de la orientación a objetivos son:

Tendremos mucho más claro qué tipo de web queremos.

Sabremos a quién nos dirigimos (segmentación).

Los desarrolladores tendrán un marco claro de actuación.

El sitio web ganará en coherencia.

Dispondremos de indicadores del éxito de la web.

Diseño orientado a la implementación.

En el desarrollo del sitio es muy recomendable utilizar estándares conocidos (HTML, XHTML, HTML5) para asegurar la futura compatibilidad y la escalabilidad del sitio. Esto se debe a que, aunque es tentador utilizar tecnologías propietarias, el panorama tecnológico y comercial puede hacerlas desaparecer o cambiar en poco tiempo.

Por el mismo motivo, es recomendable separar en la implementación contenido de estilo, mediante el uso de hojas de estilo (CSS) del lado del cliente y uso de bases de datos del lado del servidor. El hacerlo así facilitará tanto el rediseño del sitio como la posibilidad de adaptación dinámica del diseño a las necesidades de acceso de cada tipo de usuario.

Ejemplo de diseño de cajas con css en el se desglosa el formato aplicado a un elemento,

Es muy interesante aplicar controles de calidad de la implementación, por suerte cada vez es más habitual, supervisando que todo funcione cómo había sido planificado, ya que la usabilidad del sitio depende directamente de la funcionalidad.

Se pueden utilizar validadores automáticos de código como los proporcionados por el W3C (http://www.w3c.org), así como validadores para testar de forma semi-automática el cumplimiento de directrices de accesibilidad en el código, como el Test de Accesibilidad Web ( http://www.tawdis.net ).

http://www.w3c.org/

http://www.tawdis.net/


10

1.2. El proceso de diseño web

Estructura de un sitio web y navegabilidad.

La estructura de un sitio es la base de todo el desarrollo posterior. Una buena estructura permitirá al lector visualizar todos los contenidos de una manera sencilla, mientras que una mala distribución inicial dejará al visitante la sensación constante de estar perdido.

Antes de crear un conjunto de páginas web hay que tener una idea clara de cómo va a ser la estructura de dichas páginas. Podemos partir de un esquema o boceto en papel que podremos pasar a digital con alguna aplicación gráfica de diseño o planificación para recoger más aspectos y versatilidades.

Hay que tener en cuenta que tipo de información albergará la web pues no es lo mismo crear una estructura de navegación para un sitio que desea publicar información siguiendo el esquema de un libro que un sitio donde se expone un tutorial o una página web de catálogos y productos para vender.

Habitualmente tendremos que decantarnos por una estructura jerárquica, lineal o una combinación de ambas.

La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la página de bienvenida (ya en desuso) y que actualmente es la página índice o home donde se vuelca lo fundamental de la misma y los enlaces en menús a las secciones. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.


11

Este tipo de organización permite de forma esquemática conocer en qué lugar de la estructura se encuentra.

La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior

Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.

Este tipo de estructura sería válido para tutorías de aprendizaje o tours de visita guiada.

Lineal con jerarquía. Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si lo se desea.

Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro.

Hay que tener en cuenta que no podemos liar al visitante y debemos dejar claro las formas de movilidad y posibilidades de acceso en cada situación.

Red. La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente.


12

Ejemplo de estructura web en red, la Wikipedia,

Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar.

Se suele asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad.

Podríamos definir la navegabilidad de un sitio web como aquellas características de la interactividad del sitio que permiten la movilidad del usuario junto con la identificación de las diferentes secciones y contenidos de una forma sencilla y efectiva.

NOTA: La buena navegabilidad de un sitio, es en la mayoría de los casos uno de los factores clave en el éxito de una web.

Estructura y composición de páginas.

Cuando se habla de estructura se habla de organización interna, de cómo están repartidos los contenidos, de agrupación en niveles de importancia, en secciones y apartados. Todo ello siguiendo una línea argumental que permita un equilibrio entre diseño y navegabilidad.

Una estructura bien definida debería facilitar que los visitantes puedan encontrar rápidamente lo que buscan sin tener que dar vueltas ni acceder a páginas que no son de su interés.

El usuario del sitio debe saber en todo momento en que lugar del sitio web se Es por ello que una de las técnicas más utilizadas para mejorar la localización de un usuario es indicar en qué lugar de la estructura se encuentra en cada instante.

Se debe cuidar el estilo durante todas las páginas web, de manera que el resultado quede homogéneo. Esto facilitará la navegación del usuario y dará personalidad al conjunto.

El siguiente esquema muestra los distintos factores y elementos de trabajo que componen el diseño web. Todos encaminados a la composición idónea de un sitio web.


13

Una composición homogénea se logra a través de un color de fondo, un fondo gráfico, uso de tamaño, color y tipo de letra, gráficos, iconos, etc. Y un buen uso de estos elementos contribuirá al éxito de la página web.

Los principales componentes de la página web típica:

Texto. Los usuarios al encontrarse ante las pantallas de los dispositivos tienden a minimizar el número de palabras que realmente leen por lo que la comprensión y retención se reduce, según los últimos estudios, aproximadamente a un 50%. No olvidemos por otro lado que la web es un medio interactivo y los usuarios tienden a navegar más que a leer.

Una buena disposición de textos en una página web vendría marcada por las siguientes consideraciones:

Un titular que describa de forma clara el tema tratado.

Un pequeño resumen de la información ofrecida.

Una serie de palabras clave destacadas (en forma de vínculos, utilizando variables tipográficas o cambios de color).

Segmentación de los contenidos en unidades más pequeñas, reforzadas con índices y listas con items.

Subtítulos significativos, útiles.

Una idea por párrafo.

La mitad o menos de palabras que las que normalmente se utilizan en textos impresos.

Gráficos. En Internet los tres formatos de imagen que más se utilizan para en el diseño de páginas web son: .jpg, .png y .gif.

Las características principales de los 3 formatos de imagen son:

- JPG (o JPEG, Joint Photographic Experts Group): Formato con muy buen rendimiento en fotografías o/y ilustraciones complejas; por tanto, es un formato utilizado para compartir imágenes con tonos continuos en la web.

Este formato da soporte a los modelos más usuales de color como son CMYK (cyan-magenta-yellow-cyan) y RGB (red-green-blue), incluso para modelos en escala de grises, lo que amplía mucho la gama de tonalidades que se pueden obtener.

En la siguiente imagen puede comprobarse las diferencias en el color entre el modelo RGB (izquierda) y el modelo CMYK (derecha).


14

El formato JPEG comprime el tamaño del archivo final utilizando un algoritmo de compresión con pérdida. Es decir, que para representar cierta cantidad de información (en este caso de color) se utiliza una menor cantidad de dicha información. Por eso se dice que es un formato comprimido.

En los programas de edición de imágenes digitales, al retocarlas o guardarlas se puede especificar qué nivel de compresión aplicamos y qué pérdida de calidad se desea para cada archivo.

Si se aplica la opción de máxima compresión, la imagen resultante será difícil de reconocer, pero existen configuraciones que reducen el tamaño final del archivo pero producen una imagen relativamente buena. Ahí está la clave.

- GIF (Graphics Interchange Format): Muy práctico para los dibujos e imágenes sencillas, especialmente si tienen pocos matices. GIF no es el formato adecuado para guardar fotografías que queremos tengan gran calidad.

Los expertos concretan que este formato es ideal para imágenes que tengan grandes bloques de colores planos como ilustraciones simples o logotipos. Además, tiene la capacidad de conservar la transparencia.

El formato GIF trabaja con el algoritmo de compresión LZW, y por tanto, los fabricantes de software que utilizan imágenes GIF deben pagar a la propietaria los derechos que es Unisys. Quizás sea esta una de las razones del aumento de la popularidad del formato PNG.

- PNG (Portable Network Graphics): Formato libre de derechos, que intenta reunir características de los anteriores dos formatos. Se le considera válido para todo tipo de imagen y de transparencias. Está basado en el formato GIF.

Los navegadores más antiguos pueden dar problemas con este formato que está preparado para soportar imágenes RGB, escalas de grises y mapa de bits.

NOTA: PNG, a diferencia de las imágenes GIF, trabaja la transparencia “sin asperezas en los bordes” como concreta al definir el formato Luis Eduardo Barrueto.

- Formularios. Son una combinación de texto y en ocasiones gráficos que permiten enviar información por parte del visitante. Existen diferentes modelos de formulario; algunos simplemente se envían por correo electrónico; otros funcionan ejecutando un programa guión en el servidor.

Por ejemplo, para consultar un catálogo, solicitar más información, opinar sobre un producto, votar en una encuesta, etc.

Un ejemplo de entrada a un sistema interno para acceder a servicios en línea,


15

En este caso un ejemplo de búsqueda de libros en una base de datos,

- Javascript. Es un tipo de lenguaje de programación que se interpreta y ejecuta por parte del navegador e muy utilizado para diferentes efectos visuales y control de campos en formularios. Con la implantación de HTML5 muchas cuestiones que hasta ahora no se podían hacer de otra forma que con Javascript se pueden hacer desde este nuevo estándar.

Por ejemplo, para dar efectos de cambio de imagen al pasar el ratón por encima o controlar que se ha escrito un campo de formulario siguiendo un patrón concreto.

- Java. El código Java está también escrito en un lenguaje de programación independiente de plataforma (válido para cualquier tipo de ordenador) que también permite diferentes efectos e interactividad.

- Shockwave/Flash. Interesantes imágenes fijas o animaciones interactivas de tipo vectorial, extremadamente compactas. Es preciso un plugin para poder verlas en el navegador.


16

Compatibilidad con navegadores.

Cuando hablamos de compatibilidad en los navegadores nos referimos a que las páginas webs se muestren de forma muy similar en todos los navegadores y cumpliendo unos estándares o normas comunes.

Aunque los navegadores cada vez cumplen más y mejor los estándares que marca la W3C sigue habiendo diferencias palpables como reglas que no son soportadas o diferentes interpretaciones de una especificación.

En el plano práctico se traduce en que las páginas web no siempre se ven igual en diferentes navegadores e incluso entre versiones del mismo navegador.

Como el número de navegadores que existen es muy grande, se habla de compatibilidad entre navegadores cuando la página web se ve casi igual en los más usados: Mozilla Firefox, Opera, Chrome, Internet Explorer y Safari.

Con esos navegadores se tiene cubierto al 99% de los usuarios.

Estas diferencias entre los navegadores pueden darse en cualquiera de los estándares que utilizan: CSS, DOM (Javascript) y en menor medida, en HTML.

Para lograr la compatibilidad entre navegadores, lo que se suele hacer es desarrollar cumpliendo los estándares, de forma que cualquier navegador actual o futuro que cumpla estos mostrará bien la página web, y luego aplicar trucos o hacks específicos para arreglar lo que se ve mal en cada navegador. Este sistema también tiene detractores con una idea que va extendiéndose con el tiempo que fomenta que se debe desarrollar un único código y de esta forma dar fuerza a los estándares.

Dice J. Clarck que el cumplimiento de los estándares es una forma de madurez en la programación.

Veamos las características de los navegadores más populares:

- Google Chrome, fue creado por la empresa Google. Este navegador recibe una alta puntuación en las encuestas de usuario destacando la seguridad, claridad, sencillez, rapidez y estabilidad que proporciona. Además les otorga a los usuarios privacidad en sus navegaciones al borrar los archivos cookies y no registrar las actividades.

- Internet Explorer, de la factoría Microsoft no goza de mucha fama entre los desarrolladores. La versión 11 supuso un cambio de calidad que le ha hecho empezar a recuperar mucho tiempo perdido. Se trata de software propietario.

- Mozilla Firefox, este navegador proviene de una comunidad código abierto e incluye, entre otras, corrector ortográfico, pestañas, sistema de búsqueda integrado que usa el motor de búsqueda que quiera el usuario. Se caracteriza por su estabilidad, sencillez, seguridad y rapidez. Además, le permite al usuario modificar su apariencia y estilo. Es software libre.


17

- Safari es un navegador creado por Apple. Una de las ventajas que presenta es la posibilidad de enviar por correo electrónico páginas web y almacenarlas a pesar de que estas hayan sido eliminadas de la red.

El tema de las diferencias de visualización es la clave en el tema de las compatibilidades ya que equipos de desarrollo intentan acatar las normas establecidas, que la W3C pero la realidad es que cada uno de ellos tiene una visión de las normas y cada visión da como resultado una implementación.

En la imagen siguiente puede observarse una estadística de uso de los diferentes navegadores.

Aunque actualmente Microsoft (creadores de Internet Explorer) están siendo conscientes de la importancia de actualizar de forma más asidua y alinearse del lado de los estándares que ofrece la W3C, tradicionalmente no han mostrado interés por incorporarse al avance colaborativo que la nueva versión HTML5 viene ofreciendo.

Sin embargo, los navegadores Mozilla Firefox y Opera están constantemente implementando nuevas funcionalidades a modo de propuestas, para que la W3C piense en si deberían incluirlas dentro de las normas que definen ese estándar.

Es evidente que cada navegador es una aplicación por separado y que la especificación sirve de guía para que estas aplicaciones vayan sobre un mismo camino.

Para algunos autores este camino es demasiado ancho y permite que varias aplicaciones tengan implementaciones muy diferentes, lo que obliga a los desarrolladores a crear configuraciones adicionales para obtener un resultado similar en todos los navegadores.

Desde el principio ha existido la lucha por hacerse con el dominio del mercado de los navegadores, por convertirse en el favorito de los cibernautas. Ante el anquilosamiento del IE, Mozilla Firefox convenció rápido: 1 millón de descargas en cuatro días, más de 10 millones de descargas en 30 días, más de 1.000 millones de descargas en cinco años. Se trataba de la versión 3.5.

En Mozilla Firefox, desde las primeras versiones, se podían abrir pestañas, algo que hoy resultaría inconcebible si faltara en un navegador, pero que IE tardó dos años en incorporar.


18

Diferencias entre diseño orientado a presentación e impresión.

Garantizar el buen resultado final de cualquier diseño gráfico, por simple que sea, conlleva controlar por parte del diseñador gráfico el proceso técnico de impresión. En el caso del diseñador web es la pantalla lo que debe observarse en un resultado final. O mejor dicho las pantallas, dada la variedad de dispositivos de salida con lo que mostrar las páginas webs.

NOTA: De nada servirá un diseño muy innovador si no controlas la técnica para garantizar la correcta ejecución de tu idea creativa.

El formato PDF de Adobe y los métodos de impresión actuales conocidos como "directos a plancha" simplificaron mucho el envío de archivos gráficos a las imprentas y el proceso de finalización por parte del diseñador gráfico.

Cada proyecto gráfico es diferente y requiere de un final específico, pero existen unos aspectos básicos comunes a todos los diseños que debes revisar antes de dar por terminado un trabajo.

En el proceso de diseño orientado a impresión se diseñan contenidos que están destinados a ser impresos en algún formato físico, como periódicos, revistas, carteles, etc.

El diseño orientado a presentación de contenidos como es el caso del diseño web está orientado a ser visualizado en una pantalla de dimensiones concretas aunque los navegadores y aplicaciones suelen permitir la impresión en formato físico.

Por ejemplo, cuando se diseña el contenido de una revista se debe pensar en tamaños y contenidos pensando en unas dimensiones fijas pero cuando pensamos en diseñar un sitio web tenemos que ser conscientes de que podrá ser visualizado en un rango de resoluciones y tamaños de pantallas diversos.

Otra diferencia entre ambos diseños es la ausencia (modo impreso) o presencia (modo presentación) de elementos interactivos y multimedia, como pueden ser vídeos, audio, etc.


19

2. LENGUAJES DE MARCADO GENERALES

Los lenguajes de marcado o lenguajes de marcas se pueden definir como una manera de codificar documentos en los que se utilizan herramientas como las etiquetas, las marcas o las anotaciones para definir la estructura de un texto y su forma de visualización.

HTML es el lenguaje de marcas que se utiliza para crear páginas webs pero no es el único lenguaje de este tipo que existe. Existen otros como el metalenguaje XML que contiene y desarrolla las características de este tipo de lenguajes.

2.1. Origen de los lenguajes de marcado generales: SGML y XML

XML, siglas en inglés de eXtensible Markup Language (Lenguaje de marcas extensible), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Proviene del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes.

NOTA: A diferencia de otros lenguajes, XML da soporte a bases de datos, siendo útil cuando varias aplicaciones se deben comunicar entre sí o integrar información. (Silberschatz).

La relación entre SGML y XML puede verse en el siguiente esquema,

XML se propuso como un estándar para el intercambio de información estructurada entre diferentes plataformas. Se puede usar en bases de datos, editores de texto y hojas de cálculo, entre otras posibilidades.

Es una tecnología sencilla que habitualmente viene acompañada de otras funcionalidades externas que la hacen potente. En la actualidad cumple un papel muy destacado en la búsqueda de la compatibilidad entre sistemas para compartir la información de una manera segura, fiable y fácil.

Este lenguaje tuvo muy buena acogida en la ISO (Organización Internacional de Normalización), por lo que en 1986 trabajaron para normalizarlo, creando SGML (Standard Generalized Markup Language), capaz de adaptarse a un gran plantel de situaciones. A partir de él se han desarrollado otros sistemas para almacenar información.


20

Un ejemplo de código XML,

<DEPARTAMENTO>

<EMPLEADO>

<NOMBRE> Rogelio Pisa</NOMBRE>

<PUESTO>Analista Financiero</PUESTO>

<SUELDO>2000</SUELDO>

<NOMBRE> Ana Torres</NOMBRE>

<PUESTO>Gerente</PUESTO>

<SUELDO>2890</SUELDO>

</EMPLEADO>

</DEPARTAMENTO>

En el año 1989 Tim Berners Lee creó la web, y junto con ella el lenguaje HTML. Este lenguaje se definió en el marco de SGML y fue (y es en la actualidad), sin duda, la aplicación más conocida de este estándar.

Desde el principio los navegadores web siempre pusieron pocas trabas al código HTML que interpretaba lo que condujo a que fueran apareciendo páginas web caóticas que no cumplían la mayor parte de la sintaxis.

Por ejemplo, el navegador sabe que antes de una etiqueta <DIV> debe haberse cerrado cualquier <P> previamente abierto. Los navegadores resolvieron esto incluyendo lógica ad hoc para el HTML, es decir, tomando sus propias decisiones.

Se buscó entonces definir un subconjunto del SGML que permitiera:

Mezclar elementos de diferentes lenguajes. Lo que se denomina extensible.

Utilización de analizadores simples.

Concienciar a todos los implicados que había que tener tolerancia cero con los errores de sintaxis.

Para hacer todo esto, XML deja de lado muchas características de SGML que estaban pensadas para facilitar la escritura manual de documentos orientándose a hacer las cosas más sencillas para los programas automáticos que necesiten interpretar el documento.

SGML no se detuvo en establecer una serie de códigos normalizados sino que se convirtió en un lenguaje con el que se podía crear una definición del tipo de documento (DTD) mediante la que se definen con precisión aquellos elementos que son necesarios en la elaboración de un documento o un grupo de documentos estructurados de manera similar.


21

En la siguiente tabla puede observarse la diferencia entre ambos estándares:

2.2. Características generales de los lenguajes de marcado

El concepto de lenguaje de marcas fue expuesto por vez primera por William W. Tunnicliffe en 1967. La mayor novedad consistía en la separación entre la presentación y la estructura del texto. Este hecho sigue siendo fundamental y con los nuevos estándares de HTML5 combinado con CSS sigue trabajándose esa filosofía. Tunnicliffe lo denominaba codificación genérica (generic coding).

Goldfarb participó en la creación del lenguaje GML, y posteriormente dirigió el comité que elaboró el estándar SGML, la base de los lenguajes de marcas. En cualquier caso, y a pesar de las controversias sobre su origen, es comúnmente aceptado que la idea surgió de forma independiente varias veces durante la década 1970, y que se generalizó en los 80.

Ejemplos de uso de lenguajes de marcados,

<FECHA>El día <DATE>22/11/2006 </DATE>tuvo lugar ...</FECHA>

<SUBR>Móstoles</SUBR>a<SUBR>2 de noviembre</SUBR>

Los lenguajes de marcado suelen confundirse con lenguajes de programación. Pero, obviamente, no son lo mismo, en un primer repaso se observa por ejemplo que los lenguajes de marcado no tienen funciones aritméticas o variables, como sí poseen los lenguajes de programación.


22

Para cada lenguaje de marcado, los desarrolladores de software pueden construir una aplicación para leer los documentos escritos en ese lenguaje.

Por ejemplo, los documentos escritos en XML pueden leerse por medio de aplicaciones personalizadas utilizando diferentes objetos de análisis gramatical o pueden combinarse con el lenguaje de estilo extensible (XLS- Extensible Stylesheet Language) para poder mostrarse en un navegador.

Se suele diferenciar entre dos clases de lenguajes de marcado, aunque en la práctica pueden combinarse y formar una tercera clases, en un mismo documento.

Por ejemplo, el HTML contiene etiquetas puramente procedimentales, como la B de bold (negrita), junto con otras puramente descriptivas ('BLOCKQUOTE, el atributo HREF). El HTML también incluye el elemento PRE, que indica que el texto debe representarse tal y como está escrito.

<HTML><HEAD></HEAD>

<BODY>

<B>EN Negrita</B>

<BLOCKQUOTE>esto es un texto destacado</BLOCKQUOTE>

<PRE>

Va por libre respetando saltos y tabulaciones

</PRE>

</BODY></HTML>

El marcado de presentación

Es aquel que indica el formato del texto. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura aunque resulta insuficiente para el procesamiento automático de la información.

El marcado de presentación es útil para cantidades pequeñas de información y a medida que el proyecto se va complicando y va siendo más difícil de mantener o modificar hay que ir introduciendo un marcado más estructurado.

Hay que tener en cuenta que en HTML5 han desaparecido las etiquetas o marcas vinculadas al formato ya que el estándar sugiere se utilicen propiedades CSS para tales cometidos, separando formato y contenido. Esto afecta también a los atributos que habitualmente acompañaban a estas etiquetas y que con HTML5 son sustituidas por la hoja de estilo en cascada.


23

Diferentes ejemplos de marcas de presentación

El marcado descriptivo o semántico

Este marcado utiliza etiquetas para describir los fragmentos de texto, pero sin especificar cómo deben ser representados, o en qué orden. Los lenguajes expresamente diseñados para generar marcado descriptivo son el SGML y el XML.

Una de las características que caracterizan del marcado descriptivo es su flexibilidad, es decir los fragmentos de texto se etiquetan tal como son, y no tal como deben aparecer. Estos fragmentos pueden utilizarse para más usos de los previstos inicialmente.

Por ejemplo, los hiperenlaces fueron diseñados en un principio para que un usuario que lee el texto los pulse. Sin embargo, los buscadores los emplean para localizar nuevas páginas con información relacionada, o para evaluar la popularidad de determinado sitio web.

El marcado descriptivo también simplifica la tarea de reformatear un texto, debido a que la información del formato está separada del propio contenido.

Por ejemplo, un fragmento indicado como cursiva (<I>texto</I>), puede emplearse para marcar énfasis o bien para señalar palabras en otro idioma. Esta ambigüedad, presente en el marcado tradicional de presentaciones y en el procedimental que hemos comentado anteriormente, no puede solucionarse más que con una revisión a mano del código.

Si ambos casos se hubieran diferenciado descriptivamente con etiquetas distintas, podrían representarse de manera diferente sin esfuerzo, distinguiendo con formato en CSS dos etiquetas descriptivas que nos indique que es texto en otro idioma o texto destacado.

Las etiquetas en los lenguajes de marcado pueden utilizarse para añadir al contenido cualquier clase de metadatos.

Por ejemplo, el estándar Atom, un lenguaje de sindicación, proporciona un método para marcar la hora "actualizada", que es el dato facilitado por el editor de cuándo ha sido modificada por última vez cierta información. El estándar no especifica cómo se debe representar, o siquiera si se debe representar. El software puede emplear este dato de múltiples maneras, incluyendo algunas no previstas por los diseñadores del estándar.


24

2.3. Estructura general de un documento con lenguaje de marcado

Metadatos e instrucciones de proceso.

La estructura física indica la apariencia del documento, ya sea en el papel o sobre la pantalla, incluyendo sus componentes físicos, el posicionamiento de los elementos y la tipografía empleada.

Los metadatos son uno de los pilares de la metainformación y que nos permite 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 habitualmente para la definición de los metadatos es <META>.

Una página web debe ser un conjunto de datos organizado con sentido.

Las etiquetas HTML deben insertarse con este fin organizativo (dejando la presentación para otros lenguajes, CSS), de forma que procesando visualmente el código tendríamos que obtener información relevante sobre el documento.

Los metadatos (información sobre la información) no se visualizan, pero están integrados en el documento ofreciendo información variada: desde el tipo de formato utilizado (html, xml ...) hasta el autor, editor con el que se ha confeccionado, información para los buscadores, etc.

La etiqueta META.

La forma usual de insertar metadatos en el documento es por medio de la etiqueta <META> en la sección <HEAD> de la página.

Esta etiqueta es de aquellas de las que llamábamos "elementos vacios" porque no lleva etiqueta de cierre.

Por ejemplo:

<META name="generator" content="HTML-Kit" />

Introduciendo la metainformación de que el documento ha sido escrito usando el editor HTML-Kit.

No existen reglas concretas sobre la información que se puede o no incluir en estas metatags. El estándar HTML define siempre la estructura de una etiqueta META pero no interviene en sus valores.

Es posible definir nuestras propias etiquetas META aunque no olvidemos que al no visualizarse en el navegador realmente solo se aprovechan por los buscadores y otras herramientas informáticas (que lógicamente solo entienden las etiquetas META más difundidas).

Ciertamente no tiene mucho sentido crear metainformación particular salvo para un uso propio y concreto.


25

Las etiquetas META más usuales son:

description.

Por ejemplo,

<META name="description" content=" web para los inquietos de corazón.">

Mediante esta etiqueta podemos incluir como metadato una descripción de nuestra página. Esta descripción puede ser leída y utilizada por algunos buscadores y programas de ayudas técnicas para deficientes visuales.

lang.

La etiqueta <META> admite el atributo lang, que nos permite ofrecer información sobre el idioma.

Por ejemplo,

<META name="description" content="Sitio web para los inquietos de corazón" lang="ES">

keywords

Las palabras clave son aquellas que resumen de forma significativa el contenido de la página.

Por ejemplo,

<META name="keywords" content="mp3, free, descargas, download">

Estos atributos para META que hemos visto son los más usados. Los buscadores leen estas etiquetas y pueden juzgar acerca de la importancia de la página.

NOTA: Existe una auténtica industria montada sobre lo que aportan estas líneas. Una buena selección de descripción y keywords puede suponer que la página aparezca muy arriba en las búsquedas, y puede suponer mucho dinero si estamos trabajando con páginas comerciales.

Un ejemplo de uso variado de estas etiquetas especiales lo podemos ver en el código de la web de www.elpais.es

<META http-equiv="Content-Type" content="text/html; charset=utf8">

<TITLE>EL PAÍS: el periódico global</TITLE>

<META name="lang" content="es">

<META name="author" content="Ediciones El País">

<META name="description" content="Noticias de última hora sobre la actualidad en España y el mundo: política, economía, deportes, cultura, sociedad, tecnología, gente, opinión, viajes, moda, televisión, los blogs y las firmas de EL PAÍS. Además especiales, vídeos, fotos, audios, gráficos, entrevistas, promociones y todos los servicios de EL PAÍS.">

<META name="keywords" content="noticias, última hora, actualidad, nacional, España, ccaa, internacional, política, economía, deportes, cultura, sociedad, tecnología, gente, opinión, viajes, moda, televisión, blogs, firmas, especiales, vídeos, fotos, audios, gráficos, entrevistas, servicios">

<META name="date" scheme="W3CDTF" content="2015-11-05T11:07:51+01:00">

<META http-equiv="Refresh" content="900">


26

<META name="DC.title" lang="es" content="EL PAÍS: el periódico global">

<META name="DC.description" lang="es" content="Noticias de última hora sobre la actualidad en España y el mundo: política, economía, deportes, cultura, sociedad, tecnología, gente, opinión, viajes, moda, televisión, los blogs y las firmas de EL PAÍS. Además especiales, vídeos, fotos, audios, gráficos, entrevistas, promociones y todos los servicios de EL PAÍS.">

<META name="DC.subject" lang="es" content="noticias, última hora, actualidad, nacional, España, ccaa, internacional, política, economía, deportes, cultura, sociedad, tecnología, gente, opinión, viajes, moda, televisión, blogs, firmas, especiales, vídeos, fotos, audios, gráficos, entrevistas, servicios" />

<META name="DC.creator" content="Ediciones El País">

<META name="DC.publisher" content="Ediciones El País">

<META name="DC.language" scheme="RFC1766" content="es">

Una de las funciones más requerida que se puede realizar desde la etiqueta META es aquella que consiste en cargar automáticamente una página desde la actual transcurridos un tiempo establecido (segundo habitualmente) sin que el usuario tenga que hacer nada.

Por ejemplo, incluimos en la cabecera del documento HTML, es decir entre <HEAD> y </HEAD> la siguiente línea,

<META HTTP-EQUIV="Refresh" CONTENT="5" URL="http://es.gnome.org">

Al estilo de estas metaetiquetas, en su prólogo, un documento XML puede incluir una serie de instrucciones de proceso, delimitadas por: <? ... ?>, en las que se puede indicar el sistema de codificación empleado (Unicode por defecto: UTF-8. ).

También es posible especificar la hoja de estilo XSLT que se empleará para visualizar el documento, declarar espacios de nombres y definir el esquema del documento, etc. Solo se requiere, obligatoriamente, especificar que se trata de un documento XML: <?xml version="1.0"?>.

Las instrucciones de procesamiento deben comenzar por un identificador llamado destino, que sigue reglas similares a las de los nombres de atributos y elementos. Los destinos de las instrucciones de procesamiento distinguen mayúsculas y minúsculas y deben empezar por una letra o un carácter de subrayado. El resto del destino puede contener letras, números, guiones, caracteres de subrayado, puntos y dos puntos. Después del destino puede aparecer cualquier carácter textual XML válido.

Por ejemplo, asociar un archivo CSS a un documento XML,

<?xml-stylesheet type="text/css" href="fauna.css"?>

Esta instrucción sirve para asociar el archivo fauna.css al documento XML.

El documento CSS podría contener,

nombre {

color:blue;

font-size:40px;

}

patas {


27

color:red;

font-size:22px;

}

El documento XML completo sería,

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="fauna.css"?>

<ANIMALES>

<ANIMAL>

<NOMBRE>perro</NOMBRE>

<PATAS>4</PATAS>

</ANIMAL>

<ANIMAL>

<NOMBRE>pato</NOMBRE>

<PATAS>2</PATAS>

</ANIMAL>

<ANIMAL>

<NOMBRE>ballena</NOMBRE>

<PATAS>0</PATAS>

</ANIMAL>

</ANIMALES>

Codificación de caracteres. Caracteres especiales (escape).

Una consideración importante directamente relacionada con el texto de las páginas HTML es la codificación de los caracteres y la inserción de caracteres especiales. Por norma general los caracteres que se utilizan en los textos no se pueden incluir directamente en las páginas web.


28

Algunos de los caracteres que se utilizan en los textos no se pueden incluir directamente en las páginas web:

- Los caracteres que utiliza el HTML para definir sus etiquetas son (<, > y ") y, no se pueden utilizar libremente. La solución a esta limitación consiste en sustituir estos caracteres reservados de HTML por unas expresiones llamadas entidades HTML.

Las entidades HTML son unos códigos que sustituyen a caracteres que pueden no ser correctamente interpretados por los navegadores

- Los caracteres de lenguas que no son usadas en el inglés (ñ, á, ç, ¿, ¡, etc.) pueden ser problemáticos dependiendo de la codificación de caracteres utilizada.

Por ejemplo: <P>Estamos escribiendo en español y lo aquí escrito se almacenan en formato UTF-8</P>.

La palabra “aquí” del ejemplo incluye la letra “í”. Si el editor HTML del diseñador utiliza la codificación UTF-8, el servidor web muestra las páginas con esa codificación y el navegador del cliente es capaz de visualizar las páginas con formato UTF-8, el texto se verá correctamente en el navegador local.

NOTA: UTF-8 es una forma de convertir todos los símbolos que provienen del lenguaje natural (como puede ser nuestro alfabeto) a un sistema comprensible por el ordenador.

Sin embargo, muchas veces no es posible que todos los intervinientes utilicen la misma codificación de caracteres. Por limitaciones técnicas o por decisiones de los diseñadores y programadores, los textos pueden pasar de codificación UTF-8 a codificación ISO-8859 en cualquier momento. Si se produce este cambio sin realizar una conversión correcta, el navegador del usuario mostrará caracteres extraños en todos los acentos y en letras como es el caso de la letra ñ.

NOTA: ISO-8859 es una norma que define la codificación del alfabeto latino.

La solución más sencilla para asegurar que todos estos caracteres potencialmente problemáticos se visualicen correctamente en el navegador del usuario consiste en sustituir cada carácter problemático por su correspondiente entidad HTML.

Actualmente, salvo si usamos editores de texto plano, tanto los editores web como los navegadores están preparados para ponerse de acuerdo y evitar que se produzca este problema.

Por ejemplo,

Dentro de una página web con los caracteres de sustitución habría que escribir “El camión de <i>color verde</i> cuesta trabajo conducirlo.” que se vería en el navegador de esta forma: El camión de color verde cuesta trabajo conducirlo.


29

Etiquetas o marcas.

Una etiqueta es una marca con clase que delimita una región en los lenguajes basados en XML.

Como ocurre en otros casos, a menudo se emplea la palabra inglesa tag a pesar de que etiqueta es perfectamente adecuada.

La Web se basa en el HTML, o lenguaje de marcado de hipertexto que está basado en el uso de etiquetas. Las etiquetas (entre otras muchas cosas) informa al navegador en qué juego de caracteres está la página, de qué tipo es cada uno de los fragmentos de texto que contiene (por ejemplo, encabezamiento, texto normal, etc.), si están alineados a un lado o centrados, en qué tipo de letra está el texto (cursiva, negrita, etc.), si hay tablas, de qué anchura son etc.

Las etiquetas dan al navegador las instrucciones necesarias para que presente la página en pantalla.

Una manera de ver la variedad de etiquetas que contiene cualquier sitio web es a viendo el código que la sustenta, es decir, accediendo al código fuente de una página web. Desde cualquier navegador es posible.

Por ejemplo, desde Internet Explorer,

Desde Mozilla Firefox,


30

Desde Google Chrome,

Si observa el código de una página web se encontrará con los paréntesis angulares < > (los símbolos "menor que" y "mayor que", que enmarcan habitualmente la etiqueta de apertura o inicio, y </ >, que acotan la etiqueta de cierre o final).

Lo que hay entre las etiquetas es el texto que se puede ver directamente en pantalla aunque obviamente pueden introducirse otras etiquetas que muestren imágenes, vídeos, controles, presentaciones, etc.

Veamos el siguiente ejemplo:

<ETIQUETA1> <ETIQUETA2 atributo1="hola" atributo2="mundo"> </ETIQUETA2> <ETIQUETA3 atributo1="dominio"> </ETIQUETA1>

En este ejemplo hay tres etiquetas (ETIQUETA1, ETIQUETA2 y ETIQUETA3).

La ETIQUETA1 delimita, o contiene, a las etiquetas ETIQUETA2 y ETIQUETA3.

Las etiquetas también pueden tener atributos, que aportan información específica; en este caso los atributos atributo1 y atributo2 aportan información a la ETIQUETA2, al igual que hace el atributo1 a la ETIQUETA3.

Elementos.

Cada elemento de un documento HTML consta de una marca de comienzo, un bloque de texto y una

marca de fin.

<MARCA>bloque de texto</MARCA>.

Por ejemplo,

<H1>Titular de nivel 1</H1>


31

Estos elementos se denominan contenedores porque contienen un bloque de texto entre las dos marcas. También existen elementos vacíos que no afectan a bloques de texto y, por tanto, no contienen marca de fin. Se denominan marcas abiertas.

Por ejemplo:

Estamos escribiendo en la primera<BR> y pasamos a la siguiente

El otro tipo de marca, mucho más habitual pues delimita una zona del código, es la llamada etiqueta cerrada, con principio y fin.

Por ejemplo,

<HTML>

<HEAD></HEAD> <BODY> <P>La ciudad y sus habitantes formaban un todo para el visitante</P> que encuadra el texto en un párrafo. </BODY> </HTML>

Las propias etiquetas estructurales que dividen el código, BODY, HEAD, HTML son de este tipo

Atributos.

Muchos elementos tienen atributos que definen propiedades del elemento:

<MARCA atributo="valor"> bloque de texto </MARCA>.

Por ejemplo,

<H1 align="center">Titular de nivel 1 centrado</H1>

Es recomendable encerrar los valores de los atributos entre comillas dobles. En algunos casos es además obligatorio (por ejemplo, si contienen espacios en blanco).

32

Las etiquetas pueden contener parámetros de forma opcional u obligatoria, lo que se denominan atributos; y algunos autores, lo llaman modificadores. Estos atributos matizan lo que queremos que haga la marca, y su sintaxis debe ser:

<ETIQUETA atributo1=“valor1” atributo2=“valor2”… atributoN=”valorN”>

Los atributos se expresan encerrados entre comillas aunque en la mayoría de los navegadores admiten omitir las comillas y colocar directamente el valor del atributo. Esta práctica, a pesar de estar extendida, no es muy aconsejable ya que no está normalizada, y puede dar problemas a la hora de certificar el uso del lenguaje.

Existe un tipo de atributos, llamado compacto, que sólo viene definido por su nombre (no tienen valor).

Ejemplo:

Cuando en los formularios usamos la etiqueta <INPUT> y queremos especificar un valor pero que no pueda ser modificado por los usuarios añadimos el atributo compacto readonly

<INPUT type="text" name="País" value="Islandia" readonly>.

También, es necesario saber que las etiquetas pueden contener en si interior otras etiquetas, que complementan lo que se persigue.

Un ejemplo de una etiqueta dentro de otra (<B> dentro de <P>):

<P><B>Texto dentro de etiqueta contenida dentro de otra.</B></P>

Mostrándose el texto en pantalla así,

Estudiemos algunos casos concretos de combinaciones entre etiquetas y atributos.

Salto de línea.

La etiqueta <BR> obliga a saltar a la siguiente línea en el sitio que la ubiquemos.

Dibujar una línea.

La etiqueta <HR> permite trazar una línea horizontal. No tiene etiqueta de cierre. Puede utilizarse junto con el atributo size, para definir el grosor de la línea en píxeles.

Por ejemplo,

<HR size="13">

Comentarios.

La etiqueta <!—Aquí va insertado un comentario que no se mostrará --> se usa para incluir un comentario dentro del código. Su característica principal es que es ignorado por los navegadores, y no se mostrará en pantalla. Los comentarios nos sirven y suelen utilizarse para explicar mejor el código y son de ayuda en el momento que necesitemos editarlo.

33

Los comentarios se escriben en HTML de la siguiente forma: <!-- Esto es un comentario -- >. Los caracteres de inicio del comentario, <!-- deben ir juntos, pero se permiten espacios entre los -- y el > del final. Los comentarios pueden expandirse varias líneas, aunque no es conveniente porque algunos visualizadores pueden no interpretarlos.

NOTA: Cuando se está diseñando un sitio web, es conveniente a medida que vamos terminando los distintos bloques ir documentándolos indicando por qué se ha hecho de tal manera o por qué se usó tal comando.

A veces, durante la etapa de desarrollo se usan las etiquetas de los comentarios para anular temporalmente parte del código y ver cómo queda el resultado.

Encabezados.

Estas etiquetas definen el tamaño de un título o de una cabecera donde <H1> aplica el tipo de letra más grande y <H6> aplica el tipo de letra más pequeño.

Por ejemplo,

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Daría como resultado la siguiente visualización en un navegador:


34

Imágenes. Para insertar imágenes dentro del código hay que usar la etiqueta <IMG>, ésta debe ir acompañada del atributo src. El valor del atributo src será la dirección exacta de la ubicación del archivo de la imagen.

Ejemplo,

<P> Encima de la fotografía</P>

<IMG src="torredeloro.jpg">

<P> Debajo de la fotografía</P>

2.4. Documentos válidos y bien formados. Esquemas

Son aquellos documentos que además de estar bien formados, cumplen las especificaciones de la DTD (Document Type Definition), del Schema, o del elemento que lo valide, y siguen las pautas marcadas por sus modelos de contenido. No hay esquemas de documentos idénticos, por eso es difícil concretar las reglas que deben cumplir.

Para que un documento XML también sea válido, durante el proceso de validación se comprueba:

Qué elementos o atributos se permiten en un documento del tipo definido en el esquema.

La estructura de los elementos y atributos (elementos anidados, atributos obligatorios u opcionales, etc.)

El orden de los elementos.

Los valores de los datos de atributos y elementos (según los rangos de valores delimitados, los tipos de dato correcto, etc.

La unicidad de valores dentro de un documento, es decir las referencias de productos que no pueden repetirse.


35

Ejemplo que cumple las especificaciones de DTD:

El fichero Ejemplo.xml

<? xml version="1.0" encoding="UTF-8" standalone="no" ?>

<!DOCTYPE nota SYSTEM "NotaInterna.dtd">

<NOTA importancia="alta">

<REMITENTE>Miquel</REMITENTE>

<DESTINATARIO>Jordi</DESTINATARIO>

<TITULO>Recordatorio</TITULO>

<MENSAJE>Recógeme este fin de semana</MENSAJE>

</NOTA>

El fichero NotaInterna.dtd

<!ELEMENT nota (remitente, destinatario, titulo, mensaje?)>

<!ATTLIST nota importancia (alta|normal) normal)>

<!ELEMENT remitente (#PCDATA)>

<!ELEMENT destinatario (#PCDATA)>

Los atributos son una forma de incorporar características a los elementos, tienen su propio nombre y pueden tomar varios valores.

<!ELEMENT titulo (#PCDATA)>

<!ELEMENT mensaje (#PCDATA)>

Un documento XML se dice "bien formado" cuando cumple una serie de reglas descritas en la especificación oficial de XML v1.0.


36

Podemos resumirlas en:

El documento debe tener un solo elemento raíz.

Todas las etiquetas (tags) abiertas deben tener su respectivas etiquetas de cierre.

XML distingue mayúsculas de minúsculas por lo que todos los elementos y atributos deben seguir la definición.

Todos los elementos deben estar correctamente anidados.

Los valores de los atributos deben ir entre comillas simples o dobles.

Cualquier elemento Vacío debe terminar con /> o debe hacerlo no vacío añadiendo una etiqueta de cierre.

No se pueden repetir atributos en un mismo elemento. Por ejemplo, si se quiere representar múltiples autores para un libro, se debe definir el autor como un elemento y no como un atributo. Como norma general, se definirán elementos para los datos que van a ser leídos por las personas y atributos para aquellos que van a ser procesados por las máquinas.

Para probar si un documento XML está bien formado utilizaremos un analizador sintáctico (parser).

Algunos ejemplos de analizadores sintácticos,

Aplicación para editar XML (por ejemplo XML Spy, Oxygen, XML Copy Editor, Notepad++, etc.)

Analizadores en línea (w3c).

Ejemplos de documentos XML bien formados,


<GEOGRAFIA MUNDIAL>

<ESTADO>

<PAIS>España</PAIS>

<CONTINENTE>Europa</CONTINENTE>

<CAPITAL nombre="Madrid">

</ESTADO>

</GEOGRAFIA MUNDIAL>

O también este otro,


<MEDIOSDETRANSPORTE>

<BICICLETA velocidad="v<100km/h">

<PATINETE velocidad máxima="50 km/h">

</MEDIOSDETRANSPORTE>


37

Recuerda…

En Mozilla Firefox, desde las primeras versiones, se podían abrir pestañas.

Los Formularios son una combinación de texto y en ocasiones gráficos que permiten enviar información por parte del visitante.

Es posible observar el código fuente de las páginas que vemos en los navegadores sin permisos especiales.

Necesitaremos al diseñar establecer un equilibrio entre la apariencia y la funcionalidad.

XML proviene del lenguaje SGML y permite definir la gramática de lenguajes específicos para estructurar documentos grandes.

Readonly es un tipo de atributo llamado compacto que sólo viene definido por su nombre.

Una web centrada en el usuario es aquella cuyo análisis, diseño, contenidos y mantenimiento no están dirigidos a lograr unos resultados concretos.

La estructura jerárquica es una organización en la que aparentemente hay un orden establecido, las páginas pueden apuntarse unas a otras de forma ordenada.

La mayoría de las páginas que relegan al usuario a un segundo término olvidan el tema de la velocidad de descarga.


38

3. LENGUAJES DE MARCADO PARA PRESENTACIÓN DE PÁGINAS WEB

Casi todas las páginas web están escritas en HTML que es el lenguaje que nos permite estructurar en un documento las imágenes, multimedia y texto que deseamos mostrar en los navegadores web.

HTML es un lenguaje de marcado definido como estándar. Esta norma fue desarrollada por el World Wide Web Consortium (W3C). Se basa en SGML (Standard Generalized Markup Language). Es por tanto, un lenguaje que utiliza etiquetas para definir la estructura de un texto.

3.1. Historia de HTML y XHTML. Diferencias entre versiones

En 1980, el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un sistema basado en hipertextos para compartir documentos. Ahí empezó todo.

Estos sistemas llamados hipertextos ya existían y permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando. Fue el salto a convertirlo en una plataforma de alcance universal lo que acabó convirtiéndose en la World Wide Web (WWW, o W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online como una reliquia informática de la que partió lo que actualmente disfrutamos con normalidad.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Grupo de Trabajo de Ingeniería de Internet) aunque se consiguieron avances significativos definiendo las etiquetas para imágenes, tablas y formularios; ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, se consigue publicar estándar HTML 2.0 que aunque lleve el número 2 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium).

La versión HTML 3.2 fue la primera publicada por el W3C y ya incorporaba la posibilidad de incluir applets de Java y que el texto fluyera alrededor de las imágenes.

En 1998 se publicó HTML 4.0 que para muchos autores supuso un gran salto respecto a las versiones anteriores. Algunos de los motivos fueron la incorporación de las hojas de estilos CSS, la posibilidad de incluir scripts en las páginas web y mejoras en la accesibilidad de las páginas, tablas complejas y nuevos elementos en los formularios.

En 1999 se actualizó a HTML 4.01 pero es sólo una revisión y no incluye novedades significativas.

De forma paralela a su actividad con HTML, la W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 se publicó en el año 2000 y es una adaptación de HTML 4.01 con restricciones propias del lenguaje XML.

XHTML no es sólo un HTML con sintaxis XML. La aportación especial de XHTML es una nueva filosofía de modelación de las páginas web que buscan la creación de una web semántica.


39

NOTA: XML es un lenguaje de marcas desarrollado por el W3C para almacenar datos en forma legible que permite definir la gramática de lenguajes específicos.

También ha sido publicado el borrador de XHTML 2.0, que estaba previsto supusiera un cambio muy importante respecto de las anteriores versiones de XHTML pero con la llegada y difusión masiva de HTML5 esta cuestión ha quedado paralizada.

El siguiente paso de esta evolución es HTML5 introduciendo algunos elementos claves como son la semántica y la separación de formatos y contenidos, así como la incrustación definitiva de formatos multimedia.

HTML5 es un lenguaje de marcas (Hyper Text Markup Language) usado para estructurar y presentar el contenido para la web que nos permite explotar sitios web usando menos recursos. Con HTML5, también entra en desuso el formato XHTML, dado que ya no sería necesaria su implementación.

El futuro (ya presente) muestra una confluencia de las versiones hacia un estándar con HTML 5, sin embargo es interesante conocer en la evolución de los estándares los cambios que se debían hacer a un documento HTML para convertirlo en XHTML:

1. Debe estar escrito en minúsculas.

2. Los elementos deben estar anidados correctamente.

3. Todas las etiquetas deben ser cerradas. Esto afecta las marcas que no poseen su cierre correspondiente.

Por ejemplo,

<BR> tendría que escribirse <BR />

<IMG src="name"> tendría que escribirse <IMG src="name" />

<HR> tendría que escribirse <HR />

4. Los documentos tienen que estar “bien formados” con las secciones en los sitios que correspondan.

Por ejemplo, la sección <HEAD> es obligatoria y <TITLE> debe estar dentro de ella.

5. Los atributos deben ir entre comillas.

Por ejemplo,

<TABLE width=75% bgcolor=ff0000> tendría que escribirse < TABLE width-“75” bgcolor=”ff0000”>

6. Utiliza atributo ID en vez de NAME.

Por ejemplo,

<IMG src=”/images/cows.jpg” name=”photo12” />tendría que escribirse <IMG src=”/images/cows.jpg” id=”photo12” />


40

7. No se puede usar sintaxis abreviada.

Por ejemplo,

<INPUT checked> tendría que escribirse <INPUT checked=”checked”>

8. Hay que usar sentencia DOCTYPE para indicarle al navegador como procesar el documento especificando el estándar que se está utilizando.

Por ejemplo,

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.2. Estructura de un documento

Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por la etiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura de un documento HTML será:

Por ejemplo,

<HTML><HEAD>

Definiciones de la cabecera

</HEAD>

<BODY>Instrucciones HTML</BODY></HTML><HEAD>.

Versiones

El nuevo HTML5 establece (en los anteriores HTML era obligatorio) la posibilidad de incluir un elemento DOCTYPE sencillo que debe ser declarado al principio de la página y nos indica que versión estamos usando. En las versiones anteriores este apartado era complejo pues había que indicar que variante de la versión se estaba empleando.

Por ejemplo,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> para el caso HTML 4.01 STRICT.

En el caso de HTML5 sería,

<!DOCTYPE html>

Elementos de la cabecera.


41

La etiqueta HEAD es la primera de las dos partes en que se estructura cualquier documento HTML.

Por ejemplo,

<HEAD>

<TITLE> Este es el primero de muchos</TITLE>

</HEAD>

Dentro de la HEAD pueden incluirse elementos META.

Por ejemplo, si se escribe:

<HEAD>

<TITLE> Este es el primero de muchos </TITLE>

<META HTTP-EQUIV="Refresh" CONTENT="10">

</HEAD>

Hará que el visualizador vuelva a cargar la página activa al cabo de 10 segundos.

Si tenemos interés en que las páginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, podemos poner las palabras clave que contiene la página separadas por comas. También se puede agregar una descripción detallada del sitio web.

Por ejemplo:

<HEAD>

<TITLE> Este es el primero de muchos </TITLE>

<META NAME="keywords" CONTENT="HTML, internet ">

<META NAME="description" CONTENT="Manual para escribir HTML.">

</HEAD>

Otros META permiten indicar que tabla de caracteres se ha empleado al escribir la página. De no usarlo, puede ocurrir que el navegador no muestre correctamente los caracteres especiales no ASCII, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado sin codificar de la forma típica en HTML.

Por ejemplo,

<HEAD>

<TITLE>Head de un documento </TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</HEAD>


42

Los charset más habituales suelen ser: utf-8, iso-8859-1, utf-8, iso-8859-15, windows-1252.

Pueden agregarse todos los elementos <META> que se necesiten pero sin repetirlos.

Otro elemento habitual dentro del HEAD es la etiqueta LINK.

Por ejemplo,

<HEAD>

<TITLE>Título del documento</title>

<LINK href="externos.css" type="text/css" rel="stylesheet">

<LINK rel="stylesheet" type="text/css" href="/css/impresora.css" media="print">

</HEAD>

En esta ocasión definimos un enlace hacia un archivo de hojas de estilo externos.css y otra hoja de estilos para cuando se imprima la página web en papel.

Elementos del cuerpo del documento.

El elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, siempre dentro de los elementos <HTML></HTML> que delimitan el principio fin del documento completo.

La sintaxis correcta del elemento <BODY> es la siguiente:

<BODY>

Contenido del documento

</BODY>

La propia etiqueta BODY puede contener atributos de formato (obviamente con la implantación de la separación de formato y contenido que promueve HTML5 estos están desaconsejados y se recomienda el uso de las CSS):

bgcolor: Determina el color del fondo de la página.

background: Especifica una imagen determinada para ser usada como fondo de la página.

text: Color del texto de la página.

link: Color de los enlaces que aparezcan en la página.

vlink: Color de enlaces visitados dentro de la página.

alink: Color que aparece al darle clic sobre una liga o enlace.

topmargin: Es la distancia en píxeles que existe entre la orilla superior del navegador y el

contenido.

leftmargin: Es la distancia en píxeles que existe entre la orilla izquierda del navegador y el

contenido.

marginheight: Tamaño del margen superior e inferior.

marginwidth: Tamaño del margen izquierdo y derecho


43

Un ejemplo de cómo se trabajaría en HTML5 el color de fondo del cuerpo de la página sustituyendo al método aplicado en HTML4,

<BODY bgcolor="#ffcc99">hola mundo cruel</BODY>

que en la nueva metodología HTML5 implicaría definir en previamente las propiedades CSS de BODY,

<HTML><HEAD>

<STYLE>

body { background-color: #ffcc99;}

</STYLE>

<BODY> hola mundo cruel</BODY></HTML>

3.3. Color

Codificación de colores

En HTML, los colores se definen mediante tres números hexadecimales que representan los tonos rojo, azul y verde, usando la codificación RGB del color elegido. La sintaxis para codificar los colores sería, color="#RRGGBB".

Cada dígito hexadecimal puede tomar hasta dieciséis valores distintos, siendo el conjunto de símbolos empleado 0-9 y A-F.

RR, GG y BB representan, cada uno, un número hexadecimal entre 00 y FF para el rojo, el verde y el azul respectivamente. Con esta sintaxis, se pueden utilizar más de 16 millones de colores en las páginas.

Algunos colores en hexadecimal son:


44

Colores tipo

Es posible definir de una manera inmediata algunos de los colores más empleados utilizando un mnemotécnico para cada uno de ellos.

Colores seguros

Cada uno de los tres pares hexadecimales correspondientes a los tres colores primarios RGB (rojo, verde y azul) puede tomar 256 valores, que van del 0 al 255 decimal (00 a FF hexadecimal. Así pues, existen 16.777.216 combinaciones distintas, es decir, 256 x 256 x 256 = 16.777.216

Para poder visualizar por completo todos los colores posibles es necesario un sistema de 24-bits (cada pixel está representado por 3 bytes) lo que recibe el nombre de color verdadero o truecolor debido a que es aproximadamente el número de colores que el ojo humano puede percibir.

Cuando algún color empleado en una página web no está disponible en un navegador, porque sólo dispone de 256 colores intentará definirlo mezclando píxeles de colores y generando lo que se denomina un tramado o dithering. De esta manera, se consigue una sustitución aproximada del color no disponible.

Por ejemplo, si colocamos en una página web un botón de color #1875C6 y no está disponible en el navegador por estar limitado a una visualización con 256 colores, se generará un tramado para visualizar el botón mediante una mezcla de colores.

3.4. Texto

La introducción de texto escrito en una página web va desde la codificación hasta el diseño del propio interfaz. Sin texto no tendríamos hipervínculos y no podríamos compartir y vincular sitios, no tendríamos una manera tangible de presentar información en páginas. Sigue siendo fundamental, por tanto, en una web cada día más multimedia.

Encabezados. Jerarquía y estructura del contenido de un documento.

Con la llegada de CSS muchas de estas etiquetas fueron quedando desaconsejadas ya que los estilos podían replicar lo que se hacía con ellas, pero esto no significa que todas queden prohibidas. Su uso sigue siendo considerado lo correcto siempre que añadan semántica al código y delimiten correctamente la función de cada parte del texto.


45

Un ejemplo de mal uso, sería el abuso del salto de línea BR para maquetar la presentación que deseamos, para separar trozos de texto, para separar títulos, etc. Esta forma de trabajar es la que hay que evitar.

Existen etiquetas como <P> para la segmentación de párrafos y para los títulos debe usarse las etiquetas de cabecera desde la H1 hasta la H6. El hecho de que algunos navegadores muestren las etiquetas de manera similar, no significa que cumplan la misma función, debemos aprender a marcar los elementos de texto como citas, abreviaturas o códigos, ya que no todos serán párrafos comunes y corrientes. Aquí entra en juego la semántica, que las etiquetas aporten el formato que les atribuyen las hojas de estilo pero nos indique el tipo de contenido usando la etiqueta adecuada.

Hay seis niveles de encabezados en HTML especificado por <H1>, <H2>, <H3>, <H4>, <H5> <H6> y etiquetas. Los resultados de estas en un navegador son los siguientes:

<HTML><HEAD><TITLE>Ejemplo de encabezados</TITLE></HEAD>

<BODY>

<H1>Ejemplo de Encabezado 1</H1>






</BODY></HTML>


46

Párrafos

Dentro de un párrafo, todos los espacios, tabuladores y saltos de línea cuentan como un espacio simple. Para colocar textos en bloques, se utiliza el par de etiquetas <P> y </P>.

El texto del párrafo se puede alinear utilizando la etiqueta align utilizando los parámetros center (para alinearlo al centro), right (para alinearlo a la derecha), left (para alinearlo a la izquierda) y justify (para justificar el texto). Como se ha comentado en otras ocasiones, si se usa HTML5 habrá que definir los formatos usando clases de CSS.

Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente:

<P align="center">Este texto se alineará al centro</P>

<P align="right">Este texto se alineará a la derecha</P>

<P align="left">Este texto se alineará a la izquierda</P>

Alineación, espaciado y sangrado de texto.

Alineación.

Dentro de la marca P (y en otras también) podemos usar para alinear el texto el atributo align, con los valores left, right y center.

Por ejemplo, para alinear a la derecha,

<P align="right">alineamos el texto a la derecha</P>

que se vería de la siguiente forma,

alineamos el texto a la derecha

Espacios en blanco y saltos de párrafo.

En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el resto se omiten en la representación del documento. En el documento fuente podremos usar el espaciado que deseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetas HTML.

Existen elementos HTML que ya introducen separaciones de líneas, tanto antes como después, por tanto en estos casos no es necesario incluir este elemento de salto de párrafo.


47

Es el caso también de las etiquetas de cabecera, la de <HR> (reglas horizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>.

Tampoco es necesario dentro de listas tras los elementos <LI>, <DT> ni <DD>, que se utilizan para separar los distintos elementos de una lista.

Para forzar un salto de línea se usa la comentada en puntos anteriores etiqueta <BR>.

PRE

Es la etiqueta del texto preformateado, es decir, todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostrará tal y como se expresa en el fuente del documento HTML.

Dentro de la etiqueta PRE no tendrán validez la mayoría de las instrucciones HTML, solo se podrán utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.

CENTER

Se usaba para el centrado de texto e imágenes de manera que todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador.

Características de letra: tipos, tamaños y colores.

La etiqueta <FONT> y su cierre correspondiente llevaban hasta hace poco el peso de este tipo de formatos donde se deben especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir.

Atributo face.

Es un atributo delicado ya que dependiendo del navegador y sistema que se esté utilizando, puede no estar disponer el tipo de letra concreto y el navegador se verá forzado a mostrar el texto con la fuente que utilice por defecto (en muchos casos suele ser Times New Roman).

Por ejemplo,

<BODY bgcolor="white">

<FONT face="arial" SIZE=5 COLOR=red>Caracteres para formatear</FONT>

</BODY>

Para evitar esto se pueden agregar varios tipos de letras separados por comas.

Atributo size.

Existen siete niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande.


48

Los tamaños reales que veremos en pantalla dependerán de la definición y del tamaño de fuente elegido por el usuario en el navegador.

Atributo color.

Es posible definir de una manera inmediata algunos de los colores más frecuentemente usados para los que se ha creado un nombre más mnemotécnico, o usando la codificación hexadecimal como se vio anteriormente.

Por ejemplo,

<FONT COLOR="#CC0011">Caracteres para formatear</FONT>

<FONT COLOR="#8800AA">Caracteres para formatear</FONT>

<FONT COLOR="yellow">Caracteres para formatear</FONT>

Separadores de texto.

La etiqueta <HR>, como la mayoría de las marcas, puede variar de aspecto dependiendo de una serie de parámetros que podemos predefinir. No necesita cierre.

Por ejemplo,

<HR size="20">

<HR size="2">

Otro parámetro que podemos definir es la anchura de la franja mediante el parámetro width. En el caso de no escribir nada la franja será predeterminada del 100%.

Por ejemplo,

<HR width=75%">

Si queremos que la franja sea simple, sin sombrita deberemos escribir el parámetro noshade.

También podemos predefinir el color que le queremos dar a la franja con el parámetro "color". También es posible asignar un parámetro de alineación al estilo de lo que hemos visto para la marca <P>.


49

Por ejemplo,

<HR size="3" width="50%" align="center">

<HR size="2" width="80%" noshade=“noshade” align="right">

Etiquetas específicas para el marcado de texto. Estilos lógicos.

La diferencia con los estilos físicos es que los lógicos tienen un significado intrínseco, es decir, podemos dar un estilo característico según queramos enfatizar texto, o escribir código o citar las palabras de alguien.

En concreto, los estilos lógicos aportan valor o significado semántico. Es decir que podemos dar un diseño determinado al texto para comunicar al visitante qué clase de texto está leyendo.

Por ejemplo, un texto enfatizado, una cita (texto que reproduce las palabras de otra persona) o un código de un determinado software.

Bla bla bla

<CITE>Cómo dijo Matute "La Tierra es redonda, de momento"</CITE>

Bla ba bla

Existen algunos estilos lógicos que, en diseño, coinciden con estilos físicos.

Por ejemplo, la etiqueta <STRONG> (estilo lógico) resaltaría el texto poniéndolo en negrita. Por otro lado, ya sabemos que la etiqueta <B> (estilo físico) pone el texto en negrita. No quiere decir esto que ambas etiquetas html hagan lo mismo; simplemente es que el navegador resalta el texto por defecto poniéndolo en negrita.

Veamos un ejemplo más completo que utiliza estilos lógicos para enfatizar el texto o mostrar palabras textuales de otra,


50

Las etiquetas pertenecientes a los estilos lógicos serían las siguientes:

<EM>...</EM>: para dar énfasis, suele mostrar el texto en cursiva.

Por ejemplo,

<EM>¡Cuerpo a tierra!</EM>

<STRONG>.....</STRONG>: para mayor énfasis. Habitualmente aparece en negrita.

Por ejemplo:

<STRONG>Importante</STRONG>

<CODE>....</CODE>: Muestra el texto como fuente monoespaciada, generalmente Courier. Típica forma de mostrar trozos de códigos de programación.

Por ejemplo,

<CODE>El fichero cabecera stdio.h</CODE>

<KDB>.....</KDB>: Aparecerá en un formato fijo y en negrita, pero muchos visualizadores lo escriben en otro formato.

Por ejemplo,

<KDB>Introduce password para cambiar tu clave actual</KDB>

<DFN>.....</DFN> para las definiciones, normalmente aparece en cursiva.

Por ejemplo,

<DFN>Linux</DFN> sistema operativo de código abierto

<CITE>.....</CITE>: Se usa para citas, títulos de libros, películas, etc. Normalmente se muestra en cursiva.

<ADDRESS>...</ADDRESS>: Se utiliza para designar direcciones o cuentas de correo electrónico.

Por ejemplo,

<ADDRESS>Contacto para contrataciones: [email protected]</ADDRESS>

<BLOCKQUOTE>...</BLOCKQUOTE> permite que el texto contenido entre estas etiquetas aparecerá sangrado respecto a los márgenes izquierdo y derecho.

Por ejemplo,

<BLOCKQUOTE>

(Dulce Et Decorum Est

Bent double, like old beggars under sacks,

Knock-kneed, coughing like hags, we cursed through sludge,

Till on the haunting flares we turned our backs

And towards our distant rest began to trudge.) </BLOCKQUOTE>


51

<DEL>...</DEL> permite continuar mostrando trozos del texto que se han corregido pero, presentando el texto tachado.

Por ejemplo,

<DEL>ideas para la página html</DEL>

<INS>...</INS> es complementario a <DEL>, indica el texto que sustituye al que ya no es válido, presentándolo subrayado.

Por ejemplo,

<INS>Sustituyendo texto por el nuevo texto</INS>

<ACRONYM>...</ACRONYM> se usa para indicar abreviaturas.

<SUP>...</SUP>: se usa para indicar que un texto es un superíndice.

Por ejemplo,

el piso tiene 80 m<SUP>2</SUP>

<SUB>...</SUB> se usa para indicar que un texto es un subíndice.

Por ejemplo,

la fórmula del agua es H<SUB>2</SUB>O

Los ejemplos se mostrarían por pantalla de esta forma,

3.5. Enlaces de hipertexto

Estructura de un enlace: la dirección de internet o URL.

Un enlace se identifica fácilmente dentro de una página. Al pasar por encima del texto o la imagen el puntero del ratón y se podrá ver como el puntero cambia su forma original transformándose por regla general en una mano con un dedo señalador (u otro símbolo programado).

Estos elementos suelen aparecer coloreados y subrayados para que el usuario no tenga dificultad en reconocerlos.

El atributo más importante de la etiqueta <A> es href que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.

Por ejemplo para crear un enlace a la página principal de Google,

<A href="http://www.google.com">Página principal de Google</A>


52

En este otro ejemplo, el enlace apunta a una imagen, que se mostrará en el navegador cuando el usuario haga clic.

<A href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondo de escritorio</A>

Estilos de enlaces.

Un enlace de hipertexto permite que el navegador vincule al documento con:

- Un nuevo lugar del mismo documento.

Habrá que poner una marca en el punto de destino para que el enlace indique certeramente donde queremos lleve al visitante.

Para marcar el punto de destino de un enlace, se utiliza el atributo name:

<A NAME="marca">

En la parte de texto donde queremos aparezca el enlace debemos incluir la marca <A> con los atributos adecuados donde el más importante es href, que contiene el URL o página donde ir.

La sintaxis es:

<A HREF="#marca">Visita Página Ejemplo</A> donde es muy importante el detalle de la almohadilla (#).

Por ejemplo,


53

- Un lugar posicionado en otro archivo del mismo servidor (dentro del sitio web).

En este caso simplemente debemos indicar en el atributo href el camino donde se encuentra el archivo HTML al que queremos acceder.

<A href="informa.html">INFORMACIÓN</A>

Es la forma que tenemos como programadores de relacionar todos los archivos de un mismo sitio habitualmente distribuidos en menús horizontales o verticales.

- Un lugar posicionado en otro servidor.

Este es el caso más popular que hemos visto en la definición de hiperenlaces, acceder con un clic a otro sitio web. Puede indicarse el dominio simplemente o algún archivo concreto e incluso una zona concreta de la web si se indica el símbolo # de una marca previamente puesta.

Por ejemplo,

<A href="http://www.estudiosnavarrete.com/proyectos.html>Trabajos con Estudios Navarrete</A>

Diferencias entre enlaces absolutos y relativos.

Las páginas web habituales suelen contener decenas de enlaces de diferentes tipos. La siguiente imagen muestra algunos de los tipos de enlaces de la página principal del sitio web www.thinkvitamin.com.

Sin embargo, la mayoría de enlaces de un sitio web apuntan a páginas del propio sitio web, por lo que se denominan "enlaces internos".

Además de internos/externos, la otra característica que diferencia a los enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.


54

Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que comienzan con HTML, son tan útiles que todos los sitios web las utilizan.

Las URL completas también se llaman URL absolutas, ya que el navegador no necesita disponer de información adicional para localizar el recurso enlazado. Si se utilizan siempre las URL absolutas, los enlaces están completamente definidos.

Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la información de contexto de la página web.

Para indicar al navegador que debe subir un nivel, se incluyen dos puntos y una barra (.../) en la ruta del recurso enlazado. De esta forma, cada vez que aparece .../ en una URL relativa, significa que se debe subir un nivel

Enlaces internos.

Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño de la misma.

Estos enlaces ofrecen al visitante la posibilidad de acceder rápidamente al principio o final de la página. Suelen usarse iconos muy conocidos para su identificación, como flechas hacia arriba o hacia abajo.

Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que será colocado en el destino. Supongamos que queremos crear un enlace que apunte al final de la página. Lo primero será colocar nuestro enlace origen.

<A href="#abajo">Ir abajo</A>

En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma página. En este caso, la etiqueta que escribiremos será ésta:

<A name="abajo"></A>

Actualmente existe la tendencia de crear páginas o archivos independientes con tamaños más reducidos enlazados entre ellos por enlaces locales. De esta forma evitamos el exceso de tiempo de carga de un archivo y la introducción de exceso de información que pueda desviar la atención del usuario.


55

Un ejemplo de aplicación de estos enlaces consiste en poner un pequeño índice al principio de nuestro documento donde introducimos enlaces origen a las diferentes secciones. Paralelamente, al final de cada sección introducimos un enlace que apunta al índice de manera que podamos guiar al navegante en la búsqueda de la información útil para él.

Enlaces especiales: correo electrónico. Enlaces de descarga.

Aunque la sintaxis es idéntica es interesante destacar dos tipos de enlaces diferentes por el propio contenido:

Enlaces a un correo electrónico.

Por ejemplo,

<A href="mailto:[email protected]">Enviar mensaje a [email protected]

</A>

Enlaces a un fichero multimedia, pdf, texto, sonido. Es decir, un fichero de descarga.

Por ejemplo,

<A href="canciondorada.mp3">Descargar el último hit de Los Cántaros</A>

Atributos específicos: título, destino, atajos de teclado, etc.

A la hora de mostrar la página requerida podríamos elegir entre hacerlo en la misma ventana en la que estemos o en otra ventana, es lo que llamamos definir el target o destino de la página.

Por ejemplo, para abrir la página en una nueva ventana,

<A href="http://www.paginaejemplo.com" target="_blank">Visita Página Ejemplo</A>

El atributo target="_blank" indica al navegador que debe cargar el enlace con http:// www.paginaejemplo.com en una nueva ventana.

Si no indicamos nada se abrirá en la misma ventana en la que estamos activando el enlace.

Podríamos añadir al enlace un texto de etiqueta (tag) que suele aparecer sobreimpresionado dando información de hacía donde va el enlace. Este atributo se usa en muchas marcas dentro de HTML, se trata de title.

Por ejemplo,

<A href="http://www.sevilla.org" title="Web oficial">SEVILLA</A>


56

Una de las cuestiones transversales que debemos abordar en todos los apartados del diseño web es la accesibilidad y en este caso es sencillo permitir el acceso por teclado al enlace que en muchos sitios webs sólo es accesible por ratón. Para ello podemos asignar una letra o número a dicho enlace y acceder a él usando SHIFT+ALT+letra.

Desde el código debemos añadir el atributo accesskey=letra.

Por ejemplo,

<A href="http://www.sevilla.org" title="Web oficial" accesskey="P">SEVILLA</A>

3.6. Imágenes

El uso de imágenes es uno de las razones que permitió a la World Wide Web dar el salto mediático. Incluir imágenes en una presentación web es muy sencillo aunque partimos de la restricción de sólo poder usar los formatos GIF, JPEG o PNG.

La etiqueta a emplear es IMG con los siguientes atributos principales:

src: Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL donde está la imagen.

align: Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.

alt: comillas podremos escribir un texto que sustituirá a la imagen si no se carga por alguna razón

width: Le indicamos el ancho de la imagen si no queremos que use el que traiga el propio archivo.

height:; Al igual que el atributo width pero en este caso con el valor de la altura.

border: Nos permite especificar el ancho de un borde que rodea la imagen.

Por ejemplo,

<HTML><HEAD>

<TITLE>Ejemplo</TITLE></HEAD>

<BODY>

<H1>Imágenes</H1>

<IMG SRC="foto1.jpg" width="140" height="210" border="0" alt="El contenido bla bla bla">

Un texto cualquiera.

</BODY></HTML>


57

Formatos de imágenes.

En Internet los tres formatos de imagen que más se utilizan para en el diseño de páginas web son: .jpg, .png y .gif.

Las características principales de los 3 formatos de imagen son:

- JPG (o JPEG, Joint Photographic Experts Group): Formato con muy buen rendimiento en fotografías y/o ilustraciones complejas; por tanto, es un formato utilizado para compartir imágenes con tonos continuos en la web.

Este formato da soporte a los modelos más usuales de color como son CMYK (cyan-magenta-yellow-cyan) y RGB (red-green-blue), incluso para modelos en escala de grises, lo que amplía mucho la gama de tonalidades que se pueden obtener.

En la siguiente imagen puede comprobarse las diferencias en el color entre el modelo RGB (izquierda) y el modelo CMYK (derecha).

El formato JPEG comprime el tamaño del archivo final utilizando un algoritmo de compresión con pérdida. Es decir, que para representar cierta cantidad de información (en este caso de color) se utiliza una menor cantidad de dicha información. Por eso se dice que es un formato comprimido.

En los programas de edición de imágenes digitales, al retocarlas o guardarlas se puede especificar qué nivel de compresión aplicamos y qué pérdida de calidad se desea para cada archivo.

RECUERDA: Si se aplica la opción de máxima compresión, la imagen resultante será difícil de reconocer, pero existen configuraciones que reducen el tamaño final del archivo pero producen una imagen relativamente buena. Ahí está la clave.

- GIF (Graphics Interchange Format): Muy práctico para los dibujos e imágenes sencillas, especialmente si tienen pocos matices. GIF no es el formato adecuado para guardar fotografías que queremos tengan gran calidad.

Los expertos concretan que este formato es ideal para imágenes que tengan grandes bloques de colores planos como ilustraciones simples o logotipos. Además, tiene la capacidad de conservar la transparencia.

El formato GIF trabaja con el algoritmo de compresión LZW, y por tanto, los fabricantes de software que utilizan imágenes GIF deben pagar a la propietaria los derechos que es Unisys. Quizás sea esta una de las razones del aumento de la popularidad del formato PNG.

- PNG (Portable Network Graphics): Formato libre de derechos, que intenta reunir características de los anteriores dos formatos. Se le considera válido para todo tipo de imagen y de transparencias. Está basado en el formato GIF.

Los navegadores más antiguos pueden dar problemas con este formato que está preparado para soportar imágenes RGB, escalas de grises y mapa de bits.


58

En el siguiente cuadro puede observarse una comparación de los formatos con sus ventajas y desventajas.

Características de imágenes: tamaño, título, textos alternativos.

Hemos visto algunos atributos de IMG pero hay que destacar y profundizar en algunos de ellos de forma especial:

Atributo alt.

Dentro de las comillas de este atributo colocaremos una brevísima descripción de la imagen. Hay que saber que durante el proceso de carga de la página, cuando la imagen no ha sido todavía cargada, el navegador mostrara esta descripción, con lo que el visitante se puede hacer una idea de lo que va en ese lugar.

Hay usuario que desactivan el muestreo de imágenes ya sea por la lentitud en las conexiones o porque van a usar lectores de pantalla que son aplicaciones para personas con dificultades visuales que no muestran imágenes y lo que ofrecen es la posibilidad de leerlas. La accesibilidad es uno de los pilares del diseño web.

Por ejemplo,


59

Atributos height y width.

Es importante conocer las dimensiones de las imágenes y para ello simplemente hacemos clic con el botón derecho sobre la imagen vista por el navegador para luego elegir propiedades sobre el menú que se despliega.

Por ejemplo,



Atributo border.

De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente útil cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dicho caso tendremos que especificar border="0".

Atributos vspace y hspace

Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.

Atributo lowsrc.

Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolución (que ocupa muy poco y que se transfiere muy rápido). Posteriormente descarga y muestra la imagen de resolución adecuada (señalada con el atributo src, que se supone que ocupará más y será más lenta de transferir).


60

Enlaces en imágenes.

Aunque lo normal en la web es que los enlaces sean textos, también podemos extender la capacidad de hacer enlaces con imágenes. De esta forma, cuando pulsemos sobre una imagen, esta actuará como enlace y nos llevará al destino demarcado por el enlace.

Por ejemplo,

<A title="El Caserío" href="http://www.ElcaserioDeTrebujena.com"><IMG src="caserio.jpg" alt=" El Caserío " /></A>

Imágenes de fondo.

Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.

<BODY background="fondo.gif">

Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo.

NOTA: Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.

3.7. Listas

Características.

HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas. Una de sus características principales es la de proporcionar la posibilidad de sintetizar información textual de lo que estemos mostrando en la web.

HTML ofrece a los autores varios mecanismos para especificar listas de información. Todas las listas deben contener uno o más objetos de lista. Las listas pueden contener:

Información no ordenada.

Información ordenada.

Definiciones

Ordenación de listas.

Listas no ordenadas. Etiqueta <UL>.

Las listas no ordenadas van dentro de la etiqueta <UL> y de su cierre </UL>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <LI> y su cierre.

Si no le indicamos nada a la etiqueta <LI>, ésta se generará de forma automática. El atributo type nos permite elegir entre varios tipos de iconos o viñetas.


61

Así podemos hacer que la lista esté definida por puntos negros, por puntos con el fondo blanco o por cuadrados. Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.

Por ejemplo,

<UL>

<LI type="circle">Esto es un tipo de punto.</LI>

<LI type="square">Este es otro.</LI>

<LI type="disc">Y este es otro diferente.</LI>

</UL>

Listas ordenadas: <OL>.

Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.

Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:

<OL>

<LI value="20">Este será el número 20. </LI>

<LI>Este será el 21. </LI>

<LI> Este será el 22. Y así sucesivamente. </LI>

</OL>

Anidamiento en listas.

Las listas se pueden anidar unas dentro de otra aunque sean de tipos distintos. Una lista sólo puede contener elementos LI, que a su vez pueden contener otros elementos HTML.

Es importante no poner espacios entre <LI> y el texto, porque este espacio sí es significativo y modifica la indexación del campo añadiendo un espaciado extra.

Por ejemplo,

<H2>Menú</H2>

<OL>

<LI>Primer plato</LI>

<UL>

<LI>Macarrones</LI>

<LI>Gazpacho</LI>

<LI>Judías pintas</LI>

</UL>

</OL>


62

Otros tipos de listas: listas de definición.

Las listas de definición están constituidas por términos y su subsiguiente definición.

La forma de implementar las listas de definición es con la marca <DL> de la siguiente forma:

<DL>

<DT> Nombre del término</DT>

<DD> Definición del término</DD>

</DL>

Cada término de la lista de definición se indica con la marca <DT> y no creará sangría, mientras que la descripción del término se indica con la marca <DD> y sangrará hacia la derecha para destacar el término. Antes y después de la descripción de cada palabra clave incorporan un salto de línea. Las listas de definición también pueden anidarse.

Por ejemplo,


63

3.8. Tablas

Estructura básica.

Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no al revés).

Las tablas en HTML tienen tres etiquetas que permite crearlas de forma ágil: <TABLE> para crear la tabla, <TR> para crear cada fila y <TD> para crear cada columna.

La etiqueta <TABLE> encierra todas las filas y columnas de la tabla. Las etiquetas <TR> definen cada fila de la tabla y encierran todas las columnas. La etiqueta <TD> definirá entonces a cada una de las celdas de datos.

Algunos de los atributos básicos son:

abbr = "texto": Para describir el contenido de la celda.

colspan = "numero" - Número de columnas que ocupa esta celda

rowspan = "numero" - Número de filas que ocupa esta celda

Formato de tablas: bordes, alineación, tamaño, etc.

Para definir una tabla usaremos la etiqueta <TABLE>, que tiene el siguiente formato:

<TABLE BORDER="tamaño del borde" >

... Definición de la tabla ...

</TABLE>

En la etiqueta inicial TABLE definiremos los atributos que afectarán a toda la tabla, todos los atributos son opcionales. Todo lo que se incluya dentro de la instrucción de tabla se considerará como tal, pudiendo definir tablas anidadas (tablas dentro de tablas).

Puede presentar los siguientes atributos:

- border=n

Si se especifica se dibujará un borde alrededor de la tabla y separando los distintos campos que presenta. Aunque no se dibuje el borde sí se mantendrá el espaciado los elementos de la tabla.

- cellspacing=n

Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto será 2. Si se indica 0 no habrá ningún espacio entre las celdas.

- cellpadding=n

Es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si se indica 0 las celdas aparecerán sin separación.


64

- width=valor o porcentaje%:

Será el ancho de la tabla, se puede indicar como valor absoluto o como porcentaje del ancho del documento. En el primer caso se definirá en puntos y en el segundo en función del tamaño del documento (tamaño de la ventana del visualizador). Se recomienda utilizar tamaños de tabla en porcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamaño del documento.

- height=valor o porcentaje%

Definirá el alto de la tabla, al igual que WIDTH, se puede indicar en valor absoluto o en porcentaje. En este caso es más recomendado en valor absoluto ya que el alto es más difícil que pueda coincidir con el tamaño de la ventana.

Dentro de la instrucción de la tabla se incluirán las diversas etiquetas que definen el contenido de la tabla.

Título de la tabla.

Siempre se mostrará centrado horizontalmente. Con la siguiente sintaxis:

<CAPTION align=top|bottom>Titulo de la tabla</CAPTION >

Con el atributo align indicaremos si el título debe aparecer arriba (top) o debajo (bottom) de la tabla.

<TR> Fila de la tabla.

Por cada elemento TR que se incluya se creará una fila de la tabla. No es necesario indicar la etiqueta de cierre </TR>. En caso de tablas anidadas será necesario incluir la etiqueta de cierre.

Formato de contenido de celdas

<TH> y <TD> Una celda de la tabla.

Define cada una de las celdas de una fila de la tabla, TH se usará para definir una celda de tipo cabecera, en este caso se mostrarán destacados en negrita y TD para definir una celda de datos. Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila. Existirá una columna por cada elemento TD ó TH que se defina. Aunque se puede indicar la etiqueta de cierre, no es necesario al tomarse implícitamente. Utilizaremos los elementos TH para los títulos de las filas o columnas y los elementos TD para los datos.

La sintaxis es la siguiente:

<TH align= (left | center | right | justify | decimal) valign= ( top | middle | bottom | baseline ) width=tamaño bgcolor=color rowspan=“filas que debe contener la celda” colspan= “columnas que ocupa la celda”>

<TD align= (left | center | right | justify ) valign= ( top | middle | bottom ) width=tamaño bgcolor=color rowspan=“filas que debe contener la columna” colspan= “columnas que ocupa la celda”>


65

Los atributos usados son los siguientes:

align. Indica la alineación horizontal del dato dentro de la celda, se especificará individualmente para cada una de las celdas. Su significado es igual que el expresado para la etiqueta TR.

valign. Indicará la alineación vertical del dato dentro de la celda. Se especifica individualmente para cada celda, el formato es el mismo que el expresado para TR.

width. Especifica el ancho que tendrá la columna de la tabla, se puede especificar el valor absoluto, en puntos de la pantalla o en tanto por ciento del tamaño de la tabla.

bgcolor. Indicará el color de fondo que tendrá la celda de la tabla. El color hay que indicarlo independientemente para cada una de las celdas de la columna. El formato para definir los colores es el mismo al que se usa para los atributos de BODY.

Agrupamiento de filas y columnas.

rowspan

Indicará el número de filas que ocupará está celda en la misma fila. En este caso la celda se expandirá ocupando tantas celdas de la tabla inicial como se especifique. Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla, ó bien, crear una fila que ocupen toda la tabla.

colspan

Indicará el número de columnas que ocupará la celda actual, obtendremos una celda que ocupa varias columnas. Igual que el anterior pero para el caso de las columnas.

nowrap

Si la usamos las líneas de texto no se dividirán dentro de la celda en varias líneas. Por tanto si la línea es muy larga la columna de la tabla será tan ancha como la línea, solo se dividirá si se usa el elemento.

Por ejemplo,

<TABLE border="1">

<TR>

<TH>Origen</TH>

<TH>Destino</TH>

<TH><FONT color="red">Compañía</FONT></TH>

</TR>

<TR>

<TD>Málaga</TD>

<TD>Madrid</TD>

<TD>ALSA</TD>

</TR>

<TR>


66

<TD>Cádiz</TD>

<TD>Almería</TD>

<TD><i>GadirBUS</i></TD>

</TR>

<TR>

<TD>Sevilla</TD>

<TD>Málaga</TD>

<TD>ALSA</TD>

<TR>

<TD colspan="3">Todos los autobuses equipados con WIFI</TD>

</TR>

</TABLE>

Tablas anidadas.

El lenguaje HTML también nos da la posibilidad de anidar tablas es decir podemos insertar o colocar tablas unas dentro de otras tablas.

Para poder anidar tablas simplemente tenemos introducir la estructura de una tabla completa dentro de una celda.


67

Por ejemplo,

Buenas prácticas en el uso de tablas

El uso de tablas para dar forma a una página web ya no se recomienda en absoluto, aunque funciona. Para dar forma a una web es mejor usar capas o DIVs. Desde que salió la versión HTML5 incluso se tiende a no usar ni siquiera capas o DIVs, sino algunas etiquetas nuevas de HTML5. Las tablas se usan estrictamente para lo que están inventadas, para colocar datos, no para dar forma a una web. En los estándares de la W3C así viene recogido.

3.9. Marcos (frames)

Los marcos HTML permiten a los autores presentar documentos con vistas múltiples, que pueden ser ventanas o subventanas independientes. Las vistas múltiples ofrecen a los autores una manera de mantener cierta información visible mientras otras vistas se desplazan o se sustituyen. En cualquier caso, los frames no vienen incluidos en las recomendaciones de la W3C por los problemas que ocasiona a la accesibilidad de los sitios web.

Por ejemplo, dentro de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un menú de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado al navegar por el segundo marco.

Creación de marcos.

La característica más importante es que haciendo clic sobre un vínculo en un frame, puede cargarse otro documento HTML en un sector de la página. Frecuentemente se usa tener un área estrecha en un panel lateral donde se encuentra un índice con vínculos que cargan las distintas páginas.

Para crear una página con frames, debemos crear un documento HTML especial en el que se definen las zonas su distribución, tamaño y contenido.


68

Ejemplo de página con dos frames distribuidos en columnas (una al lado de la otra) y que la izquierda ocupa el 20% del ancho de la pantalla, y el otro, el 80% restante

Un valor relativo se consigue poniendo un asterisco (*), en vez de un número. Esto se interpreta como que ese frame debe tener el espacio restante. En este ejemplo, habrá tres filas, la superior y la inferior de una altura fija de 100 píxeles, y la del medio ocupará el espacio restante:

Si hay un número antes del asterisco, ese frame tendrá esa cantidad adicional, "2*,*" daría dos tercios para el primer frame y un tercio para el otro.

Si hay más de un frame con asterisco, ese espacio se dividirá por igual entre ellos.

Por defecto, los frames se muestran con un borde de separación entre ellas, para eliminarlo, se debe incluir el atributo frameborder=0 dentro de la etiqueta FRAMESET y, para que también desaparezcan las separaciones entre frames hay que añadir el atributo framespacing=0.

La etiqueta FRAME posee otros atributos aparte de name y src:

marginwidth="número" y marginheight="número" controlan los márgenes dentro de un frame.

scrolling="yes|no|auto" define si el frame tendrá o no una barra de desplazamiento.

noresize. Como vimos, el atributo TARGET indica donde se mostrará el contenido.

El nombre puede ser cualquiera siempre que el primer carácter sea alfanumérico y no pueden incluirse algunos cuyos significados están reservados:

target="_blank" hace que se abra el vínculo en una nueva ventana.

target="_self" hace que el vínculo se cargue en el propio frame.

target="_top" hace que el vínculo se cargue a pantalla completa, suprimiendo todos los frames.

Ventajas e inconvenientes en el uso de marcos.

Ventajas de usar frames.

La navegación de la página será más rápida. Aunque la primera carga de la página sería igual, en sucesivas impresiones de páginas ya tendremos algunos marcos guardados, que no tendrían que volverse a descargar.

Crear páginas del sitio sería más rápido. Como no tenemos que incluir partes de código como la barra de navegación, título, etc. crear nuevas páginas sería un proceso mucho más rápido.


69

Partes de la página (como la barra de navegación) se mantienen fijas y eso puede ser bueno, para que el usuario no las pierda nunca de vista.

Mantienen una identidad del sitio donde se navega, pues los elementos fijos conservan la imagen siempre visible.

Inconvenientes de usar frames.

Quitan espacio en la pantalla. El espacio ocupado por los frames fijos se pierde a la hora de hacer páginas nuevas, porque ya está utilizado.

Obligan al visitante a entrar por la declaración de frames. Si no lo hacen así, sólo se vería una página interior sin los recuadros. Estos recuadros podrían ser insuficientes para una buena navegación por los contenidos y podrían no conservar una buena imagen corporativa.

La promoción de la página sería, en principio, más limitada porque sólo es posible hacerlo en los buscadores de la página principal.

Se considera por parte de algunos autores que las zonas fijas están limitando la movilidad por la web.

Algunos navegadores no los soportan. Los bookmarks o favoritos no funcionan correctamente en muchos casos. Si queremos incluir un favorito a una página de un frame que no sea la portada podemos encontrar problemas.

Puede que el botón de atrás del navegador no se comporte como deseamos.

Soporte de navegadores.

Para evitar que los navegadores que no soportan frames no carguen la página utilizamos la etiqueta NOFRAMES y la colocamos a continuación de las etiquetas FRAME.

Por ejemplo,

<NOFRAMES>

Para los navegadores que no soportan marcos.

</NOFRAMES>

Formateado de marcos.

La diferencia fundamental es que no se utiliza la etiqueta BODY sino la etiqueta FRAMESET. En ella se agrega un atributo cols="tamaño" con las medidas de las columnas. Si hubiéramos distribuido una sobre la otra, el tributo a usar sería rows (filas). El ancho de las columnas o la altura de las filas pueden establecerse como porcentaje o en valores absolutos (en pixeles).

Luego, con la etiqueta FRAME indicamos cuál será el contenido de cada sector mediante el atributo src (source, origen). También podemos agregarle un atributo name para poder referenciar el sector.

Ya vimos que la etiqueta FRAMESET tiene como atributos principales cols y row.


70

Por ejemplo,

Enlaces entre contenidos de marcos.

Los archivos que serán el contenido son documentos HTML normales con sólo una diferencia, los vínculos a las páginas que queremos que se muestren en los frames deben incluir el atributo extra target que tendrá como valor el nombre dado al frame.

Por ejemplo la página URLcontenido1 será

El target (destino) sirve para hacer que al ser activado el enlace no se cargue en el frame del vínculo sino en otro, en el que hayamos llamado con ese nombre en el documento de definición de los frames.

Marcos anidados.

Como cualquier etiqueta, los frames pueden anidarse, es decir, ponerse uno dentro de otro.

Por ejemplo,


71

Marcos incrustados (iFrames).

IFRAME nos permite crear una zona dentro de la página donde se puede incrustar otra web. Es un rectángulo del tamaño que consideremos oportuno que tiene asociada una página web que se carga en dicho espacio. Será independiente y autónoma respecto al contenido de la página madre. Puede configurarse para que muestre scroll (barras de desplazamiento) o el tamaño del borde.

Los atributos que pueden añadirse son:

src: Indica la URL de la página a mostrar.

width: La anchura del rectángulo o recuadro.

height: La altura del rectángulo o recuadro.

frameborder: Define si queremos o no que haya un borde en el frame. Los valores posibles son 0 | 1.

scrolling: Señala si se quiere que aparezcan barras de desplazamiento para ver los contenidos del iframe completo. Los valores posibles son: yes, no o auto (sólo saldrá si es necesario).

marginwidth: Para definir el margen izquierdo y derecho que debe tener la página que va dentro del iframe, con respecto al borde.

marginheight: Como marginwidth, pero para la dimensión del margen por la parte superior e inferior.

Por ejemplo,

<iframe src="http://www.elpais.es" width=300 height=450 frameborder="0" scrolling="yes"

marginwidth="2" marginheight="4">¡¡Tu navegador no soporta frames!!</iframe>

3.10. Formularios

Descripción general y uso de formularios.

Un formulario puede insertarse en un documento HTML a través del elemento FORM que actuará como contenedor para todos los elementos de entrada. La información introducida debe ser enviada a un servidor (agente procesador) utilizando el atributo action. Habitualmente se indica el archivo que recogerá la información para procesarla.

NOTA: Para manejar la información de un formulario debemos usar un script del lado servidor.

Cómo serán enviados los valores de los campos debemos especificarlo con el atributo method:

post, los datos del formulario son adjuntados al cuerpo del mismo.

get, los datos del formulario son adjuntados a la URL.

De este modo, un formulario simple puede tener la siguiente declaración:

<FORM method="post" action="handler.php">

...Controles...

</FORM>


72

La mayoría de los controles de entrada son visuales y pueden interactuar con el usuario. Los elementos de entrada de un formulario pueden ser definidos mediante el uso de cuatro elementos: el elemento HTML input, el elemento HTML button, el elemento HTML select y el elemento HTML textarea.

Como regla general para todos los controles, el atributo name identificará la información para el agente procesados, y su valor dependerá de la naturaleza del control (algunas veces, como en las casillas de verificación o botones radio, será el contenido del atributo value).

Por ejemplo,

<FORM method="post" action="agente.php">

Ingresa un texto: <INPUT name="ingresatexto" type="text" value="Por favor, ingresa aquí">

</FORM>

El valor que pasaremos será el texto ingresado por el usuario, es decir, el contenido de la caja de texto.

- Entradas de password.

Este control actúa exactamente como el de entrada de línea con la excepción de que "esconde" los caracteres ingresados mostrándolos como puntos o asteriscos para evitar que los usuarios vean su contenido.

Es definido utilizando el valor pass en el atributo type, y su valor inicial puede ser definido usando el atributo value.

Por ejemplo,


Ingresa tu contraseña: <input name="contrasena" type="password" value="123456">

</FORM>

- Entrada de texto sin restricciones.

Este control permite a los usuarios ingresar texto en una o más líneas. Se inserta utilizando TEXTAREA y puede ser usado para recoger textos largos como los comentarios.


Ingresa tus comentarios:<BR><TEXTAREA name="comentarios" rows="2" cols="30">...Tus

comentarios aquí...</TEXTAREA>

</FORM>


73

Elementos de un formulario: texto, botones, etc.

- Casillas de verificación.

Una casilla de verificación es un pequeño cuadrado que podrá ser marcado o desmarcado según interese al visitante. Cada una de las casillas puede encontrarse en dos situaciones: marcada ó no marcada (checked ó unchecked). Aunque pueden agruparse para ordenarlas dentro del conjunto del formulario siempre se trabajan individualmente ya que el resto de casillas no influyen en lo que seleccionemos para una en concreto.

Usaremos la etiqueta HTML <INPUT> con el valor "checkbox" en su atributo "type". Inicialmente, la casilla aparece sin marcar a menos que se especifique lo contrario usando el atributo booleano (verdadero o false) "checked". Para hacer que una casilla aparezca inicialmente como casilla marcada escribiremos como atributo de la etiqueta input: checked="checked".

La sintaxis básica sería la siguiente (puede verse con más detalle en apartados anteriores de esta misma unidad de aprendizaje):

<FORM method="get" action="http://aprenderaprogramar.com/action.php">

Selecciona tus intereses:<BR>

<INPUT name="cbipeliculas" type="checkbox" />Películas<BR>

<INPUT name="cbilibros" type="checkbox" checked="checked">Libros<BR>

<INPUT name="cbiinternet" type="checkbox">Internet</FORM>

Podemos ver un ejemplo de una web donde tras marcar las casillas que nos interesa nos muestra las que hemos elegido junto al resto de datos registrados.


74

- Botones radio o 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. La sintaxis es type=”radio” y hay que destacar que para todos los INPUT relacionados deben llevar el mismo name y diferente value.

<FORM action=”destino.php" method="get">

Sexo <BR>

<INPUT type="radio" name ="sexo" value="hombre" checked="checked"> Hombre<BR>

<INPUT type="radio" name="sexo" value="mujer"> Mujer<BR>

<INPUT type="submit" name="registro" value="Enviar”></FORM>

Podemos ver otro ejemplo en el que las opciones son más de dos y de forma horizontal,

- Listas.

Existen tres tipos de listas desplegables disponibles:

1. El primero es el de las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten seleccionar un valor.

2. El segundo tipo de lista es el que sólo permite seleccionar un valor pero muestra varios a la vez.

3. El tercer tipo de lista desplegable es aquella que muestra varios valores y permite realizar selecciones múltiples.

Los tres tipos de listas desplegables se definen combinando atributos en la misma etiqueta <SELECT>:

size = "numero" cuyo valor indica el número de filas que se muestran de la lista (por defecto sólo se muestra una).

multiple = "multiple". Si se incluye se permitirá seleccionar más de un elemento.

disabled: Indica al formulario que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos.


75

Cada elemento de la lista se define mediante la etiqueta <OPTION>:

selected = "selected". Donde indicamos si el elemento aparece seleccionado por defecto al cargarse la página.

value = "texto". El valor que se envía al servidor cuando el usuario elige esa opción.

disabled: Indica al formulario que el elemento estará desactivada, por lo que el usuario no podrá seleccionarlo.

En el siguiente ejemplo pueden verse las diferentes posibilidades,

<FORM action=”destino.php" method="get">

Sistemas operativos<BR>

<SELECT id="so" name="so">

<option value="" selected="selected">- selecciona -</option>

<option value="windows">Windows</option>

<option value="mac">Mac</option>

<option value="linux">Linux</option>

<option value="otro">Otro</option>

</SELECT><HR>


<SELECT id="so2" name="so2" size="5">

<option value="windows" selected="selected">Windows</option>

<option value="mac">Mac</option>

<option value="linux" selected>Linux</option>


</SELECT><HR>


<SELECT id="so3" name="so3" size="5" multiple="multiple">

<option value="windows" selected>Windows</option>

<option value="mac" disabled>Mac</option>

<option value="linux">Linux</option>


</SELECT></FORM>


76

En el primero de los casos para ver la lista hay que desplegarla la flecha y para seleccionar varias en la tercera variante hay que hacerlo con CTRL-clic.

Cuando aparece en color gris es que la opción no está disponible (Mac en caso 3) y el valor por defecto se ha variado con selected en el caso 2.

Los mismos formularios vistos en Opera,


77

- Botones de envío.

La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el usuario. Es sobre el que haremos clic para enviar una búsqueda o para enviar datos a un servidor.

En los diferentes ejemplos que estamos desarrollando ha ido apareciendo en la parte final de los formularios,

<INPUT type="submit" name="enviar" value="Enviar">

<INPUT type="submit" name="buscar" value="Buscar">

Ejemplo de botones de envío,

- Botones de restablecimiento.

Este tipo de botones restablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con el tag HTML input con el valor "reset" en su atributo "type".

Ejemplo de botones de restablecimiento,

En el ejemplo anterior, puedes probarse la funcionalidad del botón cambiando los valores de los elementos y presionando el botón para restablecer los campos a sus valores iniciales.


78

- Botones de imagen.

Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia que los de imagen son representados visualmente con la imagen especificada en el atributo src.

Por ejemplo,

- Botones de contenido.

Pero su características es que permite a los autores insertar contenido dentro de los mismos. Esto significa que una porción de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).

Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo type).

Por ejemplo,

- Entrada de archivos.

La entrada de archivos puede ser utilizada para subir archivos al servidor.

Es importante que en los formularios con subida de archivos se especifique el valor multipart/form-data en el atributo enctype de la etiqueta HTML FORM, de otro modo, el archivo no será enviado.

Por ejemplo,


79

Este control muestra una caja de texto donde el usuario debe especificar la ruta del archivo (que será adjuntado localmente por el navegador) que será enviado al servidor.

Procesamiento de formularios.

Hay que conocer la diferencia entre los métodos GET y POST para mandar información de los formularios al servidor.

- Características de GET.

No es muy seguro, ya que los datos viajan junto a la dirección y son vistos por todo el mundo en la barra de direcciones.

Por ejemplo:

http://sav.us.es/miprograma.cgi?nombre1=valor1&nombre2=valor2

El tamaño de la información enviada no puede superar los 1024 bytes.

El método GET es ídem potente significando que los efectos colaterales de enviar varias veces el mismo documento es el mismo de enviar sólo uno.

Si se quiere que cada envío sea procesado, evite utilizar GET.

- Características de POST.

Con POST el servidor recibe la información en la entrada estándar. Esto no es tan rápido y fácil como el método GET, pero es más versátil.

La información enviada no aparece en la URL, se incluye dentro de una variable junto a la petición del protocolo HTTP que se envíe al servidor Web, por tanto no es visible ni manipulable por el usuario.

No tiene límite de tamaño.

Por ejemplo, se pueden mandar archivos enteros utilizando POST. También, el tamaño de los datos no es limitado como en el método GET.

Si los datos son pocos y no nos importa su confidencialidad o manipulación, utilizamos GET. Si son largos o privados o importantes, no lo dudaremos usaremos POST.

El método que hayamos elegido será el valor del atributo method del elemento FORM.

Formateado de formularios: atajos de teclado, orden de edición, grupos, etiquetas, etc.

La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contener el formulario.

Algunos atributos que ayudan a la accesibilidad, usabilidad y comprensión de los formularios:

maxlenght="n" que limita la cantidad de caracteres que admitirá el campo.

size="n", que establece el tamaño de la caja de texto en pantalla.

disabled, que desactiva la caja de texto, por lo que el usuario no podrá escribir nada en ella.

readonly. Obliga a que se rellene el campo para que el formulario sea enviado.

tabindex ="n", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.

accesskey=letra que combinada habitualmente con SHIFt+ALT pone el cursor dentro de la caja correspondiente.


80

Por ejemplo,

<FORM action="" method="post" enctype="text/plain" name="miform">

introduce tu nombre:

<INPUT type="text" maxlength="10" size="10" name="nombre" accesskey="k" tabindex="1" onlyread>

</FORM>

3.11. Elementos específicos para tecnologías móviles

Selección del lenguaje de marcas para tecnologías móviles.

Es fundamental que el código que queramos funcione en dispositivos móviles supere los tests de compatibilidad HTML 5. Las diferencias con un archivo HTML tradicional son mínimas, pero merece la pena tenerlas en cuenta, pues los navegadores para móviles tienen generalmente compatibilidad con esta nueva versión del lenguaje de marcación.

Tendremos pues que utilizar el DOCTYPE del HTML5,

<!DOCTYPE html>

No olvidaremos la etiqueta META para definir el juego de caracteres que estamos utilizando con el atributo charset,

<META charset="UTF-8">

Existen además diversas etiquetas META que nos permiten especificar la configuración del documento HTML para adaptar de la mejor forma posible la web a los dispositivos móviles. Estos metadatos fueron creados inicialmente por distintas empresas de tecnología móvil, pero en algunos casos la utilidad de la etiqueta ha sido tan importante que han sido adoptados e interpretados también por otros fabricantes.

Algunos ejemplos de etiquetas META,

<META name="MobileOptimized" content="width">

Hace que el navegador adapte el contenido de la página a la ventana del dispositivo.

<META name="HandheldFriendly" content="true">

Esta etiqueta informa al navegador que la página está optimizada para móviles y que, por tanto, no se debe escalar su contenido al mostrarlo en la pantalla de los dispositivos.

<META name="viewport" content="width=device-width, initial-scale=1">

Esta etiqueta indica al navegador que el sitio web está optimizado para móviles, pero en este caso nos sirve también para especificar cómo el cliente web debe interpretar el documento y cómo debe renderizarlo.


81

Algunos frameworks existentes para webs responsives y que tienen mucha aceptación en el mercado son:

- Bootstrap. Con este entorno se diseña al contrario de lo habitual, primero para los dispositivos móviles y posteriormente vamos adaptando las resoluciones mayores. Es posible de forma sencilla incluir alertas, barras de progreso y botones.

Ejemplo de pantalla con Bootstrap,

- Boilerplate. Estamos ante uno de los más sencillos entornos de trabajo pues sólo utiliza tres clases. Desde su página podemos descargar un paquete que incluye todos los archivos necesarios junto con una plantilla PSD, una demo y una página en HTML5 creada para servir como punto de partida.

Ejemplo de botones en Boilerplate,

- Modernizr. Se trata de una librería Javascript para comprobar si los navegadores son capaces de mostrar desarrollos de aplicaciones web con HTML5 y CSS3 que funcionen en cualquier dispositivo. Permite saber qué partes del estándar están presentes en el navegador del usuario que nos visita.

- Skeleton. Se trata de una lista de archivos CSS que permiten crear rápidamente este tipo de sitios. Aporta elementos básicos como botones y formularios sin aplicar código Javascript.

Ejemplo de código CSS


82

Hojas de estilo en dispositivos móviles.

Las hojas de estilo en su versión CSS3 permiten filtrar estilos según dispositivos de salida pudiendo aplicar diferentes conjuntos de propiedades para los estilos específicos de la web en la versión móvil.

Es decir podremos utilizar una media query para cargar un archivo .css solo para determinadas resoluciones, basta con añadir entre las etiquetas <HEAD></HEAD>.

Existe un valor específico para dispositivos móviles dentro de los posibles valores del atributo media, es handheld.

Por ejemplo, este código mostrara una hoja de estilos para Pcs y otra para equipos móviles:

<!– hoja de estilos para móvil –>

<LINK href=”CSSmoviles.css” rel=”stylesheet” type=”text/css” media=”handheld”>

<!– hoja de estilos para escritorio–>

<LINK href=”CSSescritorio.css” rel=”stylesheet” type=”text/css” media=”screen”>

Como suele ocurrir con los estándares, algunos navegadores leen solamente la hoja de estilos asignada a handheld, otros solo la de screen, y otros ninguna.

Afortunadamente CSS3 incluye los Media Queries, una serie de condiciones y requisitos que nos permiten seleccionar una hoja de estilos especifica según las capacidades específicas de cada dispositivo. Con Media Queries tienes parámetros más inteligentes para mostrar las hojas de estilo como el ancho y alto del navegador o del equipo, la orientación actual de la pantalla (horizontal o vertical) y hasta la resolución.

Por ejemplo,

<!– Esta hoja de estilos se muestra si tu dispositivo tiene como máximo 480px de ancho. –>

<LINK href=”css/movil.css” rel=”stylesheet” type=”text/css” media=”handheld, only screen and (max-device-width: 480px)” >

<!– Este otro query solo se muestra en equipos de escritorio en una ventana de al menos 481px de ancho. –>

<LINK href=”css/escritorio.css” rel=”stylesheet” type=”text/css” media=”screen and (min-width: 481px)”>

3.12. Elementos en desuso (deprecated)

Texto parpadeante.

Hacer parpadear un texto es muy sencillo, lo podremos utilizar para resaltar alguna frase o texto pero su uso puede causar problemas y dificultades a muchas personas para acceder a la información. Son un caso claro de trabas a la accesibilidad.

Por ejemplo,

<BLINK>TEXTO QUE PARPADEA</BLINK>


83

Marquesinas.

Son pequeñas ventanas donde vemos un texto desplazarse. Son un caso similar al del texto parpadeante y como las anteriores están totalmente desaconsejadas por la W3C.

Por ejemplo,

<MARQUEE>Texto desplazándose</MARQUEE>

Alineaciones.

La mayoría de los atributos de alineación usados habitualmente en HTML han caído en desuso debido a la introducción de las hojas de estilo CSS. No sólo los atributos align dentro de las etiquetas si no también, muy especialmente, la marca <CENTER> que se hizo muy popular en los inicios de HTML.

Por ejemplo,

<CENTER><H2>Conceptos fundamentales</H2></CENTER>

<P align="right">Sevilla, 14 de Septiembre de 2015</P>

Otros elementos en desuso.

FRAME y FRAMESET: Servían para incluir marcos en los documentos web.

APPLET: Servía para introducir applets de Java.

Por ejemplo,

<APPLET code="NervousText.class" width="534" height="50">

<PARAM name="text" value="Java(TM) 2 SDK, Standard Edition v1.4">

</APPLET>

FONT: Servía para definir las características de los textos (color, fuente, tamaño, etc.).

Por ejemplo,

<FONT face="arial" size=5 color=red>Texto formateado</FONT>

BASEFONT: Establecía el tamaño por defecto de la letra de los textos.


84

4. HOJAS DE ESTILO WEB

Son un conjunto de normas o reglas mediante las que indicamos el modo en que aparecerá un documento en pantalla controlando temas de formato y posicionamiento como el color, el fondo, tipo de fuente, apariencia de los bordes, márgenes, alineación y espacio entre caracteres.

4.1. Tipos de hojas de estilo: estáticas y dinámicas

Páginas web estáticas.

Su objetivo final es mostrar información permanente utilizando los elementos del lenguaje HTML que no aporta grandes efectos y sobretodo no permite la interacción entre usuario y sistema.

Esta es una opción suficiente para los que simplemente necesiten ofrecer una descripción de su empresa, indicar quienes son, qué hace, ubicación, definición de proyectos, etc.

Por ejemplo, una empresa que no desea muchas complicaciones en la relación con el cliente y simplemente desea informar a sus clientes de sus productos y dar a conocer su perfil de empresa.

La principal ventaja de este tipo de páginas es la económica ya que por un precio bajo pueden obtenerse diseños elegantes con imágenes y el textos suficientes para mantener informados a nuestros clientes en todo momento.

La aportación de las hojas de estilo en las webs estáticas se limita a dar formato.

Por ejemplo,

<HTML><HEAD>

<TITLE>Ejemplo</TITLE>

<STYLE>

p {

color: red;

text-transform: uppercase;

}

</STYLE>

</HEAD>

<BODY>

<P>Historias para no dormir</P>

</BODY></HTML>


85

Páginas web dinámicas.

Se construyen haciendo uso de otros lenguajes de programación, como Javascript o PHP, sobretodo en el trato con las bases de datos porque con los nuevos estándares cada vez se usan más las propiedades CSS para los efectos visuales.

Este tipo de páginas permiten la creación de aplicaciones dentro de la propia Web ofreciendo por lo tanto una mayor interactividad con los usuarios que la visitan.

Ejemplos de estas funcionalidades que aportan las web dinámicas son las encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente de manera personalizada, entre otros.

La ventaja principal de usar CSS dinámicas es que podemos recrear muchas situaciones que hasta ahora sólo eran posibles con un manejo solvente de lenguajes tipos Javascript.

Por ejemplo,

<HTML><HEAD>

<STYLE type="text/css">

div{

border: 1px solid #000;

padding:10px;

margin: 20px;

height: 130px;

width: 230px;

float: left;

background: -webkit-linear-gradient(orange, pink);

background: -moz-linear-gradient(orange, pink);

background: -o-linear-gradient(orange, pink);

background: linear-gradient(orange, pink);

}

</STYLE></HEAD>

<BODY><DIV class="degradado1"></DIV></BODY></HTML>


86

Desde el punto de vista del formato es el CSS el sistema que debemos aplicar para aplicar dinamismo pero si queremos crear dinamismo con bases de datos ya no bastará con CSS hará falta manejar programación de lenguajes de servidores.

Lo que hoy se conoce como web 2.0 es precisamente la web dinámica, esa en la cual los usuarios interactúan con la información contenida en la web, ya que dicha información varía en tiempo real de acuerdo a las opciones tomadas por el usuario

4.2. Elementos y estructura de una hoja de estilo

Creación de hojas de estilo.

Cuando creamos un estilo, las especificaciones que se realizan para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren por debajo de él atendiendo a un criterio de herencia.

Por ejemplo, si especificamos un tipo de letra para el elemento <BODY> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <P> heredará el tipo de letra salvo que especifiquemos lo contrario.

<HTML><HEAD><STYLE>

p {

color:red;

}

</STYLE></HEAD>

<BODY>

Hola<HR>

<CODE>hola</CODE>

<P>Hola <CODE>hola</CODE></P>

</BODY></HTML>

Obsérvese que el contenido de la etiqueta CODE que está dentro de P ha heredado las propiedades de color del texto de P.


87

También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:

Estilo especificado dentro de la etiqueta.

Estilo especificado en la cabecera del documento.

Estilo definido en un documento independiente al que se enlaza nuestra página.

Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos.

La sintaxis tiene una estructura como la que se muestra en la imagen siguiente.

El selector es el elemento sobre el que se aplicarán las propiedades, puede ser desde una simple etiqueta, clases, clases aplicadas a etiquetas concretas, sucesión lógica de etiquetas, etc.

Las propiedades irán siempre seguidas de dos puntos(:) y el valor de las propiedades.

Existen diferentes formas de agregar estilos CSS al código HTML de una página web:

-Incrustar una hoja de estilo.

Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final (<STYLE> y </STYLE>) de la sección encabezado de la página web.

Por ejemplo,

<HEAD>

<TITLE>Hoja de estilo incrustada (CSS)</TITLE>


h1 {color:blue; font size:40px; font-family:verdana;}

p {color:white; background:green; font-family:helvetica; text-indent:2cm;}

</STYLE>

</HEAD>

El atributo type de la etiqueta <STYLE> indica al explorador el tipo de hoja de estilo que debe esperar.


88

-Vinculación a una hoja de estilo externa.

Para crear un vínculo a una hoja de estilo externa, insertamos una etiqueta <LINK> como en el ejemplo siguiente:

Por ejemplo,

<HEAD>

<TITLE>Hoja de estilo vinculada</TITLE>

<LINK href="estilo.css" rel="stylesheet" type="text/css">

</HEAD>

También puede incluir un atributo media para especificar los medios a los que se aplican las reglas de la hoja de estilo. Al leer el valor del atributo media en la etiqueta <LINK> el navegador puede descargar selectivamente archivos de hojas de estilo aplicables únicamente a los medios utilizados por el explorador.

Por ejemplo, cuando queramos imprimir la página web es conveniente adaptar el formato quitando elementos y modificando algunos colores, es por ello que modificamos el CSS,

<LINK href="webtv.css" rel="stylesheet" type="text/css" media="print" >

Los valores que puede tomar el atributo media son los que se observan en esta tabla:


89

Aplicación de estilos.

Selectores. Podemos redefinir cualquier elemento o etiqueta HTML.

Por ejemplo, esto afectará a todos los elementos H1:

h1 { }

Selectores de clase. Existen dos tipos de selectores de clase: generales (afectan a todas las marcas donde se posicionen en el HTML con el atributo class) y específicos (se concretan a un selector concreto).

Un ejemplo de selector de clase general,

.peque { font-size: 6px;}

<P class="peque">Párrafo pequeño</P>

<DIV class="peque">Caja pequeña</P>

Un ejemplo de selector específico,

p.peque { font-size: 10px;}

p.mediano {font-size: 12 px;}

<P class="peque">Esto es un párrafo de texto pequeño</P>

<P class="mediano">Esto es un párrafo de texto pequeño</P>

La ventaja de estos selectores específicos es que evitamos el solapamiento y una mayor flexibilidad a la hora de aplicar estilos a cualquier elemento.

Selectores ID.

Son similares a los selectores de clase. Se diferencia en la semántica y en el comportamiento.

Por ejemplo,

#cabecera { font-size: 16px;}

<DIV id="cabecera">Contenido de cabecera</DIV>

Esto no sería correcto:

#barra { font-size: 36px;}

<DIV id="barra">Bienvenidos</DIV>

<DIV id="barra">Esto es una prueba de diseño web </DIV>

La diferencia con los selectores de clase es que los selectores por identificador están pensados para que el elemento que seleccionas sea único.

Sin embargo, las clases están pensadas para poder definir el mismo estilo a varios elementos de la página. Es decir, poder asignar una misma clase a varios elementos de la página, para que se apliquen en diversos elementos distintos en la misma página.


90

Por ejemplo, si tenemos una página con un menú de navegación que aparece una única vez, podrías asignarle un id a la capa donde está la barra de navegación. Ese ID sería único, porque no hay otra barra de navegación igual a esa en la página.

Ahora bien, si dentro de la barra de navegación tienes varios enlaces y quieres asignarles estilos a todos a la vez, tendrías que crear una clase (class de CSS) y asignarla a cada uno de esos enlaces.

Selectores contextuales (descendientes).

Podemos definir unas propiedades para un selector cuando se encuentre en unas condiciones concretas, es decir cuando esté dentro de otro selector y así sucesivamente.

Por ejemplo,

div em { color:yellow; } aplicará color amarillo al texto de EM que se encuentre dentro de una marca DIV pero no sí se encuentra fuera de él.

<HTML><HEAD><STYLE>

div em { color:yellow; }

</STYLE></HEAD>

<BODY>

<DIV><EM>Hola</EM></DIV>

<P><EM>Hola</EM></P>

<DIV>Hola <P><EM>Hola</EM></P></DIV>

</BODY></HTML>

Pseudo clases.

Las pseudo clases nos permiten referirnos a elementos según su estado. Para indicarlas en la hoja de estilo, se escriben detrás del selector, separadas por dos puntos.

Por ejemplo, a:link se refiere sólo a los enlaces que aún no han sido visitados por el usuario.

Son de gran importancia a la hora de cuidar los detalles de una web, ya que son un paso más en la personalización de una plantilla y se utilizan para personalizar elementos a los que no se puede acceder con las clases normales y que dependen de una principal.


91

first-child. Es una pseudo-clase que va orientada a personalizar el primer elemento hijo de cualquier otro elemento.

Por ejemplo, si tenemos un <DIV> y queremos aplicar estilos al primer párrafo de su interior.

<HTML><HEAD><TITLE>Título</TITLE>


div p:first-child{

font-size:20px;

font-style:italic; /* cursiva */

}

</STYLE></HEAD>

<BODY><DIV>

<P>Texto a 20px. Este es el primer párrafo de la caja de contenido. Repetimos para dar longitud. Este es el primer párrafo de la caja de contenido. Repetimos para dar longitud. Este es el primer párrafo de la caja de contenido. Repetimos para dar longitud.</P>

<P>Texto a tamaño por defecto para los párrafos. No es el primero. Texto a tamaño por defecto para los párrafos. No es el primero. Texto a tamaño por defecto para los párrafos. No es el primero. Texto a tamaño por defecto para los párrafos. No es el primero. Texto a tamaño por defecto para los párrafos. No es el primero.</P>

<P>Texto a tamaño por defecto para los párrafos. No es el primero. Es el tercero. Texto a tamaño por defecto para los párrafos. No es el primero. Texto a tamaño por defecto para los párrafos. No es el primero. Texto a tamaño por defecto para los párrafos. No es el primero. Texto a tamaño por defecto para los párrafos. No es el primero.</P>

</DIV></BODY></HTML>

En este caso, cuando un primer elemento hijo de un <DIV> sea un párrafo, el tamaño de la fuente será 20px. Sin embargo, si el primer elemento no es una <P>, no se aplicará la pseudo-clase.


92

link. Para aplicar estilo a los enlaces del portal que no han sido aún visitados podemos usar :link. De este modo los enlaces se distinguirán y sirven a modo de historial para el usuario.

a:link{

color:#000000;

} El ejemplo mostrará los enlaces que aún no han sido visitados de color negro.

visited. Esto ayudará a la usabilidad, sobre todo cuando hay gran cantidad de contenido segmentado entre los enlaces.

a:visited{

color:#ffffff;

}

Así pues, los enlaces se verán blancos una vez visitados, pudiendo distinguirse con mayor facilidad.

hover.

a:hover{

text-decoration:none;

}

Esto hará que al pasar el ratón por encima, el enlace pierda el subrayado típico de los vínculos. Pero hay que comentar que :hover se puede aplicar a cualquier elemento, además de los enlaces.

active. Mientras tenemos presionado del botón del ratón sobre un elemento, podemos definir qué propiedades adoptará en ese instante.

a:active{

font-weight:bolder;

}

Al presionar, la fuente pasará a verse en negrita y al soltar, volverá a su estado normal.

focus. Cuando un elemento tiene el foco, es decir se encuentra activo, bien a través del teclado, bien a través del ratón, podemos definir también sus características.

input:focus{

border:1px solid #ffffff;

}

Cuando el input tenga el foco, el borde será de 1px, sólido y blanco. Una pseudo-clase que usaremos en la mayoría de los casos para darle un poco más de atractivo a los formularios.

Pseudo elementos.

Los pseudoelementos son elementos de una página que no están contenidos en una etiqueta específica y por tanto no podemos asignarles atributos directamente.


93

:first-line. Establece el estilo para la primera línea de un elemento.

Por ejemplo,

p { width:200px;}

p:first-line {

color: blue;

}

Con el código HTML:

<BODY><P>La vida da vueltas y no sabemos dónde van a parar las aguas de los ríos. La vida da vuelta si no sabemos dónde van a parar las aguas de los ríos. La vida da vueltas y no sabemos dónde van a parar las aguas de los ríos. La vida da vueltas y no sabemos dónde van a parar las aguas de los ríos. La vida da vueltas y no sabemos dónde van a parar las aguas de los ríos.</P></BODY>

Hemos conseguido reducir el ancho del párrafo con la propiedad width y el valor 200px para que se vea mejor el efecto de destacar la primera línea con :first-line

:first-letter. Establece el estilo para la primera letra de un elemento.

Por ejemplo,

p:first-letter {

font-size: 200%;

color: red;

}

Y el código HTML:

<BODY>


94

<P>La vida da vueltas y no sabemos dónde van a parar las aguas de los ríos.</P>

</BODY>

Grupo de selectores.

Para agrupar propiedades y crear un código más compacto y fácil de visualizar se pueden aplicar reglas comunes a diferentes selectores.

Por ejemplo,

h1, h2, h3 {font-family: Arial, sans-serif;}

Herencia de estilos y aplicación en cascada.

La herencia permite declarar propiedades en elementos de nivel alto y que estas propiedades se transmitan a todos los elementos descendientes.

Sólo algunas propiedades se heredan por defecto, pero la herencia puede forzarse mediante la palabra clave inherit.

La cascada soluciona los conflictos cuando varias declaraciones afectan a un elemento determinado. Las declaraciones importantes anulan a las que no lo son tanto. Entre declaraciones de igual importancia, la especificidad de la regla controla cuál se aplica. Y, si todas las demás son iguales, el orden de las fuentes supone la distinción definitiva.

Formateado de páginas mediante estilos.

Para especificar una regla de formato CSS que se aplique solamente a una etiqueta, utilizamos el atributo style dentro de la marca para especificar la regla con la sintaxis <nombreDeEtiqueta style="Declaraciones de CSS">.

Por ejemplo, podríamos insertar la regla CSS en la etiqueta <H2> de la siguiente manera:

<HTML><HEAD><TITLE>Estilos en línea</TITLE>

</HEAD>

<BODY>

<H2 style="text-indent:1.5 in; background:blue; color:white;">Este texto de encabezado es blanco con un fondo azul, sangrado de 4 centímetros. </H2>

</BODY></HTML>


95

Estructura de páginas mediante estilos.

Dentro de los cambios de filosofía en el diseño que ha traído HTML5 y CSS hay que destacar la nueva forma de crear las estructuras o layouts.

Una página básica estaría formada por una cabecera y pie, un menú lateral de navegación y una zona de contenidos.

La solución CSS se basa en el uso de la propiedad float para los elementos posicionados como el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los solapamientos ocasionados por los elementos posicionados con float.

Por ejemplo, el código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional podría ser el siguiente:

#contenedor {

width: 700px;

}

#cabecera {

}

#menu {

float: left;

width: 150px;

}

#contenido {

float: left;

width: 550px;

}

#pie {

clear: both;

}

<BODY>

<DIV id="contenedor">

<DIV id="cabecera"></DIV>

<DIV id="menu"></DIV>

<DIV id="contenido"></DIV>

<DIV id="pie"></DIV>

</DIV>

</BODY>


96

En los estilos CSS anteriores se ha optado por desplazar tanto el menú como los contenidos hacia la izquierda de la página (float: left).

EL diseño anterior es de anchura fija, lo que significa que no se adapta a la anchura de la ventana del navegador. Para conseguir una página de anchura variable y que se adapte de forma dinámica a la ventana del navegador, se deben aplicar las siguientes reglas CSS:

#contenedor {

}

#cabecera {

}

#menu {

float: left;

width: 15%;

}

#contenido {

float: left;

width: 85%;

}

#pie {

clear: both;

}

Si se indican las anchuras de los bloques que forman la página en porcentajes, el diseño final es dinámico. Para crear diseños de anchura fija, basta con establecer las anchuras de los bloques en píxel.


97

4.3. Diseño de estilos para diferentes dispositivos

La experiencia de usuario no es la misma cuando entramos a una web desde un dispositivo móvil que cuando lo hacemos desde una gran pantalla como puede ser el ordenador de la habitación o la televisión de alta resolución del salón. Es necesario estudiar las posibilidades de crear varias hojas de estilo para que nuestra web se muestre de la mejor forma posible en los diferentes dispositivos.

Se puede establecer el dispositivo de dos formas:

1. Cuando se hace la llamada al CSS en el código.

Por ejemplo,

<LINK rel=”stylesheet” type=”text/css” href=”estilo_pordefecto.css” media=”screen”>

<LINK rel=”stylesheet” type=”text/css” href=”estilo_iphone.css” media=”handheld”>

2. Cuando se hace la llamada desde la propia hoja de estilos CSS.

Por ejemplo,

@media screen {

body { font-size: 12px; }

}

@media handheld {

body { font-size: 10px; }

}

La mejor forma de conocer a nuestros usuarios y los sistemas que utilizan es fijarse en las estadísticas de nuestra web, por norma general cualquier sistema de estadísticas que utilicemos muestra información muy completa sobre los dispositivos con los que los usuarios acceden con mayor frecuencia a nuestra web.

4.4. Buenas prácticas en el uso de hojas de estilo

Todos los documentos tienen que incluir una directiva DOCTYPE.

Evitar en la medida de lo posible, el atributo style dentro de las etiquetas. Es conveniente organizar las reglas en un fichero y enlazarlo desde la cabecera con <LINK>.

Es recomendable usar los selectores justos y necesarios.

Utilizar minúsculas tanto para los nombres, propiedades y valores de una regla CSS. Esto se recomienda porque parece que algunos navegadores antiguos tienen problemas con las mayúsculas.

Si tenemos que separar palabras en el nombre de un selector, utilizar el guión en vez del guión bajo.

Los nombres de los selectores tienen que tener un significado relativo al contenido y no a su disposición o estructura.

Ordenar las propiedades de una regla siempre del mismo modo. Es decir, si es en orden alfabético seguir siempre ese criterio.

Elegir un solo idioma para el nombre de los selectores.

Agrupa clases en la medida que sea posible.


98

Primero se diseña la estructura en HTML y después se introduce formato en CSS, no al revés.

Usar propiedades agrupadas (shorthands).

Por ejemplo, es mejor “margin: 5px” que no “margin-right: 5px;”, “margin-left: 5px”, etc.

Comentar siempre el código.

Evitar en la medida de lo posible el uso del posicionamiento absoluto.

Si queremos centrar elementos, margin: 0 auto; es la solución.

Intentar utilizar las etiquetas HTML para lo que fueron diseñadas originalmente.

Por ejemplo, <STRONG> no es negrita sino resaltado, <EM> no es cursiva sino énfasis, etc.

No hacer propios encabezados.

Por ejemplo, en lugar de escribir <P style=”font-size: 18px;”></P> debemos utilizar los encabezados de HTML (H1, H2,…).

No dar saltos entre encabezados HTML. Es decir, si en mi página hay un H3, tiene que haber también un H2 y un H1.

Formatear el código CSS siempre con el mismo estilo. Es decir, espacios entre propiedades, entre las llaves de apertura y cierre de la regla.


99

Recuerda…

Una casilla de verificación es un pequeño cuadrado que podrá ser marcado o desmarcado según interese al visitante.

HTML5 es una revisión con aportaciones destacadas del más popular de las versiones de los lenguajes de marca como fue HTML4.

Con marginwidth podemos definir el margen izquierdo y derecho que debe tener la página que va dentro del iframe, con respecto al borde.

La mayoría de los atributos de alineación usados habitualmente en HTML han caído en desuso debido a la introducción de las hojas de estilo CSS.

No es conveniente dar saltos entre encabezados HTML.

El elemento HEAD se coloca inmediatamente después del cierre de la marca...

Si se indican las anchuras de los bloques que forman la página en porcentajes, el diseño final es dinámico.

Las páginas webs estáticas su objetivo final es mostrar información permanente utilizando los elementos del lenguaje HTML que no aporta grandes efectos y sobretodo no permite la interacción entre usuario y sistema.

No utilizar mayúsculas tanto para los nombres, propiedades y valores de una regla CSS.

Si se indican las anchuras de los bloques que forman la página en porcentajes, el diseño final es dinámico.

No es conveniente dar saltos entre encabezados HTML.

Una web centrada en el usuario es aquella cuyo análisis, diseño, contenidos y mantenimiento no están dirigidos a lograr unos resultados concretos.

En Mozilla Firefox, desde las primeras versiones, se podían abrir pestañas.

Una casilla de verificación es un pequeño cuadrado que podrá ser marcado o desmarcado según interese al visitante.

Las páginas web estáticas su objetivo final es mostrar información permanente utilizando los elementos del lenguaje HTML que no aporta grandes efectos y sobretodo no permite la interacción entre usuario y sistema.

Con :first-letter, este pseudo elemento se establece el estilo para la primera letra de un elemento.

Los formularios son una combinación de texto y en ocasiones gráficos que permiten enviar información por parte del visitante.

readonly es un tipo de atributo llamado compacto que sólo viene definido por su nombre.

Necesitaremos al diseñar establecer un equilibrio entre la apariencia y la funcionalidad.