<!-- TESTO --> Tag che viene utilizzato per inserire commenti nei fogli HTML.

<title> TESTO </title> Tag che contiene il titolo della pagina che verrà visualizzato nei motori di ricerca.

<meta name=”description” content=”TESTO.”>

Tag che contiene la descrizione della pagina, ovvero quello che verrà visualizzato sotto il titolo della pagina nei motori di ricerca.Può essere inserito anche tramite: inserisci----> HTML ----> descrizione ------> tag head.

<link href=”css/style.css” rel=”stylesheet” type=”text/css”>

Tag che incorpora i fogli di stile esterni nei fogli HTML (accessibile anche dalla palette fogli di stile).

<h1> TESTO </h1> <h2> TESTO </h2> ...........Tag (heading) che definiscono i titoli delle pagine, va da h1 che è il più grande, ad h6 che è il più piccolo.

<p> TESTO </p> Tag dedicato all’inserimento di blocchi di testo nella pagina.

<p lang=”it”> </p>Questo tag identifica un paragrafo in lingua italiana , si possono inserire diciture tipo eng o fr per paragrafi in altre lingue.

<br /> solo all’inizio del paragrafo in questione (metodo + corretto) oppure <br> TESTO </br> oppure solo <br> all’inizio del testo, per rendere il testo nel paragrafo.

Tag utilizzato per far andare a capo una riga o più genericamente qualcosa.Se utilizzato come nel primo caso tra paragrafi al difuori di essi crea spazio tra di loro.

<em> TESTO </em>Tag che rende il testo all’interno del paragrafo in corsivo.Può essere usato su singoli elementi.

<strong> TESTO </strong>Tag che rende il testo all’interno del paragrafo in grassetto.Può essere usato su singoli elementi.

<ul> TESTO </ul> Unordered list, serve per gli elenchi puntati.

<ol> TESTO </ol> <ol> </ol> Ordered list, prima e dopo il testo per un elenco numerato.

ALL’INTERNODI <UL> SI AGGIUNGE:<li> </li> all’interno di <ul> prima e dopo il testo per un elenco puntato.

SI SCRIVONO PER OGNI VOCE

Dentro <ul>, ogni voce sarà contraddistinta dal tag <li> e </li> list item per un puntino.

<hr /> Tag che serve per inserire un filetto orrizzontale, si apre e si chiude solamente all’inizio.

<TAG: style=”DICHIARAZIONE”> TESTO O ALTRO </TAG>

Tag che viene utilizzato per cambiare un oggetto in particolare, per esempio se in CSS i p sono 16px ma vogliamo un paragrafo 24px possiamo scrivere il tag in HTML.La priorità della regola è massima, indipendente-mente dal peso dei selettori.Ogni voce di stile deve essere separata da ; e da uno spazio.

<span> </span> Marcatore generico, si usa principalmente per il testo.

<frame> </frame> Tag per l’incorporamento di un video o oggetto multimediale.

<a href=”http://www.SITO.DOMINIO”> TESTO </a>

Tag che identifica i link.In questo caso un link esterno.

<a href=”TESTO SCHEDA HTML.HTML”> TE-STO </a>

Tag che identifica i link.In questo caso un link interno.

<a href=”#”> TESTO </a>

Tag che identifica i link.In questo caso il cancelletto lo trasforma in un “mezzo link” ovvero lo legge con le caratteristiche di link scelte ma se cliccato non “trasporta” ad un oggetto o pagina linkata.

<a href=”mailto:INDIRIZZOMAIL”> TESTO </a>

Link utilizzato per trasformare una frase o un in-dirizzo mail presente in una pagina o in un testo in un link che automaticamente se cliccato apre il server di posta impostato nel computer e compila il campo indirizzo mail.

<a href=”#voce1”> voce 1</a>

<p id=”voce1”> voce 1</p>

Link interno alla pagina stessa chiamato ANCO-RA, viene utilizzato quando ci sono pagine molto lunghe, un esempio sono le pagine di wikipedia che hanno un indice linkato ai vari titoli o h pre-senti nella pagina.

ES:

<ul> <li><a href=”#voce1”>voce 1</a></li> <li><a href=”#voce2”>voce 2</a></li> <li><a href=”#voce3”>voce 3</a></li> </ul>

<p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>

