Con riferimento alla guida contenuta in http://www.html.it/guide/guida-html/,
di seguito viene riportato un elenco puntato in cui per ogni capitolo della
guida viene fornito un sunto. Per approfondimenti, è possibile leggere i
singoli link. Particolarmente rilevanti i capitoli 6 e 7.
Html è un linguaggio di markup (non di
programmazione). Significa che non lavora sulla presentazione visiva, ma lavora
sulla funzionalità. Nasce nel 1993, e consente di formattare i testi
all’interno di una pagina, secondo i TAG indicati. Ad es. <tag>
Così vengono fornite info al browser per
come disporre gli elementi.
Si tratta dunque di un file testuale in formato .html editabili con editor di
testo come Sublime.
E’ un linguaggio “dichiarativo”. Il web
lavora con HTML e CSS ed eventualmente integrando dei Java Script che possono
essere anche già esistenti. Oggi la versione di HTML è la 5.
Il linguaggio html nacque per condividere
informazioni in tempi rapidi, ed era utilizzata prevalentemente a livello
accademico o militare. Nasce in quel periodo il tema dell’ipertesto: la
possibilità di linkare documenti differenti per scambiare e ricevere contenuti
testuali, e modificare la grafica testuale del testo stesso.
L’html è dunque un linguaggio testuale, e
per iniziare a sfruttarlo è sufficiente un browser ed un editor di testi. (una
curiosità: nel browser, premendo CTRL+U si apre la pagina Html)
Attraverso i TAG si danno vari livelli di
importanza all’informazione testuale (Heading1 è diverso dal Corpo…etc).
Un file html ha una struttura minima. Ogni
TAG si apre e si chiude: la parte HEAD e la parte BODY sono le due
sottostrutture minime (che si aprono e chiudono).
Prima di questi due elementi ci sono tutta
una serie di TAG (doctype, html, head, body), dove BODY conterrà tutto il
contenuto della pagina.
Struttura generale della pagina e dell’editor
di testo. Nel nostro caso, viene utilizzato Bluefish o Sublime. Normalmente si
ha che ogni tag, attributo, numero o parola chiave assume uno specifico colore
e diventa subito riconoscibile. Grazie a questa caratteristica emergono più
facilmente eventuali errori di battitura e diventa anche più chiara la
struttura della pagina.
In HTML ad esempio può inoltre risultare
comoda la chiusura automatica dei tag, per non perdersi aperture e chiusure.
In BLUEFISH
File, Crea Nuovo da Modello XHTML 1.0
Salva con nome: nome.html
Nel Body scrivi il contenuto testuale.
IN SUBLIME
devi scegliere già HTML per indirizzarlo su
qyale tipo di doc vai a lavorare. Lui suggerisce i TAG, e cliccando esce tutta
la pagina preimpostata come in Bluefish.
Approfondimento sul Browser e come funziona
per ottenere il rendering. Caricare la pagina significa acquisirne il
contenuto, più tecnicamente ciò avviene quando il browser richiede che venga
effettuato un trasferimento di file. Affinchè ciò sia possibile, l’html deve
fare riferimento ad un certo indirizzo.
Curiosità: Nel browser per vedere i codici
puoi fare anche tasto dx -> analizza elemento e si apre una pagina dove ci
fa vedere ogni elemento a cosa corrisponde: è una risorsa utile per vedere
errori etc.
La seconda fase cruciale è quella della
visualizzazione ovvero del cosiddetto rendering della pagina, la fase in cui il
browser interpreta i documenti HTML e dispone sullo schermo gli elementi
(testi, immagini, filmati) a seconda delle indicazioni ivi contenute.
Le pagine HTML professionali sono ricche di
elementi grafici (pensiamo ai siti Web o alle App mobile) e sarà fondamentale
avere uno o più strumenti per la creazione e manipolazione delle immagini.
Per orientarci meglio è utile dividere in
gli elementi grafici in due grandi categorie: FOTO ed ELEMENTI DI LAYOUT. Per
un approfondimento sui differenti elementi di grafica guardare il link.
Lezione molto importante che ti spiega come
è fatto un tag. L’elemento scritto racchiuso fra elementi angolari: <>.
La maggioranza degli elementi html descrivono una porzione di testo del
contenuto della pagina. Sono di fatto dei contenitori, e il contenuto è
compreso fra i due tag.
Per i paragrafi interni si usa <p>.
Viene riportato un esempio di pagina html standard: gli elementi sono annidati
fra < apertura e > chiusura. Come anticipato, head non è visibile e body
è il corpo che si rende visibile della pagina.
Ci sono degli elementi a Blocco, Inline e
Liste.
Per ulteriore approfondimento, leggere il
link relativo.
Nella sintassi, i tag in apertura possono
avere degli attributi.
Un tag con attributi si scrive in questo
modo:
<tag attributo1="valore1"
attributo2="valore2">
Per esempio: <input type="email"
name="email" placeholder="Scrivi il tuo indirizzo
email...">
Nessun commento:
Posta un commento