Parti di una pagina web con HTML5
<!DOCTYPE html>
<html lang=”it”>
<head>
<meta charset=”utf-8”>
<title>Titolo della pagina che appare nel tag delle pagine del browser</title>
<link href=”template.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
//eventuale codice css legato al singolo documento
</style>
<script>
//eventuale codice Javascript
</script>
</head>
<body>
<div>
questo
è un blocco generico all'interno del quale si possono inserire altri
comandi html
</div>
<div
class=”nome_classe”
>
questo
è un blocco generico con caratteristiche definite dal foglio CSS.
All'interno si possono inserire altri comandi html
</div>
<header>
viene
usato in ogni blocco in cui serve identificare un'intestazione
<header>
<nav>
viene
usato per il blocco che contiene il menù della pagina
</nav>
<section>
section
: contiene più articoli
<article>
viene
usato per contenere il testo dell'argomento principale della pagina,
ci possono essere più articoli separati
</article>
<article>
…………………….
</article>
</section>
<aside>
blocco
che contiene : pubblicità, login, campo cerca, piccoli form, num.
Visitatori, ecc.
<aside>
<footer>
serve
per contenere il piè di pagina della schermata o dei vari blocchi
</footer>
</body>
</html>
Tutta
la pagina web visibile sullo schermo è
all'interno
del
<body>
….. </body>
che è il corpo della pagina web, cioè l'intera videata. Le parole
chiave racchiuse tra parentesi angolari <...> si chiamano
TAG
.
Il browser è il programma che li interpreta e visualizza quello che
contengono secondo il tipo di tag usato. Questo linguaggio markup non
è case sensitive.
Il
tag di apertura può contenere degli attributi : nome_attributo =
“valore”
Gli
attributi di <body ….> incidono su tutta la pagina :
Bgcolor
: permette di definire un colore monocromatico di sfondo
Background
: permette di inserire un immagine come sfondo
link
: permette di stabilire il colore dei link
vlink
: permette di stabilire il colore dei link già visitati
alink
: permette di stabilire il colore dei link quando c'è sopra il
cursore del mouse
Anche
se è meglio delegare al foglio CSS il compito di definire queste
caratteristiche.
Il
testo può essere racchiuso all'interno di un paragrafo, cioè un
blocco che può avere delle caratteristiche personalizzate :
<span>
… </span>
il testo contenuto non si discosta dalla posizione originale, serve
solo per poter formattare in modo particolare il testo contenuto.
Vedremo come con il linguaggio CSS.
<p>
… </p>
crea un paragrafo ,
posso
formattare il testo che contiene, ma a differenza di <span>
dopo la chiusura viene creata una riga vuota che separa da tutto
quello che segue.
<div>
… </div>
rappresenta
un contenitore, quindi posso dargli delle dimensioni e altre
caratteristiche con il linguaggio CSS. Se non specificato quello che
segue è attaccato alla parte bassa.