LM-UT2: HTML
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

LM-UT2: HTML

  • 1,156 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,156
On Slideshare
1,156
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
33
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Lenguajes de Marcas y SGIU.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 HTMLNoviembre 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 extranetNoviembre 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 socialNoviembre 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 webNoviembre 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íaNoviembre 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, tuentiNoviembre 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/53Noviembre 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 SeguridadNoviembre 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 BSDNoviembre 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 JavaNoviembre 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 ServerNoviembre 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, PDFNoviembre 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: AJAXNoviembre 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 2008Noviembre 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.01Noviembre 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 pNoviembre 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 accederNoviembre 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 élNoviembre 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 tdNoviembre 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 ddNoviembre 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-ASIRNoviembre 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