HTML+CSS+JAVASCRIPT
HTML e CSS non sono linguaggi di programmazione ma di visualizzazione
HTML → Cosa devo visualizzare
CSS → Come visualizzarlo
Si utilizza notepad e si nomina il file index.html
Layout pagina →
Per arricchire il nostro file html vengono utilizzati dei tag, vediamone alcuni
Tag sub → serve per scrivere un pedice Es. H2O
Gli elenchi possono essere di due tipi, ordinati(ol → ordered list) o disordinati(ul → unordered list). Quelli disordinati creano elenchi puntati mentre quelli ordinati creano elenchi che possiamo ordinare tramite numeri arabi, lettere e numeri romani. In entrambi i casi vanno identificati gli elementi dell'elenco con un tag li → list item. Ci sono inoltre degli attributi speciali per gli elenchi, start e type che vanno inseriti dentro il tag ol. start serve per definire da dove cominciare a contare(non scrivere niente equivale a cominciare da 1) e lo si usa solo negli elenchi ordinati(N.B non avendolo usato negli elenchi puntati non so il risultato). Es. ol start="5" → partirà a contare da 5 type serve per selezionare il metodo di ordinamento. Per le lettere se voglio iniziare da un'altra lettera diversa da A posso mettere l'attributo start ma facendo attenzione che start accetta solo numeri perciò dovrò mettere il numero corrispondente alla lettera selezionata. Oltre ai numeri e le lettere maiuscole posso usare le lettere minuscole(a) ed i numeri romani maiuscoli(I) e minuscoli(i) (vedi sotto per eventuali esempi) Il tag type può essere utilizzato anche negli elenchi puntati per selezionare cosa si vuole utilizzare, puntini, cerchi, quadrati ecc. Es. ol type="A" → userà le le lettere maiuscole Es. ol type="a" → userà le le lettere minuscole Es. ol type="I" → userà i numeri romani maiuscoli Es. ol type="i" → userà i numeri romani minuscoli Es. ol start="5" type="A" → userà le le lettere maiuscole e comincierà dalla lettera E Di seguito creerò degli elenchi di vario tipo
La classe 4BSA è composta da :
In questo caso abbiamo creato un elenco puntato(ul). Se invece volessimo fare un elenco con i nomi degli alunni in ordine alfabetico dovremo fare come nell'esmpio qui sotto
Si può notare che dal numero 17 in poi si è spostato a destra, questo perchè ho fatto un elenco annidato, se invece volessi il numero 17 e seguenti allo stesso livello dei primi dovrei creare il nuovo elenco fuori da quello iniziale
Per le immagini si usa un tag singolo img e lo si accompagna con degli attributi che sono:
src="..." → (source) ci permette di selezionare la foto
alt="..." → alternativa all'immagine in caso non la si trovi
title="..." → quando passiamo sopra col mouse ci mostrerà una descrizione
height="..." → mi permette di modificare l'altezza dell'immagine(misura in pixel)
width="..." → mi permette di modificare la larghezza dell'immagine(misura in pixel)
Se metto solo uno degli attributi tra height e width il pc cambierà le misure mantenando le proporzioni corrette.
Es. 
Possiamo oltre alle immagini usare delle icone, esse a differenza delle immagini dovranno avere estensione .ico (funziona anche con .png o .jpeg) e avranno una sintassi diversa. Facciamo un esempio, inserendo un'icona nella linguetta del sito vicino al suo nome. Visto che si tratta di un'informazione che non va visualizzata nel sito vero e proprio andremo a metterla nell'head. Scriveremo perciò tra le parentesi angolari link rel="shortcut icon" href="nomeicona.ico". Vedi linguetta sito per esempio.
I link, ci permettono di inserire collegamenti ipertestuali, nel senso che possono essere colsultati in modo anche non sequenziale, secondo collegamenti di tipo logico che consentono di passare da una pagina all'altra dello stesso sito Web o di siti che si trovano su server diversi della rete. Generalmente un link ci può aprire a un sito ma possiamo utilizzarli anche per collegarci a dei file, musiche,zip ecc. Li inseriamo come attributi usando il tag a(àncora), seguito dall'attributo href(hypertext reference) il quale valore è l'indirizzo della pagina di destinazione del link. I link agiscono su una parola,frase o anche immagine che attiva il collegamento, tale elemento lo inseriamo tra i tag di apertura e chiusura di a e si chiama Hotword Esiste inoltre un attributo,chiamato target, che ci permette di specificare in quale finestra deve essere aperta la pagina di destinazione. i possibili valori sono: _blank → apre il collegamento in una nuova finestra _self → apre il collegamento nella stessa finestra che ha generato il collegamento _parent → apre il collegamento nel frame di origine o in quello corrente _top → apre il collegamento al livello superiore Es. HTML
Quando si crea un sito è conveniente suddividere in ulteriori sottocartelle la cartella dove è presente il file html. Questo però ci obbliga a cambiare la sintassi nel file html, poiché qualora avessi necessità di muovermi nelle sottocartelle devo specificare in quale sottocartella mi trovo. Posso scegliere se inserire il percorso intero (assoluto) o quello specifico (relativo). È molto più conveniente utilizzare quello specifico seguendo le seguenti regole: Una cartella figlia di quella in cui sono va preceduta da \(oppure /) Una cartella genitore di quella in cui sono va preceduta da .. La cartella in cui sono si indica con .
l'iframe ha una sintassi simile a quelle delle immagini però a differenza dalle immagini va chiuso, iframe src="". Anche per l'iframe si possono usare gli attributi per regolare le dimensioni height e width. Possiamo inserire dei video da youtube ricordandoci di cambiare watch con embed. Esempio iframe:
Per l'inserimento di un video o di un audio dobbiamo usare i rispettivi tag video e audio accompagnandoli con gli attributi controls, autoplay, il quale funziona solo se accoppiato con muted, ed infine loop controls → ci permette di vedere i controlli sotto al video autoplay → fa partire il video muted → mette in muto l'audio del video o dell'audio loop → fa ricominciare il video una volta terminato
Qui inseriamo un video
Qui inseriamo un audio
Per utilizzare una tabella dobbiamo utilizzare una serie di tag insieme che sono: table → è il contenitore di tutta la tabella e la definisce tr → "table row" contiene una riga della tabella td → "table data" una cella che contiene i valori all'interno di una riga Per avere una bella visuale della tabella si usa corniciare le celle, per fare ciò si utilizza un attributo che va nel tag table che è border seguito dal valore 1 che corrisponde al numero di pixel che formano lo spessore della cella. L’utilizzo dell’attributo border per visualizzare i bordi della tabella E’ OBSOLETO e SCONSIGLIATO. E’ fortemente raccomandato usare i CSS. Tuttavia per praticità di trattazione ora lo utilizziamo. Lo elimineremo appena affronteremo i CSS. Oltre ai tag citati precedentemente che sono obbligatori c'è un tag facoltativo che consente di inserire una didascalia ed è th("table head") I tag td e th possono essere accompagnati da due attributi che specificano il numero di colonne/righe sul quale si deve estendere una cella e sono: colspan → definisce il numero di colonne occupate da una cella rowspan → definisce il numero di righe occupate da una cella
Esercizio 1 Tabella
| Intestazione | |||
|---|---|---|---|
| NOME | COGNOME | VOTOINFO | |
| 4BSA | Pierino | Rossi | 4 |
| Gigetto | Bianchi | 5 | |
| 3BSA | Mariuccia | Verdi | 10 |
| Luca | Nalin | 10 | |
Sintassi esercizio 1:
Esercizio 2 Tabella
| DAY | Seminar | ||
|---|---|---|---|
| Schedule | Topic | ||
| Begin | End | ||
| Monday | 8:00 a.m | 5:00 p.m | Introduction to XML |
| Validity: DTD and Relax NG | |||
| Tuesday | 8:00 a.m | 11:00 a.m | XPath |
| 11:00 a.m | 2:00 p.m | ||
| 2:00 p.m | 5:00 p.m | XSL transformation | |
| Wednesday | 8:00 a.m | 12:00 p.m | XLS Formatting Objects |
