guida online html5 & css3

Web typography

Titolazione

I titoli, headings, hanno 6 "taglie" diverse, che corrispondono semanticamente a 6 livelli gerarchici di importanza e visivamente appaiono in grandezze scalari.

Gli heading sono tag block level.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Il paragrafo

Il paragrafo è il tagche rappresenta l'unità editoriale minima di involucro di contenuti (testi e immagini).

Tra un paragrafo e l'altro l'html interpone automaticamente uno spazio (margine inferiore). La corretta divisione di un argomento in paragrafi ne favorisce la leggibilità, la comprensione e la memorizzazione. Ricordiamo che lo spazio conferisce ritmo visivo alla lettura, equivalendo a ciò che nella prosa corrisponde alle pause.

Il tag <p> è un tag block level.

Segni e caratteri speciali

I simboli presenti sulla tastiera non sono esaustivi dell'insieme di segni speciali che possiamo inserire nel testo. Inoltre, dato che alcuni caratteri (operatori) sono significativi per il linguaggio html (si pensi, ad esempio, ai segni di "maggiore di" e "minore di" che indicano la delimitazione di un tag html) e non possono essere scritti così come sono visualizzati dal browser. Quindi ogni volta che scriviamo un carattere che ha una valenza funzionale per il codice, Dreamweaver lo sostituisce automaticamente con una entità html.

I caratteri speciali sono delimitati a sinistra da una & (ampersand) e a destra da un punto e virgola. Per inserire caratteri non presenti sulla tastiera utilizziamo INSERISCI + HTML + CARATTERE.

© ® ™ € È ✔ ✮ ☾ ✈

Spazi e ritorni a capo

All'interno di un testo web non è possibile rappresentare più di uno spazio consecutivo, anche se lo inseriamo direttamente nel markup (codice html). Se abbiamo bisogno di più spazi consecutivi esiste un carattere speciale &nbsp; che si ottiene con la combinazione            di tasti CMD + SHIFT + SPACE.

Quando vogliamo sforzare il ritorno a capo utilizziamo invece il tag <br />. Per ottenerlo utilizziamo SHIFT + INVIO.
Questa è una riga dopo un a capo forzato.

Evidenziazione

L'html dispone di un tag <strong> per evidenziare un testo in grassetto. Un testo così marcato diventa immediatamente più visibile. Se utilizzati con buon senso hanno una certa rilevanza nel SEO. Poi esiste la possibilità di mettere in corsivo un testo mediante il tag <em>. Si utilizza soprattutto nelle citazioni. Se combinati insieme danno luogo al grassetto corsivo.

I tag <strong> ed <em> hanno display inline (non vanno a capo).

Liste ed elenchi

L'html dispone di elenchi ordinati (numericamente o alfabeticamente) detti ol (orderedl list) ed elenchi non ordinati detti ul (unordered list) i cui punti elenco, anzichè essere preceduti da un numero o un carattere, sono preceduti da un simbolo (punto, quadratino, immagine, ecc).

<ul> <ol> ed <li> hanno display block.

  1. Gennaio
    • ENTRATE 18
    • USCITE 12
    • TOTALE 6
  2. Febbraio
  3. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metusMarzo
  4. Aprile
  5. Maggio
  6. Giugno

Righelli orizzontali

Venivano utilizzati per separare visivamente due "aree" della pagina web.