Guía básica para pegarle al xhtml (Primera parte)

Carlos Julio Caicedo C

carloscaicedo.wordpress.com (pronto carloscaicedo.net)

carloscaicedo.wordpress.com [email_address]

¿?

usando css y xhtml? ¿Por qué hacer un sitio web

para el diseño visual Más posibilidades

www.kiutnorma.com

útil, ¿no creen? :- )

¿Más razones?

www.country-boys.net Capas y elementos superpuestos

www.haus-hoyer.de Elementos flotantes e interactivos

www.haus-hoyer.de Ajax, CSS y xhtml hacen un bonito trío

… y como si fuera poco…

www.csszengarden.com Un solo documento, varias versiones

Pero eso no es todo

Sitios Web Mas livianos

Menos código Menor tiempo de descarga Uso eficiente de la memoria temporal

Además…

Proceso eficiente De desarrollo

Adiós al find+replace p { font-size:14px; color:#000000; }

La estructura separada de la presentación

La estructura separada de la presentación (los ingenieros y los diseñadores no se pisarán las mangueras)

Acordaos

Permitir que mas personas, sin importar sus limitaciones físicas o funcionales puedan consultar la información que se encuentra en Internet.

Para completar

Hacer las cosas bien

Espero haberlos convencido :- D

Bueno pues, ¿Qué necesito para empezar?

Editor de texto

Navegador web

DOM Inspector 1.8.0.7 Web Developer 1.0.2 Fire Bug 0.4

Comienza la enunciación de elementos visibles

Comienza la enunciación de elementos visibles Barra de navegación

Comienza la enunciación de elementos visibles Barra de navegación El div es un elemento individual, mientras que un class define características comunes

xml html +

Presentación de datos estructurados en un orden jerárquico. html

Formato abierto. Creación de etiquetas incompatibles. html

flash html vs

flash html vs Colectivo Individual

flash html vs Colectivo Individual Generadores Generador

flash html vs Colectivo Individual Generadores Generador Visores Visor

Desorden html =

Datos . Sintaxis estricta . Propias etiquetas . Información universal . xml

xml html +

Presentación de datos a través de etiquetas . Información disponible para diversos dispositivos. xhtml

Sintaxis

<table cellspacing=“0”> Etiqueta

<table cellspacing=“0”> Etiqueta Atributo

<table cellspacing=“0”> Etiqueta Atributo Valor

Reglas básicas

01 Estructura básica

<!DOCTYPE> <html> <head> Información del documento </head> <body> Contenido presentado </body> </html>

02 Defina el tipo de documento

xhtml estricto <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict // ES " "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd ">

xhtml de transición <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional // ES " "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-frameset.dtd ">

xhtml para marcos <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset // ES " "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd ">

03 Lo que se abre, se cierra

<p >Párrafo</p> <br /> <input /> <img src=“../igu/imgs/logo.png” /> <meta />

04 Jerarquía en los elementos

<p ><strong>Párrafo</p></strong>

<p ><strong>Párrafo</p></strong> <p ><strong>Párrafo</strong></p>

<p ><strong>Párrafo</p></strong> <p ><strong>Párrafo</strong></p> <span><div>Texto</div></span>

<p ><strong>Párrafo</p></strong> <p ><strong>Párrafo</strong></p> <span><div>Texto</div></span> <div><span>Texto</span></div>

05 Sangrados (Un consejo)

Etiquetas importantes

01 Contenido

<h1>Título principal</h1> <h2>Título secundario</h2> … <h6>Subtítulo</h6> <p>Párrafo<br /> Continuación del párrafo</p> <ul> <li>Lista desordenada</li> </ul> <ol> <li>Lista ordenada</li> </ol>

02 Importancia

<p>Dentro de una linea se resaltan <strong> las palabras importantes <strong></p> <p>Así también, se pueden resaltar empleando <em> esta etiqueta </em></h2>

03 Tipo

<cite>Ser o no ser</cite> <code>funtion validar (busqueda)</code> <abbr>Dir.</abbr> <acronym>DANE</acronym>

04 Formularios

<form> <fieldset id=“campos”> <p><label>Nombre</label><br /> <input /></p> <p><label>Nombre</label><br /> <input /></p> </fieldset> <fieldset id=“acciones”> <p><button>Enviar</button> o <a>volver</a> al menu anterior</p> </fieldset> </form>

05 Tablas

<table> <thead> <tr> <th>Col 01</th> <th>Col 02</th> </tr> </thead> <tbody> <tr> <td>Dato 01</td> <td>Dato 02</td> </tr> </tbody> <tfoot> <tr> <td>Resultado 01</td> <td>Resultado 02</td> </tr> </tfoot> </table>

06 Agrupamiento

<div> <h1>Titulo</h1> <p>Párrafos</p> <table> </table> <p>Otra linea de texto <span>con un texto diferenciado</span> del resto</p> </div>

07 id - class

<div id=“encabezado”> <h1>Titulo</h1> </div> <div id=“contenidos”> <h2>Noticia 01</h2> <p class=“datos”>17 de Julio</p> <p>Contenido</p> <h2>Noticia 01</h2> <p class=“datos”>18 de Julio</p> <p>Contenido</p> </div>

Guía básica para pegarle al xhtml (Primera parte)

2 comments

Notes on slide 1

4 Favorites