Przykładowe rozwiązanie zadania egzaminacyjnego
Prościej się nie da
ta zasada obowiązuje przy rozwiązywaniu zadań egzaminacyjnych. Jej konsekwencją jest oszczędność czasu i zmniejszenie ryzyka popełnienia błędów.
Grafiki
 |
| kolo.png |
 |
| kwadrat.png |
- Do wykonania obrazu najlepiej użyć programu do obróbki grafiki wektorowej Inkscape.
Witryna
plik index.html<!DOCTYPE html>
<html>
<head>
<title>Strona główna</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<style>
span img {
position: absolute;
top: 200px;
display: none;
}
span:hover img {
display: inline;
}
</style>
</head>
<body>
<header>
<a href="index.html">Figury Geometryczne i Matematycy</a>
</header>
<nav>
<h3>WYBIERZ FIGURĘ</h3>
<ol>
<li><a href="kwadrat.html">KWADRAT</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
<li><a href="kolo.html">KOŁO</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
</ol>
<h3>
<a href="baza/matematycy.accdb">BAZA DANYCH</a></h3>
</nav>
<main>
<h1>FIGURY GEOMETRYCZNE</h1>
<span>KWADRAT <img src=grafika/kwadrat.png alt="kwadrat"></span>
<span>KOŁO <img src=grafika/kolo.png alt="koło"></span>
</main>
<footer>
Strona stworzona przez: PESEL
</footer>
</body>
</html>
plik kolo.html
<!DOCTYPE html> <html> <head> <title>Koło</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <a href="index.html">FIGURY GEOMETRYCZNE I MATEMATYCY</a> </header> <nav> <h3>WYBIERZ FIGURĘ</h3> <ol> <li><a href="kwadrat.html">KWADRAT</a> <ul> <li>Obwód</li> <li>Pole</li> </ul> </li> <li><a href="kolo.html">KOŁO</a> <ul> <li>Obwód</li> <li>Pole</li> </ul> </li> </ol> <h3><a href="../baza/matematycy.accdb">BAZA DANYCH</a></h3> </nav> <main> <i>Podstrona w trakcie budowy</i> </main> <footer> Strona stworzona przez: PESEL </footer> </body> </html>
plik kolo.html
<!DOCTYPE html>
<html>
<head>
<title>Kwadrat</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html">FIGURY GEOMETRYCZNE I MATEMATYCY</a>
</header>
<nav>
<h3>WYBIERZ FIGURĘ</h3>
<ol>
<li><a href="kwadrat.html">KWADRAT</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
<li><a href="kolo.html">KOŁO</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
</ol>
<h3><a href="../baza/matematycy.accdb">BAZA DANYCH</a></h3>
</nav>
<main>
<h1>KWADRAT</h1>
<p><i>Podaj długość boku</i> <input id="input1" type="number"></p>
<p><button onclick="p()">licz pole</button> <button onclick="obw()">licz obwód</button></p>
<output id="output1"></output>
</main>
<footer>
Strona stworzona przez: PESEL
</footer>
<script>
function p() {
if (input1.value=="" || (typeof input1.value*1)=="") {
alert("Należy wpisać wartość liczbową")
}
else {
output1.innerHTML="P = a<sup>2</sup>= "+(input1.value*input1.value)
}
}
function obw() {
if (input1.value=="" || (typeof input1.value*1)=="") {
alert("Należy wpisać wartość liczbową")
}
else {
output1.innerHTML="Obw = 4a = "+(4*input1.value)
}
}
</script>
</body>
</html>
plik style.css
nav {
width: 20%;
height: 500px;
}
main {
width: 80%;
}
header, nav, footer {
background: #63b03c;
color: white;
}
header a, nav a, footer a {
color: white;
}
header {
font: small-caps 300% Arial;
}
header, footer {
text-align: center;
}
ul {
list-style-type: square;
}
nav, main {
float: left;
}
footer {
clear: left;
}
Wskazówki i uwagi:
- Do napisania kodu najlepiej użyć edytora formatującego składnię Notepad++.
- Rozwiązanie należy traktować jako przykładowe, zgodne z zasadami oceniania CKE.