Se sei nuovo nel settore web o in un veterano esperto, visualizzare la sorgente HTML di diverse pagine Web è qualcosa che probabilmente farai molte volte nel corso della tua carriera.
Per coloro che sono nuovi al web design, la visualizzazione del codice sorgente di un sito è uno dei modi più semplici per vedere come sono fatte certe cose in modo che tu possa imparare da quel lavoro e iniziare a usare determinati codici o tecniche nel tuo lavoro. Come tutti i web designer che lavorano oggi, specialmente quelli che ci sono stati fin dai primi giorni del settore, ed è una scommessa sicura che loro ti dicono che hanno imparato l'HTML semplicemente guardando la fonte delle pagine web che hanno visto e sono rimasti incuriositi di. Oltre a leggere libri sul web design o partecipare a conferenze professionali, la visualizzazione del codice sorgente di un sito è un ottimo modo per i principianti di imparare l'HTML.
Più che solo HTML
Una cosa da ricordare è che i file sorgente possono essere molto complicati (e più complesso è il sito Web che si sta visualizzando, più è complesso il codice del sito). Oltre alla struttura HTML che costituisce la pagina che stai visualizzando, ci saranno anche i CSS (fogli di stile a cascata) che dettano l'aspetto visivo di quel sito. Inoltre, molti siti Web oggi includeranno file di script inclusi insieme all'HTML.
È probabile che siano inclusi più file di script, ognuno dei quali alimenta diversi aspetti del sito. Francamente, il codice sorgente di un sito può sembrare travolgente, soprattutto se sei nuovo a farlo. Non essere frustrato se non riesci a capire cosa sta succedendo con quel sito immediatamente. La visualizzazione del codice sorgente HTML è solo il primo passo in questo processo. Con una piccola esperienza, comincerai a capire meglio come tutti questi pezzi si incastrano per creare il sito web che vedi nel tuo browser. Man mano che acquisirai familiarità con il codice, sarai in grado di imparare di più da esso e non ti sembrerà così scoraggiante.
Quindi, come vedi il codice sorgente di un sito web? Ecco le istruzioni passo passo per farlo utilizzando il browser Google Chrome.
Istruzioni passo passo
-
Apri il Browser web di Google Chrome (se non hai installato Google Chrome, questo è un download gratuito).
-
Vai a pagina web che vorresti esaminare.
-
Pulsante destro del mouse la pagina e guarda il menu che appare. Da quel menu, clicca Visualizza l'origine della pagina.
-
Il codice sorgente per quella pagina verrà ora visualizzato come una nuova scheda nel browser.
-
In alternativa, puoi anche utilizzare le scorciatoie da tastiera di CTRL + U su un PC per aprire una finestra con il codice sorgente di un sito visualizzato. Su un Mac, questa scorciatoia è Comando + Opzione + U.
Strumenti di sviluppo
Oltre al semplice Visualizza l'origine della pagina l'abilità offerta da Google Chrome, puoi anche sfruttare gli eccellenti strumenti per sviluppatori per scavare ancora più in profondità in un sito. Questi strumenti ti permetteranno di vedere non solo l'HTML, ma anche il CSS che si applica agli elementi di visualizzazione in quel documento HTML.
Per utilizzare gli strumenti di sviluppo di Chrome:
-
Aperto Google Chrome.
-
Navigare verso la pagina web che vorresti esaminare.
-
Clicca il icona con tre linee nell'angolo in alto a destra della finestra del browser.
-
Dal menu, passa il mouse sopra Più strumenti e quindi fare clic Strumenti di sviluppo nel menu che appare.
-
Si aprirà una finestra che mostra il codice sorgente HTML sulla sinistra del riquadro e il relativo CSS a destra.
-
In alternativa, se fai clic con il tasto destro del mouse un elemento in una pagina web e selezionare Ispezionare dal menu che appare, verranno visualizzati gli strumenti di sviluppo di Chrome e l'elemento esatto selezionato verrà evidenziato nell'HTML con il CSS corrispondente visualizzato a destra. Questo è super utile se vuoi saperne di più su come è stato realizzato un pezzo specifico di un sito.
Stai leggendo il codice sorgente?
Nel corso degli anni, abbiamo avuto molti nuovi designer sul web che chiedevano se fosse accettabile visualizzare il codice sorgente di un sito e usarlo per la loro istruzione e, in definitiva, per il lavoro che svolgono. Mentre copiare il codice di un sito all'ingrosso e distribuirlo come proprio su un sito non è certamente accettabile, usare quel codice come trampolino da cui trarre insegnamento è in realtà quanti progressi sono fatti in questo settore.
Come accennato all'inizio di questo articolo, è difficile trovare oggi un professionista del Web che non abbia imparato qualcosa visualizzando la fonte di un sito! Sì, la visualizzazione del codice sorgente di un sito è legale. Anche l'utilizzo di quel codice come risorsa per costruire qualcosa di simile va bene. Prendendo il codice così com'è e passandolo come il tuo lavoro è dove inizi a incontrare problemi.
Alla fine, i professionisti del web imparano gli uni dagli altri e spesso migliorano il lavoro che vedono e si ispirano, quindi non esitate a visualizzare il codice sorgente di un sito e utilizzarlo come strumento di apprendimento.
