La prima pagina web

corso web design

Impariamo a realizzare un semplice sito web con i linguaggi HTML e CSS

La mia carriera da web designer è incominciata 5 anni fa. Da allora non mi sono fermato un attimo nello studio di questo eco-sistema digitale, poiché ogni mese avvengono dei cambiamenti al suo interno. I cambiamenti sono minimi ma sommati ai 12 mesi di cui si compone un anno, questi sono sostanziosi e cercare di apprenderli, capirli e padroneggiarli in poco tempo è una missione davvero ardua.

Questo significa che se dovessi decidere di incominciare a seguire il mio corso su come diventare un web designer, dovrai seguirmi e, come ho fatto io e come fanno tutti coloro che svolgono  questo mestiere, dovrai studiare costantemente e anche in autonomia.

Questo è un corso che ho deciso di avviare in seguito ad una mia prima esperienza di insegnamento dei linguaggi HTML e CSS, esperienza rivelatasi positiva. Se ho potuto insegnare ad una persona le basi per questo mestiere, posso insegnarle anche ad un pubblico più ampio.

Premetto che questo corso ha già avuto inizio due volte e non ho potuto completarlo per motivi di tempo e di organizzazione. Questa volta invece avrà inizio, con questa prima lezione e sarà completato in quanto ho già organizzato tutto il corso nei minimi dettagli. Da oggi verranno pubblicate due lezioni settimanali che vi porteranno a conoscere e padroneggiare – questo dipenderà da te – le basi del web.

A fine lezione vi lascerò l’indice delle lezioni che andranno a comporre questo corso.

web design html css

Strumenti di lavoro

Per poter seguire questo corso gratuito di web design non ci sono dei veri e propri prerequisiti a livello di conoscenza tranne che la voglia di imparare e la passione, anche minima – sono sicuro che amerai anche tu questo mondo -, verso i linguaggi informatici.

Avrai però bisogno di alcuni semplici software che sono già preinstallati sul tuo o che puoi scaricare da internet. Se dovessi scegliere questa seconda opzione – scelta consigliata – di seguito ti lascio i link ai software da scaricare e installare.

  • Browser Web: Google Chrome – se utilizzi un altro browser web come Firefox, Vivaldi o altro, per adesso puoi utilizzarlo senza problemi.
  • Editor: Visual Studio Code – ti consiglio questo editor di testo poiché è  lo stesso che utilizzo quotidianamente. Nel tuo computer hai già un editor di testo che si presta bene anche per lo sviluppo web. Sto parlando del Blocco Note. Come per la questione del browser, sei libero di utilizzare quello che preferisci.

Questi sono gli unici due strumenti che ti serviranno per studiare e apprendere le basi del web design.

E adesso incominciamo.

Cosa sono HTML e CSS?

HTML (HyperText Markup Language) è il linguaggio base di ogni sito web. Con esso si definisce la struttura e il contenuto del nostro sito come titoli, paragrafi e immagini.

Il CSS (Cascading Style Sheets) è, in pratica, un linguaggio di presentazione. È stato creato per dare un aspetto grafico alle pagi[output]ne web utilizzando colori e ombre.

Questi due linguaggi dovrebbero essere sempre indipendenti tra di loro. Ciò significa che dovrebbero essere scritti in due o più file differenti per evitare di fare troppa confusione con il codice.

Capita la differenza base tra questi due linguaggi, analizziamo nello specifico l’HTML.

Termini comuni dell’HTML

Durante lo studio del linguaggio HTML ci imbatteremo in termini nuovi e spesso strani con i quali dovrai familiarizzare il più possibile. Come per le normali lingue di dialogo che utilizziamo noi umani, anche i linguaggi informatici hanno dei termini comuni che bisognerebbe conoscere ma soprattutto distinguere, questi termini sono: elementi, tag e attributi.

Vediamo qual è la differenza tra questi termini così importanti che ci servono per poter diventare dei bravi web designer.

Elementi

