Appunti per l'esame di Idoneità di informatica (moduli 1 e 2) basati sul corso interattivo di Khan Academy dei docenti Cosmo Luca e Gasparetto Andrea

Name: Appunti per l'esame di Idoneità di informatica (moduli 1 e 2) basati sul corso interattivo di Khan Academy dei docenti Cosmo Luca e Gasparetto Andrea
Brand: Skuola.net
Price: 9.99 EUR
Availability: InStock
Rating: 4.0 (1 reviews)
Author: nora96_96

Revisionato il 18/05/2026

di nora96_96

Publisher

Vota 4,0/5 (1)

Contenuto verificato e approvato dal Team di Esperti di Skuola.net

Appunti per l'esame di Idoneità informatica basati sul corso interattivo di Khan Academy dei docenti Cosmo Luca e Gasparetto Andrea dell'università Ca' Foscari di Venezia. Appunti …

Esame Idoneità di Informatica

Facoltà Lettere e filosofia

Dal corso del Prof. Cosmo Luca

Università Università degli studi Ca' Foscari di Venezia

A.A. 2017-2018

36 pagine

7 download

Appunto

Scarica

Estratto del documento

Appunti per esame di idoneità informatica modulo 1

Introduzione all'HTML

Web: insieme di computer tra loro collegati che possiedono siti web. Quando un computer è collegato al web ed emette un sito web lo si definisce server. Un sito è scritto attraverso 3 linguaggi:

HTML: per elaborare il contenuto del sito
CSS: per dargli un determinato aspetto
JAVASCRIPT: per renderlo interattivo

Per navigare in un sito utilizziamo un'applicazione dedicata (Explorer, Chrome, Mozilla) definita browser. I dispositivi con i quali accediamo a internet sono definiti clients.

Doctype: segnala al browser che la pagina è scritta in un HTML moderno. L'HTML è un linguaggio di tipo Markup quindi è basato tutto sui tag che sono elementi che iniziano con una parentesi angolata < e finisce con un'altra parentesi >.

Il primo tag di ogni pagina è sempre <html> che è il tag iniziale dell'HTML e alla fine c'è il tag che lo conclude </html>. Il tag HTML deve contenere tutti i tag che costituiscono la pagina ed è per questo che il tag di fine HTML si trova alla fine.

Sotto il tag <html> si trova sempre un tag <head> che contiene i tag attraverso i quali il browser riesce a creare la pagina ma non contiene nulla di ciò che l'utente deve effettivamente vedere. Segue il tag <meta> che fornisce al browser maggiori informazioni su come creare la pagina. Per esempio, se stai utilizzando caratteri comuni come quelli dell'inglese, allora il tag meta sarà uguale a utf-8. Poi vi è il tag <title> che il browser utilizza per il titolo della pagina, concluso sempre dal tag </head>.

Segue il tag <body> in cui, per aggiungere un titolo, bisogna utilizzare il tag <h1> e si conclude sempre con </h1> e se si vuole fino ad <h6>. Il tag <h1> serve per il titolo più importante della pagina e il tag <h6> per quello meno importante. Per creare un paragrafo in HTML si utilizza il tag <p>.

Bisogna ricordare che in HTML il browser ignora gli a capo e gli spazi e, se voglio crearli, bisogna segnalarlo esplicitamente attraverso il tag <br>, cioè break. Il tag di chiusura viene sempre dopo il contenuto del tag: è il modo per dire al browser che vuoi che il tag finisca.

Il contenuto di un tag HTML è ciò che sta tra il tag di apertura e il tag di chiusura: questo è ciò che intendiamo quando diciamo "dentro" un tag. Il contenuto di un tag può essere testo normale o un mix di altri tag.

Dove dovrebbero stare i tuoi tag?

Qualsiasi contenuto visibile sulla tua pagina web deve stare tra il tag <body> di apertura e il tag </body> di chiusura.

I tag <h1> e <p> sono i contenuti del tag <body>, quindi diciamo che stanno "dentro" al tag <body>.

Enfasi del testo

Per enfatizzare alcune parole (renderle in corsivo) nel testo bisogna inserirle dentro il tag <em>. Esempio: <em>Ciao</em>
Per rendere in corsivo alcune parole bisogna inserirle nel tag <strong>. Esempio: Ciao

HTML: Liste

Per creare una lista bisogna iniziare scrivendo il tag <ul> (che sta per "unorder list" cioè lista senza ordine); infatti il browser non numererà gli elementi della lista. Il tag <li> è un ordinatore (sta per "list item", ovvero elementi della lista).

Per creare una lista numerata si utilizza il tag <ol> (lista ordinata) al posto del tag <ul>. Per aggiungere elementi all'interno della lista usiamo il tag <li>.

HTML: Immagini

Per inserire un'immagine in una pagina web si utilizza il tag <img src=""> e dopo l'uguale, all'interno delle virgolette, si inserisce l'URL dell'immagine. Scrivendo sempre all'interno del tag, alt="", all'interno delle virgolette si comunica un testo alternativo che descrive l'immagine, ad esempio nel caso in cui l'indirizzo URL inserito in precedenza non sia più valido.

Per ridimensionare l'immagine si scrive l'attributo della larghezza (width="203", dove 203 sta per 203 pixel) o anche la lunghezza (height="50"). Ricorda o la profondità o l'altezza, ma non entrambe altrimenti rischi di "schiacciare" le immagini.

Nozioni di base di CSS

Il CSS sta per "Cascading Style Sheets" (fogli di stile a cascata) ed è un modo per definire gli stili che si applicano alle diverse parti del sito.

Per prima cosa si deve aggiungere all'inizio della pagina, sotto la riga del <title>, il tag <style> e tutto ciò che sarà inserito qui dentro sarà il CSS.

Per dire alla nostra regola CSS a quali elementi HTML cambiare lo stile usiamo i selettori. Il selettore di elemento seleziona gli elementi HTML in base al nome del tag. Ciascun elemento HTML—<h1>, <p>, <li>, <body>—e qualunque altro elemento HTML può essere selezionato con CSS usando il nome del tag senza le parentesi ad angolo (< e >).

Se vogliamo cambiare lo stile di tutti i titoli h2 della nostra pagina, si deve scrivere h2 seguito da parentesi graffe {}. Per cambiare il colore scriviamo color: e in seguito rgb (cioè il selezionatore di colore) e quindi con il cursore selezionare il colore. I 3 numeri dentro le parentesi quadre che appariranno una volta scelto il colore sono le componenti rosso, verde e blu che formano quel colore.

Per cambiare il colore dello sfondo bisogna scrivere body e al posto di color background-color: seguito da rgb e dalle parentesi tonde.

CSS: Selezionare per ID

Grazie alla selezione per identità, possiamo fornire a un tag nella nostra pagina un'identità unica e comunicare poi al CSS che intendiamo applicare un determinato stile all'elemento che possiede questa identità e a nessun altro. Per aggiungere un attributo per identità scriviamo id seguito dall'uguale e dalle virgolette, all'interno del già presente tag <p> così: <p id=""></p>. All'interno delle virgolette scriviamo un'identità descrittiva e unica, ad esempio "rabbits-song".

Ora possiamo identificare il paragrafo in modo univoco, e quindi aggiungere una regola CSS per stabilirlo: quindi dentro il tag <style> scriviamo #rabbits-song e poi inseriamo le parentesi graffe e aggiungiamo una proprietà come ad esempio il colore dello sfondo e quindi scriviamo background-color: yellow. Il # indica al browser che qualsiasi cosa segua è un'identità.

CSS: Selezione per classe

La classe è un modo per assegnare ad un gruppo un elemento particolare e ad un gruppo puoi assegnare quanti elementi vuoi. Per aggiungere una classe bisogna aggiungere un attributo di classe: dentro il tag <p> scriviamo class="" così: <p class="">. Dentro le virgolette scriviamo il nome per la classe, ad esempio "song-lyrics", e quindi: <p class="song-lyrics">.

Ora bisogna aggiungere la regola CSS e dentro il tag <style> scriviamo .song-lyrics e poi come sempre parentesi graffe, proprietà, i 2 punti e il valore.

Altri tag HTML

Link HTML

HTML è l'acronimo di HyperText Markup Language. Il linguaggio Markup è un modo di utilizzare i tag per intervenire su un contenuto. "Ipertesto" è un termine inventato negli anni 60 per indicare un testo collegato ad un altro testo che l'utente può raggiungere immediatamente. Tim Berners-Lee inventò l'HTML ed altri elementi di internet come l'HTTP con l'idea di collegare tra loro testi dislocati in ogni parte del mondo. Per collegare tra loro diverse pagine web nell'HTML si utilizza l'Hyperlink, ovvero un collegamento intertestuale che normalmente chiamiamo link.

Come creare un link in HTML: si utilizza il tag <a> che sta per anchor, ovvero ancora. Il tag ha infatti la funzione di ancorare il link in una determinata pagina e di collegarlo ad un'altra pagina web. Quindi inseriamo all'interno del tag <a> l'attributo href="" (che sta per Hyper reference) e l'URL della pagina web all'interno delle virgolette così: <a href="https://www.google.it/search?q=pokemon&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj1ruKgncfYAhUHpaQKHXIZDhQQ_AUICigB&biw=1164&bih=608" title="Google Search Pokemon">.

Inoltre, per dire al browser di aprire il link in una nuova finestra, all'interno del tag <a> aggiungeremo l'attributo target="_blank" così: <a target="_blank">.

Link HTML interni

I link sono un ottimo modo per collegare fra loro 2 pagine web differenti, però possono collegare anche 2 diverse parti interne alla stessa pagina. Per creare un link interno bisogna scrivere il tag <a href="#"> e tra le virgolette, dopo il cancelletto, si inserisce l'attributo di identità (id) della parte del testo che vogliamo che il link ci indirizzi. In questo modo: <a href="#web-history">. N.B. Ricorda che le identità devono essere uniche, altrimenti il browser non saprà a cosa rimandare.

Tabelle HTML

Per creare una tabella in HTML bisogna scrivere alcuni tag:

Scriviamo il tag <table> (che sta per tabella);
Abbiamo poi bisogno di un intestazione che contenga le etichette di ciascuna colonna, quindi scriviamo il tag <thead>;
Per inserire una riga all'interno della tabella utilizziamo il tag <tr>;
Per ogni singola cella scriviamo <th> e all'interno di questo tag scriviamo la nostra etichetta ad esempio <th>Pet Name</th>;
Poi possiamo ad esempio aggiungere una colonna per la specie dell'animale e una per il colore e quindi scriviamo <th>Species</th> e <th>Color</th>;
Ora iniziamo un'altra riga con il tag <tbody> (sotto il tag </thead>);
Poi per un'altra riga scriviamo il tag <tr>;
Infine scriviamo il tag <td> e in questo tag scriveremo il primo valore (sempre usando il nostro esempio) il nome dell'animale, quindi <td>Black & white</td>, il secondo valore e quindi la specie <td>rabbit</td> e infine l'ultimo valore ovvero il colore e quindi <td>Color</td>;
Con il procedimento copia-incolla poi si possono creare altre righe per ad esempio altri animali con altri nomi, di altre specie e altri colori.

(foto pagina seguente)

Commenti HTML

Un com

Anteprima

Vedrai una selezione di 9 pagine su 36