Desarrollo web N11. HTML Links

Desarrollo web N11. HTML Links | Ecency

Cordiales Saludos

Links

Uno de los elementos más importantes dentro de nuestro web, son lo hipervínculos, los cuales son los enlaces a otras páginas web, recursos, imágenes, entre otros.

Los enlaces (links), nos permiten profundizar sobre algún tópico, frase, etc. y de allí vine la pálabra navegar por internet. El ir y venir de una página web a otra o dentro de una misma web ir de un lugar a otro.

Este es el formato básico del link en HTML.

Cuando ejecutemos la nuestra web, vemos el link: Click para ir a mi Twitter, de color azul y subrayado de azul tambien (ver flecha roja). En esta oportunidad realizaremos el link a una URL, externa, específicamente a una web.

Al ejecutar el Click, en el enlace, se direge automáticamente a nuestro twitter. Como puedes notar al hacer click se sobre impone sobre la pestaña de nuestro index.html (ver recuadro rojo).

Para que el link se genere en una nueva página web, utilizaremos el atributo: target="_blank" (ver recuadro rojo)

Aquí podemos visualizar mejor cuando ejecutamos ahora el link, se genera una nueva pestaña.

Para que aparezca un mensaje de ayuda, descriptivo de nuestro link, lo podemos hacer con: title="Ir a Twitter"

Además de porder desplazarnos con un link a una web externa (recuadro negro), también podemos hacer un link a un recurso de nuestra web (recuadro rojo), en esta oportunidad iremos a una imagen que tenemos en nuestro directorio.

Al hacer click en: Click para ir a una imagen, nos muestra la imagen que está en nuestro proyecto.

Más adelante veremos que también podemos hacer otros tipos de enlaces donde se involucran: botones, menús, listas,etc.

Estas publciaciones pretender animate al estudio del Desarrollo Web, veremos las nociones básicas, que te darán una visión general de todo lo que necesitamos para entrar a este mundo de la creación de páginas webs.

Duplicando un proyecto desde la terminal

En la publciación anterior duplicamos nuestro proyecto a través de nuestro sistema de archivos. En esta oportunidad lo realizaremos a través de la terminal. Es muy fácil, tan solo utilizaremos el comando:

cp -r web_10/ web_11

Lo cual realiza la copia de el directorio existente web_10 a uno nuevo denominado web_11

Luego lo abriremos desde nuestro Editor: Geany.

Ya como el nuevo directorio existe, tan solo lo buscaremos en nuestro sistema de archivos, y lo abrimos.

Aquí ya lo adaptamos a nuestro nuevo ejercicio, borrando la información de la publicación anterior que estaba en nuestro body.

Utilizaremos el programa inkscape, para guardar una captura de pantalla como imagen, la cual nos servirá como ejemplo para realizar un link a una imagen.

Después de realizar la captura de pantalla (en esta oportunidad seleccioné una parte de mi pantalla), entramos a Inkscape y la pegamos (la captura de pantalla) con Ctrl + V, en nuestra área de trabajo. A continuación le agragamos un recuadro en el borde, para hacerle un marco a la imagen.

Dependerá de nosotros modificar el ancho el ancho de la linea, desde más fina a más gruesa (ver recuadro rojo).

Listo ya tenemos nuestra imagen.

Corresponde ahora guardarla y exportarla en formato .png. Primeramente seleccionamos toda la imagen más el recuadro recien agregado y agrupamos todos estos elementos con Ctrl + G. Luego (vr flecha roja) buscamos la ruta donde guardaremos nuestra imagen y le colocaremos un nombre: captura_pantalla.png.

Esta imagen la debemos guardar en en nuestro proyecto: web_11, dentro de la carpeta images.

Podemos revisar la imagen, para todo ok.

Continuando con nuestro repositorio local en git, hoy les traigo un nuevo comando git log --oneline. Al utilizar la bandera --oneline nos muestra información resumida (en una sola linea) la información de cada commit.

Notarás que a medida que utilicemos git, se hace natural o vamos teniendo una memoria muscular que hace que los comandos usados los aprendamos y utilicemos con naturalidad. Insisto en el uso de git, porque es una herramienta de trabajo que te servirá cuando entres al mundo laborar. También git es un requisito indispensable, en muchas ofertas de trabajo.