Gli elementi all’interno del linguaggio HTML sono i delineatori che definiscono la struttura e il contenuto all’interno di una pagina web.  Gli elementi che vengono usanti più di frequente durante la realizzazione delle pagine web sono:

  • Le intestazioni che a loro volta vengono distinte in modo ordinato da h1ad h6 (in base alla rilevanza dell’intestazione);
  • I paragrafi: identificati come l’elemento p
  • l’elemento link, identificato come a.

Gli elementi vengono identificati dall’uso delle parentesi angolari “minore” e “maggiore”, che circondano il nome dell’elemento. Quindi, un elemento sarà simile a questo:

<a>

Tags

Come abbiamo appena visto un elemento HTML viene richiamato tramite l’apertura e la chiusura di parentesi angolari. L’utilizzo di queste parentesi e quindi di un elemento comporta automaticamente l’utilizzo di un tag. Essi vengono per l’appunto aperti e chiusi con il nome dell’elemento e una volta inserito al suo interno il suo contenuto dobbiamo chiuderlo, sempre utilizzando le parentesi angolari ma con una differenza che vedremo immediatamente.

<a>contenuto</a>

L’elemento aggiunto in questo caso è /.

Dobbiamo sempre ricordarci di chiudere i nostri tag per evitare errori di formattazione e quindi per evitare al contempo una visualizzazione errata del nostro template.

Attributi

Gli attributi in  HTML sono delle proprietà aggiuntive che vengono inserite all’interno dei vari elementi. Gli attributi più comuni sono: l’attributo id o l’attributo class – vedremo la loro differenza e il loro utilizzo più avanti -; l’attributo src che specifica l’origine di un contenuto incorporabile; l’attributo href che ci permette di inserire un link – o collegamento ipertestuale – ad una determinata risorsa.

Gli attributi vengono definiti all’interno del tag di apertura, subito dopo il nome dell’elemento che intendiamo utilizzare. La sintassi di un attributo è costituita dal nome dell’attributo seguito da un segno di uguale e quindi da un valore chiuso tra due apici. Un esempio è quello che stiamo per vedere:

 

 


Il codice appena visto mostra il testo “Google” sulla nostra pagina web e ci indirizzerà su https://www.google.com dopo aper fatto clic sul testo “Google”. L’elemento di ancoraggio viene dichiarato, come vedete, con il tag di apertura <a> e di chiusura </a>. L’attributo e il valore di riferimento del collegamento sono dichiarati con href="https://www.gogole.com".

tag-elemento-html

Ora che sappiamo la differenza tra elemento, tag e attributo possiamo incominciare la realizzazione della nostra prima pagina web.

La struttura del documento HTML

È giunto il momento di aprire l’editor di testo per poterci sporcare le mani con il codice HTML.

I documenti HTML hanno una struttura ben definita che include i seguenti elementi: <! DOCTYPE html>, <html>, <head> e <body>.

La dichiarazione del tipo di documento, o <! DOCTYPE html>, informa i browser Web che la versione di HTML è in uso e si trova all’inizio del documento HTML. Poiché utilizzeremo l’ultima versione (la numero 5) di HTML, la nostra dichiarazione del tipo di documento è semplicemente <! DOCTYPE html>. Seguendo la dichiarazione del tipo di documento, l’elemento <html> indica l’inizio del nostro sito web.

All’interno dell’elemento <html>, dobbiamo inserire l’elemento <head> che identifica la parte superiore del documento, inclusi eventuali meta dati (informazioni sulla pagina). Il contenuto al suo interno scriviamo l’elemento <head>.  Ciò che inseriamo nell’head non viene visualizzato sulla pagina Web stessa all’infuori di due elementi: il <title> ed eventualmente la nostra favicon -non è altro che il logo in miniatura che potete vedere in qualsiasi scheda del vostro browser.

I contenuti visibili all’interno della pagina web rientrano nell’elemento <body>.

