21 HTML

Tecnologas Web para la presentacin HTML/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
HTML y XHTML
HTML: 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 en el cual se insertan etiquetas que permiten indicar algn tratamiento especial (formato, hiperenlace, ...) Basado en SGML (Standard Generalized Markup Language)
XHTML: versin basada en XML de HTML
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
Juan Pavn - UCM 2012-13
XHTML vs. HTML
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
XHTML vs. HTML
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
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 y XHTML5 estn en proceso de estandarizacin
Varias caractersticas ya se van implantando en los navegadores
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
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
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
9
HTML/XHTML
Recomendaciones sobre los ficheros
Una pgina Web involucra muchos ficheros
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
Para imgenes

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
10
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
11
De las pruebas a la implantacin del sitio Web
Las pruebas se realizan en un entorno de desarrollo local
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) Configuracin Monitorizacin Estadsticas de uso
La implantacin debe ser sencilla: subir los ficheros al servidor

Administracin del sitio Web

HTML/XHTML
12
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 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
En un servidor externo

13
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
14
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:
Este texto va en negrita Esta palabra es fundamental
<oscuro>Estetextovaennegrita</oscuro> Estapalabraes<importanteestilo="cursiva">fundamental</importante>
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
15
Etiquetas
Las etiquetas van emparejadas:

<etiqueta> texto </etiqueta> <h1>Introduccin</h1>
Algunas etiquetas pueden ir sin emparejar: <hr /> <metahttpequiv="ContentType"content="text/html;charset=iso 88591"/>
En HTML las etiquetas se pueden escribir en maysculas o minsculas, indistintamente En XHTML se tienen que escribir siempre en minsculas
HTML/XHTML
16
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
17
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
18
Documentos HTML
Todo documento HTML comienza por la etiqueta <HTML>
Y acaba con </HTML>
Todo documento HTML tiene dos partes: <html> <head> <title>Ttulodelapgina</title> </head> <body> <h1>Ttulodeseccin</h1> <p>Texto...</p> <p>Texto<b>ennegrita</b></p> </body> </html>
Cabecera
Cuerpo
Resultado ->
Juan Pavn - UCM 2012-13 HTML/XHTML
19
Documento XHTML
<?xml version="1.0"encoding="iso88591"?>
Opcional, declaracin XML que indica el juego de caracteres del documento 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
<!DOCTYPEhtml PUBLIC"//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<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>
El atributo xmlns especifica el espacio de nombres del documento
HTML/XHTML
20
Variedades XHTML
XHTML 1.0 define tres tipos de documentos:
Strict Recomendado por W3C, ya que elimina el mayor nmero posible de elementos y atributos relacionados con la presentacin Transitional Mantiene los elementos de presentacin Slo se recomienda para asegurar la compatibilidad con dispositivos que no son capaces de utilizar las hojas de estilo CSS Frameset Como Transitional, pero con la posibilidad de usar marcos (frames) Los frames no son recomendables por problemas de accesibilidad
XHTML 1.1 es una reformulacin de XHTML 1.0 Strict de acuerdo con criterios de modularizacin
En la prctica muy pocos cambios con respecto a XHTML 1.0
HTML/XHTML
21
Ejercicio: Instalar Aptana Studio 3

http://www.aptana.com/products/studio3
Editor gratuito para desarrollo de aplicaciones Web

HTML, XHTML, CSS JavaScript, Ajax, PHP, Ruby, Rails, Python
Basado en eclipse Instalacin

Como aplicacin particular Como plugin eclipse
Windows, Linux, Mac OS X 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
22
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
23
Codificacin de caracteres
Todos los caracteres se pueden especificar con su cdigo precedido del smbolo &
El juego de caracteres Unicode se puede consultar en http://www.unicode.org/charts/ < > & " ' – < > & " (espacio en blanco) '
Caracteres especiales

Lista de 256 caracteres especiales en HTML:

http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
HTML/XHTML
24
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
25
Codificacin de caracteres en los hiperenlaces

Carcter / : = " ' (espacio) ? @ & \ ~ |
Cdigo %2F %3A %3D %22 %60 %20 %3F %40 %26 %5C %7E %7C
HTML/XHTML
26
Etiquetas de cabecera
<head>

Delimita la cabecera del documento En la cabecera se describe informacin del documento (ttulo, metainformacin, scripts, estilos)
<title>

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
27
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="generator"content="WordPress 3.5"/> <metaname="robots"content="index,follow"/> <metaname="keywords"content="sistemasweb,html"/> <metaname="description"content="Cursosobrediseoweb"/>
Otro atributo suele ser http-equiv (para indicar informacin que el servidor enviara en la cabecera de una respuesta HTTP) <metahttpequiv="ContentType"content="text/html;charset=UTF8"/>
HTML/XHTML
28
<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>

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

