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.