Lenguajes de Marcas y SGI (CFGS Administrador de Sistemas Informáticos en Red)

1. Lenguajes de Marcas y SGI
U.T. 2: Lenguajes de marcas para la web.
HTML y XHTML.
C.F.G.S. “Administración de Sistemas
Informáticos en Red”
C.I.F.P. Juan de Colonia (Burgos)
David H. Martín Alonso
- Curso 2010/2011 -

2. WEB: HTML Y XHTML.
Contenidos
Internet y la web
Estructura y composición
Lenguajes y estándares
HTML
Noviembre de 2010 CIFP Juan de Colonia

3. WEB: HTML Y XHTML.
¿Qué es Internet realmente?
■ Internet Sistema de comunicación Universal × 2
□ La web
□ Componentes • Ámbito universal
□ Lenguajes • Propósito universal
□ Diseño web
Dualidad
3/53
• Tecnología de red predominante: arquitectura TCP/IP
– Numeración IP
• Impacto social
– Correo electrónico
– La web
Internet, intranet y extranet
Noviembre de 2010 CIFP Juan de Colonia

4. WEB: HTML Y XHTML.
Evolución
■ Internet 1970: La informática moderna
□ La web
□ Componentes • Entornos gráficos de usuario
□ Lenguajes • Ratón
□ Diseño web
• Redes locales
• Internet
4/53
1980: El PC
1990: Expansión de la red
• La web y los navegadores
• Acceso doméstico a Internet
2000: La red social
Noviembre de 2010 CIFP Juan de Colonia

5. WEB: HTML Y XHTML.
Evolución de Internet
■ Internet • Origen financiado con fondos militares.
□ La web – DARPA, ARPANET, 1970
□ Componentes
□ Lenguajes • Desarrollo: grupos de investigación y universidades.
□ Diseño web – Años 1980
– Desarrollo autónomo, artesanal.
• 1995: apertura al público, particulares
5/53
– Necesidad de tecnologías de las “telefónicas”.
– años 1990: revolución web
Aplicación rompedora.
– Provoca su incorporación en redes comerciales.
• Años 2000: omnipresencia de la red
– Medios de comunicación, economía,...
– Trabajo, comercio,...
– Relaciones personales
• Tecnología competitiva con el software de escritorio
– AJAX: HTML + CSS + Javascript + ingenio...
– Aplicación de modelos sociales en aplicaciones web
Noviembre de 2010 CIFP Juan de Colonia

6. WEB: HTML Y XHTML.
¿Internet S.A.?
■ Internet Evolución de Internet: reto al modelo empresarial
□ La web
□ Componentes • Chascarrillo: origen financiado con fondos militares.
□ Lenguajes • Desarrollo: grupos de investigación y universidades.
□ Diseño web
• Despreciado en el mundo comercial.
– Red no profesional, de aficionados.
6/53 • 1995: apertura de los sistemas de acceso a las
“telefónicas”.
• años 1990: revolución web
– Aplicación “de aficionados”, pero muy rompedora.
– Provoca la agonía de las redes comerciales.
Incubadora de movimientos libres:
• BSD: Licencia de UNIX para investigación.
– Soporte de programación que sustenta Internet.
• Linux, GNU, Wikipedia.
– Comunidades colaborativas de ámbito universal.
Noviembre de 2010
• Necesidad de un nuevo marco de regulación. CIFP Juan de Colonia

7. WEB: HTML Y XHTML.
La web
□ Internet Intercambio de documentos de hipertexto
■ La web
□ Componentes Mosaic: Visualización in situ de imágenes
□ Lenguajes
□ Diseño web • Popularidad rápida e imprevista
• Al margen de los intereses comerciales
7/53 Generación dinámica de páginas
• En tiempo real
• Uso como interfaz universal para aplicaciones
• Independiente de la plataforma
Mejoras en la interacción con el usuario
• Javascript, AJAX
Integración: servicios web
Estandarización: W3C (Consorcio WWW)
• Flexibilidad frente a anarquía
Noviembre de 2010 CIFP Juan de Colonia

