Impariamo L’HTML

html

Seconda lezione del corso gratuito di HTML e CSS per diventare web designer

In questa seconda lezione di HTML e CSS andremo ad approfondire il linguaggio HTML, perchè come vi ho detto nella prima lezione, questi sono i due linguaggi base da conoscere e padroneggiare per poter realizzare un sito web e intraprendere la carriera del web designer.

Andiamo quindi ad esaminare i vari componenti del linguaggio HTML.

Per poter realizzare un sito web dobbiamo quindi conoscere quali sono gli elementi utili alla realizzazione delle nostre pagine e alla visualizzazione di diversi tipi di contenuti.

Una panoramica sulla semantica

Quindi cosa sono esattamente la semantica? La semantica in HTML è la pratica di dare contenuto sul significato e struttura della pagina usando l’elemento appropriato. Il codice semantico descrive il valore del contenuto di una pagina, indipendentemente dallo stile o dall’aspetto di quel contenuto. Ci sono molti vantaggi nell’usare elementi semantici, tra cui l’abilitazione di computer, screen reader, motori di ricerca e altri dispositivi per leggere e comprendere adeguatamente il contenuto di una pagina web. Inoltre, l’HTML semantico è più facile da gestire e da utilizzare, poiché mostra chiaramente di cosa tratta ogni contenuto.

Andando avanti, con l’introduzione di nuovi elementi, parleremo di ciò che questi elementi significano realmente e del tipo di contenuto che rappresentano meglio. Prima di farlo, diamo un’occhiata a due elementi: <div> se <span> – che in realtà non contengono alcun valore semantico ed esistono solo per scopi di styling.

Divisioni e Spazi

I divisori o più semplicemente <div>  e <span> sono elementi HTML che fungono da contenitori e che, come detto nel paragrafo precedente, esistono solo per essere utilizzati come elementi di styling per le pagine web. A differenza dei paragrafi – <p> – che hanno un significato semantico definito, i <div> e gli <span> non hanno alcun significato a livello di semantica e sono dei semplici contenitori.

Gli elementi <div> e <span> sono estremamente utili quando si costruiscono le pagine del nostro sito web in quanto ci permettono di applicare stili ben definiti a un insieme di contenuti.

Nello specifico un <div> è un elemento di blocco che viene comunemente utilizzato per identificare il raggruppamento di vari contenuti. Sono quindi molto utili per la realizzazione del layout e del design dei siti web.

Uno <span> invece è un elemento che viene utilizzato per identificare piccoli raggruppamenti di testo all’interno dei nostri blocchi di codice.

Durante il corso vedremo come si utilizzano questi due elementi e come si distinguono attraverso l’utilizzo di classi e id.

Nel momento in cui stiamo per assegnare un valore di classe ad un <div> dobbiamo ricordarci di assegnargli un nome significativo.

Se per esempio abbiamo intenzione di colorare di nero – o di qualsiasi altro colore – un nostro <div> sarebbe giusto assegnare a questo blocco una classe di nome black.

Se però decidessimo di cambiare il colore di questo div in rosa, non avrebbe senso mantenere il nome black per la classe in quanto perderebbe il suo senso logico all’interno dell’itero contesto della nostra pagina web.

Ecco a voi un primo esempio su come si utilizzano questi elementi:

<!-- Questo è un commento in HTML -->
<div class="social">
  <p>Cercami su...</p>
  <p>Ho inoltre un profilo su...</p>
</div>

<!-- Span -->
<p>Il corso gratuito di <span class="tooltip">HTML & CSS</span> continua.</p>

Utilizzo di elementi basati su testo

Esistono molte forme diverse di media e contenuti online; tuttavia, il testo è predominante. Di conseguenza, ci sono diversi elementi per la visualizzazione del testo su una pagina web. Per ora ci concentreremo sugli elementi più popolari, tra cui titoli, paragrafi, testo in grassetto per mostrare l’importanza e corsivo per l’enfasi. Più tardi, nella lezione 6, “Lavorare con la tipografia”, daremo un’occhiata più da vicino a come applicare lo stile al testo.

Titoli

In HTML esistono sei livelli di intestazioni e vanno dall’<h1> all’<h6>.

I titoli – o intenstazioni – ci aiutano a distinguere il contenuto del nostri blocchi e la loro gerarchia e per gli utenti – ricordatevi di sempre di mettervi dalla parte dell’utente quando realizzate le vostre pagine web – questi sono elementi chiave durante la lettura dei nostri contenuti.

I titoli sono inoltre importanti anche per i motori di ricerca in quanto li aiutano nell’indicizzazione e nello stabilire il tipo di contenuto di una pagina.

Le intestazioni devono essere utilizzate in un ordine pertinente al contenuto di una pagina. L’intestazione principale di una pagina o sezione deve essere contrassegnata con un elemento <h1> e le intestazioni successive devono utilizzare gli elementi <h2>, <h3>, <h4>, <h5> e <h6>  -se necessario -.

Ecco un esempio di HTML per tutti i diversi livelli di intestazione e il risultato visuale nel browser:

Written by: auritidesign

Lascia un commento