Praktyczne projekty w CSS ¶ Zeszyt ucznia

Zadanie 1. Wykonaj trzy szablony stron.Szablon 1.

LINKI

TREŚĆ

<!doctype html>
<html>
<head>
<meta charset='utf8'>
<title>Wygląd 1</title>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'>
<style lang="text/css">
h1 {
	font-family: Verdana;
	font-size: 14px;
	text-decoration: underline;
}
h2 {
	font-family: "Times New Roman", Times;
	font-size: 11px;
}
h6 {
	font-family: Arial;
	font-size: 6px;
	text-align: center;
}
body {
	background: #FEDCBA;
}
p {
	text-align: justify;
}
p.klasa1 {
	display: block;
	background: #FF0;
	font-family: Courier;
	margin: 50px;
	border: 1px solid grey;
	padding-left: 10px;
}
code {
	font-family: "Courier New";
	font-size: 18px;
	font-weight: bold;
}
.koniec {
	font-family: "Monotype Corsiva", Corsiva, Arial;
	font-size: 24px;
	text-align: center;
	font-decoration: underline;
	color: #FF0FF0;
}
.klasa2 {
	margin: 5px 10px 15px 20px;
	border: 1px solid #ff0ff0;
	background: #fff;
	text-indent: 15px;
}
.intro {
	font-family: 'Sofadi One', cursive;
	font-size: 36px;
}
.intro2 {
	font-family: 'Sofadi One', cursive;
	font-size: 18px;
}
.linki {
	text-align: right;
	padding-right: 30px;
	font-style: oblique;
}
.linki a:link {
	color: #000;
	text-decoration: none;
}
</style>
</head>
<body>
<table align='center' width='95%'>
<thead>
	<tr>
		<td colspan='2' align='center'>
			<text class='intro'>Wie geht's?</text><br />
			<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>
		</td>
	</tr>
</thead>
<tbody>
	<tr>
		<td width='25%' valign='top' class="linki">
			<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia &raquo;</a><br />
			<a href="http://www.wp.pl">Wirtualna Polska &raquo;</a>
		</td>
		<td>
			<h1>To jest nagłówek pierwszego poziomu.</h1>
			<h2>To jest nagłówek drugiego poziomu.</h2>
			<h6>To jest nagłówek szóstego poziomu.</h6>
			<p class="klasa2">To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf.</p>
			<hr width="80%">
			<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>
			<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>
		</td>
	</tr>
</tbody>
<tfoot>
<tr>
	<td colspan='2'>
		<p class='koniec'>А это конец страницы.</p>
	</td>
</tr>
</tfoot>
</table>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

<!doctype html>

<html>

<head>

<title>Wygląd 1</title>

h1 {

font-family: Verdana;

font-size: 14px;

text-decoration: underline;

}

h2 {

font-family: "Times New Roman", Times;

font-size: 11px;

}

h6 {

font-family: Arial;

font-size: 6px;

text-align: center;

}

body {

background: #FEDCBA;

}

p {

text-align: justify;

}

p.klasa1 {

display: block;

background: #FF0;

font-family: Courier;

margin: 50px;

border: 1px solid grey;

padding-left: 10px;

}

code {

font-family: "Courier New";

font-size: 18px;

font-weight: bold;

}

.koniec {

font-family: "Monotype Corsiva", Corsiva, Arial;

font-size: 24px;

text-align: center;

font-decoration: underline;

color: #FF0FF0;

}

.klasa2 {

margin: 5px 10px 15px 20px;

border: 1px solid #ff0ff0;

background: #fff;

text-indent: 15px;

}

.intro {

font-family: 'Sofadi One', cursive;

font-size: 36px;

}

.intro2 {

font-family: 'Sofadi One', cursive;

font-size: 18px;

}

.linki {

text-align: right;

padding-right: 30px;

font-style: oblique;

}

.linki a:link {

color: #000;

text-decoration: none;

}

</style>

</head>

<body>

<thead>

<tr>

<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>

</td>

</tr>

</thead>

<tbody>

<tr>

<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia »</a><br />

<a href="http://www.wp.pl">Wirtualna Polska »</a>

</td>

<td>

<h1>To jest nagłówek pierwszego poziomu.</h1>

<h2>To jest nagłówek drugiego poziomu.</h2>

<h6>To jest nagłówek szóstego poziomu.</h6>

<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>

<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>

</td>

</tr>

</tbody>

<tfoot>

<tr>

<p class='koniec'>А это конец страницы.</p>

</td>

</tr>

</tfoot>

</table>

</body>

</html>

Szablon 2.

Nagłówek

Treść

Stopka

