Pagina HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monumenti famosi del Mondo</title>
<link href="[Link]" type="text/css"
rel="stylesheet">
</head>
<body>
<!-- Titolo principale -->
<h1 id="titolo-pagina">Monumenti famosi del Mondo</h1>
<!-- Menu superiore -->
<p id="menu">
<a href="#paragrafo1" class="link-menu">Tour
Eiffel</a>
<a href="#paragrafo2" class="link-menu">Statua della
Libertà</a>
</p>
<!-- Paragrafo 1 -->
<h2 id="paragrafo1">Tour Eiffel</h2>
<img
src="[Link]
/a8/Tour_Eiffel_Wikimedia_Commons.jpg/320px-Tour_Eiffel_Wik
imedia_Commons.jpg" alt="Torre Eiffel" width="300">
<p>
La <strong>Tour Eiffel</strong>, simbolo della Francia, fu
Costruita per l'<span class="highlight">Esposizione
Universale</span> del 1889.
</p>
<p><a href="#titolo-pagina">Torna su</a></p>
<!-- Paragrafo 2 -->
<h2 id="paragrafo2">Statua della Libertà</h2>
<img
src="[Link]
/dd/Lady_Liberty_under_a_blue_sky_%28cropped%[Link]/320px-L
ady_Liberty_under_a_blue_sky_%28cropped%[Link]" alt="Statua
della Libertà" width="300">
<p>
La <strong>Statua della Libertà</strong>, situata a New
York, simboleggia <span class="highlight">libertà e
democrazia</span>.
</p>
<p><a href="#titolo-pagina">Torna su</a></p>
</body>
</html>
Foglio CSS
/* Importazione dei font da Google Fonts */
@import
url('[Link]
400&family=Crimson+Text:wght@400&display=swap');
/* Stile per il body */
body {
font-family: 'Lato', sans-serif;
font-size: 12pt;
line-height: 1.5;
width: 900px;
margin: 0 auto;
background: #ede0 url('[Link]') no-repeat
fixed right bottom;
}
/* Stile per il titolo principale */
h1 {
font-family: 'Crimson Text', serif;
font-size: 44pt;
font-weight: normal;
margin: 20px 0;
padding: 10px;
color: #593d3b;
background-color: #d5c3b5;
border-bottom: 5px solid #593d3b;
}
/* Stile per gli altri titoli */
h2, h3, h4, h5, h6 {
font-family: 'Crimson Text', serif;
font-size: 26pt;
font-weight: normal;
margin: 20px 0 10px;
width: 500px;
padding: 10px;
color: #593d3b;
background-color: #d5c3b5;
border-bottom: 5px solid #593d3b;
}
/* Stile per il paragrafo "Tratto da..." */
.tratto-da {
font-size: 14pt;
text-align: center;
}
.tratto-da a {
color: inherit;
text-decoration: none;
}
/* Stile per il paragrafo "Menu" */
.menu {
font-family: 'Crimson Text', serif;
font-size: 20pt;
text-align: center;
}
/* Stile per i link interni del menu */
.menu a {
margin: 0 10px;
}
/* Stile per altri link */
a {
color: #593d3b;
text-decoration: none;
}
a:hover {
color: rgba(89, 61, 59, 0.7);
}
/* Stile per evidenziazioni nei paragrafi */
strong {
font-weight: bold;
color: #593d3b;
padding: 2px;
background-color: #d5c3b5;
}
/* Stile per le immagini */
img {
width: 350px;
border-radius: 10px;
}
/* Stile per le immagini spostate a destra */
[Link]-right {
margin-left: 10px;
float: right;
}
/* Stile per le immagini spostate a sinistra */
[Link]-left {
margin-right: 10px;
float: left;
}
/* Stile per i paragrafi */
p {
background-color: rgba(237, 224, 212, 0.8);
margin-bottom: 5px;
padding: 10px;
}