Com veure l'origen HTML a Google Chrome

Obteniu informació sobre com es va crear un lloc web en veure el codi font

Quan vaig començar la meva carrera com a dissenyador web, he après tant revisant el treball d'altres dissenyadors web que admirava. No estic sol en això. Ja sigui que sigui nou en la indústria web o un veterà experimentat, veure la font HTML de diferents pàgines web és una cosa que és probable que feu moltes vegades al llarg de la vostra carrera.

Per als que són nous en disseny web, veure el codi font d'un lloc és una de les maneres més fàcils de veure com es fan certes coses perquè pugueu aprendre d'aquest treball i començar a utilitzar determinats codis o tècniques en el vostre propi treball. Com qualsevol dissenyador web que treballa avui en dia, especialment aquells que ho han estat des dels primers temps de la indústria, i és una aposta segura que amb ells li diuen que van aprendre HTML simplement veient la font de les pàgines web que veien i es van intrigar per. A més de llegir llibres de disseny web o assistir a conferències professionals , veure el codi font d'un lloc és una manera fantàstica perquè els principiants aprenguin HTML.

Més que només HTML

Una cosa a recordar és que els fitxers d'origen poden ser molt complicats (i com més complex sigui el lloc web que esteu visualitzant, més complex serà el codi del lloc). A més de l' estructura HTML que compon la pàgina que esteu visualitzant, també hi haurà CSS (fulls d'estil en cascada) que dictin l'aspecte visual d'aquest lloc. A més, molts llocs web d'avui inclouran fitxers de seqüències d'ordres inclosos juntament amb l'HTML.

És probable que hi hagi diversos fitxers de seqüència de comandaments inclosos, de fet, cadascun d'ells potenciar diferents aspectes del lloc. Francament, el codi font d'un lloc pot semblar aclaparador, especialment si sou nou en fer-ho. No us trobeu frustrats si no podeu esbrinar què passa amb aquest lloc immediatament. Veure el codi HTML és el primer pas d'aquest procés. Amb una mica d'experiència, començareu a comprendre millor com totes aquestes peces s'ajusten per crear el lloc web que veieu al vostre navegador. A mesura que us familiaritzeu amb el codi, podreu obtenir-ne més informació i no semblarà molest per a vosaltres.

Llavors, com veu el codi font d'un lloc web? Aquí teniu les instruccions pas a pas per fer-ho mitjançant el navegador Google Chrome.

Instruccions pas a pas

  1. Obriu el navegador web Google Chrome (si no teniu instal·lat Google Chrome, aquesta és una descàrrega gratuïta).
  2. Aneu a la pàgina web que voleu examinar .
  3. Feu clic amb el botó dret a la pàgina i mira el menú que apareix. Des d'aquest menú, feu clic a Mostra l'origen de la pàgina .
  4. El codi font d'aquesta pàgina apareixerà ara com una pestanya nova al navegador.
  5. D'altra banda, també podeu utilitzar les dreceres de teclat de CTRL + U en una PC per obrir una finestra amb el codi font d'un lloc que es mostra. A Mac, aquesta drecera és Command + Alt + U.

Eines de desenvolupament

A més de la senzilla capacitat de visualització de la pàgina de visualització que ofereix Google Chrome, també podeu aprofitar les seves excel·lents eines de desenvolupador per aprofundir en un lloc. Aquestes eines us permetran no només veure l'HTML, sinó també el CSS que s'aplica per visualitzar elements en aquest document HTML.

Per utilitzar les eines de desenvolupador de Chrome:

  1. Obre Google Chrome .
  2. Aneu a la pàgina web que voleu examinar .
  3. Feu clic a la icona amb tres línies a l'extrem superior dret de la finestra del navegador.
  4. Des del menú, feu clic a Més eines i, a continuació, feu clic a Eines de desenvolupador al menú que apareix.
  5. Això obrirà una finestra que mostrarà el codi font HTML a l'esquerra del panell i el CSS relacionat a la dreta.
  6. D'altra banda, si feu clic amb el botó dret a un element d'una pàgina web i seleccioneu Inspeccionar des del menú que apareix, apareixeran les eines de desenvolupador de Chrome i l'element exacte que hagi seleccionat es ressaltarà en HTML amb el CSS corresponent que es mostra a la dreta. Això és molt útil si voleu obtenir més informació sobre com es va crear una peça específica d'un lloc.

Està veient el codi font legal?

Al llarg dels anys, he tingut molts dissenyadors web nous que qüestionen si és acceptable veure el codi font d'un lloc i usar-lo per a la seva educació i, en definitiva, pel treball que fan. Si bé copiar el codi d'un lloc a l'engròs i passar-lo com un de propi en un lloc, certament no és acceptable, l'ús d'aquest codi com a trampolí per aprendre és, en realitat, quants avenços es fan en aquesta indústria.

Com he esmentat al principi d'aquest article, difícilment trobareu avui dia un professional web que no ha après alguna cosa per veure la font d'un lloc. Sí, veure el codi font d'un lloc és legal. L'ús d'aquest codi com a recurs per construir alguna cosa similar també està bé. Prenent el codi tal i com ho està passant, ja que el vostre treball és on es comença a trobar problemes.

Al final, els professionals de la xarxa s'aprenen els uns dels altres i sovint milloren el treball que veuen i s'inspiren, així que no dubti a veure el codi font d'un lloc i utilitzar-lo com a eina d'aprenentatge.