Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
vuoi
o PayPal
tutte le volte che vuoi
URL
L'URL identifica in modo univoco una pagina Web:
- Schema: protocollo utilizzato per interagire con il server (generalmente HTTP)
- Host: Nome del computer su cui risiede la pagina, definisce dove si trova il dominio
- Percorso: identifica il percorso ed il nome della pagina all'interno del computer, per navigare nel server.
La creazione di un sito web riguarda la generazione di un ipertesto navigabile all'interno di un percorso. Questo deve essere utilizzato in qualsiasi macchina, poiché è organizzato come se fosse una cartella con i relativi percorsi.
Interazione tra browser e web server
Possiamo riassumere l'operazione di visualizzazione di un sito web nei seguenti passi:
- L'utente inserisce l'URL della pagina da visualizzare
- Il browser invia la richiesta HTTP al server
- Il server invia la pagina richiesta al browser e chiude la sessione HTTP
- Il browser riceve la pagina HTML e la visualizza
Organizzazione di un sito web
Il sito web è un insieme di pagine (non necessariamente residenti sullo stesso server) che sono logicamente collegate tramite una struttura ad ipertesto.
Se il collegamento è esterno vuol dire che la pagina dev'essere all'interno del server e ci dobbiamo muovere all'interno della cartella. Se invece è esterno dobbiamo definire il suo URL, indirizzo univoco.
A differenza di un libro, un ipertesto è un insieme di pagine leggibili in maniera non sequenziale.
Homepage
La pagina iniziale è detta homepage e solitamente ha il nome "index.html" o "home.html" - ogni pagina però avrà estensione html. Ricorda però che quella
Il tuo compito è formattare il testo fornito utilizzando tag html.
ATTENZIONE: non modificare il testo in altro modo, NON aggiungere commenti, NON utilizzare tag h1;
principale sarà quella chiamata index.html o home.html, in questo modo si parte sempre dalla homepage perché il server la ricerca. Per es. se cerco il nome senza la parte finale, tipo www.polimi.it, la pagina ricercata sarà quella della home.
I punti di passaggio ad altre pagine sono chiamati link - come si rende una porzione di testo un collegamento? Lo scopriremo.
In fase di progettazione, è necessario definire la struttura del nostro ipertesto
- Lista e presentazione delle singole pagine
- Collegamenti fra le pagine - dobbiamo garantire che ogni pagina sia raggiungibile dall'index, ovvero dalla homepage. Il sistema dev'essere sempre navigabile ed intuibile.
Ingredienti per un sito: HTML, CSS & Javascript
L'HTML serve a definire quali sono gli elementi da visualizzare, stabilire collegamenti (link) tra le pagine, creare form per gli utenti, fissare titoli, caricare immagini, etc.
Il CSS o "fogli di stile" è un
linguaggio per descrivere una serie di regole per definire l'aspetto o stile (dimensioni, colori, animazioni) che devono assumere gli elementi sulla pagina. Un foglio CSS non ha senso di esistere se non è collegato alla pagina HTML, altrimenti che visualizziamo? Il CSS serve per definire lo stile.
JavaScript è un linguaggio di programmazione che consente di manipolare in modo dinamico ogni aspetto della pagina HTML in base all'interazione con l'utente. In questo caso c'è un concetto di algoritmo.
API: è possibile sfruttare delle interfacce messe a disposizione dal browser, per fare attività aggiuntive sugli elementi: gestione del mouse/touch, manipolazione delle immagini, etc. Sono elementi interdipendenti tra loro.
HTML: il linguaggio HTML è un linguaggio di markup (di 'contrassegno' o 'di marcatura'), che permette di descrivere gli elementi e l'aspetto di un sito web. Utilizzeremo dei marcatori.
ovvero i tag per indicare gli elementi e fornire info su come visualizzarli, si occupa della visualizzazione non grafica, ma di contenuti. HTML è l'acronimo di HyperText Markup Language ("Linguaggio di contrassegno per gli Ipertesti") • Si occupa di gestire la rappresentazione dell'informazione Il linguaggio HTML è basato sul concetto di marcatori, detti tag ('etichette') per separare le informazioni vere e proprie dai dettagli di rappresentazione parentesi angolari • hanno la caratteristica di essere inclusi tra Il linguaggio HTML non è un linguaggio di programmazione in quanto non risolve un algoritmo ma si occupa della rappresentazione dei dati Chi ha inventato HTML pensava fosse un metodo per comunicare info tra pagina e il web. E' fondamentale vedere il codice, poiché ci serve nel momento in cui vogliamo creare un sistema complesso per la gestione di un sito web. (tipo wordpress, dove si possono personalizzare contenuti,Per creare il nostro sito possiamo utilizzare il metodo che vogliamo, basta capirlo.
Nel momento in cui realizziamo un sito utilizziamo un linguaggio imperativo.
Pagina HTML
Tutte le indicazioni per una pagina web sono contenute in un documento HTML, spesso detto pagina HTML.
Editor di testi
Una pagina HTML è un file di testo che in genere ha estensione .html. È sufficiente un per modificare i sorgenti (descrizione delle informazioni e dei marcatori), che ci permettono di visualizzare cosa facciamo, tipo Atom.
Useremo i tag per aggiungere "proprietà al nostro testo", cioè spiegare quali elementi dovranno apparire sullo schermo e come essi debbano essere disposti.
ATTENZIONE: non dobbiamo utilizzare programmi come Word, OpenOffice o WordPad, che sono "wordprocessor" evoluti e non servono allo scopo (aggiungono altre informazioni...)
La Prima Pagina Web
Seppure molto potente, HTML non è un linguaggio complesso e può offrire
Primo elemento: definire il tipo di pagina, tutto quello che è contenuto tra l'apertura di una parentesi angolare e la corrispondente chiusura rappresenta un tag = informazione che stiamo dando al browser ma non è informazione che verrà visualizzata all'interno della nostra pagina. Di tutto questo noi vedremo solo "eccoci" e "questa è la nostra prima pagina" perché è il contenuto, tutto il resto sono informazioni che diciamo sul come farlo visualizzare.
La prima linea <!DOCTYPE html> è un tag che definisce il tipo di formato.
Ci sono dei tag che sono così come sono, tipo doctype, e dei tag che hanno il concetto di apertura e chiusura, vuol dire che per ogni tag ci sono due tag veri e propri uno che è <head> e uno che è </head>.
La pagina HTML ci suggerisce nel momento in cui dobbiamo aggiungere elementi <head>
e <body>
dove metterli. L'elemento <head>
riguarda tutte le informazioni di carattere generale della nostra pagina. Il contenuto vero e proprio si trova nel <body>
. Nell'head c'è il <title>
che rappresenta il nome da visualizzare nel tag del browser ed è il titolo della pagina. È una caratteristica della pagina ma non è il contenuto della pagina. Per la parte di visualizzazione ci dovremo concentrare solo su quello che c'è dentro nel body.
I tag ci servono a delimitare e definire delle sezioni. Permettono di fare apertura o chiusura. Ci sono però degli elementi dove non c'è un concetto di inizio e fine, ma c'è un concetto di oggetto. Ad esempio un'immagine è un oggetto, c'è semplicemente un tag che rappresenta l'immagine ma non c'è un corrispondente tag di chiusura.
Nel momento in cui andiamo ad applicare uno stile dobbiamo definire...
l'inizio e la fine del nostro stile è usare il tag<style>