<p id=”voce1”><h1>VOCE 1</h1></p>

<img src=“img/NOME MMAGINE.ESTENSIONE” width=“NUMERO” height=“NUMERO” alt“TE-STO”>

Tag per l’inserimento di immagini, composto dal nome dell’immagine, larghezza in pixel, altezzain pixel, e testo alternativo tutti separati da uno spazio.

<a href=“NOME LINK” title=“NOME FOTO” target=“OPZIONE”> TAG DELL’IMMAGINE </a>

Tag per l’inserimento di link nelle immagini, composto dal nome del link, dal nome della foto che si vuole appaia appena ci si sofferma sopra di essa, e il target (per esempio _blank lo apre in una nuova scheda, self nella medesima scheda), tutti separati da uno spazio. All’interno dell’apertura e chiusura di questo tag va inserito il tag dell’immagine.

<centre> TAG IMMAGINE </centre>Tag che se inserito prima del tag dell’immagine la posiziona al centro dell’immagine, se l’immagine è linkata va posizionato tra i 2 tag.

Per poter importare una classe oppure un id in HTML essa od essi devono essere presenti in CSS.Se ad un tag sono assegnate più classi esse vanno inserite tutte tra “ ” separate da uno spazio.

<TAG class=“NOME CLASSE PRESENTE IN CSS”> TESTO OD OGGETTO </TAG> Tag che serve ad inserire in HTML una classe.

<TAG id=“NOME ID PRESENTE IN CSS”> TE-STO OD OGGETTO </TAG> Tag che serve ad inserire in HTML un id.

<table width=”316” height=”205” border=”0” cel-lpadding=”5” cellspacing=”10”> <tbody> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table>

Tag identificativo di una tabella, la prima riga identifica le caratteristiche della tabella ovvero la larghezza, l’altezza, il bordo, il bordo interno, ed il bordo esterno.<tbody> </tbody> è il corpo della tabella ovvero tutto quello che sta all’interno.<tr> </tr> identificano le singole celle;<td> TESTO </td> identivica ciò che è scritto nelle singole celle.

esempio cella allineata in centro con un link interno:

<td align=”center”> <a class=”link” href=”#”> Sa-murai 1 </a></td>

N.B. &nbsp significa vuoto ovvero lo spazio per gli elementi, no breaking space è un codice asci.

NOTE:

• HIFEN : nome del cosidetto “trattino” [ - ].

/* TESTO */ Tag che viene utilizzato per inserire commenti nei fogli CSS.

* { margin: NUMEROpx;padding: NUMEROpx }

Tag che resetta o ridetermina le proprietà dei vari brownser e le uguaglia.per esempio i bordi di default che ogni brownser lascia automaticamente tra un immagine e il bor-do della pagina.

body { TESTO } Tutte le informazioni inerenti alla mosifica del corpo dell’HTML.

GRUPPO H (h1, h2,h3 ....) { TESTO }

Tutte le informazioni inerenti alla modifica degli header,può essere un tag singolo:

h1 {TESTO}

oppure multiplo:

h1, h2, h3 {TESTO}

in questo caso i selettori sono separati da una virgola e da uno spazio, l’ultimo selettore non ha la virgola

p { TESTO } Tutte le modifiche inerenti al tag p ovvero dei paragrafi.

a { TESTO } Tutte le modifiche inerenti al tag a ovvero dei link.

TAG:hover

Pseudo-classe, determinano diverse proprietà CSS a seconda dello stato di un tag, in questo caso quando ci passo opra con il mouse.Può essere applicato anche a p, h, immagi-ni.........

a:visited { TESTO }

Pseudo-classe, determinano diverse proprietà CSS a seconda dello stato di un tag, in questo caso quando l’oggetto è stato visitato come per esempio un articolo in questo caso si riferisce ad un link.

a:active { TESTO }

a:focus { TESTO }

.NOMEDIVERSODALTAGDIRIFERIMENTO { TESTO }

Le ‘classi’ servono a caratterizzare un insieme di oggetti omogenei. Per associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo, nel foglio CSS sono prece-dute da un puntino.Il selettore si indica riportando il valore assegnato all’attributo class, preceduto da un punto ‘.’.notizia {…}

È possibile combinare fra loro più classi: <div class=”classe1 classe2”>…</div>.classe1.classe2 {…}