8. WEB: HTML Y XHTML.
Web 2.0
□ Internet Siglo XXI: cambio de paradigma
■ La web
□ Componentes • Muchos pequeños cambios combinados.
□ Lenguajes • Canal de distribución × Red de colaboración
□ Diseño web
La figura del lector se convierte en colaborador
8/53
• La participación y la discusión provoca evolución.
[YouTube]
Noviembre de 2010 CIFP Juan de Colonia

9. WEB: HTML Y XHTML.
Actividad I: Web 2.0
Los espacios web de moda presentan unos patrones
de colaboración comunes, adaptados a temáticas
diversas. Aunque el patrón parezca común, unos y
otros alcanzan popularidad dispar según la dinámica
que marquen sus colaboradores.
Un buen punto de partida parra iniciar un recorrido
son los blog de Enrique Dans o Tiscar Lara.
-Blogs de Enrique Dans y Tiscar Lara
-del.icio.us, SlideShare, Google Docs
-YouTube, Flickr, Picasa, Jamendo
-Twitter, Facebook, tuenti
Noviembre de 2010 CIFP Juan de Colonia

10. WEB: HTML Y XHTML.
Arquitectura
■ Introducción Arquitectura/modelo cliente-servidor
□ Historia
□ Navegadores • Servidor en espera, distribuye páginas
□ HTML • Cliente, el navegador web iniciado por el usuario
□ CSS
□ Servidor web Protocolo: HTTP
□ Virtualización
10/53
• Hypertext Transfer Protocol
– “Lenguaje” de comunicación entre cliente y servidor
Contenido, formato: HTML + CSS
• HyperText Markup Language
– Texto plano con <marcas>
• Cascading Style Sheets
– Definiciones del estilo {color:red;}
Noviembre de 2010 CIFP Juan de Colonia

11. WEB: HTML Y XHTML.
Aplicaciones en red: modelos (I)
□ Internet Archivos de datos compartidos en red.
□ La web
■ Componentes • Programas locales, en el terminal del usuario.
□ Lenguajes • Discos virtuales en red.
□ Diseño web
• Gestionado por el sistema operativo.
– Control de acceso y optimizaciones mínimas.
11/53 • Tráfico elevado, todo el proceso en el puesto de
usuario.
• Fácil adaptación de programas DOS monousuario.
Noviembre de 2010 CIFP Juan de Colonia

12. WEB: HTML Y XHTML.
Aplicaciones en red: modelos (II)
□ Internet Aplicaciones cliente-servidor.
□ La web
■ Componentes • Parejas de programas: servidor y sus clientes.
□ Lenguajes – Protocolo común de comunicación.
□ Diseño web – Clientes varios, adaptados a cada sistema o uso.
• Servidor: en espera, presta servicios.
12/53
– Ejecución automática al iniciar/parar sistema.
• Tráfico ajustado, sólo la información solicitada.
– Proceso repartido.
• Modelo clásico en UNIX/Internet/WWW.
Noviembre de 2010 CIFP Juan de Colonia

13. WEB: HTML Y XHTML.
Aplicaciones en red: modelos (III)
□ Internet Terminales remotas / aplicaciones web
□ La web
■ Componentes • Proceso remoto / visualización en los puestos
□ Lenguajes – Terminales, consolas de texto
□ Diseño web – X-Windows, servidores de terminales
– Aplicaciones y servicios web, con navegadores
13/53
Noviembre de 2010 CIFP Juan de Colonia

14. WEB: HTML Y XHTML.
Aplicaciones en red: modelos (IV)
□ Internet Sistemas distribuidos
□ La web
■ Componentes • Conjunto de servicios
□ Lenguajes – Integración: múltiples equipos en localizaciones dispersas.
□ Diseño web – Transparencia: percepción unificada por los usuarios.
– Mejora de rendimiento + mayor resistencia a fallos.
14/53
• Distribución geográfica ajustable
– Para reducir distancias/tráfico/tiempo.
– Para configurar cierta redundancia → seguridad.
• El futuro: ¿la nube? (cloud computing)
– Tanto el proceso como los datos estarán en “la Red”
– Acceso a través de interfaces web universales.
Noviembre de 2010 CIFP Juan de Colonia

15. WEB: HTML Y XHTML.
Navegadores
□ Internet • Precedente: Gopher Pestañas
□ La web
■ Componentes Mosaic → Netscape → Mozilla → Gecko
□ Lenguajes
□ Diseño web
• Firefox
• Seamonkey Complementos
• Galeon
15/53
Lynx → Links Extensiones
Opera
Konqueror → Safari → WebKit → Epiphany
MS Internet Explorer Marcadores
– Internet Explorer 6 – 7 – 8 – 9
Google Chrome, Chromium
Seguridad
Noviembre de 2010 CIFP Juan de Colonia

16. WEB: HTML Y XHTML.
Servidores
□ Internet
□ La web
■ Componentes Apache
□ Lenguajes
□ Diseño web • Software libre, servidor popular multiplataforma
• Licencia Apache
16/53 MS Internet Information Server (IIS)
• Aplicaciones web con .NET, para MS Windows
Tomcat
• Aplicaciones web con Java, multiplataforma
• Software libre, licencia Apache
LightTPD
• Software libre, servidor ligero
• Licencia BSD
Noviembre de 2010 CIFP Juan de Colonia

17. WEB: HTML Y XHTML.
Apache
□ Internet Apache 2.2.17 (a 19/10/2010)
□ La web
■ Componentes http://httpd.apache.org/
□ Lenguajes
□ Diseño web Servidor web multiplataforma
• Incluido en las distribuciones GNU/Linux
17/53 • Instalador para MS Windows
Software libre: open-source, licencia Apache 2
Funcionalidades extra:
• Proxy-cache / acelerador
• Servidores virtuales
Otros productos de la Fundación Apache
• Tomcat: servidor de aplicaciones Java
• Batik: librería de programación SVG en Java
Noviembre de 2010 CIFP Juan de Colonia

18. WEB: HTML Y XHTML.
Arquitectura LAMP/WAMP (I)
□ Internet La generación de contenido web dinámica implica
□ La web
■ Componentes disponer de varias aplicaciones:
□ Lenguajes • Servidor web, distribuye: Apache
□ Diseño web
• Lenguaje de programación, construye: PHP
• Base de datos: MySQL
• Aplicaciones: wikis, blogs, portales, CMS, LMS...
18/53
En entornos profesionales se repite el modelo
con aplicaciones comerciales:
• Tomcat + Java + Oracle
• IIS + .NET + SQL Server
Noviembre de 2010 CIFP Juan de Colonia

19. WEB: HTML Y XHTML.
Arquitectura LAMP/WAMP (II)
□ Internet Instalación
□ La web
■ Componentes • GNU/Linux: Incluidos
□ Lenguajes • MS Windows: Paquetes integrados
□ Diseño web
– MoWes
– AppServ
– Xampp
19/53
SEGURIDAD: MUY ALTO RIESGO DE ATAQUES
• Actualizaciones automáticas en GNU/Linux.
• Actualizaciones manuales de paquetes en MS
Windows.
→ Sobreponderar siempre la opción de hospedaje
externo salvo que los datos exijan una particular
protección.
Noviembre de 2010 CIFP Juan de Colonia

20. WEB: HTML Y XHTML.
Lenguajes
□ Internet Transporte: HTTP
□ La web
□ Componentes Contenido: documentos HTML (XHTML)
■ Lenguajes
□ Diseño web Estética: hojas de estilo CSS
Programación: PHP, Java, Perl, Python
20/53
Imágenes: GIF, JPEG, PNG
Complementos: Flash, PDF
Noviembre de 2010 CIFP Juan de Colonia

21. WEB: HTML Y XHTML.
Revisión
● ¿Dónde podemos encontrar la norma
web 2.0?
● ¿Qué usos tiene y qué ventajas
aporta el modelo cliente-servidor?
● ¿Cuántos clientes HTTP puedes
nombrar de memoria?
● ¿Es recomendable montar un
servidor de empresa con MS Windows
y Xampp? ¿Por qué?
Noviembre de 2010 CIFP Juan de Colonia

