Introducción al XHTML

Diseño para la Red
Introducción al XHTML

Lic. en Diseño de Información Visual.
Otoño 2009.

Universidad de las Américas Puebla.

Mtro. Omar Sosa Tzec
http://www.tzek-design.com/blog

Primero hagamos un ejercicio en bloc de notas:

<html>

</html>

<html>
<body>
<h1>Hola Mundo</h1>
</body>
</html>

<html>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red
otoño 2009.</p>
</body>
</html>

<html>
<head>

</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>

</body>
</html>

<html>
<head>
<title>Esta es mi primera página web</title>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>

</body>
</html>

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. </p>

</body>
</html>

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta
porque tengo <i>presente</i> a mis amigos. </p>
<p><b><i>Saludos</i></b></p>

</body>
</html>

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
porque tengo <i>presente</i> a mis amigos. Escríbeme a <a
href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>

</body>
</html>

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
<p>a<br/>d<br/>i<br/>o<br/>s</p>
</body>
</html>

etiqueta (tag/markups)

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

una etiqueta par

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

una etiqueta sencilla

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

el encabezado

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

el cuerpo

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

encabezados (headings)

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

párrafos

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

ancla (anchor)

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
porque tengo <i>presente</i> a mis amigos. Escríbeme a
<a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
</body>
</html>

¿Cómo funciona en general un lenguaje
de marcado (markup language)?

¿Qué es XML?

<persona>
<nombre>fulanito</nombre>
<id>16041</id>
<carrera>diseño</carrera>
</persona>

¿Qué es un Document Type Definition
o DTD?

Tipos de DTD para XHTML:

Estricto (strict)
Transicional (transitional)
Para marcos (frameset)

XHTML con ejemplos.
Ann Navarro. documento
Pretince Hall 2001.

¿tiéne marcos?

no sí
¿usa marcas de
xhtml 1.0 framset
presentación?

no sí

xhtml 1.0 strict ¿Todas las marcas de presentación
están en una hoja de estilo?

no sí
xhtml 1.0 transitional xhtml 1.0 strict

estricto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

transicional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

para marcos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html>
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

xmlns

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

¿En qué lenguaje está escrito el html?

¿En inglés o español?

xml:lang y lang

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang= "en">
<head>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

¿Cómo está guardado el xhtml como
documento?

¿Qué caracteres deben emplearse?

Es decir, ¿cuál es su codificación?

Unicode


<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

Occidental - Europeo


<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1"/>
</head>
<body>
<h1>Hola Mundo</h1>
otoño 2009.</p>
</body>
</html>

Occidental - Europeo


<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Mi nombre es Omar Sosa y esto es diseño para la red otoño 2009.</p>
<p>Mi aplicación web 2.0 favorita es <b>facebook</b>. Me gusta porque
tengo <i>presente</i> a mis amigos. Escríbeme a
</body>
</html>

.swf
.jpg

.html .css

.js

petición
al servidor

http

RSS: Really Simple Sindication.

Una aplicación de XML.

* Recolectar feeds de diseño que nos ayuden en la materia y para tener
en general.

http://el50.com/2008/01/11/top-50-blogs-de-diseno-en-espanol/

http://nfgraphics.com/top-100-blogs-de-diseno-en-espanol/

http://alquimistas.evilnolo.com/

http://blog.duopixel.com/

http://www.udla-diseno.com/category/blogs/

http://psd.tutsplus.com/

http://css-tricks.com/

http://net.tutsplus.com/

http://www.disenorama.com/

http://veerle.duoh.com/

Introducción al XHTML

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (15)

Similar a Introducción al XHTML

Similar a Introducción al XHTML (20)

Más de Omar Sosa-Tzec

Más de Omar Sosa-Tzec (20)

Último

Último (20)

Introducción al XHTML