Per creare la nostra prima pagina web, copiate il codice che trovate qui sotto, all’interno del vostro editor di testo. Subito dopo salvate, in una qualsiasi posizione del vostro computer – vi consiglio di creare una cartella dove inserire tutti i file html e css che andremo a realizzare – il vostro file con estensione .html o .htm e apritelo con un doppio clic o facendo: clic destro > apri con > Google Chrome (o comunque il tuo browser preferito o predefinito). Se avete scritto bene il codice il risultato sarà simile o uguale a quello che trovate nella scheda result qui sotto.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello, World</h1>
    <p>This is my first web page</p>
  </body>
</html>

 

Ed ecco la nostra prima pagina web.

Hai notato qualcosa di strano all’interno del codice appena scritto?

Se sei stato un attento osservatore e se non ti sei limitato a fare davvero un copia e incolla del codice che ti ho fornito, ti sarai accorto che c’è qualcosa che non torna. Se non l’hai notato ora ti do la risposta.

qualche paragrafo fa ho detto che i tag vanno aperti o chiusi ogni volta che vengono utilizzati. Ma nel codice appena scritto per la nostra prima pagina web ho scritto <meta charset=”UTF-8″> se poi chiudere questo – strano – tag.

Perché?

In html questo tag come altri, sono definiti auto-chiudenti. Ciò significa che non abbiamo bisogno di inserire, come in questo caso il tag di chiusura.

Gli altri tag auto-chiudenti sono:

  • <br>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <wbr>

Quello che abbiamo visto fino ad ora è stato solo un semplice esempio di quello che potremmo fare usando semplicemente il codice HTML, niente di eccezionale ma comunque interessante. L’obiettivo di questo corso gratuito per diventare web designer è quello di farvi assimilare in modo concreto i concetti che si trovano alla base di qualsiasi sito web.

Per farti assimilare questi concetti non vi darò i compiti a casa, al contrario vi guiderò passo passo nella creazione di un sito web vero e soprattutto funzionante.

Da ora in poi utilizzeremo molti elementi html ma soprattutto inseriremo dello stile al nostro sito. Lo renderemo belo, accattivante e moderno. Il tutto grazie alla potenza dei CSS (Cascanding Style Sheet).

web

Incominciamo

  • Apriamo l’editor di testo – ricordo che io utilizzerò Visual Studio Code -, creiamo un file denominato index.html e salviamolo all’interno di una cartella – creala dove ti è più comodo, io la creerò sul mio desktop -;
  • Adesso inserisci la struttura base di un qualsiasi sito web.
<!DOCTYPE html>
<html lang="it">
  <head>
  </head>
  <body>
  </body>
</html>
  • All’interno dell’elemento <head>, aggiungiamo gli elementi <meta> e <title>. L’elemento <meta> dovrebbe includere l’attributo e il valore charset (il charset è il tipo di codifica del nostro computer), mentre l’elemento <title> dovrà contenere il titolo della pagina, diciamo “Evento Web Designer”.
<head>
  <meta charset="utf-8">
  <title>Evento Web Designer</title>
</head>
  • All’interno dell’elemento <body>, aggiungiamo gli elementi <h1> e <p>. L’elemento <h1> dovrebbe includere il titolo del nostro sito o un qualsiasi altro testo introduttivo -per comodità utilizziamo nuovamente “Evento Web Designer” e l’elemento <p> includerà una breve descrizione del nostro evento.
<body>
  <h1>Evento Web Designer</h1>
  <p>Ogni anno i più brillanti web designer e sviluppatori di front-end scendono a Milano per discutere delle ultime tecnologie. Ad agosto non prendere impegni, unisciti a noi</p>
</body>

Vediamo il risultato del nostro operato.

Rechiamoci nella cartella in cui abbiamo salvato il nostro file index.html. Con un doppio clic apriamolo nel nostro browser. Se non dovesse funzionare puoi seguire questi altri due metodi: clic destro sul file html > apri con > Google Chromeo il tuo browser preferito –. Oppure: trascina il tuo file html nel browser.

Il risultato dovrebbe essere simile a quello che vedi qui sotto:

Se il risultato è come quello che vedi sopra puoi continuare la lettura di questa lezione, altrimenti ricontrolla il codice e una volta completate le correzioni torna a leggere.