30
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> <big> <small> <tt> <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>
HTML/XHTML
31
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 HTML se puede especificar la alineacin del texto: <p>Por defecto va alineado a la izquierda</p> <p align="center">Centrado</p> <p align="right">Alineado a la derecha</p> <p align="justify">Ajustado a ambos mrgenes: estrecha la ventana para poder comprobarlo.</p> 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
<pre>
32
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>

33
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
34
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
35
Etiquetas en lnea
Tipo de informacin
<abbr> Abreviatura <abbr title="etctera">etc.</abbr> <acronym> Abreviatura <acronym title="UniversidadComplutensedeMadrid">UCM</acronym> <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
36
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
37
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
38
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> <big> para etiquetar texto de mayor tamao <small> para etiquetar texto de menor tamao <tt> para etiquetar texto de fuente de espaciado fijo <sub> para identificar texto en subndice: H<sub>2</sub>O H2O <sup> para identificar texto en superndice: x<sup>n</sup> xn
HTML/XHTML
39
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
40
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
41
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
span.feroz { fontstyle:italic; textdecoration:underline; } span.rojo { color:red; }
Fichero .html (incluye al .css)

<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

42
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

43
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
44
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>ElbonitoescudodelaComplu: <img src="http://www.ucm.es/media/images/ucm.png" alt="UniversidadComplutensedeMadrid" title="UniversidadComplutensedeMadrid"/></p>

45
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
46
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
<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
Las listas se pueden anidar
47
Ejercicio
Escribir el cdigo para generar las siguientes listas anidadas:
HTML/XHTML
48
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
49
Tablas Componentes
Leyenda de la tabla <caption> Cabecera de la tabla <thead> Cuerpo de la tabla <tbody> Pie de la tabla <tfoot>
Calificaciones
Alumno Alvarez Gmez, Javier Gutirrez Rodrguez, Clara Rodrguez Hernndez, Pedro Prctica 8 8 8 8 10 6
Cabecera de columna <th> Final NT (8) SB (9) NT (7) Fila <tr>
Trabajo
Revisin de exmenes: martes 18 a las 12h
Cabecera de fila <th>
celda <td>
HTML/XHTML
50
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
51
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
52
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>
53
Tablas complejas
Pueden comenzar con una cabecera (opcional y como mucho una)
<thead> <tfoot> Se declara antes de los <tbody> <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
Pueden acabar con un pie (opcional y como mucho uno)
Tienen al menos un cuerpo

HTML/XHTML
54
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 y en
http://www.mclibre.org/consultar/amaya/ejercicios/tablas_1/tablas_1.html
http://librosweb.es/xhtml/capitulo_7/tablas_basicas.html
HTML/XHTML
55
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
56
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.
HTML/XHTML
57
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
58
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
59
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
60
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
61
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
62
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
63
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
64
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
65
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 select permite definir la opcin por defecto
HTML/XHTML
66
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
67
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
68
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)
Avanzado: Incluir un captcha para verificar que se trata de una persona real Esto requiere usar algn script para generar el captcha
Crear un formulario para entrega de prcticas en una asignatura
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
69
Objetos

Es una forma 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
70
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>
HTML/XHTML
71
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
72
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
73
Extendiendo XHTML con otros lenguajes
Otros lenguajes derivados de XML se pueden combinar bien con XHTML

MathML expresiones matemticas SVG grficos bidimensionales SMIL animacin
Los documentos que combinan XHTML con estos lenguajes se deben proporcionar al navegador como de tipo MIME application/xhtml+xml
Y el documento con extensin.xhtml
Los navegadores modernos suelen dar buen soporte
MS Internet Explorer algo menos
HTML/XHTML
74
MathML
Mathematical Markup Language
Lenguaje de marcas para la representacin de frmulas matemticas MathML 1.0 (1998) MathML 2.0 (2001) MathML 3.0 (2010)
Versiones

Para probar si un navegador interpreta bien MathML

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
75
SVG
Scalable Vector Graphics
Lenguaje de marcas para la representacin de grficos vectoriales bidimensionales (dibujos y texto) 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) Algo menos en Internet Explorer La Wikimedia Commons tiene muchas imgenes disponibles
Versiones actuales
Soportado cada vez mejor por todos los navegadores
Ejemplos:
HTML/XHTML
76
SVG
Utilizacin de grficos SVG

Como objeto externo (con extensin .svg) <object data="ejemplo.svg" type="image/svg+xml" height="80" width="80"> </object> Como objeto interno: las etiquetas SVG se incluyen en la pgina El tipo del documento tiene que ser entonces XHTML 1.1 + MathML 2.0 + SVG 1.1 y se debe declarar con el tipo MIME application/xhtml+xml Ejemplo:
http://www.mclibre.org/consultar/amaya/xhtml/svg_ejemplo_estrella.xhtml
HTML/XHTML
77
HTML 5
Estndar para 2014

