Pagina vuota per copertina.

[Digitare il testo]

Indice

Indice 2

Introduzione e presentazione 3

Capitolo 1 - Formazione dei siti web

1.1 - Che cos’è un sito web 5

1.2 - Che cos’è l’HTML? 7

1.3 - CSS 17

Capitolo 2 - Strumenti per la realizzazione di un sito web

2.1 - Piattaforme e software 20

Conclusione 26

Bibliografia 27

2Marvin Barletta

Introduzione e presentazione

In tutto il mondo ormai la maggior parte delle informazioni si

trovano su internet, che è anche diventato un mezzo commerciale,

se non uno dei migliori e più utilizzati.

Proprio per questo motivo ho scelto di trattare come argomento

della mia tesina di Terza Superiore, I Siti Web.

Il motivo principale della scelta è stato l’alta conoscenza e

praticità personale dell’argomento in discussione, oltre alla

passione che ho sempre avuto nel realizzare e progettare un sito

web tramite codice HTML e CSS in totale libertà di scelta.

Questo è un argomento che mi è sempre interessato e di cui mi

piace discuterne con le persone.

Oltre all’argomento principale, in queste righe vi spiegherò

diverse cose per la creazione di un sito web, perciò anche alcune

parti del linguaggio web in questione.

Iniziamo col dire che attraverso questi siti si è potuto dare spazio a

nuove metodiche e sistemi per far arrivare e ottenere informazioni

in poco tempo in tutto il mondo e migliorare la gestibilità e il

progresso anche in fatto economico di qualsiasi azienda e attività.

Di mia spontanea volontà diverse volte ho voluto provare a creare

e terminare vari progetti di siti web da zero, tra cui un mio blog

personale.3Marvin

Barletta

Questo mi è servito molto per aumentare le mie conoscenze

riguardo il linguaggio web ed imparare meglio a strutturare un sito

nella maniera migliore possibile.

In questi tre anni di scuola superiore ho imparato molto ad

utilizzare programmi appositi per la realizzazione di siti web, ma

soprattutto ho ampliato ulteriormente la mia conoscenza e

passione per esso, anche grazie al buon insegnamento del

Professore che ha istruito la mia classe.

4Marvin Barletta

Che cos’è un sito web

Un sito web è un insieme di pagine web correlate che possono

contenere informazioni di ogni tipo, riguardanti un argomento

specifico o solitamente legate ad un’azienda. E’ un po’ come la

presentazione di un’associazione o appunto un’azienda, dove

all’interno si possono trovare specifiche ed informazioni relative

ad essa, come di che cosa si tratta, dove si trova, i vari servizi e

molto altro, ovviamente tutto il contenuto che c’è all’interno varia

e dipende dal tipo di sito web.

Ognuno di noi è libero di realizzare un sito web gratuitamente se

sotto un servizio di hosting, come ormai tante aziende offrono; la

maggior parte di queste però richiede di aggiungere il proprio

dominio, se non pagando una cifra stabilita da loro.

Per poter rendere pubblico un sito web, esso ha bisogno di

appunto un servizio hosting su un server web sulla rete di internet.

Per poterlo visualizzare basterà digitare sulla barra degli indirizzi

all’interno di un browser, il rispettivo URL, oppure scrivere

qualcosa che sia inerente al sito. In questo modo il sito web

cercato si verrà a trovare tra l’elenco del browser con altri siti

simili che abbiano le stesse parole o argomenti appena cercati;

questo però dipenderà anche da quanto sia conosciuto questo

determinato sito, poichè esso sarà comunque presente tra l’ampio 5Marvin

Barletta

elenco dei siti web simili, ma se poco conosciuto sarà meno

visibile e quindi meno facile da trovare rispettivamente ad un

altro; questo comunque dipende dai criteri di ricerca che ha ogni

browser di internet.

6Marvin Barletta

Che cos’è l’HTML?

Ora però veniamo al dunque, come si crea un sito web?

I siti web sono dei documenti ipertestuali realizzati con un

linguaggio web: l’HTML, acronimo di HyperText Markup

Language.

Perciò per poter realizzare un sito web bisogna conoscere questo

linguaggio, in ogni caso ci sono delle possibilità anche per quelli

che ancora non lo conoscono bene, poichè esistono svariate

piattaforme e programmi, di cui vi parlerò dopo, che permettono

di gestire e creare un sito web senza il bisogno di una conoscenza

assoluta dell’HTML.

Ritornando a noi, l’HTML è un linguaggio che descrive le

modalità di impaginazione del contenuto della pagina web, tutto

