LENGUAJE DE PRESENTACION
terryamerican9 de Marzo de 2013
3.555 Palabras (15 Páginas)6.252 Visitas
3.1 Introducción Lenguaje de presentación
Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un número de reglas sintácticas para poder crear documentos. Uno de los lenguajes más comunes para presentar información web es HTML.
El lenguaje de presentación es aquel que indica el formato del texto. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura, pero resulta insuficiente para el procesamiento automático de la información.
El marcado de presentación resulta más fácil de elaborar, sobre todo para cantidades pequeñas de información. Sin embargo resulta complicado de mantener o modificar, por lo que su uso se ha ido reduciendo en proyectos grandes en favor de otros tipos de marcado más estructurados.
Se puede tratar de averiguar la estructura de un documento de esta clase buscando pistas en el texto. Por ejemplo, el título puede ir precedido de varios saltos de línea, y estar ubicado centrado en la página. Varios programas pueden deducir la estructura del texto basándose en esta clase de datos, aunque el resultado suele ser bastante imperfecto.
3.2 Sintaxis Lenguaje de presentación
El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto y otros elementos en la página.
La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:
<b>Esto está en negrita</b>
El resultado Será:
Esto está en negrita
Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:
<p>Hola, estamos en el párrafo 1</p>
<p>Ahora hemos cambiado de párrafo</p>
El resultado sería:
Hola, estamos en el párrafo 1
Ahora hemos cambiado de párrafo
Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el título de nuestra página.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto. El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
Las mayúsculas o minúsculas son indiferentes al escribir etiquetas. A notar que las etiquetas pueden ser escritas con cualquier tipo de combinación de mayúsculas y minúsculas. <html>, <HTML> o <HtMl> son la misma etiqueta.
Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras tecnologías que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro.
3.3 Selectores Lenguaje de presentación
Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la página.
El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de las CSS.
Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son sólo los más elementales. La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus propios recursos.
En esta sección se explican los llamados selectores simples.
Selectores de tipos
Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML. Es decir, usan la misma palabra que la etiqueta (tag) sin los signos < y >. Por ejemplo, TABLE selecciona todos los elementos <TABLE> de la página. La siguiente regla identifica a los elementos <H1> de la página y los alinea centralmente:
H1 {text-align: center}
Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML, pueden consultar el Listado de elementos de HTML 4.0, que contiene una pequeña definición sobre cada marca. Teóricamente al menos, todos los elementos de ese listado pueden utilizarse como selectores en las CSS. Ver
Los selectores de tipo tienen la ventaja de que, con un simple cambio en la Hoja de Estilo, podemos modificar el aspecto de todos los elementos de ese tipo en todas las páginas de nuestro sitio. Esa es también su limitación: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia en cada una de nuestras páginas. ¿Qué sucede si en ciertos casos queremos usar un párrafo con características diferenciadas?
Selectores de clases
La cuestión planteada en el punto anterior se resuelve creando una nueva clase de párrafo. El selector de clases consta de un punto (.) seguido por el nombre de la clase que hayamos creado (el nombre lo elegimos nosotros). Supongamos que para publicar un reportaje queremos contar con un párrafo especial que denominaremos "pregunta":
P.pregunta {font-weight: bold; font-style: italic}
Ahora, a los párrafos que corresponden a las preguntas del entrevistador en el supuesto reportaje les agregamos el atributo CLASS dentro de la marca de la página HTML:
<P class="pregunta">Esta es una pregunta del reportero</P>
Todos los párrafos de la clase "pregunta" aparecerán con texto en itálicas negritas para diferenciarlos de los párrafos normales. Observen que en el tag de la página HTML la sintaxis difiere de la CSS: luego de la palabra CLASS sigue un signo igual (=) y entre comillas ("") el nombre de la clase.
Si bien estos selectores requieren un agregado en el código HTML de las páginas, nos permiten una amplia libertad para crear diversas variantes de un mismo elemento. Más aún, podemos crear una clase genérica para aplicar a cualquier elemento de la página y no sólo a los párrafos. Basta con suprimir en el estamento el primer selector y dejar únicamente el punto (.) y el nombre de la clase:
.contraste {color: #FFFF00; background-color: #000000}
En este caso, la clase "contraste" equivale a cualquier elemento con el atributo class="contraste". Por ejemplo:
<H1 class="contraste">Un título con contraste</H1>
<P class="contraste">Un párrafo con contraste</P>
<OL CLASS="contraste">Una lista con contraste</B>
Es tanta la flexibilidad que nos brindan los selectores de clases que hasta nos permitirían hacer nuestras páginas casi exclusivamente con sólo dos elementos de HTML: DIV y SPAN (que no tienen ningún formato predeterminado) y luego crear todas las clases que necesitemos. Esta práctica es desaconsejada por el W3C en una nota que aparece en la Recomendación CSS2 al final de la sección 5.8.3 Selectores de clases. Ver
Selectores de ID
Los selectores de ID funcionan de manera muy similar a los selectores de clases, salvo que, a diferencia de estos últimos, sólo pueden aplicarse a un elemento de la página. Quiere decir que si hay un elemento que tiene asignado el atributo ID="principal" no podrá haber otro ID con igual valor (es decir, con el mismo nombre). La sintaxis en la CSS también es similar, solamente que en vez de usar un punto se utiliza el carácter de numeral (#):
H1#titulo1 {text-align: center}
#volanta {font-style: italic}
En el primer caso, aquel elemento H1 con ID="titulo1" de la página será centrado. En el segundo, cualquier elemento que tenga asignado el atributo ID="volanta" irá en itálicas.
Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero son una opción para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la página.
...