È giunto il momento di accantonare per un attimo l’HTML – ti ricordo che questo linguaggio creerà solo “lo scheletro” del nostro sito – e passiamo ai CSS che ci permetteranno di dare uno stile ben preciso alle nostre pagine web.

 

Termini comuni CSS

Oltre ai termini HTML, dovrai studiare e familiarizzare anche con alcuni termini comuni del linguaggio CSS. Questi termini sono selettori, proprietà e valori. Più lavorerai con questi due linguaggi più prenderai confidenza con i loro termini.

I selettori

Ogni elemento che aggiungerai nei tuoi file HTML potrà essere abbinato al tuo foglio di stile. Un selettore nel linguaggio CSS è esattamente l’elemento, o gli elementi, aggiunto nel file HTML. Utilizzando i selettori CSS potrai modificare a tuo piacimento ogni singolo elemento della struttura da te creata.

Per poter selezionare un elemento interno delll’HTML e per potergli dare uno stile solitamente gli vengono assegnati un ID o una Classe. Se invece volessimo Dare uno specifico stile ad ogni singolo elemento HTML non servirà assegnare né un ID né una Classe. Per esempio se volessimo colorare di rosso ogni h1 del nostro (futuro) sito web, non dovremmo far altro che richiamare questo elemento nel file CSS tramite il selettore h1 ed inserire lo stile che preferiamo.

N.B.

Selettore CSS = Elemento HTML

Nel linguaggio CSS, i selettori sono seguiti da parentesi graffe {}, che racchiudono gli stili da applicare all’elemento selezionato.

p { stile personalizzato }

Proprietà

Assegnare una proprietà in CSS significa assegnargli uno stile. Le proprietà utilizzabili nel CSS sono davvero tante,  (non pretendo che tu le conosca tutte a memoria perchè sono davvero troppe) e vengono inserite all’interno delle parentesi graffe {}. Ogni proprietà è seguita dai due punti : .

Nel codice seguente vedrai come assegnare una proprietà di colore e dimensione a tutti i titoli principali della nostra pagina web.

 

h1 {
  color: ...;
  font-size: ...;
}

Valori

Finora abbiamo selezionato un elemento con un selettore e determinato quale stile vorremmo applicare con una proprietà. Ora non ci resta che assegnargli un valore. I valori devono essere inseriti subito dopo i due punti e devono essere chiusi con un punto e virgola ; .  Continuiamo quindi la modifica dei nostri titoli determinando il colore di cui vogliamo colorarli (espressi al momento con il codice esadecimale) e le dimensioni (espresse in pixel).

h1 {
color: #d63031;
font-size: 30px;
}

Lavorare con i selettori

I selettori, come accennato in precedenza, indicano a quali elementi HTML vogliamo applicare uno stile. È importante comprendere appieno come utilizzare i selettori e come possono essere sfruttati. Il primo passo è acquisire familiarità con i diversi tipi di selettori. Inizieremo con i selettori più comuni: classe e ID.

Selettori di tipo

Questo tipo di selettore lo abbiamo trattato nei paragrafi precedenti, quindi riassumerò in breve il loro utilizzo.

Un selettore di tipo, non è altro che il corrispondente elemento utilizzato nel codice HTML. Viene richiamato nel CSS digitando semplicemente il nome dell’elemento da decorare, proprio come nella parte di codice che trovate qui sopra.

Selettori di classe

I selettori di classe ci consentono di selezionare un elemento HTML in base all’attributo classe che gli viene assegnato. I selettori di classe sono più specifici dei selettori di tipo, in quanto selezionano un determinato gruppo di elementi che hanno una certa classe, piuttosto che tutti gli elementi dello stesso tipo.

Nel codice CSS, le classi hanno una notazione particolare. Vengono richiamate anteponendo un punto al valore dell’attributo classe assegnato in HTML. È un concetto complicato a spiegare, ma semplice da capire. Guardare per credere.

index.html

<div class="awesome">
<p class="awesome">

style.css

.awesome {
    ......
}

Selettori ID

