Visualizzare il codice sorgente di qualsiasi pagina HTML è un buon modo per imparare l’HTML sia per i principianti che per i programmatori intermedi. Inoltre, se devi estrarre dati da siti che non limitano tali azioni per i tuoi progetti di web scraping, devi comprendere i blocchi di codice e i tag nel codice sorgente.

Google Chrome ti consente di controllare il codice sorgente di qualsiasi pagina web in due modi. Un modo è visualizzare il codice HTML sorgente direttamente dal server web. Di solito si apre come una singola scheda “Visualizza sorgente”.

Un altro modo è controllare il codice dopo che il browser Web ha ottimizzato il codice sorgente reale e ha aggiunto qualsiasi manipolazione Javascript. Chrome lo mostra come lo strumento Ispeziona elementi e questa utility è effettivamente disponibile a beneficio di qualsiasi sviluppatore.

Sommario

Utilizzo delle scorciatoie

Il modo più semplice per aprire il codice sorgente di una pagina Web in Chrome è tramite la scorciatoia da tastiera.

Per aprire la scheda Visualizza sorgente, premi Ctrl + U su Windows. Su Mac, questa scorciatoia è ⌘-Option-U .

Se devi aprire lo strumento Ispeziona elementi, devi premere Ctrl + Maiusc + C . Puoi anche premere F12 o Ctrl + Maiusc + I per aprire lo strumento Sviluppatori e poi andare alla scheda Elementi.

Utilizzo del menu contestuale

Il menu di scelta rapida (menu di scelta rapida) sulle pagine Web di Google Chrome include anche le opzioni per aprire il codice sorgente. Puoi scegliere di visualizzare il codice sorgente inalterato o il codice dopo l’ottimizzazione da parte del browser.

1. Fai clic con il pulsante destro del mouse in un punto qualsiasi quando ti trovi all’interno della pagina web.
2. Seleziona Visualizza sorgente pagina o Ispeziona in base alle tue necessità. Inspect ti porterà al blocco di codice esatto corrispondente all’elemento grafico su cui hai fatto clic con il pulsante destro del mouse.
   

Modificando l’URL

Un altro modo per visualizzare il codice sorgente consiste nell’aggiungere uno snippet di codice all’URL. Se utilizzi le opzioni di cui sopra per visualizzare il sorgente della pagina, potresti aver visto view-source: nell’indirizzo URL del codice sorgente. Puoi effettivamente inserire questo codice manualmente per eseguire la stessa operazione.

Questo metodo è utile anche se desideri visualizzare il codice sorgente su dispositivi mobili poiché di solito non offrono altri metodi.

1. Fare clic sulla barra degli indirizzi.
2. Premi Home o tieni premuto il tasto sinistro finché il cursore della tastiera non si trova davanti all’URL, anche prima di https://
3. Digita view-source: e premi Invio. Quindi, se l’URL era https://www.google.com , ora dovrebbe diventare view-source:https://www.google.com
   

Tramite il menu Chrome

È anche possibile aprire lo strumento Ispeziona elementi dal menu di controllo di Chrome. Qui puoi aprire lo strumento per sviluppatori che include Elements insieme ad altri strumenti come la console di Chrome.

1. Fai clic sull’icona a tre punti all’interno della finestra di Chrome.
2. Vai su Altri strumenti e seleziona Strumenti per sviluppatori .
   

Comprensione dei codici sorgente

Dopo aver visualizzato il codice sorgente, è necessario conoscere l’Hypertext Markup Language (HTML) per poter analizzare e leggere il codice sorgente. Se non hai familiarità con questo linguaggio di programmazione, ecco alcune cose sul codice per aiutarti a iniziare.

Tag o elementi

Queste sono le parole chiave principali in un codice HTML. Sono chiusi da ‘<>‘ e rappresentano il tipo di contenuto. Un elemento di solito è costituito dal tag di apertura e chiusura per mostrare rispettivamente l’inizio e la fine del contenuto dell’elemento. Ma alcuni elementi utilizzano solo un singolo tag.

Ad esempio:

Ecco un paragrafo

“Ecco un paragrafo” è un elemento paragrafo racchiuso dai tag

e

che specificano questo contenuto come paragrafo.

I tag non fanno distinzione tra maiuscole e minuscole.

Attributi

Queste sono le parole chiave che determinano le proprietà aggiuntive degli elementi HTML. Sono presenti anche all’interno delle parentesi angolari ma dopo la parola chiave del tag di apertura. Alcuni attributi comuni includono classe, titolo, stile, id, ecc.

Ad esempio:

Ecco un paragrafo

Il paragrafo ha l’attributo “para” come identità (id).

Alcuni attributi specifici fanno distinzione tra maiuscole e minuscole e il resto non fa distinzione tra maiuscole e minuscole.

Elementi importanti del codice sorgente

• Head (…) – Fornisce le informazioni della pagina web.
• Titolo () – Mostra il titolo della pagina web. I motori di ricerca come Google Search indicizzano i contenuti del titolo in modo che possa trovare queste pagine Web quando qualcuno le cerca.
• Body (…) – Specifica tutto il contenuto della pagina web.
• Intestazioni: diversi livelli di intestazioni vengono forniti con tag separati come
  

  …

  ,

  …

  e così via. Questi forniscono anche margini automatici prima e dopo l’intestazione.

• Paragrafi

  …

  – Contiene tutto il testo all’interno o all’esterno di un’intestazione.

• Liste – Le liste ordinate che usano lettere o numeri per ordinare la lista usano i tag
  …

  e quelle non ordinate che usano punti elenco usano i tag

  …

  . All’interno di questi tag radice, tutti gli elementi della lista si trovano all’interno di

• …

.

• Immagini () – Non ha bisogno di alcun contenuto e utilizza l’attributo src per specificare la fonte dell’immagine. L’attributo alt specifica il testo alternativo che descrive l’immagine.
• Collegamenti ipertestuali (…) – Utilizza l’attributo href per specificare il collegamento di riferimento. Di solito, è meglio aggiungere l’attributo rel=”noopener noreferrer” ai link esterni.
  Se l’attributo href contiene un hashtag e poi del testo, come link, mostra un collegamento interno all’elemento con l’id link.
• Commenti – Tutti i testi all’interno di ‘‘ sono commenti e possono essere ignorati. Di solito forniscono informazioni aggiuntive sugli elementi successivi.