Desarrollo web N11. HTML Links

in Develop Spanish2 months ago (edited)

Cordiales Saludos


0_11_portada.png

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.


0_11_link.png

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.


0_11_001.png

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).

0_11_002.png

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

0_11_003.png

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

0_11_004.png

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

0_11_005.png

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.

0_11_006.png

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

0_11_007.png

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.


banner_consejosysugerencias.png

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


0_11_consejo_01.png

Luego lo abriremos desde nuestro Editor: Geany.


0_11_consejo_02.png

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


0_11_consejo_03.png

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


0_11_consejo_04.png



banner_inkscape.png

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.


0_11_inkscape.png

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

0_11_inkscape_02.png

Listo ya tenemos nuestra imagen.

0_11_inkscape_03.png

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.

0_11_inkscape_04.png

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

0_11_inkscape_05.png

Podemos revisar la imagen, para todo ok.

0_11_inkscape_06.png



banner_git_repo_local.png

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.


0_11_git_01.png

Resumen de comandos git, utilizados hasta ahora:
  1. git init --initial-branch=main
  2. git config user.name "Nombre_XXX"
  3. git config user.email "[email protected]"
  4. git config --list
  5. git status
  6. git add .
  7. git commit -m "Mensaje del commit"
  8. git log
  9. git commit --amend
  10. git add Nombre directorio o archivo
  11. git log --oneline


banner_linea.png

Te invito a que revises mis tres últimas publicaciones de esta serie de Desarrollo Web.
Desarrollo web N07. ✅ Reinicio ➕ Geany
Desarrollo web N08. Metadatos - head
Desarrollo web N09. head (favicon - estilos - scripts)
Desarrollo web N10. Atributo HTML style


banner_linea.png

Mi twitter
Nos vemos en una próxima entrega!
Rafael Aquino