22. WEB: HTML Y XHTML.
Evolución del diseño web
□ Internet Hipertexto
□ La web
□ Componentes Imágenes, imágenes animadas y tablas
□ Lenguajes
■ Diseño web Formato y estilos
Programación del lado del cliente: Javascript
22/53
Lenguajes de programación del lado del servidor
• PHP, Java
Portales y plataformas
Servicios web
Interacción mejorada: AJAX
Noviembre de 2010 CIFP Juan de Colonia

23. WEB: HTML Y XHTML.
Diseño: herramientas/editores
□ Internet Editores comunes de texto con coloreado de
□ La web
□ Componentes sintaxis:
□ Lenguajes • Notepad++, jEdit, kate, gedit...
■ Diseño web
• vim, emacs, mcedit...
• ...
23/53
Editores XML/HTML:
• Bluefish...
Editores WYSIWYG:
editor + visor + gestor de proyecto
• Dreamweaver, HTML-Kit
• MS FrontPage
• Mozilla: Seamonkey, NVu, KompoZer
• W3C: Amaya
WYSIWYG: “What You See Is What You Get”
WYSIWYG: “What You See Is What You Get”
Noviembre de 2010 CIFP Juan de Colonia

24. WEB: HTML Y XHTML.
HTML: Historia
□ Internet • HTML 2.0
□ La web – Primera versión oficial diferenciada de SGML.
□ Componentes
– RFC1866, IETF, noviembre de 1995
□ Lenguajes
– HTML básico y soporte para integrar imágenes
■ Diseño web
• HTML 3.2
– Primera versión promovida por el W3C, enero 1997
24/53
– Mejoras de formato
– Soporte para tablas
Abuso, como sucedáneo de columnas y bloques
• HTML 4
– Diciembre de 1997
– Base del HTML/XHTML en uso actualmente
– Degradación de elementos de formato en favor de CSS
• XHTML 1.0
– Enero de 2000
• HTML 5 / XHTML 5 –borrador–
– Enero de 2008
Noviembre de 2010 CIFP Juan de Colonia

25. WEB: HTML Y XHTML.
HTML: Validación
□ Internet La web se basa en la flexibilidad de los
□ La web
□ Componentes navegadores ante diferencias/ampliaciones del
□ Lenguajes lenguaje HTML
■ Diseño web
• ¿Cómo detectar errores en las páginas?
• Necesarias herramientas de validación
25/53 – Aplicaciones independientes
Ej.: tidy
– Integradas en editores WYSiWYG (visuales)
– Validación W3C en línea
Con la URI, el archivo o pegando el código
HTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator
• Dificultades habituales
– Ausencia de la línea de DTD con la versión de HTML
– No se identifica la codificación de caracteres
– Obligan a proporcionar texto alternativo...
en imágenes (alt=”...”) y tablas (summary=”...”)
Noviembre de 2010 CIFP Juan de Colonia

26. WEB: HTML Y XHTML.
HTML: Versiones y DTD
□ Internet La primera línea de todo documento HTML debe
□ La web
□ Componentes identificar la versión de HTML utilizada
□ Lenguajes • Necesarios para la validación
■ Diseño web
• Flexibilidad controlable sobre uso/abuso de estilos
– Modo estricto / modo transicional
26/53 – Estricto: formatos obsoletos por CSS, quedan prohibidos
– El formato de marcos (frameset) está en desuso
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Noviembre de 2010 CIFP Juan de Colonia

27. WEB: HTML Y XHTML.
HTML ↔ XHTML
□ Internet XML exige incorporar algunas condiciones sobre
□ La web
□ Componentes la forma de los documentos:
□ Lenguajes • Todos los elementos deben ir cerrados.
■ Diseño web
– Etiquetas de cierre obligatorias.
– Cierre incorporado en etiquetas sencillas: <br />
27/53 • Los nombres (tipos, atributos) en minúsculas.
• Los valores deben ir entrecomillados
– width=”20%”
– No se permiten opciones/atributos sin valor.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Descriptores adicionales para XML...
• Referencia del lenguaje: documentación HTML 4.01
Noviembre de 2010 CIFP Juan de Colonia

