Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
I siti Web Marvin Barletta
2
Copertina Copertina grafica riguardante i siti web realizzata con Adobe Illustrator. Dati: Nome e cognome Qualifica Scuola Superiore Anno scolastico Classe Nome Relatrice
3
Introduzione e presentazione
Motivo principale della scelta: l’alta conoscenza, praticità e passione dell’argomento in discussione, e nel realizzare siti web. Oltre all’argomento principale, vi spiegherò diverse cose per la creazione di un sito web, perciò anche alcune parti del linguaggio web in questione. Di mia spontanea volontà ho creato vari siti web da zero, tra cui un mio blog personale. In questi tre anni di scuola superiore ho imparato ad utilizzare programmi per la realizzazione di siti web, ma soprattutto ho ampliato ulteriormente la mia conoscenza e passione per esso.
4
Che cos’è un sito web? Un insieme di pagine web.
Contiene informazioni di qualsiasi tipo. Può riguardare per esempio un’associazione, un’azienda o un argomento. Per pubblicarlo c’è bisogno di un servizio hosting. Per visualizzarlo bisognerà digitare il rispettivo URL o scrivere qualcosa di inerente al suo contenuto. La sua visibilità dipenderà dai criteri di ricerca del browser utilizzato.
5
HTML I siti web si realizzano con un linguaggio web: l’HTML.
l’HTML descrive le modalità di impaginazione del contenuto della pagina web, tutto questo avviene tramite tag di formattazione. I tag di formattazione attribuiscono le impostazioni e le specifiche di un determinato contenuto; esistono vari tipi di tag. I tag vengono racchiusi dentro due parentesi angolari: “< >”; ogni tag si apre e si chiude aggiungendo lo slash subito dopo la parentesi angolare d’apertura: </body>.
6
Storia dell’HTML Sviluppato negli anni novanta da un informatico britannico: Tim Berners-Lee in Svizzera. Nel 1993 fu resa pubblica la prima versione dell’HTML; nel 1998 uscì la penultima versione più importante: l’HTML4. Nell’HTML4 ci fu una separazione tra gli aspetti grafici e tutto il resto del codice. Nacque così il CSS; infine nel 2014 fu resa pubblica l’ultima versione più importante: l’HTML5, fatta per l’avanzamento delle applicazioni web.
7
Tag principali dell’HTML
<head> <body> <head> : informazioni riguardanti la gestione della pagina. <body> : componenti che verranno visualizzati nella pagina.
8
Tag per il funzionamento della pagina
<!DOCTYPE html> <html> <!DOCTYPE html> : indica che il documento è una pagina web sviluppata con l’HTML4. <html> : definisce quale sia la lingua della pagina web.
9
Tag più comuni dell’HTML
<div> <p> <a> <div> : blocco di spazio che fa da contenitore per altri componenti. <p> : paragrafo di testo. <a> : collegamento ipertestuale.
10
I titoli nell’HTML <title>
<title> : nome finestra della pagina web. <h1>/<h2>/<h3>/<h4>/<h5>/<h6> <h1>/<h2>/<h3>/<h4>/<h5>/<h6> : titoli di testo.
11
Elenchi puntati <ul> <ol>
<ul> : elenco non ordinato. <ol> : elenco ordinato. <li> : spazio di testo all’interno dell’elenco ordinato/non ordinato.
12
Andare a capo <br> <br> : permette di andare a capo.
Eesempio: <p>Oggi è una bella giornata.<br>Credo proprio che uscirò con i miei amici.</p> Ciò che vedremmo: Oggi è una bella giornata. Credo proprio che uscirò con i miei amici.
13
Attributi Gli attributi servono per specificare meglio e arricchire i contenuti. Si rappresentano mettendo il nome dell’attributo e subito dopo, l’uguale e le virgolette che racchiudono il valore d’esso. Esempio: <p style=”color:red”>Domani vado al cinema”</p> Ciò che vedremmo: Domani vado al cinema
14
Attributi Per inserire un’immagine dovremo attribuirgli il percorso da cui la andrà a prendere. Esempio: <img src=”C:\Documenti\Immagini\lamiaimmagine.pdf”></img>
15
CSS Linguaggio web che si occupa di tutta la parte grafica nei siti.
Nasce dalla divisione tra aspetti grafici e tutto il resto del codice dell’HTML. Ha reso il modo di gestire la parte grafica più semplice. Le ultime versioni hanno una compatibilità maggiore con altri browser.
16
Tag e classi <style>
<style> : informazioni riguardanti la grafica dei componenti della pagina. Dentro di esso si possono creare delle classi e si possono dare attributi a tutti i componenti dello stesso tipo.
17
Attributi nel CSS Esempio: <head> <style> h1 {color:green}
<head> <style> h1 {color:green} </style> </head> Funzione utile per gestire completamente tutti i tipi di tag.
18
Classi nel CSS Esempio: <head> <style>
.prova {font-size:20px; color:blue} </style> </head> Funzione utile per dare attributi a elementi dello stesso tipo.
19
Classi nel CSS Esempio:
<p class=”prova”>Ciao come stai?</p> Ciò che visualizzeremmo: Ciao come stai?
20
Piattaforme e software
Blocco note Adobe Dreamweaver Wordpress Garoo
21
Adobe Dreamweaver Software per realizzare siti web tramite HTML e CSS.
Funzioni: Suddivide il codice con diversi colori Dispone di tre impostazioni dell’area di lavoro Auto inserimento del codice
22
Wordpress Piattaforma per realizzare siti web.
Gestione completa del sito Attrezzata e professionale Ampia scelta di diversi tipi di templates
23
Garoo Piattaforma per realizzare siti web. Di semplice utilizzo
Format simili Modalità di modifica del sito semplice ed intuitiva
24
Collaborazione con la scuola
Progetto: Realizzare un sito riguardante un agriturismo completo di: Home page Sezione contatti Sezione News Blog Footer
25
Conclusione Strumenti utilizzati: Word 2011 Adobe Photoshop
Adobe Illustrator Google Immagini Google Un ringraziamento speciale ai professori che mi hanno aiutato e seguito nella realizzazione di questa tesi.
26
Sitografia https://it.wikipedia.org/wiki/HTML
Presentazioni simili
