Etiquetas XHTML
Elementos de Texto Elementos de texto: Cabeceras  <h1> ... <h6>  Párrafos  <p> Salto de línea  <br />  Preformateado  <pre> Cita  <q> Cita en bloque  <blockquote> Énfasis  <em> Fuerza  <strong> Código  <code> Acrónimo  <acronym> Abreviatura  <abbr>
Elementos de Texto  Ver ejemplo_texto.html
Enlaces y Anclas  Enlaces y anclas: El elemento que nos permite la creación de vínculos o anclas es <a>. Este elemento sirve para redirigirnos a otro recurso del Web, pero también se puede convertir en el destino de un vínculo externo. <a href=&quot;http://www.google.com.ar/&quot;>Ir a Google</a> O bien como ancla: <a id=&quot;midestino&quot;>Quiero esto como destino</a> <a href=&quot;pagina.html#midestino&quot;>Ir al destino</a>
Enlaces y Anclas  URIs: Las URIs pueden apuntar a diversos recursos: href=&quot;http://www.unsitioweb.com/&quot; href=&quot;#un_ancla&quot; href=&quot;ftp://www.mi_ftp.com/unarchivo.zip&quot; href=&quot;file:///C:/directorio/unarchivo.zip&quot; href=&quot;mailto:gabriel@catfish-project.com.ar&quot;
Enlaces y Anclas  Rutas absolutas y relativas: Una ruta absoluta comienza en la raíz del sitio  http://www.sitio.com/carpeta/subcarpeta/documento.html /carpeta/subcarpeta/documento.html Una ruta relativa se escribe en referencia al lugar donde nos encontramos actualmente. Si quisieramos acceder a un documento ubicado en subcarpeta desde la pagina documento.html usaríamos: ../documento2.html
Enlaces y Anclas  Cualquier  elemento de línea  puede estar contenido entre las etiquetas <a> y </a>.  Pero en ninguno de bloque.
Enlaces y Anclas  Atributos del elemento ancla <a>: charset:  Indica la codificación de caracteres del documento destino. coords:  Permite especificar las coordenadas que definirán una región para un mapa de imagen. href:  Un URI que especifica el destino del vínculo. hreflang:  Indica la lengua base del documento destino. shape:  Especifica el tipo de región a emplear en un mapa de imágen.  Valores posibles : rect, rectangle, circ, circle, poly, polygon. type:  Establece el MIME del recurso destino.
Imágenes El elemento para incluír una imagen es <img>: Por defecto las imágenes se comportan como elementos de línea. <img alt=&quot;Un texto alternativo para la figura&quot; src=&quot;imagen.html&quot; height=&quot;100&quot; width=&quot;100&quot; /> No todos los formatos  de imagen son accesibles por todos los navegadores. Pero existen tres que podemos considerar universales: JPEG, GIF y PNG
Imágenes Los atributos de la etiqueta <img> son: alt:  Una descripción de la imagen (obligatorio). height:  La altura de la imagen. Puede ser indicada en pixeles o porcentaje. ismap:  Un URL que se refiere a un mapa de imagen del lado del servidor. longdesc:  El URL de una página con una descripción larga de la imagen. src:  Un URL con la ruta a la imagen. usemap:  Un URL que indica un mapa de imagen del lado del cliente. width:  El ancho de la imagen. Puede ser indicado en pixeles o porcentaje.
Imágenes Ver ejemplo_imagen.html
Contenedores La única función que los contenedores poseen es la de agrupar elementos. Ya sean de línea o bloque. Visualmente no otorgan ninguna característica particular a los elementos que contienen. Contenedor de bloque <div> Contenedor de línea <span> Su verdadera utilidad radica en su uso combinado con las hojas de estilo, que nos permitirá aplicar reglas particulares a los grupos en cuestión para modificar su apariencia e influir en la maquetación de los contenidos de la página.
Listas Como su nombre lo indica, estos elementos nos serán muy útiles para listar cosas.  Existen tres tipos de listas: Lista ordenada  <ol> Lista no ordenada  <ul> Lista de definición  <dl> Para definir su contenido se usan los siguientes elementos: Elemento de lista  <dl> Elemento a definir  <dt> Definición  <dd>
Listas Para una lista ordenada: <ol> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ol> Para una lista de definiciones: <dl> <dt>Primer termino a definir</dt> <dd>Primera definición</dd> <dt>Segundo termino a definir</dt> <dd>Segunda definición</dd> </dl>
Listas Ver ejemplo_listas.html
Tablas Las tablas son entidades complejas que vale la pena conocer bien. Aquí veremos sus aspectos más comunes y utilizados. Los elementos que debemos conocer son: Tabla  <table> Título de la tabla  <caption> Fila  <tr> Celda cabecera  <th> Celda de datos  <td> Una tabla solamente debe usarse para representar  información tabulada , nunca debe emplearse como mecanismo para maquetar un sitio.