28. WEB: HTML Y XHTML.
¿XHTML 1.1?
□ Internet XHTML 1.1: XHTML estricto
□ La web
□ Componentes • XHTML 1.0 Strict + XHTML Modules
□ Lenguajes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
■ Diseño web
28/53
XHTML Basic
• Versión mínima, portable
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
Noviembre de 2010 CIFP Juan de Colonia

29. WEB: HTML Y XHTML.
HTML: Hola mundo
□ Internet Los documentos HTML tienen:
□ La web
□ Componentes • Cuerpo <body> - contenido
□ Lenguajes
• Cabecera <head> - datos de la página
■ Diseño web
<html>
29/53
<head>
<title>Primer programa</title>
</head>
<body> html
<p>Hola mundo</p>
head body
</body>
</html> title p
Noviembre de 2010 CIFP Juan de Colonia

30. WEB: HTML Y XHTML.
HTML: Codificaciones (I)
□ Internet Es muy importante en la Web emplear
□ La web
□ Componentes correctamente las codificaciones
□ Lenguajes • Equipos de todo el mundo con distintos juegos de
■ Diseño web
caracteres
Opciones comunes:
30/53
• ASCII: 7 bits, americano
• ISO-8859-1: Estándar ISO, 8 bits, occidental
• UTF-8: Codificación Unicode a 8 bits, Universal
Hay que indicarlo en una cabecera de <head>
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii">
</head>
Noviembre de 2010 CIFP Juan de Colonia

31. WEB: HTML Y XHTML.
HTML: Codificaciones (II)
□ Internet Se usan referencias a entidades para representar
□ La web
□ Componentes los caracteres especiales en modo ASCII
□ Lenguajes • Referencias numéricas y con nombre.
■ Diseño web
Ej.: &aacute; – &Uuml; – &Ntilde; – &copy; – &ordf;
Ej.: &#225; – &#220; – &#209; – &#169; – &#170;
31/53 • Espacio de “no-separación”:
&nbsp;
Noviembre de 2010 CIFP Juan de Colonia

32. WEB: HTML Y XHTML.
Actividad III: Plantillas
Con el ejemplo «Hola mundo» y los DTD de distintas
versiones componer unas plantillas básicas,
validarlas y guardarlas para uso futuro.
Noviembre de 2010 CIFP Juan de Colonia

33. WEB: HTML Y XHTML.
Actividad IV: entidades
Buscar una buena tabla de entidades de caracteres
para la web y crear el marcador en el navegador
para tenerla a mano.
Noviembre de 2010 CIFP Juan de Colonia

34. WEB: HTML Y XHTML.
HTML: Formato básico
□ Internet Párrafos:
□ La web
□ Componentes • Parrafos, no anidables: <p>
□ Lenguajes
• Bloques versátiles, anidables: <div>
■ Diseño web
Encabezados/títulos:
34/53
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Saltos de línea:
• <br/>
Destacado/negrita:
• <strong>
• <b> (bold)
Énfasis/cursiva:
• <em>
• <i> (italics)
Noviembre de 2010 CIFP Juan de Colonia

35. WEB: HTML Y XHTML.
Direcciones web
□ Internet Formato universal, usos ampliables
□ La web
□ Componentes • Protocolo + nombre/sistema/IP + ruta + archivo
□ Lenguajes – Ej.: http://mi.ordenador.com/directorio/archivo.htm
■ Diseño web
URI, URN, URL
• URI: Uniform Resource Identifier
35/53
Identificadores de recursos en Internet
• URN: Uniform Resource Name
URI basados en un nombre para el recurso
• URL: Uniform Resource Locator
URI basados en la dirección donde se puede acceder
Noviembre de 2010 CIFP Juan de Colonia

