Sierpień 2015 rozwiązanie plik: index.htlm

Wielkość: px

Rozpocząć pokaz od strony:

Download "Sierpień 2015 rozwiązanie plik: index.htlm"

Stefan Wrona
5 lat temu
Przeglądów:

1 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

2 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

3 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

4 </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

5 output1.innerhtml="obw. = 4*a= "+(4*bok.value) </body> </html> Prawie identyczny skrypt dla koła. alert ('Wprowadź poprawne dane') output1.innerhtml="p = &#928R<sup>2</sup>= "+(Math.PI*Math.pow(bok.value, 2)) // &#928 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 &#928 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

6 </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 = &#928R<sup>2</sup>= "+Math.round((Math.PI*Math.pow(bok.value, 2))*1e2)/1e2 alert ('Wprowadź poprawne dane') output1.innerhtml="obw. = 2 &#928 R= "+Math.round((2*Math.PI*bok.value)*1e2)/1e2 </body> </html> 6

Podobne dokumenty

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści