1. Diseño para la Red
Introducción a XHTML y CSS
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
2. Como recordamos la idea de la que
partimos es la separación del contenido
de la presentación.
6. Un recurso básico para aprender herramientas para diseño y
desarrollo web:
http://www.w3schools.com/
* Para CSS es altamente recomendable repasar o aclarar dudas en:
http://www.w3schools.com/css/default.asp
18. Cuando las reglas de estilo están en un archivo
separado del archivo con el XHTML.
.html .css
19. También se puede meter el CSS dentro del
XHTML dentro de la etiqueta HEAD.
Reglas
CSS
.html
Por cuestiones de administración mejor separar
las cosas en archivos diferentes.
22. <html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<style>
</style>
</head>
<body>
.
.
.
</body>
</html>
23. <html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<style>
body {
font: Arial;
background-color: navy;
}
h1{
font-size:22px;
color:white;
}
</style>
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
24. <html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<style>
body {
font: Arial;
background-color: navy;
}
h1{
font-size:22px;
color:white;
}
</style>
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
25. <html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<style>
body {
font: Arial;
background-color: navy;
}
h1{
font-size:22px;
color:white;
}
</style>
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
27. Original.
<html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<style>
body {
font: Arial;
background-color: navy;
}
h1{
font-size:22px;
color:white;
}
</style>
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
28. Quitamos las reglas de estilo del HEAD.
<html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
29. Este es el archivo .html
<html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
30. En otro archivo colocamos las reglas.
body {
font: Arial;
background-color: navy;
}
h1{
font-size:22px;
color:white;
}
31. Este es el archivo .css
body {
font: Arial;
background-color: navy;
}
h1{
font-size:22px;
color:white;
}
32. Quitamos las reglas de estilo del HEAD.
<html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<link rel="stylesheet" type="text/css" href="miestilo.css" />
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
36. <html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<link rel="stylesheet" type="text/css" href="miestilo.css" />
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
38. Quitamos las reglas de estilo del HEAD.
<html>
<head>
<title>Título de una página web con ISO en occidental/europeo</title>
<link rel="stylesheet" type="text/css" href="carpeta02/miestilo.css" />
</head>
<body>
<h1>Hola Mundo!!! </h1>
</body>
</html>
