xhtml tuto beta

Download Xhtml Tuto Beta

Post on 26-Dec-2015

3 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • LICENCIA i

    Licencia

    Esta obra est bajo una licencia Reconocimiento-NoComercial-CompartirIgual 2.5 Espaa de Creative Commons. Para ver unacopia de esta licencia, visite la pgina de la licencia1 o enve unacarta a Creative Commons, 559 Nathan Abbott Way, Stanford,California 94305, USA.

    Resumen de la licencia:

    Eres libre de. . .

    copiar, distribuir y comunicar pblicamente la obra

    hacer obras derivadas

    Bajo las siguientes condiciones

    Reconocimiento. Se deben reconocer los crditos de la obrade la manera especificada por el autor o el licenciador.

    No comercial. No se puede utilizar esta obra para finescomerciales.

    Compartir bajo la misma licencia. Si se altera o se trans-forma esta obra, o se genera una obra derivada, slo se puededistribuir la obra generada bajo una licencia idntica a sta.

    1http://creativecommons.org/licenses/by-nc-sa/2.5/es/

  • XHTML + CSSde una maldita vez!

    Beln Albeza (BenKo)

    3 de diciembre de 2006

    1

  • ndice general

    Licencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . i

    ndice general 2

    1 Introduccin 71.1. Qu es el XHTML? . . . . . . . . . . . . . . . . . . 81.2. Y eso de CSS? . . . . . . . . . . . . . . . . . . . . . 81.3. Cmo funciona el XHTML? . . . . . . . . . . . . . 81.4. Pero para hacer webs no se usa el FrontPage? . . . 91.5. Mi amigo que es diseador usa Dreamweaver . . . . 91.6. Una preguntilla. . . . . . . . . . . . . . . . . . . . . . 10

    I XHTML 11

    2 Estructura XHTML 132.1. La codificacin . . . . . . . . . . . . . . . . . . . . . 132.2. El DOCTYPE . . . . . . . . . . . . . . . . . . . . . 142.3. El elemento raz (HTML) . . . . . . . . . . . . . . . 152.4. La cabecera (HEAD) . . . . . . . . . . . . . . . . . . 152.5. El cuerpo (BODY) . . . . . . . . . . . . . . . . . . . 162.6. La plantilla . . . . . . . . . . . . . . . . . . . . . . . 16

    3 Etiquetas bsicas 173.1. Prrafos . . . . . . . . . . . . . . . . . . . . . . . . . 173.2. Saltos de lnea . . . . . . . . . . . . . . . . . . . . . 183.3. Los ttulos (headings) . . . . . . . . . . . . . . . . . 183.4. Citas . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.5. Separadores horizontales . . . . . . . . . . . . . . . . 203.6. Comentarios . . . . . . . . . . . . . . . . . . . . . . . 20

    2

  • 34 Enlaces 214.1. Enlace a una pgina externa . . . . . . . . . . . . . . 214.2. Enlace a una pgina local . . . . . . . . . . . . . . . 224.3. Enlace a una direccin de e-mail . . . . . . . . . . . 224.4. Anclas . . . . . . . . . . . . . . . . . . . . . . . . . . 23

    5 Listas 255.1. Listas ordenadas . . . . . . . . . . . . . . . . . . . . 255.2. Listas sin ordenar . . . . . . . . . . . . . . . . . . . . 265.3. Listas de definicin . . . . . . . . . . . . . . . . . . . 265.4. Listas anidadas . . . . . . . . . . . . . . . . . . . . . 27

    6 Imgenes 296.1. Insertar una imagen . . . . . . . . . . . . . . . . . . 296.2. Imgenes como links . . . . . . . . . . . . . . . . . . 306.3. Sobre el uso y abuso de imgenes . . . . . . . . . . . 31

    7 Tablas 337.1. Una tabla bsica . . . . . . . . . . . . . . . . . . . . 337.2. Atributos de table . . . . . . . . . . . . . . . . . . . 347.3. Expandir filas y columnas . . . . . . . . . . . . . . . 357.4. Tablas para layouts? Insensato! . . . . . . . . . . . 36

    8 Formularios 398.1. La etiqueta FORM . . . . . . . . . . . . . . . . . . . 398.2. Campos de texto . . . . . . . . . . . . . . . . . . . . 408.3. Campos de contrasea . . . . . . . . . . . . . . . . . 418.4. Etiquetar campos . . . . . . . . . . . . . . . . . . . . 418.5. reas de texto . . . . . . . . . . . . . . . . . . . . . 428.6. Casillas de verificacin . . . . . . . . . . . . . . . . . 438.7. Botones de seleccin . . . . . . . . . . . . . . . . . . 448.8. Listas de seleccin . . . . . . . . . . . . . . . . . . . 458.9. Botones de enviar y reestablecer . . . . . . . . . . . 46

    II CSS 47

    9 Introduccin al CSS 499.1. Dnde escribo el cdigo CSS? . . . . . . . . . . . . 499.2. Vale, pero cmo funciona? . . . . . . . . . . . . . . 50

  • 4 NDICE GENERAL

    9.3. Selectores? . . . . . . . . . . . . . . . . . . . . . . . 509.4. Qu significa eso de cascading? . . . . . . . . . . . 519.5. Puedo poner comentarios? . . . . . . . . . . . . . . 529.6. Por qu #fff significa blanco? . . . . . . . . . . . . 52

    10 Trasteando por primera vez 5510.1. El color de primer plano . . . . . . . . . . . . . . . . 5510.2. El fondo . . . . . . . . . . . . . . . . . . . . . . . . . 5510.3. Fuente . . . . . . . . . . . . . . . . . . . . . . . . . . 57

    11 El modelo de caja 6111.1. Cmo es el modelo de caja? . . . . . . . . . . . . . 6111.2. Ancho y alto . . . . . . . . . . . . . . . . . . . . . . 6211.3. Padding . . . . . . . . . . . . . . . . . . . . . . . . . 6311.4. Bordes . . . . . . . . . . . . . . . . . . . . . . . . . . 6311.5. Mrgenes . . . . . . . . . . . . . . . . . . . . . . . . 6411.6. Capas . . . . . . . . . . . . . . . . . . . . . . . . . . 6511.7. Floats . . . . . . . . . . . . . . . . . . . . . . . . . . 65

    12 Algunos truquitos 6712.1. Links que cambian . . . . . . . . . . . . . . . . . . . 6712.2. Links con el subrayado de diferente color . . . . . . . 6812.3. Campos de formulario chulos . . . . . . . . . . . . . 6912.4. Blockquotes 2.0 . . . . . . . . . . . . . . . . . . . . . 6912.5. Cambiar texto por imagen . . . . . . . . . . . . . . . 70

    13 Layout tableless a dos columnas 7313.1. Caractersticas . . . . . . . . . . . . . . . . . . . . . 7313.2. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 7413.3. #container . . . . . . . . . . . . . . . . . . . . . . . 7513.4. #sidebar . . . . . . . . . . . . . . . . . . . . . . . . . 7513.5. #main . . . . . . . . . . . . . . . . . . . . . . . . . . 7613.6. #footer . . . . . . . . . . . . . . . . . . . . . . . . . 76

    14 Cabeceras 7714.1. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 7714.2. #header . . . . . . . . . . . . . . . . . . . . . . . . . 7814.3. El heading . . . . . . . . . . . . . . . . . . . . . . . . 7814.4. El enlace . . . . . . . . . . . . . . . . . . . . . . . . . 78

  • 515 Listas personalizadas 8115.1. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 8115.2. La lista . . . . . . . . . . . . . . . . . . . . . . . . . 8115.3. Los tems . . . . . . . . . . . . . . . . . . . . . . . . 82

    16 Mens verticales 8516.1. Cdigo XHTML . . . . . . . . . . . . . . . . . . . . 8616.2. La lista . . . . . . . . . . . . . . . . . . . . . . . . . 8616.3. Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . 87

    A Por qu en IE se ve bien y en Firefox se ve mal 89

    B Migracin rpida a XHTML 91B.1. Minsculas y comillas, por favor . . . . . . . . . . . 91B.2. Todas las etiquetas se cierran . . . . . . . . . . . . . 92B.3. FONT y ciertos atributos desaparecen . . . . . . . . 92B.4. B y amigos tambin se van . . . . . . . . . . . . . . 92B.5. Hay que usar alt y title . . . . . . . . . . . . . . . . 93B.6. Cuidado al anidar etiquetas . . . . . . . . . . . . . . 93B.7. No existen los frames . . . . . . . . . . . . . . . . . . 93B.8. No se puede utilizar target . . . . . . . . . . . . . . . 94B.9. Las tablas no se usan para maquetar . . . . . . . . . 94B.10.Los ampersands dan por saco . . . . . . . . . . . . . 94

    C A favor del Unicode 97

  • Captulo 1

    Introduccin

    Yo te convoco, dragn invoco!

    Dragon Fall GTIPilaf, villano de Dragon Fall

    Este manual cubre cmo crear pginas web usando las tecnolo-gas estndares recomendadas por el World Wide Web Consor-tium1. No son necesarios conocimientos previos, as que lo nicoque necesitas es:

    Un editor de texto plano. Si eres un desafortunado usuariode Windows, te sirve el Bloc de Notas. Ten cuidado si usasun procesador de textos, como el Word, ya que da formato yno queremos eso. Si usas GNU/Linux, tienes un montn paraelegir: vim, emacs, Joe, Kate, etc.

    Un navegador (o varios) que funcione bien y respete losestndares. El Mozilla Firefox, por ejemplo. Es multipla-taforma, libre, y lo puedes bajar desde la web del proyectoMozilla2.

    Un navegador que funcione mal, tenga todo el mundo, ypase de los estndares: Ya-Sabes-Cul3.

    1Es el organismo que se encarga de regular los estndares de la Web. Algoas como la RAE con el castellano. Su direccin es www.w3c.org

    2http://www.mozilla.org3Su nombre est escrito en la Lengua Negra, que no pronunciar aqu.

    7

  • 8 CAPTULO 1. INTRODUCCIN

    Adems de eso, es muy recomendable que tengas a mano eleditor de texto y un navegador para ir probando los ejemplos quevayan saliendo. Es la nica forma de aprender.

    1.1. Qu es el XHTML?

    XHTML significa eXtensible HyperText Markup Language yes la versin modernizada del tradicional HTML4. Si ya conocesHTML, al final del manual hay un apndice para que sea ms fcilla migracin a XHTML.

    XHTML es un lenguaje semntico, lo que quiere decir que nodefinimos el aspecto de las cosas, sino lo que significan. Por ejemplo,si tenemos el ttulo de nuestra pgina, en lugar de decir Lo quierogrande en letras rojas, le indicamos al navegador que Este es elttulo principal de la pgina. Haz algo para que destaque. Y esealgo lo dejamos a decisin del navegador.

    Obviamente, podemos controlar el aspecto que tienen nues-tras pginas, pero eso es tarea de las hojas de estilo CSS, no delXHTML.

    1.2. Y eso de CSS?

    CSS son las siglas de Cascading Style Sheets y son un regalodel cielo. Si el documento XHTML est bien estructurado, podemoscambiar totalmente su apariencia sin tocar una sola lnea de cdigoen el archivo .html. Esto nos permite separar el contenido delaspecto, y es de gran importancia.

    Si quieres ver un ejemplo de cmo con el mismo cdigo XHTMLy distintos archivos CSS se pueden conseguir resultados totalmentediferentes, a la vez que espectaculares, chale un v