TEÓRICO 1 - HTML - CSS

Guía para estudiantes https://utu.pias.uy

TEÓRICO 1 - HTML - CSSConceptos Básicos 4

Historia de Internet 4La idea revolucionaria 4El modelo Baran 4

ARPANET 4Correo electrónico 6Que es una dirección IP ? 7Que es un nombre de Dominio ? 7Características de las aplicaciones web 7

Compatibilidad multiplataforma 7Actualización 7Acceso inmediato y desde cualquier lugar 8Menos requerimientos de hardware 8Menos Bugs (errores) 8Seguridad en los datos 8

Tratamiento del Texto 8Tipografía 8

Tipografía y diseño web 8Tamaños de fuentes. 9Unidades de medida 9

Unidades relativas 10Unidades absolutas 11Efectos en la tipografía 12Comportamiento del texto con bloques 12

Composición 13Contenedor 13Logotipo 13Navegación 14Contenido 14Footer 14Espacio Negativo 14

Estructura del documento 14Definición del lenguaje HTML 14DOCTYPE 14Estructura 16Etiquetas 17Atributos 17

A/S Richard Pias - 2021 Teórico 1 - v1 Página 1

https://utu.pias.uy


Comentarios 17Símbolos especiales 17Colores 21

Cabecera 22Estructura de la cabecera 22Metadatos 23<LINK> 25<SCRIPT> 27

Cuerpo 27Etiquetas 27Listas 31Tablas 32

Hiperenlaces 34Tipos de referencias 34

Referencia absoluta 34Referencia relativa al sitio 35Referencia relativa al documento: 35Punto de fijación: 35

Imágenes y fondos 36Imagen de fondo 36Tratamiento de imágenes 37

Formatos de imagen para web 39Formato .bmp 39Formato .gif 39Formato .jpg 39Formato .png 39

Teoría del Color 40El círculo cromático 41

Diseño Vectorial con Corel 42Mapeo de imágenes 43

Introducción a las Hojas de Estilo (CSS) 45Introducción 45

¿Qué es CSS? 45Breve historia de CSS 45Soporte de CSS en los navegadores 46Especificación oficial 47Funcionamiento básico de CSS 48Cómo incluir CSS en un documento XHTML 50Incluir CSS en el mismo documento HTML 50Definir CSS en un archivo externo 51


https://utu.pias.uy


Incluir CSS en los elementos HTML 54Glosario básico 55Componentes de un estilo CSS básico 55Medios CSS 55

Medio Descripción 55Medios definidos con las reglas de tipo @media 57Medios definidos con las reglas de tipo @import 58Medios definidos con la etiqueta <link> 58Medios definidos mezclando varios métodos 58

Comentarios 59Sintaxis de la definición de cada propiedad CSS 60

Selectores 61Selectores básicos 61

Selector universal 61Selector de tipo o etiqueta 62Selector descendente 64Selector de clase 66Selectores de ID 70Combinación de selectores básicos 71Selectores avanzados 72Selector de hijos 72Selector adyacente 73Selector de atributos 75Agrupación de reglas 76


https://utu.pias.uy


Conceptos Básicos

Historia de Internet

En noviembre de 2005, la II Cumbre Mundial sobre la Sociedad de la Informacióncelebrada en Túnez, aprobó proponer a la Asamblea General de Naciones Unidas ladesignación del 17 de mayo como Día Mundial de las Telecomunicaciones y de laSociedad de la Información. #DíadeInternet.

La idea revolucionaria

En 1962, como consecuencia del fortalecimiento del comunismo, las Fuerzas Aéreas deEstados Unidos pidieron a un reducido grupo de investigadores que creara una red decomunicaciones militares que pudiera resistir un ataque nuclear. El concepto de esta redse basaba en un sistema descentralizado, de manera que la red pudiera seguirfuncionando aunque se destruyeran uno o varios equipos.

El modelo Baran

Paul Baran es considerado como una de las figuras clave de la creación de Internet. En1964, él tuvo la idea de crear una red con la forma de una enorme telaraña. Se habíadado cuenta de que un sistema centralizado era vulnerable, ya que si se destruía sunúcleo, se podían cortar todas las comunicaciones. Por este motivo, creó un métodohíbrido al utilizar la topología de estrella y de malla, en el que los datos viajaríandinámicamente "buscando" la ruta más clara y "esperando" en caso de que todas lasrutas estuvieran bloqueadas. Esta tecnología se denominó "conmutación de paquetes".


https://utu.pias.uy


ARPANET

ARPANET son las siglas de Advanced Research Projects Agency Network, es decir, la Redde la Agencia de Proyectos de Investigación Avanzada, organismo conocido ahora comoAgencia de Proyectos de Investigación Avanzados de Defensa.

En agosto de 1969, al margen del proyecto militar, ARPA (Agencia de Proyectos deInvestigación Avanzados, una división del Ministerio de Defensa de Estados Unidos) creóla red experimental ARPANET cuyo fin era conectar cuatro universidades:

El Instituto de Investigación Stanford,

La Universidad de California en Los Ángeles,

La Universidad de California en Santa Bárbara,

La Universidad de Utah.

Actualmente, ARPANET es considerada la precursora de Internet. En ese momento, yaincluía diversas características fundamentales de la red actual:

Uno o más núcleos de la red se podían destruir sin interrumpir su funcionamiento,

Los equipos podían comunicarse sin la mediación de un equipo central,

Los protocolos utilizados eran básicos.

Además, en 1972 (octubre), por primera vez ARPANET se presentó al público en generalcon motivo de la conferencia ICCC (Conferencia Internacional en Comunicaciones porOrdenador). Por aquella época, ARPA se convirtió en DARPA (Agencia de ProyectosAvanzados de Investigación para la Defensa) y el término "internetting" se utilizó parareferirse a ARPANET. Posteriormente se adoptó su forma abreviada "Internet".

El primer enlace de ARPANET se estableció el 21 de noviembre de 1969 entre UCLA yStanford. El 5 de diciembre del mismo año, se habían formado una red de 4 nodos,añadiendo la Universidad de Utha y la Universidad de California, Santa Barbara. Enmarzo de 1970, ARPANET cruzó hasta la costa Este, cuando la propia BBN se unió a lared. En 1971, ya existían 24 computadoras conectadas, pertenecientes a universidadesy centros de investigación. Este número creció hasta 213 computadoras en1981, conuna nueva incorporación cada 20 días en promedio, y llegaron a alcanzar las 500computadoras conectados en1983.

En 1985 la Internet ya era una tecnología establecida, aunque conocida por unos pocos.

William Gibson acuño el término “ciberespacio”. En ese tiempo la red era básicamentetextual, así que el autor se baso en los videojuegos. Con el tiempo la palabra“ciberespacio” terminó por ser sinónimo de Internet.


https://utu.pias.uy


El desarrollo de NSFNET fue tal que hacia el año 1990 ya contaba con alrededor de100.000 servidores.

Desaparición de ARPANET en 1990 como tal ya no era militar. En el Centro Europeo deInvestigaciones Nucleares (CERN), Tim Berners Lee dirigía la búsqueda de un sistemade almacenamiento y recuperación de datos. Berners Lee retomó la idea de Ted Nelson(un proyecto llamado “Xanadú” ) de usar hipervínculos. Robert Caillau quien cooperócon el proyecto. En 1990 crearón World Wide Web (WWW) o telaraña mundial.

En 1993 Marc Andreesen produjo la primera versión del navegador “Mosaic”, quepermitió acceder a la WWW y se democratizo el uso fuera de las instituciones cientificas.

En 1994 nace el primer sitio de comercio electrónico.

En 1995 apareció el primer periódico de papel en español en su versión online.http://www.abc.es

En 1996 el primer móvil con conexión a Internet. 10 millones de computadorasconectadas en este año.

En 1998 nace Google el buscador de páginas web más famoso del mundo.

En 1998 tanto IANA como InterNIC se reorganizaron bajo el control de ICANN, unacorporación de California sin ánimo de lucro, contratada por el US Department ofCommerce para manejar ciertas tareas relacionadas con Internet.

El papel de operar el sistema DNS fue privatizado, y abierto a competición, mientras lagestión central de la asignación de nombres sería otorgada a través de contratos.

En 2001 la Wikipedia para tener toda la información de manera colaborativa online.

2003 Skype llegan las videollamadas masivas.

2004 Facebook la rede social por excelencia.

2005 Youtube el portal de vídeos que luego compro Google,

2007 iPhone la revolución de Internet en el móvil.

2007 Twitter en el espacio, etc.

Algunos de los servicios disponibles en Internet aparte de la web son el acceso remoto aotras máquinas (SSH y telnet), transferencia de archivos (FTP), correo electrónico(SMTP), conversaciones en línea (Skype, Whatsapp,…), transmisión de archivos (P2P,P2M, descarga directa), etc.


https://utu.pias.uy


Correo electrónico

En 1971, Ray Tomlinson desarrolló un nuevo medio de comunicación: el correoelectrónico. El contenido del primer correo electrónico fue:

QWERTYUIOP

Además, el carácter "@" ya se estaba utilizando para separar al nombre del usuario delresto de la dirección. En julio de 1972, Lawrence G. Roberts mejoró los horizontesvislumbrados por Tomlinson y desarrolló la primera aplicación para enumerar, leerselectivamente, archivar y responder o reenviar un correo electrónico. Desde esemomento, el correo electrónico no ha cesado de crecer y se convirtió en el uso máscomún de Internet a comienzos del siglo XXI.

Que es una dirección IP ?

Una dirección IP es un número que identifica, de manera lógica y jerárquica, a unaInterfaz en red (elemento de comunicación/conexión) de un dispositivo (computadora,tableta, portátil, smartphone) que utilice el protocolo IP (Internet Protocol), quecorresponde al nivel de red del modelo TCP/IP.

Que es un nombre de Dominio ?

Un nombre de dominio (a menudo denominado simplemente dominio) es un nombrefácil de recordar asociado a una dirección IP física de Internet. Se trata de un nombreúnico que se muestra después del signo @ en las direcciones de correo electrónico ydespués de www. en las direcciones web.


https://utu.pias.uy


Características de las aplicaciones web

Compatibilidad multiplataforma

Una misma versión de la aplicación puede correr sin problemas en múltiples plataformascomo Windows, Linux, Mac, etc.

Actualización

las aplicaciones web siempre se mantienen actualizadas y no requieren que el usuariodeba descargar actualizaciones y realizar tareas de instalación.

Acceso inmediato y desde cualquier lugar

Las aplicaciones basadas en tecnologías web no necesitan ser descargadas, instaladas yconfiguradas. Además pueden ser accedidas desde cualquier computadora conectada ala red desde donde se accede a la aplicación.

Menos requerimientos de hardware

Este tipo de aplicación no consume (o consume muy poco) espacio en disco y tambiénes mínimo el consumo de memoria RAM en comparación con los programas instaladoslocalmente. Tampoco es necesario disponer de computadoras con poderososprocesadores ya que la mayor parte del trabajo se realiza en el servidor en donde residela aplicación.

Menos Bugs (errores)

Son menos propensas a crear problemas técnicos debido a problemas de software yconflictos de hardware. Otra razón es que con aplicaciones basadas en web todosutilizan la misma versión, y los bugs (errores) pueden ser corregidos tan pronto comoson descubiertos beneficiando inmediatamente a todos los usuarios de la aplicación.

Seguridad en los datos

Los datos se alojan en servidores con sistemas de almacenamiento altamente fiables yse ven libres de problemas que comúnmente sufren los ordenadores de usuarioscomunes como virus y/o fallas de disco duro.


https://utu.pias.uy


Tratamiento del Texto

Tipografía

Tipografía y diseño web

Con las nuevas tecnologías web, los nuevos navegadores pueden presentar cualquierfuente que queramos utilizar, como si se enviara la fuente junto al web. La ventaja,respecto la utilización de imágenes es que el texto es encontrado mejor por losbuscadores, además se puede utilizar para presentar textos desde bases de datos.Los grupos de fuentes más utilizados son los siguientes:

https://desarrolloweb.com/articulos/1691.phpIntroducción a @font-face de CSS

https://desarrolloweb.com/articulos/intro-font-face.html


https://utu.pias.uy


Al momento de crear la selección de fuente para tu sitio web es fundamental incluirfuentes de respaldo. Es decir, selecciona la fuente que preferirías que todos vieran comola principal y luego incluye algunas de respaldo tales como Century Gothic, Verdana,Arial.

Tamaños de fuentes.

Con independencia de la tipografía utilizada, deberemos definir su tamaño.Normalmente, las tipografías se trabajan en píxeles, que son equivalentes a puntoscuando la resolución de la pantalla es de 72 ppp (píxeles por pulgada). A modo deorientación, trabajar con 11 o 12 píxeles facilita la lectura de la mayoría de lastipografías, y casi nunca se trabaja con tipografías menores a 8 o 9 píxeles.Opcionalmente, en vez de trabajar con píxeles, podemos definir el tamaño de unatipografía como un porcentaje de la tipografía "media" definida en el ordenador delusuario.

Unidades de medida

Las unidades de medida son una de las partes más importantes de CSS, ya que seutilizan para definir la altura, anchura y márgenes de todos los elementos y paraestablecer el tamaño de letra del texto.

CSS divide todas las unidades de medida en dos grupos: absolutas y relativas. Lasunidades relativas definen su valor en relación con otra medida, por lo que para obtenersu valor real, se debe realizar alguna operación con el valor indicado. Las unidadesabsolutas establecen de forma completa el valor de una medida, por lo que su valor reales directamente el valor indicado.

Las medidas, absolutas y relativas, se indican como un valor numérico entero o decimalseguido de una unidad de medida (sin ningún espacio en blanco entre el número y launidad de medida).

Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no seindica ninguna unidad, la medida se ignora completamente, lo que suele ser una fuentehabitual de errores para los diseñadores que empiezan con CSS. Algunas propiedadespermiten indicar medidas negativas, aunque habitualmente sus valores son positivos.

Unidades relativas

Las unidades relativas son más flexibles que las unidades absolutas porque se adaptanmás fácilmente a los diferentes medios. A continuación se muestra la lista de unidadesde medida relativas y la referencia que toma cada una para determinar su valor real:


https://utu.pias.uy


