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


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


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



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



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.



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


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

http://www.youtube.com/watch?v=OwWbvdllHVE

WEB: HTML Y XHTML.


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


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;}


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


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.



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



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.



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



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



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


http://httpd.apache.org/


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



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.



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


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é?


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


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”



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



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=”...”)


http://validator.w3.org/

http://jigsaw.w3.org/css-validator


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">



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



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">



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


html

head body

title p


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>



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”:


WEB: HTML Y XHTML.


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.


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


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)



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



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)



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



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!”



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...


WEB: HTML Y XHTML.


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


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?


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


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.


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!


table

tr

thtd


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


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


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?


table

tr

th td

caption

colcolgroup

theadtfoot tbody

tr tr

WEB: HTML Y XHTML.


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 Á É Í Ó Ú á é í ó ú


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>


ol

lidl

dtdd

ul

li


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...


WEB: HTML Y XHTML.


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


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

http://www.w3.org/

http://www.w3.org/TR/html401/

http://es.tldp.org/Tutoriales/doc-tutorial-xhtml-css/xhtml_tuto_beta.pdf

http://www.delicious.com/dhmartin/LM-ASIR


WEB: HTML Y XHTML.

LicenciaLicencia

Este material está disponible bajo una Licencia Creative Commons,

http://creativecommons.org/licenses/by-nc-sa/3.0/es/

http://creativecommons.org/licenses/by-nc-sa/3.0/es/


WEB: HTML Y XHTML.

¿Dudas o cuestiones?¿Dudas o cuestiones?

lm-ut2: html

Education