Dall’inizio di Internet, l’HTML è stato fondamentale per far funzionare il world wide web e apparire come volevamo. Diamo un’occhiata a cos’è l’HTML e come si trasforma nelle pagine che vedi ogni giorno.
La spina dorsale di Internet
HTML sta per “linguaggio di markup ipertestuale”. È un linguaggio di codifica utilizzato per creare pagine che un browser Web può visualizzare. La maggior parte delle pagine web che trovi su Internet, inclusa quella su cui stai leggendo questo articolo in questo momento, sono archiviate come file HTML. I siti web sono un insieme di pagine HTML correlate memorizzate su un server da qualche parte. Ecco perché la lingua viene spesso chiamata la “spina dorsale di Internet”.
Ogni volta che visiti una pagina su Internet, stai essenzialmente richiedendo un file HTML archiviato sul server. Quindi, il browser che stai utilizzando, come Chrome o Firefox, analizzerà l’HTML e te lo visualizzerà nel modo previsto.
L’universalità e la versatilità dell’HTML lo rendono il linguaggio di markup più popolare al mondo. La maggior parte degli sviluppatori Web front-end inizia imparando a codificare in HTML. Gli strumenti drag-and-drop e gli editor WYSIWYG vengono infine tradotti in HTML in modo che i browser possano analizzarli.
IMPARENTATO: Che cos’è un linguaggio di marcatura?
Come funziona l’HTML
Come qualsiasi linguaggio di programmazione, l’HTML sembra un insieme di comandi e blocchi di testo prima di essere trasformato in visuale frontale. Se sei curioso di vedere come appare l’HTML in questa particolare pagina e sei su un desktop o laptop, prova a fare clic con il pulsante destro del mouse in un punto qualsiasi di questa pagina e seleziona “Visualizza origine pagina” (l’opzione può variare a seconda del tuo browser ). Dovrebbe portarti a un gigantesco muro di codice.
La maggior parte dell’HTML viene creata utilizzando “blocchi di elementi”, che sono frammenti di codice HTML che separano diversi elementi su una pagina. Ad esempio, il corpo di questo articolo è un blocco di elementi, così come il menu, i consigli di seguito e il piè di pagina. Questi elementi sono codificati a modo loro, poiché potrebbero comportarsi in modo diverso.
Una parte cruciale della creazione di pagine HTML è l’uso dei fogli di stile a cascata (CSS). Questi sono documenti che definiscono come dovrebbero apparire particolari elementi di una pagina. Ad esempio, quanto dovrebbero essere grandi le immagini, quali caratteri dovrebbero apparire su una pagina e come dovrebbe rispondere una pagina web quando viene ridimensionata o allungata. Questi sono tutti fondamentali per creare siti Web attraenti, coesi ed eleganti. Se hai notato che i siti web hanno iniziato ad avere un aspetto migliore nell’ultimo decennio, il motivo principale è il crescente utilizzo di CSS. Puoi leggere di più sui CSS qui.
Una delle cose migliori dell’HTML è la sua capacità di eseguire script dinamici tramite JavaScript o JS. Questi script possono creare elementi dinamici. Ad esempio, su alcuni siti Web, passare con il mouse su un’immagine ti consentirà di ingrandirla. Puoi ottenere questo effetto codificando in un elemento JavaScript.
IMPARENTATO: Come disabilitare (e abilitare) JavaScript in Google Chrome
Nozioni di base sull’HTML
Sebbene l’HTML sia un linguaggio abbastanza complesso con tonnellate di tag e blocchi diversi, ci sono alcuni codici HTML che potrebbero tornare utili durante la navigazione sul Web. Ecco un paio di tag HTML di base che potresti incontrare.
<a href="https://www.howtogeek.com">How-to Geek</a>
How-To Geek
tu usi il <a> comando per creare un collegamento. L’URL è il punto a cui punterà il collegamento e il testo che recita “How-to Geek” è come apparirà a un utente finale.
<b>bold</b> <i>italic</i> <u>underline</u>
grassetto corsivo sottolineare
Puoi usare il <b>, <i>, e <u> per applicare le opzioni di formattazione del testo standard: grassetto, corsivo e testo sottolineato.
<img src="https://www.howtogeek.com/752587/what-is-html/picture.jpg">
Il <img> tag viene utilizzato per incorporare un’immagine in una pagina. Estrarrà l’immagine dallo stesso dominio oppure puoi puntarla a un dominio esterno. Puoi anche personalizzarlo con alcuni attributi aggiuntivi, come il ridimensionamento e il testo alternativo.
<h1>heading 1</h1> <p>paragraph</p>
Quelli sopra sono i tag di intestazione e paragrafo. Simile a come Microsoft Word ti consente di ordinare il testo in intestazioni e testo del corpo, HTML può anche formattare il testo in base alle opzioni di intestazione e paragrafo predefinite. Questi formati sono definiti utilizzando il foglio di stile CSS.
<p style="color:edr;">red paragraph</p>
Puoi anche usare il "style" attributo per personalizzare il testo con varie impostazioni di stile, come il colore del testo, il colore dello sfondo e la dimensione del carattere.
Se sei interessato a saperne di più sulle opzioni di formattazione HTML, dai un’occhiata alle risorse gratuite di W3Schools. Troverai un elenco completo di tag HTML che puoi utilizzare per iniziare a creare le tue pagine web.
IMPARENTATO: Che cos’è il “Responsive Design” e come lo si utilizza?