em, relativa respecto del tamaño de letra empleado. Aunque no es una definiciónexacta, el valor de 1 em se puede aproximar por la anchura de la letra M "ememayúscula") del tipo de letra que se esté utilizando

ex, relativa respecto de la altura de la letra x "equis minúscula") del tipo de letra que seesté utilizando

px, (píxel) relativa respecto de la pantalla del usuario

“Si tienes dificultades para comprender la unidad em y prefieres establecer los tamañosde letra mediante píxeles, puedes utilizar el siguiente truco. Como todos losnavegadores establecen un tamaño de letra por defecto equivalente a 16px, si se utilizala siguiente regla CSS: body { font-size: 62.5%;}. El tamaño de letra del elemento<body>, y por tanto el tamaño de letra base del resto de elementos de la página, seestablece como el 62.5% del tamaño por defecto. Si se calcula el resultado de 16px x62.5% se obtienen 10px”.

Cuando se utilizan unidades relativas, es imprescindible conocer la referencia que setoma para obtener el valor definitivo. En otras palabras, un tamaño de letra 1em o 3emno significan nada a menos que se conozca su valor de referencia.

Si se define el tamaño de letra de un elemento mediante la unidad em, su referencia esel tamaño de letra del primer elemento contenedor que tenga establecido un tamaño deletra. Si el elemento no se encuentra dentro de ningún otro elemento, entonces lareferencia es el tamaño de letra del <body>.

En el siguiente ejemplo, los elementos interiores tienen el mismo tamaño de letra(1em). Sin embargo, como sus elementos contenedores tienen tamaños muy diferentes(0.9em y 1.5em) el tamaño de letra resultante es muy diferente:

<div style="font-family: Liberation Mono,Droid SansMono,Monaco,Menlo,Courier New,Courier,monospace;">

<p style="font-size: 0.5em;">[1em] Lorem ipsum dolor sit amet,onsectetuer adipiscing elit. </p>

<p style="font-size: 1em;">[1em] Lorem ipsum dolor sit amet, consectetueradipiscing elit. </p>

<p style="font-size: 1.5em;">[1.5em] Lorem ipsum dolor sit amet,consectetuer adipiscing elit.</p>

<p style="font-size: 2em;">[2em] Lorem ipsum dolor sit amet, consectetueradipiscing elit.</p>

</div>


https://utu.pias.uy


Unidades absolutas

Las unidades de medida absolutas son completas, ya que sus valores reales no secalculan a partir de otro valor de referencia, sino que son directamente los valoresindicados. A continuación se muestra la lista de unidades absolutas definidas por CSS ysu significado:

in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros)

cm, centímetros

mm, milímetros

pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)

pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)

A continuación se muestran ejemplos de utilización de unidades absolutas:

<div style="font-family: Liberation Mono,Droid Sans Mono,Monaco,Menlo,CourierNew,Courier,monospace;">

<p style="font-size: 0.5in;">[0.5in] Pulgadas - Del inglés "inches", pulgadas(1 pulgada son 2.54 centímetros) </p>

<p style="font-size: 1cm;">[1cm] Centimetros - Lorem ipsum dolor sit amet,consectetuer adipiscing elit. </p>

<p style="font-size: 5mm;">[5mm] Milimetros - Lorem ipsum dolor sit amet,consectetuer adipiscing elit.</p>

<p style="font-size: 16pt;">[16pt] Punto - 1 punto equivale a 1 pulgada/72,es decir, unos 0.35 milímetros.</p>

<p style="font-size: 2pc;">[2pc] Pica - 1 pica equivale a 12 puntos, es decir,unos 4.23 milímetros.</p>

</div>

A pesar de que parecen más fáciles de comprender, las unidades absolutas se utilizanmucho menos que las unidades relativas. El motivo es que las unidades absolutas sonadecuadas para medios impresos pero no lo son tanto para medios flexibles como unapantalla. De todas las unidades absolutas, los puntos (pt) es la única que se empleaocasionalmente y casi siempre para definir el tamaño de letra para los medios impresos(print) de CSS.


https://utu.pias.uy


Efectos en la tipografía

Por defecto, las características o efectos que podemos escoger en cualquier texto webson:

Color.

Normal, negrita, cursiva, subrayado...

Alinear a derecha, izquierda, centro, justificado

Tamaño de fuente. Se puede definir en píxeles o en un tamaño relativo (grande ...pequeño … xx-large, x-large, large, medium, small, x-small, xx-small)

Espaciado de palabras, espaciado de letras, espaciado entre parágrafos...

Sombreados o gradientes de colores (solo en algunos navegadores web)

Comportamiento del texto con bloques

Una limitación a tener en cuenta al diseñar una página web es que el texto se puedeadaptar automáticamente alrededor de bloques rectangulares (por ejemplo imágenes)que estén alineados a la derecha o a la izquierda. Pero no es posible (o sería muycomplicado) que el texto se adapte automáticamente alrededor de formas norectangulares. Por ejemplo, si tenemos que presentar un texto así, el texto se deberíade presentar cómo una imagen, con sus problemas asociados (descritos anteriormente).Así pues, siempre es mejor diseñar teniendo en cuenta estas limitaciones.

De todas maneras podemos utilizar de CSS(2,1 en adelante) la propiedad “display” quepuede adaptarse, desaparecer, etc., que no cubre toda esta limitación, pero es muy útilpara bordear imágenes con texto, pero lo veremos mas adelante.

Este bloque web se debería generar como una imagen.


https://utu.pias.uy


Composición

La página web y su constitución Lo que define el diseño de una página web es la formade organizar los elementos que la componen. Hay miles de formas diferentes, pero sonpocas las que funcionan y adquieren el sentido que necesitamos para nuestro trabajo.

Podemos recurrir a estructuras como Bootstrap o 960grid para tener un apoyoimportante. Hoy en día hay muchos frameworks con los cuales podemos basarnos a lahora de diseñar un nuevo proyecto.

Básicamente, los sitios web se componen y estructuran de la siguiente manera:

Contenedor

Esto es lo que definimos en la regla Body o en algun div de nuestra estructura. Dentrode este contenedor estarán todos los elementos del sitio; módulos, contenidos,imágenes, etc. Este contenedor puede tener un ancho fijo; el ancho será igual paratodos los navegadores y dispositivos, o uno fluido que se adaptará al ancho de nuestraventana. Si usamos web responsive, podemos manejarlo con CSS sin problemas.

Logotipo

Acá es dónde debemos dejar la imagen de la empresa, que identificará la marca en todoel sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara lanavegación por todo el sitio ayudando al reconocimiento de la marca.


https://utu.pias.uy


Navegación

Que importante es la navegación y el menú que la contiene. La forma más aceptada yfácil, es el menú horizontal, que siempre tiene a mano lo más importante del sitio web.

Los menús verticales pueden usarse como complementos o sub menús, de loshorizontales, y siempre cerca de la línea horizontal del menú principal y deben servisibles en el primer pantallazo, al entrar.

Contenido

Lo más importante y fundamental de una buena página. Lo que mantiene al visitantecautivo e interesado. Si el contenido es malo o poco interesante, abandonará la páginaen pocos segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. Elmejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.

Footer

Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright ylegales o menús secundarios. Aunque en los últimos años, se usa mucho para incluirinformación de redes sociales, direcciones, noticias.

Espacio Negativo

Esto es tan importante como el espacio positivo. También llamado espacio blanco, estodo lo que no tiene información de ningún tipo, pero que cumple un rol importantísimopara la web; nos ayuda a tener espacios de respiración, a equilibrar y dar balance atodo el diseño. Si eres novato, o tu cliente es ignorante en la materia, tratará de llenaresos espacios, con la consiguiente saturación de contenidos, dejando una web ilegible einnavegable.

Estructura del documento

Definición del lenguaje HTML

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas deInternet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir,Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formatode Documentos para Hipertexto.

DOCTYPE

El estándar XHTML deriva de XML, por lo que comparte con el muchas de sus normas ysintaxis. Uno de los conceptos fundamentales de XML es la utilización del DTD oDocument Type Definition ("Definición del Tipo de Documento").


https://utu.pias.uy


Un DTD es un documento que recoge el conjunto de normas y restricciones que debencumplir los documentos de un determinado tipo. Si por ejemplo se define un DTD paralos documentos relacionados con libros, se puede fijar como norma que cada libro tengaun título y sólo uno, que tenga uno o más autores, que la información sobre el númerode páginas pueda ser opcional, etc.

El conjunto de normas, obligaciones y restricciones que se deben seguir al crear undocumento de un determinado tipo, se recogen en su correspondiente DTD. El estándarXHTML define el DTD que deben seguir las páginas y documentos XHTML. En estedocumento se definen las etiquetas que se pueden utilizar, los atributos de cadaetiqueta y el tipo de valores que puede tener cada atributo.

En realidad, la versión 1.0 del estándar de XHTML define tres DTD diferentes. Paraindicar el DTD utilizado al crear una determinada página, se emplea una etiquetaespecial llamada doctype. La etiqueta doctype es el único elemento que se incluye fuerade la etiqueta <html> de la página. De hecho, la declaración del doctype es lo primeroque se debe incluir en una página web, antes incluso que la etiqueta <html>.

Como se verá más adelante, para que una página XHTML sea correcta y válida esimprescindible que incluya el correspondiente doctype que indica el DTD utilizado. Acontinuación se muestran los tres DTD que se pueden utilizar al crear páginas XHTML:

XHTML 1.0 Estricto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

Se trata de la variante con las normas más estrictas y las restricciones más severas. Laspáginas web que incluyan este doctype, no pueden utilizar atributos relacionados con elaspecto de los contenidos, por lo que requiere una separación total de código HTML yestilos CSS.

XHTML 1.0 Transitorio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

Se trata de una variante menos estricta que la anterior, ya que permite el uso dealgunos atributos HTML relacionados con el aspecto de los elementos.

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

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


https://utu.pias.uy


Esta última variante la utilizan las páginas que están formadas por frames, una prácticacompletamente desaconsejada y que hoy en día sólo utilizan los sitios web obsoletos.

Si no tienes claro el DTD que más te conviene, deberías utilizar el XHTML 1.0 transitorio,ya que es más fácil crear páginas web válidas. Si tienes conocimientos avanzados deXHTML, puedes utilizar XHTML 1.0 estricto.

Por otra parte, además del DOCTYPE apropiado, también es necesario que las páginasweb indiquen el namespace asociado. Un namespace en un documento XML permitediferenciar las etiquetas y atributos que pertenecen a cada lenguaje.

Si en un mismo documento se mezclan etiquetas de dos o más lenguajes derivados deXML (XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podríadeterminar a qué lenguaje pertenece cada etiqueta y por tanto, no se podría interpretaresa etiqueta o ese atributo. Los namespaces se indican mediante una URL.

El namespace que utilizan todas las páginas XHTML (independientemente de la versión ydel DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:

<html xmlns="http://www.w3.org/1999/xhtml">

...

</html>

De esta forma, es habitual que las páginas XHTML comiencen con el siguiente código:



<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

Aunque el código anterior es mucho más complicado que una simple etiqueta <html>,es imprescindible para que las páginas XHTML creadas sean correctas y superensatisfactoriamente el proceso de validación que se muestra en los capítulos siguientes.

Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear laspáginas, todo el código anterior se incluye de forma automática. Si creas las páginas amano, sólo tienes que copiar y pegar ese código en cada nueva página.

Estructura

<html> principio de documento

<head> principio de cabecera

<title>título</title>

...


https://utu.pias.uy

</head> fin de cabecera

<body> principio de cuerpo

....

</body> fin del cuerpo

</html> fin del documento

Etiquetas

Todas las etiquetas en HTML están encerradas entre los símbolos “<” y “>”. Se

cierran con el nombre de la etiqueta precedido con el símbolo “/”. Las etiquetas

afectan al código delimitado por la apertura y el cierre de la etiqueta.

Atributos

Muchas etiquetas tienen atributos, los cuales modifican el funcionamiento de la

misma. Estos se ponen de esta forma:

<etiqueta atributo1=”valor1” atributo2=”valor2” ...>

....

</etiqueta>

En el cierre sólo se cierra la etiqueta.

Comentarios

Es texto que no aparece en la página, sino que sirve para informarnos a nosotros mismos. Secoloca:



Símbolos especiales

El texto del documento HTML es problemático ya que numerosos servidores no puedenalmacenar códigos extendidos de texto (como los símbolos “é”, € , TM o ñ, porejemplo). Por eso se utilizan códigos. Los códigos se colocan con el símbolo &, seguidodel nombre del código y finalizado con el punto y coma. Los más utilizados son:

Literal Hex Dec Entidad Carácter


https://utu.pias.uy


00A0 0160 espacio que no produce saltos de línea

¡ 00A1 0161 ¡ exclamación de apertura

¢ 00A2 0162 ¢ signo de centavo

£ 00A3 0163 £ signo de libra

¤ 00A4 0164 ¤ signo internacional de moneda

¥ 00A5 0165 ¥ signo de yen

§ 00A7 0167 § signo de sección

¨ 00A8 0168 ¨ diéresis

© 00A9 0169 © signo de copyright

ª 00AA 0170 ª indicador ordinal femenino

« 00AB 0171 « comillas anguladas de apertura

¬ 00AC 0172 ¬ signo de negación lógica

® 00AE 0174 ® signo de marca registrada

¯ 00AF 0175 ¯ raya alta

° 00B0 0176 ° signo de grado

± 00B1 0177 ± signo de más/menos

´ 00B4 0180 ´ acento agudo

µ 00B5 0181 µ signo de micro

¶ 00B6 0182 ¶ signo de fin de parágrafo

· 00B7 0183 · punto medio (coma georgiana)

¸ 00B8 0184 ¸ cedilla

º 00BA 0186 º indicador ordinal masculino

» 00BB 0187 » comillas anguladas de cierre

¿ 00BF 0191 ¿ signo de interrogación de apertura

À 00C0 0192 À A con acento grave

Á 00C1 0193 Á A con acento agudo

Â 00C2 0194 Â A con acento circunflejo

Ã 00C3 0195 Ã A con tilde


https://utu.pias.uy


Ä 00C4 0196 Ä A con diéresis

Å 00C5 0197 Å A con anillo

Æ 00C6 0198 Æ Ligadura AE

Ç 00C7 0199 Ç C cedilla

È 00C8 0200 È E con acento grave

É 00C9 0201 É E con acento agudo

Ê 00CA 0202 Ê E con acento circunflejo

Ë 00CB 0203 Ë E con diéresis

Ì 00CC 0204 Ì I con acento grave

Í 00CD 0205 Í I con acento agudo

Î 00CE 0206 Î I con acento circunflejo

Ï 00CF 0207 Ï I con diéresis

Ñ 00D1 0209 Ñ N con tilde

Ò 00D2 0210 Ò O con acento grave

Ó 00D3 0211 Ó O con acento agudo

Ô 00D4 0212 Ô O con acento circunflejo

Õ 00D5 0213 Õ O con tilde

Ö 00D6 0214 Ö O con diéresis

Ø 00D8 0216 Ø O con barra

Ù 00D9 0217 Ù U con acento grave

Ú 00DA 0218 Ú U con acento agudo

Û 00DB 0219 Û U con acento circunflejo

Ü 00DC 0220 Ü U con diéresis

ß 00DF 0223 ß doble s (alemán)

à 00E0 0224 à a con acento grave

á 00E1 0225 á a con acento agudo

â 00E2 0226 â a con acento circunflejo

ã 00E3 0227 ã a con tilde


https://utu.pias.uy

https://es.wikipedia.org/wiki/Eszett


ä 00E4 0228 ä a con diéresis

å 00E5 0229 å a con anillo

æ 00E6 0230 æ diptongo (ligadura) ae

ç 00E7 0231 ç c cedilla

è 00E8 0232 è e con acento grave

é 00E9 0233 é e con acento agudo i co

ê 00EA 0234 ê e con acento circunflejo

ë 00EB 0235 ë e con diéresis

ì 00EC 0236 ì i con acento grave

í 00ED 0237 í i con acento agudo

î 00EE 0238 î i con acento circunflejo

ï 00EF 0239 ï i con diéresis

ñ 00F1 0241 ñ n con tilde

ò 00F2 0242 ò o con acento grave

ó 00F3 0243 ó o con acento agudo

ô 00F4 0244 ô o con acento circunflejo

õ 00F5 0245 õ o con tilde

ö 00F6 0246 ö o con diéresis

÷ 00F7 0247 ÷ signo de división

ø 00F8 0248 ø o con barra

ù 00F9 0249 ù u con acento grave

ú 00FA 0250 ú u con acento agudo

û 00FB 0251 û u con acento circunflejo

ü 00FC 0252 ü u con diéresis

ÿ 00FF 0255 ÿ y con diéresis

₫ 20AB 20AB &dong; dong


https://utu.pias.uy


Colores

Muchas etiquetas indican colores. Hay dos formas de indicar el color. Por el nombre(“blue”, “yellow”, “silver”,...) o por el código. El código son seis cifras hexadecimales,donde las dos primeras indican el nivel de rojo, las dos siguientes el de verde ylas dos últimas el de azul. Ejemplo: #33CC66.

Sólo hay 216 colores seguros en Internet. Son colores que, en teoría, se ven igual encualquier sistema operativo.

Lista de códigos de colores HTML comunes

COLOR COLOR NAME HEX COLOR CODE RGB COLOR CODE

WHITE #FFFFFF RGB(255, 255, 255)

SILVER #C0C0C0 RGB(192, 192, 192)

GRAY #808080 RGB(128, 128, 128)

BLACK #000000 RGB(0, 0, 0)

RED #FF0000 RGB(255, 0, 0)

MAROON #800000 RGB(128, 0, 0)

YELLOW #FFFF00 RGB(255, 255, 0)

OLIVE #808000 RGB(128, 128, 0)

LIME #00FF00 RGB(0, 255, 0)

GREEN #008000 RGB(0, 128, 0)

AQUA #00FFFF RGB(0, 255, 255)

TEAL #008080 RGB(0, 128, 128)

BLUE #0000FF RGB(0, 0, 255)

NAVY #000080 RGB(0, 0, 128)

FUCHSIA #FF00FF RGB(255, 0, 255))

PURPLE #800080 RGB(128, 0, 128))


https://utu.pias.uy

Cabecera

Estructura de la cabecera

Como ya se explicó anteriormente, las páginas XHTML se dividen en dos partes denominadascabecera y cuerpo. La sección de la cabecera está formada por todas las etiquetas encerradas porla etiqueta <head>:

Etiqueta <head>Atributos comunes internacionalización

Atributos propios

profile = "url" - Especifica la URL del perfil o perfiles que utilizan

los metadatos

lang = "codigo_de_idioma" - Especifica el idioma principal de los

contenidos de la página

Tipo de elemento -

Descripción Define la cabecera del documento HTML

La cabecera típica de una página HTML completa presenta la siguiente estructura:

<head>



<title>El título del documento</title>



<link rel="stylesheet" href="#" type="text/css" media="screen" />

<link rel="stylesheet" href="#" type="text/css" media="print" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="#" />

<script src="#" type="text/javascript"></script>

</head>


https://utu.pias.uy

http://librosweb.es/xhtml/capitulo_2/etiquetas_y_atributos.html#atributos_para_internacionalizacion


La etiqueta <title> establece el título de la página. Los navegadores muestran este título como títulode la propia ventana del navegador. Los buscadores utilizan este título como título de sus resultadosde búsqueda.

Por tanto, el valor de <title> no sólo es importante para los usuarios, sino que también es importantepara que los usuarios encuentren las páginas a través de los buscadores. Un error común demuchos sitios web consiste en mostrar un mismo título genérico en todas sus páginas. Cada páginadebe mostrar un título corto, adecuado, único y que describa inequívocamente los contenidos de lapágina.

Metadatos

Una de las partes más importantes de la metainformación de la página son losmetadatos, que permiten incluir cualquier información relevante sobre la propia página.

La especificación oficial de HTML no define la lista de metadatos que se pueden incluir,por lo que las páginas tienen libertad absoluta para definir los metadatos que considerenadecuados. La etiqueta empleada para la definición de los metadatos es <meta>.

Etiqueta <meta>Atributos comunes internacionalización

Atributos propios

name = "texto" - El nombre de la propiedad que se define (no

existe una lista oficial de propiedades)

content = "texto" - El valor de la propiedad definida (no existe

una lista de valores permitidos)

http-equiv = "texto" - En ocasiones, reemplaza al atributo

“name” y lo emplean los servidores para adaptar sus respuestas al

documento

scheme = "texto" - Indica el esquema que se debe emplear para

interpretar el valor de la propiedad

Tipo de elemento -

DescripciónPermite definir el valor de los metadatos que forman la

metainformación del documento


https://utu.pias.uy

http://librosweb.es/xhtml/capitulo_2/etiquetas_y_atributos.html#atributos_para_internacionalizacion


Los metadatos habituales utilizan solamente los atributos name y content para definir elnombre y el valor del metadato:

<meta name="autor" content="Juan Pérez" />

No obstante, algunas etiquetas <meta> muy utilizadas hacen uso del atributohttp-equiv. Este atributo se utiliza para indicar que el valor establecido por estemetadato puede ser utilizado por el servidor al entregar la página al navegador delusuario. El siguiente metadato indica al servidor que el contenido de la página es códigoHTML y su codificación de caracteres es UTF-8:


El atributo scheme no suele utilizarse, aunque permite proporcionar información decontexto para que el navegador interprete correctamente el valor del metadato. En elsiguiente ejemplo, el atributo scheme indica al navegador que el valor del metadatohace referencia al código ISBN:

<meta scheme="ISBN" name="identificador" content="789-1392349610">

Aunque no existe una lista oficial con los metadatos que se pueden definir, algunos deellos se utilizan en tantas páginas que se han convertido prácticamente en un estándar.A continuación se muestran los metadatos más utilizados:

Definir el autor del documento:

<meta name="author" content="Juan Pérez" />

Definir el programa con el que se ha creado el documento:

<meta name="generator" content="WordPress 2.8.4" />

Definir la codificación de caracteres del documento:


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

Definir el copyright del documento:

<meta name="copyright" content="librosweb.es" />

Definir el comportamiento de los buscadores:

<meta name="robots" content="index, follow" />

Definir las palabras clave que definen el contenido del documento:

<meta name="keywords" content="diseño, css, hojas de estilos, web, html" />


https://utu.pias.uy


Definir una breve descripción del sitio:

<meta name="description" content="Artículos sobre diseño web, usabilidad yaccesibilidad" />

<LINK>

<link rel="stylesheet" type="text/css" href="theme.css" hreflang=”es”>

La etiqueta <link>, permite realizar la carga y establecer la relación existente entre eldocumento web actual y un recurso externo. Esta etiqueta es normalmente muyutilizada para realizar la carga de hojas de estilo para el documento web.

El formato de la etiqueta con todos sus atributos es el siguiente:

<link href=”valor” hreflang=”valor” media=”valor” rel=”valor” sizes=”valor”types=”valor” ></link>

href: este atributo permite establecer la URL en la que se encuentra el documento elcual se quiere enlazar, con el documento web.

hreflang: este atributo permite establecer el lenguaje del documento que se estáenlazando, aunque no realiza ninguna función especial en los navegadores, puede serutilizado por los motores de búsqueda para establecer el idioma.

rel: el atributo sirve para especificar la relación existente entre el documento web y eldocumento con el que se está realizando el enlace. El atributo es obligatorio y se ha deincluir.

Rel Descripción

alternate Especifica la relación del documento con una versión alternativa

del mismo. (Impresora, Espejo, Traducida, Etc.)

author Especifica la relación del enlace con el autor del documento con

el que se enlaza.

help Especifica relación con el documento de ayuda.

icon Se utiliza normalmente para asociar un pequeño icono con el

documento web. Este icono suele ser visible en la barra de

dirección del navegador.

license Especifica la información de copyright sobre el documento web.

next Especifica que el documento web, es parte de una serie de

documentos, e indica que el documento que enlaza es el

siguiente en la serie.


https://utu.pias.uy


prefetch (prerender) Sirve para especificar desde el documento web que se está

cargando, cual es el próximo documento web que se ha de

cargar, de esta forma el navegador solicita una petición de

cache, cargándose posteriormente la página más rápidamente.

prev Especifica que el documento web, es parte de una serie de

documentos, e indica que el documento que enlaza es el

anterior en la serie.

search Especifica que el enlace es a la utilidad de búsqueda en el

documento.

stylesheet El más utilizado, especifica que el documento con el cual se

enlaza es una hoja de estilos a importar, que aplicara formato al

documento web.

sizes: El atributo se utiliza solo en caso de haber especificado anteriormente en elatributo rel el valor icon, y permite especificar el tamaño del atributo con el cual se estáenlazando, aunque es soportada por el lenguaje html5, los navegadores a fecha actualno la implementan.

La sintaxis para definir esta etiqueta con el atributo sizes es la siguiente:

<link rel="icon" href="demo_icono.gif" type="image/gif" sizes="16x16">

type: Sirve para especificar el tipo MIME[1] del documento con el que se estárealizando el enlace. Se pueden consultar los tipos mime en la siguiente dirección:

http://www.iana.org/assignments/media-types

<link type=”text/css”>

Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de textoplano “text/plain”, etc.

media: este atributo se ha modificado bastante en esta última versión del lenguaje, yaunque nos centraremos posteriormente más en el mismo, inicialmente servirá paraindicar el tipo de dispositivo para el cual se esta realizando el enlace.

La sintaxis para definir esta etiqueta con el atributo media es la siguiente:

<link rel="Valor" type="Valor" href="URL" media="valor">

Entre los posibles valores de dispositivos que encontramos para el atributo media, seencuentran los siguientes:


https://utu.pias.uy

http://www.iana.org/assignments/media-types

Media Descripción

all Valor por defecto, especifica todo tipo de dispositivos.

aural Sirve para especificar que el dispositivo para el que se enlaza es un

sintetizador de voz.

braille Especifica un dispositivo de tipo braille.

handhelp Especifica un dispositivo de mano, de pantalla pequeña o ancho de

banda limitado.

projection Especifica un dispositivo de tipo projector.

print Especifica un dispositivo de impresión.

screen Especifica un dispositivo de pantalla de pc.

tty Especifica un dispositivo de tipo teletipo, que utiliza caracteres de

tamaño fijo.

tv Especifica un dispositivo de tipo televisión.

<SCRIPT>

La etiqueta Script (<script>) se utiliza para insertar o hacer referencia a un scriptejecutable dentro de un documento HTML o XHTML.



<script type="text/javascript" src="javascript.js"></script>



<script src="javascript.js"></script>

Cuerpo

Etiquetas

<BODY>

Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre lasetiquetas <BODY>...</BODY>. Esta etiqueta cuenta con los siguientes atributos:

Bgcolor: define el color de fondo de la página

Text: define el color del texto de la página

Link: define el color de los vínculos en la página


https://utu.pias.uy


Alink: define el color del vínculo actual o activado en la página

Vlink: define el color del vínculo ya visitado

Background: define el archivo gráfico que será desplegado como fondo

Bgsound: define el archivo de audio que se tocará en la página. IE

Bgproperties: define el movimiento vertical del fondo. IE

<CENTER>

Etiqueta <CENTER> </CENTER> se utiliza para centrar el texto/imagen o datos que seencuentren entre la apertura y el cierre.

<FONT>

La etiqueta <FONT> </FONT> proporciona al autor un medio de personalizar el textocon respecto al tipo de fuente, tamaño y color. Atributos:

Color: determina el color que se aplica al texto

Size: determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7, siendo elpredeterminado el 3 y el más grande el 1.

Face: asigna una fuente o tipo de letra.

Ejemplo:

<font color="blue">

<font size=7>U</font>

ru</font>

<font color="yellow">gu</font>

<font color="blue">ay</font>

<BR>

La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en undocumento HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro enuna máquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre.

<U>

La etiqueta <u>Esto esta subrayado</u> sirve para subrayar texto.

<B>

La etiqueta <B>Esto en negrita</B> sirve para poner en negrita el texto.

<I>


https://utu.pias.uy


La etiqueta <i>Esto en cursiva</i> sirve para poner en cursiva el texto.

<S>

La etiqueta <S> Esto enta tachado</S> sirve para poner texto tachado.

<SUP>

Esta etiqueta permite poner la letra como superíndice: E=mc <SUP>2</SUP>

<SUB>

Esta etiqueta permite poner la letra como subíndice: a<SUB>i</SUB>=b

<TT>

Se puede utilizar un tipo de letra similar al de una máquina deescribir:<TT>texto</TT>

<HR>

La etiqueta <HR> dibuja de manera predeterminada una regla horizontal alineadaautomáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, porque no necesita de cierre, tiene los siguientes atributos:

ALIGN: establece que la regla se alinee a la izquierda, centro o derecha (LEFT,CENTER oRIGHT).

NOSHADE: quita el sombreado predeterminado de la regla.

WIDTH: permite especificar el ancho de la regla (en pixeles o porcentaje)

SIZE: permite especificar el alto de la regla (en pixeles).

Ejemplos:

<hr width=300 noshade align=”left” size=5 color=”blue”>

<hr width="100%" align=”center” size=25 color=”green”>

<PRE>

Permite el texto preformateado, respeta espacios en blanco, caracteres especiales, etc.

<PRE>

---------------------

| 01 | 02 | 03 | 04 |

| 05 | 06 | 07 | 08 |

| 09 | 10 | 11 | 12 |


https://utu.pias.uy


---------------------

</PRE>

Encabezados<H1> ... </H1> Letra de nivel 1

<H2> ... </H2> Letra de nivel 2





Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia.No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo deletra, ya que cada navegador los muestra de manera diferente. Se usan para dividircorrectamente en secciones nuestra página, tal y como se hace en un documento detexto normal.

<BLOCKQUOTE>Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva

<blockquote></blockquote>

<ADDRESS>Las direcciones de correo electrónico se suelen marcar con esta directiva:

<address>Dirección: [email protected]</address>

Formato de frases<CITE>...</CITE>

Para citar un texto ajeno.<CODE> ...</CODE>

Para escribir código fuente.<STRONG> ...</STRONG>

Texto importante.<EM>...</EM>


https://utu.pias.uy

mailto:[email protected]


Para dar énfasis.

Listas

Lista no numerada:<UL>

<LI>TOMATES

<LI>ZANAHORIAS

<LI>PUERROS

</UL>

Lista numerada:<OL>

<LI>MIGUEL INDURÁIN

<LI>TONY ROMINGER

<LI>EUGENI BERZIN

</OL>

Listas de definicionesUn glosario está formado por una serie de parejas de término (marcado con <dt> al principio delínea) y definición (con <dd> ). Por ejemplo, podríamos crear un pequeño diccionario con lostérminos perro, gato y pescadilla, de la siguiente manera:

<DL>

<DT>PERRO (<I>N. MASC.</I>)

<DD>ANIMAL DE CUATRO PATAS QUE LADRA.

<DT>GATO (<I>N. MASC.</I>)

<DD>ANIMAL DE CUATRO PATAS QUE MAÚLLA Y

<DT>PESCADILLA (<I>N. FEM.</I>)

<DD>ANIMAL QUE VIVE EN EL MAR Y ESTÁ RECUBIERTO DE ESCAMAS.

</DL>


https://utu.pias.uy


Tablas

Las tablas son posiblemente la manera más clara de organizar la información. Tambiénes el modo más adecuado de organizar texto y gráficos de una manera algo máscontrolada que con los parámetros ALIGN. Las tablas se definen de la siguiente manera.Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cadacelda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:

<TABLE>

<TR>

<TD>1,1</TD>

<TD>1,2</TD>

<TD>1,3</TD>

</TR>

<TR>

<TD>2,1</TD>

<TD>2,2</TD>

<TD>2,3</TD>

</TR>

</TABLE>

Propiedades de las tablas

BORDER: Especifica el grosor del borde que se dibujará alrededor de las celdas. Por estándar escero, lo que significa que no dibujará borde alguno.

CELLSPACING: Define el número de píxeles que separarán las celdas.

CELLPADDING Especifica el número de píxeles que habrá entre el borde de una celda y sucontenido.

WIDTH: Especifica la anchura de la tabla. Puede estar tanto en píxeles como en porcentaje de laanchura total disponible. (Pondremos "100%" si queremos que ocupe todo el ancho de la ventanadel navegador o su contenedor).

ALIGN: Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o al centro (CENTER).

Definir las filas <TR>


https://utu.pias.uy


Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con unaetiqueta TR , que tiene los siguientes atributos:

ALIGN: Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha(RIGHT) o centro (CENTER).

VALIGN: Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) ocentro (MIDDLE).

Definir las celdas <TD>

Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas sonequivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá porestándar en negrita y centrado. Estos son los atributos de ambas:

ALIGN: Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) ocentro (CENTER).

VALIGN: Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro(MIDDLE).

WIDTH: Especifica la anchura de la celda. También se puede especificar tanto en píxeles como enporcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho totalde la tabla (no de la ventana del navegador o contenedor).

NOWRAP: Impide que, en el interior de la celda, se rompa la línea en un espacio.

COLSPAN: Especifica el número de celdas de la fila situadas a la derecha de la actual que se unena ésta (incluyendo la celda en que se declara este parámetro). Es por estándar uno. Si se pone iguala cero, se unirán todas las celdas que queden a la derecha. (Join)

ROWSPAN: Especifica el número de celdas de la columna situadas debajo de la actual que se unena ésta.

Título de la tabla

<CAPTION>

Por último, vamos a ver como definir un título a la tabla. Esto se hace por medio de la etiquetaCAPTION. Esta etiqueta admite sólo un parámetro: ALIGN , que es por defecto TOP . Si lo definimoscomo BOTTOM el título se colocará al final de la tabla en lugar del comienzo.

<TABLE BORDER=1>

<CAPTION ALIGN="BOTTOM">

Ejemplo de titulo de tablas

</CAPTION>

...


https://utu.pias.uy


</TABLE>

Hiperenlaces

<A> </A>

HREF: Recurso al cual se hace referencia el hipervínculo

NAME: Especifica el nombre de la posición a donde apuntar

TARGET: Destino del enlace (generalmente para páginas con Frames)

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsadolleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlacehan de encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, lapágina que se visualizará cuando el usuario haga clic en el enlace.

Por ejemplo, para insertar el enlace a: Visita Facebook

Habría que escribir:

<a href="http://www.facebook.com">Visita Facebook</a>

Tipos de referencias

Existen diferentes formas de expresar una referencia a una página a través del atributohref.

Referencia absoluta

Conduce a una ubicación externa al sitio en el que se encuentra el documento. Laubicación es en Internet, en este caso hay que empezar la referencia por http:// , elnombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombrede la página se cargará la página de inicio asociada al dominio.

Por ejemplo, "http://www.its.edu.uy" tendrá el mismo efecto que"http://www.its.edu.uy/its/index.html"

Para insertar el enlace: Visita ITS


<a href="http://www.its.edu.uy">Visita ITS</a>


https://utu.pias.uy

http://www.facebook.com/


Referencia relativa al sitio

Conduce a un documento situado dentro del mismo sitio que el documento actual. Unsitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseñosimilar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocidacomo carpeta raíz del sitio.

Por ejemplo, teniendo en cuenta que el documento contacto.html se encuentradirectamente dentro de la carpeta raíz del sitio, para insertar el enlace: Ir a Contacto


<a href="/contacto.html">Ir a Contacto</a>

Observa como aparece el símbolo "/" delante del nombre del documento. Esta barrainclinada indica la carpeta raíz del sitio. Si el documento “contacto.html” se encontrara,por ejemplo, dentro de una carpeta llamada “contacto”, y esta estuviera dentro de lacarpeta raíz del sitio, habría que escribir:

<a href="/contacto/contacto.html">Ir a Contacto</a>

Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, peropartiendo del directorio en el que se encuentra el actual.

Por ejemplo, teniendo en cuenta que el documento “contacto.html” se encuentra dentrode la misma carpeta que el documento actual, para insertar el enlace: Ir a Contacto


<a href="contacto.html">Ir a Contacto</a>

Observa que en este caso no aparece el símbolo "/" delante del nombre del documento.Si el documento “contacto.html” se encontrara, por ejemplo, dentro de una carpetallamada “contacto_principal”, y esta estuviera dentro de la misma carpeta que eldocumento actual, habría que escribir:

<a href="contacto_principal/contacto.html">Ir a Contacto</a>

Punto de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otrodiferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".

Por ejemplo, para insertar el enlace: Servicios – Servicios On-line


<a href="servicios.html#online">Servicios – Servicios On-line</a>


https://utu.pias.uy


Teniendo en cuenta que el documento se llama “servicios.html” y el punto de fijación sellama “online”.

Imágenes y fondos

<IMG>

Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiquetainstruye al navegador para que exhiba la imagen especificada. El formato básico paraincluir un gráfico es:

<img src=”imagen.ext”>

No es necesario re dimensionar en forma permanente un archivo gráfico para exhibirloen contextos variables; sin embargo, el autor de HTML puede indicar al navegador quere dimensione la imagen especificando los siguientes atributos:

Src: identifica la imagen que se desplegará.

Height: para redimensionamiento de gráfico (en pixeles o en porcentaje)

Width: para redimensionamiento de gráfico (en pixeles o en porcentaje)

Border: A la imagen se le puede aplicar un borde que se hace notorio especialmentecuando se trata de una imagen que además es un hipervínculo: definido en pixels.

Align: La imagen también puede alinearse con respecto al texto, la alineación, puedeser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT.

Alt: En caso de que la imagen no pueda exhibirse, se puede desplegar un texto alterno.

Imagen de fondo

BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono

único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg.

Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:

La imagen se llama fondo.gif y se encuentra depositada en el mismo directorio que el documento.

La sintaxis correcta para impostar la imagen como fondo es:

<BODY BACKGROUND="fondo.gif">


https://utu.pias.uy


El navegador visualiza la imagen fondo.gif y la repite en todos los puntos disponibles de la pantalla.En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página porejemplo, sino que llena todo espacio a disposición.Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presenteinterrupciones sino un aspecto lo más uniforme posible.Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posibleal color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejorusar el color negro para el texto y tonos pastel para el fondo.

Tratamiento de imágenes

Cuando se trata de insertar imágenes en las páginas web hay que tener en cuenta quétipo de imágenes son las más adecuadas, cómo modificar las mismas para la web.

Existen diversos programas de tratamiento de imágenes, también llamados de diseñográfico. Con estos programas podemos retocar una imagen, recortar un trozo de lamisma, variar los tonos de color, convertirla a blanco y negro, reducirla, etc.

Por lo tanto antes de colgar una imagen en la web, se debe observar si podemosmejorar la imagen mediante algunos pequeños retoques. A veces un cambio en elcontraste o en el brillo, o recortando la imagen en el trozo que nos interesa, puedesuponer una importante mejora de la imagen.

Por otra parte al subir una imagen a una página se debe tener en cuenta una serie depropiedades de la misma para que pueda ser vista sin problemas por los usuarios, yademás que no interfiera con el rendimiento o la carga de la página.

Peso: Es el espacio que ocupa la imagen como archivo en nuestro ordenador, medidoen kilobites (Kb) o Megabites (Mb).

Formato: Es el tipo de archivo en el que se guarda la imagen. Este viene dado por laextensión del archivo. No todos los tipos de archivo son reconocidos por losnavegadores, y además unos se adaptan mejor que otros a las páginas web.

Resolución: La imagen está formada por pequeños puntos llamados píxeles. Laresolución es la cantidad de píxeles que tiene cada imagen por unidad de longitud. Unade las medidas más corrientes es ppp, que significa "píxeles por pulgada". A mayorresolución, mayor nitidez, pero también mayor peso de la imagen.

Tamaño: Es la superficie que ocupa la imagen en su formato real, es decir sinampliaciones ni reducciones. Puede medirse en centímetros, pulgadas, o en píxeles. Sinembargo la medida en píxeles está condicionada por la resolución.


https://utu.pias.uy


Color: Existen varios tipos de colores para las imágenes. Para una fotografía senecesitan todos los colores, por lo que se utiliza la opción de "color real". Sin embargopara dibujos se puede utilizar la "paleta de colores" reduciendo el número de colores a256 o a 16. Se puede también pasar la imagen a blanco y negro, sepia, o algún otrotono monocromático. El peso de la imagen dependerá también del número de coloresutilizados, a más colores, mayor peso.

Para un funcionamiento óptimo de la página, las imágenes no deben de ser muypesadas. Una página está formada fundamentalmente por archivos de texto e imágenes.

Al cargar la página, deben transferirse todos los archivos al ordenador del usuario. Losarchivos de texto tienen muy poco peso, por lo que se cargarán enseguida, sinembargo, las imágenes son archivos de mayor peso, por lo que tardarán más encargarse.

Si el peso de las imágenes es excesivo, la página tardará mucho tiempo en cargarse,por lo que el usuario tendrá que esperar, lo que no resulta ser muy agradable.

Este problema hoy día no lo es tanto ya que la mayoría de usuarios utilizan conexionesrápidas para Internet, las que permiten cargar una imagen pesada en pocosmilisegundos. Sin embargo el problema está en el espacio que posee la página.

El servidor web (ordenador al cual subimos la página para que se vea en Internet),suele ceder al propietario o diseñador de la página un espacio en disco limitado (sobretodo si se utiliza un servidor gratuito). Cuanto más espacio se ocupe en los archivos defotografías, menos quedará para incorporar nuevas páginas al sitio.

Al reducir el peso de una imagen se está reduciendo su calidad.

Se debe pues reducir el peso de la imagen sin que por ello afecte a la calidad en lapágina. Por tanto retocar la imagen para reducir su peso sin perder su calidad en lapágina mediante un programa de diseño gráfico.

Otra forma de reducir el peso de la imagen sin perder la calidad puede serseleccionando el tipo de color que tiene que tener la imagen. Sobre todo cuando lasimágenes no son fotografías, se puede reducir la cantidad de colores que debe tener laimagen mediante la "paleta de colores". Un imagen de un dibujo a 256 colores tienebastante menos peso que en color real, y no suele afectar a su calidad. Por otra partelas fotografías en blanco y negro, sepia, o monocromáticas, ocupan también bastantemenos que en color real.


https://utu.pias.uy


Formatos de imagen para web