Il selettore può anche specificare a quale ele-mento la classe deve essere associata:p.classe {…}h1.classe {…}

.NOMEDIVERSODALTAGDIRIFERIMENTO:HO-VER { TESTO }

Si possono determinare diverse proprietà CSS a seconda dello stato di un tag, anche in riferimen-to alle classi, in questo caso quando ci passo opra con il mouse.Si può utilizzare per esempio anche con focus, visited e active.

.NOMEDELLACLASSE img

.NOMEDELLACLASSE img, .NOMEDELLA-CLASSE img {}

Per modificare gli attributi inerenti ad una classe specifica o a più classi specifiche, in questo caso si modificheranno le immagini presenti o associa-te alla classe selezionata.

#NOMEDIVERSODALTAGDIRIFERIMENTO { TESTO }

Gli ‘identificatori’ selezionano invece un oggetto unico all’interno della pagina.Per esempio se tutti i link diventano rossi al pas-saggio ma si vuole che un solo link diventi verde si utilizza un id.Il selettore si indica riportando il valore assegnato all’attributo id, preceduto dal simbolo cancelletto ‘#’#testata {…}

Il selettore può anche specificare a quale ele-mento l’identificatore deve essere associato:p#testata {…}h1#testata {…}

Classi e identificatori possono essere usati con-temporaneamente:<div id=”idval” class=”classval”>#idval.classval {…}

Tutte le voci successive vanno inserite all’interno di parentesi graffe ed alla fine ogni voce deve ave-re un punto e virgola per poterle “chiudere” ( ;)

background: COLORE

Cambia i colori di sfondo.i colori si possono indicare come:Nomi predefiniti: black, green, navy

Valori RGB• #rrggbb (r,g,b = {0 ÷ F})• #rgb (r,g,b = {0 ÷ F}) corrisponde a #rrg-gbb• rgb(r,g,b) (r,g,b = {0 ÷ 255}) • rgb(r%,g%,b%) (r,g,b = {0.0 ÷ 100.0})

Per esempio, i valori aqua, #00FFFF, #0FF, rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua.

color: COLORE Vale come colore del testo, si possono scrivere con le stesse regole del background.

font-family: FONT, FONT, FONT;

Determina la famiglia di font:Il brownser se non ha questa indicazione utilizza il font di sistema, ci sono più di una tipologia di font poichè se nel computer di destinazione del sito web non è presente quel font il computer visualizza il secondo, e così via, se tutti e tre non sono presenti il computer visualizza un senza grazie generico.

font-size: NUMEROpx Determina la grandezza dei font, si può utilizzare anche (em)

font-weight: NUMERO O STATO

Determina lo spessore delle lettere del font se inseriamo un numero in centinaia (100,300,400,700......) e uno stato dello stile per esempio bold, light ............

text-transform: OPZIONE (per esempio upperca-se)

Regola che trasforma il testo ovvero se inserita con uppercase rende il testo tutto maiuscolo, (esistono altre voci per esempio lowercase rende tutto minuscolo)

text-align: OPZIONE Determina l’allineamento del testo.

letter-spacing: NUMEROpx oppure NUMEROem Determina la spaziatura tra le lettere.

text-decoration: OPZIONE

Determina la decorazione delle parole o dei testi, per esempio text-decoration: none si utilizza per i link per togliere la sottolineatura che è presente nelle regole di sistema del brownser.

border: NUMEROpx TIPOLOGIA COLOREDetermina i bordi, è composto dall’attributo: numero dei pixel e tipologia di bordo tipo solid, dotted(puntinato)

transition-duration: NUMEROms

Proprietà che determina il tempo di trasforma-zione di un oggetto, per esempio la tempistica di cambiamento di colore di un link quando ci passo sopra con il mouse.Può essere espressa in secondi (s), oppure in ms millisecondi (ms).Questa proprietà va inserita nella parentesi graffa appartenente alla modifica del tag precedente ad over.

font-weight: OPZIONE (bold) Rende il testo in grassetto.

width: NUMERO OD OPZIONE Determina la larghezza.

height: NUMERO OD OPZIONE Determina l’altezza.

opacity: NUMERO (va da 0 ad 1, per esempio 0.5 è il 50%) Determina l’opacità di un oggetto.

float: OPZIONE (left OPPURE right)

