Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-06-19.06 - Czerwiec 2019 - Wersja #06
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
baner1.png
baner2.png
animacja.gif
favicon.png
mysz.png
klatki.jpg
Plik index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pogotowie komputerowe</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<div id="kontener">
<header>
<img src="animacja.gif" alt="Baner strony">
</header>
<nav>
<a href="index.html">O nas</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<div id="lewy">
<h2>Kim jesteśmy?</h2>
<p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
</div>
<div id="srodkowy">
<h2>Co robimy?</h2>
<ul>
<li>Naprawiamy komputery stacjonarne i laptopy</li>
<li>odzyskujemy dane</li>
<li>usuwamy problemy z oprogramowaniem</li>
<li>konfigurujemy sieć LAN</li>
<li>i wiele więcej</li>
</ul>
</div>
<div id="prawy">
<h2>Co nas cechuje?</h2>
<p>Doświadczenie, niezawodność, konkurencyjne ceny</p>
</div>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a></p>
</footer>
</div>
</body>
</html> Plik kontakt.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pogotowie komputerowe</title>
<link rel="stylesheet" href="styl.css">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<div id="kontener">
<header>
<img src="animacja.gif" alt="Baner strony">
</header>
<nav>
<a href="index.html">O nas</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<div id="lewy">
</div>
<div id="srodkowy">
<h3>Formularz kontaktowy</h3>
<table>
<tr>
<td>Imię:</td>
<td><input type="text" name="imie" id="imie"></td>
</tr>
<tr>
<td>Nazwisko:</td>
<td><input type="text" name="nazwisko" id="nazwisko"></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td>Usługa:</td>
<td>
<select name="usluga" id="usluga">
<option value="naprawa komputera">naprawa komputera</option>
<option value="odzyskiwanie danych">odzyskiwanie danych</option>
<option value="problemy z oprogramowaniem">problemy z oprogramowaniem</option>
<option value="konfiguracja sieci LAN">konfiguracja sieci LAN</option>
<option value="inne">inne</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="kopia" id="kopia" checked> Wyślij kopię wiadomości<br>
<button type="reset" id="reset" onclick="reset()">Resetuj</button>
<button type="submit" id="submit" onclick="przeslij()">Prześlij</button>
</td>
</tr>
</table>
<p id="wynik"></p>
<script src="skrypt.js"></script>
</div>
<div id="prawy">
</div>
<footer>
<p>Autor strony: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a></p>
</footer>
</div>
</body>
</html> Plik skrypt.js
function przeslij() {
var imie = document.getElementById("imie").value;
var nazwisko = document.getElementById("nazwisko").value;
var email = document.getElementById("email").value.toLowerCase();
var usluga = document.getElementById("usluga").value;
document.getElementById("wynik").innerHTML = imie + " " + nazwisko + "<br>" + email + "<br>Usługa: " + usluga;
}
function reset() {
document.getElementById("imie").value = "";
document.getElementById("nazwisko").value = "";
document.getElementById("email").value = "";
document.getElementById("usluga").value = "naprawa komputera";
document.getElementById("wynik").innerHTML = "";
} Plik styl.css
body {
background: #99FFCC;
}
#kontener {
width: 1000px;
margin: 0 auto;
}
header {
background: #99FF66;
height: 200px;
}
nav {
background: #66CCFF;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
#lewy,#srodkowy,#prawy {
width: 310px;
padding: 10px;
float: left;
}
footer {
background: #66CCFF;
color: #006666;
text-align: right;
height: 30px;
padding: 20px;
clear: both;
}
nav a {
color: #006666;
padding: 50px;
font-size: 200%;
text-decoration: none;
}
h2,h3 {
text-align: center;
}
#reset {
background: #FF0000;
}
#submit {
background: #00FF00;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL