Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vinculos

736 views

Published on

Vinculos HTML

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Vinculos

  1. 1. V í N C U L O S H T M L Por: Juan Carlos Rosales Larralde
  2. 2. Que es HTML ? <ul><li>HTML es el acrónimo inglés de H yper T ext M arkup L anguage, que se traduce al español como Lenguaje de Marcas Hipertextuales </li></ul><ul><li>Es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas Web </li></ul>
  3. 3. Código HTML <ul><ul><li><HEAD> </li></ul></ul><ul><ul><li><TITLE>El manual en castellano</TITLE> </li></ul></ul><ul><ul><li><LINK title=&quot;El manual en neerlandés&quot; </li></ul></ul><ul><ul><li>type=&quot;text/html&quot; </li></ul></ul><ul><ul><li>rel=&quot;alternate&quot; </li></ul></ul><ul><ul><li>hreflang=&quot;nl&quot; </li></ul></ul><ul><ul><li>href=&quot;http://algunsitio.com/manual/neerlandes.html&quot;> </li></ul></ul><ul><ul><li><LINK title=&quot;El manual en portugués&quot; </li></ul></ul><ul><ul><li>type=&quot;text/html&quot; </li></ul></ul><ul><ul><li>rel=&quot;alternate&quot; </li></ul></ul><ul><ul><li>hreflang=&quot;pt&quot; </li></ul></ul><ul><ul><li>href=&quot;http://algunsitio.com/manual/portugues.html&quot;> </li></ul></ul><ul><ul><li><LINK title=&quot;El manual en árabe&quot; </li></ul></ul><ul><ul><li>type=&quot;text/html&quot; </li></ul></ul><ul><ul><li>rel=&quot;alternate&quot; </li></ul></ul><ul><ul><li>charset=&quot;ISO-8859-6&quot; </li></ul></ul><ul><ul><li>hreflang=&quot;ar&quot; </li></ul></ul><ul><ul><li>href=&quot;http://algunsitio.com/manual/arabe.html&quot;> </li></ul></ul><ul><ul><li><LINK lang=&quot;fr&quot; title=&quot;La documentation en Fran&ccedil;ais&quot; </li></ul></ul><ul><ul><li>type=&quot;text/html&quot; </li></ul></ul><ul><ul><li>rel=&quot;alternate&quot; </li></ul></ul><ul><ul><li>hreflang=&quot;fr&quot; </li></ul></ul><ul><ul><li>href=&quot;http://algunsitio.com/manual/frances.html&quot;> </li></ul></ul><ul><ul><li></HEAD> </li></ul></ul>
  4. 4. Cualidades de HTML <ul><li>Creación de textos enriquecidos </li></ul><ul><li>Documentos estructurados </li></ul><ul><li>Características para hipertexto y para documentos interactivos </li></ul><ul><li>Asociación entre recursos a través de vínculos (o enlace, o hipervínculo), la estructura básica del hipertexto. </li></ul>
  5. 5. Vínculo HTML que es ? <ul><li>Un vínculo es una conexión desde un recurso Web a otro </li></ul><ul><li>Esta referencia establece una relación implícita entre el documento y el recurso vinculado </li></ul><ul><li>Aunque es un concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web </li></ul>
  6. 6. Vínculos HTML <ul><li>COMPONENTES </li></ul><ul><li>El tag HTML a </li></ul><ul><li>El atributo target </li></ul><ul><li>Información extra </li></ul><ul><li>El tag HTML link </li></ul><ul><li>TIPOS </li></ul><ul><li>Visuales (ubicados dentro del contenido del documento) </li></ul><ul><li>Ocultos (definiendo información relacional generalizada). </li></ul>
  7. 7. Componentes de un Vínculo <ul><li>Un vínculo tiene dos extremos (llamados en inglés anchors, anclas) </li></ul><ul><li>Una dirección </li></ul><ul><li>El vínculo comienza en el &quot;ancla de origen&quot; (origen del vínculo) y apunta al &quot;ancla destino&quot; (destino del vínculo), que puede ser cualquier recurso de la Web (imagen, vídeo clip, sonido, programa, doc HTML, elemento dentro de un documento HTML, etc.) </li></ul>
  8. 8. El tag HTML a <ul><li>El tag HTML a puede ser usado para insertar vínculos dentro del contenido de un documento </li></ul><ul><li>Básicamente debe constar de, al menos, el contenido y la dirección del recurso “href” </li></ul>
  9. 9. El atributo target <ul><li>Permite decidir dónde el recurso vinculado mediante el tag HTML a debe ser mostrado </li></ul><ul><ul><li>nueva ventana del navegador </li></ul></ul><ul><ul><li>en un marco específico </li></ul></ul><ul><ul><li>en la misma ventana </li></ul></ul><ul><li><a href=&quot;http://www.url.com&quot; target=&quot;_blank&quot;>URL</a> </li></ul><ul><li>El vínculo abierto en una nueva ventana </li></ul><ul><li><a href=&quot;http://www.url.com&quot; target=&quot;main&quot;>URL</a> </li></ul><ul><li>El vínculo será abierto en un marco llamado &quot;main&quot; </li></ul>
  10. 10. Información extra <ul><li>Existen atributos para los tags de vínculos que pueden proveer información </li></ul><ul><li>En el siguiente ejemplo, esta un vínculo que se verá exactamente como el del primer ejemplo, pero agregará cierta información que puede resultar muy útil para los motores de búsqueda </li></ul><ul><li>Aprende m&aacute;s acerca del <a href=&quot;http://www.htmlquick.com/es/reference/tags/a.html&quot; type=&quot;text/html&quot; hreflang=&quot;es&quot; charset=&quot;utf-8&quot; rel=&quot;help&quot;>tag HTML a</a> </li></ul><ul><li>Aprende más acerca del tag HTML a </li></ul>
  11. 11. El tag HTML link <ul><li>Ofrece información relacional generalizada sobre el documento </li></ul><ul><li>En el ejemplo siguiente se definen seis tags que proveen esta información relacional: Un documento actuando como índico, el documento previo y próximo en una secuencia, un documento proporcionando declaraciones de derechos de copia, una versión alternativa del documento diseñada para impresión y un archivo de hojas de estilos conteniendo clases. </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;index&quot; href=&quot;index.html&quot; /> </li></ul><ul><li><link rel=&quot;prev&quot; href=&quot;doc1.html&quot; /> </li></ul><ul><li><link rel=&quot;next&quot; href=&quot;doc3.html&quot; /> </li></ul><ul><li><link rel=&quot;copyright&quot; href=&quot;copyright.html&quot; /> </li></ul><ul><li><link rel=&quot;alternate&quot; media=&quot;print&quot; href=&quot;doc2-printer.html&quot; /> </li></ul><ul><li><link type=&quot;text/css&quot; href=&quot;basic.css&quot; media=&quot;screen&quot; /> </li></ul><ul><li></head> </li></ul>
  12. 12. NÓTESE EL COLOR AZUL NO TESE
  13. 13. Crear vínculos en Moodle “ Do it yourself”
  14. 14. Crear el recurso nuevo
  15. 15. Asignarle un nombre
  16. 16. Escribir texto, seleccionar, vincular
  17. 17. Tipo de vínculo, accion
  18. 18. Referencias: <ul><li>http://html.conclase.net/w3c/html401-es/struct/links.html#h-12.3.2 </li></ul><ul><li>http://www.htmlquick.com/es/tutorials/links.html </li></ul><ul><li>http://www.hipertexto.info/documentos/introduc.htm </li></ul>
  19. 19. ALGUNA PREGUNTA ?
  20. 20. ?
  21. 21. APLAUSOS !!

×