Sierpień 2015 rozwiązanie plik: index.htlm <!DOCTYPE html> <html> <head> <title>strona główna</title> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <style> //ustalamy położenie wyświetlania figur po najechaniu myszką za pomoca znacznika span 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> //lista numerowana i wypunktowana <li><a href="kwadrat.html">kwadrat</a> <li>pole <li><a href="kolo.html">koło</a> <li>pole </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> </tr> </table> </main> <footer> Strona stworzona przez: PESEL </footer> </body> </html> 1
Uwagi: Pokazanie rysunków koła i kwadratu za pomocą znacznika <span> plik styl.css nav { width: 20%; height: 500px; main { width: 80%; header, nav, footer { background: #63b03c; color: white; header a, nav a, footer a { color: white; text-decoration: none; //linki nie podkreślone header { font: small-caps 300% Arial; header, footer { text-align: center; ul { list-style-type: square; nav, main { float: left; footer { clear: both; Efekt: 2
Strona obliczająca obwód i pole kwadratu Formularz wprowadzania danych: <h1>kwadrat</h1> <form> Podaj długość boku: <input id="bok" value=""><br> <input type="button" id="guzik" value="licz pole" onclick="liczpole();"> <input type="button" id="guzik" value="licz obwód" onclick="liczobwod();"> <output id="output1"></output> </form> alert ('Wprowadź poprawne dane') //sprawdzenie, jeśli miejsce jest puste lub wpisana wartośc nie jest liczba pojawia się komunikat output1.innerhtml="p = a<sup>2</sup>= "+(bok.value*bok.value) //output1.innerhtml obiekt wykonujący działania na stronie, w tym przypadku wypisanie obliczonych wartości, podobnie jak document.write alert ('Wprowadź poprawne dane') output1.innerhtml="obw. = 4*a= "+(4*bok.value) Cały plik kwadrat.html Kopiujemy index.html i w znaczniku <main> wklejamy formularz i kod obliczający wartości. <!DOCTYPE html> <html> <head> <title>kwadrat</title> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> 3
</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> <li>pole <li><a href="kolo.html">koło</a> <li>pole </ol> <h3><a href="../baza/matematycy.accdb">baza DANYCH</a></h3> </nav> <main> <h1>kwadrat</h1> <form> Podaj długość boku: <input id="bok" value=""><br> <input type="button" id="guzik" value="licz pole" onclick="liczpole();"> <input type="button" id="guzik" value="licz obwód" onclick="liczobwod();"> <output id="output1"></output> </form> </main> <footer> Strona stworzona przez: PESEL </footer> alert ('Wprowadź poprawne dane') output1.innerhtml="p = a<sup>2</sup>= "+(bok.value*bok.value) alert ('Wprowadź poprawne dane') 4
output1.innerhtml="obw. = 4*a= "+(4*bok.value) </body> </html> Prawie identyczny skrypt dla koła. alert ('Wprowadź poprawne dane') output1.innerhtml="p = ΠR<sup>2</sup>= "+(Math.PI*Math.pow(bok.value, 2)) // Π symbol liczby pi //Math.PI wartośc liczby pi //obiekt math.pow() podnosi zmienną bok.value do kwadratu (3 do sześcianu) alert ('Wprowadź poprawne dane') output1.innerhtml="obw. = 2 Π R= "+(2*Math.PI*bok.value) //wyświetlanie dwóch miejsc po przecinku Math.round(l*1e2)/1e2 //Math.round((2*Math.PI*bok.value)*1e2)/1e2 Chcemy jeszcze wyświetlić wynik z dwoma miejscami po przecinku Cały 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> 5
</header> <nav> <h3>wybierz FIGURĘ</h3> <ol> <li><a href="kwadrat.html">kwadrat</a> <li>pole <li><a href="kolo.html">koło</a> <li>pole </ol> <h3><a href="../baza/matematycy.accdb">baza DANYCH</a></h3> </nav> <main> <h1>kwadrat</h1> <form> Podaj długość boku: <input id="bok" value=""><br> <input type="button" id="guzik" value="licz pole" onclick="liczpole();"> <input type="button" id="guzik" value="licz obwód" onclick="liczobwod();"> <output id="output1"></output> </form> </main> <footer> Strona stworzona przez: PESEL </footer> alert ('Wprowadź poprawne dane') output1.innerhtml="p = ΠR<sup>2</sup>= "+Math.round((Math.PI*Math.pow(bok.value, 2))*1e2)/1e2 alert ('Wprowadź poprawne dane') output1.innerhtml="obw. = 2 Π R= "+Math.round((2*Math.PI*bok.value)*1e2)/1e2 </body> </html> 6