Este documento describe los enlaces o links en HTML. Explica que los links crean vínculos entre elementos de una página o hacia otros recursos. Define la URL y sus partes. Luego discute las rutas relativas y absolutas para acceder a elementos dentro o fuera de un sistema. Finalmente, proporciona ejemplos de código para diferentes tipos de enlaces como enlaces a páginas, secciones, correos electrónicos y más.
Módulo 4 del
Curso IxDA BA 2012: Introducción al diseño y maquetación de interfaces web.
http://ixda.com.ar/?p=602
* Cómo se construye una página
* Marcado semántico, accesibilidad
* Uso apropiado de elementos más comunes
. Listas, links, imágenes, encabezados
. Elementos de bloque vs línea
. Árbol de elementos, jerarquía
* Doctype, validación
* URLs, la web como red de recursos
* CSS, separación de contenido y presentación
* Clases y IDs, selectores semánticos, cascada
* El modelo de caja, posicionamiento, elementos flotantes
* Fuentes, font stacks, tamaños, tipografías básicas, font-face, licencias
* Recorte de imágenes
* Errores más comunes
* Impacto en el posicionamiento en buscadores
Módulo 4 del
Curso IxDA BA 2012: Introducción al diseño y maquetación de interfaces web.
http://ixda.com.ar/?p=602
* Cómo se construye una página
* Marcado semántico, accesibilidad
* Uso apropiado de elementos más comunes
. Listas, links, imágenes, encabezados
. Elementos de bloque vs línea
. Árbol de elementos, jerarquía
* Doctype, validación
* URLs, la web como red de recursos
* CSS, separación de contenido y presentación
* Clases y IDs, selectores semánticos, cascada
* El modelo de caja, posicionamiento, elementos flotantes
* Fuentes, font stacks, tamaños, tipografías básicas, font-face, licencias
* Recorte de imágenes
* Errores más comunes
* Impacto en el posicionamiento en buscadores
Developing Offline Mobile Apps With Salesforce Mobile SDK SmartStoreSalesforce Developers
At some point, all mobile app users lose their data signal. Join us to learn best-practices for coding for offline requirements with the salesforce.com Mobile SDK. We'll develop a simple app using SmartStore offline storage, highlighting the new SmartSQL and SmartSync features. With these tools, you can take your mobile apps to the next level, developing native and hybrid applications on iOS and Android that have offline access to your data.
Cloud State of the Union for Java DevelopersBurr Sutter
This presentation provides a broad overview of what is going on in the Cloud computing world - for Java developers - presented on Dec 21st 2010 at the Atlanta Java Users Group - ajug.org - no audio was recorded.
Similar to frameworks like Rails and Express, Leap was born from the need to rapidly generate several Apex classes that incorporate best practices and patterns. Join us and gain access to a new online development framework for auto-generating and maintaining Apex classes throughout the development lifecycle.
Developing Offline Mobile Apps With Salesforce Mobile SDK SmartStoreSalesforce Developers
At some point, all mobile app users lose their data signal. Join us to learn best-practices for coding for offline requirements with the salesforce.com Mobile SDK. We'll develop a simple app using SmartStore offline storage, highlighting the new SmartSQL and SmartSync features. With these tools, you can take your mobile apps to the next level, developing native and hybrid applications on iOS and Android that have offline access to your data.
Cloud State of the Union for Java DevelopersBurr Sutter
This presentation provides a broad overview of what is going on in the Cloud computing world - for Java developers - presented on Dec 21st 2010 at the Atlanta Java Users Group - ajug.org - no audio was recorded.
Similar to frameworks like Rails and Express, Leap was born from the need to rapidly generate several Apex classes that incorporate best practices and patterns. Join us and gain access to a new online development framework for auto-generating and maintaining Apex classes throughout the development lifecycle.
1. Desarrollo web con Flash Práctica 2
Práctica 2 Links
Una de las principales características del HTML son los links o también conocidos como
enlaces. Los links crean un vínculo entre un elemento de una página hacia otra, a algún
recursos o incluso una sección de la misma página.
Url (Uniform Resource Locator): establece un único identificador para cada recurso dentro
de la red, el cual permite identificar y localizar de manera única y localizar a ese recurso,
permite diferenciar una página de otra.
http://www.unam.com.mx
http://www.unam.com.mx/pagina/es/36/preguntas-frecuentes
http://www.alistapart.com/comments/webstandards2008?page=5#42
Partes:
• Protocolo (http://): Mecanismo para acceder al recurso.
• Servidor (www.alistapart.com): Es el nombre del servidor que se quiere acceder.
• Ruta /comments/webstandards2008): Acceso dentro del servidor.
• Consulta (?page=5): Información que el servidor usa para resolver la dirección.
• Sección (#42): Alguna sección dentro de la página.
Carácter original Carácter codificado Carácter original Carácter codificado
/ %2F ¿ %3F
: %3A @ %40
= %3D & %26
“ %22 %5C
‘ %60 ~ %7E
(espacio) %20 | %7C
Ing. Hugo Mendieta Pacheco 1
2. Desarrollo web con Flash Práctica 2
Rutas Relativas y Absolutas
Dentro de las computadoras existen dos maneras para acceder a elementos, tanto
internos como externos. Para poder acceder a elementos fuera del sistema actual, o
elementos cuya ubicación no cambia, se usan las rutas absolutas para accesos dentro del
sistema desde la posición actual. Una ruta relativa busca abreviar el acceso.
Ing. Hugo Mendieta Pacheco 2
3. Desarrollo web con Flash Práctica 2
Ejercicio 1:
Basándose en el diagrama anterior realice las actividades que el instructor indique.
Enlaces Básicos
Etiqueta Atributos comunes Tipo Descripción
a name=”nombre” En línea Enlazar recursos
href=”url”
Ejemplo: <a href=”http://www.unam.com.mx”>UNAM</a>
Enlaces a una misma página
<a name=”inicio”></a>
...
<a href=”#inicio”>Volver al inicio de la página</a>
<h1 id=”inicio”>Título de la página</h1>
...
<a href=”#inicio”>Volver al inicio de la página</a>
Ing. Hugo Mendieta Pacheco 3
4. Desarrollo web con Flash Práctica 2
Otros enlaces
Etiqueta Atributos comunes Tipo Descripción
script src=”url” Bloque y en Enlaza o define un código
type=”tipo_contenido” línea
link href=”url” Etiqueta vacía Enlaza o relaciona documentos o
type=”tipo_contenido” recursos
rel=”tipo”
Ejemplos:
<head>
. . .
<script type="text/javascript"
src="http://www.ejemplo.com/js/inicializar.js"></script>
</head>
<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function() { alert("La página se ha cargado completamente"); }
//]]>
</script>
</head>
<body>
...
</body>
</html>
<head>
. . .
<link rel="stylesheet" type="text/css" href="/css/estilo.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
</head>
<head>
. . .
<link rel="stylesheet" type="text/css" href="/css/comun.css"
media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />
</head>
Ing. Hugo Mendieta Pacheco 4
5. Desarrollo web con Flash Práctica 2
Enlace a un mail
<a href="mailto:nombre@direccion.com" title="Más información">
Solicita más información
</a>
. . .
<!-- Envío del correo electrónico a varias direcciones a la vez -->
<a href="mailto:nombre@direccion.com,otro_nombre@direccion.com">
Solicita más información
</a>
. . .
<!-- Añadir un "asunto" inicial al correo electrónico -->
<a href="mailto:nombre@direccion.com?subject=Más información">
Solicita más información
</a>
. . .
<!-- Añadir un texto inicial en el cuerpo del correo electrónico -->
<a href="mailto:nombre@direccion.com?body=Estaría interesado en solicitar más
información sobre sus productos">
Solicita más información
</a>
Ejercicio 2:
Pruebe los códigos de los ejemplos anteriores.
Ing. Hugo Mendieta Pacheco 5