Attributi globali

Gli attributi globali sono attributi che possono essere specificati per qualsiasi tag.

Ecco l’elenco (con link alle api w3c)

  • accesskey serve per creare uno shortcut da tastiera su un link, in combinazione con il tasto ALT (dipende dal sistema operativo)
  • contenteditable: indica se il contenuto è modificabile o meno (vedi esempio in codepen). Ha due stati true o false, se lasciato vuoto il default è true.
  • dir indica la direzione del testo: può essere ltr rtl o auto
  • hidden è un attributo booleano (se specificato è true, altrimenti false) che dà la direttiva al browser di non renderizzare l'elemento. Serve per controllare programmaticamente la visualizzazione ad una porzione di pagina (attenzione che nel codice il contenuto rimane...!)
  • lang  specifica la lingua del contenuto, anche in questo caso può essere utilizzata in maniera programmatica per la gestione semplificata del multilingua (vedi esempio)
  • spellcheck ordina al browser di utilizzare il proprio correttore ortografico sull'elemento. Può essere impostato a true o a false.
  • style permette di specificare delle regole css inline sull'elemento (pratica possibilmente da evitare)
  • tabindex accetta un valore numerico e controlla all'interno di una form o di una serie di link o altri elementi interattivi, l'ordine dei campi da raggiungere attraverso la tabulazione
  • title crea un tooltips informativo sull'elemento. Attualmente i browser lo supportano solo sull'hover del mouse, il che lo rende inutile sia per la navigazione su tastiera sia su dispositivi touch.
  • translate è un attributo booleano che accetta i valori yes o no e indica se una porzione di testo può essere tradotta o meno. Si specifica translate="no" per i termini in lingua che non devono volutamente essere tradotti (esempio Apple come nome di azienda, da non tradurre in mela).

See the Pen KdarLJ by Mariachiara Pezzotti (@merissimissima) on CodePen.

Class e Id

        • id: serve per specificare all’interno della pagina l’elemento con un identificativo unico e univoco

 

 

    • class: sono uno o una serie di “space-separated tokens“, identificativi testuali separati da uno spazio che servono per identificare l’elemento. A differenza degli id lo stesso elemento può avere più classi e la stessa classe può essere attribuita a più elementi nella stessa pagina.

 

    Id e class sono attributi identificativi, servono a livello di foglio di stile o di codice per richiamare determinate azioni o stili sugli elementi. See the Pen KdmEEo by Mariachiara Pezzotti (@merissimissima) on CodePen.

Nell’esempio utilizziamo l’id fruits_list per dire che la lista dei frutti dovrà avere l’arial come font, mentre utilizziamo le classi esotic e green-veg per specificare i colori di sfondo.

Per capire quando usare le classi e quando utilizzare gli id, potete ricordarvi la differenza tra il codice fiscale e il nome proprio di persona: se in una sala affollata chiamo tutte le persone che si chiamano “Giulia” può essere che si voltino più di una donna, diversamente se chiamo uno specifico codice fiscale se ne volterà una soltanto. Le classi sono il nome proprio degli elementi di una pagina, mentre gli id sono loro codice fiscale.

I principali tag per head

<!DOCTYPE html>
<html>
    <head>
        <title>Titolo di esempio</title>
      <!-- indica il percorso base dell'url (vedi link nel body) -->  
      <base href="http://www.example.com/ciao/index.html">
       
      <!-- link -->
      <!--il tag link indica un link ad una risorsa. L'attributo href indica il percorso di questa risorsa, mentre il rel la tipologia 
      Ecco alcuni esempi di utilizzo di link + rel: -->
      <!-- indicare il percorso di un feed rss -->
      <link rel="alternate" type="application/rss+xml" title="Feed RSS" href="http://webdesign.acqualiofilizzata.it/feed/" />
      <!-- il percorso del foglio di stile che la pagina dovrà adottare -->
      <link rel='stylesheet' id='open-sans-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&#038;subset=latin%2Clatin-ext&#038;ver=4.3.1' type='text/css' media='all' />
      <!-- il link ad un'icona -->
      <link rel="icon" href="/favicon.ico" type="image/x-icon">
      <!-- se il documento è parte di una serie (come in un blog) possiamo indicare il precedente-->
      <link rel='prev' title='Struttura Base di un documento Html' href='http://webdesign.acqualiofilizzata.it/struttura-base-di-un-documento-html/' />
      <!-- una versione alternativa dello stesso documento -->
      <link rel=alternate href="/en/pdf" hreflang="en" type="application/pdf" title="English PDF">
      
      
      <!--meta -->
      <!-- i tag meta indicano informazioni aggiuntive per il browser o per i motori di ricerca (o per i curiosi). Negli attributi con name, indichiamo il tipo di informazione, in content l'informazione vera e propria -->
      <!-- con quale sistema cms è gnerato il sito -->
      <meta name="generator" content="WordPress 4.3.1" />
      <!-- le indicazioni per i crowler -->
      <meta name='robots' content='noindex,follow' />
      <!-- un tempo i meta kword e descrption erano fondamentali per un buon posizionamento su google -->
      <!-- meta può contenere anche delle direttive per il browser: -->
      <!-- che set di caratteri usare -->
      <meta charset="utf-8">
      <!--o schedulare un refresh on 300 secondi -->
      <meta http-equiv="Refresh" content="1">
      
      <!-- style consente di specificare parti di foglio di stile direttamente nel documento -->
      <style type="text/css" media="screen">
   body { color: #ff0; background: #f00; }
   a{ color: #fff; }
  </style>
    </head>
    
  <body>
      <!-- avendo impostato il tag base, tutti i path relativi dichiarati nel documento verranno costruiti tenendo conto dell'attributo href di base quindi nell'esempio il collegamento "vai all'archivio" punterà a http://www.example.com/ciao/archives.html -->
        <p><a href="archives.html">Vai all'archivio</a>.</p>
    </body>
</html>

See the Pen JYEOVK by Mariachiara Pezzotti (@merissimissima) on CodePen.