HTML. c Formación Digital, S.L.

Transcripción

1

2 c Formación Digital, S.L. "Queda rigurosamente prohibida, sin la autorización escrita de los titulares del "Copyright", bajo las sanciones establecidas en las leyes, la reproducción parcial o total de esta obra por cualquier medio o procedimiento, comprendidos la reprografía y el tratamiento informático, y la distribución de ejemplares de ella mediante alquiler o préstamo públicos". Despósito legal: SE

3 Tema 2: Organización del Texto Tema 3: Elementos Avanzados Tema 4: Extensiones y Hojas de Estilo GLOSARIO REFERENCIAS

4 Tema 1 Introducción 1.1. Características generales Versiones y extensiones Servidores y clientes Consideraciones preliminares Marcas Caracteres especiales Editores de HTML El documento HTML básico La cabecera del documento El cuerpo del documento El formato del color

5 Características Generales El HTML o HyperText Markup Language (traducible como Lenguaje de Marcas de HiperTexto) puede definirse como un sistema unificador de la información que nos permite integrar en un mismo documento (la denominada "Página Web") objetos de distinta naturaleza. Su finalidad es crear la estructura de páginas Web para su publicación en Internet, de manera que sean inteligibles para todos los navegadores. Resulta mucho más sencillo que un lenguaje de programación, ya que se compone de una serie de marcas (etiquetas o tags) que podemos escribir con cualquier procesador de texto. Este lenguaje, creado por Tim Berners-Lee, ingeniero del CERN (Conseil Europeen pour la Recherche Nucleaire), tiene sus raíces en el SGML (Standard Generalized Markup Language), un lenguaje de marcas mucho más amplio que sirve de fundamento para definir otros más concretos. Así, el HTML es una aplicación del estándar ISO 8879:1986 (SGML), que se formalizó en 1990 con la aparición de la World Wide Web (WWW) Versiones y extensiones Las distintas versiones del HTML se documentan en los DTD (Document Type Definition) que describen las especificaciones del lenguaje, es decir, sus distintos elementos (en este caso marcas) y el modo en que deben ser utilizados. Con cierta periodicidad, la IETF (Internet Engineering Task Force) emite borradores (drafts) de estos DTD con nuevas propuestas para ampliar el lenguaje, ya sea incluyendo nuevos elementos o añadiendo atributos a elementos ya existentes. Hasta la fecha se han realizado varias versiones del HTML. La última de ellas ha sido HTML 4.01, una subversión de HTML 4, lanzada el 24 de diciembre de La versión 4 del HTML ha supuesto, entre otras novedades, la introducción de mejoras en la estructura de tablas y formularios, la incorporación de más opciones multimedia, así como la posibilidad de realizar documentos más accesibles a personas discapacitadas. Algunas empresas de software, propietarias de los navegadores más populares de Internet, han ido añadiendo unilateralmente una serie de extensiones (exclusivas de sus navegadores) que tratan de optimizar las prestaciones del HTML estándar, aunque se alejan de él. Este ha sido el caso de Netscape, y, recientemente, también de Microsoft. Más adelante analizaremos las distintas marcas del HTML y sus correspondientes atributos.