<!doctype html>
<html>
<head>
<meta charset='utf8'>
<title>Wygląd 2</title>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'>
<style lang="text/css">
h1 {
	font-family: Verdana;
	font-size: 14px;
	text-decoration: underline;
}
h2 {
	font-family: "Times New Roman", Times;
	font-size: 11px;
}
h6 {
	font-family: Arial;
	font-size: 6px;
	text-align: center;
}
body {
	background: #FEDCBA;
}
p {
	text-align: justify;
}
p.klasa1 {
	display: block;
	background: #FF0;
	font-family: Courier;
	margin: 50px;
	border: 1px solid grey;
	padding-left: 10px;
}
code {
	font-family: "Courier New";
	font-size: 18px;
	font-weight: bold;
}
.koniec {
	font-family: "Monotype Corsiva", Corsiva, Arial;
	font-size: 24px;
	text-align: center;
	font-decoration: underline;
	color: #FF0FF0;
}
.klasa2 {
	margin: 5px 10px 15px 20px;
	border: 1px solid #ff0ff0;
	background: #fff;
	text-indent: 15px;
}
.intro {
	font-family: 'Sofadi One', cursive;
	font-size: 36px;
}
.intro2 {
	font-family: 'Sofadi One', cursive;
	font-size: 18px;
}
.linki {
	font-style: oblique;
	text-align: center;
}
.linki a:link {
	color: #000;
	text-decoration: none;
}
</style>
</head>
<body>
<table align='center' width='95%'>
<thead>
	<tr>
		<td align='center'>
			<text class='intro'>Wie geht's?</text><br />
			<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>
		</td>
	</tr>
	<tr height="50px">
		<td valign='middle' class="linki">
			<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia &raquo;</a> | <a href="http://www.wp.pl">Wirtualna Polska &raquo;</a>
		</td>
	</tr>
</thead>
<tbody>
	<tr>
		<td>
			<h1>To jest nagłówek pierwszego poziomu.</h1>
			<h2>To jest nagłówek drugiego poziomu.</h2>
			<h6>To jest nagłówek szóstego poziomu.</h6>
			<p class="klasa2">To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf.</p>
			<hr width="80%">
			<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>
			<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>
		</td>
	</tr>
</tbody>
<tfoot>
<tr>
	<td colspan='2'>
		<p class='koniec'>А это конец страницы.</p>
	</td>
</tr>
</tfoot>
</table>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

<!doctype html>

<html>

<head>

<title>Wygląd 2</title>

h1 {

font-family: Verdana;

font-size: 14px;

text-decoration: underline;

}

h2 {

font-family: "Times New Roman", Times;

font-size: 11px;

}

h6 {

font-family: Arial;

font-size: 6px;

text-align: center;

}

body {

background: #FEDCBA;

}

p {

text-align: justify;

}

p.klasa1 {

display: block;

background: #FF0;

font-family: Courier;

margin: 50px;

border: 1px solid grey;

padding-left: 10px;

}

code {

font-family: "Courier New";

font-size: 18px;

font-weight: bold;

}

.koniec {

font-family: "Monotype Corsiva", Corsiva, Arial;

font-size: 24px;

text-align: center;

font-decoration: underline;

color: #FF0FF0;

}

.klasa2 {

margin: 5px 10px 15px 20px;

border: 1px solid #ff0ff0;

background: #fff;

text-indent: 15px;

}

.intro {

font-family: 'Sofadi One', cursive;

font-size: 36px;

}

.intro2 {

font-family: 'Sofadi One', cursive;

font-size: 18px;

}

.linki {

font-style: oblique;

text-align: center;

}

.linki a:link {

color: #000;

text-decoration: none;

}

</style>

</head>

<body>

<thead>

<tr>

<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>

</td>

</tr>

<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia »</a> | <a href="http://www.wp.pl">Wirtualna Polska »</a>

</td>

</tr>

</thead>

<tbody>

<tr>

<td>

<h1>To jest nagłówek pierwszego poziomu.</h1>

<h2>To jest nagłówek drugiego poziomu.</h2>

<h6>To jest nagłówek szóstego poziomu.</h6>

<p class="klasa2">To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf. To jest paragraf.</p>

<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>

<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>

</td>

</tr>

</tbody>

<tfoot>

<tr>

<p class='koniec'>А это конец страницы.</p>

</td>

</tr>

</tfoot>

</table>

</body>

</html>

Szablon 3.

Lewa
	Nagłówek
	Linki jakieś?
	Treść
Stopka