http://www.w3schools.com/html/html5_intro.asp Los navegadores principales ya van incorporndolo Una sola etiqueta de documento: <!DOCTYPEhtml> Nuevos elementos: <article><command><figure><figcaption><footer><header> <hgroup> <nav><section><time><wbr> Audio: <audio>(mp3, ogg, wav) Vdeo: <video>(mp4, ogg, webm) Grficos 2D/3D
Con <canvas>, y el dibujo en el canvas se har con JavaScript: Juegos Con SVG (lenguaje XML para describir grficos 2D): Google Maps
Caractersticas

HTML Helpers Plug-ins que extienden la funcionalidad del navegador: flash, quicktime, etc. Con la etiqueta <object> Eliminados: <applet><frame><frameset><big><tt><center>
HTML/XHTML
78
HTML 5
Mejoras para el desarrollo de aplicaciones Web
Almacenamiento de datos local en el navegador Ms seguro y rpido que los cookies Persistente y por sesin Cach de aplicacin: facilita el uso de aplicaciones web sin conexin API para acceso a base de datos SQL Web workers Aplicaciones JavaScript que se ejecutan en background Gestin de eventos Una pgina web puede recibir actualizaciones del servidor API de geolocalizacin integrado Muchas mejoras en los forms: caractersticas, atributos, elementos
Integracin completa con CSS3
http://www.w3schools.com/css3/
HTML/XHTML
79
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
80

21 HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

21 HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Tecnologas Web para la presentacin HTML/XHTML

Aplicaciones Web/Sistemas Web

Juan Pavn Mestras

Material bajo licencia Creative Commons

HTML: Lenguaje con el que se definen pginas Web

XHTML: versin basada en XML de HTML

Juan Pavn - UCM 2012-13

XHTML vs. HTML

XHTML tiene reglas ms simples para definir la estructura de un documento

Juan Pavn - UCM 2012-13

XHTML vs. HTML

XHTML separa claramente contenido y presentacin

Se pueden tener varios estilos definidos para el mismo sitio web

Contenido + Formato (HTML)

Juan Pavn - UCM 2012-13

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

HTML5 y XHTML5 estn en proceso de estandarizacin

Varias caractersticas ya se van implantando en los navegadores

Juan Pavn - UCM 2012-13

Cul ser el mejor lenguaje de marcado para mviles?

Qu caractersticas debera tener? Qu opciones se estn barajando hoy da?

Juan Pavn - UCM 2012-13

Los objetos de un documento se organizan en una jerarqua (rbol): jerarqua DOM

var elemento=document.getElementById("intro"); var cabecera=document.getElemnentByTag("title"); //...

Juan Pavn - UCM 2012-13

Herramientas para crear una pgina Web

Juan Pavn - UCM 2012-13

Herramientas para crear una pgina Web

Juan Pavn - UCM 2012-13

Recomendaciones sobre los ficheros

Una pgina Web involucra muchos ficheros

Pudiera haber referencias absolutas a ficheros locales en vez de relativas

Juan Pavn - UCM 2012-13

index.html index.xhtml index.php

Juan Pavn - UCM 2012-13

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

Administracin del sitio Web

Juan Pavn - UCM 2012-13

Alojamiento del sitio Web (Web hosting)

Juan Pavn - UCM 2012-13

Juan Pavn - UCM 2012-13

La idea bsica es que un documento est formado por un conjunto de elementos

Los elementos vlidos en un documento XHTML estn especificadas en el fichero http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd

Juan Pavn - UCM 2012-13

Las etiquetas van emparejadas:

Algunas etiquetas pueden ir sin emparejar: <hr /> <metahttpequiv="ContentType"content="text/html;charset=iso 88591"/>

Juan Pavn - UCM 2012-13

Los atributos permiten aadir informacin adicional

Juan Pavn - UCM 2012-13

Se pueden asociar a cualquier etiqueta

Juan Pavn - UCM 2012-13

Todo documento HTML comienza por la etiqueta <HTML>

Y acaba con </HTML>

<!DOCTYPEhtml PUBLIC"//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

El atributo xmlns especifica el espacio de nombres del documento

Juan Pavn - UCM 2012-13

XHTML 1.0 define tres tipos de documentos:

En la prctica muy pocos cambios con respecto a XHTML 1.0

Juan Pavn - UCM 2012-13

Ejercicio: Instalar Aptana Studio 3

Editor gratuito para desarrollo de aplicaciones Web

HTML, XHTML, CSS JavaScript, Ajax, PHP, Ruby, Rails, Python