KOD HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>styl wewnetrzny body</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!- styl wewnetrzny -->
<style type="text/css">
/* zerowanie wszystkich marginesów i przestrzeni*/
* {
margin: 0px;
padding: 0px;
}
/* definicja div*/
/* overflow: hidden --> ukrycie nadmiarowości czyli gdy elementy div są za duże*/
div {
overflow: hidden;
}
/* definicja ramki-główny element*/
/* margin-right: auto;-wartość domyślna */
#ramka {
	background-color: #C93;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

/* definicja nagłówka*/
#naglowek {
	width: 100%;
	background-color: #ffff33;
	text-align: center;
	font-size: 1cm;
	margin-right: auto;
}

/* definicja stopki*/
#stopka {
	width: 100%;
	background-color: #666666;
	text-align: center;
	margin-right: auto;
}

/* definicja klasy kolumny */
.kolumny {
width:30%;
margin-top:10px;
margin-right:2%;
margin-bottom:2%;
margin-left:10px;
}

/* definicje trzech kolumn */
/* float :left; to aby elementy były obok siebie */
#kolumna_pierwsza {
float:left;
background-color: green;
text-align: center;
margin-right: auto;
}

#kolumna_druga {
float:left;
background-color: #7093DB;
margin-right: auto;
}

#kolumna_trzecia {
background-color: #996633;
float:left;
text-align: center;
margin-right: auto;
}
</style>
</head>
<body>
<div id="ramka">
<div id="naglowek"><font color="lime">Pajdyk Jatryk, 1P </font></div>
<div class="kolumny" id="kolumna_pierwsza">
<ol>
	<li> w oparciu o tabele (HTML > nie stosowane)</li>
	<li> w oparciu o iframe (HTML > nie stosowane)</li>
	<li> na DIVach                                </li>
	<li> w oparciu o instrukcje HTML5             </li>
</ol>
</div>
<div class="kolumny" id="kolumna_druga">
<ol>
	<li>overflow: hidden; - treść niemieszcząca się jest ukrywana		        </li></br>
	<li>float:left; - interesujący nas element HTML stanie się pływającym       </li></br>
	<li>margin-top:10px; - rozmiar górnego zewnętrznego marginesu, 10 pikseli   </li></br>
	<li>margin-right:2%; - rozmiar prawego zewnętrznego marginesu, 2%           </li></br>
	<li>margin-bottom:2%; - rozmiar dolnego zewnętrznego marginesu, 2%          </li></br>
	<li>margin-left:10px; - rozmiar lewego zewnętrznego marginesu, 10 pikseli   </li></br>
</ol>
</div>
<div class="kolumny" id="kolumna_trzecia">
<ol>
	<li>SECTION	</li>
	<li>ARTICLE	</li>
	<li>ASIDE	</li>
	<li>HEADER	</li>
	<li>FOOTER	</li>
	<li>NAV		</li>
</ol>
</div>
<div id="stopka">
<ol>
	<li> w oparciu o tabele (HTML > nie stosowane)</li>
	<li> w oparciu o iframe (HTML > nie stosowane)</li>
	<li> na DIVach                                </li>
	<li> w oparciu o instrukcje HTML5             </li>
</ol>

</br>
</br>
<a href="index.html">Powrocik</a>
</div>
<div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hostinga.htw.pl/prv_hosting_footer.js"></script></body>
</html>