Con la pagina HTML che vi presento oggi stamperemo l’immagine di una piramide di quadrati colorati grazie a CSS Block Model: la parte di CSS che ci permette di creare “box” contenenti anche testi o immagini.
Tutto ciò che c’è da sapere e comprendere per creare questa pagina HTML è descritto accuratamente e con molti esempi facili da capire sul sito w3school del quale vi lascio sotto il link:
https://www.w3schools.com/html/default.asp
Questa è la pagina html:
<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
background-color: violet;
width:30px;
height:30px;
border: 1px solid black;
padding: 50px;
margin: 20px;}
#box2 {
background-color: lightgreen;
float: left;
width: 30px;
height:30px;
border: 1px solid black;
padding: 50px;
margin: 20px;}
#box3 {
background-color: lightgreen;
float: left;
width:30px;
height:30px;
border: 1px solid black;
padding: 50px;
margin: 20px;}
#box4 {
background-color: blue;
float: left;
clear: left;
width: 30px;
height:30px;
border: 1px solid black;
padding: 50px;
margin: 20px;}
#box5 {
background-color: blue;
float: left;
width: 30px;
height:30px;
border: 1px solid black;
padding: 50px;
margin: 20px;}
#box6 {
background-color: blue;
float: left;
width: 30px;
height:30px;
border: 1px solid black;
padding: 50px;
margin: 20px;}
</style>
</head>
<body>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”box3″></div>
<div id=”box4″></div>
<div id=”box5″></div>
<div id=”box6″></div>
</body>
</html>