ATTRIBUTI GLOBALI

Gli attributi globali , sono attributi , che possono essere utilizzati con qualsiasi elemento di HTML.

Di seguito l’elenco completo di questi attributi , con relativa spiegazione.

accesskey

E’ un attributo che ti permette di creare una scorciatoia di testiera per attivare un elemento.

La scorciatoia scelta dev’ essere un unico carattere.

Nell’ esempio di seguito , faremo in modo che premendo il tasto “c” della tastiera si apra il sito ciocheso.com

Per attivare la scorciatoia di tastiera occorre premere , se si utilizza Google Chrome il tasto alt + c.

<!doctype html>
<html lang = "it">
<head>
<a href="https://ciocheso.com/" accesskey="c">Ciocheso.com</a><br>
</body>

</html>

Potete premere (ALT + C) per provare cosa succede !

Ciocheso.com

class

L’ attributo class , è uno degli attributi più significativi del linguaggio html , il suo scopo è quello di assegnare un determinato stile o comportamento uguale a tag differenti.

<!DOCTYPE html>
 <html>
 <head>
 <style>
 .titoli {
  background-color: blue;
  color: white;
  } 
 </style>
 </head>
 <body>
 <h1 class = "titoli">UN TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 <h1 class = "titoli">UN SECONDO TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 <h1 class = "titoli">UN TERZO TITOLO PER IL NOSTRO ESEMPIO</h1>
 <p>Un paragrafo al di fuori della nostra classe </p>
 </body>
 </html>

UN TITOLO PER IL NOSTRO ESEMPIO

Un paragrafo al di fuori della nostra classe

UN SECONDO TITOLO PER IL NOSTRO ESEMPIO

Un paragrafo al di fuori della nostra classe

UN TERZO TITOLO PER IL NOSTRO ESEMPIO

Un paragrafo al di fuori della nostra classe

Approfondisci l’ argomento : attributo class

contenteditable

Questo attributo globale, definisce se un elemento di Html è editabile oppure no.

Nell’ esempio di seguito , mostrerò un paragrafo editabile(potete provare a modificarlo) ed uno no.

<p contenteditable="true">Prova a modificarmi , sono editabile</p>  

Prova a modificarmi , sono editabile

<p contenteditable="false">Io non sono un paragrafo editabile</p>

Io non sono un paragrafo editabile

data-*

E’ un attributo che serve a memorizzare determinati dati relativi a determinati elementi html, che verranno utilizzati dagli script

dir

Specifica la direzione di un paragrafo , può avere 3 valori :

  • ltr (da sinistra verso destra, valore di default)
  • rtl (da destra verso sinistra)
  • auto (direzione decisa dal browser)
<!doctype html>
<html lang = "it">
<head>
<p dir="ltr">paragrafo ltr</p>
<p dir="rtl">paragrafo rtl</p>
<p dir="auto">paragrafo auto</p>
</body>

</html>

paragrafo ltr

paragrafo rtl

paragrafo auto

draggable

Questo attributo , definisce se un elemento Html è trascinabile oppure no.

Di default , i collegamenti e le immagini sono trascinabili.

<!doctype html>
<html lang = "it">
<head>
<p draggable="true" >Prova a trascinarmi</p>
</body>

</html>

Prova a trascinarmi!!

hidden

Serve a definire se il browser deve o meno , mostrare all’utente un elemento html , generalmente utilizzato in combinazione con delle funzioni JavaScript.

<!DOCTYPE html>
<html>
<body>
<p hidden>Non verrò mostrato</p>
<p>Io invece si</p>
</body>
</html>

Io invece si

id

L’ attributo id deriva dalla parola inglese “identificator” , difatti , lo scopo di questo attributo è proprio quello di identificare in maniera univoca all’ interno dell’ intero documento html uno ed un solo elemento.

<!DOCTYPE html>
 <html>
 <head>
 <style>
 #firma {
  color: red;
  font-style : italic ;
  } 
  </style>
 </head>
 <body>
 <p>Questo breve paragrafo di Ciò Che so dimostra l' utilizzo degli id</p>
 <p id ="firma">Giusi Marchese</p>
 </body>
 </html>

Questo breve paragrafo di Ciò Che so dimostra l’ utilizzo degli id

Giusi Marchese

Approfondisci l’ argomento : attributo id

lang

lang, è un attributo che specifica in quale lingua è redatto un documento html , un informazione utile ai browsers per transcodificare correttamente il testo e ai crawler per indicizzare correttamente i contenuti.

spellcheck

questo attributo, specifica se un elemento di html deve o meno avere il controllo ortografico.

<!DOCTYPE html>
<html>
<body>
<p contenteditable="true" spellcheck="true">Questo paragrafo è editabile, cliccami per evidenziare l' errrrore</p>
</body>
</html>

Questo paragrafo è editabile, cliccami per evidenziare l’ errrrore

style

Per modificare lo stile di un documento html si utilizza l’ attributo style.

<html>
<body style="background-color:green;">
<h1>Titolo della nostra pagina verde </h1>
</body>
</html>

Approfondisci l’ argomento : attributo style

tabindex

tabindex è l’attributo che permette di , far spostare un utente del sito , da una voce all’ altra del vostro sito tramite il pulsante della tastiera tab.

Prova a cliccare il tasto tab per comprendere al meglio questo esempio!

<!DOCTYPE html>
<html>
<body>

<p tabindex="1">Cane</p>
<p tabindex="2">Gatto</p>
<p tabindex="3">Coniglio</p>


</body>
</html>

Cane

Gatto

Coniglio

title

Questo tag, mostra un testo quando un utente passa sopra con il mouse , all’ elemento a cui è abbinato.

Passa con il mouse sulla frace “il sito CCS è fantastico” per scoprire di che sito si tratta.

<!DOCTYPE html>
<html>
<body>

<p title="ciocheso.com"> il sito CCS e' fantastico </p>

</body>
</html>

il sito CCS e’ fantastico

translate

Questo attributo specifica, se un elemento di html può o meno essere tradotto dal nostro browser.

<!DOCTYPE html>
<html>
<body>

<p translate="no">questo testo non verrà tradotto MAI</p>
<p>Questo testo forse si</p>

</body>
</html>

questo testo non verrà tradotto MAI

Questo testo forse si

Lascia un commento