LM-UT2: HTML
-
Upload
david-martin -
Category
Education
-
view
883 -
download
0
description
Transcript of LM-UT2: HTML
Lenguajes de Marcas y SGILenguajes de Marcas y SGI
U.T. 2: Lenguajes de marcas para la web. HTML y XHTML.
C.F.G.S. “Administración de SistemasInformáticos en Red”
C.I.F.P. Juan de Colonia (Burgos)
David H. Martín Alonso
- Curso 2010/2011 -
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
ContenidosContenidos
Internet y la web
Estructura y composición
Lenguajes y estándares
HTML
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
3/53
¿Qué es Internet realmente?¿Qué es Internet realmente?Sistema de comunicación Universal × 2
• Ámbito universal• Propósito universal
Dualidad• Tecnología de red predominante: arquitectura TCP/IP
– Numeración IP• Impacto social
– Correo electrónico– La web
Internet, intranet y extranet
■ Internet□La web□Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
4/53
EvoluciónEvolución1970: La informática moderna
• Entornos gráficos de usuario• Ratón• Redes locales• Internet
1980: El PC1990: Expansión de la red
• La web y los navegadores• Acceso doméstico a Internet
2000: La red social
■ Internet□La web□Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
5/53
Evolución de InternetEvolución de Internet• Origen financiado con fondos militares.
– DARPA, ARPANET, 1970• Desarrollo: grupos de investigación y universidades.
– Años 1980– Desarrollo autónomo, artesanal.
• 1995: apertura al público, particulares– 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
■ Internet□La web□Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
6/53
¿Internet S.A.?¿Internet S.A.?Evolución de Internet: reto al modelo empresarial
• Chascarrillo: origen financiado con fondos militares.• Desarrollo: grupos de investigación y universidades.• Despreciado en el mundo comercial.
– Red no profesional, de aficionados.• 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.• Necesidad de un nuevo marco de regulación.
■ Internet□La web□Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
7/53
La webLa webIntercambio de documentos de hipertextoMosaic: Visualización in situ de imágenes
• Popularidad rápida e imprevista• Al margen de los intereses comerciales
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 webEstandarización: W3C (Consorcio WWW)
• Flexibilidad frente a anarquía
□Internet■La web□Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
8/53
Web 2.0Web 2.0Siglo XXI: cambio de paradigma
• Muchos pequeños cambios combinados.• Canal de distribución × Red de colaboración
La figura del lector se convierte en colaborador• La participación y la discusión provoca evolución.
[YouTube]
□Internet■La web□Componentes□Lenguajes□Diseño web
WEB: HTML Y XHTML.
Noviembre de 2010 CIFP Juan de Colonia
Actividad I: Web 2.0Actividad I: Web 2.0Los 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
WEB: HTML Y XHTML.
10/53
ArquitecturaArquitectura■ Introducción□Historia□Navegadores□HTML□CSS□Servidor web□Virtualización
Arquitectura/modelo cliente-servidor• Servidor en espera, distribuye páginas• Cliente, el navegador web iniciado por el usuario
Protocolo: HTTP• 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
WEB: HTML Y XHTML.
11/53
Aplicaciones en red: modelos (I)Aplicaciones en red: modelos (I)Archivos de datos compartidos en red.
• Programas locales, en el terminal del usuario.• Discos virtuales en red.• Gestionado por el sistema operativo.
– Control de acceso y optimizaciones mínimas.• Tráfico elevado, todo el proceso en el puesto de
usuario.• Fácil adaptación de programas DOS monousuario.
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
12/53
Aplicaciones en red: modelos (II)Aplicaciones en red: modelos (II)Aplicaciones cliente-servidor.
• Parejas de programas: servidor y sus clientes.– Protocolo común de comunicación.– Clientes varios, adaptados a cada sistema o uso.
• Servidor: en espera, presta servicios.– 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.
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
13/53
Aplicaciones en red: modelos (III)Aplicaciones en red: modelos (III)Terminales remotas / aplicaciones web
• Proceso remoto / visualización en los puestos– Terminales, consolas de texto– X-Windows, servidores de terminales– Aplicaciones y servicios web, con navegadores
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
14/53
Aplicaciones en red: modelos (IV)Aplicaciones en red: modelos (IV)Sistemas distribuidos
• Conjunto de servicios– Integración: múltiples equipos en localizaciones dispersas.– Transparencia: percepción unificada por los usuarios.– Mejora de rendimiento + mayor resistencia a fallos.
• 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.
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
15/53
NavegadoresNavegadoresPestañas
Extensiones
Complementos
Marcadores
Seguridad
• Precedente: Gopher
Mosaic → Netscape → Mozilla → Gecko• Firefox• Seamonkey• Galeon
Lynx → LinksOperaKonqueror → Safari → WebKit → EpiphanyMS Internet Explorer
– Internet Explorer 6 – 7 – 8 – 9
Google Chrome, Chromium
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
16/53
ServidoresServidores
Apache• Software libre, servidor popular multiplataforma• Licencia Apache
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
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
17/53
ApacheApacheApache 2.2.17 (a 19/10/2010)http://httpd.apache.org/Servidor web multiplataforma
• Incluido en las distribuciones GNU/Linux• Instalador para MS Windows
Software libre: open-source, licencia Apache 2Funcionalidades 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
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
18/53
Arquitectura LAMP/WAMP (I)Arquitectura LAMP/WAMP (I)La generación de contenido web dinámica implica disponer de varias aplicaciones:
• Servidor web, distribuye: Apache• Lenguaje de programación, construye: PHP• Base de datos: MySQL• Aplicaciones: wikis, blogs, portales, CMS, LMS...
En entornos profesionales se repite el modelo con aplicaciones comerciales:
• Tomcat + Java + Oracle• IIS + .NET + SQL Server
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
19/53
Arquitectura LAMP/WAMP (II)Arquitectura LAMP/WAMP (II)Instalación
• GNU/Linux: Incluidos• MS Windows: Paquetes integrados
– MoWes– AppServ– Xampp
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.
□Internet□La web■Componentes□Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
20/53
LenguajesLenguajesTransporte: HTTPContenido: documentos HTML (XHTML)Estética: hojas de estilo CSSProgramación: PHP, Java, Perl, PythonImágenes: GIF, JPEG, PNGComplementos: Flash, PDF
□Internet□La web□Componentes■Lenguajes□Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
RevisiónRevisió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
WEB: HTML Y XHTML.
22/53
Evolución del diseño webEvolución del diseño webHipertextoImágenes, imágenes animadas y tablasFormato y estilosProgramación del lado del cliente: JavascriptLenguajes de programación del lado del servidor
• PHP, Java
Portales y plataformasServicios webInteracción mejorada: AJAX
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
23/53
Diseño: herramientas/editoresDiseño: herramientas/editoresEditores comunes de texto con coloreado de sintaxis:
• Notepad++, jEdit, kate, gedit...• vim, emacs, mcedit...• ...
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”
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
24/53
HTML: HistoriaHTML: Historia• HTML 2.0
– Primera versión oficial diferenciada de SGML.– RFC1866, IETF, noviembre de 1995– HTML básico y soporte para integrar imágenes
• HTML 3.2– Primera versión promovida por el W3C, enero 1997– 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
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
25/53
HTML: ValidaciónHTML: ValidaciónLa web se basa en la flexibilidad de los navegadores ante diferencias/ampliaciones del lenguaje HTML
• ¿Cómo detectar errores en las páginas?• Necesarias herramientas de validación
– Aplicaciones independientesEj.: tidy
– Integradas en editores WYSiWYG (visuales)– Validación W3C en línea
Con la URI, el archivo o pegando el códigoHTML: 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=”...”)
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
26/53
HTML: Versiones y DTDHTML: Versiones y DTDLa primera línea de todo documento HTML debe identificar la versión de HTML utilizada
• Necesarios para la validación• Flexibilidad controlable sobre uso/abuso de estilos
– Modo estricto / modo transicional– 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">
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
27/53
HTML ↔ XHTMLHTML ↔ XHTMLXML exige incorporar algunas condiciones sobre la forma de los documentos:
• Todos los elementos deben ir cerrados.– Etiquetas de cierre obligatorias.– Cierre incorporado en etiquetas sencillas: <br />
• 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
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
28/53
¿XHTML 1.1?¿XHTML 1.1?XHTML 1.1: XHTML estricto
• XHTML 1.0 Strict + XHTML Modules<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
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">
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
29/53
HTML: Hola mundoHTML: Hola mundo
<html><head>
<title>Primer programa</title></head>
<body><p>Hola mundo</p>
</body></html>
Los documentos HTML tienen:• Cuerpo <body> - contenido• Cabecera <head> - datos de la página
□Internet□La web□Componentes□Lenguajes■Diseño web
html
head body
title p
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
30/53
HTML: Codificaciones (I)HTML: Codificaciones (I)Es muy importante en la Web emplear correctamente las codificaciones
• Equipos de todo el mundo con distintos juegos de caracteres
Opciones comunes:• 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>
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
31/53
HTML: Codificaciones (II)HTML: Codificaciones (II)Se usan referencias a entidades para representar los caracteres especiales en modo ASCII
• Referencias numéricas y con nombre.Ej.: á – Ü – Ñ – © – ªEj.: á – Ü – Ñ – © – ª
• Espacio de “no-separación”:
□Internet□La web□Componentes□Lenguajes■Diseño web
WEB: HTML Y XHTML.
Noviembre de 2010 CIFP Juan de Colonia
Con el ejemplo «Hola mundo» y los DTD de distintas
versiones componer unas plantillas básicas,
validarlas y guardarlas para uso futuro.
Actividad III: PlantillasActividad III: Plantillas
WEB: HTML Y XHTML.
Noviembre de 2010 CIFP Juan de Colonia
Buscar una buena tabla de entidades de caracteres
para la web y crear el marcador en el navegador
para tenerla a mano.
Actividad IV: entidadesActividad IV: entidades
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
34/53
HTML: Formato básicoHTML: Formato básicoPárrafos:
• Parrafos, no anidables: <p>• Bloques versátiles, anidables: <div>
Encabezados/títulos:• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Saltos de línea:• <br/>
Destacado/negrita:• <strong>• <b> (bold)
Énfasis/cursiva:• <em>• <i> (italics)
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
35/53
Direcciones webDirecciones webFormato universal, usos ampliables
• Protocolo + nombre/sistema/IP + ruta + archivo– Ej.: http://mi.ordenador.com/directorio/archivo.htm
URI, URN, URL• URI: Uniform Resource Identifier
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
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
36/53
Nombres y direcciones IPv4Nombres y direcciones IPv4Dirección IPv4: número de 4 bytes, en decimal
– 89.156.32.54– No siempre 1 dirección = 1 equipo
Asignados por redes: numeración organizada– Una parte del número es común dentro de la misma red
• 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)
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
37/53
HTML: EnlacesHTML: EnlacesCon la marca <a ...>:
• <a ...>texto del enlace</a>• El atributo href=”...” recoge el destino
– Direcciones absolutas para destinos externos<a href=”http://miweb.es/bonita.htm”>
– 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
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
38/53
HTML: ImágenesHTML: ImágenesClave del éxito de la web, con MosaicFormatos de referencia:
• PNG: Dibujos, imágenes con colores uniformes• JPEG: Fotografía, imágenes con colores difusos• 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!”
□Internet□La web□Componentes□Lenguajes■Diseño web
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
39/53
Website hostingWebsite hosting• Sugerencia: el alojamiento externo permite delegar en
una empresa externa tareas de mantenimiento → $$– Reducción de tráfico– Reducción de ataques– Mantenimiento del hardware– Actualizaciones de software– 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...
□Internet□La web□Componentes□Lenguajes■Diseño web
WEB: HTML Y XHTML.
Noviembre de 2010 CIFP Juan de Colonia
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.
Actividad V: publicaciónActividad V: publicación
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
RevisiónRevisió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
WEB: HTML Y XHTML.
42/53
HTML: TablasHTML: TablasEstructura bidimensional, con filas y columnas, donde se dispone información de manera organizada.
– 2 categorías: en filas y en columnas– Fácil localización– Ordenación/lectura por filas o por columnas
• Introducido en HTML 3.2– Elemento esencial: sucedáneo para columnas
• Debemos evitar abuso y aplicar CSS• Tabla → filas → celdas
□Internet□La web□Componentes□Lenguajes■Diseño web
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.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.
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.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.
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.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.
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
43/53
HTML: Tablas básicas (I)HTML: Tablas básicas (I)Estructura básica:
• Tabla: <table>• Filas: <tr>• Celdas:
– Celdas estándar: <td>– 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!
□Internet□La web□Componentes□Lenguajes■Diseño web
table
tr
thtd
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
44/53
<table><tr>
<th> </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>
HTML: Tablas básicas (II)HTML: Tablas básicas (II)□Internet□La web□Componentes□Lenguajes■Diseño web
table
tr
thtd
A B1 A1 B12 A2 B2
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
45/53
<table><tr>
<th> </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>
HTML: Tablas básicas (III)HTML: Tablas básicas (III)□Internet□La web□Componentes□Lenguajes■Diseño web
ColumnasFilas A1 B1
A2 B2
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
46/53
HTML: Tablas avanzadasHTML: Tablas avanzadas• Leyenda (encabezamiento o pie): <caption>• Tablas compuestas: filas
– Grupos de filas con formato autónomo: <tbody>– Grupos de primeras filas: <thead>– Grupos de últimas filas: <tfoot>
• Tablas compuestas: columnas– En el nivel superior, antes, fuera de cualquier fila o grupo.– Definición de columnas: <col>– Grupos de columnas: <colgroup>– Utilidad: tamaños y estilos
• ¿Soporte en editores y navegadores?
□Internet□La web□Componentes□Lenguajes■Diseño web
table
tr
th td
caption
colcolgroup
theadtfoot tbody
tr tr
WEB: HTML Y XHTML.
Noviembre de 2010 CIFP Juan de Colonia
Crear y verificar un documento HTML 4.01 con
codificación de caracteres ASCII que incorpore la
tabla siguiente:
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.
Actividad VI: tablasActividad VI: tablas
ASIR VocalesMayús minús
Planas A E I O U a e i o uNegrita A E I O U a e i o uCursiva A E I O U a e i o uTildes Á É Í Ó Ú á é í ó ú
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
48/53
HTML: ListasHTML: Listas• Listas numeradas
– Ordered list: <ol>– Elemento, list item: <li>
• Listas genéricas, con viñetas– Unordered list: <ul>– Elemento, list item: <li>
• Glosarios– Definitions list:<dl>– Nombre, definition term:<dt>– Descripción, definition description:<dd>
□Internet□La web□Componentes□Lenguajes■Diseño web
ol
lidl
dtdd
ul
li
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
49/53
HTML: ...temas pendientesHTML: ...temas pendientes• Formato: hojas de estilo CSS
– UT 3• HTML con marcos (frames)
– En desuso.– Sustituidos por <div> + CSS
• Mapas de imágenes– 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...
□Internet□La web□Componentes□Lenguajes■Diseño web
WEB: HTML Y XHTML.
Noviembre de 2010 CIFP Juan de Colonia
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.
Actividad VII: referencias sobre HTMLActividad VII: referencias sobre HTML
Noviembre de 2010 CIFP Juan de Colonia
WEB: HTML Y XHTML.
ReferenciasReferencias
World Wide Web Consortium:http://www.w3.orgW3C 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
WEB: HTML Y XHTML.
LicenciaLicencia
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
WEB: HTML Y XHTML.
¿Dudas o cuestiones?¿Dudas o cuestiones?