• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
xHTML 1.0  Basics
 

xHTML 1.0 Basics

on

  • 4,523 views

Curso de Estándares Web - Día #1

Curso de Estándares Web - Día #1

Diferencias del xHTML 1.0 de versiones anteriores de HTML.

Statistics

Views

Total Views
4,523
Views on SlideShare
4,501
Embed Views
22

Actions

Likes
3
Downloads
45
Comments
0

4 Embeds 22

http://www.slideshare.net 13
http://nomad.morinoko.com 4
http://blog.morinoko.com 4
http://www.filestube.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    xHTML 1.0  Basics xHTML 1.0 Basics Presentation Transcript

    • xHTML
      • Trabajando en orden
      Harold Maduro
    • xHTML 1.0
      • Abrir documento con DOCTYPE correcto
      • Namespace
      • Declarar el Content Type
      • Especificar el idioma (lang)
      • Escribir todos los elementos en minúscula
      • Encerrar los valores de los atributos en comillas
      • Todos los elementos deben abrirse y cerrarse
      • Hay que cerrar los tags vacíos también
      • Todos los atributos necesitan un valor
      • Encode todos los símbolos <, >, &
      • No usar guiones dobles dentro de los comentarios
    • xHTML 1.0 Abrir documento con DOCTYPE correcto Los archivos xHTML comienzan con varios elementos que le dice a los browsers cómo interpretarlos y le dice a los validators cómo probar que están correctos. El primer elemento de estos es el DOCTYPE (Document Type Declaration o DTD) el cual le dice a los validators que versión de HTML estamos usando.Los DOCTYPES le permiten a los diseñadores web crear diferentes tipos de documentos atados a diferentes sets de reglas. Las reglas de cómo se despliega el documento va a depender de la especificación de HTML creada por el W3C. La información proporcionada por el DOCTYPE le va a proporcionar a los browsers, la información de cómo fue construido el documento, por lo tanto, cómo deben desplegarlo. Los documentos HTML no van a validar al menos de que contengan un DOCTYPE.
    • xHTML 1.0 Abrir documento con DOCTYPE correcto <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;>
    • xHTML 1.0 Abrir documento con DOCTYPE correcto HTML 4.01 Transitional - Ingles <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;> xHTML 1.0 Transitional - Ingles <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtm l1-transitional.dtd &quot;>
    • xHTML 1.0 Abrir documento con DOCTYPE correcto En el caso de xHTML 1.0, existen tres opciones de DTD y por lo tanto tres DOCTYPES posibles: Transitional : <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;> Strict : <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> Fram eset : <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHT ML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
    • xHTML 1.0 Abrir documento con DOCTYPE correcto El problema es que si usamos un DOCTYPE incorrecto, o no lo usamos; los browsers cambian a lo que se llama &quot;Quirks&quot; mode, lo que significa que el browser asume que escribimos nuestro HTML a la antigua y trata de corregir los errores más comunes del pasado (elementos sin tag de cerrar, etc). Esto hace imposible que despliegue la página correctamente usando los estándares web, quienes tienen reglas mucho más estrictas.
    • xHTML 1.0 Namespace El namespace en XML es una colección de tipos de elementos y nombres de atributos asociados a un DTD específico. Las declaraciones DTD permiten identificar al namespace apuntando a su localización online. Los otros dos atributos son el idioma del documento y la especificación que el XML también fue escrito en ese idioma (ingles).
    • xHTML 1.0 Namespace <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; lang=&quot;en&quot; xml:lang=&quot;en&quot;>
    • xHTML 1.0 Namespace En muchas ocasiones, he visto que omiten el idioma y simplemente apuntan al namespace.<html xmlns=&quot; http://www.w3.org/1999/xhtml &quot;>
    • xHTML 1.0 Declarar el Content Type o Charset Para poder ser interpretados correctamente por los browsers y para que los documentos puedan ser validados, deben llevar el tipo de character encoding que se ha usado en el mismo.El character set default de los documentos en HTML (HTML 4.01 y xHTML; incluso, XML) es Unicode. Unicode fue desarrollado por el Unicode Consortium y es un set de caracteres que provee un número único para cada caracter, &quot;no matter what the platform, no matter what the program, no matter what the language&quot;. Ahora, este set de caracteres no contiene todos los caracteres que necesitamos en idiomas como español, griego, etc.
    • xHTML 1.0 Declarar el Content Type o Charset También podemos usar el ISO 8859-1 , conocido como Latin-1. Este es un set de caracteres que incluyen caracteres de Europa del Este, Turkía, Grecia, Hebreo, etc. <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; />
    • xHTML 1.0 Declarar el Content Type o Charset UTF-8 UTF-8 permite agregar caracteres latinos directo en el documento y que puedan ser interpretados correctamente por el browser. Por ejemplo tíldes y eñes. <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
    • xHTML 1.0 Language La especificación de xHTML nos dice que debemos especificar el idioma en que está el contenido de nuestro documento. Esto lo podemos hacer por medio de un META TAG (ingles de Estados Unidos):<meta http-equiv=&quot;Content-Language&quot; content=&quot;en-us&quot; />
    • xHTML 1.0 Language En el caso de español, sería:<meta http-equiv=&quot;Content-Language&quot; content=&quot;es&quot; />
    • xHTML 1.0 Elementos en Minúscula <p>Este es mi <strong>párrafo</strong>.</p>
    • xHTML 1.0 Atributos dentro de comillas <p align=”left”>¡Hola!</p>
    • xHTML 1.0 Elementos deben abrirse y cerrarse correctamente <p>Este es mi <strong>párrafo</strong>. Mi libro favorito es <em>Neuromancer</em> por <big>William Gibson</big>.</p>
    • xHTML 1.0 Cerrar Tags Vacíos <img src=”foto.jpg” />
    • xHTML 1.0 Cerrar Tags Vacíos <meta name=”description” value=”Mi super site” />
    • xHTML 1.0 Cerrar Tags Vacíos <input type=”text” name=”nombre” />
    • xHTML 1.0 Todos los atributos necesitan un valor <select name=”pais” selected=”selected”> Panamá . </select> .
    • xHTML 1.0 Encode special characters Smith &amp; Wesson
    • xHTML 1.0 No usar guiones dentro de los comentarios Mal: <!-- ---- Contenido ----- -->
    • xHTML 1.0 No usar guiones dentro de los comentarios Bien: <!-- Comienza el contenido -->
    • xHTML 1.0
      • Block Elements
      • Inline Elements
      Tipos de elementos
    • xHTML 1.0
      • Como P, H1, DIV
      • Genera nuevas líneas antes y después de su recuadro en el normal flow del documento
      • Se acomodan verticalmente, uno debajo del anterior
      • Un block element puede tener como hijos y descendientes a otros block elements y a inline elements
      Block Element
    • xHTML 1.0
      • Como STRONG, EM, SPAN
      • No generan nuevas líneas antes y después de su contenido
      • Son descendientes de un block element
      • Un inline element sólo puede tener como hijos y descendientes a otros inline elements
      • No es posible que un inline element tenga como hijo o descendiente a un block element
      Inline element
    • xHTML 1.0
      • La W3C ofrece un servicio online que revisa todo el documento HTML (dependiendo de la versión), y nos dice si está creado correctamente o tiene errores.
      • Esto es de gran ayuda, ya que podemos haber tenido errores, ya sea al momento de typear, errores en la forma de utilizar elementos HTML, elementos sin su tag de cierre, etc.
      • Validar el documento HTML siempre es una buena práctica, ya que nos asegura que nuestro trabajo está bien y podemos seguir adelante (ya sea implementando el template, creando el CSS, o creando el template de algún CMS con el código HTML que generamos).
      • Si el código está incorrecto desde el comienzo, y no lo descubrimos, puede traernos problemas sobre la marcha cuando otros elementos formen parte del sitio web (todo el contenido, el CSS, un CMS, programación backend, etc).
      Validar
    • xHTML 1.0
      • Muchos diseñadores toman la validación correcta de su sitio como un emblema o trofeo que despliegan en los pie de página de sus sitios o blogs. En el caso de sitios web comerciales, esto es innecesario y muchas veces confundiría al usuario final, quien no comprende qué significan las siglas xHTML, CSS, etc.
      Validar
    • xHTML 1.0
      • W3C HTML Validator
      • http://validator.w3.org /
      Validar
    • Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer
    • Bibliografía xHTML 1.0 Specification http://www.w3.org/TR/xhtml1/ World Wide Web Consortium
    • Bibliografía CSS 2.1 Specification http://www.w3.org/TR/CSS21/ World Wide Web Consortium