Front End Xhtml Css

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.lenguaje de datos a través de etiquetas semánticas

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

xhtml y Css??
Que es esto del
Estructuramos contenido con etiquetas semánticas.
Deﬁnimos el signiﬁcado 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>

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>

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>

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>

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>



<h1>Encabezado con etiqueta h1 </h1>


<h2>Encabezado con etiqueta h2 </h2>
<!-- este puede ser el titulo de la sección --!>

<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;#ﬁnquot; title=quot;Ir al ﬁnal de la pagina mediante el anclaquot;>Enlace hacia
ancla</a>

<a href=quot;mailto:mail@example.comquot;>Correo de ejemplo</a>

<table border=”0” cellpadding=”0” cellspacing=”0”>
<tr> 
<th colspan=”3”> esto es una cabecera de una tabla </th>
</tr>
<tr>
<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

<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 >
Deﬁnición
<dd> deﬁnició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>

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>

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>

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

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 deﬁne 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)

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 */

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

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 { ... }

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*/

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

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.

Modelo de Caja
Todos los elementos se representen mediante cajas rectangulares.

Permite deﬁnir:
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/

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/

Modelo de Caja
La altura y anchura de cada caja (height - width)
Ambos pueden expresarse en pixeles o porcentajes, y si no queremos
deﬁnir 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

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;
}

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;
}

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 ﬁnal 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

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; }

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;
}
} }

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 ﬁnal 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.

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

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

Visualización
Overﬂow: 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;}

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

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.

Front End Xhtml Css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Front End Xhtml Css

Similar a Front End Xhtml Css (20)

Último

Último (19)

Front End Xhtml Css

Notas del editor