Gli ID sono ancora più precisi dei selettori di classe, poiché mirano solo a un elemento unico alla volta. Quindi se in fase di progettazione del nostro sito web, dovessimo decidere che uno ed un solo elemento debba godere di una determinata proprietà CSS, gli si dovrà assegnare un ID unico.

Nel codice CSS i selettori ID vengono richiamati anteponendo al un hash # al valore dell’attributo id assegnato nel file HTML. Anche questo è un concetto semplice da apprendere.

 

Indipendentemente dal tipo di elemento su cui appaiono, i valori degli attributi id possono essere utilizzati solo una volta per pagina. Se utilizzati dovrebbero essere riservati per elementi significativi.

index.html

<div id="divisore">

style.css

#divisore {
    ......
}

Pratica

È giunto il momento che tanto aspettavi. Cominciamo a fare praticare anche con i css facendo comunicare il nostro file HTML con il foglio di stile.

Apri il tuo editor e crea un nuovo file. Salvalo momentaneamente nella stessa cartella in cui hai creato il tuo file index.html, con un nome a piacere – io lo chiamerò style.css – e ricordati l’estensione .css

Per lavorare al meglio ti consiglio di dividere il tuo editor in due colonne. Se stai utilizzando Visual Studio Code puoi dividerlo seguendo questa procedura: nella bara superiore di navigazione vai su Visualizza > Editor Layout > Due Colonne.

Questa divisione in colonne te la consiglio per evitare, quando ti troverai a lavorare da solo su un sito intero, di dover fare uno switch da un file all’altro per rivedere il nome delle classi o degli id inseriti nel/nei file html.

Ora prendete il vostro file .css e trascinatelo nella colonna vuota che trovate alla destra del vostro schermo. Così facendo vi troverete con i due file affiancati.

Colleghiamo i due file.

Nell’head del file index.html dobbiamo inserire la porzione di codice che ci permetterà di collegare il file html e il file css.

Inseriamo la seguente riga di codice subito dopo il nostro tag title:

<link rel="stylesheet" href="nome-del-file.css">

Abbiamo così collegato i nostri file, ma non abbiamo ancora inserito nessuno stile ai pochi elementi che al momento compongono la nostra prima pagina web.

Recati con il puntatore sulla seconda colonna, quella relativa al foglio css, e incominciamo a dare un po’ di stile.

I primi stili che inseriremo all’interno del file, li copieremo e incolleremo per da questo sito, divenuto per me e tantissimi altri web designer un punto di riferimento per quanto riguarda il cosiddetto reset dei css. Questo reset ci servirà per dare un primo allineamento e un primo stile a tutti i nostri elementi HTML.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Aprendo o ricaricando la nostra pagina html all’interno del browser, potrete vedere i cambiamenti che ha subito la nostra pagina inserendo il reset css, niente di troppo strabiliante al momento, ma di  grande importanza in vista del nostro progetto web.

Siamo giunti alla fine di questa prima lezione del corso gratuito per web designer.

Nella prossima lezione, lunga tanto quanto questa, approfondiremo l’html, vedremo da quali elementi è  solitamente un layout HTML e continueremo la realizzazione del nostro primo sito web.

Programma del corso

Data di pubblicazione prevista
  • La prima pagina web
  • Impariamo l’HTML
  • Impariamo il CSS
  • Il concetto di scatola
  • Posizionare i contenuti
  • Scegliere il giusto font
  • Inserire sfondi e sfumature
  • Creare degli elenchi
  • Aggiungere i media
  • Costruire dei Form
  • Organizzare dati in tabelle
  • Consigli di best practice
  • 27 Luglio 2018
  • 02 Agosto 2018
  • 06 Agosto 2018
  • 09 Agosto 2018
  • 13 Agosto 2018
  • 16 Agosto 2018
  • 20 Agosto 2018
  • 23 Agosto 2018
  • 27 Agosto 2018
  • 30 Agosto 2018
  • 03 Settembre 2018
  • 06 Settembre 2018

 

Written by: auritidesign

Lascia un commento