questo avviene tramite codici o meglio tag di formattazione.

I tag di formattazione sono gli elementi che attribuiscono le

impostazioni e le specifiche di un determinato contenuto; difatti

esistono vari tipi di tag, che ora vi andrò a descrivere.

Questi tag fanno parte appunto di ciò che bisogna scrivere per la

realizzazione di un sito web; questi hanno la caratteristica di

essere racchiusi dentro due parentesi angolari: “< >”; esempio:

<body>, ogni tag si va ad aprire e poi si va a chiudere,

7Marvin Barletta

semplicemente aggiungendo lo slash subito dopo la parentesi

angolare d’apertura, proprio in questo modo: </body>.

Ma prima di spiegarvi più dettagliatamente come funziona,

vediamo com’è nato questo linguaggio.

L’HTML è stato sviluppato all’inizio degli anni novanta da un

informatico britannico: Tim Berners-Lee in Svizzera.

Già nel 1993 fu resa pubblica la prima versione dell’HTML, ma

solo pochi anni dopo, nel 1998 uscì la penultima versione più

importante, chiamata HTML4. Questa versione fu determinante

rispetto alle precedenti, poichè ci fu una separazione tra gli aspetti

grafici e tutto il resto del codice.

Nacque così il CSS, acronimo di Cascading Style Sheets o in

italiano, fogli di stile a cascata.

Il CSS che

approfondiremo

dopo, è appunto

tutto ciò che fa

parte dell’aspetto

grafico della

pagina web.

Nel 2014 invece

fu resa pubblica l’ultima versione più importante dell’HTML, cioè

HTML5; quest’ultima revisione è stata fatta per l’avanzamento 8Marvin

Barletta

delle applicazioni web, poichè con l’introduzione di linguaggi di

programmazione come JavaScript, si è dato modo di sviluppare

applicazioni più avanzate ma in modo più semplice, inoltre grazie

a questa versione, alcune piccole funzioni sono state semplificate

per facilitare e quindi migliorare il sistema.

Ritornando al discorso precedente, nel linguaggio HTML esistono

vari tipi di tag, sostanzialmente i tag principali sono due:

1. <head>2. <body>

Questi principalmente, come altri possiamo definirli come dei tag

genitore, poichè dentro d’essi sono presenti altri tag che

compongono la pagina.

Già dal nome si può intendere l’importanza d’essi, poichè senza di

loro non si potrebbe fare nulla.

Partiamo dal tag <head>, all’interno d’esso ci sono informazioni

riguardanti la gestione della pagina, come i caratteri del testo che

saranno visualizzati, o altre informazioni per l’aspetto grafico.

Per esempio dentro il tag <head> si può mettere un altro tag:

<style>. Grazie a questo si può modificare lo stile dei vari

componenti della pagina web.9Marvin

Barletta

All’interno del tag <body> invece ci sono tutti i componenti che

verranno visualizzati nella pagina, proprio perchè è il corpo della

pagina, e sarà qui che si scriverà di più.

Oltre a questi due tag fondamentali ne esistono altri due che

servono per il funzionamento della pagina, e sono:

1. <!DOCTYPE html> (tag che non si chiude)

2. <html>

Il tag <!DOCTYPE html> serve ad indicare

semplicemente che il documento si tratta di

una pagina web e in particolare che il

linguaggio web è l’HTML5.

Invece il tag <html> è il tag che racchiude tutta la pagina e ci

permette di definire quale sia la lingua della pagina stessa.

Gli altri tag che andranno a comporre la pagina web possono

essere di diversi tipi, questo dipende da che tipo di sito si andrà a

creare.

10Marvin Barletta

Comunque in quasi ogni sito i tag più utilizzati sono:

1. <div>2. <p>3. <a>

Per iniziare il tag <div> permette di avere un “contenitore” o

spazio dove possiamo mettere dentro altri tag e contenuti; questo

serve per gestire lo spazio del nostro sito in maniera più ordinata e

in modo da poter raggruppare tutto ciò che vogliamo all’interno

d’esso.

Il tag <p> crea uno spazio di testo dove potremo andare a scrivere

tutto ciò che vogliamo, in pratica è un paragrafo di testo; di certo

nella maggior parte di siti web c’è bisogno di scrivere qualcosa,

per cui è un tag molto essenziale. Ma non è l’unico che ci permette

di scrivere…

Il tag <a> invece permette di creare un collegamento

ipertestuale, (un link), per poter collegare una determinata parola

o immagine che sia ad un’altra pagina web. Ciò è molto utile per

navigare tra le pagine di un sito, per poter indirizzare a più siti e