36. WEB: HTML Y XHTML.
Nombres y direcciones IPv4
□ Internet Dirección IPv4: número de 4 bytes, en decimal
□ La web
□ Componentes
– 89.156.32.54
– No siempre 1 dirección = 1 equipo
□ Lenguajes
■ Diseño web
Asignados por redes: numeración organizada
– Una parte del número es común dentro de la misma red
36/53 • Delimitado por la «máscara»
– Bloque de unos y ceros: parte de red, parte de equipo
– Dos formatos equivalentes para expresarla
Formato 1: /255.255.128.0 (similar a IP)
Formato 2: /17 (CIDR, número de unos)
• Rangos reservados
– Loopback: 127/8 (autorreferencia, pruebas)
– Redes internas/privadas: 10/8, 172.16/12, 192.168/16
– Autoconfiguración: 169.254/16
Conversión a nombres: DNS
– Patrón: equipo.empresa.pais (Ej.: asterix.fi.upm.es)
Noviembre de 2010 CIFP Juan de Colonia

37. WEB: HTML Y XHTML.
HTML: Enlaces
□ Internet Con la marca <a ...>:
□ La web
□ Componentes • <a ...>texto del enlace</a>
□ Lenguajes
• El atributo href=”...” recoge el destino
■ Diseño web
– Direcciones absolutas para destinos externos
<a href=”http://miweb.es/bonita.htm”>
37/53
– Direcciones relativas para destinos internos
<a href=”../ayuda/opciones.htm”>
• Es útil la apertura del enlace en ventana aparte
<a target=”_blank”>
– ...pero es incorrecto en XHTML ☹
• Puede envolver una imagen en vez de texto
• Enlaces internos dentro de una página
– <a href=”#sección1”> → <a name=”sección1”>
– <a href=”#índice”> → <div id=”índice”>
Aplica diversas variantes de estilo (para CSS)
– No visitado / Visitado/ Activo, pulsado / Al pasar sobre él
Noviembre de 2010 CIFP Juan de Colonia

38. WEB: HTML Y XHTML.
HTML: Imágenes
□ Internet Clave del éxito de la web, con Mosaic
□ La web
□ Componentes Formatos de referencia:
□ Lenguajes
■ Diseño web • PNG: Dibujos, imágenes con colores uniformes
• JPEG: Fotografía, imágenes con colores difusos
38/53
• GIF: Animaciones, secuencias
Con la marca <img ...>:
• Marca independiente
• El atributo src=”...” recoge el destino
– Análogo a href=”...” en los enlaces <a>
– Habitualmente destinos internos
<img src=”imagenes/monigote.png” />
• Se debe dar el tamaño: width=”20” height=”50”
• Se debe dar un texto: alt=”mascota”
– Para etiquetas emergentes: title=”¡Bienvenidos!”
Noviembre de 2010 CIFP Juan de Colonia

39. WEB: HTML Y XHTML.
Website hosting
□ Internet • Sugerencia: el alojamiento externo permite delegar en
□ La web una empresa externa tareas de mantenimiento → $$
□ Componentes
□ Lenguajes
– Reducción de tráfico
– Reducción de ataques
■ Diseño web
– Mantenimiento del hardware
– Actualizaciones de software
39/53 – Almacenamiento redundante
• Se mantienen responsabilidades
– Integridad lógica del sistema
– Seguridad de los datos
• Valoración
– Precio, almacenamiento, tráfico admitido
– Oferta de aplicaciones: LAMP
– Transferencia de archivos: FTP o web
– Panel de control
– Oferta de subdominio / transferencia de dominio
– Publicidad permitida / obligatoria. Actividad mínima
– Otros servicios: correo...
Noviembre de 2010 CIFP Juan de Colonia

40. WEB: HTML Y XHTML.
Actividad V: publicación
Localizar servicios de hospedaje gratuito y colocar en
ellas ejemplos de páginas básicas con enlaces e
imágenes.
Evitar servidores que incluyan anuncios forzados,
porque esto suele introducir elementos que rompen
la validez de la página.
Verificar las páginas mediante su URI e incorporar los
enlaces propuestos o equivalentes para su
autoverificación.
Situar al comienzo de la página el nombre del autor y
enlaces a las páginas de dos compañeros, anterior y
posterior, configurando un anillo con toda la clase.
Noviembre de 2010 CIFP Juan de Colonia

