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 »</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="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.</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>
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 »</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>
<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>
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 »</a><br /><a href="http://www.wp.pl">Wirtualna Polska »</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 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>
<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>