6 Servidores y clientes Las redes que forman Internet se organizan en Servidores y Clientes. Los primeros, administrados por expertos en informática, son ordenadores conectados permanentemente a Internet que hospedan sus distintos recursos (páginas web, programas, etc). Por su parte, los clientes son aparatos conectados a servidores que pueden ser utilizados por usuarios con menos conocimientos informáticos. Cuando hablemos de Cliente, nos referiremos a los programas instalados en este último tipo de ordenadores, concretamente al navegador o browser. Para la comunicación entre Servidores y Clientes en la WWW se utiliza el HTTP (HyperText Transfer Protocol). Su funcionamiento es el siguiente: el Cliente establece una conexión con el Servidor y le envía una petición, este último le envía la respuesta (una página web), y se cierra la comunicación entre ambos. Aunque el navegador mantenga el documento, la conexión no permanece. Por ello, se dice que el HTTP es un protocolo de transmisión sin estado, es decir, no retiene información sobre la conexión una vez que la comunicación haya concluido Consideraciones preliminares A lo largo de estas páginas nos vamos a centrar exclusivamente en el lado Cliente, ya que el Servidor, como hemos dicho, debe ser manejado por los Administradores del Sistema. Pero antes de adentrarnos en el HTML vamos a describir brevemente los elementos que lo componen y los caracteres especiales a tener en cuenta Marcas Como hemos indicado anteriormente, el HTML es un sencillo lenguaje de programación que utiliza marcas (también llamadas etiquetas). Estas consisten en una palabra delimitada por los símbolos "<" y ">" respectivamente. Por ejemplo: <HTML>, <HEAD>o <BODY>. Estas marcas (de apertura) normalmente se encuentran emparejadas con otras (de cierre) formadas añadiendo a las primeras una barra ("/") antes de la palabra. Siguiendo el ejemplo anterior: </HTML>, </HEAD> o </BODY>. Por tanto, haremos la siguiente distinción entre los elementos que forman una página web: las Marcas Simples, es decir, aquellas que no están emparejadas con marcas de cierre (<BR>, <HR>, etc.) y los Delimitadores o Contenedores, es decir, aquellas con marcas de apertura y de cierre (<HTML></HTML>, <HEAD></HEAD>, <BODY></BODY>). En este segundo caso, lo que exista entre ambas etiquetas estará influenciado por ellas. Algunas marcas (las simples o las de apertura) pueden ir acompañadas de una serie de atributos que modifican el comportamiento de la propia marca. Por ejemplo: <BODY BGCOLOR=#FFFFFF TEXT=#00FF00 LINK=#FF0000> Por último, una marca puede estar escrita en mayúsculas, en minúsculas o en ambas. Se dice, por tanto, que no es "caso sensitivo". Ejemplo: <TITLE> = <title> = <TitLe>.

7 Caracteres Especiales Existe una serie de caracteres cuya representación puede variar de un ordenador a otro o poseen un significado determinado en el HTML. Se trata de los llamados Caracteres Especiales (Character Entities o Escape Sequences). Todos ellos deberán comenzar por el símbolo ampersand (&) y finalizar con un punto y coma (;). En el caso del castellano, estos caracteres son la ñ (ñ), la diéresis ü (ü) y las tildes agudas (á é etc). SECUENCIA CARÁCTER &lt < > > & & " " Los Caracteres Especiales del HTML son el propio símbolo ampersand & (&), los símbolos menor que < (<), mayor que > (>) y las comillas " ("). SECUENCIA CARÁCTER SECUENCIA CARÁCTER á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ &agrave à &Agrave À è è È È ì ì Ì Ì ò ò Ò Ò ù ù Ù Ù ä ä Ä Ä ë ë Ë Ë ï ï Ï Ï &ouml ö &Ouml Ö ü ü Ü Ü ç ç Ç Ç espacio en blanco Al contrario de lo que ocurre con las marcas, los Caracteres Especiales son "caso sensitivo", es decir, las mayúsculas y minúsculas afectan a su significado.

8 Editores de HTML Antes de adentrarnos en la estructura de un documento HTML, resulta fundamental que conozca cómo puede editar sus propias páginas web. Existen dos tipos de editores de HTML: - Editores textuales: Se trata de programas en los que se trabaja directamente con el código HTML puro. Así pues, si usted es usuario de Windows, podrá utilizar el Bloc de Notas y si tiene Macintosh, el Simple Text. Algunos de estos editores disponen de comandos preestablecidos que generarán directamente parte del código deseado, resultando más cómodo elaborar los documentos. Entre los más conocidos podemos encontrar Allaire HomeSite y HotDog Professional. - Editores WYSIWYG (What You See Is What You Get): Traducido, "lo que ve en su pantalla es lo que verá en el navegador". Su ventaja reside en que permiten visualizar y trabajar directamente con los objetos que se pueden insertar en una página (texto, imágenes, botones, formularios, etc.). Suelen ofrecer la opción de utilizar también código HTML puro. El problema que suelen presentar estos editores es que pueden generar mucho código "inútil". Por ello, resulta conveniente que, antes de trabajar con ellos, posea unos conocimientos básicos de HTML. Algunos de los más utilizados son Microsoft Frontpage y Macromedia Dreamweaver. Para realizar sus primeras páginas web con código HTML le recomendamos que utilice un editor textual simple, como el Bloc de Notas de Windows. Tenga en cuenta que siempre debe guardar sus archivos con alguna de estas dos extensiones:.htm o.html (puede utilizar cualquiera de ellas, aunque debe mantener siempre la misma a lo largo de cada documento). A la hora de nombrar un archivo, resulta conveniente utilizar siempre caracteres en minúsculas tanto para los nombres como para las extensiones, ya que existen servidores que diferencian entre mayúsculas y minúsculas. Cuando haya guardado un documento, puede visualizarlo en su navegador a través del menú "Archivo > Abrir" si utiliza Internet Explorer ("Examinar" si necesita buscar el archivo), o bien, mediante "File > Open Page" si emplea Netscape Navigator ("Choose File" para localizar el fichero). Una última consideración: cuando navegue por la Red, acostúmbrese a visualizar el código fuente de las páginas que visita. De esta manera, podrá aprender a la vez que navega. Puede hacerlo a través del menú del navegador: si utiliza Internet Explorer elija "Ver > Código fuente"; o si es usuario de Netscape Navigator, "View > Page Source".

9 El documento HTML básico Normalmente, un documento HTML tiene la estructura indicada en el siguiente cuadro. <HTML> <HEAD> Cabecera del Documento. </HEAD> <BODY> Cuerpo del Documento. Es posible realizar comentarios dentro del documento sin que lleguen a visualizarse en el navegador. La marca que debemos usar para ello es la siguiente: <!--comentario-->. El comentario puede estar escrito con cualquier tipo de caracteres, pero no es conveniente incluir otras marcas en el mismo. Puede hacerse tanto en la cabecera como en el cuerpo del documento La cabecera del documento La cabecera contiene los elementos que ofrecen información sobre el documento, entre ellos, el título. <HEAD></HEAD>: Estas marcas delimitan la cabecera de la página web y contiene información sobre el propio documento. Los elementos incluidos aquí sirven para interpretar y mantener el contenido del documento que, a su vez, está delimitado por las etiquetas <BODY></BODY>. Las marcas que pueden aparecer en la cabecera son las siguientes: - <BASE>: Dirección URL absoluta del documento. Especifica un directorio de base diferente del actual. Suele utilizarse para realizar pruebas con un documento y asociarle elementos propios de otro, así como para poder cambiarlo de ubicación sin que los enlaces dejen de funcionar. Si se omite esta marca, se toma como dirección base la que se ha utilizado para acceder al documento. Tiene un solo atributo y es obligatorio: Atributo href= "URL" Función Dirección del documento. Ejemplo: <BASE href=" - <LINK>: Esta marca especifica las relaciones entre los distintos documentos y su jerarquía. Una página puede tener diferentes etiquetas LINK. Se utilizan para definir barras de botones automáticamente o para crear áreas estáticas (banners). Atributo rel= home, toc, index, glossary, copyright, up, next, previous, help, bookmarks, banner Función Define la relación establecida entre el documento HTML y la dirección URL, según el valor que se le asigne.

10 - 6 - rev= relación href= "URL" title="texto" Es el reverso del anterior, es decir, especifica la relación entre la direc ción URL y el documento HTML. Dirección del documento objeto de la relación. Especifica el nombre de la relación. - <META>: Información especial de identificación del documento (llamada meta-information) que no puede definirse con otras marcas. Debe aparecer entre las primeras líneas del código HTML. El cliente y/o el servidor utilizan esta información para identificar, indexar y catalogar documentos. Resulta especialmente útil para la creación de documentos dinámicos desde el lado del cliente. Atributo name="nombre" http-equiv="comando HTTP" content="contenido" Función Nombre asignado Comando HTTP que se quiere ejecutar Contenido del atributo Comandos HTTP más usados Expires: Indica la fecha en que expira el documento. <META HTTP-EQUIV="Expires" CONTENT="Sun, 22 Sept 1996"> Keywords: Palabras clave por las que el documento sea localizable. <META HTTP-EQUIV="Keywords" CONTENT="Sevilla, Andalucía, España"> Reply-to: Dirección de correo electrónico del autor del documento. <META HTTP-EQUIV="Reply-to" CONTENT=arturo2@ibm.net> Refresh: Indica que se desea cargar este u otro documento pasados unos segundos. <META HTTP-EQUIV="Refresh"CONTENT=0> <META HTTP-EQUIV="Refresh"CONTENT="5; URL= - <TITLE></TITLE>: Delimitador del título de la página. Es un elemento necesario y especialmente útil para identificar el documento. Aunque no existe un límite, es recomendable no usar títulos con más de 64 caracteres. Ejemplo: <TITLE> Mi primera página web </TITLE>

11 <ISINDEX>: Se trata de una marca generada automáticamente por un programa instalado en un servidor. Sirve para establecer un mecanismo que realice búsquedas en documentos y servidores a través de palabras clave. Atributo href="url" prompt="texto" Función Dirección URL de la orden que gestiona la consulta. Cadena de caracteres que permite sustituir el carácter de solicitud (prompt) determinado. Ejemplo: <ISINDEX href=" PROMPT="Valor"> - <STYLE></STYLE>: Marcas reservadas para el uso de diferentes hojas de estilo. El formato que se especifique en este lugar sustituirá al que tenga asignado por defecto el navegador, dando más libertad creativa al autor de páginas web. Al utilizar esta etiqueta en la cabecera, podemos definir todas las características de un tipo de texto y luego utilizarlo en cualquier lugar del documento. Así podemos ahorrarnos tener que definir un mismo estilo varias veces. Ejemplo: <HTML> <HEAD> <STYLE> P {color:blue;font-size:18pt} </STYLE> </HEAD> <BODY> <P> Párrafo </P> </BODY> </HTML> Otra posibilidad sería: <HEAD> <STYLE>.texto1{font-color:blue}.texto2{font-color:red} </STYLE> </HEAD> <BODY> <P class="texto1">texto del tipo 1</P> <P class="texto2">texto del tipo 2</P> </BODY>

12 - 8 - En este ejemplo, la palabra "Párrafo" adquiere el estilo que se ha predefinido en la cabecera del documento. Cada vez que se utilice la etiqueta <P> se aplicarán automáticamente los nuevos valores de color y tamaño de fuente. Esta marca también puede utilizarse en el cuerpo del documento para definir el estilo de una o varias etiquetas. En este caso la sintaxis varía. Por ejemplo: <P STYLE="color:red">Texto </P>. Veremos de manera más extensa la etiqueta <STYLE> en el apartado 4.3. Hojas de estilo del Tema 4. - <SCRIPT></SCRIPT>: Estas marcas contienen código fuente de aplicaciones desarrolladas en otros lenguajes de programación como JAVASCRIPT, VBSCRIPT, etc. Atributo language="lenguaje" src Función Indica el lenguaje del script que se va utilizar. Los más utilizados son JAVAS CRIPT, JSCRIPT y VBSCRIPT. Precisa el URL del script que se va a insertar en el documento. Es opcional El cuerpo del documento Dentro del cuerpo se encuentran todos los elementos que queremos que aparezca en la pantalla principal (texto, imágenes, etc.). <BODY></BODY>: Estas son las marcas que definen el contenido del documento HTML. Todas las que analicemos en las próximas páginas estarán incluidas dentro de este contenedor. De momento veamos sus atributos: Atributo background= "URL" bgcolor= "#rrggbb" bgcolor= nombredecolor bgproperties= fixed leftmargin= número link= "#rrggbb" link= nombredecolor text= "#rrggbb" topmargin= número vlink= "#rrggbb" vlink= nombredecolor alink= "#rrggbb" alink= nombredecolor Función Dirección de la imagen que se usará como fondo del documento. Valor RGB del color de fondo. Nombre del color usado como fondo. La imagen del fondo no se desplazará ni se multiplicará. Margen del documento en píxeles. Valor RGB del color usado en los enlaces no visitados. Nombre de color usado en el texto. Valor RGB del color usado en el texto. Margen superior en píxeles. Valor RGB del color usado en los enlaces visitados. Nombre del color usado en los enlaces visitados. Valor RGB del color usado en los enlaces activos. Nombre del color usado en los enlaces activos.

13 - 9 - Ejemplos: <BODY bgcolor="blue">: Incorpora a la pantalla el color azul de fondo. <BODY text="#ff0000">: Cambia el color del texto al rojo en todo el documento El formato del color El formato más usado para definir el color es el RGB (Red, Green, Blue) que se basa en asignar un "peso" o valor a cada uno de los tres componentes del color: rojo, verde, azul. El código tiene pues el siguiente formato: #RRGGBB, y los valores de cada componente son números hexadecimales que van desde los extremos 00 a FF, pasando por niveles intermedios (33, 66, 99, etc). Existen aplicaciones que asignan estos valores automáticamente. Como ejemplo práctico asignaremos a continuación valores extremos a cada uno de los tres colores básicos, obteniendo los siguientes códigos de colores RGB: COLOR Negro Blanco Rojo Verde Azul Amarillo Púrpura Celeste NOTACIÓN # #FFFFFF #FF0000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF Otra forma alternativa de asignar un color es indicando su nombre. El HTML recoge una lista de varios colores, que tienen su origen en el estándar soportado por la paleta VGA de Windows. Son, entre otros, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow.

14 RECUERDE - El HTML o HyperText Markup Language (Lenguaje de Marcas de HiperTexto) puede definirse como un sistema unificador de la información que nos permite integrar en un mismo documento (la denominada "Página Web") objetos de distinta naturaleza. Su finalidad es crear la estructura de páginas Web para su publicación en Internet, de manera que sean inteligibles para todos los navegadores. Resulta mucho más sencillo que otros lenguajes de programación, ya que se compone de una serie de marcas (etiquetas o tags) que podemos escribir con cualquier procesador de texto. - Las marcas consisten en una palabra rodeada por los símbolos "<" y ">" respectivamente. Estas etiquetas (de apertura) normalmente se encuentran emparejadas con otras (de cierre) formadas añadiendo a las primeras una barra ("/") antes de la palabra. Por tanto, haremos la siguiente distinción entre los elementos que forman una página web: las Marcas Simples, es decir, aquellas que no están emparejadas con marcas de cierre y los Delimitadores o Contenedores, es decir, aquellas con marcas de apertura y de cierre. Además, algunas marcas (las simples o las de apertura) pueden ir acompañadas de atributos que modifican su comportamiento. - Existe una serie de caracteres cuya representación puede variar de un ordenador a otro o poseen un significado determinado en el HTML. Se trata de los llamados caracteres especiales (Character Entities o Escape Sequences). Todos ellos deberán comenzar por el símbolo ampersand (&) y finalizar con un punto y coma (;). En el caso del castellano, estos caracteres son la ñ (ñ), la diéresis ü (ü) y los acentos, que siempre son agudos (á é etc). - Normalmente, un documento HTML tiene la estructura indicada en el siguiente cuadro. <HTML> <HEAD> Cabecera del Documento. </HEAD> <BODY> Cuerpo del Documento. - La cabecera, delimitada con las marcas <HEAD></HEAD>, contiene los elementos que ofrecen información sobre el documento, entre ellos el título. Además, en esta zona se establece la jerarquía de los títulos y apartados. - Dentro del cuerpo se encuentran todos los elementos que queremos que aparezcan en la pantalla principal (texto, imágenes, etc.). Así pues, las marcas <BODY></BODY> definen el contenido del documento HTML.