Desarrollo web N11. HTML Links
hive-154226·@rafaelaquino·
0.000 HBDDesarrollo web N11. HTML Links
Cordiales Saludos <center>  </center> ## 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. <center>  </center> 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. <center>  </center> 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). <center>  </center> Para que el link se genere en una nueva página web, utilizaremos el atributo: ```target="_blank"``` (ver recuadro rojo) <center>  </center> Aquí podemos visualizar mejor cuando ejecutamos ahora el link, se genera una nueva pestaña. <center>  </center> Para que aparezca un **mensaje de ayuda**, descriptivo de nuestro link, lo podemos hacer con: ```title="Ir a Twitter"``` <center>  </center> 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. <center>  </center> Al hacer click en: **Click para ir a una imagen**, nos muestra la imagen que está en nuestro proyecto. <center>  </center> 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. <center>  </center> ##### 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 <center>  </center> Luego lo abriremos desde nuestro Editor: **Geany**. <center>  </center> Ya como el nuevo directorio existe, tan solo lo buscaremos en nuestro sistema de archivos, y lo abrimos. <center>  </center> Aquí ya lo adaptamos a nuestro nuevo ejercicio, borrando la información de la publicación anterior que estaba en nuestro **body**. <center>  </center> ---- <center>  </center> 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. <center>  </center> Dependerá de nosotros modificar el ancho el ancho de la linea, desde más fina a más gruesa (ver recuadro rojo). <center>  </center> Listo ya tenemos nuestra imagen. <center>  </center> 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**. <center>  </center> Esta imagen la debemos guardar en en nuestro proyecto: **web_11**, dentro de la carpeta **images**. <center>  </center> Podemos revisar la imagen, para todo **ok**. <center>  </center> ---- <center>  </center> 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. <center>  </center> ##### 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 "**Tucorreo@dominio.com**" 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 <center>  </center> Te invito a que revises mis tres últimas publicaciones de esta serie de **Desarrollo Web**. [Desarrollo web N07. ✅ Reinicio ➕ Geany](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n07-reinicio-geany) [Desarrollo web N08. Metadatos - head](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n08-metadatos) [Desarrollo web N09. head (favicon - estilos - scripts)](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n09-head-favicon-estilos-scripts) [Desarrollo web N10. Atributo HTML style](https://peakd.com/hive-154226/@rafaelaquino/desarrollo-web-n10-atributo-html-style) <center>  </center> [Mi twitter](https://twitter.com/Rafa_elaquino) Nos vemos en una próxima entrega! Rafael Aquino
👍 amaponian, deadleaf, toronyor, sbi3, sbi-tokens, sneakyninja, thedailysneak, babysavage, pixelfan, ubaldonet, sofiaquino98, aqua.nano, amigoponc, aurodivys, aliento, blocktrades.com, dagmardeeke, larsito, subidu, enrique89, nnnarvaez, cronosclocks, jorgespino, eleazarvo, juliopalomo, jacuzzi, zeruxanime, palimanali, syberia, hivecreators, marile21, encouragement, ikigaidesign, amaillo, erochka, liveofdalla, neruel, noakmilo, karlex77, alejandroloreto, yeral-diaz, mamaemigrante, palabras1, adailsm, flywithmarlin, blocktrades, alpha, roelandp, evelynchacin, waivio.curator, youdontknowme, tattooworld, xeldal, therealwolf, aliento.love, marblely, enki, smartsteem, pacoandujar, marpolaris, fondo, helengutier2, therealsnowjon, nodoninja, mballesteros, fonestreet, macchiata, theycallmedan, threespeakvoter, krrizjos18, gniksivart, diosarich, petrolinivideo, brianoflondon, alenox, curatorhulk, bilpcoinbpc, hexagono6, mariaser, elfino28, osmy91, jmis101, luchyl, hikergirl, jeronimorubio, apshamilton, hamismsf, jpbliberty, podping, yaelg, auracraft, thevil, escuadron201, shadowmyst, gato-raro, lumpymoon, rickyuribe, paula1411, criptocuates, mortsanchezzz, titifritiboys, tecnoticias, omarmontes, joeyarnoldvn, octocel, andresromero, listnerds, ctptips,