Introduccion al HTML, informatica, Apuntes de Informática

¡Descarga Introduccion al HTML, informatica y más Apuntes en PDF de Informática solo en Docsity!

LIBROSWEB

JAVIER EGUILUZ

XHTML

INTRODUCCIÓN A

Introducción a XHTML

Javier Eguiluz

Fecha publicación: 14/03/

Este libro fue publicado con la aplicación easybook (http://easybook-project.org) , una herramien- ta de software libre para la publicación de libros digitales.

Licencia

Este libro se publica bajo la licencia Creative Commons Reconocimiento - No Comercial - Compartir Igual 3.0 , cuyos detalles puedes consultar en http://creativecommons.org/licenses/by-nc-sa/3.0/es/

Puedes copiar, distribuir y comunicar públicamente la obra, incluso transformándola, siempre que cumplas todas las condiciones siguientes:

• Reconocimiento : debes reconocer siempre la autoría de la obra original, indicando tanto el nombre del autor (Javier Eguiluz) como el nombre del sitio donde se publicó originalmente (librosweb.es). Este reconocimiento no debe hacerse de una manera que sugiera que el autor o el sitio apoyan el uso que haces de su obra.
• No comercial : no puedes utilizar esta obra con fines comerciales de ningún tipo. Entre otros, no puedes vender esta obra bajo ningún concepto y tampoco puedes publicar estos contenidos en sitios web que incluyan publicidad de cualquier tipo.
• Compartir igual : si alteras o transformas esta obra o si realizas una obra derivada, debes compartir tu trabajo obligatoriamente bajo esta misma licencia.

• Capítulo 1. Introducción
  • 1.1. ¿Qué es HTML?
  • 1.2. Breve historia de HTML.
  • 1.3. Especificación oficial
  • 1.4. HTML y XHTML.
  • 1.5. HTML y CSS
• Capítulo 2. Características básicas
  • 2.1. Lenguajes de etiquetas.
  • 2.2. El primer documento HTML
  • 2.3. Etiquetas y atributos
  • 2.4. Elementos HTML.
  • 2.5. Sintaxis de las etiquetas XHTML
• Capítulo 3. Texto
  • 3.1. Estructurar
  • 3.2. Marcado básico de texto
  • 3.3. Marcado avanzado de texto
  • 3.4. Marcado genérico de texto
  • 3.5. Espacios en blanco y nuevas líneas
  • 3.6. Codificación de caracteres
• Capítulo 4. Enlaces
  • 4.1. URL
  • 4.2. Enlaces relativos y absolutos
  • 4.3. Enlaces básicos
  • 4.4. Enlaces avanzados
  • 4.5. Otros tipos de enlaces
  • 4.6. Ejemplos de enlaces habituales
• Capítulo 5. Listas
  • 5.1. Listas no ordenadas
  • 5.2. Listas ordenadas
  • 5.3. Listas de definición.
• Capítulo 6. Imágenes y objetos
  • 6.1. Imágenes.
  • 6.2. Mapas de imagen
  • 6.3. Objetos
• Capítulo 7. Tablas
  • 7.1. Tablas básicas
  • 7.2. Tablas avanzadas
• Capítulo 8. Formularios
  • 8.1. Formularios básicos
  • 8.2. Elementos de formulario.
  • 8.3. Formularios avanzados
  • 8.4. Otros elementos de formulario
• Capítulo 9. Estructura y layout
• Capítulo 10. Metainformación.
  • 10.1. Estructura de la cabecera
  • 10.2. Metadatos.
  • 10.3. DOCTYPE.
• Capítulo 11. Otras etiquetas importantes.
  • 11.1. Comentarios.
  • 11.2. JavaScript
  • 11.3. CSS
  • 11.4. Iframes
  • 11.5. Otras etiquetas
• Capítulo 12. Accesibilidad
  • 12.1. Requisitos del nivel A de accesibilidad
• Capítulo 13. Validación
  • 13.1. Validación con Dreamweaver
  • 13.2. Validador del W3C
  • 13.3. Otros validadores
• Capítulo 14. Fragmentos de código
  • 14.1. Documento XHTML
  • 14.2. Cabecera XHTML.
  • 14.3. Tabla
  • 14.4. Formulario
• Capítulo 15. Ejercicios resueltos
  • 15.1. Ejercicio
  • 15.2. Ejercicio
  • 15.3. Ejercicio
  • 15.4. Ejercicio
  • 15.5. Ejercicio
  • 15.6. Ejercicio
  • 15.7. Ejercicio
  • 15.8. Ejercicio
  • 15.9. Ejercicio
  • 15.10. Ejercicio 10.
  • 15.11. Ejercicio 11.
  • 15.12. Ejercicio 12.
  • 15.13. Ejercicio 13.
  • 15.14. Ejercicio 14.
  • 15.15. Ejercicio 15.
  • 15.16. Ejercicio 16.

Capítulo 1.

Introducción

1.1. ¿Qué es HTML?

Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web.

Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios mues- tran las páginas web después de leer su contenido HTML.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño, es muy fácil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText Markup Language y más adelante se verá el significado de cada una de estas palabras.

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/) , más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cual- quier sistema operativo.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite pu- blicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a ser un lenguaje que se utiliza en mu- chas aplicaciones electrónicas como buscadores, tiendas online y banca electrónica.