Etiquetas XHMTL

  • 1.
  • 2.
    Elementos de TextoElementos de texto: Cabeceras <h1> ... <h6> Párrafos <p> Salto de línea <br /> Preformateado <pre> Cita <q> Cita en bloque <blockquote> Énfasis <em> Fuerza <strong> Código <code> Acrónimo <acronym> Abreviatura <abbr>
  • 3.
    Elementos de Texto Ver ejemplo_texto.html
  • 4.
    Enlaces y Anclas Enlaces y anclas: El elemento que nos permite la creación de vínculos o anclas es <a>. Este elemento sirve para redirigirnos a otro recurso del Web, pero también se puede convertir en el destino de un vínculo externo. <a href=&quot;http://www.google.com.ar/&quot;>Ir a Google</a> O bien como ancla: <a id=&quot;midestino&quot;>Quiero esto como destino</a> <a href=&quot;pagina.html#midestino&quot;>Ir al destino</a>
  • 5.
    Enlaces y Anclas URIs: Las URIs pueden apuntar a diversos recursos: href=&quot;http://www.unsitioweb.com/&quot; href=&quot;#un_ancla&quot; href=&quot;ftp://www.mi_ftp.com/unarchivo.zip&quot; href=&quot;file:///C:/directorio/unarchivo.zip&quot; href=&quot;mailto:gabriel@catfish-project.com.ar&quot;
  • 6.
    Enlaces y Anclas Rutas absolutas y relativas: Una ruta absoluta comienza en la raíz del sitio http://www.sitio.com/carpeta/subcarpeta/documento.html /carpeta/subcarpeta/documento.html Una ruta relativa se escribe en referencia al lugar donde nos encontramos actualmente. Si quisieramos acceder a un documento ubicado en subcarpeta desde la pagina documento.html usaríamos: ../documento2.html
  • 7.
    Enlaces y Anclas Cualquier elemento de línea puede estar contenido entre las etiquetas <a> y </a>. Pero en ninguno de bloque.
  • 8.
    Enlaces y Anclas Atributos del elemento ancla <a>: charset: Indica la codificación de caracteres del documento destino. coords: Permite especificar las coordenadas que definirán una región para un mapa de imagen. href: Un URI que especifica el destino del vínculo. hreflang: Indica la lengua base del documento destino. shape: Especifica el tipo de región a emplear en un mapa de imágen. Valores posibles : rect, rectangle, circ, circle, poly, polygon. type: Establece el MIME del recurso destino.
  • 9.
    Imágenes El elementopara incluír una imagen es <img>: Por defecto las imágenes se comportan como elementos de línea. <img alt=&quot;Un texto alternativo para la figura&quot; src=&quot;imagen.html&quot; height=&quot;100&quot; width=&quot;100&quot; /> No todos los formatos de imagen son accesibles por todos los navegadores. Pero existen tres que podemos considerar universales: JPEG, GIF y PNG
  • 10.
    Imágenes Los atributosde la etiqueta <img> son: alt: Una descripción de la imagen (obligatorio). height: La altura de la imagen. Puede ser indicada en pixeles o porcentaje. ismap: Un URL que se refiere a un mapa de imagen del lado del servidor. longdesc: El URL de una página con una descripción larga de la imagen. src: Un URL con la ruta a la imagen. usemap: Un URL que indica un mapa de imagen del lado del cliente. width: El ancho de la imagen. Puede ser indicado en pixeles o porcentaje.
  • 11.
  • 12.
    Contenedores La únicafunción que los contenedores poseen es la de agrupar elementos. Ya sean de línea o bloque. Visualmente no otorgan ninguna característica particular a los elementos que contienen. Contenedor de bloque <div> Contenedor de línea <span> Su verdadera utilidad radica en su uso combinado con las hojas de estilo, que nos permitirá aplicar reglas particulares a los grupos en cuestión para modificar su apariencia e influir en la maquetación de los contenidos de la página.
  • 13.
    Listas Como sunombre lo indica, estos elementos nos serán muy útiles para listar cosas. Existen tres tipos de listas: Lista ordenada <ol> Lista no ordenada <ul> Lista de definición <dl> Para definir su contenido se usan los siguientes elementos: Elemento de lista <dl> Elemento a definir <dt> Definición <dd>
  • 14.
    Listas Para unalista ordenada: <ol> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ol> Para una lista de definiciones: <dl> <dt>Primer termino a definir</dt> <dd>Primera definición</dd> <dt>Segundo termino a definir</dt> <dd>Segunda definición</dd> </dl>
  • 15.
  • 16.
    Tablas Las tablasson entidades complejas que vale la pena conocer bien. Aquí veremos sus aspectos más comunes y utilizados. Los elementos que debemos conocer son: Tabla <table> Título de la tabla <caption> Fila <tr> Celda cabecera <th> Celda de datos <td> Una tabla solamente debe usarse para representar información tabulada , nunca debe emplearse como mecanismo para maquetar un sitio.