Fondamenti di informatica Mod. 2
Lezione 1: Fondamenti di HTML
HTML è un linguaggio base di markup gestito anche dal linguaggio CSS (grafico). L'ipertesto è un insieme di testi che consente una lettura tramite l'ausilio di un'interfaccia non lineare, tramite gli hyperlink (rimandi), parole che costituiscono una rete raggiata elettronica o variamente incrociata di informazioni organizzate secondo criteri paritetici o gerarchici. Le pagine HTML si possono visualizzare e fruire tramite i Web browser (Netscape Navigator, Firefox, Opera, etc). Le pagine HTML sono trasferite attraverso la rete Internet usando il protocollo HTTP costruito al di sopra di TCP e IP e localizzate mediante l'URL.
Le pagine web che si realizzeranno nel corso saranno sulle pagine client dell'università, ma normalmente dovrebbero essere caricate su un browser web.
http:// protocollo ; di.unito.it nome di dominio del sito ; /cgena/index path; .html nome del file.
I nomi di dominio vengono letti dal fondo verso l'inizio: .it, .com, .org etc 1° livello; unito = 2° livello; di. è una sottorete di unito.
Architettura client-server
Un server è una macchina che sta perennemente collegata alla rete e risponde a un indirizzo specifico e sta in attesa che i client gli chiedano qualcosa, poi risponde con una response con l'informazione richiesta.
Le pagine scritte in HTML sono dette statiche perché rimangono così e non cambiano, ma ci sono anche pagine dinamiche (lato server) scritte in asp, php, jsp il cui contenuto viene generato al momento della richiesta. Quest'ultime pagine vengono elaborate dal server, necessitano di un database con cui interagire.
www.3schools.com/html/default.asp : sito slide
Cos'è l'HTML?
Hyper Text Markup Language è un linguaggio di markup che dà le basi per produrre documenti per il World Wide Web; comandi per dire come strutturare il nostro documento HTML. Molti dati sono semantici del linguaggio HTML5, ovvero danno un significato al testo e vanno utilizzati in maniera attenta e precisa. Tutti i documenti WEB hanno pagine ipertestuali che contengono contenuti multimediali: testo, immagini, suoni, legami ipertestuali ad altre pagine, a programmi, a immagini o a suoni.
Tutte le pagine HTML iniziano con la prima istruzione sul tipo di documento che si va a scrivere: <!DOCTYPE html>. DOCTYPE è una dichiarazione (non case-sensitive) che definisce il tipo di documento, e aiuta il browser a mostrare la pagina web correttamente; in questo caso significa che si va a scrivere un documento in HTML5.
Una volta scritto ciò, si usano i tag, ovvero delle keywords inserite nelle brackets. Il primo tag che si trova è detto start/opening tag, mentre il secondo è detto end/closing tag. I tag HTML non sono case sensitive, ma è consigliato scrivere tutto in minuscolo (perché in XML invece fa differenza). Il primo tag che si trova è quello <html>, che è sempre il primo ad aprirsi e l'ultimo a chiudersi; dopo si usa il tag <body> che indica tutto quello che si vedrà nella pagina. [altri esempi sono <h1> e <p>]
I tag HTML identificano gli elementi HTML, ovvero tutto ciò che è compreso tra lo start tag e l'end tag. Gli elementi HTML senza contenuti sono detti empty elements (vuoti) [es: <br>].
Lo scopo di un browser è di leggere e mostrare i documenti HTML. I browser hanno al loro interno degli interpreti che leggono il codice HTML. Soprattutto per il codice CSS, i browser danno diverse interpretazioni dei comandi. I browser che funzionano meglio sono Firefox, Chrome e Safari (e Opera). Explorer invece dà problemi.
I tag possono avere al loro interno degli attributi che si scrivono così: nome="valore" e che aggiungono informazioni sull'elemento. Es: <html lang="en-US">. È importante specificare il linguaggio che si sta usando perché si aiuta il motore di ricerca a interpretare e trovare la pagina e per l'accessibilità.
Elementi della sezione head
Nell'elemento <head>, posto prima del body, si inseriscono informazioni non visibili all'utente ma che ci permettono di inserire o delle meta informazioni, come il titolo del documento, o parole chiave. È importante che questo sia presente per la ricerca. Tag che si possono inserire nella sezione head sono: title (titolo del documento), base (indirizzo di default o un default target per tutti i link della pagina), link (relazione tra il documento e una risorsa esterna), meta (metadata sul documento HTML), script, style.
Un'informazione importante è il title che dà il titolo alla pagina HTML e deve essere sempre presente (appare per esempio quando aggiungi una pagina ai preferiti o nella barra del browser se nei risultati della ricerca).
I meta tag consentono di inserire informazioni come parole chiave, descrizioni, autori del documento o ultima modifica e altre cose. Nessuna di queste informazioni sarà mostrata nella pagina ma sarà machine parsable. I metadati possono essere usati dai browser (come mostrare il contenuto o ricaricare la pagina) o dai motori di ricerca (keywords) o altri servizi web. Il tag meta va sempre nell'elemento head ed è vuoto; al suo interno si inseriscono degli attributi (name="word" content="word").
Esempi:
<meta name="keywords" content="HTML, CSS, XHTML, JavaScript"><meta name="description" content="Free Web tutorials on HTML and CSS"><meta http-equiv="refresh" content="30">
Elementi del body
Dentro il body possiamo mettere gli h# tags (con # numero compreso tra 1 e 6) per fare titoli. Non usare l'h# per fare il testo più grande o in grassetto. I motori di ricerca usano i tali per capire il contenuto della pagina. <p> crea un nuovo paragrafo mentre <br> [break rule] lascia a capo. [Il br viene chiuso nell'XML con <br />]. Un tag simile al br è <hr> [horizontal rule] che crea una linea orizzontale sottile per separare il contenuto. Le hr sono importanti perché le pagine devono avere molte separazioni e spazi bianchi.
Elementi di formattazione
In HTML esistono tag per dare una formattazione di base al nostro documento nell'ottica di usarlo come se fosse un word processor. Si può fare sia con HTML che CSS. Esempi di elementi di formattazione sono: Bold text, Important text, Italic text, Emphasized text, Marked text (mark, evidenziato), Small text, Deleted text, Inserted text (ins, sottolineato come se fosse aggiunto, come una correzione), Subscripts (sub, più piccolo e in basso), Superscripts (sup, più piccolo e in alto, come una potenza).
Differenza bold e strong: strong ha una valenza semantica, ovvero dice al browser che quelle parole sono importanti a livello testuale mentre bold non dà nessuna extra importanza al testo. Lo stesso vale per italic e em: em dà un'enfasi e valenza semantica al testo mentre italic cambia solo lo stile.
Il tag mark evidenzia la parola, e il tag del ~cancella la parola con una riga che attraversa la parola, il tag ins è come <u>, il tag sub serve per scrivere testi pedici e sup quelli apici. Il tag <q> ovvero quotation, serve per le citazioni ma non modifica lo stile del testo, ha solo un valore semantico. Il tag <blockquote> serve per inserire delle definizioni o citazioni lunghe e viene indentato. Si può aggiungere l'attributo cite="" per il link dal quale si è presa la citazione.
Lezione 2: Tag semantici e immagini
Un altro tag semantico importante è <abbr>, ovvero abbreviation, che definisce delle abbreviazioni o degli acronimi; può dare informazioni utili ai browser, ai sistemi di traduzione e ai motori di ricerca. Ex: The <abbr title="World Health Organisation">WHO </abbr> - q tip: rettangolino giallo quando hover su una parola. Il tag address definisce i contatti di un documento (autore/proprietario), solitamente viene mostrato in italic e il browser aggiunge una line break prima e dopo l'elemento. Il tag cite definisce il titolo di un'opera, usually i browsers lo mostrano in italic, ma la sua importanza è semantica poiché è utile soprattutto per far trovare la pagina dai motori di ricerca.
Il tag bdo serve per cambiare l'ordine delle lettere, che vengono invertite (ex: this diventa siht). Si può aggiungere l'attributo dir="" per specificare in che direzione devono essere scritte le parole; ex: "RTL" [right to left].
Comment tags servono per inserire commenti nell'HTML, e vengono compresi tra <!-- e -->. Esistono dei commenti detti condizionali che servono per scrivere condizioni in HTML, per esempio per scrivere un codice CSS diverso in internet explorer. Ex: <!-- [if IE 8]> HTML <![endif]--> Definisce i tag in modo che siano seguito solo su internet explorer.
Inserimento delle immagini in HTML
Si usa il tag <img>, che è vuoto, e si va a lavorare sugli attributi: src [source] dove si specifica il percorso dell'immagine che si vuole includere nella nostra pagina web (le immagini possono essere salvate localmente oppure esterne), size (width e height) specificata in pixels (senza scriverlo però); è possibile (e consigliato) usare l'attributo style per specificare width e height ma bisogna aggiungere px dopo il numero oppure con la percentuale; è importante specificare la dimensione dell'immagine perché quando il browser carica l'immagine inizia a lasciare lo spazio necessario per l'immagine, caricando la pagina più velocemente, alt consente di inserire il testo alternativo all'immagine, viene visualizzato quando si hover sull'immagine e si vede il rettangolo giallo oppure se non si riesce a caricare l'immagine, e può essere una descrizione di questa. Se l'immagine non ha alcuna importanza, si deve mettere uno spazio vuoto nell'attributo alt. L'alt è importante per le persone disabili.
Esempio:
<img src="immagine.jpg" alt="W3Schools.com" width="104" height="142">
I formati che si possono usare per le immagini sono .jpg/.jpeg, .gif e .png. Se invece si usa un'immagine che non è sul disco ma sul web, si può usare:
<img src="http://www.immagine.jpg">
Se si salva l'immagine in una cartella diversa dalla pagina, si deve usare un percorso diverso.
<img src="nome cartella/immagine.jpg">
Le dimensioni possono essere espresse in HTML come sopra, in CSS con il tag:
<... style="width:#px;height:#px">
Si possono usare le immagini come link o fare una mappatura delle immagini/image maps: a seconda di dove si clicchi si è indirizzati verso link diversi. Questa operazione viene fatta con gli editor perché è difficile. Tag map, attributi: name, tag area attributo shape, coords, alt, href.
Per inserire i link nelle pagine si possono fare collegamenti all'interno del nostro sito o esterni. Si deve usare il tag <a> [anchor], che deve essere accompagnato dall'attributo href [hypertext reference]. Quando si passa il mouse su un link, la freccia diventa una piccola manina, il colore del link cambia. Normalmente i link appariranno sottolineati e blu se non li hai visitati prima, viola e sottolineati se li hai visitati e rossi e sottolineati quando li clicchi e i link sono attivi. Tutte queste caratteristiche di default si possono cambiare usando gli style CSS.
Percorsi e attributi dei link
I percorsi/pathname possono essere di due tipi:
- Assoluto (da evitare) perché funziona solo sulla macchina su cui si sta lavorando.
- Relativo, più consigliato.
Se i due file sono in due cartelle diverse ma le due cartelle sono nella stessa cartella, si scrive:
<a href="../cani/pippo.html">
in cui la chiave è ../, che indica una risalita dalla cartella. Un'altra sintassi è /nomecartella/etc.jpg, in cui la prima slash vuol dire che la cartella è nel main root. Questo può essere utile perché in qualsiasi punto del sito io mi trovi è possibile rintracciare la cartella principale del sito. L'attributo target specifica dove si deve aprire un nuovo link. Per aprirlo in una nuova pagina si deve usare: target="_blank". Sconsigliato perché crea una pagina ex novo e creando una nuova pagina non si ha cronologia e non è possibile tornare indietro. Inoltre per gli utenti disabili è difficile tornare alla pagina precedente. Per avvertire l'utente si può aggiungere prima di target.
-
![Appunti di Tecnologie Web]()
Appunti di Tecnologie Web
-
![Appunti Informatica]()
Appunti Informatica
-
![Appunti sul Codice CSS]()
Appunti sul Codice CSS
-
![Appunti completi Web design and technologies]()
Appunti completi Web design and technologies
Recensioni
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