1.2. Breve historia de HTML La historia completa de HTML es tan interesante como larga, por lo que a continuación se muestra su historia resumida a partir de la información que se puede encontrar en la Wikipedia.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee , trabajador del CERN (http://www.cern.ch/) ( Organización Europea para la Investigación Nuclear ) propuso un nuevo sistema de "hipertexto" para compartir documentos.

Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto" po- drían asimilarse a los enlaces de las páginas web actuales.

Tras finalizar el desarrollo de su sistema de "hipertexto" , Tim Berners-Lee lo presentó a una convoca- toria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau , presentaron la propuesta ganadora llamada WorldWide- Web (W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html) ( Etiquetas HTML ) y todavía hoy puede ser consultado online a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del or- ganismo IETF (http://www.ietf.org/) ( Internet Engineering Task Force ). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ningu- na de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de sep- tiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer están- dar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (http://www.w3.org/) ( World Wide Web Consortium ). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últi- mos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alre- dedor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mo- zilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron orga- nizarse en una nueva asociación llamada WHATWG (http://www.whatwg.org/) ( Web Hypertext Appli- cation Technology Working Group ).

La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial (http://www.w3.org/TR/html5/) se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas

Capítulo 1. Introducción Introducción a XHTML

Las páginas y documentos creados con XHTML son muy similares a las páginas y documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el ámbito de la creación de contenidos web, aunque no existe una conclusión ampliamente aceptada.

Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen XHTML. En un futuro cercano, si los diseñadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente.

1.5. HTML y CSS Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.

La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también in- cluyeran el código de las aplicaciones (llamadas scripts ) que se utilizan para crear páginas web diná- micas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidad de diferentes personas, por lo que es conveniente separarlos.

CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos:

Figura 1.2 Esquema de la separación de los contenidos y su presentación

Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas disca- pacitadas.

De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas. Aplican- do CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas.

Capítulo 1. Introducción Introducción a XHTML

Capítulo 2.

Características básicas

2.1. Lenguajes de etiquetas

Uno de los retos iniciales a los que se tuvo que enfrentar la informática fue el de cómo almacenar la información en los archivos digitales. Como los primeros archivos sólo contenían texto sin formato, la solución utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en nú- meros.

De esta forma, para almacenar un contenido de texto en un archivo electrónico, se utiliza una tabla de conversión que transforma cada carácter en un número. Una vez almacenada la secuencia de nú- meros, el contenido del archivo se puede recuperar realizando el proceso inverso.

Figura 2.1 Ejemplo sencillo de codificación de caracteres

El proceso de transformación de caracteres en secuencias de números se denomina codificación de caracteres y cada una de las tablas que se han definido para realizar la transformación se conocen con el nombre de páginas de código. Una de las codificaciones más conocidas (y una de las primeras que se publicaron) es la codificación ASCII. La importancia de las codificaciones en HTML se verá más adelante.

2.2. El primer documento HTML Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

Figura 2.2 Esquema de las partes que forman un documento HTML

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (lla- mada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

A continuación se muestra el código HTML de una página web muy sencilla:

El primer documento HTML

El lenguaje HTML es tan sencillo que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.

Si quieres probar este primer ejemplo, debes hacer lo siguiente:

1. Abre un editor de archivos de texto y crea un archivo nuevo
2. Copia el código HTML mostrado anteriormente y pégalo tal cual en el archivo que has creado
3. Guarda el archivo con el nombre que quieras, pero con la extensión .html

Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de tex- to sin formato. Si tu sistema operativo es Windows, puedes utilizar el Bloc de notas , Wordpad , EmEditor , UltraEdit , Notepad++ , etc. pero no puedes utilizar un procesador de textos como Word o Open Office. Si utilizas sistemas operativos tipo Linux, puedes utilizar editores como Gedit , Kedit , Kate e incluso Vi , pero no utilices KOffice ni Open Office.

Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el siguiente aspecto:

Introducción a XHTML Capítulo 2. Características básicas

Figura 2.3 Aspecto que muestra el primer documento HTML en cualquier navegador

Si ya estás viendo tu primera página HTML en el navegador, prueba a pulsar sobre el menú Ver > Código fuente y podrás ver el código HTML de la página que está cargada en el navegador. De hecho, puedes ver el código HTML de cualquier página de Internet mediante la opción Ver > Código fuente. Prueba a ver el código HTML de tu página preferida y verás cuantas etiquetas puede llegar a tener una página compleja.

Volviendo al código HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un documento HTML (, , ):

• : indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta (con una sola excepción que se verá más adelante). En el interior de la etiqueta se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta se ignora.
• : delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta , que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página).
• <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.

Capítulo 2. Características básicas Introducción a XHTML

De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar: applet, basefont, center, dir, font, isindex, menu, s, strike, u.

A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas complejas. Algunos elementos como las imágenes y los enlaces requieren cierta información adicio- nal para estar completamente definidos.

La etiqueta por ejemplo se emplea para incluir un enlace en una página. Utilizando sólo la etique- ta no es posible establecer la dirección a la que apunta cada enlace. Como no es viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional llamada atributos.

De esta forma, se utiliza la misma etiqueta para todos los enlaces de la página y se utilizan los atributos para indicar la dirección a la que apunta cada enlace.

Ejemplo de atributos en las etiquetas

Los enlaces son muy fáciles de indicar: Soy un enlace incompleto, porque no tengo dirección de destino. Este otro enlace apunta a la página de Google.

Figura 2.6 Los atributos permiten personalizar las etiquetas HTML

Capítulo 2. Características básicas Introducción a XHTML

El primer enlace del ejemplo anterior no está completamente definido, ya que no apunta a ninguna dirección. El segundo enlace, utiliza la misma etiqueta , pero añade información adicional median- te un atributo llamado href. Los atributos se incluyen dentro de la etiqueta de apertura. Por ahora no es importante comprender la etiqueta ni el atributo href, ya que se explicarán con todo detalle más adelante.

No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su pro- pia lista de atributos disponibles. Además, cada atributo también indica el tipo de valor que se le pue- de asignar. Si el valor de un atributo no es válido, el navegador ignora ese atributo.

Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los atributos son co- munes a muchas o casi todas las etiquetas. De esta forma, es habitual explicar por separado los atri- butos comunes de las etiquetas para no tener que volver a hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes se dividen en cuatro grupos según su funcionalidad:

• Atributos básicos : se pueden utilizar prácticamente en todas las etiquetas HTML.
• Atributos para internacionalización : los utilizan las páginas que muestran sus contenidos en varios idiomas.
• Atributos de eventos : sólo se utilizan en las páginas web dinámicas creadas con JavaScript.
• Atributos de foco : relacionados principalmente con la accesibilidad de los sitios web.

2.3.1. Atributos básicos

Los siguiente cuatro atributos básicos se pueden aplicar prácticamente a todas las etiquetas HTML:

Atributo Descripción

id = "texto" Establece un identificador único a cada elemento dentro de una página HTML

class = "texto" Establece la clase CSS que se aplica a los estilos del elemento

style = "texto" Establece de forma directa los estilos CSS de un elemento

title = "texto" Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)

La mayoría de páginas web actuales utilizan los atributos id y class de forma masiva. Sin embargo, estos atributos sólo son realmente útiles cuando se trabaja con CSS y con Javascript.

Respecto al valor de los atributos id y class, sólo pueden contener guiones medios (-), guiones bajos (_), letras y/o números, pero no pueden empezar por números. Además, los navegadores distinguen mayúsculas de minúsculas y no se recomienda utilizar letras como ñ y acentos, ya que no es seguro que funcionen correctamente en todas las versiones de todos los navegadores.

2.3.2. Atributos para internacionalización

Estos atributos son útiles para aquellas páginas que muestran sus contenidos en varios idiomas y para aquellas que quieren indicar de forma explítica el idioma de sus contenidos:

Introducción a XHTML Capítulo 2. Características básicas

Atributo Descripción Elementos que pueden usarlo onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento)

Todos los elementos

onmouseover El ratón "entra" en el elemento (pasa por encima del elemento)

Todos los elementos

onmouseup Soltar el botón que estaba pulsado en el ratón

Todos los elementos

onreset Inicializar el formulario (borrar todos sus datos)

onresize Se ha modificado el tamaño de la ventana del navegador

onselect Seleccionar un texto ,
Por su parte, el atributo accesskey permite establecer una tecla para acceder de forma rápida a cual- quier elemento. Aunque la tecla de acceso rápido se establece mediante HTML, la combinación de teclas necesarias para activar ese acceso rápido depende del navegador. En el navegador Internet Ex- plorer se pulsa la tecla ALT + la tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecla definida; en el navegador Opera se pulsa Shift + Esc + la tecla definida; en el navegador Safari se pulsa Ctrl + la tecla definida.

2.4. Elementos HTML Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes que componen los documentos HTML.

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un ele- mento HTML es mucho más que una etiqueta, ya que está formado por:

• Una etiqueta de apertura.
• Cero o más atributos.
• Texto encerrado por la etiqueta.
• Una etiqueta de cierre.

El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta

, atri- butos y contenidos de texto:

Figura 2.7 Esquema de las partes que componen un elemento HTML

La estructura mostrada en el esquema anterior es un elemento HTML ya que comienza con una eti- queta de apertura (

), contiene cero o más atributos (class="normal"), dispone de un contenido de texto (Esto es un párrafo) y finaliza con una etiqueta de cierre (

).

Por tanto, si una página web tiene dos párrafos de texto, la página contiene dos elementos y cuatro etiquetas (dos etiquetas

de apertura y dos etiquetas

de cierre). De todas formas, aunque es- trictamente no son lo mismo, es habitual intercambiar las palabras "elemento" y "etiqueta".

Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en línea ( inline elements en inglés) y elementos de bloque ( block elements en inglés).

La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio dis- ponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la

Capítulo 2. Características básicas Introducción a XHTML