<!doctype html>
<html>
<head>
<meta charset='utf8'>
<title>Wygląd 3</title>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'>
<style lang="text/css">
h1 {
	font-family: Verdana;
	font-size: 14px;
	text-decoration: underline;
}
h2 {
	font-family: "Times New Roman", Times;
	font-size: 11px;
}
h6 {
	font-family: Arial;
	font-size: 6px;
	text-align: center;
}
body {
	background: #FEDCBA;
}
p {
	text-align: justify;
}
p.klasa1 {
	display: block;
	background: #FF0;
	font-family: Courier;
	margin: 50px;
	border: 1px solid grey;
	padding-left: 10px;
}
code {
	font-family: "Courier New";
	font-size: 18px;
	font-weight: bold;
}
.koniec {
	font-family: "Monotype Corsiva", Corsiva, Arial;
	font-size: 24px;
	text-align: center;
	font-decoration: underline;
	color: #FF0FF0;
}
.klasa2 {
	margin: 5px 10px 15px 20px;
	border: 1px solid #ff0ff0;
	background: #fff;
	text-indent: 15px;
}
.intro {
	font-family: 'Sofadi One', cursive;
	font-size: 36px;
}
.intro2 {
	font-family: 'Sofadi One', cursive;
	font-size: 18px;
}
.linki {
	font-style: oblique;
	text-align: center;
}
.linki a:link {
	color: #000;
	text-decoration: none;
}
</style>
</head>
<body>
<table align='center' width='95%'>
	<tr>
		<td valign='top' class="linki" width="25%" rowspan='4'>
			<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia &raquo;</a><br /><a href="http://www.wp.pl">Wirtualna Polska &raquo;</a>
		</td>
	</tr>
	<tr>
		<td align='center'>
			<text class='intro'>Wie geht's?</text><br />
			<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>
		</td>
	</tr>
	<tr>
		<td align="center">
			<hr width="97%" />
		</td>
	</tr>
	<tr>
		<td>
			<h1>To jest nagłówek pierwszego poziomu.</h1>
			<h2>To jest nagłówek drugiego poziomu.</h2>
			<h6>To jest nagłówek szóstego poziomu.</h6>
			<p class="klasa2">To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf. To&nbsp;jest paragraf.</p>
			<hr width="80%">
			<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>
			<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>
		</td>
	</tr>
	<tr>
		<td colspan='2'>
			<p class='koniec'>А это конец страницы.</p>
		</td>
	</tr>
</table>
</body>
</html>

100

101

102

103

104

105

106

107

108

<!doctype html>

<html>

<head>

<title>Wygląd 3</title>

h1 {

font-family: Verdana;

font-size: 14px;

text-decoration: underline;

}

h2 {

font-family: "Times New Roman", Times;

font-size: 11px;

}

h6 {

font-family: Arial;

font-size: 6px;

text-align: center;

}

body {

background: #FEDCBA;

}

p {

text-align: justify;

}

p.klasa1 {

display: block;

background: #FF0;

font-family: Courier;

margin: 50px;

border: 1px solid grey;

padding-left: 10px;

}

code {

font-family: "Courier New";

font-size: 18px;

font-weight: bold;

}

.koniec {

font-family: "Monotype Corsiva", Corsiva, Arial;

font-size: 24px;

text-align: center;

font-decoration: underline;

color: #FF0FF0;

}

.klasa2 {

margin: 5px 10px 15px 20px;

border: 1px solid #ff0ff0;

background: #fff;

text-indent: 15px;

}

.intro {

font-family: 'Sofadi One', cursive;

font-size: 36px;

}

.intro2 {

font-family: 'Sofadi One', cursive;

font-size: 18px;

}

.linki {

font-style: oblique;

text-align: center;

}

.linki a:link {

color: #000;

text-decoration: none;

}

</style>

</head>

<body>

<tr>

<a href="http://zeszyt.jedlikowski.com">Zeszyt ucznia »</a><br /><a href="http://www.wp.pl">Wirtualna Polska »</a>

</td>

</tr>

<tr>

<text class='intro2'>Ich heiße Przemek. Mir geht es gut.</text>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td>

<h1>To jest nagłówek pierwszego poziomu.</h1>

<h2>To jest nagłówek drugiego poziomu.</h2>

<h6>To jest nagłówek szóstego poziomu.</h6>

<p class='klasa1'>To jest paragraf klasy <code>klasa1</code></p>

<div style="background: #000FF0; color: #FFFFFF;">To jest element blokowy.</div>

</td>

</tr>

<tr>

<p class='koniec'>А это конец страницы.</p>

</td>

</tr>

</table>

</body>

</html>

Zeszyt ucznia

Notatki z przedmiotów zawodowych technika informatyka

Praktyczne projekty w CSS

Dodaj komentarz Anuluj pisanie odpowiedzi