2.- HTML, XML y CSS

2.1 Introducción 

Para poder publicar la información y distribuirla globalmente, se necesita un lenguaje universalmente entendible por las máquinas. Este lenguaje es en el World Wide Web HTML (HyperText Markup Language). 

HTML permite: 

Publicar documentos. 

Acceder a documentos cargándolos directamente en el navegador o, simplemente, haciendo click en un hiperenlace existente en otro documento. 

Rellenar formularios con información que es enviada al servidor para que la procese y realice cierta tarea con ella. 

Incluir objetos multimedia (vídeos, imágenes, sonidos, animaciones, etc) en los documentos. 

HTML fue desarrollado inicialmente por Tim Berners-Lee en el CERN (Centro Europeo de Investigación Nuclear). La aparición del primer navegador, Mosaic, desarrollado en el NCSA (Centro Nacional de Aplicaciones de Supercomputación en EE.UU.) contribuyó a la rápida popularización de esta nueva tecnología, y esa popularidad motivó un rápido desarrollo de la misma. Así, en noviembre de 1995 apareció el primer estándar HTML, llamado HTML 2.0, desarrollado bajo el auspicio del IETF y recogido en la RFC 1866. La siguiente versión de la especificación sería ya HTML 3.2 (las anteriores como HTML 3.0 no fueron sino meros borradores), aparecida en enero de 1997. Finalmente, en diciembre de ese mismo año apareció la última versión, llamada HTML 4, que fue revisada en abril de 1998 y ligeramente modificada en diciembre de 1999, dando lugar a la versión HTML 4.01. 

Los principales aportes de la versión 4 de la especificación fueron: 

Aparición de los mecanismos para asociar información de estilo. 

Scripts, marcos y objetos. 

Mejoras en los formularios. 

Mejoras en aspectos de internacionalización y accesibilidad. 

2.2 Estructura Global de un Documento 

Estructura global de un documento 

La estructura de un documento nos permitirá conocer el inicio y el final del mismo, sin dejar a un lado los contenidos, los tamaños de la hoja y el margen con el que contará y se divide en zonas principales que son; 

• Cabeza 

• Titulo 

• Cuerpo 

Dentro de los apartados el contenido el distinto y puede manejar un número mayor de etiquetas y clasificaciones que se complementas con lenguajes de programación como java, CSS3 y otros más. Todo lo que se encuentra dentro de este documento se puede localizar mediante exploradores de internet siempre y cuando se cumpla con los requerimientos de localización de documentos. 

Las características de los documentos se pueden modificar dependiendo del lenguaje de programación con el que se trabaje, es decir, no es la misma estructura de un documento XML, HTML, PHP, MYSQL, SAP, las diferencias se notarán en la sintaxis de cada uno y las instrucciones y manejos de códigos con los que se cuenten. 

Al hablar de un documento en general, sin intervenir en HTML o cualquier lenguaje de programación, podemos notar que la estructura es la misma, cuenta con un título o encabezado, el contenido o cuerpo y dentro del contenido se puede aplicar información adicional como imágenes, citas, tablas, etc. 

Es importante conocer los lenguajes de programación que se pueden acoplar a otros y la codificación que requiere como UTF8 o ASSCI, para saber los riesgos de incompatibilidad posibles dentro de cada elemento. 

   


Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones Los elementos básicos con los que cuenta un documento HTML, son el medio por el cual el usuario tiene interacción con la información, los elementos que son más utilizados son; 

• Vínculos 

• Imágenes 

• Objetos 

• Aplicaciones 

ESTRUCTURA DE UNA  PAGINA WEB Y SU DISTRIBUCIÓN 

2.3 Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones 

Texto 

El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana. 

La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT> 

<FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada. 

Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT FACE=”Arial”>…</FONT>. 

Se puede especificar el color de la fuente con la etiqueta <FONT COLOR=”?”>…</FONT>. Para especificar los colores, conviene saber al menos lo siguiente: 

Cada color posee su correspondiente código. 

Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones de tres colores básicos: rojo, verde y azul. 

Los valores hexadecimales de los tres colores se expresan de la siguiente manera: 

Rojo: color:#ff0000; 

Verde: color:#00ff00; 

Azul: color:#0000ff; 

Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes: 

Rojo: color:rgb(255,0,0); 

Verde: color:rgb(0,255,0); 