per collegare in maniera pratica e migliore degli elementi tra di

loro.

11Marvin Barletta

Esistono davvero molti tag di formattazione, proprio per questo

motivo non starò ad indicarveli tutti, e così avrò più tempo per

parlarvi d’altro. Ve ne spiegherò ancora qualcuno che si può

utilizzare per comporre un sito web.

Ad esempio, iniziamo dal tag <title>, questo tag permette di dare

un nome alla pagina web in cui stiamo lavorando, quindi tutto

ciò che scriviamo tra il questo tag d’apertura e il corrispettivo di

chiusura, verrà visualizzato nel titolo della finestra del browser.

Nel caso in cui non mettessimo questo tag, il browser darà un

titolo di default, come ad esempio “Pagina senza

titolo”.

Ovviamente il titolo che scegliamo di dare ad una

pagina web dovrebbe centrare con il contenuto che

è presente in quella stessa pagina, ciò anche per

avere un maggior ordine nel nostro sito.

Prima parlandovi del tag <p> vi ho detto che

appunto non è l’unico che ci permette di scrivere,

infatti ne esistono diversi altri.

Ad esempio, se volessi mettere un titolo all’interno della mia

pagina web? Ecco, per questo esiste il tag <h1>, che permette di

scrivere un titolo, ma oltre a questo, che è quello in cui il testo

avrà la maggior dimensione, si possono utilizzare i tag <h2>,

<h3>, <h4> e così via fino ad <h6>; iniziando da <h1> e finendo 12Marvin

Barletta

con <h6> la dimensione del testo va a decrescere (h1: 36px – h2:

24px – h3: 21px – h4: 18px – h5: 16px – h6: 14px).

Hanno proprio la funzione di titolo, difatti si usano appunto per

dare un intestazione a ciò che verrà scritto o mostrato nella pagina.

Se volessimo inserire un elenco puntato o numerato, ci servirebbe

il tag <ul> oppure il tag <ol>, questo dipende da che tipo di

elenco vogliamo; il tag <ul> (quello più usato), ci permette di

creare un elenco non ordinato, invece il tag <ol>, un elenco

ordinato.

Per creare un elenco però, tra il tag <ul>/<ol> di apertura e quello

di chiusura dovremo aggiungere il tag <li>, dove sempre tra il tag

di apertura e il corrispondente di chiusura, potremo scrivere del

testo.

Esempio:

<ul><li>Mario</li><li>Giovanni</li><li>Luca</li>

</ul>___

13Marvin Barletta

Scrivendo questa stringa di codice ciò che vedremmo sarà questo:

Mario Giovanni Luca

___

Nel caso in cui volessimo andare a capo nel scrivere qualcosa nel

nostro sito web, non potremo semplicemente andare a capo

all’interno del codice, ma avremo bisogno di inserire il tag <br>

senza aver bisogno di chiuderlo, subito dopo alla parola, frase o

qualsiasi altro elemento vorremo.

Per fare un esempio:

<p>Oggi è una bella giornata.<br>Credo proprio che uscirò con i miei amici.</p>___

Scrivendo ciò, nel nostro sito vedremmo:

Oggi è una bella giornata.Credo proprio che uscirò con i miei amici.___

14Marvin Barletta

Se non avessimo aggiunto il tag <br>, avremmo visualizzato il

testo in questo modo:

Oggi è una bella giornata. Credo proprio che uscirò con i miei amici.___

Comunque all’interno di ogni tag si possono inserire degli

attributi, che servono per specificare meglio e arricchire i

contenuti.

Questi attributi 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>____

L’attributo che abbiamo inserito è style, invece il valore è

color:red.

Ciò che abbiamo assegnato a quell’elemento che ci permette di

scrivere un paragrafo (il tag <p>) sarebbe il colore del testo

d’esso, in questo caso: il rosso.

15Marvin Barletta

Quindi quello che ci sarebbe venuto fuori sarebbe stato questo:

Domani vado al cinema___

Come abbiamo visto questi attributi ci permettono di modificare

soprattutto l’aspetto grafico dei vari elementi nella pagina.

Ne esistono davvero molti, ognuno con una funzione diversa; per

esempio se noi volessimo mettere un immagine nel nostro sito

web dovremmo usare il tag <img>, ma in che modo gli

attribuiamo il percorso o il link da cui deve prendere l’immagine?

Proprio usando un attributo, in questo caso avremmo bisogno di

inserire all’interno del tag <img>, l’attributo src.

Per fare un esempio:

<img src=”C:\Documenti\Immagini\lamiaimmagine.pdf”></img>___

Tramite gli attributi poi, possiamo anche modificare per esempio

le dimensioni di un elemento, come un immagine, poichè senza

fare ciò la nostra immagine verrà visualizzata con le sue

dimensioni originali.16Marvin

Barletta

CSS

L’introduzione del CSS, il linguaggio web, o meglio definito

come file, nell’HTML ha reso il modo di gestire la parte grafica

nei siti web, molto più chiaro e semplice da usare.

Con le ultime versioni si è potuto avere una migliore compatibilità

dell’HTML con altri browser, poichè alcune aziende d’essi non

vollero rendere questo linguaggio

completamente compatibile attraverso i

propri browser. Ciò ha anche permesso a

questi due linguaggi di espandersi ed essere

sempre più utilizzati.

Partiamo con il tag più usato e che

racchiude la maggior parte delle funzioni di

questo linguaggio:

Il tag <style>; anche questo possiamo definirlo come un tag

genitore.

Possiamo utilizzarlo all’interno del tag <head> d’apertura e di

chiusura ed entro d’esso potremo andare a creare delle “classi”

17Marvin Barletta

che una volta create potremo assegnare a più determinati tag nella

nostra pagina.

Inoltre, se invece volessimo dare degli attributi a tutti gli elementi

dello stesso tipo, invece che riscriverli in ogni tag di quel tipo

presenti nel <body> potremo farlo semplicemente scrivendo il

nome del tag e a seguire le indicazioni che vorremo attribuirgli,

tutto questo all’interno di una parentesi graffa d’apertura e una di

chiusura.

Esempio:

<head><style>

h1 {color:green}</style>

</head>___

Scrivendo questo codice, tutti i tag <h1> presenti nella nostra

pagina saranno di colore verde.

Tante volte potremmo aver bisogno di attribuire le stesse funzioni

grafiche a diversi elementi nella pagina web, e proprio per questo

esistono le classi, che ci fanno anche risparmiare tempo di

scrittura e quantità di codice che dovremmo scrivere.

18Marvin Barletta

Facciamo un esempio di una classe.

Si crea scrivendo un punto e subito dopo un nome a nostra scelta,

proprio in questo modo:

<head><style>

.prova {font-size:20px; color:blue}</style>

</head>___

In questa stringa di codice ho creato una classe chiamata prova, le

indicazioni che ho dato a questa classe sono una dimensione del

font di 20px e il colore blu. In questo modo se volessimo che

alcuni elementi nella nostra pagina abbiano questi due attributi, ci

basterà scrivere solamente quanto segue all’interno del tag a cui

vogliamo assegnare la classe:

<p class=”prova”>Ciao come stai?</p>___

19Marvin Barletta

In questo esempio ho assegnato la classe prova ad un singolo tag

<p>, per cui ciò che vedremmo nella pagina all’altezza di quel tag

sarebbe:

Ciao come stai?

Piattaforme e software

Ora vi descriverò alcuni software e delle

piattaforme che ci permettono di realizzare siti

web.

Iniziamo dal dire che per creare un sito web avremo solo bisogno

di un programma per scrivere; personalmente io all’inizio usavo

sempre il blocco note di Windows, poi nel corso del tempo ho

iniziato ad usare Adobe Dreamweaver, software che consiglio

vivamente, che ho conosciuto e imparato ad utilizzare a scuola.

Ovviamente se si vuole usare questo programma per creare un

sito, bisogna conoscere comunque il linguaggio web, a differenza

di altri che vedremo dopo.

In questo software di Adobe dovremo comunque scrivere il codice

a mano, ma da un buon aiuto nel fare ciò, poichè innanzitutto

suddivide il codice che andremo a scrivere con dei colori, per cui

nel caso facessimo un errore ci accorgeremmo che il codice non

ha il colore che dovrebbe avere; ma oltre a questo il programma ci 20Marvin

Barletta

da l’oppurtunità di vedere fin da subito come verrà visualizzato il

nostro sito mentre scriviamo il codice, certamente questo è molto

più comodo e utile di salvare il file ogni volta che ne avremmo

bisogno per poterlo vedere tramite browser. In pratica ci sono tre

tastini, che ci permettono appunto di avere solamente davanti a sè

il codice, l’aspetto reale del sito, oppure dividere queste due

appena dette.

21Marvin Barletta

22Marvin Barletta

L’aspetto più comodo secondo me, è l’aiuto che ti da mentre si sta

scrivendo il codice, perchè mentre scriviamo, il programma ti

mette subito a destra una finestrella contenente un elenco dei vari

