21 HTMLy

Tecnologas Web para la presentacin
HTML(5)/XHTML
Aplicaciones Web/Sistemas Web
Juan Pavn Mestras

Dep. Ingeniera del Software e Inteligencia Artificial
Facultad de Informtica
Universidad Complutense Madrid
Material bajo licencia Creative Commons
Qu es HTML?
HTML (HyperText Markup Language): Lenguaje con el que

se definen pginas Web
Permite describir el contenido de una pgina, incluyendo texto y otros

elementos (imgenes, videos, pequeas aplicaciones, etc.)
Una pgina HTML consta de texto y marcas especiales que permiten
indicar algn tratamiento especial (estructura, formato, hiperenlace,
etc.)
Las marcas se indican en formato <marca></marca>
<html>
<head>
<title>Ttulodelapgina</title>
</head>
<body>
<h1>Ttulodeseccin</h1>
<p>Texto...</p>
<p>Texto<b>ennegrita</b></p>
</body>
</html>
Juan Pavn - UCM 2012-13
HTML/XHTML
HTML vs. XHTML vs. HTML5
HTML: Lenguaje original
Basado en SGML (Standard Generalized Markup Language)

Es casi un lenguaje XML, pero tiene elementos no compatibles con
XML
Empieza a cobrar fuerza la idea de no mezclar marcado de estructura
(tabla, seccin, encabezado, etc.) con marcado de presentacin
(fuente, color, alineamiento, etc.)
HTML 4.01: ltima versin publicada de HTML
Dos modos:
Strict: no permite marcado de presentacin
Transitional: permite marcado de presentacin
(center, font, align, bgcolor, )
Framesets:
Primera incorporacin al estndar de la etiqueta <frameset>
(aunque ya se usaba comnmente en Netscape)
HTML/XHTML
XHTML: versin basada en XML de HTML 4.01
Compatibilidad con otros documentos XML

