introducción al xhtml
Post on 11-Aug-2015
552 Views
Preview:
TRANSCRIPT
Diseño para la RedIntroducción al XHTML
Lic. en Diseño de Información Visual.Otoño 2009.
Universidad de las Américas Puebla.
Mtro. Omar Sosa Tzechttp://www.tzek-design.com/blog
<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><p>Mi nombre es Omar Sosa y esto es diseño para la red otoño 2009.</p>
</body></html>
<html><head>
<title>Esta es mi primera página web</title></head><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>
<title>Esta es mi primera página web</title></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>. </p>
</body></html>
<html><head>
<title>Esta es mi primera página web</title></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. </p><p><b><i>Saludos</i></b></p>
</body></html>
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p>
</body></html>
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p>
</body></html>
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
etiqueta (tag/markups)
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
una etiqueta par
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
una etiqueta sencilla
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
el encabezado
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
el cuerpo
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
encabezados (headings)
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
párrafos
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
ancla (anchor)
documento
¿tiéne marcos?
¿usa marcas de presentación? xhtml 1.0 framset
xhtml 1.0 strict ¿Todas las marcas de presentación están en una hoja de estilo?
xhtml 1.0 transitional xhtml 1.0 strict
síno
no sí
no sí
XHTML con ejemplos. Ann Navarro. Pretince Hall 2001.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head><title>Esta es mi primera página web</title>
</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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head><title>Esta es mi primera página web</title>
</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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</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 xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
xmlns
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang= "en"><head>
<title>Esta es mi primera página web</title></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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
xml:lang y lang
¿Cómo está guardado el xhtml como documento?
¿Qué caracteres deben emplearse?
Es decir, ¿cuál es su codificación?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Esta es mi primera página web</title>
</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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
Unicode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <title>Esta es mi primera página web</title>
</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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
Occidental - Europeo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <title>Esta es mi primera página web</title>
</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 <a href=”mailto:omar.sosa@gmail.com”>mi correo</a>. </p><p><b><i>Saludos</i></b></p><p>a<br/>d<br/>i<br/>o<br/>s</p>
</body></html>
Occidental - Europeo
* 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/
top related