tag o attributi che iniziano con le lettere che abbiamo appena

scritto, per cui scorrendo e trovato ciò che avremmo dovuto

scrivere a mano, facendo invio il programma

ti scrive direttamente tutta la stringa di

codice.

Ciò aiuta a trovare qualcosa del linguaggio

che non ricordavamo perfettamente e

velocizza il progresso del nostro sito.

Comunque ci sono davvero svariate funzioni che aiutano a

realizzare un sito web in questo programma.

Invece come detto prima esistono delle piattaforme scaricabili e

online che permettono di sviluppare un sito senza aver bisogno di

conoscere il linguaggio web. Grazie a queste piattaforme

potremmo avere uno sviluppo migliore di un sito, soprattutto

riguardo all’aspetto grafico, poichè dispongono di una modalità di

scelta templates che permette di dare subito una base e una

composizione di un sito.

Come anticipato all’inizio, se volessimo usare gratuitamente uno

di questi strumenti, il nostro sito prenderà il dominio della

piattaforma, invece se volessimo un dominio personale dovremmo 23Marvin

Barletta

pagare una cifra che cambia a differenza del programma che

usiamo.

Queste piattaforme offrono una gestione del sito direi altrettanto

superiore in confronto a siti per hosting o altri programmini solo

per scrivere il codice.

Una di queste che sicuramente conoscerete già è Wordpress, che

è quella che ho usato per il mio blog personale.

Wordpress possiamo dire che ha una gestione completa del sito,

dove possiamo facilmente fare qualsiasi modifica o risolvere un

problema in modo immediato.

E’ una piattaforma molto attrezzata e

professionale, per qualsiasi genere di

sito abbiamo bisogno; ma

personalmente ne preferisco un’altra

che ho conosciuto da poco grazie ad

una collaborazione con la nostra

scuola; si chiama: Garoo.

Questa piattaforma è molto più semplice da usare ma da meno

gestibilità dei componenti di un sito, per cui spesso i siti

realizzabili sono tutti con un format simile; nonostante ciò in

pochi giorni si riesce a sviluppare un sito semplice, pulito e

completo.

24Marvin Barletta

Praticamente in questa collaborazione con la scuola, l’azienda in

causa ci ha dato l’oppurtunità di creare un account per un tempo

limitato di accessibilità maggiore a quello utilizzabile a tutti

gratuitamente, e con esso dovevamo creare un sito riguardante un

agriturismo; loro ci hanno fatto vedere il progetto con i contenuti

che avremmo dovuto inserire e noi nel giro di tre settimane circa

lo dovevamo portare a termine.

Il sito che ho creato io si chiama:

www.marvinbarletta.garoobox.com.

E’ stata molto bella ed utile questa

esperienza a parer mio, poichè oltre ad aver avuto modo di

conoscere ed utilizzare un nuovo strumento, ci siamo messi come

nella situazione di un’azienda che ci chiede di realizzarle un sito

ed entro un periodo di tempo portarlo a termine, proprio come nel

mondo del lavoro.

Sicuramente consiglio questo utile strumento e lo riutilizzerò per

realizzare siti in futuro.

25Marvin Barletta

Conclusione

Per portare a termine questa tesi mi ci è voluto un paio di mesi di

tempo e molta dedizione, soprattutto perché mi sono voluto

sforzare di scrivere tutte le informazioni presenti esclusivamente a

parole mie.

Gli strumenti che ho utilizzato per la realizzazione della tesi sono,

Word 2011 per l’impaginazione e il format del contenuto, Adobe

Photoshop per modificare alcune immagini, Adobe Illustrator per

la creazione della copertina, Google Immagini per attingere

qualche immagine ed infine il browser di Google per varie

informazioni.

Concludo dicendo di essere soddisfatto del lavoro che ho svolto in

relazione a questa tesi. Ammetto di non aver fatto, o avuto il

necessario bisogno di svolgere numerose ricerche, anche per la

conoscenza già acquisita, tuttavia credo di essermela cavata e

spero di aver suscitato anche un minimo interesse per l’argomento

in questione e di aver fatto una buona esposizione.

Un ringraziamento speciale ai professori che mi hanno aiutato e

seguito nella realizzazione di questa tesi.

26Marvin Barletta

Sitografia

https://it.wikipedia.org/wiki/HTML (Wikipedia HTML)

https://it.wikipedia.org/wiki/CSS (Wikipedia CSS)

http://www.html.it/pag/16026/introduzione22/

http://www.html.it/pag/16033/struttura-della-pagina/

27Marvin Barletta