Azul: color:rgb(0,0,255); 

Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. También en internet existen muchas páginas con los Códigos de colores. 

Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra correspondiente (por supuesto en inglés). Por ejemplo: <FONT COLOR=”blue”>…</FONT>, <FONT COLOR=”red”>…</FONT>, etc. 

 Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE=”?”>…</FONT>. El valor del tamaño (“?”) deseado puede suministrarse de manera absoluta (un número del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3). 

Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamaño y el color de los caracteres: <FONT FACE=”Arial” COLOR=”#0000FF” SIZE=”5″>…</FONT>. 

Vínculos o Enlaces 

La sintaxis general de la etiqueta es muy simple: <A HREF=”destino”>…</A>. (Los puntos suspensivos representan el elemento enlazado.) 

Para que el destino se abra en una ventana nueva, hay que indicar el siguiente atributo: <A HREF=”destino” target=”_blank”>…</A> 

El destino de un hiperenlace puede ser de tres tipos: 

- Enlace externo: otro documento HTML situado en un ordenador remoto. 

- Enlace local: otro documento HTML situado en el mismo ordenador. 

- Ancla: otro lugar dentro del mismo documento HTML. 

Listas 

Las listas son elementos que, como los títulos, permiten presentar niveles jerarquizados de texto. 

Los documentos HTML permiten dos tipos de listas: 

- Listas no ordenadas (bullet list): su etiqueta principal es <UL>…</UL>. 

- Listas ordenadas o numeradas (numbered list): su etiqueta principal es <OL>…</OL>. 

- Listas de definiciones (definition list): su etiqueta principal es <DL>…</DL> 

Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta manera según el tipo: 

En las listas ordenadas (<OL>…</OL>) o no ordenadas (<UL>…</UL>), cada elemento de dicha lista se marca con la etiqueta <LI>…</LI> (list item). 

En las listas de definición (<DL>…</DL>), se utilizan dos: cada elemento que se define se marca con <DT>…</DT> y el texto de cada definición se marca con <DD>…</DD>. Esta etiqueta se puede repetir si se necesita introducir varios elementos de definición. 

Las listas se pueden encajar unas dentro de otras, además de con el resto de las etiquetas disponibles. 

Tablas 

Las tablas permiten ordenar y alinear los elementos de un documento de una manera precisa. 

Las tablas son mucho más frecuentes de lo que parece a primera vista, puesto que, en la mayor parte de los casos, las líneas que las definen permanecen ocultas. 

Las etiquetas fundamentales que definen una tabla son las siguientes: 

Etiquetas, Función 

<TABLE>…</TABLE>  , Principio y final de tabla 

<TR>…</TR>, Principio y final de línea 

Objetos 

Además de las imágenes, HTML permite incluir en las páginas web otros elementos mucho más complejos, como applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos. 

Imágenes 

La etiqueta básica para insertar una imagen es: <IMG SRC=”dirección de la imagen”>. De esta manera, el navegador visualizará la imagen contenida en la dirección especificada. 

Como puede verse, la imagen no forma parte de un documento HTML: éste sólo indica al navegador dónde puede descargarla. 

Esta etiqueta básica posee varios atributos, que se muestran en la siguiente tabla: 

Atributos, Función 

<IMG alt=”***”>, Texto alternativo (el que aparece cuando se posa el ratón sobre la imagen) 

<IMG width=”¿?”> <IMG height=”¿?”>, Especificación de la altura y la anchura en píxeles 

<IMG align=”top”> <IMG align=”middle”> <IMG align=”botton”> <IMG align=”left”> <IMG align=”right”>, Distintas posibilidades de alineación con respecto al texto 

<IMG border=”¿?”>, Borde de la imagen 

Aplicaciones 

Las HTML applications o aplicaciones en HTML son programas ejecutados por parte de Internet Explorer bajo un programa llamado mshta.exe que hace que un código de HTML sea ejecutado como si fuera una aplicación. 

2.4 Formularios 

Formularios 

Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas. 

El lector escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI. 

La etiqueta FORM 

Los formularios están delimitados con la etiqueta <FORM> … </FORM>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos: 