41. WEB: HTML Y XHTML.
Revisión
● ¿Qué diferencia hay entre una página
en HTML y otra en XHTML?
● ¿Cuál es la diferencia entre los
modos estricto y transicional?
● En la web ¿cuándo usamos
direcciones relativas y cuándo URI
completos?
Noviembre de 2010 CIFP Juan de Colonia

42. WEB: HTML Y XHTML.
HTML: Tablas
□ Internet Estructura bidimensional, con filas y columnas,
□ La web
□ Componentes donde se dispone información de manera
□ Lenguajes organizada.
■ Diseño web
– 2 categorías: en filas y en columnas
– Fácil localización
– Ordenación/lectura por filas o por columnas
42/53
• Introducido en HTML 3.2
– Elemento esencial: sucedáneo para columnas
• Debemos evitar abuso y aplicar CSS
• Tabla → filas → celdas
tabla: Cuadro o catálogo de números de especie determinada, dispuestos en forma adecuada
tabla: Cuadro o catálogo de números de especie determinada, dispuestos en forma adecuada
para facilitar los cálculos. Tabla de multiplicar, de logaritmos, astronómica.
para facilitar los cálculos. Tabla de multiplicar, de logaritmos, astronómica.
table: a way of showing detailed pieces of information, especially facts or numbers, by
table: a way of showing detailed pieces of information, especially facts or numbers, by
arranging them in rows and lines across and down a page.
arranging them in rows and lines across and down a page.
row: a series of people or things arranged in a straight line.
row: a series of people or things arranged in a straight line.
column: a series of short lines of writing or numbers arranged one below the other on a page.
column: a series of short lines of writing or numbers arranged one below the other on a page.
Noviembre de 2010 CIFP Juan de Colonia

43. WEB: HTML Y XHTML.
HTML: Tablas básicas (I)
table
□ Internet Estructura básica:
□ La web
• Tabla: <table> tr
□ Componentes
□ Lenguajes
• Filas: <tr>
■ Diseño web th
• Celdas: td
– Celdas estándar: <td>
43/53 – Celdas de encabezamiento, destacadas: <th>
• No se establece el tamaño explícitamente
– Dimensionado automático, progresivo y según el contenido
– Posibilidad de tablas irregulares, no rectangulares
Combinación de celdas:
• Atributos modificadores para unir 2, 3... n celdas
– En horizontal colspan=””
– En vertical rowspan=””
• No hay control de consistencia
– ¡celdas múltiples se pueden solapar!
Noviembre de 2010 CIFP Juan de Colonia

44. WEB: HTML Y XHTML.
HTML: Tablas básicas (II)
□ Internet table
□ La web
□ Componentes A B
□ Lenguajes tr
1 A1 B1
■ Diseño web
2 A2 B2
th
td
44/53
<table>
<tr>
<th>&nbsp;</th><th>A</th><th>B</th>
</tr>
<tr><th>1</th><td>A1</td><td>B1</td></tr>
<tr><th>2</th><td>A2</td><td>B2</td></tr>
</table>
Noviembre de 2010 CIFP Juan de Colonia

45. WEB: HTML Y XHTML.
HTML: Tablas básicas (III)
□ Internet
□ La web Columnas
□ Componentes Filas A1 B1
□ Lenguajes
A2 B2
■ Diseño web <table>
<tr>
45/53 <th>&nbsp;</th>
<th colspan="2">Columnas</th>
</tr>
<tr>
<th rowspan="2">Filas</th>
<td>A1</td><td>B1</td>
</tr>
<tr><td>A2</td><td>B2</td></tr>
</table>
Noviembre de 2010 CIFP Juan de Colonia

