Presentación de la clase "Presentando XHTML"

1. Etiquetas XHTML

2. 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>

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

10. 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.

11. Imágenes Ver ejemplo_imagen.html

12. 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.

13. 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>

14. 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>

15. Listas Ver ejemplo_listas.html

16. 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.