Al-Sughari

Kod do pliku html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		/* początek def CSS */
		*
		{
			margin: 0px; padding: 0px;
		}
		/* zerowanie styli */
		
		div
		{
			overflow: hidden;
			padding: 25px;
		}
		/* overflow: hidden --> zapobiega wystawaniu elementu poza element gdy wychodzi poza granice (ucina wystajacy tekst) */
		/* padding: 25px; --> margines wewnetrzny 25px */
		
		#ramka
		{
			/* definicja elementu ID o nazwie ramka*/
			margin-right: auto; /* auto --> przeglądarka sama ustali wielkość prawego marginesu*/
			margin-left: auto;
			min-width: 400px; /* minimalna szer strony --> element ramki nie będzie mniejszy niż 400px */
			max_width: 900px; /* maksymalna szer strony --> element ramki nie będzie większy niż 900px */
		}
		#naglowek {
		background-color: #FFA07A;
		/* kolor tła w HEX na #FCF; */
		font-size:16pt;
		/* wielkość czcionki na 16pt na jaka tu jest jednostka-wpisz */
		color:red;
		/* kolor tekstu to czerwony */
		font-family: Arial;
		/* rodzaj czcionki to Arial */
		font-style: italic;
		/* styl czcionki to italic */
		text-align: center;
		/* tekst wyśrodkowany */
		font-weight:bold;
		/* tekst pogrubiony */
		}
		#stopka {
		background-color: #B22222;
		font-size:16pt; 
		color:blue;
		font-family: Arial;
		font-style: italic;
		clear:both;
		/* clear-przyleganie elementów, both - element jest przesuwany poniżej elementów pływających po obu stronach */
		}
		.kolumny {/*definicja elementu ???? (jest kropka i co to znaczy)*/
		margin-top: 10px; /* margines od góry 10 pikseli */
		margin-right: 2%; /* margines od prawej 2% */
		margin-bottom: 2%; /* margines od dołu 2% */
		margin-left: 10px; /* margines od lewej 10 pikseli */
		background-color: #c0c0c0;
		}
		#kol1 {
		float: left; /* element ustawia się po lewej stronie poprzedniego elementu */
		width:100px;
		background-color: #DC143C;
		}
		#kol2 {
		background-color: #FA8072;
		font-size: 0.7cm;
		color: #4CBB17;
		}
		#menu_prawe_Al-Sughari
		{
			background-color: #F08080;
			width: 100px;
			font-size: 0.5cm;
			color: #FF0000;
			float: right;
		}
		
		
		</style>
	</head>
	<body>
		<div id="ramka">
			<div id="naglowek">Nagłówek mojej strony </div>
				<div class="kolumny" id="kol1"><p>Menu</p> </div>
				<div class="kolumny" id="kol2">
					<p>Przy zmianie szerokości okna przeglądarki zmieniać się będzie szerokość kolumn. Najczęściej zmiana szerokości dotyczy tylko wybranych kolumn np. kolumna menu pozostaje niezmieniona, pozostałe kolumny zmieniaja się płynnie w stosunku do szerokości okna.</p>
						<br><br>
					<img src="../img/Al-Sughari_100procent.bmp">
					<img src="../img/Al-Sughari_50procent.bmp">
				</div>
				<div class="kolumny" id="menu_prawe_Al-Sughari">
					<p>Al-Sughari</p>
				</div>
			<div id="stopka">Pracę wykonał nieznany woluntariusz</div>
		<a href="../index.html">Powrót do strony głównej</a>
		</div>
	</body>
</html>

Darmowy hosting zapewnia PRV.PL