Al-Sughari

Kod do pliku html:

<!DOCTYPE html>
<!- okreslenie typu HTML dla walidatora -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<! xmlns okresla przestrzeń nazw dla xml -->
<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" />
		
		<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: #FFD300;
			color: #32CD32;
			font-size: 1cm;
			text-align: center;
			}
			/* definicja stopki*/
			#stopka {
			width: 100%;
			background-color: #948A54;
			}
			/* 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: #90EE90;
			}
			#kolumna_druga {
			float:left;
			background-color: #4B61D1;
			}
			#kolumna_trzecia {
			background-color: #864535;
			float:left;
			}
		</style>
	</head>
	<body>
		<div id="ramka">
			<div id="naglowek">Alexander Al-Sughari 1P</div>
				<div class="kolumny" id="kolumna_pierwsza">
					<ul>
						<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>
					</ul>
				</div>
				<div class="kolumny" id="kolumna_druga">
					<ul>
						<li>overflow: hidden; → ukrycie nadmiarowości czyli gdy elementy div są za duże</li>
						<li>float:left; → to aby elementy były obok siebie</li>
						<li>margin-top:10px; → margines od góry 10 pikseli</li>
						<li>margin-right:2%; → margines od prawej 2%</li>
						<li>margin-bottom:2%; → margines od dołu 2%</li>
						<li>margin-left:10px → margines od lewej 10 pikseli</li>
					</ul>
				</div>
				<div class="kolumny" id="kolumna_trzecia">
					<ul>
						<li>SECTION</li>
						<li>ARTICLE</li>
						<li>ASIDE</li>
						<li>HEADER</li>
						<li>FOOTER</li>
						<li>NAV</li>
					</ul>
				</div>
			<div id="stopka">
				<ul>
					<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>
				</ul>
					<br><br>
				<a href="../index.html">Powrót do strony głównej</a>
			</div>
		</div>
	</body>
</html>

Darmowy hosting zapewnia PRV.PL