Code n' Social

¿De qué trata esta lección?

En esta lección aprendemos cómo conectar más documentos con enlaces. Una página web generalmente contiene más de un documento HTML: La página principal de cada sitio web es el archivo index, y desde allí puedes acceder a las otras páginas a través de enlaces. Aprenderemos a referirnos a otros sitios web, imágenes y documentos descargables.

Nueva etiqueta de esta lección:
<a> </a> - incluimos en esta etiqueta un texto (o fotografía etc.), en el que podremos hacer clic.
La etiqueta <a> significa etiqueta de anclaje y tiene los siguientes atributos:
href – este atributo / propiedad se utiliza para dar la ruta del archivo que queremos abrir o el sitio web al que queremos llegar, haciendo clic en el texto dado.

target – este atributo se usa para definir cómo queremos abrir la ruta dada en el atributo href: en la misma pestaña del navegador (target = "_ self" o bien no definirla, ya que el comportamiento predeterminado es abrir en la misma pestaña del navegador), o en uno nuevo (en este caso, debemos definirlo como target = "_ blank")..

download – Este atributo no tiene valores. Incluyendo esta palabra clave, podemos expresar que el documento marcado por el atributo href debe descargarse, no abrirse en el navegador.

Ejemplo:
En el navegador aparecerá el texto Read more!, ya que está escrito entre las etiquetas <a>.

La dirección URL de la página wikipedia.org es el valor dado al atributo href. Si hacemos clic en el enlace, esta página aparecerá en una nueva pestaña del navegador. La nueva pestaña aparecerá, porque es el valor _blank del atributo target.

Si queremos abrir otra página web con un enlace, debemos escribir la dirección web completa en la etiqueta <a> (también tenemos que usar el protocolo, por ejemplo, http: // o https: //). La forma más fácil de hacerlo es abrir la página web en un navegador y copiar la dirección desde allí.
Podemos reconocer los enlaces en un sitio web, moviendo el cursor sobre ellos. Generalmente, el cursor cambia su forma a una mano, lo que significa que hay un elemento pulsable.
En general, abrimos páginas que pertenecen a una página web en la misma pestaña, y páginas de otros sitios web en pestañas nuevas.
Si un navegador no puede abrir un documento referido por un enlace, el archivo se descargará automáticamente. Si queremos que se descargue un archivo independientemente de la configuración del navegador, debemos agregar el atributo de descarga a la etiqueta <a>.
Si tenemos contenido más extenso en un sitio web, podemos referir sus partes con un marcador, por lo que podemos saltar directamente a esa sección haciendo clic en un enlace.

Ejemplo:
Creación de un marcador – podemos marcar como marcador cualquier etiqueta HTML, agregándole el atributo id y un valor, como el identificador único de ese elemento.

Referencia al marcador – el atributo href de las etiquetas <a> debe obtener el id del marcador precedido por un símbolo #

En este ejemplo, saltamos al marcador con el id bm, haciendo clic en el texto Jump to the browsers.

Ejercicios

1. Abre el documento index.html e inserta cuatro etiquetas <a> para enlazar los documentos index.html, toplangs.html, aspects.html, tips.html. El texto que mostrarán debe ser el siguiente: Home, Top, Website making, Tips. Además, establece cada enlace en una fila separada.

Ver el resultado

2. En el archivo aspects.html hay una tabla que contiene una celda con tres direcciones de página web. Conviértelos en enlaces, para enlazar a los sitios web correspondientes. El texto que aparece en la celda no debe cambiar.

Ver el resultado

3. Inserta en el archivo aspects.html, dos nuevos enlaces en líneas separadas después de la tabla: My reference work y More about this. El primero debe abrir una imagen en una nueva pestaña con el trabajo de referencia, que es una imagen de la carpeta de imágenes, llamada webpage.jpg, y el segundo enlace debe abrir en una nueva página un documento pdf de la carpeta de archivos, llamado CodersWork.pdf.

Ver el resultado

4. Al comienzo del archivo aspect.html, agrega dos enlaces de marcadores # bm1, # bm2, # bm3 llamados: Website making aspects, My reference work y My timetable. El primero debe llevar a "The most important aspects to consider, while making a website", el segundo al enlace My reference y el tercero en tips.html, a " My timetable ". Cada enlace debe aparecer en una fila diferente

Ver el resultado