Esempio di codice HTML: nozioni di base sullo sviluppo Web

L'HTML è, senza esagerazione, la lingua principale di Internet, nata con essa. Le sue responsabilità includono la progettazione di base delle pagine Web, la loro strutturazione logica e la formattazione. Non c'è bisogno di andare lontano per esempi di HTML, basta aprire il browser. Qualsiasi sito visualizzato è l'HTML che stai cercando. Per conoscerlo più da vicino, guarda la console degli sviluppatori.

Dietro le quinte di Internet

Apri il tuo sito preferito nel browser Google Chrome. Questo browser ha il pannello di sviluppo più conveniente, quindi è l'ideale per l'apprendimento.

Per accedere rapidamente al pannello, premere il tasto di scelta rapida F12 sulla tastiera. Se per qualche motivo non ha funzionato, trova l'elemento necessario nel menu del browser e selezionalo facendo clic su "Strumenti aggiuntivi"> "Strumenti per sviluppatori".

Un nuovo pannello si aprirà con diverse schede, di cui abbiamo bisogno del primo - Elementi. Qui è dove viene descritto l'intero codice HTML della pagina corrente.

Struttura del documento HTML

Con l'aiuto del pannello è possibile capire su un esempio dal vivo come è organizzato il sito, per vedere le sue parti componenti. È importante capire che l'aspetto finale è fornito non solo dal markup HTML, ma anche dagli stili descritti usando i CSS. Nella scheda Elementi puoi vedere solo la struttura di base.

Tutti i componenti della pagina sono disposti in ordine gerarchico. Puoi vedere gli oggetti annidati usando le frecce.

Ad esempio, l'intera pagina HTML è racchiusa in un blocco con il nome HTML, all'interno del quale si trovano i contenitori testa e corpo. Se li espandi, all'interno puoi trovare molti più livelli di elementi con nomi diversi.

Tutto all'interno della sezione principale non viene visualizzato dal browser. L'unica eccezione è il cartiglio, che viene visualizzato nella scheda. Nella "testa" del sito sono le informazioni di servizio necessarie per il corretto funzionamento del browser Internet.

I contenuti della sezione del corpo, al contrario, sono visibili all'utente. La console per sviluppatori ti consente persino di vedere esattamente dove si trova ogni blocco specifico sulla pagina. Per farlo, passa il cursore su di esso.

Lo screenshot mostra come si distingue la barra di navigazione:

C'è anche un elemento DOCTYPE in alto. Si riferisce anche ai dati del servizio.

Tag e i loro attributi

L'abbreviazione HTML significa letteralmente "Hypertext Markup Language". Cioè, qualsiasi pagina web è solo testo contrassegnato in un certo modo. Per la sua formattazione vengono utilizzati elementi speciali: tag (descrittori).

Per distinguere un tag dal testo stesso, è racchiuso tra parentesi angolari. Usando l'esempio del codice HTML, puoi vedere una varietà di tag: html, head, body, header, div. Sono di due tipi:

• I tag di chiusura con contenuto hanno due parti e il testo tra di loro. Ad esempio, il descrittore dell'intestazione è chiudibile. La seconda parte differisce dalla prima dalla presenza di una barra diretta prima del nome del tag.
• I tag senza chiusura senza contenuto sono costituiti da una sola parte. Un esempio è il meta tag.

Si noti che i descrittori HTML sono liberi di incorporarsi a vicenda. L'eccezione è costituita da tag non chiusi che non hanno contenuto, pertanto non è possibile inserire nulla in essi.

È importante seguire l'ordine di chiusura. Nella console puoi vedere con quanta cura si trovano le maniglie annidate. L'elemento esterno non può chiudersi prima di quello interno.

Ogni tag può avere un numero di parametri (attributi) che ne definiscono le proprietà. In HTML, un esempio è il descrittore del collegamento ipertestuale a e il relativo attributo href, che contiene l'indirizzo della pagina a cui verrà effettuato il collegamento quando si fa clic sul collegamento.

Visual Learning HTML

Per i web designer principianti, gli sviluppatori web e solo le persone interessate alle basi della tecnologia Internet, l'apprendimento dell'HTML è il primo passo di un lungo e interessante viaggio. Ci sono centinaia di corsi e libri di testo che presentano informazioni in un'ampia varietà di modi. Scegliere tra loro adatto non è difficile.

Ma non importa quanto sia buono il libro di testo, sono necessari altri due componenti per il successo:

• esperienza di composizione indipendente;
• studiare gli esempi HTML di altre persone.

La console dello sviluppatore nei browser più diffusi (oltre a Google Chrome, i buoni pannelli possono essere trovati in Mozilla Firefox e Internet Explorer) è il modo migliore per esplorare le pagine web. Ti permette di padroneggiare i modelli di layout di base, imparare a vedere la presentazione finale del codice e persino apportare modifiche dinamiche ad esso.