Front End : Xhtml + Css
Tecnologías web
Lab. Diseño Gráfico 2009
Zara Hormazábal D.
xhtml y Css??
Que es esto del
HTML.lenguaje     de estructuración y de contenidos


                         +
XML.lenguaj...
Por que usar xhtml y css???
Flexible para el diseño
Capas y elementos superpuestos
Varias versiones en una sola estructura...
xhtml y Css??
Que es esto del
Estructuramos contenido con etiquetas semánticas.
Definimos el significado de cada elemento no...
Etiquetas xhtml, atributo y valores
        etiqueta              atributo


<form>
   <input type=”text” name=”nombre” />...
Estructura de un xhtml
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/D...
Estructura de un xhtml
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//
                                         ...
Elementos (etiquetas) de un xhtml
<p>Este es un parrafo</p>                          Parrafo

<br /> es la etiqueta para u...
Elementos (etiquetas) de un xhtml
<strong>marca contenido al que se quiere dar más fuerza </strong>          Strong

     ...
Elementos (etiquetas) de un xhtml
<table border=”0” cellpadding=”0” cellspacing=”0”>
 <tr> <!-- esto es la fila -->
   <th ...
Elementos (etiquetas) de un xhtml
<ul>                                      •elemento li a
                               ...
Reglas de un xhtml
1. Los elementos vacíos deben cerrarse siempre:
     o Incorrecto: <br>
     o Correcto: <br />

2. Los...
Reglas de un xhtml
6. No está permitida la minimización de atributos (se usa el nombre del
atributo como valor).
     o In...
Css??
Que es esto del xhtml y
CSS.Cascade         Style Sheet

- Separar contenido de la presentación

- Unicos elementos ...
Como incluir css en un doc xhtml
css interno (no recomendado para grandes sitios)
<head>
<style type=quot;text/cssquot;>
 ...
Selectores CSS
                                  regla css
                                      declaración


           ...
Selectores CSS
en css
span.estrella {
  padding: 0.5em;
  border: 1px solid #98be10;
  background: #f6feda;
}

#arena {
  ...
Selectores CSS
No confundir