46. WEB: HTML Y XHTML.
HTML: Tablas avanzadas
□ Internet • Leyenda (encabezamiento o pie): <caption>
□ La web
□ Componentes • Tablas compuestas: filas
□ Lenguajes – Grupos de filas con formato autónomo: <tbody>
■ Diseño web – Grupos de primeras filas: <thead>
– Grupos de últimas filas: <tfoot>
46/53
• Tablas compuestas: columnas
– En el nivel superior, antes, fuera de cualquier fila o grupo.
– Definición de columnas: <col>
table
– Grupos de columnas: <colgroup> caption
– Utilidad: tamaños y estilos
colgroup
col
• ¿Soporte en editores y navegadores?
thead
tfoot
tbody
tr tr tr
th td
Noviembre de 2010 CIFP Juan de Colonia

47. WEB: HTML Y XHTML.
Actividad VI: tablas
Crear y verificar un documento HTML 4.01 con
codificación de caracteres ASCII que incorpore la
tabla siguiente:
ASIR Vocales
Mayús minús
Planas A E I O U a e i o u
Negrita A E I O U a e i o u
Cursiva A E I O U a e i o u
Tildes Á É Í Ó Ú á é í ó ú
Para mostrar los bordes se puede emplear en
<table> el atributo border=”1”, aunque
evitaremos su uso en cuanto empecemos a trabajar
con hojas de estilo CSS.
Noviembre de 2010 CIFP Juan de Colonia

48. WEB: HTML Y XHTML.
HTML: Listas
□ Internet • Listas numeradas
□ La web – Ordered list: <ol>
□ Componentes
– Elemento, list item: <li>
□ Lenguajes
■ Diseño web • Listas genéricas, con viñetas
– Unordered list: <ul>
– Elemento, list item: <li>
48/53
ul
• Glosarios
– Definitions list:<dl>
– Nombre, definition term:<dt> li
– Descripción, definition description:<dd>
ol
dl
li
dt
dd
Noviembre de 2010 CIFP Juan de Colonia

49. WEB: HTML Y XHTML.
HTML: ...temas pendientes
□ Internet • Formato: hojas de estilo CSS
□ La web – UT 3
□ Componentes
□ Lenguajes • HTML con marcos (frames)
■ Diseño web – En desuso.
– Sustituidos por <div> + CSS
• Mapas de imágenes
49/53
– Imágenes con zonas asociadas a enlaces
• Formularios
– Esenciales en aplicaciones web
– Campos de texto, botones, casillas, listas de selección...
– Los valores recogidos se envían al servidor web
• Eventos y Javascript
– Se pueden escribir «programillas» que se ejecutan cuando
el usuario «actúa» de alguna manera, cuando se produce
un evento.
– atributos: onload, onmouseover, onkeypress...
Noviembre de 2010 CIFP Juan de Colonia

50. WEB: HTML Y XHTML.
Actividad VII: referencias sobre HTML
Buscar en el estándar de HTML la descripción del
elemento <base ...>.
-¿Cuál es el URI de la página?
-¿Para qué sirve?
-¿En qué contexto se debe situar?
-¿Qué atributo esencial se emplea?
-Escribir un ejemplo demostrando su uso.
Noviembre de 2010 CIFP Juan de Colonia

51. WEB: HTML Y XHTML.
Referencias
World Wide Web Consortium:
http://www.w3.org
W3C Recommendation (1999, W3C). HTML 4.01 Specification:
http://www.w3.org/TR/html401/
Albeza, Belén (2006). XHTML + CSS ¡de una maldita vez!
http://es.tldp.org/Tutoriales/doc-tutorial-xhtml-css/xhtml_tuto_beta.pdf
Bibliografía actualizada en delicious:
http://www.delicious.com/dhmartin/LM-ASIR
Noviembre de 2010 CIFP Juan de Colonia

52. WEB: HTML Y XHTML.
Licencia
Este material está disponible bajo una Licencia Creative Commons,
http://creativecommons.org/licenses/by-nc-sa/3.0/es/
Noviembre de 2010 CIFP Juan de Colonia

53. WEB: HTML Y XHTML.
¿Dudas o cuestiones?
Noviembre de 2010 CIFP Juan de Colonia