Combinar con otros documentos en lenguajes basados en XML,
XForms, MathML, SMIL, SVG, etc.)
Usar herramientas (XSLT)
XHTML es ms estricto que HTML
Exige que los documentos estn bien formados (requisito de XML)
Se pueden validar con http://validator.w3.org/ o con HTML Tidy
http://www.w3.org/People/Raggett/tidy/
Hay herramientas que permiten pasar de HTML a XHTML
Por ejemplo, el navegador Amaya (http://www.w3.org/Amaya/)
HTML/XHTML
XHTML separa claramente contenido y presentacin
XHTML Strict obliga a que la asignacin del formato de presentacin

se haga de manera separada mediante hojas de estilo CSS
Esta separacin tiene ventajas:
La gestin del estilo de todo el sitio web est localizada en un punto
concreto: las hojas de estilo
Es posible modificar todo el estilo del sitio (manteniendo su coherencia) sin
editar todas sus pginas
Se pueden tener varios estilos definidos para el mismo sitio web

Los usuarios de un sitio web pueden seleccionar el conjunto de colores y
estilos (tema) del sitio web
Soporte a la navegacin desde mltiples dispositivos, adaptando las

pginas a sus caractersticas (tamao de pantalla, etc.)
Contenido
+
Formato
(HTML)
vs.
Contenido
(XHTML)
Formato
(CSS)
HTML/XHTML
Al estar basado en XML, XHTML permite integrar fcilmente

otros lenguajes de la familia XML
Mayor extensibilidad
XHTML tiene reglas ms simples para definir la estructura de un

documento
Por ejemplo: todos los elementos tienen que estar bien anidados y
tener siempre la etiqueta de cierre
Menos recursos para procesar los documentos
Ventaja para hacer navegadores ms eficientes
HTML/XHTML
HTML5: Evolucin de XHTML y HTML 4.01
Es el estndar vigente a da de hoy

XHTML 2.0 ha sido abandonado
Desarrollado por el WHATWG, adoptado por el W3C
Participacin de Opera, Mozilla, Apple (a fecha de hoy)
Un paso ms
Construye sobre 'strict'; acaba con 'frameset' y 'transitional
"Estndar viviente": W3C publica, pero WHATWG no para de aadir
Aaden cosas y recomiendan no usar otras, pero quitan poco o nada
HTML5 vs. XHTML5
"Un estndar, dos formas de escribir
La recomendacin vigente es codificar en HTML5 (la transicin hacia
navegadores optimizados para XML puro no ha funcionado).
HTML/XHTML
HTML y XHTML
Versiones
HTML 4.01 (1999)

http://www.w3.org/TR/html401/
XHTML 1.0 (2000, revisado en 2002)
http://www.w3.org/TR/xhtml1/
XHTML 1.1 (2001)
XHTML Basic 1.1 - Second Edition (2010)
http://www.w3.org/TR/xhtml-basic/
XHTML 1.1 - Module-based XHTML - Second Edition (2010)

http://www.w3.org/TR/xhtml11/
HTML5 est en proceso de estandarizacin
Publicacin oficial en 2014

Casi todos los navegadores soportan casi todas sus caractersticas
Pero no todos: http://www.caniuse.com
HTML/XHTML
Ejercicio
Cul ser el mejor lenguaje de marcado para mviles?
Qu caractersticas debera tener?

Qu opciones se estn barajando hoy da?
HTML/XHTML
DOM
Definido por W3C

Modelo de Objetos del Documento (Document Object Model)
DOM define objetos y propiedades de los elementos HTML y XML, y

los mtodos para acceder a ellos
Representacin de documentos HTML y XML
API para consultar y manipular los documentos (contenido,
estructura, estilo)
Los objetos de un documento se organizan en una jerarqua

(rbol): jerarqua DOM
var elemento=document.getElementById("intro");
var cabecera=document.getElemnentByTag("title");
//...
HTML/XHTML
10
Herramientas para crear una pgina Web
Mnimo
Un editor de texto
Por ejemplo, Notepad++: http://notepad-plus-plus.org/
Algn navegador
Para visualizar las pginas
HTML/XHTML
11
Herramientas para crear una pgina Web
Recomendable
Editor de pginas Web

Amaya: editor de referencia del W3C http://www.w3.org/Amaya/
Gratuitos: Netbeans, HTML-Kit, Kompozer, Nvu
Comerciales: Adobe Dreamweaver, Microsoft Expression Web
Navegadores Web (varias versiones, varios SOs)
Chrome, Firefox, Internet Explorer, Safari, Opera
Tienen buenas herramientas para ayuda a desarrolladores
Considerar navegadores en mviles (iOS, Android)

Editores grficos y de imgenes
GIMP, Adobe Photoshop
Herramienta de desarrollo para cdigo de scripts o del servidor
Eclipse, Netbeans, Aptana Studio 3
Servidor Web
El que se vaya a utilizar
Se puede usar Apache sobre Windows para desarrollo pero es
recomendable sobre Linux para implantacin por mejor seguridad
HTML/XHTML
12
Eclipse IDE for Java EE Developers
Entorno de desarrollo de software: http://www.eclipse.org/
Descargar la versin Eclipse IDE for Java EE Developers
Windows, Linux, Mac OS X
Muchos plugins
Java EE
Git
HTML 5
JavaScript
Maven
etc.
Desarrollo de pginas web con eclipse
13
Creacin de pginas web estticas

(1) Crear un proyecto
File New Project

Seleccionar Web Static Web Project
Indicar un nombre
Al crear el proyecto web eclipse solicita cambiar la perspectiva
14
Creacin de pginas web estticas

(2) Crear una pgina HTML
En WebContent seleccionar New HTML File

Seleccionar Web Static Web Project
Indicar un nombre (por ejemplo, index.html)
A continuacin seleccionar la plantilla New HTML File (5)
15
Varias opciones de editor
16
Plantillas de pginas HTML5
Window Preferences
Abrir Web XML HTML Files items
17
Ejercicio: Instalar Eclipse IDE for Java EE

http://www.eclipse.org
Una vez instalado, probar a crear una pgina XHTML que

visualice el tpico "Hola Mundo"
Validar la pgina en http://validator.w3.org/
HTML/XHTML
18
Recomendaciones sobre los ficheros
Una pgina Web involucra muchos ficheros
Para imgenes
Estructurar adecuadamente los ficheros en directorios

En el raz, index.html, index.xhtml o index.php
/img
/res
etc.
Nombrar los ficheros sin caracteres extraos, ni espacios, etc. para
mayor compatibilidad entre sistemas operativos (Windows, Unix)
Ser consistente en el uso de la extensin de los ficheros
.html o .xhtml
Utilizar formatos estndar (PNG o JPEG) mejor que propietarios (GIF)
Comprobar que se adecan al tamao de la pantalla
Comprobar que su tamao es moderado
En general, comprobar que la pgina se ve correctamente con

todos sus componentes remotamente
Pudiera haber referencias absolutas a ficheros locales en vez de

relativas
HTML/XHTML
19
Fichero inicial
La configuracin del servidor permite determinar el fichero que

se enviar cuando se recibe una peticin genrica (del tipo
http://www.dominio.com)
index.html
index.xhtml
index.php
HTML/XHTML
20
De las pruebas a la implantacin del sitio Web
Las pruebas se realizan en un entorno de desarrollo local
La implantacin debe ser sencilla: subir los ficheros al servidor
Herramientas como DreamWeaver proporcionan un anlisis bastante

exhaustivo del cdigo
Tambin se puede validar la correccin del documento en
http://validator.w3.org/
Firefox tiene el complemento HTML Validator
https://addons.mozilla.org/es/firefox/addon/html-validator/
Requiere previamente la configuracin del servidor
Subir contenidos nuevos/modificados
Normalmente la herramienta de desarrollo automatiza este proceso
Se suele utilizar una conexin ftp (segura preferiblemente)
Administracin del sitio Web
Configuracin
Monitorizacin
Estadsticas de uso
HTML/XHTML
21
Alojamiento del sitio Web (Web hosting)
En un servidor particular
Requiere su instalacin, configuracin y mantenimiento

Total flexibilidad
Tiene que estar siempre disponible en internet
Tanto el ordenador como la conexin (p.ej., ADSL)
Requiere contratar un dominio
Hay varios proveedores: OVH,
Gestionar la IP dinmica: lo suele ofrecer el mismo gestor del
dominio
En un servidor externo
De pago
Gratuitos (suelen llevar asociados publicidad)
Bsico
Con PHP y base de datos
Con WordPress u otros gestores de contenidos
Blogs
En la nube (cloud hosting)
Utiliza numerosos servidores en lugar de slo uno
HTML/XHTML
22
Ejercicio
Seleccionar y comentar en el campus virtual las mejores ofertas

para montar un sitio Web
Definir criterios para una seleccin adecuada

Fiabilidad
Facilidad de uso
Herramientas disponibles
Lenguajes soportados por el servidor (PHP, J2EE, etc.)
Orientacin (webs personales, profesionales, empresariales)
Precio
Para la entrega de las prcticas habr que montarlas en un sitio

y pasar la URL correspondiente al profesor
Decidir el servidor donde se instalarn las prcticas que sea accesible

a travs de internet
HTML/XHTML
23
Lenguajes de marcado
La idea bsica es que un documento est formado por un

conjunto de elementos
El tipo de elemento se identifica mediante marcas o etiquetas (tags)

Con cada etiqueta se pueden asociar varios atributos
As se puede especificar caractersticas de formato, de tipo de
informacin, etc. que pueda ser procesada por un programa (por
ejemplo, por un navegador)
Ejemplos:
<oscuro>Estetextovaennegrita</oscuro>
Este texto va en negrita
Estapalabraes<importanteestilo="cursiva">fundamental</importante>
Esta palabra es fundamental
En XML, los elementos (etiquetas, atributos) de un tipo de

documentos se especifican en ficheros DTD (Document Type
Definition)
Los elementos vlidos en un documento XHTML estn especificadas en

el fichero http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd
HTML/XHTML
24
Etiquetas
Las etiquetas van emparejadas:

<etiqueta> texto </etiqueta>
<h1>Introduccin</h1>
Algunas etiquetas pueden ir sin emparejar:
<hr />
<metahttpequiv="ContentType"
content="text/html;charset=iso88591"/>
HTML permite que las etiquetas sin emparejar no lleven cierre (/)
<hr>
En HTML las etiquetas se pueden escribir en maysculas o

minsculas, indistintamente
En XHTML se tienen que escribir siempre en minsculas
HTML/XHTML
25
Atributos
Un elemento puede tener una etiqueta con atributos, separados

por espacios, y que se especifican como pares atributo="valor"
<etiqueta atributo="valor"> texto </etiqueta>
En XHTML el valor siempre tiene que ir entre comillas
(en HTML no es obligatorio)
Los atributos permiten aadir informacin adicional

Necesaria
Por ejemplo, un hiper-enlace:
<ahref="http://www.ucm.es/">UniversidadComplutenseMadrid</a>
Opcional
Por ejemplo, formato:
<palign="center">Centrado</p>
HTML/XHTML
26
Atributos bsicos
Se pueden asociar a cualquier etiqueta
id = "texto"
Asigna un identificador nico al elemento dentro de la pgina
Evitar el atributo name por estar obsoleto a partir de XHTML 1.0
class = "texto"
Asocia una clase CSS que define un conjunto de estilos de formato
para el elemento
style = "texto"
Establece de forma directa los estilos CSS del elemento
title = "texto"
Asigna un ttulo a un elemento
Es til para mejorar la accesibilidad ya que los navegadores lo
muestran cuando el usuario pasa el ratn por encima del elemento
HTML/XHTML
27
Documentos HTML
Todo documento HTML comienza por la etiqueta <HTML>
Y acaba con </HTML>
Todo documento HTML tiene dos partes:
Cabecera
Cuerpo
<html>
<head>
<title>Ttulodelapgina</title>
</head>
<body>
<h1>Ttulodeseccin</h1>
<p>Texto...</p>
<p>Texto<b>ennegrita</b></p>
</body>
</html>
Resultado ->
HTML/XHTML
28
Opcional, declaracin XML

que indica el juego de
caracteres del documento
Documento XHTML
<?xml version="1.0"encoding="iso88591"?>
<!DOCTYPEhtml PUBLIC"//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
Tipo de documento y URL

de la DTD (definicin de
tipo de documento) que
especifica la versin del
lenguaje de etiquetas
utilizado en el documento
<html xmlns="http://www.w3.org/1999/xhtml">
El atributo xmlns especifica el
espacio de nombres del documento
<head>
<metahttpequiv="ContentType"content="text/html;charset=iso88591"/>
<title>Ttulodeldocumento</title>
<metaname="keywords"contents="ejemploxhtml,xhtml mnimo"/>
</head>
Las etiquetas <meta /> proporcionan
informacin sobre el documento a los
<body>
programas que analicen la pgina
<p>EjemplodedocumentoXHTML</p>
</body>
</html>
HTML/XHTML
29
Documento HTML5
Declaracin que indica que
el documento es HTML5
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=iso88591"/>
<title>Ttulodeldocumento</title>
</head>
<body>
<p>EjemplodedocumentoHTML5</p>
</body>
</html>
HTML/XHTML
30
Comentarios
Texto que ignora el navegador

<! textodelcomentario(unaomslneas) >
Los comentarios pueden estar insertados en cualquier lugar de la

pgina web
Normalmente se usan para:
Marcar el comienzo y el final de las secciones de las pginas

<! Iniciodelasnoticias>
<divid="noticias">...</div>
<! Findelasnoticias>
Incluir notas para otros diseadores

<! Estosepuedemejorar>
Incluir explicaciones sobre el cdigo de la pgina

<! Scriptparaidentificarlaspreferenciasdelusuario>
HTML/XHTML
31
Codificacin de caracteres
Todos los caracteres se pueden especificar con su cdigo

precedido del smbolo &
Caracteres especiales
El juego de caracteres Unicode se puede consultar en

http://www.unicode.org/charts/
<
>
&
"

'
–
<
>
&
"
(espacio en blanco)
'
Lista de 256 caracteres especiales en HTML:

http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
HTML/XHTML
32
Codificacin de caracteres
Acentos y letras especiales:
Lo mejor es declarar el uso de caracteres UTF-8 para que se vean

bien los acentos y letras como la
Hoy da la mayora de los navegadores interpretan bien UTF-8
En ocasiones, sin embargo, algunas herramientas no lo interpreten
bien, y convierten el texto a ISO-8859 y habra problemas
Para evitar problemas es recomendable usar codificacin:
€
ñ
Ñ
á
Á
é
É
í
Í
ó
Ó
ú
Ú
ü
Ü
HTML/XHTML
33
Codificacin de caracteres en los hiperenlaces
Carcter
Cdigo
%2F
%3A
%3D
"
%22
'
%60
(espacio)
%20
%3F
%40
&
%26
%5C
%7E
%7C
HTML/XHTML
34
Etiquetas de cabecera
<head>
<title>
Delimita la cabecera del documento

En la cabecera se describe informacin del documento (ttulo, metainformacin, scripts, estilos)
Indica el ttulo del documento

Es obligatoria y tiene que aparecer una y solo una vez en el documento
El navegador lo visualiza en la barra de ttulo de su ventana
<link />
Enlace a otros archivos (generalmente hojas de estilo)
<linkrel="stylesheet"type="text/css"href="/css/formato.css"/>
<base />
Indica una URI que sirve de referencia para direcciones relativas
HTML/XHTML
35
Metadatos
<meta />
Metainformacin sobre el documento (informacin procesable
automticamente por programas que analicen la pgina)
Normalmente se usan los atributos name (para definir un tipo de
metadato) y content (para definir el valor)
Algunos habituales:
<metaname="author"content="JuanPavn"/>
<metaname="robots"content="index,follow"/>
<metaname="keywords"content="sistemasweb,html"/>
<metaname="description"content="Cursosobrediseoweb"/>
El atributo http-equiv sirve para indicar informacin sobre cmo
interaccionar el navegador con el servidor
Nmero de segundos para refrescar la pgina y cual recargar
<metahttpequiv="refresh"content="20;URL=./indice.htm"/>
Fecha (formato GMT) en que expirar la pgina (y deja de ser vlida
en el cach)
Si se pone 0, el navegador tendr que recargarla cada vez que se visite
<metahttpequiv="expires"content="Sat,16Nov200216:05:00GMT">
HTML/XHTML
36
<script>
Permite incluir cdigo de script

Aunque por defecto se toma JavaScript, conviene especificarlo
Puede referirse a un fichero externo
<scripttype="text/javascript"
src="http://www.ejemplo.com/js/miscript.js"></script>
<noscript >
Indica un mensaje a mostrar en navegadores que no pueden procesar

<script>
<scripttype="text/javascript">
//<![CDATA[
//CdigoJavaScript
//]]>
</script>
<noscript><p>EstapginarequiereelusodeJavaScript.
Porfavorcompruebelaconfiguracindesunavegador.</p></noscript>
HTML/XHTML
37
<style>
Permite definir propiedades que se aplicarn a lo largo del documento

Generalmente se indica la hoja de estilo que se va a aplicar
O propiedades del documento:
Fuente del texto: font-family: fuente (Arial, Times, Verdana, etc.)
Tamao del texto (en puntos pt-): font-size: 10pt, 12pt, ...
Color del texto: color: rgb(r,v,a) o #RRVVAA
r,v,a: cantidad de rojo, verde y azul, 0..255 cada uno
RR,VV,AA: en hexadecimal, 00..FF cada uno
Ajuste del texto: text-align: ajuste (left, right, center o justify)

Indentado de la primera lnea: text-indent: espacio
Margen izquierdo: margin-left: espacio
Margen derecho: margin-right: espacio
<style type="text/css">
P{fontfamily:Arial;fontsize:10pt;color:rgb(0,0,128);
textindent:15px;textalign:justify;marginleft:10px}
</style>
HTML/XHTML
38
Texto
El texto de un documento debe estar contenido por alguna de las

etiquetas de una de las tres categoras siguientes:
Etiquetas de bloque: no necesitan estar contenidas dentro de

ninguna etiqueta (salvo <body> y <html>)
<title>
<p> <pre> <h1> <h2> <h3> <h4> <h5> <h6> <address>
Etiquetas en-lnea: se aplican a una parte de texto dentro de un
bloque
Salto de lnea <br />
Tipo de informacin <abbr> <cite> <code> <em> <kbd> <strong>
Elemento carcter <b> <i> <small> <sub> <sup>
Etiquetas de contenedores de texto: sirven para estructurar el
texto y pueden contener en su interior etiquetas de bloque
Bloque de cita: <blockquote>
Divisin <div>, <article>, <header>, <section>, <aside>, <nav>,
<footer>
HTML/XHTML
39
Etiquetas de bloque Prrafos
<p>
Contiene el texto de un prrafo

El texto del prrafo se muestra con el formato por defecto del
navegador
El navegador no muestra los espacios en blanco ni los saltos de lnea
del cdigo fuente
Entre prrafos se pone una lnea en blanco (y solo una)
Si un prrafo <p> no contiene nada, no se muestra (salvo que la
hoja de estilo incluya bordes o mrgenes)
En XHTML el estilo del prrafo (alineacin, tipo de letra, etc.) se debe
declarar en los ficheros de estilo
En HTML se permite en la propia etiqueta, pero no es aconsejable
<palign="center">Centrado</p>
<palign="right">Alineadoaladerecha</p>
<pre>
Texto preformateado: igual que <p> pero se tienen en cuenta

espacios en blanco y lneas en blanco
Se usa un tipo de letra de ancho fijo
HTML/XHTML
40
Etiquetas de bloque Secciones
<h1> <h2> <h3> <h4> <h5> <h6>
Encabezado (de nivel 1 a 6)
<h1>Seccin 1</h1>
<h2>Seccin 1.1</h2>
<p>Textonormal.</p>
<h3>Seccin 1.1.1</h3>
<p>Textonormal.</p>
...
<address>
Informacin de contacto del autor de la pgina
<address>Autor:JuanPavn(UCM)<br />
ltimamodificacin:10deenerode2013
</address>
HTML/XHTML
41
Etiquetas en lnea
<br />

Salto de lnea (sin dejar una en blanco entre medias)
Espacio en blanco
Cuando se usa la etiqueta <pre> se mantienen los espacios en blanco
<hr />
Lnea horizontal (horizontal rule)

Se usa cada vez menos ya que con CSS se pueden crear mejor los
bordes
HTML/XHTML
42
Etiquetas en lnea
Importancia del texto
<em>
Para resaltar una porcin de texto dndole nfasis (aparecer en
cursiva)
Ms recomendable que <i>
<strong>
Mayor nfasis que con <em> (aparecer en negrita)
Ms recomendable que <b>
HTML/XHTML
43
Etiquetas en lnea
Tipo de informaci
<abbr>
Abreviatura
<abbr title="etctera">etc.</abbr>
<abbr title="UniversidadComplutensedeMadrid">UCM</abbr>
<cite>
Para incluir una referencia o cita (aparecer en cursiva)
<p>Comodiceelrefrn,
<cite>Alaterceravalavencida</cite>.</p>
<dfn>
Definicin de un trmino (aparecer en cursiva)
HTML/XHTML
44
Etiquetas en lnea
Tipo de informacin
<code>
Parecido a <pre> (pero <code> es un elemento de lnea y <pre>
un elemento de bloque)
Fragmento de cdigo de programa (aparecer en letra monospace)
<code>main(){printf ("Hola,mundo");}</code>
<samp>salida producida por un programa</samp>
<kbd>texto a introducir por el usuario</kbd>
HTML/XHTML
45
Etiquetas en lnea
Para indicar edicin del texto
<del>
Para mostrar que se elimina un texto (aparecer tachado)
<ins>
Para mostrar que se ha insertado un texto (aparecer subrayado)
<p>Lanotafinales<del>suspenso</del>
<ins datetime="20130625">aprobado</ins>.</p>
La nota final es suspenso aprobado.
HTML/XHTML
46
Etiquetas en lnea
Elemento carcter
Estas etiquetas estn en su mayora desaconsejadas, ya que pueden

conseguirse sus efectos utilizando las propiedades correspondientes
de las hojas de estilo
<b> para etiquetar texto en negrita: Textoen<b>negrita</b>
<i> para etiquetar texto en itlica: Textoen<i>itlica</i>
<small> para etiquetar texto de menor tamao
<sub> para identificar texto en subndice: H<sub>2</sub>O H2O
<sup> para identificar texto en superndice: x<sup>n</sup> xn
Estas etiquetas existan en HTML, pero han sido eliminadas de HTML5.

<big> para etiquetar texto de mayor tamao
<tt> para etiquetar texto de fuente de espaciado fijo
HTML/XHTML
47
Etiquetas de contenedores de texto
<blockquote>
Para incluir una cita larga, que puede contener varios prrafos u otras
etiquetas
Se suele mostrar el texto dentro de esta etiqueta con mrgenes a
izquierda y derecha
Lo mejor es definir el formato deseado en la hoja de estilo
Se puede indicar el origen de la cita con el atributo cite
<p>Elcandidatoalapresidenciafuelocuazensudiscurso:</p>
<blockquote cite="http://www.buenasnoticias.org/entrevista12.html">
<p>Prometoquevoyarespetarlosserviciossociales,naturalmente.
Mientequieninfundaalgunasospechaalrespecto.</p>
<p>Ybla bla bla...</p>
</blockquote>
HTML/XHTML
48
Estructura de la pgina
<div>
Divisin: mecanismo ms importante para agrupar diversos

elementos de bloque (prrafos, encabezados, listas, tablas, divisiones,
etc.)
El formato hay que definirlo en una hoja de estilo
Una divisin no puede insertarse dentro de una etiqueta en-lnea
(<strong>,<em>, etc.) o de un bloque de texto (prrafo <p>,
encabezado <h1> ... <h6>, direccin <address>, pre-formateado
<pre>, lista, etc)
Pero s puede insertarse dentro de una tabla, de un bloque de cita
<blockquote> o de otra divisin <div>
Con CSS se puede luego definir la posicin de los distintos

elementos
Ver captulo de CSS
HTML/XHTML
49
Estructura de la pgina
Estructuras semnticas (slo HTML5)
Etiquetas similares a <div> pero con significados ms especficos:

<header>
<nav>
<section>
<article>
<aside>
<footer>
<details>
Con CSS se puede luego definir la posicin de los distintos

elementos de forma semntica
Ver captulo de CSS
HTML/XHTML
50
Agrupacin de texto
<span>
Se usa para dar formato con la hoja de estilo a un grupo de

elementos en lnea seguidos dentro de un mismo bloque (por
ejemplo, varias palabras seguidas en un prrafo)
Se suele asociar a clases definidas en un fichero de estilos (.css)
Fichero .css
Fichero .html (incluye al .css)
span.feroz {
fontstyle:italic;
textdecoration:underline;
}
span.rojo {
color:red;
}
<p>Andabasola
<span class="rojo">Caperucita
Roja</span>
yseencontr
<span class="feroz">allobo
feroz</span></p>
Andaba sola Caperucita Roja y se encontr al lobo feroz

51
HTML/XHTML
Hiperenlaces
<a>
Hiperenlace o hipervnculo (hyperlink)

<a href="URL">texto asociado al enlace</a>
El texto asociado al enlace aparece destacado
El URL puede constar de
Protocolo (http://)
Servidor (www.ucm.es)
Ruta (/info/cursos)
Consulta (?curso=web)
Seccin (#segunda)
http://www.ucm.es/ info/cursos?curso=web#segunda
En las URL pueden usarse caracteres especiales codificados:
#
/
:
=
"
' %60
%23
%2F
%3A
%3D
%22
(espacio en blanco)
?
@
&
\
~
%7E
HTML/XHTML
%20
%3F
%40
%26
%5C
52
Hiperenlaces
La referencia puede ser:
A una pgina de otro sitio web: http://www.ucm.es

A otra pgina del mismo sitio web
Recomendable que sea una ruta relativa al documento actual:
<ahref="../img/foto.jpg">Mifoto</a>
Mejor que una ruta absoluta:
<ahref="c:/web/img/foto.jpg">Mifoto</a>
A un marcador definido en la misma pgina
En algn sitio se tiene que haber definido un marcador:
Con el atributo name en una etiqueta a (anchor):
<aname="marcador">Nota</a>
O con el atributo id:
<h2id="marcador">Nota</h2>
Que luego se puede enlazar:
<ahref="#marcador">Irallugarmarcado</a>
<ahref="../documento.html#marcador">...</a>
<ahref="http://www.abc.es/documento.html#marcador">...</a>
Para que el enlace se abra en otra ventana: target="_blank"

HTML/XHTML
53
Imgenes
<img />
Inserta una imagen de mapa de bits (de algn archivo aparte)

JPEG (Joint Photographic Experts Group): muy buena compresin
PNG (Portable Network Graphics): comprensin sin prdida de
calidad
GIF (Graphics Interchange Format): imgenes animadas, pero
menos calidad
Atributos
src: camino absoluto o relativo a la imagen desde la pgina web
alt: texto que debe mostrarse si la imagen no est disponible
title: (opcional) texto que se muestra en forma de "tip" (cuadrito
amarillo que aparece cuando se sita el ratn encima de la imagen)
width y height: (opcionales) anchura y altura de la imagen
Es conveniente usar estos atributos porque permite al navegador reservar
espacio para la imagen mientras se carga
<p>Elbonitoescudodemiuniversidad:
<img src="http://www.ucm.es/media/images/ucm.png"
alt="UniversidadComplutensedeMadrid"
title="UniversidadComplutensedeMadrid"/></p>
HTML/XHTML
54
Ejercicios
Prueba varios tipos de enlaces en una pgina web

Para enviar un mensaje de correo electrnico
<ahref="mailto:sugerencias@papelera.coms">Buzndesugerencias</a>
Explora cmo se puede hacer para que el mensaje vaya con un
asunto (subject) concreto
Tambin cmo se podra hacer que el email empezara con un texto
de ejemplo
Cmo se hara para poner la direccin de correo como una imagen en
vez de como texto (y evitar as sucumbir al spam)
Para ir al principio de una pgina
<ahref="/">Inicio</a>
Cmo se puede hacer para poner un enlace que permita bajar un
fichero mediante ftp
Ms ejemplos en:
http://librosweb.es/xhtml/capitulo_4/ejemplos_de_enlaces_habituales.html
HTML/XHTML
55
Listas
Tres tipos de listas:
Listas ordenadas (<ol> ... </ol>)

Listas no ordenadas (<ul> ... </ul>)
<li>...</li>delimitan cada elemento de la lista
Listas de definicin (<dl> ... </dl>)
<dt>...</dt> delimitan los trminos
<dd>...</dd> delimitan las definiciones
Las listas se pueden anidar

<ol>
<li>Primerelemento </li>
<li>Segundoelemento </li>
<ul>
<li>Elemento delista desordenada anidada</li>
</ul>
<li>Definiciones:</li>
<dl>
<dt>Trmino</dt>
<dd>Definicin deltrmino 1</dd>
</dl>
</ol>
HTML/XHTML
56
Ejercicio
Escribir el cdigo para generar las siguientes listas anidadas:
HTML/XHTML
57
Tablas
Permiten presentar informacin tabular, en filas y columnas, con

cabeceras
Cada elemento de la tabla puede ser simple o a su vez ser otra
agrupacin de filas y de columnas, cabeceras y pies de tabla,
subdivisiones, cabeceras mltiples y otros elementos complejos
Esto ha dado lugar a que a veces se usan para estructurar la pgina,

lo cual no es en absoluto recomendable
HTML/XHTML
58
Tablas Componentes
Leyenda de la tabla
<caption>
Cabecera
de la tabla
<thead>
Cuerpo de
la tabla
<tbody>
Cabecera de columna
<th>
Calificaciones
Alumno
Prctica
Trabajo
Final
Alvarez Gmez, Javier
NT (8)
Gutirrez Rodrguez, Clara
10
SB (9)
Rodrguez Hernndez, Pedro
NT (7)
Pie de
la tabla
<tfoot>
Fila
<tr>
Revisin de exmenes: martes 18 a las 12h
Cabecera de fila
<th>
celda
<td>
HTML/XHTML
59
Tablas
<table>
Define una tabla

Atributos
border en pxeles
width anchura de la tabla en pxeles o en porcentaje del espacio
horizontal del elemento padre
cellspacing espacio entre el borde de la celda y su contenido
cellpadding espacio entre celdas o entre celda y borde de tabla
summary aporta informacin sobre el contenido de la tabla (para
dispositivos que no la pueden visualizar, por ejemplo)
<caption>
Leyenda de la tabla: texto opcional que se muestra fuera de la tabla

(por defecto, arriba)
Se suele poner a continuacin de <table>
No puede incluir prrafos ni otros elementos de bloque, aunque s
etiquetas en lnea (<strong>, <em>, etc.)
HTML/XHTML
60
Tablas sencillas
Una tabla sencilla se define con
La etiqueta <table>
A continuacin se definen las filas, con <tr> (table row)
Y para cada fila, los elementos con <td> (table data cell)
Algunas celdas se usan como cabeceras de fila o columna: <th>
(table header)
Aunque se pueden utilizar en cualquier celda
Se muestran resaltadas (normalmente, en negrita y centradas en
horizontal)
Se pueden agrupar celdas
En una fila con el atributo colspan

En una columna con el atributo rowspan
HTML/XHTML
61
Tablas sencillas
<tableborder="1"width="30%">
<caption>Fusindefilasycolumnas</caption>
<tr>
<th colspan=3>Nmeros</th>
</tr>
<tr>
<th>Nombre</th>
<th>Valor</th>
<th>Idioma</th>
</tr>
<tr>
<td>Uno</td>
<td>1</td>
<td rowspan="2">Espaol</td>
</tr>
<tr>
<td>Dos</td>
<td>2</td>
</tr>
</table>
HTML/XHTML
62
Tablas complejas
Pueden comenzar con una cabecera (opcional y como mucho

una)
Pueden acabar con un pie (opcional y como mucho uno)
<thead>
<tfoot>
Se declara antes de los <tbody>
Tienen al menos un cuerpo
<tbody>
Agrupa filas
Se pueden agrupar columnas:
<col /> para asignar los mismos atributos a varias columnas
<colgroup> para agrupar de forma estructural varias columnas
El atributo span indica el nmero de columnas
HTML/XHTML
63
Ejercicios
Crear un calendario con una tabla
Ejemplos:
http://www.mclibre.org/consultar/amaya/ejercicios/calendarios_1/calendarios_1_formateado.html
Crear tablas como las que aparecen en
http://www.mclibre.org/consultar/amaya/ejercicios/tablas_1/tablas_1.html
y en
http://librosweb.es/xhtml/capitulo_7/tablas_basicas.html
HTML/XHTML
64
Formularios
<form>
Conjunto de controles que permiten al usuario interactuar
Generalmente para introducir datos y enviarlos al servidor web

El navegador enva nicamente los datos de los controles contenidos
en el formulario
En una misma pgina puede haber varios formularios que enven
datos al mismo o a diferentes agentes
Ejemplo:
<form action="http://www.miweb.com/procesaform.php"method="post">
Escribetunombre:
<inputtype="text"name="nombre"value=""/>
<br/>
<inputtype="submit"value="Enviar"/>
</form>
HTML/XHTML
65
Formularios
Dentro de un formulario puede haber:
Cualquier elemento tpico de una pgina web

Prrafos, imgenes, divisiones, listas, tablas, etc.
Controles de formularios
<input />
<button>
<select>
<optgroup>
<option>
<textarea>
Estructura de formularios
<fieldset>
<legend>
Informacin para accesibilidad
<label> permite mejorar la accesibilidad de los controles
Controles avanzados (slo HTML5)
<datalist>, <keygen>, <output>
HTML/XHTML
66
Formularios
Atributos de <form>
action="URL": aplicacin del servidor que procesar los datos

remitidos (por ejemplo, un script de PHP)
method: mtodo HTTP para enviar los datos al servidor
GET: como aadido a la direccin indicada en el atributo action
Limitado a 500 bytes
Los datos enviados se aaden al final de la URL de la pgina y por tanto se
ven en la barra del navegador
Se suele usar cuando se enva informacin que no modifica el servidor (por
ejemplo, trminos para una bsqueda)
Si no se especifica, los navegadores suelen hacer GET
POST: en forma separada
Puede enviar ms informacin

Permite enviar ficheros adjuntos
Los datos enviados no se ven en la barra del navegador
Se suele usar cuando se enva informacin que puede modificar el servidor
enctype: Tipo de codificacin al enviar el formulario al servidor

"application/x-www-form-urlencoded" o "multipart/form-data"
Slo se indica cuando se adjuntan archivos
HTML/XHTML
67
Formularios
<input />
type = "text | password | checkbox | radio | submit | reset | file |

hidden | image | button" - Indica el tipo de control que se incluye en
el formulario
name = "texto" - Nombre del control (para que el servidor pueda
procesar el formulario)
value = "texto" - Valor inicial del control
size - Tamao inicial del control (en pxeles, salvo para campos de
texto y de password que se refiere al nmero de caracteres)
maxlength = "numero" - Mximo tamao de texto y de password
checked = "checked" Opcin preseleccionada para los controles
checkbox y radiobutton
disabled = "disabled" - El control aparece deshabilitado y su valor no
se enva al servidor junto con el resto de datos
readonly = "readonly" - El contenido del control no se puede modificar
src = "url" - Para el control que permite crear botones con imgenes,
indica la URL de la imagen que se emplea como botn de formulario
alt = "texto" - Descripcin del control
HTML/XHTML
68
Formularios
Cuadro de texto
Nombre<br/>
<inputtype="text" name="nombre"value=""/>
Se enviar al servidor cuando se pulse un botn de enviar

El nombre asignado en name tiene que concordar con el que se use
en la aplicacin en el servidor
No se deben utilizar caracteres problemticos en programacin
(espacios en blanco, acentos y caracteres como o )
value permite establecer un valor inicial en el cuadro de texto
Contraseas
Contrasea <br/>
<inputtype="password" name="contrasena"value=""/>
Igual que el cuadro de texto por el valor introducido no se ve
HTML/XHTML
69
Formularios
Cuadro de texto de varias lneas

Nombre<br/>
<textarea name="nombre"rows="4"cols="50">
Contenidoinicialdelcuadrodetexto
</textarea>
filas: nmero de filas visibles (sale una barra de desplazamiento si se

hay ms)
columnas: anchura en caracteres
HTML/XHTML
70
Formularios
Botn de envo de formulario

<inputtype="submit" name="enviar"value="Enviar"/>
El navegador se encarga de enviar automticamente los datos cuando

el usuario pincha el botn
Botn de reseteo de formulario

<inputtype="reset" name="borrar"value="Borrarformulario"/>
El navegador borra toda la informacin introducida y muestra el

formulario en su estado original
HTML/XHTML
71
Formulario de email
<h3>Envanostussugerenciasporemail</h3>
<form action="MAILTO:sugerencias@tehacemoscaso.com"
method="post"enctype="text/plain">
Nombre:<br>
<inputtype="text"name="name"value="tunombre"><br>
Email:<br>
<inputtype="text"name="mail"value="tuemail"><br>
Sugerencia:<br>
<inputtype="text"name="comment"value="Tussugerencias"size="50"><br><br>
<inputtype="submit"value="Enviar">
<inputtype="reset"value="Borrar">
</form>
HTML/XHTML
72
Formularios
Botones en general: <button>

<button type="submit">Enviar</button>
<button type="reset">Borrar formulario</button>
<button type="button">Botn</button>
El navegador se encarga de enviar automticamente los datos cuando

el usuario pincha el botn
HTML/XHTML
73
Formularios
Casillas de verificacin (checkbox)

Lenguajes deprogramación:<br/>
<inputname="java"type="checkbox" value="on"/>Java
<inputname="cplusplus"type="checkbox"value="on"/>C++
<inputname="csharp"type="checkbox"value="on"/>C#
<inputname="otros"type="checkbox"value="on"/>Otros
value indica el tipo de casilla: on/off, yes/no, true/false
Radiobutton
Sexo<br/>
<inputtype="radio" name="sexo"value="hombre"checked="checked"/>
Hombre
<inputtype="radio"name="sexo"value="mujer"/>Mujer
HTML/XHTML
74
Formularios
Listas de seleccin
<formaction="">
<select name="lenguajes">
<optionvalue="c">C</option>
<optionvalue="cplusplus">C++</option>
<optionvalue="java"selected>Java</option>
<optionvalue="php">PHP</option>
<optionvalue="python">Python</option>
</select>
</form>
Atributos de option:
value determina el valor que se enva al servidor
selected permite definir la opcin por defecto
HTML/XHTML
75
Formularios
Incluir un fichero
El atributo enctype en la etiqueta <form> del formulario tiene que ser

multipart/form-data
<form name="fichero"action="procesa_fichero.php"method="post"
enctype="multipart/form-data">
Fichero:<inputtype="file"name="archivo"/>
<inputtype="submit"value="Enviar">
</form>
HTML/XHTML
76
Formularios
Agrupacin de elementos
Permite ver mejor las partes de un formulario agrupando elementos

relacionados
<legend> es el ttulo que se visualiza con el grupo
<form action="">
<fieldset>
<legend>Informacinpersonal:</legend>
Nombre:<inputtype="text"size="50"><br>
Email:<inputtype="text"size="50"><br>
Ciudad:<inputtype="text"size="20">
</fieldset>
</form>
HTML/XHTML
77
Ejercicios de formularios
Crear un formulario para registrar un nuevo cliente en un sitio

web, solicitando datos personales necesarios as como la
creacin de una clave de acceso (password)
Crear un formulario para entrega de prcticas en una asignatura
Avanzado: Incluir un captcha para verificar que se trata de una

persona real
Esto requiere usar algn script para generar el captcha
Investiga cmo se puede comprobar el tipo de fichero
Crea un formulario para realizar una encuesta
Ejemplo:
http://www.mclibre.org/consultar/amaya/ejercicios/encuesta_pc/encuesta_pc_formateado.html
HTML/XHTML
78
Objetos
Es una forma genrica de incluir elementos que son

interpretados por algn plugin
<object>
Atributos:
data="URL" - Los datos que utiliza el objeto
type="tipo-mime" - Tipo de contenido de los datos
El navegador decidir el plugin o accin que corresponda en funcin
del tipo
<object data="pelicula.mpeg"type="application/mpeg"/>
height="alto" y width="ancho"
classid, codebase, codetype - Informacin especfica que depende del
tipo de objeto
HTML/XHTML
79
Objetos
Recursos que podemos aadir mediante <object>
Imgenes
Aunque es preferible usar <img>
Vdeos
Archivos de sonido
Applets de Java
En HTML se usaba la etiqueta <applet>, que desaparece en HTML5
Archivos PDF
Controles ActiveX
Si el navegador no sabe abrir el contenido, solicitar al usuario

que descargue un plugin para ejecutar.
HTML/XHTML
80
Objetos
Se pueden proporcionar alternativas para un objeto
<object title="Pelculainteresante"
classid="http://www.miweb.com/peli.py">
<! Formatoalternativoenformadevdeo>
<object data="pelicula.mpeg"type="application/mpeg">
<! OtroformatoalternativomedianteunaimagenGIF>
<object data="pelicula.gif"type="image/gif">
<! Sielnavegadornosoportaningnformato,mostraruntexto>
Aqudeberahabersevistounapelculainteresante.
</object>
</object>
</object>
Cualquier texto que no sea una etiqueta se mostrar si el

navegador no es capaz de reproducir el contenido.
HTML/XHTML
81
Objetos
Para incluir vdeos en formato Flash

<object data="video.swf"type="application/xshockwaveflash">
</object>
Incluir un video de YouTube

<p>AaronSwartzkeynote "HowwestoppedSOPA"</p>
<objectwidth="640"height="360"
type="application/xshockwaveflash"
data="http://www.youtube.com/v/Fgh2dFngFsg">
<param name="movie"value="http://www.youtube.com/v/Fgh2dFngFsg"/>
<param name="wmode"value="transparent"/>
</object>
HTML/XHTML
82
Vdeos o sonidos en HTML5
Para incluir vdeos en HTML5

<videowidth="320"height="240"controls>
<source src="movie.mp4"type="video/mp4">
<source src="movie.ogg"type="video/ogg">
Tunavegadornopuedemostrarelvdeo.
</video>
Para incluir sonidos en HTML5

<audiocontrols>
<source src="horse.ogg"type="audio/ogg">
<source src="horse.mp3"type="audio/mpeg">
Tunavegadornopuedereproducirelsonido.
</audio>
Cuestiones importantes:
El navegador reproducir el primer vdeo compatible

Si no puede reproducir ninguno, mostrar el texto que no est
incluido en ninguna etiqueta
HTML/XHTML
83
Cuestiones importantes:
El navegador reproducir el primer vdeo/sonido compatible

Si no puede reproducir ninguno, mostrar el texto
No todos los navegadores soportan los mismos
Chrome
Sonido: MP3, WAV, OGG
Video: H.264+AAC, VP8+Vorbis, OGG
Firefox
Sonido: WAV, OGG (MP3 slo en Windows)
Video: VP8+Vorbis, OGG (H.264 slo en Windows)
Internet Explorer
Sonido: MP3
Internet Explorer y Firefox son mutuamente
Video: H.264+AAC
excluyentes, por lo que siempre ser
necesario ofrecer ms de una alternativa.
Safari
Sonido: MP3
Video: H.264+AAC
HTML/XHTML
84
<track>
Para incluir archivos de texto en vdeos o sonidos

Subttulos, metadatos, descripciones, anotaciones, etc.
<videowidth="320"height="240"controls>
<source src="forrest_gump.mp4"type="video/mp4">
<source src="forrest_gump.ogg"type="video/ogg">
<track src="subtitles_en.vtt"kind="subtitles"srclang="en"
label="English">
<track src="subtitles_no.vtt"kind="subtitles"srclang="no"
label="Norwegian">
</video>
Slo es compatible con Internet Explorer, Chrome y Opera.
HTML/XHTML
85
Ejercicios
Definir una pgina web con la propuesta de proyecto para este

curso
Publicarla y mandar la URL correspondiente al profesor a travs del

campus virtual
HTML/XHTML
86
Extendiendo XHTML con otros lenguajes
Otros lenguajes derivados de XML se pueden combinar bien con

XHTML
Los documentos que combinan XHTML con estos lenguajes se

deben proporcionar al navegador como de tipo MIME
application/xhtml+xml
MathML expresiones matemticas

SVG grficos bidimensionales
SMIL animacin
Y el documento con extensin.xhtml
Los navegadores modernos suelen dar buen soporte
MS Internet Explorer algo menos
HTML/XHTML
87
MathML
Mathematical Markup Language
Versiones
MathML 1.0 (1998)

MathML 2.0 (2001)
MathML 3.0 (2010)
Para probar si un navegador interpreta bien MathML
Lenguaje de marcas para la representacin de frmulas matemticas
https://www.eyeasme.com/Joe/MathML/MathML_browser_test
Internet Explorer, por ejemplo, no es capaz de trabajar con MathML
Una solucin es enviarle las frmulas como imgenes
Ejemplo: Resolucin de ecuaciones de segundo grado:
http://www.mclibre.org/consultar/amaya/xhtml/mathml_ejemplo_segugra.xhtml
HTML/XHTML
88
SVG
Scalable Vector Graphics

Lenguaje de marcas para la representacin de grficos vectoriales
bidimensionales (dibujos y texto)
Versiones actuales
Mobile SVG Profiles (2003)
Define SVG Tiny, para telfonos mviles, y SVG Basic, para PDAs
SVG Tiny 1.2 (2008)
SVG 1.1 (2 edicin) (2011)
Soportado cada vez mejor por todos los navegadores

Algo menos en Internet Explorer
Ejemplos:
La Wikimedia Commons tiene muchas imgenes disponibles
HTML/XHTML
89
SVG
Utilizacin de grficos SVG
Como objeto externo (con extensin .svg)

<object
data="ejemplo.svg"
type="image/svg+xml"
height="80"
width="80">
</object>
HTML5: Anidando a partir de una etiqueta SVG
<body>
<h1>Prueba deSVG</h1>
<svg width="100"height="100">
<circlecx="50"cy="50"r="40"stroke="green"strokewidth="4"
fill="yellow"/>
</svg>
</body>
HTML/XHTML
90
Bibliografa
http://www.w3schools.com/
Tutoriales de tecnologas para desarrollo de aplicaciones web

Tiene ejemplos que se pueden cambiar y probar directamente
Tutoriales muy comprensibles en espaol:
http://librosweb.es/
http://www.mclibre.org/consultar/amaya/index.html
Comentar bibliografa, ejemplos y sugerencias sobre la

presentacin en el campus virtual
HTML/XHTML
91

21 HTMLy

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

21 HTMLy

Cargado por

Copyright:

Formatos disponibles

Tecnologas Web para la presentacin

Juan Pavn Mestras

Material bajo licencia Creative Commons

HTML (HyperText Markup Language): Lenguaje con el que

Permite describir el contenido de una pgina, incluyendo texto y otros

Juan Pavn - UCM 2012-13

HTML vs. XHTML vs. HTML5

HTML: Lenguaje original

Basado en SGML (Standard Generalized Markup Language)

HTML 4.01: ltima versin publicada de HTML

Juan Pavn - UCM 2012-13

HTML vs. XHTML vs. HTML5

XHTML: versin basada en XML de HTML 4.01

Compatibilidad con otros documentos XML

Juan Pavn - UCM 2012-13

HTML vs. XHTML vs. HTML5

XHTML separa claramente contenido y presentacin

XHTML Strict obliga a que la asignacin del formato de presentacin

Se pueden tener varios estilos definidos para el mismo sitio web

Soporte a la navegacin desde mltiples dispositivos, adaptando las

Juan Pavn - UCM 2012-13

HTML vs. XHTML vs. HTML5

Al estar basado en XML, XHTML permite integrar fcilmente

XHTML tiene reglas ms simples para definir la estructura de un

Juan Pavn - UCM 2012-13

HTML vs. XHTML vs. HTML5

HTML5: Evolucin de XHTML y HTML 4.01

Es el estndar vigente a da de hoy

Juan Pavn - UCM 2012-13

HTML 4.01 (1999)

XHTML 1.1 - Module-based XHTML - Second Edition (2010)

HTML5 est en proceso de estandarizacin

Publicacin oficial en 2014

Juan Pavn - UCM 2012-13

Cul ser el mejor lenguaje de marcado para mviles?

Qu caractersticas debera tener?

Juan Pavn - UCM 2012-13

Definido por W3C

DOM define objetos y propiedades de los elementos HTML y XML, y

Los objetos de un documento se organizan en una jerarqua

Juan Pavn - UCM 2012-13

Herramientas para crear una pgina Web

Juan Pavn - UCM 2012-13

Herramientas para crear una pgina Web

Editor de pginas Web

Considerar navegadores en mviles (iOS, Android)

Juan Pavn - UCM 2012-13

Eclipse IDE for Java EE Developers

Entorno de desarrollo de software: http://www.eclipse.org/

Descargar la versin Eclipse IDE for Java EE Developers

Windows, Linux, Mac OS X

Juan Pavn - UCM 2013-14

Desarrollo de pginas web con eclipse

Creacin de pginas web estticas

File New Project

Juan Pavn - UCM 2013-14

Desarrollo de pginas web con eclipse

Creacin de pginas web estticas

En WebContent seleccionar New HTML File

Juan Pavn - UCM 2013-14

Desarrollo de pginas web con eclipse

Varias opciones de editor

Juan Pavn - UCM 2013-14