Per allineare un oggetto a sinistra o a destra si usa la proprietà FLOAT.L’oggetto che ha questa proprietà si sposterà nella posizione assegnatagli e tutto ciò che verrà inserito successivamente, per esempio molteplici div all’interno della riga oppure del testo si posi-zioneranno attorno all’oggetto con la proprietà float fino al raggiungimento dell’altezza dell’ele-mento per poi continuate per tutta la larghezza dell’oggetto in cui sono inseriti.

clear: OPZIONE

Proprietà che come float permette al momento dell’inserimento di molteplici oggetti lo sposta-mento automatico di essi, in genere si utilizza l’opzione both poichè libera al contrario di left o right entrambe le posizioni. (molto utile per le righe) infatti nulla può stare ai lati dell’oggetto con l’attributo.

margin-left: OPZIONE (auto)margin-right: OPZIONE (auto)

(display: block IN AGGIUNTA PER LE IMMAGI-NI)

Proprietà che se usate assieme posizionano in centro un elemento, in aggiunta se l’elemento è un immagine si usa la proprietà display: block.

max-width: NUMEROpx / NUMERO%

min-width: NUMEROpx / NUMERO%

Tag utilizzati per definire una massima larghezza o una larghezza minima.

ES:

img { max-width: 100%; height: auto}

permette alle immagini di piccole dimensioni di rimanere delle dimensioni effettive e di non adattarsi con conseguente sgranatura se prece-dentemente abbiamo impostato una regola per l’adattamento ai div delle immagini.

max-height: NUMEROpx / NUMERO%

min-height: NUMEROpx / NUMERO%

Tag utilizzati per definire una massima altezza o un altezza minima.

margin: NUMEROpx / NUMERO%

margin-top:margin-bottom:

margin-left:margin-right:

Tag utilizzato per impostare un margine esterno all’oggetto, margin è generico perciò il margine invisibile circonderà tutto l’oggetto ma si posso utilizzare in questo caso tag più specifici per esempio se si vuole solo il margine a destra o a sinistra.

padding: NUMEROpx / NUMERO%

padding-top:padding-bottom:

padding-left:padding-right:

Tag utilizzato per impostare un margine interno all’oggetto, padding è generico perciò il margine invisibile circonderà tutto l’interno dell’oggetto ma si posso utilizzare in questo caso tag più specifici per esempio se si vuole solo il padding a destra o a sinistra.

overflow: auto

Proprietà che assegna ad un oggetto per esem-pio al contenitore od a un div la proprietà di adat-tarsi al contenuto, perciò di aumentare o diminui-re in altezza in base al contenuto.

background-image: url() Per assegnare al background di un oggetto un immagine.

background-repeat: ATTRIBUTO Per far ripetere l’immagine di background. (di-pende dall’attributo usato)

background-size: ATTRIBUTO Per far adattare l’immagine di background. (di-pende dall’attributo usato)

Esempio:

.box1 {background-image: url();background-repeat: none;background-size: cover}

.box1:hover {background-size: 120%}

Al passaggio del mouse sul div ci sarà un effetto di ingrandimento su background.

background-color: NOMENCLATURA

Proprietà per definire il colore di sfondo può essere:

Colore pieno #FFF

in opacità con canale alfa rgba (0, 0, 1, 0.8)

transparent

background-attachment: ATTRIBUTO

Proprietà per far si che il background rimanga fisso oppure si sposti insieme alla pagina.Per esempio se impostiamo il background fixed al background di un immagine nel body il nostro contenitore si sposterà ma l’immagine rimarrà fissa.

moz-selection: ATTRIBUTOProprietà per determinare il colore di selezione di un oggetto o un testo (per esempio quando selezioni un testo per copiarlo e incollarlo)

border-radius: NUMEROpx / % Proprietà utilizzata per arrotondare gli angoli degli oggetti.

position: fixed

Proprietà utilizzata per i div fissi per determinare la loro immobilità nella pagina (ovvero si sposta-no seguendo la pagina, come i menù fissi nel margine alto della pagina.)

top: 0bottom: 0

left: 0right: 0

Proprietà che servono ai div fissi per determinare la loro posizione.Per esempio se inserisco nel css:

top: 0left: 0right: 0

otterrò una barra fissata in alto come un menù fisso.Si possono usare anche le percentuali.

Note: