Documentos de Académico
Documentos de Profesional
Documentos de Cultura
HTML(5)/XHTML
Aplicaciones Web/Sistemas Web
Qu es HTML?
<html>
<head>
<title>Ttulodelapgina</title>
</head>
<body>
<h1>Ttulodeseccin</h1>
<p>Texto...</p>
<p>Texto<b>ennegrita</b></p>
</body>
</html>
HTML/XHTML
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
HTML/XHTML
Contenido
+
Formato
(HTML)
vs.
Contenido
(XHTML)
Formato
(CSS)
HTML/XHTML
Mayor extensibilidad
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
HTML/XHTML
HTML y XHTML
Versiones
HTML/XHTML
Ejercicio
HTML/XHTML
DOM
var elemento=document.getElementById("intro");
var cabecera=document.getElemnentByTag("title");
//...
HTML/XHTML
10
Mnimo
Un editor de texto
Por ejemplo, Notepad++: http://notepad-plus-plus.org/
Algn navegador
Para visualizar las pginas
HTML/XHTML
11
Recomendable
HTML/XHTML
12
Muchos plugins
Java EE
Git
HTML 5
JavaScript
Maven
etc.
13
14
15
16
Window Preferences
17
HTML/XHTML
18
Para imgenes
HTML/XHTML
19
Fichero inicial
index.html
index.xhtml
index.php
HTML/XHTML
20
Configuracin
Monitorizacin
Estadsticas de uso
HTML/XHTML
21
En un servidor particular
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
HTML/XHTML
23
Lenguajes de marcado
Ejemplos:
<oscuro>Estetextovaennegrita</oscuro>
Estapalabraes<importanteestilo="cursiva">fundamental</importante>
HTML/XHTML
24
Etiquetas
HTML/XHTML
25
Atributos
HTML/XHTML
26
Atributos bsicos
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
Cabecera
Cuerpo
<html>
<head>
<title>Ttulodelapgina</title>
</head>
<body>
<h1>Ttulodeseccin</h1>
<p>Texto...</p>
<p>Texto<b>ennegrita</b></p>
</body>
</html>
Resultado ->
Juan Pavn - UCM 2012-13
HTML/XHTML
28
Documento XHTML
<?xml version="1.0"encoding="iso88591"?>
<!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
<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
HTML/XHTML
31
Codificacin de caracteres
Caracteres especiales
<
>
&
"
(espacio en blanco)
'
HTML/XHTML
32
Codificacin de caracteres
ñ
Ñ
á
Á
é
É
í
Í
ó
Ó
ú
Ú
ü
Ü
HTML/XHTML
33
Carcter
Cdigo
%2F
%3A
%3D
"
%22
'
%60
(espacio)
%20
%3F
%40
&
%26
%5C
%7E
%7C
HTML/XHTML
34
Etiquetas de cabecera
<head>
<title>
<link />
Enlace a otros archivos (generalmente hojas de estilo)
<linkrel="stylesheet"type="text/css"href="/css/formato.css"/>
<base />
HTML/XHTML
35
Etiquetas de cabecera
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)
<metahttpequiv="expires"content="Sat,16Nov200216:05:00GMT">
Juan Pavn - UCM 2012-13
HTML/XHTML
36
Etiquetas de cabecera
<script>
<scripttype="text/javascript"
src="http://www.ejemplo.com/js/miscript.js"></script>
<noscript >
<scripttype="text/javascript">
//<![CDATA[
//CdigoJavaScript
//]]>
</script>
<noscript><p>EstapginarequiereelusodeJavaScript.
Porfavorcompruebelaconfiguracindesunavegador.</p></noscript>
HTML/XHTML
37
Etiquetas de cabecera
<style>
<style type="text/css">
P{fontfamily:Arial;fontsize:10pt;color:rgb(0,0,128);
textindent:15px;textalign:justify;marginleft:10px}
</style>
Juan Pavn - UCM 2012-13
HTML/XHTML
38
Texto
HTML/XHTML
39
<p>
<pre>
HTML/XHTML
40
<h1>Seccin 1</h1>
<h2>Seccin 1.1</h2>
<p>Textonormal.</p>
<h3>Seccin 1.1.1</h3>
<p>Textonormal.</p>
...
<address>
<address>Autor:JuanPavn(UCM)<br />
ltimamodificacin:10deenerode2013
</address>
Juan Pavn - UCM 2012-13
HTML/XHTML
41
Etiquetas en lnea
<br />
Espacio en blanco
Cuando se usa la etiqueta <pre> se mantienen los espacios en blanco
<hr />
HTML/XHTML
42
Etiquetas en lnea
<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>
HTML/XHTML
45
Etiquetas en lnea
<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
HTML/XHTML
47
<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>
HTML/XHTML
49
Estructura de la pgina
HTML/XHTML
50
Agrupacin de texto
<span>
Fichero .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>
HTML/XHTML
Hiperenlaces
<a>
#
/
:
=
"
' %60
%23
%2F
%3A
%3D
%22
(espacio en blanco)
?
@
&
\
~
%7E
HTML/XHTML
%20
%3F
%40
%26
%5C
52
Hiperenlaces
<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>
53
Imgenes
<img />
<p>Elbonitoescudodemiuniversidad:
<img src="http://www.ucm.es/media/images/ucm.png"
alt="UniversidadComplutensedeMadrid"
title="UniversidadComplutensedeMadrid"/></p>
Juan Pavn - UCM 2012-13
HTML/XHTML
54
Ejercicios
Ms ejemplos en:
http://librosweb.es/xhtml/capitulo_4/ejemplos_de_enlaces_habituales.html
HTML/XHTML
55
Listas
<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
HTML/XHTML
57
Tablas
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
NT (8)
10
SB (9)
NT (7)
Pie de
la tabla
<tfoot>
Fila
<tr>
Cabecera de fila
<th>
celda
<td>
HTML/XHTML
59
Tablas
<table>
<caption>
HTML/XHTML
60
Tablas sencillas
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)
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>
Juan Pavn - UCM 2012-13
HTML/XHTML
62
Tablas complejas
<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
HTML/XHTML
63
Ejercicios
Ejemplos:
http://www.mclibre.org/consultar/amaya/ejercicios/calendarios_1/calendarios_1_formateado.html
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
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
HTML/XHTML
66
Formularios
Atributos de <form>
HTML/XHTML
67
Formularios
<input />
HTML/XHTML
68
Formularios
Cuadro de texto
Nombre<br/>
<inputtype="text" name="nombre"value=""/>
Contraseas
Contrasea <br/>
<inputtype="password" name="contrasena"value=""/>
HTML/XHTML
69
Formularios
HTML/XHTML
70
Formularios
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
HTML/XHTML
73
Formularios
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
<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
<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
Ejemplo:
http://www.mclibre.org/consultar/amaya/ejercicios/encuesta_pc/encuesta_pc_formateado.html
HTML/XHTML
78
Objetos
height="alto" y width="ancho"
classid, codebase, codetype - Informacin especfica que depende del
tipo de objeto
HTML/XHTML
79
Objetos
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
HTML/XHTML
80
Objetos
<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
81
Objetos
HTML/XHTML
82
Cuestiones importantes:
HTML/XHTML
83
Cuestiones importantes:
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>
<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>
HTML/XHTML
85
Ejercicios
HTML/XHTML
86
HTML/XHTML
87
MathML
Versiones
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
http://www.mclibre.org/consultar/amaya/xhtml/mathml_ejemplo_segugra.xhtml
HTML/XHTML
88
SVG
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)
Ejemplos:
La Wikimedia Commons tiene muchas imgenes disponibles
HTML/XHTML
89
SVG
HTML/XHTML
90
Bibliografa
http://www.w3schools.com/
http://librosweb.es/
http://www.mclibre.org/consultar/amaya/index.html
HTML/XHTML
91