/* Todos los elementos de tipo quot;pquot; con atributo class=quot;cartelquot; */
p.cartel { ...
Unidades de medidas en CSS
Las unidades relativas son:
                         /* em */
h1 { margin: 0.5em }
p { font-siz...
Color en CSS
Con palabras claves:
Las palabras se corresponden con el nombre en inglés de cada color:

aqua, black, blue, ...
Color en CSS
RGB hexadecimal:
Utilizando 10 símbolos para los números (0 al 9) y 16 símbolos para
representar las letras (...
Modelo de Caja
Todos los elementos se representen mediante cajas rectangulares.

Permite definir:
la altura y anchura de ca...
Modelo de Caja


div {
  width: 300px;
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 30px;
  margin-right: 3...
Modelo de Caja
La altura y anchura de cada caja (height - width)
Ambos pueden expresarse en pixeles o porcentajes, y si no...
Modelo de Caja
Margen y relleno (margin - padding)

/* separación entre el borde de la
caja y el resto de cajas adyacentes...
Modelo de Caja
Bordes (border)
border | border-top | border-right | border-bottom | border-left

Ancho
border-width -- en ...
Modelo de Caja
Margen, relleno, bordes
La anchura y altura de un elemento no solamente se calculan teniendo en cuenta
sus ...
Fondos en CSS
Fondo (background)

color | imagen | repetir | posición

body {
  background-color: #f;
  background-image: ...
Fuentes en CSS
Estilos de tipografía y textos
font-family : quot;Trebuchet MSquot;, Arial , Tahoma, sans - serif ;
font-si...
Posicionamiento y visualización
Tipos de elementos

En línea: siempre empiezan en una nueva línea y ocupan todo el espacio...
Posicionamiento y visualización
Tipos de posicionamiento (position)

Static: por defecto

Relative: permite desplazar una ...
Posicionamiento y visualización
Visualización
Display: inline | block | none
        toma la forma del valor -- inline : e...
Posicionamiento y visualización
Visualización
Overflow: visible | hidden | scroll

para controlar la forma en la que se
vis...
Posicionamiento y visualización
Elemento flotante

Desplazamiento hasta la zona más a la izquierda o más a la derecha de la...
Referencias
Especificación oficial de CSS 2.1: la que incluyen todos los navegadores actuales.

Especificación oficial de CSS ...
Front End - Maquetación xhtml + css
Upcoming SlideShare
Loading in …5
×

Front End - Maquetación xhtml + css

4,734 views
4,490 views

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,734
On SlideShare
0
From Embeds
0
Number of Embeds
1,070
Actions
Shares
0
Downloads
93
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide




































  • Front End - Maquetación xhtml + css

    1. 1. Front End : Xhtml + Css Tecnologías web Lab. Diseño Gráfico 2009 Zara Hormazábal D.
    2. 2. xhtml y Css?? Que es esto del HTML.lenguaje de estructuración y de contenidos + XML.lenguaje de datos a través de etiquetas semánticas
    3. 3. Por que usar xhtml y css??? Flexible para el diseño Capas y elementos superpuestos Varias versiones en una sola estructura Sitios más livianos, menos código, menos carga
    4. 4. xhtml y Css?? Que es esto del Estructuramos contenido con etiquetas semánticas. Definimos el significado de cada elemento no el aspecto. El aspecto o diseño lo podemos controlar mediante el CSS. XML + HTML = XHTML Principal elemento etiquetas que para diferenciarse del contenido, están encerradas por paréntesis angulares. <etiqueta> esto es una etiqueta </etiqueta>
    5. 5. Etiquetas xhtml, atributo y valores etiqueta atributo <form> <input type=”text” name=”nombre” /> </form> valor <a href=quot;http://www.taller.clquot; title=”web taller”> <img alt=”imagen ejemplo” src=quot;ejemplo.gifquot;/> </a>
    6. 6. Estructura de un xhtml <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;esquot; lang=quot;esquot;> <head> <meta name=quot;Autorquot; content=quot;tallerquot; /> <meta name=quot;keywordsquot; content=quot;bachillerato,html,dhtml,css,webs,webmasterquot; /> <meta name=quot;GENERATORquot; content=quot;wordpressquot; /> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=UTF-8quot; /> <title>Titulo de la pagina</title> </head> <body> <p>Primer documento XHTML, es decir un, Hola mundo</p> </body> </html>
    7. 7. Estructura de un xhtml <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict// Tipo de elementos o etiquetas ENquot; que usaremos quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> Acá comienza el doc. xhtml <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; y se dan atributos del idioma. xml:lang=quot;esquot; lang=quot;esquot;> <head> Encabezado de las páginas, no es <meta name=quot;Autorquot; content=quot;tallerquot;> lo mismo que header, acá se da <meta name=quot;keywordsquot; ciertos parametros como el titulo content=quot;bachillerato,html,dhtml,css,webs,webmasterquot;> del sitio, meta, enlace a los <meta name=quot;GENERATORquot; content=quot;wordpressquot;> estilos css, etc <title>Titulo de la pagina</title> </head> Cuerpo de la página, contiene todo el contenido que será visto. <body> En este encontraremos las <p>Primer documento XHTML, es decir un, Hola mundo</p> etiquetas como <p>, <li>, </body> <h1>... </html>
    8. 8. Elementos (etiquetas) de un xhtml <p>Este es un parrafo</p> Parrafo <br /> es la etiqueta para un salto de linea <b>Esto está en negrita</b> negrita cursiva <i>Esto está en cursiva</i> <!--Este es un comentario y no se verá como contenido --> <h1>Encabezado con etiqueta h1 </h1> <!-- este puede ser el titulo del sitio --> <h2>Encabezado con etiqueta h2 </h2> <!-- este puede ser el titulo de la sección --!>
    9. 9. Elementos (etiquetas) de un xhtml <strong>marca contenido al que se quiere dar más fuerza </strong> Strong enfasis <em> El elemento em agrega énfasis al contenido </em> <img src=”url-de-la-imagen” alt=”descriptor”> <a href=quot;http://www.example.comquot; title=quot;Apunta hacia example.comquot;>Enlace absoluto</a> <a href=quot;ejemplo02.htmlquot; title=quot;Ir al ejemplo numero 2quot; rel=quot;Prevquot;>Enlace relativo</a> <a href=quot;#finquot; title=quot;Ir al final de la pagina mediante el anclaquot;>Enlace hacia ancla</a> <a href=quot;mailto:mail@example.comquot;>Correo de ejemplo</a>
    10. 10. Elementos (etiquetas) de un xhtml <table border=”0” cellpadding=”0” cellspacing=”0”> <tr> <!-- esto es la fila --> <th colspan=”3”> esto es una cabecera de una tabla </th> </tr> <tr> <td> esto es una celda/columna de una tabla </td> <td> esto es una celda/columna de una tabla </td> <td> esto es una celda/columna de una tabla </td> </tr> </table> Esto es una cabecera th esto es una esto es una esto es una celda/columna celda/columna celda/columna td td td
    11. 11. Elementos (etiquetas) de un xhtml <ul> •elemento li a •elemento li b <li> lista desordenada </li> •elemento li c </ul> <ol> 1.elemento li a 2.elemento li b <li> lista ordenada por número </li> 3.elemento li c </ol> <dl> Término <dt> término </dt > Definición <dd> definición </dd > </dl> <form> <label>Nombre:</label> Nombre <input type=quot;textquot; name=quot;nombrequot;/> Apellido <label>Apellido:</label> Mensaje <input type=quot;textquot; name=quot;apellidoquot;/> <label>Mensaje:</label> <textarea name=”mensaje”></textarea> <input type=quot;submitquot; value=quot;enviarquot; /> enviar </form>
    12. 12. Reglas de un xhtml 1. Los elementos vacíos deben cerrarse siempre: o Incorrecto: <br> o Correcto: <br /> 2. Los elementos no vacíos también deben cerrarse siempre: o Incorrecto: <p>Primer párrafo<p>Segundo párrafo o Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p> 3. Los elementos anidados deben tener un correcto orden de apertura/cierre o Incorrecto: <em><strong>Texto</em></strong> o Correcto: <em><strong>Texto</strong></em> 4. Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles). o Incorrecto: <td rowspan=3> o Correcto: <td rowspan=quot;3quot;> o <td rowspan='3'> 5. Los nombres de elementos y atributos deben ir en minúsculas. o Incorrecto: <A HREF=quot;http://www.domname.comquot;>Domname</A> o Correcto: <a href=quot;http://www.domname.comquot;>Domname</a>
    13. 13. Reglas de un xhtml 6. No está permitida la minimización de atributos (se usa el nombre del atributo como valor). o Incorrecto: <textarea readonly>Solo-lectura</textarea> o Correcto: <textarea readonly=quot;readonlyquot;>Solo-lectura</textarea> 7. El texto no debe ser insertado directamente en el cuerpo (dentro de la etiqueta quot;bodyquot;). o Incorrecto: <body>Texto plano</body> o Correcto: <body><span>Texto plano</span></body> 8. No se deben insertar elementos de bloque dentro de elementos de línea. o Incorrecto: <em><h2>Título</h2></em> o Correcto: <h2><em>Título</em></h2>
    14. 14. Css?? Que es esto del xhtml y CSS.Cascade Style Sheet - Separar contenido de la presentación - Unicos elementos para todo el sitio, pero en contexto - Varias hojas de estilos para un mismo archivo - Permite visualizar en distintos dispositivos, optimar cada uno
    15. 15. Como incluir css en un doc xhtml css interno (no recomendado para grandes sitios) <head> <style type=quot;text/cssquot;> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> css externo <head> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;/css/estilos.cssquot; media=quot;screenquot; /> </head> media define el medio donde se verá el sitio: - all (todos) - screen (pantallas de ordenador) - print (impresoras y “vista previa”) - tv (televisores y dispositivos baja resolución) - speech (sintetizadores de voz para discapacitados) - braille (dispositivos táctiles) / embosed (impresoras braille) - projection (proyectores y dispos. para presentaciones)
    16. 16. Selectores CSS regla css declaración h1 { color : #000; } selector propiedad valor Universal * { margin: 0; padding: 0; } Etiqueta p { font-size: 12px; color: #f;} Descendente p span { color: #000;} Clase .especial { margin-top: 20px;} ID #especial { padding: 5px; border: 1px solid #333;} Convinación p, a, span, em { text-decoration: underline; } /* este es un comentario en CSS */
    17. 17. Selectores CSS en css span.estrella { padding: 0.5em; border: 1px solid #98be10; background: #f6feda; } #arena { color: #930; font-weight: bold; } en XHTML span class=quot;estrellaquot;.../span div id=quot;arenaquot;.../div
    18. 18. Selectores CSS No confundir /* Todos los elementos de tipo quot;pquot; con atributo class=quot;cartelquot; */ p.cartel { ... } /* Todos los elementos con atributo class=quot;cartelquot; que estén dentro de cualquier elemento de tipo quot;pquot; */ p .cartel { ... } /* Todos los elementos quot;pquot; de la página y todos los elementos con atributo class=quot;cartelquot; de la página */ p, .cartel { ... }
    19. 19. Unidades de medidas en CSS Las unidades relativas son: /* em */ h1 { margin: 0.5em } p { font-size: 12px } /* px */ h1 { font-size: 200%; } /* % */ La unidades absolutas son: útiles solamente cuando la propiedades físicas del medio de salida son conocidas. /* inches (pulgadas) 1in = 2.54 cm */ h1 { margin: 0.5in } h2 { line-height: 3cm } /* centímetros */ h3 { word-spacing: 4mm } /* milímetros */ h4 { font-size: 12pt } /* puntos 1pt = 1/72 in*/
    20. 20. Color en CSS Con palabras claves: Las palabras se corresponden con el nombre en inglés de cada color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
    21. 21. Color en CSS RGB hexadecimal: Utilizando 10 símbolos para los números (0 al 9) y 16 símbolos para representar las letras (de la A a la F) p { color: #4762B0; } #AAA = #AAAAAA #FFF = #FFFFFF #A0F = #AA00FF #369 = #336699 en CSS se usa color más frecuentemente en fuentes, bordes, fondos.
    22. 22. Modelo de Caja Todos los elementos se representen mediante cajas rectangulares. Permite definir: la altura y anchura de cada caja (height - width) el margen existente entre cajas (margin) el espacio de relleno interior contenido-caja (padding) posicion (position - top - bottom etc) visualización (display) bordes (border) Imágen de http://www.librosweb.es/css/
    23. 23. Modelo de Caja div { width: 300px; padding-left: 50px; padding-right: 50px; margin-left: 30px; margin-right: 30px; border: 10px solid black; } Imágen de http://www.librosweb.es/css/
    24. 24. Modelo de Caja La altura y anchura de cada caja (height - width) Ambos pueden expresarse en pixeles o porcentajes, y si no queremos definir usamos “auto” o que herede el tamaño del padre usamos “inherit” /* esto en css */ #header { width: 800px; height: 60px;} !-- esto en xhtml -- div id=quot;headerquot; ... /div
    25. 25. Modelo de Caja Margen y relleno (margin - padding) /* separación entre el borde de la caja y el resto de cajas adyacentes */ .margen { margin: 5px; } .margen-horizontal-centrado { margin: 5px auto; } /* distancia de “relleno” entre el límite interior de la caja y el exterior (borde). */ .relleno { margin: 2px 10px; }
    26. 26. Modelo de Caja Bordes (border) border | border-top | border-right | border-bottom | border-left Ancho border-width -- en px color border-color -- #000 | red estilo border-style -- none | hidden | dotted | dashed | solid | double para no mostrar nada de bordes se usa border: none por ej. en imágenes .caja { border-top: 3px dashed red; border-right: 3px double blue; border-bottom: 2px dotted green; border-left: 1px solid grey; }
    27. 27. Modelo de Caja Margen, relleno, bordes La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final del elemento. /* esto en css */ div { width: 300px; padding-left: 50px; padding-right: 50px; margin-left: 30px; margin-right: 30px; border: 10px solid black; } 30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel
    28. 28. Fondos en CSS Fondo (background) color | imagen | repetir | posición body { background-color: #f; background-image: url(fondo-web.gif); background-repeat: repeat-x; /* repeat x y no-repeat */ background-position: 0 0; /* 0 top left... */ } body { #f url(fondo-web.gif) 0 0 repeat-x; }
    29. 29. Fuentes en CSS Estilos de tipografía y textos font-family : quot;Trebuchet MSquot;, Arial , Tahoma, sans - serif ; font-size: 12px | 10em | 100% font-color: #336699 | red font-weight: bold | normal line-height: 14px | 11em | 120% text-align: right | left | center | justify text-decoration: none | underline | overline | line-through text-transform: none | uppercase | capitalize | lowercase a:link { p.parrafo { h2 { font-size: 11px; font-size: 11px; font-size: 18px; font-color: blue; font-color: #666; font-color: #000; font-weight: normal; font-weight: normal; font-weight: bold; text-decoration: none; line-height: 12px; } } }
    30. 30. Posicionamiento y visualización Tipos de elementos En línea: siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea a, br, img, input, label, select, span, strong, sub, sup, textarea De bloque: sólo ocupan el espacio necesario para mostrar sus contenidos blockquote, center, div, form, h1, h2, h3, h4, h5, h6, hr, ol, p, table, ul.
    31. 31. Posicionamiento y visualización Tipos de posicionamiento (position) Static: por defecto Relative: permite desplazar una caja respecto de su posición original. se controla con las propiedades top, right, bottom y left. Absolute: establece la posición en la que se muestra la caja de un elemento, respecto a su elemento padre. Fixed: su posición es inamovible dentro de la ventana del navegador
    32. 32. Posicionamiento y visualización Visualización Display: inline | block | none toma la forma del valor -- inline : en linea Visivility: visible | hidden mantiene el espacio ocupado por el elemento, muestra u oculta
    33. 33. Posicionamiento y visualización Visualización Overflow: visible | hidden | scroll para controlar la forma en la que se visualizan los contenidos que sobresalen de sus elementos. z-index: valores (1-999) permite controlar la posición tridimensional de las cajas posicionadas #caja1 { z-index: 5; } #caja2 { z-index: 15;} #caja3 { z-index: 25;}
    34. 34. Posicionamiento y visualización Elemento flotante Desplazamiento hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba. float: rigth | float: left clear: both
    35. 35. Referencias Especificación oficial de CSS 2.1: la que incluyen todos los navegadores actuales. Especificación oficial de CSS 3: la que sustituirá dentro de unos años a la actual versión 2.1. Web Developers Handbook: cientos de enlaces con todos los recursos útiles para diseñadores web. Blue Vertigo: otra colección de cientos de enlaces con recursos útiles para diseñadores web. Foros del Web: incluyen foros específicos dedicados a resolver dudas relacionadas con el diseño web con CSS. Ovillo: una de las mejores listas de distribución en castellano. Los foros de SitePoint son una de las mejores referencias en inglés para resolver dudas relacionadas con el diseño web.

    ×