El formato viene definido por la extensión del archivo. Los programas de diseño gráficopermiten cambiar la extensión del archivo (y por tanto el tipo de archivo) simplementeguardándolos con otra extensión. Esto hace que se pueda elegir el tipo de formato quetendrá la imagen.

Formato .bmp

Este formato crea un "mapa de bits" del archivo. Apto para pequeños dibujos. No esmuy usado debido a que suele utilizar bastante espacio, lo que suele hacer las imágenesbastante pesadas.

Formato .gif

Apto para dibujos e imágenes con colores planos o poco definidos (escaneo de textos,logos, flechas, botones, imágenes pequeñas, etc). Su peso en Kb suele ser bastantebajo. Además permite tener en la imagen un color "transparente" que hace que enciertas zonas de la imagen se pueda ver el color de fondo de la página.

Otra característica de este formato es poder realizar imágenes animadas. mediante lainclusión de varias capas con diferentes imágenes, se puede ver estas imágenes una acontinuación de otra en muy cortos intervalos de tiempo. Por lo que se puede realizarimágenes con animación, conocidos también como gifs animados.

Formato .jpg

Opción para fotografías e imágenes que necesiten verse con amplitud de detalles. Elformato .jpg emplea una compresión con pérdidas, es decir el archivo pierdeinformación sin que ésto suponga una gran perdida de calidad.

La mayoría de programas de diseñó gráfico permiten comprimir las imágenes alguardarlas con la extensión .jpg. Una compresión de hasta un 60% - 70% no sueleafectar a la calidad de la imagen en la página, y permite reducir bastante el peso de laimagen.

Formato .png

Desarrollado como alternativa a los formatos .jpg y .gif, pretende aunar las ventajas deestos dos formatos. Admite tanto la compresión realizada en los archivos .jpg como eluso de la paleta de colores y las transparencias de los archivos .gif.

Tal vez el principal problema es que al ser un formato de archivo más nuevo, hayalgunos navegadores antiguos que no visualizan este tipo de archivos. Sin embargoexisten filtros o "plugins" que se pueden añadir al navegador para solucionar esteproblema.


https://utu.pias.uy


Teoría del Color

Es un grupo de reglas básicas en la mezcla de colores para conseguir el efecto deseadocombinando colores de luz o pigmento. La luz blanca se puede producir combinando elrojo, el verde y el azul, mientras que combinando pigmentos cian, magenta y amarillose produce el color negro.

La mezcla de los colores primarios de la luz, que son rojo, verde y azul (RGB, inicialesen inglés de los colores primarios), se realiza utilizando el sistema de color aditivo,también conocido como el Modelo RGB o el espacio de color RGB. Todos los coloresposibles que pueden ser creados por la mezcla de estas tres luces de color son aludidoscomo el espectro de color de estas luces en concreto. Cuando ningún color luz estápresente, se percibe el negro. Los colores primarios de luz tienen aplicación en losmonitores de ordenador, televisores, proyectores de video y todos aquellos sistemasque utilizan combinaciones de materiales que fosforecen en el rojo, verde y azul.

Se debe tener en cuenta que sólo con unos colores «primarios» ficticios se pueden llegara conseguir todos los colores posibles. Estos colores primarios son conceptos idealizadosutilizados en modelos de color matemáticos que no representan las sensaciones de colorreales o incluso los impulsos nerviosos reales o procesos cerebrales. En otras palabras,todos los colores «primarios» perfectos son completamente imaginarios, lo que implicaque todos los colores primarios que se utilizan en las mezclas son incompletos oimperfectos.

El color es un atributo que percibimos de los objetos cuando hay luz. Todo el mundo quenos rodea es de colores siempre y cuando haya luz.

Gracias a las propiedades de la luz los objetos devuelven los rayos que no absorbenhacia su entorno. Nuestro cerebro interpreta esas radiaciones electromagnéticas que losobjetos reflejan como lo que llamamos Color.

Las propiedades del color son aquellos atributos que cambian y hacen único a cadacolor. Estos atributos son tres: El tono, la saturación y el brillo.

El Tono: también es conocido como matiz, tinte, croma o su nombre en inglés, Hue. Esla propiedad que diferencia un color de otro y por la cual designamos los colores: verde,violeta, rojo, etc.


https://utu.pias.uy

https://es.wikipedia.org/wiki/Pigmento

https://es.wikipedia.org/wiki/Rojo

https://es.wikipedia.org/wiki/Azul

https://es.wikipedia.org/wiki/Rojo

https://es.wikipedia.org/wiki/S%C3%ADntesis_aditiva_de_color

https://es.wikipedia.org/wiki/Espacio_de_color_RGB

https://es.wikipedia.org/wiki/Pantalla_de_ordenador

https://es.wikipedia.org/wiki/Televisi%C3%B3n

https://es.wikipedia.org/wiki/Cerebro

http://www.fotonostra.com/fotografia/propiedadesluz.htm


Hace referencia al recorrido que hace un color en el círculo cromático adquiriendomatices, como por ejemplo el rojo anaranjado o el amarillo verdoso.

La Saturación: representa la intensidad cromática o pureza de un color. En otraspalabras, es la claridad u oscuridad de un color, está determinado por la cantidad de luzque un color tiene.

La saturación de los colores cambia a medida que ese color tiene más o menos cantidadde gris. A mayor cantidad de gris, más pálido y menos saturación.

La luminosidad: es la cantidad de luz reflejada por una superficie en comparación conla reflejada por una superficie blanca en iguales condiciones de iluminación.

En teoría del color, la luminosidad hace referencia a cuánto de oscuro o de claro es uncolor. A mayor luminosidad de un color mayor luz reflejará.

El círculo cromático

El círculo cromático suele presentarse como una rueda dividida en doce partes. Loscolores primarios se colocan de modo que uno de ellos esté en la porción superiorcentral y los otros dos en la cuarta porción a partir de esta, de modo que si unimos lostres con unas líneas imaginarias formarían un triángulo equilátero con la basehorizontal. Entre dos colores primarios se colocan tres tonos secundarios de modo queen la porción central entre ellos correspondería a una mezcla de cantidades iguales deambos primarios y el color más cercano a cada primario sería la mezcla del secundariocentral más el primario adyacente.


https://utu.pias.uy


Diseño Vectorial con Corel

Las imágenes vectoriales se construyen a partir de vectores. Los vectores son objetosformados matemáticamente. Un vector se define por una serie de puntos que tienenunas manecillas con las que se puede controlar la forma de la línea que crean al estarunidos entre sí. Los principales elementos de un vector son las curvas Béizer (curvasrepresentadas matemáticamente).

Estas líneas o curvas béizer son muy manejables ya que permiten muchas posibilidadespor su plasticidad. Estas características las convierten en la manera ideal de trabajarcuando se trata de diseño gráfico, (como creación de logotipos o dibujos). Laversatilidad de las mismas las convierten en una manera muy útil para trabajar tambiéncon textos ya que se pueden modificar y deformar sin límite, a cada letra se le puedenasignar contornos editables además de poder descomponer la misma en varios objetos.

Al utilizar los formatos vectoriales coordenadas matemáticas para formar imágenesconcretas, la resolución de las mismas es infinita, es decir, toda imagen vectorial sepuede escalar ampliando o reduciendo sin que la visibilidad de la misma se veaafectada, ni en pantalla ni a la hora de imprimir.

La imagen vectorial nos permite crear contornos de línea variada y definir el color de lasformas que éstas crean. La forma se puede controlar de manera muy precisa y cadaobjeto se puede manejar de forma independiente al resto ya que esta construido conuna fórmula matemática propia.

Las imágenes vectoriales se almacenan como una lista que describe cada uno de susvectores componentes, su posición y sus propiedades.

En cuanto a la resolución, los gráficos vectoriales son independientes de la resolución,ya que no dependen de una retícula de píxeles dada. Por lo tanto, tienen la máximaresolución que permite el formato en que se almacena.Se pueden incluir bitmaps en un dibujo vectorial, bien para rellenos de formas, biencomo elementos separados. En el otro sentido, un vector puede exportarse a un formatode mapa de bits estándar, como GIF o JPG.

Programas y archivos para trabajar las imágenes vectoriales CDR- Corel Draw:

Es el formato del programa que lo genera. Los gráficos que realizamos con Corel Drawson vectoriales y están compuestos por líneas y planos que se sitúan en unascoordenadas concretas en la página.


https://utu.pias.uy


Mapeo de imágenes

Un mapa de imagen permite definir diferentes zonas "pinchables" dentro de unaimagen. El usuario puede pinchar sobre cada una de las zonas definidas y cada una deellas puede apuntar a una URL diferente. Siguiendo el ejemplo anterior, una sola imagenque muestre un mapa de todos los continentes puede definir una zona diferente paracada continente. De esta forma, el usuario puede pinchar sobre la zona correspondientea cada continente para que el navegador muestre la página que contiene los viajesdisponibles a ese destino.

Las zonas o regiones que se pueden definir en una imagen se crean medianterectángulos, círculos y polígonos. Para crear un mapa de imagen, en primer lugar seinserta la imagen original mediante la etiqueta <img>. A continuación, se utiliza laetiqueta <map> para definir las zonas o regiones de la imagen. Cada zona se definemediante la etiqueta <area>.

Etiqueta <map>

Atributos comunes básicos, internacionalización y eventos

Atributos propios

name = "texto" - Nombre que identifica de forma única al mapa definido (es obligatorioindicar un nombre único)

Tipo de elemento Bloque y en línea

Descripción Se emplea para definir mapas de imagen

Etiqueta <area>

Atributos comunes básicos, internacionalización, eventos y foco

Atributos propios

href = "url" - URL a la que se accede al pinchar sobre el área

nohref = "nohref" - Se emplea para las áreas que no son seleccionables

shape = "default | rect | circle | poly" - Indica el tipo de área que se define (toda laimagen, rectangular, circular o poligonal)

coords = "lista de números" - Se trata de una lista de números separados por comasque representan las coordenadas del área. Rectangular = X1,Y1,X2,Y2 (coordenadas X eY del vértice superior izquierdo y coordenadas X e Y del vértice inferior derecho).Circular = X1,Y1,R (coordenadas X e Y del centro y radio del círculo). Poligonal =X1,Y1,X2,Y2,...,XnYn (coordenadas de los vértices del polígono. Si las últimascoordenadas no son iguales que las primeras, se cierra automáticamente el polígonouniendo ambos vértices)


https://utu.pias.uy


Tipo de elemento Etiqueta vacía

Descripción Se emplea para definir las distintas áreas que forman un mapa de imagen.

Si una imagen utiliza un mapa de imagen, debe indicarlo mediante el atributo usemap.El valor del atributo debe ser el nombre del mapa de imagen definido en otra parte delmismo documento HTML:

<img src="mapa_mundo.gif" usemap="#continentes" />

...

<map name="continentes">

...

</map>

Las áreas se definen mediante el atributo shape que indica el tipo de área y coords quees una lista de coordenadas cuyo significado depende del tipo de área definido. El enlacede cada área se define mediante el atributo href, con la misma sintaxis y significado quepara los enlaces normales.

El siguiente ejemplo muestra una imagen sencilla que contiene cuatro figurasgeométricas:

Ejemplo de imagen que incluye un mapa de imagen

Figura 6.2 Ejemplo de imagen que incluye un mapa de imagen

Utilizando un círculo, dos rectángulos y un polígono se pueden definir fácilmente cuatrozonas pinchables en la imagen mediante el siguiente código HTML:

<img src="imagen.gif" usemap="#mapa_zonas" />

<map name="mapa_zonas">

<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />

<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24"href="triangulo.html" />

<area shape="circle" coords="130,114,29" href="circulo.html" />


https://utu.pias.uy


<area shape="rect" coords="19,156,170,211"href="mailto:[email protected]" />

<area shape="default" nohref="nohref" />

</map>

Introducción a las Hojas de Estilo (CSS)

Introducción

¿Qué es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentaciónde los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma deseparar los contenidos y su presentación y es imprescindible para crear páginas webcomplejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosasventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y consignificado completo (también llamados "documentos semánticos"). Además, mejora laaccesibilidad del documento, reduce la complejidad de su mantenimiento y permitevisualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML paramarcar los contenidos, es decir, para designar la función de cada elemento dentro de lapágina: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto decada elemento: color, tamaño y tipo de letra del texto, separación horizontal y verticalentre elementos, posición de cada elemento dentro de la página, etc.

Breve historia de CSS

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML (porsus siglas en ingles de Standard Generalized Markup Language - SGML; ISO 8879: 1986 - es unestándar para definir lenguajes de marcado generalizadas para documentos, HTML en teoría era unejemplo de un lenguaje basado en SGML), alrededor del año 1970. Desde la creación de SGML,se observó la necesidad de definir un mecanismo que permitiera aplicar de formaconsistente diferentes estilos a los documentos electrónicos. El gran impulso de loslenguajes de hojas de estilos se produjo con el boom de Internet y el crecimientoexponencial del lenguaje HTML para la creación de documentos electrónicos. La guerrade navegadores y la falta de un estándar para la definición de los estilos dificultaban lacreación de documentos con la misma apariencia en diferentes navegadores.


https://utu.pias.uy


El organismo W3C (http://www.w3.org/) (World Wide Web Consortium), encargado decrear todos los estándares relacionados con la web, propuso la creación de un lenguajede hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas.Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML StyleSheets) y la SSP (Stream-based Style Sheet Proposal).

La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos.Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje quetomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).

En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadióa su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primerarecomendación oficial, conocida como "CSS nivel 1".

CSS 1: publicada en 1996.


CSS 2.1: publicada en 2004.


CSS 4: se estima que pueda ser especificación oficial en 2019.

Soporte de CSS en los navegadores

El trabajo del diseñador web siempre está limitado por las posibilidades de losnavegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo esimprescindible conocer el soporte de CSS en cada uno de los navegadores másutilizados del mercado.

Internamente los navegadores están divididos en varios componentes. La parte delnavegador que se encarga de interpretar el código HTML y CSS para mostrar las páginasse denomina motor. Desde el punto de vista del diseñador CSS, la versión de un motores mucho más importante que la versión del propio navegador.

La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinconavegadores más utilizados por los usuarios:

Navegador Motor CSS 1 CSS 2.1 CSS 3


