Esercizio 00 – pagina HTML/CSS

Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressa con la struttura esemplificativa ma realistica del nostro sito con la/le pagine web nel livello più basso, una cartella css per i fogli di stile, una js per gli script javascript ed una img per contenere le immagini. I link all’interno del codice delle pagine devono tener conto di tali percorsi. Quindi il codice è estratto e pubblicato. Le soluzioni proposte non necessariamente sono le uniche valide, possono esistere diversi modi di realizzare una specifica con selettori e fogli di stile differenti. Le soluzioni proposte sono testate su W3C Validator

Esercizio 00 

L’esercizio che proponiamo è davvero molto semplice per prendere confidenza o ripassare i tag fondamentali di una pagina web, i tag semantici aggiunti dallo HTML5 e una infarinata base di CSS con gli elementi più utilizzati. Vediamo il codice e cerchiamo di analizzare frammento per frammento. Essendo un test puramente didattico, non ha pretese di design gradevole!

Diamo prima un’occhiata alla pagina che vogliamo realizzare 

esempio realizzazione esercizio 00

 

 Il codice completo della nostra pagina HTML

<!DOCTYPE HTML>
<html lang="it">
<head>
	<title>La mia pagina</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
	<img src="img/logo.png" alt="logo azienda">
</header>

<nav>
 <a href="index.html">Home</a>&nbsp;&nbsp; 
 <a href="chisono.html">Chi sono</a>&nbsp;&nbsp;
 <a href="lavori.html">Lavori</a>&nbsp;&nbsp;
 <a href="contatti.html">Contatti</a>
</nav>

<main>
<h1>Benvenuto</h1>
<p>Scrivo un testo <span class="red">rosso</span></p>
<div id="pippo">Un altro testo a caso</div>
</main>

<footer>
Copyright Tizio incognito 2019
</footer>

</body>
</html> 

Il foglio di stile CSS completo

header
{
	background-color: orange;
	border: 1px solid red;
}

nav
{
	background-color: blue;
}

a 
{
	color: white;
	font-size: 1.5em;               
}

a:link
{
	text-decoration: none;
	padding: 10px 0 0 15px;		
}
a:hover
{
	text-decoration: underline;	
	font-size: 2em; 
}

.red{ color: red; font-style: italic;}

#pippo
{
	font-family: verdana; 
	font-size: 1.5em; 
	font-weight: bold;  
}

footer
{
	background-color: grey;
	text-align: center;
}

Ultima modifica 19 Ottobre 2023