Costruire un sito Web 7 – CSS – Parte 5
I font
Vediamo come dare stile al nostro testo. Per il tipo di font si devono usare quelli che hanno tutti i pc per non evitate che il nostro sito vada in errore o che visualizzi un font che non avevamo scelto. I font che si trova in tutti i pc li trovate qui. Mentre se volete dei font particolari li trovate qui. Come vedete sono i font che mette a disposizione google gratuitamente. Una volta che avete scelto il vostro font e modificato come volete premete sul + a questo punto in basso a destra cliccate sulla barra che vi apparire e copiate il codice. es: <link href=”https://fonts.googleapis.com/css?family= Spartan:300&display=swap” rel=”stylesheet”> questa linea va messa in <head> . Sotto troverete il codice per richiamarlo. es. font-family: Spartan ; lo potete inserire nell’esempio che ho messo sotto al posto della linea font-style:italic;
<html>
<head>
<title>Webpage di stile</title>
<style type="text/css">
.bold {
font-weight: bold;
}
.italic {
font-style:italic;
}
.underlined {
text-decoration: underline;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:green;
}
.big {
font-size: 200%
}
</style>
</head>
<body>
<p class="bold">This is some bold text!</p>
<p class="italic">This is some italic text! <span class="bold">And this is bold and italic.</span></p>
<p class="underlined">This text is underlined!</p>
<a href="">This is a non-underlined link</a>
<p class="big">This text is BIG!</p<
</body>
</html>
Allineamento del testo
Di seguito metto un es. su come allineare il testo.
<html>
<head>
<title>;Webpage With Style</title>
<style type="text/css">
p {
text-align:right;
}
div {
width:300px;
background-color:green;
}
.centered {
text-align: center;
}
.justified {
text-align: justify;
}
</style>
</head>
<body>
<div>
<p>Questo testo è a destre</p>
<p class="centered">Questo testo è centrato</p>
<p class="justified">Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate - come testimonia Michele Psello nelle sue cronache - dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l'Impero. Una volta sconfitti i due generali ribelli, Basilio II conseguì notevoli risultati in ambito militare conquistando</p>
</div>
</body>
</html>
I Link
Vediamo come possiamo dare dello stile a dei link.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color:green;
}
</style>
</head>
<body>
<div>
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.google.it" target="_blank">Google in a new tab</a></p>
</div>
</body>
</html>
Nel codice si sono quattro novità.
- text-decoration: none; Toglie il testo sottolineato che è standard nei link
- a:hover Hover è una pseudo classe che vuol dire quando il mouse va sopra alla linea text-decoration: underline; viene sottolineata
- a:visited visited è una speudo classe che vuol dire che quando un link è stato visitato color:green; cambia il colore in verde
- target=”_blank” se vogliamo che quando si clicca sul link si apra una pagina nuova
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
Costruire un sito Web 6 – CSS – Parte 4
Oggi parliamo di Margin, Padding e Border.
Margin
Margin serve per dare un margine tutto intorno a una fotografia piuttosto che a un paragrafo ect. Se noi scriviamo Margin:100px; vuol dire che metteremo 100px tutto intorno all’oggetto. Possiamo anche decidere di fare dei margini diversi. Se invece di un varolo ne mettiamo due Margin:100px 50px; metterono 100px sopra e sotto e 50px a destra e sinistra. Volendo possiamo anche cambiare il margine per ogni lato Margin:100px 50px 20px 40px; in questo caso avremo 100px sopra, 50px a destra, 20px sotto e 40px a sinistra del nostro oggetto. Esiste un’altro modo per dare margine.
- margin-top:100px;
- margin-left:50px;
- margin-bottom:20px;
- margin-right:40px;
In questo modo se lo desideriamo possiamo avere i margini dove vogliamo in modo più leggibile.
Padding
Il Padding funzione allo stesso modo di margin. La differenza sostanziale è che mentre margine da del margine intorno all’oggetto, padding da margine all’interno dell’oggetto stesso.
<html>
<head>
<title>Pagina web con CSS</title>
<style type=”text/css”>
.secondo {
color:pink;
background-color:#000080;
width:200px;
float:left;
text-align: justify;
position:relative;
padding:50px ;}
</style>
</head>
<body>
<p class=”secondo”>Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate – come testimonia Michele Psello nelle sue cronache – dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l’Impero.</p>
</body>
</html>
Il risultato.
Come vedete tutto intorno al testo abbiamo del margine. Senza padding il risultato è questo:
Border
Border si utilizza per dare uno stile al bordo dell’oggetto. Es:
<html>
<head>
<title>Webpage With Style </title>
<style type="text/css">
#quadrato-red {
background-color:red;
border: 10px yellow solid;
}
#quadrato-blue {
background-color:blue;
border-style: ridge solid dotted dashed;
border-color: green beige pink palegoldenrod;
border-width: 10px 5px 2px 1px;
}
#quadrato-green {
background-color:green;
border-radius:50%;
}
.quadrato{
width:400px;
height:400px;
margin:40px;
float:left;
}
</style>
</head>
<body>
<div id="quadrato-red" class="quadrato"> </div>
<div id="quadrato-blue" class="quadrato"> </div>
<div id="quadrato-green" class="quadrato"> </div>
</body>
</html>
Potete copiare il codice e vedere quello che fa. Col border bisogna specificare tre valore; la grandezza del bordo il colore e lo stile. border: 10px yellow solid;
- border-style:ridge solid dotted dashed; si da uno stile diverso per ogni bordo
- border-color: green beige pink palegoldenrod; si da un colore diverso per ogni bordo
- border-width: 10px 5px 2px 1px; si da una grandezza diversa per ogni bordo
- border-radius:50%; per creare dei cerchi o se utilizzate px anche bordi arrotondati
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
Costruire un sito Web 4 – CSS – Parte 2
CLASSI e ID
Nel precedente articolo vi avevo parlato del CSS inline. Adesso cominciamo a vedere il CSS interno. Col CSS interno si può da stile a tutto quello che si vuole, vediamo come si fa.
All’interno del tag <head></head> si deve specificare che tutto quello che si scriverà sarà CSS. Si utilizza il tag <style></style> ma non basta bisogna specificare anche il tipo. Perciò <style type=”text/css”> </style>. In questo modo diciamo a HTML che tutto quello che scriviamo all’interno del tag <style> è CSS. Se voglia dare dello stile a tutti i paragrafi e cioè <p></p> basta aggiungere la p seguita dalle parentesi graffe. E tutto quello che scriviamo all’interno delle parentesi graffe di p mi darà stile a tutti i <p>. Di conseguenza se volessi cambiare lo stile al tag <h1> si procede come abbiamo fatto con <p>. La procedura è uguale per tutti i tag. La cosa importante che alla fine di ogni linea di comando è mettere il ;.
In questo modo noi possiamo dare stile uguale ad es. a tutti i paragrafi. Ma come faccio se ho più paragrafi e voglio cambiare stile a ogni paragrafo? Si devono usare le classi e gli ID.
<style type=”text/css”>
.size {
font-size:200%;
}</style>
</head>
<body>
<h1 class=”size”>Titolo</h1>
Praticamente noi creiamo una class dandogli il nome che vogliamo in questo esempio size. Per poterla richiamare dovremo utilizzare il punto davanti al nome .size, in questo modo noi possiamo utilizzare la class size in tutti i tag che vogliamo e dare lo stesso stile a tutti i tag, dove la utilizziamo in questo esempio utilizzando font-size:200% il testo sarà il 200% più grande dell’originale. Possiamo anche utilizzare più classi in un tag. Se noi avessimo delle classi che si chiamano size e font li potremo richiamare mettendoli all’interno delle virgolette distanziati dallo spazio. Es. <h1 class=”size font”>Titolo</h1> in questo modo utilizzeremo due classi. Per quanto riguarda gli ID la struttura è identica, l’unica differenza sarà che per richiamarli non si utilizzerà il punto ma bensì il #. E al posto di class si utilizza id.
<style type=”text/css”>
#size {
font-size:200%;
}</style>
</head>
<body>
<h1 id=”size”>Titolo</h1>
La domanda sporge spontanea, ma se sono uguali perché utilizzare sia le classi che gli id? Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id. Negli altri casi, se non disponiamo di alternative (come ad esempio il selettore discendente) possiamo usare una classe.
Costruire un sito Web 1 – HTML – Parte 1
HTML
Metterò i comandi (Tag) più usati per la costruzione di una pagina web. Per prima cosa ci vuole un buon editor. Io uso Notepad++.
L’HTML ha uno schema iniziale da rispettare.
Come si vede un tag è composto da < >. Se fate caso, quando si apre un tag es. <html> si deve chiudere con / es. </html>. Come vedete tutti hanno un’apertura e una chiusura. Perciò tutto il linguaggio html deve essere scritto tra <html> e </html>. Poi si mette <head>… </head> qui ci si mette prevalentemente il titolo. Invece in <body>..</body> tutto il resto del codice.
Adesso vediamo altri tag. Cominciamo col titolo. <title>La mia prima pagina Web</title>. Tutto quello che viene scritto tra il tag <title> sarà il titolo della scheda del Browser.
Qui a sinistra avete tre modi in cui si può scrivere del testo. Nel primo caso non ho utilizzato nessun tag e anche se vado a capo, il browser non l’ho riconosce. Perchè come vedete nella figura sopra mette le due righe a fianco. Per poter andare a capo ci sono due modi. Il primo è quello di utilizzare il tag <p></p> che sarebbe un paragrafo, e utilizzerei due paragrafi uno per ogni riga. Nel secondo caso utilizzo un solo tag <p></p> e dove voglio andare a capo utilizzo il tag <br> che come vedete non ha bisogno del tag di chiusura. Si chiama tag autochiudente. L’unica differenza tra le due modalità per andare a capo sono gli spazi tra una riga e l’altra.
Adesso vi metto degli esempi di formattazione del testo.
Infine abbiamo il tag <h1></h1> che viene utilizzato come titolo e per questo è utile per il SEO per il semplice fatto che viene indicizzato da Google. Da questo tag ne esistono 6 tipi.
Merita un discorso a parte la lista non ordinata e quella ordinata.
Per poter fare una lista non ordinata si utilizza il tag <ul></ul> e al suo interno per ogni lista si utilizza <li></li>
Mentre per le liste ordinate si usa il tag <ol></ol> e al suo interno per ogni lista si utilizza <li></li>
Volendo le liste si possono far partite da un numero prestabilito. Non necessariamente devono partire da 1. Se nel tag di apertura scrivo <ol start=10> ……. </ol> il primo numero della lista sarà 10 poi 11 ect. Inserendo nel tag reversed, cioè <ol reversed> ……… </ol> la numerazione sarà decrescente.
Utilizzando la lista type possiamo scegliere tra 5 modi diversi lista. Scrivendo <ol type=”a”>……</ol> la numerazione sarà alfabetica. Le altre numerazioni sono “1”,”i”,”I”,”a” e “A”.
Per quanto riguarda la formattazione del testo in HTML per il momento è tutto. Adesso vediamo come inserire delle immagine in un sito web. Prima di tutto consiglio di copiarsi le immagini nella cartella del sito web. Perchè si possono fare dei collegamenti con altri siti web, il problema è che non ne abbiamo il controllo, per il semplice fatto che gli potrebbero cambiare percorso e non li troveremo più.
Si scrive <img src=”nomefile.estensione”> anche questo è un tag autochiudente. In questo modo l’immagine appare nel suo formato originale. Se volessimo ridurre o ingrandire l’immagine si utilizza width per la larghezza height per l’altezza. Scrivendo ad es. <img src=”nomefile.estensione” width=”100″ height =”130″> i numeri corrispondono ai pixel. Per finire si può decidere se mettere l’immagine a destra (right) o a sinistra (left) col comando align. Scrivendo es. <img src=”nomefile.estensione” width=”100″ height =”130″ align=right>
Mentre per visualizzare un’immagine che si trova in un’altro sito web.
<img src=https://upload.wikimedia.org/wikipedia/it/thumb/3/37/Marge_Simpson_in_A_proposito_di_Margie.png/120px-Marge_Simpson_in_A_proposito_di_Margie.png width=”100″ height =”150″ align=left>
Per concludere questa Parte con HTML, se si volesse scrivere dei commenti del codice si utilizza il tag <!– Qui si puo scrivere tutto quello che si vuole. –> Vedo che non si capisce come si scrive. Dopo <! ci sono due – come nella chiusura del tag.
Se proverete a scrivere in HTML vi accorgerete che graficamente non è bello. Per questo si utilizza il CSS che si utilizza insieme HTML. Con questo codice si potrà abbellire il tutto.
Nella prossima parte vi parlerò dei Form e delle Tabelle.
Se volete approfondire meglio HTML potete cercare su internet.