https://utu.pias.uy


Google

ChromeWebKit

Completo desde la

versión 85 del

motor

Complet

o

Todos los selectores, pseudo-clases y

muchas propiedades

Internet

ExplorerTrident

Completo desde la

versión 7.0 del

navegador

Complet

o


muchas propiedades a partir de la

versión 10.0 del navegador

Firefox Gecko

Completo desde la

versión 1.0 del

navegador

Complet

o


muchas propiedades

Safari WebKit

Completo desde la

versión 85 del

motor

Complet

o


muchas propiedades

Opera Presto

Completo desde la

versión 1.0 del

navegador

Complet

o


muchas propiedades

Los navegadores Firefox, Chrome, Safari y Opera son los más avanzados en elsoporte de CSS, ya que incluyen muchos elementos de la futura versión CSS 3y un soporte casi perfecto de la actual version 2.1.

Por su parte, el navegador Internet Explorer sólo puede considerarse adecuadodesde el punto de vista de CSS a partir de su versión 7. Internet Explorer 6,utilizado todavía por un número no despreciable de usuarios, sufre carenciasmuy importantes y contiene decenas de errores en su soporte de CSS. InternetExplorer 8 soporta casi todas las propiedades y características de CSS 2.1.

La tabla anterior ha sido elaborada a partir de la información que se puedeencontrar en la página Comparison of layout engines de la Wikipedia, donde semuestra una comparación exhaustiva sobre el soporte de todas lascaracterísticas de CSS por parte de cada navegador.

Especificación oficial

La especificación o norma oficial que se utiliza actualmente para diseñarpáginas web con CSS es la versión CSS 2.1, actualizada por última vez el 19


https://utu.pias.uy

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)


de julio de 2007 y que se puede consultar libremente enhttp://www.w3.org/TR/CSS21/

Desde hace varios años, el organismo W3C trabaja en la elaboración de lapróxima versión de CSS, conocida como CSS 3. Esta nueva versión incluyemiles de cambios importantes en todos los niveles y es mucho más avanzada ycompleja que CSS 2.

No obstante, pasarán muchos años hasta que se publique la versión definitivacompleta de CSS 3 y hasta que los principales navegadores del mercadoincluyan la mayor parte del nuevo estándar.

El sitio web del organismo W3C dispone de una sección en la que se detalla eltrabajo que el W3C está desarrollando actualmente en relación a CSS(http://www.w3.org/Style/CSS/current-work) y también dispone de un blog enel que se publican todas las novedades relacionadas con CSS(http://www.w3.org/blog/CSS) .

Funcionamiento básico de CSS

Antes de la adopción de CSS, los diseñadores de páginas web debían definir elaspecto de cada elemento dentro de las etiquetas HTML de la página. Elsiguiente ejemplo muestra una página HTML con estilos definidos sin utilizarCSS:




<head>

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

<title>Ejemplo de estilos sin CSS</title>

</head>

<body>

<h1><font color="red" face="Arial" size="5">Titular de lapágina</font></h1>

<p><font color="gray" face="Verdana" size="2">Un párrafo detexto no muy l argo.</font></p>


https://utu.pias.uy


</body>

</html>

El ejemplo anterior utiliza la etiqueta <font> con sus atributos color , face ysize para definir el color, la tipografía y el tamaño del texto de cada elementodel documento.

El principal problema de esta forma de definir el aspecto de los elementos sepuede ver claramente con el siguiente ejemplo: si la página tuviera 50elementos diferentes, habría que insertar 50 etiquetas <font> . Si el sitio webentero se compone de 10.000 páginas diferentes, habría que definir 500.000etiquetas <font> . Como cada etiqueta <font> tiene 3 atributos, habría quedefinir 1.5 millones de atributos.

Por otra parte, el diseño de los sitios web está en constante evolución y eshabitual modificar cada cierto tiempo los colores principales de las páginas o latipografía utilizada para el texto. Si se emplea la etiqueta <font> , habría quemodificar el valor de 1.5 millones de atributos para modificar el diseño generaldel sitio web.

La solución que propone CSS es mucho mejor, como se puede ver en elsiguiente ejemplo:




<head>


<title>Ejemplo de estilos con CSS</title>

<style type="text/css">

h1 { color: red; font-family: Arial;

font-size: large; }

p { color: gray; font-family: Verdana; font-size: medium; }

</style>

</head>


https://utu.pias.uy


<body>

<h1>Titular de la página</h1>

<p>Un párrafo de texto no muy largo.</p>

</body>

</html>

CSS permite separar los contenidos de la página y su aspecto o presentación.En el ejemplo anterior, dentro de la propia página HTML se reserva una zonaen la que se incluye toda la información relacionada con los estilos de lapágina.

Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1>de la página se deben ver de color rojo, con un tipo de letra Arial y con untamaño de letra grande. Además, las etiquetas <p> de la página se deben verde color gris, con un tipo de letra Verdana y con un tamaño de letra medio.

Definiendo los estilos de esta forma, no importa el número de elementos <p>que existan en la página, ya que todos tendrán el mismo aspecto establecidomediante CSS. Como se verá a continuación, esta forma de trabajar con CSSno es ideal, ya que si el sitio web dispone de 10.000 páginas, habría quedefinir 10.000 veces el mismo estilo CSS.

Cómo incluir CSS en un documento XHTML

Una de las principales características de CSS es su flexibilidad y las diferentesopciones que ofrece para realizar una misma tarea. De hecho, existen tresopciones para incluir CSS en un documento HTML.

Incluir CSS en el mismo documento HTML

Los estilos se definen en una zona específica del propio documento HTML. Seemplea la etiqueta <style> de HTML y solamente se pueden incluir en lacabecera del documento (sólo dentro de la sección <head>).

Ejemplo:





https://utu.pias.uy


<head>


<title>Ejemplo de estilos CSS en el propio documento</title>


p { color: black; font-family: Verdana; }

</style>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Este método se emplea cuando se define un número pequeño de estilos ocuando se quieren incluir estilos específicos en una determinada página HTMLque completen los estilos que se incluyen por defecto en todas las páginas delsitio web.

El principal inconveniente es que si se quiere hacer una modificación en losestilos definidos, es necesario modificar todas las páginas que incluyen el estiloque se va a modificar.

Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS quelas páginas HTML enlazan mediante la etiqueta <link> . Un archivo de tipo CSSno es más que un archivo simple de texto cuya extensión es .css Se puedencrear todos los archivos CSS que sean necesarios y cada página HTML puedeenlazar tantos archivos CSS como necesite.

En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre aestilos.css y se incluye el siguiente contenido:

p { color: black; font-family: Verdana; }

A continuación, en la página HTML se utiliza la etiqueta <link> para enlazar elarchivo CSS externo que tiene los estilos que va a utilizar la página:


https://utu.pias.uy





<head>


<title>Ejemplo de estilos CSS en un archivo externo</title>

<link rel="stylesheet" type="text/css" href="/css/estilos.css"media="screen" />

</head>

<body>


</body>

</html>

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza unarchivo CSS:

▪ rel : indica el tipo de relación que tiene el recurso enlazado (en este caso, elarchivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza elvalor stylesheet.

▪ type : indica el tipo de recurso enlazado. Sus valores están estandarizados ypara los

archivos CSS su valor siempre es text/css.

▪ href : indica la URL del archivo CSS que contiene los estilos. La URL indicadapuede ser relativa o absoluta y puede apuntar a un recurso interno o externoal sitio web.

▪ media : indica el medio en el que se van a aplicar los estilos del archivo CSS.Más adelante se explican en detalle los medios CSS y su funcionamiento.


https://utu.pias.uy


De todas las formas de incluir CSS en las páginas HTML, esta es la másutilizada con mucha diferencia. La principal ventaja es que se puede incluir unmismo archivo CSS en multitud de páginas HTML, por lo que se garantiza laaplicación homogénea de los mismos estilos a todas las páginas que forman unsitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, yaque un solo cambio en un solo archivo CSS permite variar de formainstantánea los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivosCSS externos, también se puede utilizar la etiqueta <style> . La formaalternativa de incluir un archivo CSS externo se muestra a continuación:




<head>


<title>Ejemplo de estilos CSS en un archivo externo</title>

<style type="text/css" media="screen">

@import '/css/estilos.css';

</style>

</head>

<body>


</body>

</html>

En este caso, para incluir en la página HTML los estilos definidos en archivosCSS externos se utiliza una regla especial de tipo @import . Las reglas de tipo


https://utu.pias.uy


@import siempre preceden a cualquier otra regla CSS (con la única excepciónde la regla @charset ).

La URL del archivo CSS externo se indica mediante una cadena de textoencerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las siguientes reglas @import son equivalentes:

@import '/css/estilos.css';

@import "/css/estilos.css";

@import url('/css/estilos.css');

@import url("/css/estilos.css");

Incluir CSS en los elementos HTML

El último método para incluir estilos CSS en documentos HTML es el peor y elmenos utilizado, ya que tiene los mismos problemas que la utilización de lasetiquetas <font> .

Ejemplo:




<head>


<title>Ejemplo de estilos CSS en el propio documento</title>

</head>

<body>

<p style="color: black; font-family: Verdana;">Un párrafo detexto.</p>

</body>

</html>


https://utu.pias.uy


Esta forma de incluir CSS directamente en los elementos HTML solamente seutiliza en determinadas situaciones en las que se debe incluir un estilo muyespecífico para un solo elemento concreto.

Glosario básico

CSS define una serie de términos que permiten describir cada una de laspartes que componen los estilos CSS. El siguiente esquema muestra las partesque forman un estilo CSS muy básico:

Componentes de un estilo CSS básico

Los diferentes términos se definen a continuación:

▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cadaregla está compuesta de una parte de "selectores", un símbolo de "llave deapertura" ( { ), otra parte denominada "declaraciones" y por último, unsímbolo de "llave de cierre" ( } ).

▪ Selector: indica el elemento o elementos HTML a los que se aplica la reglaCSS.

▪ Declaración: especifica los estilos que se aplican a los elementos. Estácompuesta por una o más propiedades CSS.

▪ Propiedad: permite modificar el aspecto de una característica del elemento.

▪ Valor: indica el nuevo valor de la característica modificada en el elemento.Un archivo CSS puede contener infinitas reglas CSS, cada regla puedecontener infinitos selectores y cada declaración puede estar formada por unnúmero infinito de pares propiedad/valor.

Medios CSS

Una de las características más importantes de las hojas de estilos CSS es quepermiten definir diferentes estilos para diferentes medios o dispositivos:pantallas, impresoras, móviles, proyectores, etc.

Además, CSS define algunas propiedades específicamente para determinadosmedios, como por ejemplo la paginación y los saltos de página para los mediosimpresos o el volumen y tipo de voz para los medios de audio. La siguientetabla muestra el nombre que CSS utiliza para identificar cada medio y sudescripción:

Medio Descripción

all Todos los medios definidos


https://utu.pias.uy


braille Dispositivos táctiles que emplean el sistema braille

embosed Impresoras braille

handheld Dispositivos de mano: móviles, PDA, etc.

print Impresoras y navegadores en el modo "Vista Previa para Imprimir"

projection Proyectores y dispositivos para presentaciones

screen Pantallas de ordenador

speech Sintetizadores para navegadores de voz utilizados por personasdiscapacitadas

tty Dispositivos textuales limitados como teletipos y terminales de texto

tv Televisores y dispositivos con resolución baja

Los medios más utilizados actualmente son screen (para definir el aspecto dela página en pantalla) y print (para definir el aspecto de la página cuando seimprime), seguidos de handheld (que define el aspecto de la página cuandose visualiza mediante un dispositivo móvil).

Además, CSS clasifica a los medios en diferentes grupos según suscaracterísticas. La siguiente tabla resume todos los grupos definidos en elestándar:

Medio Continuo /

Paginado Visual / Auditivo / Táctil /

Vocal Mapa de bits /

Caracteres Interactivo /

Estático

braille continuo táctil caracteres ambos

embossed paginado táctil caracteres estático

handheld ambos visual, auditivo, vocal ambos ambos

print paginado visual mapa de bits estático

projection paginado visual mapa de bits interactivo

screen continuo visual, auditivo mapa de bits ambos

speech continuo vocal (no tiene sentido) ambos

tty continuo visual caracteres ambos


https://utu.pias.uy


tv ambos visual, auditivo mapa de bits ambos

La gran ventaja de CSS es que permite modificar los estilos de una página enfunción del medio en el que se visualiza. Existen cuatro formas diferentes deindicar el medio en el que se deben aplicar los estilos CSS.

Medios definidos con las reglas de tipo @media

Las reglas @media son un tipo especial de regla CSS que permiten indicar deforma directa el medio o medios en los que se aplicarán los estilos incluidos enla regla. Para especificar el medio en el que se aplican los estilos, se incluye sunombre después de @media . Si los estilos se aplican a varios medios, seincluyen los nombres de todos los medios separados por comas.

A continuación se muestra un ejemplo sencillo:

@media

body

}

@media

body

}

@media

body

}