METHOD indica cómo se enviarán las respuestas “POST” es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que “GET” envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación (para aprender más sobre los métodos POST y GET, consulte el artículo sobre protocolo HTTP) 

ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo electrónico (mailto:dirección_de_correo_e@equipo)) 

Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cómo se codifican los datos del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado (application/x-www-form-urlencoded) es el único valor válido. El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede enviar. 

Esta es la sintaxis para la etiqueta FORM: 

<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ... </FORM> 

Dentro de la etiqueta FORM  

La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD.  

Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:  

La etiqueta INPUT: Todos los botones y casillas de texto  

La etiqueta TEXTAREA: una casilla de texto  

La etiqueta SELECT: una lista de opciones múltiples  

Envío de datos  

Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del formulario se envían a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del elemento formulario, un signo igual (“=”) y luego el valor asociado. Estos pares nombre/valor se separan unos de otros mediante el símbolo de unión (“&”). Por lo tanto, los datos que se envían al script se verán así:  

campo1=valor1&field2;=valor2&field3;=valor3  

Con el método GET (enviar los datos mediante una dirección URL), la URL será una cadena como la siguiente:  

http://pagina.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2  

La etiqueta INPUT  

La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos “interactivos”. La sintaxis de esta etiqueta es la siguiente:  

<INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">  

REPORT THIS AD 

El atributo name es esencial, ya que permite al script CGI reconocer qué campo está asociado con un par nombre/valor, lo que significa que el nombre del campo estará seguido de un signo igual (“=”) seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningún valor, por el valor predeterminado de la etiqueta value.  

El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta INPUT. Estos son los valores posibles:  

checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se envía al CGI.  

hidden: Este campo, que el navegador no muestra, es para definir una configuración única que se enviará al CGI como par nombre/valor.  

file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviará con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta FORM.  

image: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo SRC.  

password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.  

radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botón radio seleccionado se enviará al CGI. Al aplicar el atributo checked para uno de estos botones se definirá como seleccionado de forma predeterminada.  

reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.  

submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value.  

text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.  

La etiqueta TEXTAREA  

La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:  

cols: representa el número de caracteres que puede contener un línea  

rows: representa el número de líneas  

name: representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor.  

readonly: impide que el usuario modifique el texto predeterminado en el campo  

value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto  

La etiqueta SELECT  

La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:  

name: name: representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.  

disabled: crea un lista desactivada, que aparece atenuada  

size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista).  

multiple: Permite al usuario seleccionar varios campos de la lista  

Atributos de etiquetas FORM y tipos de entrada  

2.5 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.

2.6 Selectores   La especificación CSS aporta varios tipos de selectores:  Selector universal  Selector de tipo o etiqueta  Selector descendente  Selector de clase  Selector de ID  Selector de hijos  Selector de atributos  Pseudo elementos  Selector universal   Es muy útil para inicializar las propiedades de todas las marcas HTML. Utilizamos el carácter asterisco para hacer referencia a este selector. * { color:#00; font-family:'Cuprum',arial,serif; font-size: 18px; margin:0px; padding:0px; }   
Selector de tipo o etiqueta.  
Se usa para aplicar estilos en las etiquetas HTML. Es muy útil para establecer un patrón común de comportamiento, es habitual tener un estilo base para etiquetas como los p (párrafos), div (cajas), h1 (titular nivel1), h2 etc. que luego se ven sobrescritos por otros estilos en casos concretos (como por ejemplo un estilo para los h2 de un artículo y otro para los h2 de los bloques). a { color: #0000cc; text-decoration: none; } abbr, acronym { border-bottom: .1em dotted; color: purple; cursor: help; text-decoration: underline; } }  
Selector descendente.  
Permite establecer un estilo para una etiqueta que se encuentre dentro de otra. Nos permite tener diferentes estilos para las mismas etiquetas HTML según su jerarquía dentro del documento table thead, tfoot { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-weight: bold; text-align: center; font-size:18px; } ol li { margin: 0 0 5px 0; font-size: 95%; text-align:justify; line-height: 150%; } ul li { margin: 0 0 5px 0; font-size: 95%; line-height: 150%; text-align:justify; } 

 
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> </body> ¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio. Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar 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> 

  

2.7 Modelo de caja. 

El modelo de cajas o “box model” es la característica más importante del lenguaje de hojas de estilos CSS,  condiciona el diseño de todas las páginas web. Hace que todos los elementos de las páginas se representen mediante cajas rectangulares, se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.