Etiquetas XHTML
Elementos de Texto Elementos de texto: Cabeceras  <h1> ... <h6>  Párrafos  <p> Salto de línea  <br />  Preformateado  <pre...
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 sir...
Enlaces y Anclas  URIs: Las URIs pueden apuntar a diversos recursos: href=&quot;http://www.unsitioweb.com/&quot; href=&quo...
Enlaces y Anclas  Rutas absolutas y relativas: Una ruta absoluta comienza en la raíz del sitio  http://www.sitio.com/carpe...
Enlaces y Anclas  Cualquier  elemento de línea  puede estar contenido entre las etiquetas <a> y </a>.  Pero en ninguno de ...
Enlaces y Anclas  Atributos del elemento ancla <a>: charset:  Indica la codificación de caracteres del documento 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...
Imágenes Los atributos de la etiqueta <img> son: alt:  Una descripción de la imagen (obligatorio). height:  La altura de l...
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. Visualmen...
Listas Como su nombre lo indica, estos elementos nos serán muy útiles para listar cosas.  Existen tres tipos de listas: Li...
Listas Para una lista ordenada: <ol> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer...
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 utilizado...
Upcoming SlideShare
Loading in...5
×

Etiquetas XHMTL

480

Published on

Presentación de la clase "Presentando XHTML"

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
480
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Etiquetas XHMTL"

  1. 1. Etiquetas XHTML
  2. 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. 3. Elementos de Texto Ver ejemplo_texto.html
  4. 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. 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. 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. 7. Enlaces y Anclas Cualquier elemento de línea puede estar contenido entre las etiquetas <a> y </a>. Pero en ninguno de bloque.
  8. 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. 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. 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. 11. Imágenes Ver ejemplo_imagen.html
  12. 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. 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. 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. 15. Listas Ver ejemplo_listas.html
  16. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×