Gli sviluppatori Web creano pagine in HTML, scegliendo tra una gamma di elementi. elementi HTML, come "div" definire il contenuto delle pagine web, che possono includere testo, dati e altri media. Un elemento HTML ha un tag di apertura, un tag di chiusura, alcuni contenuti, e gli attributi opzionali. Questi attributi vengono visualizzati come parte del tag di apertura e indicano ulteriori informazioni su l'elemento, come la sua classe o ID designato.

Elementi HTML

Le pagine Web possono includere elementi "div" per definire la struttura e il contenuto. La seguente sintassi di esempio markup HTML dimostra tra cui un elemento semplice "div" con alcuni contenuti del testo:

<Div> Ecco il contenuto del testo. </ Div>

Tale struttura può comprendere anche altri elementi nidificate al suo interno, come il seguente codice di esempio, dove il "div" comprende un elemento dell'immagine con il testo:

<Div> Ecco il contenuto del testo. <Img alt = "immagine" /> </ div>

attributi

elementi HTML possono includere gli attributi all'interno dei loro tag di apertura. Per alcuni elementi, sono necessari alcuni attributi, mentre altri sono opzionali e possono essere incluse in ogni elemento. Classe e ID possono entrambi fornire ulteriori informazioni per gli elementi HTML all'interno della sezione corpo di una pagina. Gli sviluppatori utilizzano attributi ID per identificare gli elementi in modo univoco all'interno di una pagina. Ciò significa che un valore di attributo ID deve comparire solo una volta all'interno di una singola pagina. Il seguente codice HTML di esempio illustra tra cui un attributo ID per un elemento:

<Div id = "header"> contenuto di intestazione </ div>

Gli attributi di classe definiscono gruppi di elementi, così lo stesso valore di attributo classe possono apparire più volte all'interno di una pagina. Il seguente codice HTML di esempio illustra l'aggiunta di un attributo di classe per un elemento:

<Div class = "principale"> Contenuto principale </ div>

CSS

Id e class attributi consentono agli sviluppatori di definire regole di stile per le pagine Web utilizzando CSS dichiarazioni (Cascading Style Sheet). Il seguente codice di esempio CSS mostra elementi stilistici con un particolare ID:

intestazione {

color: # FF0000;

}

Il codice di esempio riportato di seguito illustra con un attributo class per lo stile elementi di un tipo particolare:

div.main {

width: 200px;

}

codice CSS può anche applicare styling elementi di qualsiasi tipo con un attributo particolare classe come segue:

.principale {

width: 200px;

}

JavaScript

Gli sviluppatori web possono utilizzare class e id attributi per identificare elementi specifici o gruppi di elementi all'interno di una pagina, utilizzando JavaScript. Questa tecnica consente ai siti web per includere gli effetti visivi, per esempio alterare l'aspetto delle sezioni della pagina, come l'utente interagisce con essi. Il seguente esempio di codice JavaScript dimostra l'acquisizione di un riferimento a un elemento HTML con un particolare ID attributo value:

var headElem = document.getElementById ( "header");

Per acquisire elementi con un particolare nome di classe il processo è leggermente più complicato, come segue:

var divElems = document.getElementsByTagName ( "div");

var i;

for (i = 0; i <divElems.length; i ++) {

var isMain = false;

if (divElems [i] .className == "principale") isMain = true;

}

Questa funzione controlla attraverso l'array di elementi "div" per quelli con il nome della classe desiderata.