print {

{ font-size: 10pt }

screen {

{ font-size: 13px }

screen, print {

{ line-height: 1.2 }

El ejemplo anterior establece que el tamaño de letra de la página cuando sevisualiza en una pantalla debe ser 13 píxel. Sin embargo, cuando se imprimenlos contenidos de la página, su tamaño de letra debe ser de 10 puntos. Por


https://utu.pias.uy


último, tanto cuando la página se visualiza en una pantalla como cuando seimprimen sus contenidos, el interlineado del texto debe ser de 1.2 veces eltamaño de letra del texto.

Medios definidos con las reglas de tipo @import

Cuando se utilizan reglas de tipo @import para enlazar archivos CSS externos,se puede especificar el medio en el que se aplican los estilos indicando elnombre del medio después de la URL del archivo CSS:

@import url("estilos_basicos.css") screen;

@import url("estilos_impresora.css") print;

Las reglas del ejemplo anterior establecen que cuando la página se visualizapor pantalla, se cargan los estilos definidos en el primer archivo CSS. Por otraparte, cuando la página se imprime, se tienen en cuenta los estilos que defineel segundo archivo CSS.

Si los estilos del archivo CSS externo deben aplicarse en varios medios, seindican los nombres de todos los medios separados por comas. Si no se indicael medio en una regla de tipo @import, el navegador sobreentiende que elmedio es all , es decir, que los estilos se aplican en todos los medios.

Medios definidos con la etiqueta <link>

Si se utiliza la etiqueta <link> para enlazar los archivos CSS externos, sepuede utilizar el atributo media para indicar el medio o medios en los que seaplican los estilos de cada archivo:

<link rel="stylesheet" type="text/css" media="screen"href="basico.css" />

<link rel="stylesheet" type="text/css" media="print, handheld"href="especial.css" />

En este ejemplo, el primer archivo CSS se tiene en cuenta cuando la página sevisualiza en la pantalla ( media="screen" ). Los estilos indicados en el segundoarchivo CSS, se aplican al imprimir la página ( media="print" ) o al visualizarlaen un dispositivo móvil ( media="handheld" ), como por ejemplo en un iPhone.

Medios definidos mezclando varios métodos

CSS también permite mezclar los tres métodos anteriores para indicar losmedios en los que se aplica cada archivo CSS externo:


https://utu.pias.uy

Sintaxis de la definición de cada propiedad CSS

A lo largo de los próximos capítulos, se incluyen las definiciones formales de lamayoría de propiedades de CSS. La definición formal se basa en la informaciónrecogida en el estándar oficial y se muestra en forma de tabla.

Una de las principales informaciones de cada definición es la lista de posiblesvalores que admite la propiedad. Para definir la lista de valores permitidos sesigue un formato que es necesario detallar.

Si el valor permitido se indica como una sucesión de palabras sin ningúncarácter que las separe (paréntesis, comas, barras, etc.) el valor de lapropiedad se debe indicar tal y como se muestra y con esas palabras en elmismo orden.

Si el valor permitido se indica como una sucesión de valores separados por unabarra simple (carácter | ) el valor de la propiedad debe tomar uno y sólo unode los valores indicados. Por ejemplo, la notación <porcentaje> | <medida> |inherit indica que la propiedad solamente puede tomar como valor la palabrareservada inherit o un porcentaje o una medida.

Si el valor permitido se indica como una sucesión de valores separados por unabarra doble (símbolo || ) el valor de la propiedad puede tomar uno o másvalores de los indicados y en cualquier orden.

Por ejemplo, la notación <color> || <estilo> || <medida> indica que lapropiedad puede tomar como valor cualquier combinación de los valoresindicados y en cualquier orden. Se podría establecer un color y un estilo,solamente una medida o una medida y un estilo. Además, el orden en el quese indican los valores es indiferente. Opcionalmente, se pueden utilizarparéntesis para agrupar diferentes valores.

Por último, en cada valor o agrupación de valores se puede indicar el tipo devalor: opcional, obligatorio, múltiple o restringido.

El carácter * indica que el valor ocurre cero o más veces; el carácter + indicaque el valor ocurre una o más veces; el carácter ? indica que el valor esopcional y por último, el carácter {número_1, número_2} indica que el valorocurre al menos tantas veces como el valor indicado en número_1 y comomáximo tantas veces como el valor indicado en número_2.


https://utu.pias.uy


Por ejemplo, el valor [<family-name> , ]* indica que el valor de tipo<family_name> seguido por una coma se puede incluir cero o más veces. Elvalor <url>? <color> significa que la URL es opcional y el color obligatorio y enel orden indicado. Por último, el valor [<medida> | thick | thin] {1,4} indicaque se pueden escribir entre 1 y 4 veces un valor que sea o una medida o lapalabra thick o la palabra thin.

No obstante, la mejor forma de entender la notación formal para laspropiedades de CSS es observar la definición de cada propiedad y volver a estasección siempre que sea necesario.

Selectores

Para crear diseños web profesionales, es imprescindible conocer y dominar losselectores de CSS. Como se vio en el capítulo anterior, una regla de CSS estáformada por una parte llamada "selector" y otra parte llamada "declaración".

La declaración indica "qué hay que hacer" y el selector indica "a quién hay quehacérselo". Por lo tanto, los selectores son imprescindibles para aplicar deforma correcta los estilos CSS en una página.

A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cadaregla CSS puede aplicarse a un número infinito de elementos. En otraspalabras, una misma regla puede aplicarse sobre varios selectores y un mismoselector se puede utilizar en varias reglas.

El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores,que permiten seleccionar de forma muy precisa elementos individuales oconjuntos de elementos dentro de una página web.

No obstante, la mayoría de páginas de los sitios web se pueden diseñarutilizando solamente los cinco selectores básicos.

Selectores básicos

Selector universal

Se utiliza para seleccionar todos los elementos de la página. El siguienteejemplo elimina el

margen y el relleno de todos los elementos HTML (por ahora no es importantefijarse en la parte

de la declaración de la regla CSS):


https://utu.pias.uy


* {

margin: 0;

padding: 0;

}

El selector universal se indica mediante un asterisco ( * ). A pesar de susencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo sepueda aplicar a todos los elementos de una página.

No obstante, sí que se suele combinar con otros selectores y además, formaparte de algunos hacks muy utilizados (como se verá más adelante).

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide conel valor del selector. El siguiente ejemplo selecciona todos los párrafos de lapágina:

p {

...

}

Para utilizar este selector, solamente es necesario indicar el nombre de unaetiqueta HTML (sin los caracteres < y > ) correspondiente a los elementos quese quieren seleccionar.

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos deuna página HTML:

h1 {

color: red;

}

h2 {

color: blue;

}

p {


https://utu.pias.uy


color: black;

}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se puedenencadenar los selectores. En el siguiente ejemplo, los títulos de sección h1 , h2y h3 comparten los mismos estilos:

h1 {

color: #8A8E27;

font-weight: normal;

font-family: Arial, Helvetica, sans-serif;

}

h2 {

color: #8A8E27;



}

h3 {

color: #8A8E27;



}

En este caso, CSS permite agrupar todas las reglas individuales en una solaregla con un selector múltiple. Para ello, se incluyen todos los selectoresseparados por una coma ( , ) y el resultado es que la siguiente regla CSS esequivalente a las tres reglas anteriores:

h1, h2, h3 {

color: #8A8E27;




https://utu.pias.uy


}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunesde varios elementos en una única regla CSS y posteriormente definir laspropiedades específicas de esos mismos elementos. El siguiente ejemploestablece en primer lugar las propiedades comunes de los títulos de sección(color y tipo de letra) y a continuación, establece el tamaño de letra de cadauno de ellos:

h1, h2, h3 {

color: #8A8E27;



}

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.2em; }

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Unelemento es descendiente de otro cuando se encuentra entre las etiquetas deapertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de lapágina que se encuentren dentro de un elemento <p> :

p span { color: red; }

Si el código HTML de la página es el siguiente:

<p>

...

<span>texto1</span>

...

<a href="">...<span>texto2</span></a>

...


https://utu.pias.uy


</p>

El selector p span selecciona tanto texto1 como texto2 . El motivo es que en elselector descendente, un elemento no tiene que ser "hijo directo" de otro. Laúnica condición es que un elemento debe estar dentro de otro elemento, sinimportar lo profundo que se encuentre.

Al resto de elementos <span> de la página que no están dentro de unelemento <p> , no se les aplica la regla CSS anterior.

Los selectores descendentes permiten mejorar la precisión del selector de tipoo etiqueta. Así, utilizando el selector descendente es posible aplicar diferentesestilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anteriory muestra de color azul todo el texto de los <span> contenidos dentro de un<h1> :

p span { color: red; }

h1 span { color: blue; }

Con las reglas CSS anteriores:

▪ Los elementos <span> que se encuentran dentro de un elemento <p> semuestran de color rojo.

▪ Los elementos <span> que se encuentran dentro de un elemento <h1> semuestran de color azul.

▪ El resto de elementos <span> de la página, se muestran con el color pordefecto aplicado por el navegador.

La sintaxis formal del selector descendente se muestra a continuación:

elemento1 elemento2 elemento3 ... elementoN

Los selectores descendentes siempre están formados por dos o más partesseparadas entre sí por espacios en blanco. La última parte indica el elementosobre el que se aplican los estilos y todas las partes anteriores indican el lugaren el que se tiene que encontrar ese elemento para que los estilos se apliquenrealmente.

En el siguiente ejemplo, el selector descendente se compone de cuatro partes:

p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que seencuentren dentro de elementos de tipo <span> , que a su vez se encuentren


https://utu.pias.uy


dentro de elementos de tipo <a> que se encuentren dentro de elementos detipo <p> .

No debe confundirse el selector descendente con la combinación de selectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */

p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "pa span" */

p a span em { text-decoration: underline; }

Si se emplea el selector descendente combinado con el selector universal, sepuede restringir el alcance de un selector descendente. El siguiente ejemplo,muestra los dos enlaces de color rojo:

p a { color: red; }

<p><a href="#">Enlace</a></p>

<p><span><a href="#">Enlace</a></span></p>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestrade color rojo:

p * a { color: red; }

<p><a href="#">Enlace</a></p>

<p><span><a href="#">Enlace</a></span></p>

La razón es que el selector p * a se traduce como todos los elementos de tipo<a> que se encuentren dentro de cualquier elemento que, a su vez, seencuentre dentro de un elemento de tipo <p> . Como el primer elemento <a>se encuentra directamente bajo un elemento <p> , no se cumple la condicióndel selector p * a .

Selector de clase

Si se considera el siguiente código HTML de ejemplo:

<body>

<p>Lorem ipsum dolor sit amet...</p>

<p>Nunc sed lacus et est adipiscing accumsan...</p>

<p>Class aptent taciti sociosqu ad litora...</p>


https://utu.pias.uy


</body>

¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selectoruniversal ( * ) no se puede utilizar porque selecciona todos los elementos de lapágina. El selector de tipo o etiqueta ( p ) tampoco se puede utilizar porqueseleccionaría todos los párrafos. Por último, el selector descendente ( body p )tampoco se puede utilizar porque todos los párrafos se encuentran en elmismo sitio.

Una de las soluciones más sencillas para aplicar estilos a un solo elemento dela página consiste en utilizar el atributo class de HTML sobre ese elemento paraindicar directamente la regla CSS que se le debe aplicar:

<body>

<p class="destacado">Lorem ipsum dolor sit amet...</p>

<p>Nunc sed lacus et est adipiscing accumsan...</p>

<p>Class aptent taciti sociosqu ad litora...</p>

</body>

A continuación, se crea en el archivo CSS una nueva regla llamada destacadocon todos los estilos que se van a aplicar al elemento. Para que el navegadorno confunda este selector con los otros tipos de selectores, se prefija el valordel atributo class con un punto ( . ) tal y como muestra el siguiente ejemplo:

.destacado { color: red; }

El selector .destacado se interpreta como "cualquier elemento de la páginacuyo atributo class sea igual a destacado ", por lo que solamente el primerpárrafo cumple esa condición.

Este tipo de selectores se llaman selectores de clase y son los más utilizadosjunto con los selectores de ID que se verán a continuación. La principalcaracterística de este selector es que en una misma página HTML varioselementos diferentes pueden incluir el mismo valor en el atributo class :

<body>


<p>Nunc sed lacus et <a href="#" class="destacado">estadipiscing</a> accumsan...</p>

<p>Class aptent taciti <em class="destacado">sociosqu ad</em>litora...</p>


https://utu.pias.uy


</body>

Los selectores de clase son imprescindibles para diseñar páginas webcomplejas, ya que permiten disponer de una precisión total al seleccionar loselementos. Además, estos selectores permiten reutilizar los mismos estilospara varios elementos diferentes.

A continuación se muestra otro ejemplo de selectores de clase:

.aviso {

padding: 0.5em;

border: 1px solid #98be10;

background: #f6feda;

}

.error {

color: #930;

font-weight: bold;

}

<span class="error">...</span>

<div class="aviso">...</div>

El elemento <span> tiene un atributo class="error" , por lo que se le aplicanlas reglas CSS indicadas por el selector .error . Por su parte, el elemento<div> tiene un atributo class="aviso" , por lo que su estilo es el que definenlas reglas CSS del selector .aviso .

En ocasiones, es necesario restringir el alcance del selector de clase. Si seconsidera de nuevo el ejemplo anterior:

<body>


<p>Nunc sed lacus et <a href="#" class="destacado">estadipiscing</a> accumsan...</p>

<p>Class aptent taciti <em class="destacado">sociosqu ad</em>litora...</p>

</body>


https://utu.pias.uy


¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class seaigual a destacado ?

Combinando el selector de tipo y el selector de clase, se obtiene un selectormucho más específico:

p.destacado { color: red }

El selector p.destacado se interpreta como "aquellos elementos de tipo <p>que dispongan de un atributo class con valor destacado ". De la misma forma,el selector a.destacado solamente selecciona los enlaces cuyo atributo classsea igual a destacado .

De lo anterior se deduce que el atributo .destacado es equivalente a*.destacado , por lo que todos los diseñadores obvian el símbolo * al escribirun selector de clase normal.

No debe confundirse el selector de clase con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo class="aviso" */

p.aviso { ... }

/* Todos los elementos con atributo class="aviso" que estén dentro

de cualquier elemento de tipo "p" */

p .aviso { ... }

/* Todos los elementos "p" de la página y todos los elementos con

atributo class="aviso" de la página */

p, .aviso { ... }

Por último, es posible aplicar los estilos de varias clases CSS sobre un mismoelemento. La sintaxis es similar, pero los diferentes valores del atributo classse separan con espacios en blanco. En el siguiente ejemplo:

<p class="especial destacado error">Párrafo de texto...</p>

Al párrafo anterior se le aplican los estilos definidos en las reglas .especial ,.destacado y .error , por lo que en el siguiente ejemplo, el texto del párrafo severía de color rojo, en negrita y con un tamaño de letra de 15 píxel:

.error { color: red; }

.destacado { font-size: 15px; }

{ font-weight: bold; }


https://utu.pias.uy



Si un elemento dispone de un atributo class con más de un valor, es posibleutilizar un selector más avanzado:

.error { color: red; }

.error.destacado { color: blue; }

.destacado { font-size: 15px; }

.especial { font-weight: bold; }


En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivoes que se ha utilizado un selector de clase múltiple .error.destacado , que seinterpreta como "aquellos elementos de la página que dispongan de unatributo class con al menos los valores error y destacado ".

Selectores de ID

En ocasiones, es necesario aplicar estilos CSS a un único elemento de lapágina. Aunque puede utilizarse un selector de clase para aplicar estilos a unúnico elemento, existe otro selector más eficiente en este caso.

El selector de ID permite seleccionar un elemento de la página a través delvalor de su atributo id . Este tipo de selectores sólo seleccionan un elementode la página porque el valor del atributo id no se puede repetir en doselementos diferentes de una misma página.

La sintaxis de los selectores de ID es muy parecida a la de los selectores declase, salvo que se utiliza el símbolo de la almohadilla ( # ) en vez del punto (. ) como prefijo del nombre de la regla CSS:

#destacado { color: red; }

<p>Primer párrafo</p>

<p id="destacado">Segundo párrafo</p>

<p>Tercer párrafo</p>

En el ejemplo anterior, el selector #destacado solamente selecciona el segundopárrafo (cuyo atributo id es igual a destacado ).

La principal diferencia entre este tipo de selector y el selector de clase tieneque ver con HTML y no con CSS. Como se sabe, en una misma página, el valor


https://utu.pias.uy


del atributo id debe ser único, de forma que dos elementos diferentes nopueden tener el mismo valor de id . Sin embargo, el atributo class no esobligatorio que sea único, de forma que muchos elementos HTML diferentespueden compartir el mismo valor para su atributo class .

De esta forma, la recomendación general es la de utilizar el selector de IDcuando se quiere aplicar un estilo a un solo elemento específico de la página yutilizar el selector de clase cuando se quiere aplicar un estilo a varioselementos diferentes de la página HTML.

Al igual que los selectores de clase, en este caso también se puede restringir elalcance del selector mediante la combinación con otros selectores. El siguienteejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga unatributo id igual al indicado:

p#aviso { color: blue; }

A primera vista, restringir el alcance de un selector de ID puede parecerabsurdo. En realidad, un selector de tipo p#aviso sólo tiene sentido cuando elarchivo CSS se aplica sobre muchas páginas HTML diferentes.

En este caso, algunas páginas pueden disponer de elementos con un atributoid igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplicasobre esos elementos.

No debe confundirse el selector de ID con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo id="aviso" */

p#aviso { ... }

/* Todos los elementos con atributo id="aviso" que estén dentro

de cualquier elemento de tipo "p" */

p #aviso { ... }

/* Todos los elementos "p" de la página y todos los elementos con

atributo id="aviso" de la página */

p, #aviso { ... }

Combinación de selectores básicos

CSS permite la combinación de uno o más tipos de selectores para restringir elalcance de las reglas CSS. A continuación se muestran algunos ejemploshabituales de combinación de selectores.


https://utu.pias.uy


.aviso .especial { ... }

El anterior selector solamente selecciona aquellos elementos con unclass="especial" que se encuentren dentro de cualquier elemento con unclass="aviso" . Si se modifica el anterior selector:

div.aviso span.especial { ... }

Ahora, el selector solamente selecciona aquellos elementos de tipo <span>con un atributo class="especial" que estén dentro de cualquier elemento detipo <div> que tenga un atributo class="aviso" .

La combinación de selectores puede llegar a ser todo lo compleja que seanecesario:

ul#menuPrincipal li.destacado a#inicio { ... }

El anterior selector hace referencia al enlace con un atributo id igual a inicioque se encuentra dentro de un elemento de tipo <li> con un atributo classigual a destacado , que forma parte de una lista <ul> con un atributo id igual amenuPrincipal .

Selectores avanzados

Utilizando solamente los selectores básicos de la sección anterior, es posiblediseñar prácticamente cualquier página web. No obstante, CSS define otrosselectores más avanzados que permiten simplificar las hojas de estilos.

Desafortunadamente, el navegador Internet Explorer 6 y sus versionesanteriores no soportaban este tipo de selectores avanzados, por lo que su usono era común hasta hace poco tiempo. Si quieres consultar el soporte de losselectores en los distintos navegadores, puedes utilizar las siguientesreferencias:

▪ Lista completa de los selectores que soporta cada versión de cada navegador

(http://dev.l-c-n.com/CSS3-selectors/browser-support.php)

▪ Test online en el que puedes comprobar los selectores que soporta elnavegador con el que

realizas el test (http://www.css3.info/selectors-test/)

Selector de hijos

Se trata de un selector similar al selector descendente, pero muy diferente ensu funcionamiento.


https://utu.pias.uy


Se utiliza para seleccionar un elemento que es hijo directo de otro elemento yse indica mediante el "signo de mayor que" ( > ):

p > span { color: blue; }

<p><span>Texto1</span></p>

<p><a href="#"><span>Texto2</span></a></p>

En el ejemplo anterior, el selector p > span se interpreta como "cualquierelemento <span> que

sea hijo directo de un elemento <p> ", por lo que el primer elemento <span>cumple la condición

del selector. Sin embargo, el segundo elemento <span> no la cumple porquees descendiente

pero no es hijo directo de un elemento <p> .

El siguiente ejemplo muestra las diferencias entre el selector descendente y elselector de hijos:

p a { color: red; }

p > a { color: red; }

<p><a href="#">Enlace1</a></p>

<p><span><a href="#">Enlace2</a></span></p>

El primer selector es de tipo descendente y por tanto se aplica a todos loselementos <a> que se

encuentran dentro de elementos <p> . En este caso, los estilos de esteselector se aplican a los dos

enlaces.

Por otra parte, el selector de hijos obliga a que el elemento <a> sea hijodirecto de un elemento

<p> . Por lo tanto, los estilos del selector p > a no se aplican al segundoenlace del ejemplo

anterior.

Selector adyacente

El selector adyacente utiliza el signo + y su sintaxis es:

elemento1 + elemento2 { ... }


https://utu.pias.uy


La explicación del comportamiento de este selector no es sencilla, ya queselecciona todos los

elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

▪ elemento1 y elemento2 deben ser hermanos, por lo que su elemento padredebe ser el

mismo.

▪ elemento2 debe aparecer inmediatamente después de elemento1 en el códigoHTML de la

página.

En el siguiente ejemplo:

h1 + h2 { color: red }

<body>

<h1>Titulo1</h1>

<h2>Subtítulo</h2>

...

<h2>Otro subtítulo</h2>

...

</body>

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de lapágina, pero no al

segundo <h2> , ya que:

▪ El elemento padre de <h1> es <body> , el mismo padre que el de los doselementos <h2> .

Así, los dos elementos <h2> cumplen la primera condición del selectoradyacente.

▪ El primer elemento <h2> aparece en el código HTML justo después delelemento <h1> , por

lo que este elemento <h2> también cumple la segunda condición del selectoradyacente.

▪ Por el contrario, el segundo elemento <h2> no aparece justo después delelemento <h1> ,


https://utu.pias.uy


por lo que no cumple la segunda condición del selector adyacente y por tantono se le

aplican los estilos de h1 + h2 .

El siguiente ejemplo es muy útil para los textos que se muestran como libros:

p + p { text-indent: 1.5em; }

En muchos libros, suele ser habitual que la primera línea de todos los párrafosesté indentada,

salvo la primera línea del primer párrafo. Con el selector p + p , se seleccionantodos los párrafos

que estén dentro del mismo elemento padre que otros párrafos y que vayanjusto después de

otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafosde un elemento

salvo el primer párrafo.

Selector de atributos

El último tipo de selectores avanzados lo forman los selectores de atributos,que permiten

seleccionar elementos HTML en función de sus atributos y/o valores de esosatributos.

Los cuatro tipos de selectores de atributos son:

▪ [nombre_atributo] , selecciona los elementos que tienen establecido elatributo llamado

nombre_atributo , independientemente de su valor.

▪ [nombre_atributo=valor] , selecciona los elementos que tienen establecidoun atributo

llamado nombre_atributo con un valor igual a valor .

▪ [nombre_atributo~=valor] , selecciona los elementos que tienen establecidoun atributo

llamado nombre_atributo y al menos uno de los valores del atributo es valor .

▪ [nombre_atributo|=valor] , selecciona los elementos que tienen establecidoun atributo


https://utu.pias.uy


llamado nombre_atributo y cuyo valor es una serie de palabras separadas conguiones,

pero que comienza con valor . Este tipo de selector sólo es útil para losatributos de tipo

lang que indican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class", independientemente de su valor */

a[class] { color: blue; }


un atributo "class" con el valor "externo" */

a[class="externo"] { color: blue; }

/* Se muestran de color azul todos los enlaces que apunten

al sitio "http://www.ejemplo.com" */

a[href="http://www.ejemplo.com"] { color: blue; }


un atributo "class" en el que al menos uno de sus valores

sea "externo" */

a[class~="externo"] { color: blue; }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" sea igual a "en", es decir, todos los elementos en inglés */

*[lang=en] { ... }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */

*[lang|="es"] { color : red }

Agrupación de reglas

Cuando se crean archivos CSS complejos con decenas o cientos de reglas, eshabitual que los

estilos que se aplican a un mismo selector se definan en diferentes reglas:


https://utu.pias.uy


h1 { color: red; }

...

h1 { font-size: 2em; }

...

h1 { font-family: Verdana; }

Las tres reglas anteriores establecen el valor de tres propiedades diferentes delos elementos

<h1> . Antes de que el navegador muestre la página, procesa todas las reglasCSS de la página

para tener en cuenta todos los estilos definidos para cada elemento.

Cuando el selector de dos o más reglas CSS es idéntico, se pueden agrupar lasdeclaraciones de

las reglas para hacer las hojas de estilos más eficientes:

h1 {

color: red;

font-size: 2em;

font-family: Verdana;

}

El ejemplo anterior tiene el mismo efecto que las tres reglas anteriores, peroes más eficiente y

es más fácil de modificar y mantener por parte de los diseñadores. Como CSSignora los espacios

en blanco y las nuevas líneas, también se pueden agrupar las reglas de lasiguiente forma:

h1 { color: red; font-size: 2em; font-family: Verdana; }

Si se quiere reducir al máximo el tamaño del archivo CSS para mejorarligeramente el tiempo de

carga de la página web, también es posible indicar la regla anterior de lasiguiente forma:

h1 {color:red;font-size:2em;font-family:Verdana;}

2.4. Herencia


https://utu.pias.uy


Uno de los conceptos más característicos de CSS es la herencia de los estilosdefinidos para los

elementos. Cuando se establece el valor de alguna propiedad en un elemento,todos sus

descendientes heredan inicialmente ese mismo valor.

Si se indica por ejemplo un tipo de letra al elemento <body> de una página,todos los elementos

de la página mostrarán ese tipo de letra, salvo que se indique lo contrario:




<head>

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

<title>Ejemplo de herencia de estilos</title>


body { font-family: Arial; color: black; }

h1 { font-family: Verdana; }

p { color: red; }

</style>

</head>

<body>

<h1>Titular de la página</h1>

<p>Un párrafo de texto no muy largo.</p>

</body>

</html>

En el ejemplo anterior, se ha indicado que la etiqueta <body> tiene asignadoun tipo de letra

Arial y un color de letra negro. Así, todos los elementos de la página (salvo quese indique lo


https://utu.pias.uy


contrario) se muestran de color negro y con la fuente Arial .

La segunda regla indica que los elementos <h1> se muestran con otratipografía diferente a la

heredada. La tercera regla indica que los elementos <p> varían su colorrespecto del color que

han heredado.

La herencia de estilos no funciona en todas las propiedades CSS, por lo que sedebe estudiar cada

propiedad de forma individual.

2.5. Colisiones de estilos

En las hojas de estilos complejas, es habitual que varias reglas CSS seapliquen a un mismo

elemento HTML. El problema de estas reglas múltiples es que se pueden darcolisiones como la

del siguiente ejemplo:

p { color: red; }

p { color: blue; }

<p>...</p>

¿De qué color se muestra el párrafo anterior? CSS tiene un mecanismo deresolución de

colisiones muy complejo y que tiene en cuenta el tipo de hoja de estilo que setrate (de

navegador, de usuario o de diseñador), la importancia de cada regla y loespecífico que sea el

selector.

Aunque los tipos de hojas de estilos y su importancia se verán más adelante,se describe a

continuación el método genérico seguido por CSS para resolver las colisiones:

1. Determinar todas las declaraciones que se aplican al elemento para el medioCSS

seleccionado.


https://utu.pias.uy


2. Ordenar las declaraciones según su origen (CSS de navegador, de usuario ode

diseñador) y su importancia (palabra clave !important ).

3. Ordenar las declaraciones según lo específico que sea el selector. Cuantomás genérico

es un selector, menos importancia tienen sus declaraciones.

4. Si después de aplicar las normas anteriores existen dos o más reglas con lamisma

prioridad, se aplica la que se indicó en último lugar.

Cuando se estudie cada uno de los conceptos del método anterior, secomprenderá

completamente su funcionamiento. De momento, la norma que se puedeseguir es la de la

"especificidad" del selector:

1. Cuanto más específico sea un selector, más importancia tiene su reglaasociada.

2. A igual especificidad, se considera la última regla indicada.

Como en el ejemplo anterior los dos selectores son idénticos, las dos reglastienen la misma

prioridad y prevalece la que se indicó en último lugar, por lo que el párrafo semuestra de color

azul.

En el siguiente ejemplo, la regla CSS que prevalece se decide por lo específicoque es cada

selector:

p { color: red; }

p#especial { color: green; }

* { color: blue; }

<p id="especial">...</p>

Al elemento <p> se le aplican las tres declaraciones. Como su origen y suimportancia es la


https://utu.pias.uy


misma, decide la especificidad del selector. El selector * es el menosespecífico, ya que se refiere

a "todos los elementos de la página". El selector p es poco específico porque serefiere a "todos los

párrafos de la página". Por último, el selector p#especial sólo hace referencia a"el párrafo de la

página cuyo atributo id sea igual a especial". Como el selector p#especial es elmás específico, su

declaración es la que se tiene en cuenta y por tanto el párrafo se muestra decolor verde.

Ejercicio 2 Ver enunciado en la página 190


https://utu.pias.uy

TEÓRICO 1 - HTML - CSS

Documents

Transcript of TEÓRICO 1 - HTML - CSS