Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY
Zadanie maj 2015 rok Wykonaj zestaw grafik oraz stronę internetową dla zespołów medycznych zgodnie z wymaganiami dotyczącymi bazy danych, grafiki i strony internetowej. Utwórz 3 pliki graficzne, odpowiednio dla każdego zespołu medycznego z bazy danych. Grafiki zapisz w folderze o nazwie PESEL, a następnie w utworzonej bazie danych załącz rysunki do tabeli Zespoły, w polu zespol_logo. Wykonaj stronę WWW prezentującą stworzone przez Ciebie grafiki. Strona powinna składać się z dwóch plików: kodu HTML (index.html) oraz arkusza stylu (format.css). Oba pliki zapisz na pulpicie w folderze PESEL. Wymagania dotyczące grafiki Wymagania wspólne dla wszystkich obrazów: a) szerokość 300 px b) wysokość 200 px c) przy górnej krawędzi umieść napis "SZPITAL MEDYCZNY", zielonego koloru Dodatkowe wymagania dla pliku o nazwie i.png: a) tło: brązowe b) przy dolnej krawędzi umieść napis "Zespół I", szarego koloru oraz koło z wypełnieniem czerwonym. Dodatkowe wymagania dla pliku o nazwie ii.png: a) tło: brak - przezroczyste b) przy dolnej krawędzi umieść napis "Zespół II", szarego koloru oraz kwadrat z wypełnieniem zielonym. Dodatkowe wymagania dla pliku o nazwie iii.png: a) tło: gradient przechodzący; od strony lewej - kolor szary, do strony prawej - jasnoniebieski, b) przy dolnej krawędzi umieść napis "Zespół III", szarego koloru oraz trójkąt z wypełnieniem żółtym. Wymagania dotyczące struktury strony internetowej Kodowanie polskich znaków (ISO-8859-2 lub UTF-8). Tło strony: dowolny odcień szarego (wykorzystaj CSS). Czcionka paragrafu: Verdana o rozmiarze 10 px (wykorzystaj CSS). Tytuł strony: Przegląd Zespołów Medycznych. Zapisz go w odpowiednim znaczniku części nagłówkowej strony oraz w treści strony jako nagłówek 1. Poniżej tytułu wstawione trzy grafiki umieszczone jedna przy drugiej o szerokości 150 px i wysokości 100 px. Kliknięcie w dany obraz otwiera obraz w oryginalnych rozmiarach.. Pod obrazami zamieszczony tekst paragrafu "Kliknij obrazek aby powiększyć tekst".
Przykładowe rozwiązanie: <!Doctype HTML> <HTML> <Head> <Title> Przegląd Zespołów Medycznych </Title> <Meta charset="utf-8"> <link rel="stylesheet" href="format.css"> </head> <body> <h1> Przegląd Zespołów Medycznych </h2> <div> <a href="i.png"> <img src="i.png" alt="zespół I" > </a> </div> <div> <a href="ii.png"> <img src="ii.png" alt="zespół II" > </a> </div> <div> <a href="iii.png"> <img src="iii.png" alt="zespół III" > </a> </div> <p> Kliknij aby powiększyć obrazek </p> </body> </HTML> body{ background-color:gray; img{ div{ p{ width:150px; height:100px; display:inline-block; font-family: Verdana; font-size: 10px;
Zadanie :Styczeń 2016 Styl elementów witryny zdefiniuj przy pomocy języka CSS. Wymagania odnośnie stylu CSS Kolor czcionki odnośników: żółty, Kolor RGB tła banera, stopki i panelu prawego: #4A7684, Kolor czcionki banera, stopki i panelu prawego: biały, Wyrównanie tekstu banera, panelu lewego i stopki: do środka, Krój czcionki banera i stopki : Arial, Marginesy wewnętrzne banera i stopki: 20px, Szerokość panelu lewego: 65%; Szerokość panelu prawego: 35%; Wysokość paneli lewego i prawego 500px. Wymagania odnośnie witryny: Obsługa polskich liter. Tytuł strony: Stacja Meteo Strona podzielona za pomocą znaczników na baner, panele lewy i prawy oraz stopkę zgodnie z rysunkiem z poprzedniej strony. Zawartość banera: nagłówek pierwszego stopnia o treści: STACJA METEO Zawartość panelu lewego: a. Nagłówek drugiego stopnia o treści Dokumentacja wyników zapytań w bazie Meteo, b. Tabela 2x2, w komórkach kolejno obrazy kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg zgodnie z rysunkiem z następnego slajdu ( wysokość grafik 200px, szerokość 400 px), c. Obrazy powinny posiadać ramkę o szerokości 1px, d. Obrazy powinny posiadać tekst alternatywny. Dla kw1.jpg tekst kwerenda1, kw2.jpg kwerenda2, kw3.jpg kwerenda3, kw4.jpg kwerenda4. Zawartość panelu prawego: Nagłówek drugiego stopnia o treści zamiana jednostek temperatury, Nagłówek drugiego stopnia o treści Do pobrania. Odnośnik o treści Kwerendy, prowadzi do pliku kwerendy.txt w folderze baza, Odnośnik o treści Eksport MySQL, prowadzi do pliku meteo.sql w folderze baza, Zawartość stopki: tekst paragrafu o treści PESEL AUTORA STRONY:, A NASTĘPNIE WYPISANY JEST Twój numer PESEL
Przykładowe rozwiązanie: <!Doctype HTML> <head> <title> meteo </title> <meta charset="utf-8"> <link rel="stylesheet" href="meteo.css"> </head> <body> <header> <h1> STACJA METEO </h1> </header> <main> <h2> Dokumentacja wyników zapytań w bazie Meteo </h2> <table> <tr> <td> <img src="kw1.png" alt="kwerenda1"> </td> <td> <img src="kw2.png" alt="kwerenda2"> </td> </tr> <tr> <td> <img src="kw3.png" alt="kwerenda1"> </td> <td> <img src="kw4.png" alt="kwerenda2"> </td> </tr> </table> </main> <nav> <h2> Zamiana jednostek temperatury </h2> </br> </br> <h2> Do pobrania </h2> <ul> <li> <a href="kwerendy.txt";> Kwerendy </a> </li> <li> <a href="meteo.sql"> Eksport MySQL </a> </li> </nav> <footer> <p> PESEL AUTORA STRONY: 00000000000 </p> </footer> </body> </html> header{ background-color:#4a7684; text-align:center; font-family:arial; padding:20px; main{ height:500px; width:65%; text-align:center; float:left; nav{ height:500px; width:35%; float:left; background-color:#4a7684; footer{ padding:20px; background-color:#4a7684; font-family:arial; text-align:center; clear:both; a { color:yellow; img {border: 2px solid black;
Zadanie :czerwiec 2017 -remont Grafika Przy pomocy programu do obróbki grafiki wektorowej wykonaj projekt loga firmy. Swoją pracę udokumentuj zrzutem ekranowym. Wykonaj następujące czynności: Utwórz dowolny obiekt o kształcie fali o szerokości 600 px i wysokości nie większej niż 100 px Utwórz napis USŁUGI REMONTOWE o atrybutach: pogrubiona czcionka Arial, rozmiar 40, kolor wypełnienia: brązowy Rozciągnij obiekt napisu na szerokość 800 px (obraz 1a) Za pomocą odpowiedniej funkcji edytora umieść tekst na kształcie fali. Czynność udokumentuj za pomocą zrzutu ekranowego tak, aby była widoczna nazwa funkcji, która została użyta do transformacji. Zrzut powinien być czytelny. Nie kadruj oraz nie skaluj obrazu, na zrzucie powinien być widoczny zegar na pasku zadań. Zapisz go pod nazwą zrzut1 w formacie JPEG Ukryj obiekt o kształcie fali w taki sposób, aby był widoczny wyłącznie napis Wyeksportuj obraz do formatu PNG o nazwie logo, nadaj mu szerokość 600 px. Obraz powinien posiadać tło przezroczyste. Przykład pliku logo przedstawia rysunek 1b. Cechy witryny wspólne dla wszystkich stron: Witryna składa się z trzech podstron: index.html, kontakt.html i kalkulator.html Zastosowany właściwy standard kodowania polskich znaków Tytuł strony, widoczny na karcie przeglądarki: Wyremontuj mieszkanie Arkusz stylów w pliku o nazwie remont.css, prawidłowo połączony z kodem strony Podział strony na bloki: baner, cztery bloki menu, blok główny i stopka zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2 Zawartość banera: grafika logo Zawartość Menu: cztery bloki, z których każdy zrealizowany za pomocą znaczników sekcji (nie tabeli), zawierające odnośniki: - O NAS prowadzi do strony index.html - KONTAKT prowadzi do strony kontakt.html - KALKULATOR prowadzi do strony kalkulator.html - POLECANE STRONY wskazuje na stronę http://www.jakremontowac.pl/ Strona powinna otworzyć się w osobnej karcie przeglądarki Zawartość bloku głównego: różna dla każdej z podstron, patrz niżej Zawartość stopki: tekst paragrafu Autor strony:, dalej wstawiony Twój numer PESEL
Przykładowe rozwiązanie: Zawartość bloku głównego strony index.html: - Nagłówek pierwszego stopnia o treści Nasza oferta - Listę zagnieżdżoną przedstawia obraz poniżej: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>wyremontuj mieszkanie</title> <link rel="stylesheet" href="remont.css"> </head> <body> <header><img src="logo.png" alt="remont"> </header> <nav> <div> <a href="index.html"> O NAS </a> </div> <div> <a href ="kontakt.html"> KONTAKT </a> </div> <div> <a href="kalkulator.html"> KALKULATOR </a> </div> <div> <a href="http://www.jakremontowac.pl"> POLECANE STRONY </a></div> </nav> <main> <h1> Nasza oferta</h1> <ol> <li>malowanie <ul> <li>elewacji</li> <li>wnętrza mieszkania</li> </ul> </li> <li> układanie glazury</li> <li> układanie podług </li> </ol> </main> <footer>autor strony : 00000000000 </footer> </body> </html>
Przykładowe rozwiązanie: Zawartość bloku głównego strony kalkulator.html : - Nagłówek pierwszego stopnia o treści Malowanie pokoju: 8 zł za m2 - Paragraf o treści Wymiary pokoju w metrach:, dwa pola edycyjne typu numerycznego - Poniżej przycisk o treści OBLICZ KOSZT. Jego wciśnięcie powoduje uruchomienie skryptu <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>wyremontuj mieszkanie</title> <link rel="stylesheet" href="remont.css"> </head> <body> <header><img src="logo.png" alt="remont"> </header> <nav> <div> <a href="index.html"> O NAS </a> </div> <div> <a href ="kontakt.html"> KONTAKT </a> </div> <div> <a href="kalkulator.html"> KALKULATOR </a> </div> <div> <a href="http://www.jakremontowac.pl"> POLECANE STRONY </a></div> </nav> <main> <h1> Malowanie pokoju :8zł za m2 </h1> <p> Wymiary pokoju w metrach </p> </main> <footer>autor strony : 00000000000 </footer> </body> </html>
Przykładowe rozwiązanie: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>wyremontuj mieszkanie</title> <link rel="stylesheet" href="remont.css"> </head> <body> <header><img src="logo.png" alt="remont"> </header> <nav> <div> <a href="index.html"> O NAS </a> </div> <div> <a href ="kontakt.html"> KONTAKT </a> </div> <div> <a href="kalkulator.html"> KALKULATOR </a> </div> <div> <a href="http://www.jakremontowac.pl"> POLECANE STRONY </a></div> </nav> <main> <h1> Dane kontaktowe </h1> </br> <p> Usługi remontowe Jan Nowak</p> </br> <p>ul. Postępu 135</p> </br> <p>warszawa</p> </main> <footer>autor strony : 00000000000 </footer> </body> </html> Zawartość bloku głównego strony kontakt.html: - Nagłówek pierwszego stopnia o treści Dane kontaktowe - Paragraf (akapit) o treści Usługi Remontowe Jan Nowak, paragraf o treści ul. Postępu 135, paragraf o treści Warszawa - Przycisk o treści Wyślij do nas maila, który jest odnośnikiem do adresu mailowego remont@wp.pl
KOD CSS: body{ padding:0px; margin-left:auto; margin-right:auto; width:1200px; header { background-color: RGB(255,213,162); width:100%; text-align : center; float:left; nav { width: 100%; float:left; main { background: white; height:400px; width:100%; float: left; footer { background: RGB(191,112,17); clear:both; text-align:right; font-size:150%; div { background-color:rgb(191,112,17); text-align:center; font-size:150%; width:25%; float:left; a{ img{ padding: 20px;
Zadanie : styczeń 2017 wynajem samochodów Przygotowanie grafiki: plik auto.png należy pobrać ze strony internetowej z zakładki Egzamin i przeskalować do wymiarów: szerokość 50 px, wysokość 25px. Pozostałych atrybutów obrazu nie należy zmieniać. Cechy witryny: nazwa pliku: samochody.php, zastosowany standard kodowania polskich znaków; tytuł strony widoczny na karcie przeglądarki: Wynajmujemy samochody ; arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony; podział strony na bloki: baner, panele lewy, środkowy i prawy zrealizowany za pomocą znaczników sekcji zgodnie z rysunkiem 2; zawartość banera: nagłówek pierwszego stopnia o treści: Wynajem Samochodów ; zawartość panelu lewego: o nagłówek drugiego stopnia o treści: DZIŚ POLECAMY TOYOTĘ ROCZNIK 2014, o nagłówek drugiego stopnia o treści: WSZYSTKIE DOSTĘPNE SAMOCHODY, zawartość panelu środkowego: o nagłówek drugiego stopnia o treści: ZAMÓWIONE AUTA Z NUMERAMI TELEFONÓW KLIENTÓW, zawartość panelu prawego: o nagłówek drugiego stopnia o treści: NASZA OFERTA o lista nienumerowana z punktami o treści: Fiat, Toyota, Opel, Mercedes, o akapit (paragraf) o treści: Tu pobierzesz naszą bazę danych, gdzie bazę danych jest odnośnikiem prowadzącym do pliku SQL z importem bazy danych, o akapit o treści: autor strony: oraz wstawiony Twój numer PESEL Styl CSS witryny internetowej Plik styl.css zawiera formatowanie dla: banera: kolor tła #0B873D, biały kolor czcionki, rozmiar czcionki 150%, wyrównanie tekstu do środka, panelu lewego: kolor tła #8CE1AE, szerokość 40%, wysokość 600 px, panelu środkowego: kolor tła #5CCB89, szerokość 40%, wysokość 600 px, panelu prawego: kolor tła # 1DA956, szerokość 20%, wysokość 600 px, odnośników: odnośnik niewybrany w kolorze brązowym, odwiedzony w kolorze czerwonym, listy nienumerowanej: margines zewnętrzny 20 px, punktorem jest obrazek zapisany w pliku auto.png (własność list-style-image), Niewymienione właściwości obiektów przybierają wartości domyślne.
Przykładowe rozwiązanie: Kod HTML: <!Doctype HTML> <HTML> <HEAD> <TITLE> Wynajmujemy samochody </TITLE> <META charset="utf-8"> <link rel="stylesheet" href="styl.css"> </HEAD> <BODY> <HEADER> <h1>wynajem Samochodów</h1> </HEADER> <ASIDE> <h2>dziś POLECAMY TOYOTĘ ROCZNIK 2014</h2> </br> <h2>wszystkie DOSTĘPNE SAMOCHODY</h2> </ASIDE> <MAIN> <h2> ZAMÓWIONE AUTA Z NUMERAMI TELEFONÓW KLIENTÓW </h2> </MAIN> <NAV> <H2> NASZA OFERTA </H2> <UL> <li> Fiat </li> <li> Toyota </li> <li> Opel </li> <li> Mercedes </li> <p> Tu pobierasz naszą <a href="komis.sql"> bazę danych </a> </p> <p> autor strony:00000000000</p> </NAV> </BODY> </HTML> Kod CSS: header{ background-color: #0B873D; color: white; font-size: 150%; text-align: center; aside{ background-color: #8CE1AE; width:40%; height:600px; float:left; main{ background-color: #5CCB89; width:40%; height:600px; float: left; nav{ background-color: #1DA956; width:20%; height:600px; float:left; a:link {color: brown; a:visited {color:red; ul { margin: 20px; list-style-image: url("auto.png");
Zadanie zima 2016 siła hasła Grafika Witryna internetowa wykorzystuje grafikę, którą należy przygotować. Jest ona zgodna z rysunkiem Cechy grafiki: tło przezroczyste (obraz nie ma tła); na obrazie znajduje się kwadrat o krawędzi równej 450px i zaokrąglonych rogach; kwadrat nie ma wypełnienia, krawędzie grubości 8px są czerwone; w środku kwadratu znajduje się wykrzyknik zapisany czcionką Arial o rozmiarze 450, kolorem czerwonym; na wykrzykniku znajduje się tekst: Czy Twoje hasło jest dobre?, tekst jest złamany dwukrotnie po słowach Twoje i hasło ; tekst jest zapisany czcionką Arial rozmiar 56, niebieskim kolorem; rysunek należy zapisać w formacie PNG pod nazwą rysunek.png. Kwadrat wyznacza granice rysunku, zatem szerokość i wysokość rysunku powinna wynosić 450px.
Witryna internetowa Witryna internetowa składa się z trzech podstron: index.html, sprawdz.html reguly.html. Strony mają wspólny szablon zgodny z rysunkiem. Szablon witryny internetowej Wspólne cechy witryny dla wszystkich podstron: zastosowany właściwy standard kodowania polskich znaków; tytuł strony widoczny na karcie przeglądarki: Wskaźnik jakości hasła ; arkusz stylów umieszczony w osobnym pliku o nazwie: styl2.css; podział strony na bloki: baner, panele lewy i prawy, stopka; zrealizowany za pomocą znaczników sekcji zawartość banera: nagłówek pierwszego stopnia o treści: Weryfikacja jakości hasła ; tekst ten jest odsyłaczem i prowadzi do strony index.html; zawartość panelu lewego: o nagłówek drugiego stopnia o treści: Wybierz opcję, o poniżej lista nienumerowana z elementami: Sprawdź hasło oraz Reguły tworzenia hasła. Każdy z elementów listy jest odsyłaczem i prowadzi kolejno do stron: 1 sprawdz.html, 2 - reguly.html zawartość stopki: nagłówek trzeciego stopnia o treści: Wskaźnik jakości hasła, poniżej paragraf (akapit) o treści: Twórca strony:, dalej wpisany numer PESEL zdającego.
Strona index.html Cechy panelu prawego dla pliku index.html: wstawiony obraz rysunek.png. <!doctype html> <html> <head> <title> haslo </title> <meta charset="utf-8"> <link rel="stylesheet" href="styl2.css"> </head> <body> <header> <h1> <a href="index.html"> Weryfikacja jakości hasła </a></h1> </header> <nav> <h2> Wybierz opcję:</h2> <br/> <ul> <li> <a href="sprawdz.html"> Sprawdź hasło </a></li> <li> <a href="reguly.html"> Reguły tworzenia hasła </a></li> </ul> </nav> <main> <img src="rysunek.png" alt="rysunek"> </main> <footer> <h3> Wskaźnik jakości hasła </h3> <p> Twórca strony:00000000000</p> </footer> </body> </html>
Strona sprawdz.html Cechy panelu prawego dla pliku sprawdz.html: tekst paragrafu: Wpisz hasło:, następnie pole tekstowe do wprowadzenia hasła, następnie przycisk z tekstem Weryfikuj. Wszystkie trzy elementy w jednej linii; cechy pola tekstowego: pole pozwala na sekretne wprowadzenie hasła; w czasie gdy wpisywany jest tekst, pole pokazuje kropki; <!doctype html> <html> <head> <title> haslo </title> <meta charset="utf-8"> <link rel="stylesheet" href="styl2.css"> </head> <body> <header> <h1> <a href="index.html"> Weryfikacja jakości hasła </a></h1> </header> <nav> <h2> Wybierz opcję:</h2> <br/> <ul> <li> <a href="sprawdz.html"> Sprawdź hasło </a></li> <li> <a href="reguly.html"> Reguły tworzenia hasła </a></li> </ul> </nav> <main> <figure> <form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain"> Wpisz hasło: <input type="password" name="haslo" value="" /> <input type="submit" name="przycisk" value="weryfikuj" /> </form> </figure> </main> <footer> <h3> Wskaźnik jakości hasła </h3> <p> Twórca strony:00000000000</p> </footer> </body> </html>
Strona reguly.html Cechy panelu prawego dla pliku reguly.html: tabela z nagłówkami kolumn. Zawartość tekstu zgodna z tabelą <!doctype html> <html> <head> <title> haslo </title> <meta charset="utf-8"> <link rel="stylesheet" href="styl2.css"> </head> <body> <header> <h1> <a href="index.html"> Weryfikacja jakości hasła </a></h1> </header> <nav> <h2> Wybierz opcję:</h2> <br/> <ul> <li> <a href="sprawdz.html"> Sprawdź hasło </a></li> <li> <a href="reguly.html"> Reguły tworzenia hasła </a></li> </ul> </nav> <main> <table> <tr> <th> Jakość hasła </th> <th> Opis </th> </tr> <tr> <td> dobre </td> <td> długość 7 znaków i więcej, zawiera przynajmniej jedną cyfrę </td> </tr> <tr> <td> średnie </td> <td> długość 4 do 6 znaków, zawiera przynajmniej jedną cyfrę </td> </tr> <tr> <td> słabe </td> <td> inne przypadki </td> </tr> </table> </main> <footer> <h3> Wskaźnik jakości hasła </h3> <p> Twórca strony:00000000000</p> </footer> </body> </html>
Kod CSS header{ background-color: #08826A; height:60px; font-family:verdana; text-align:center; nav{ background-color:#1e9880; height:550px; width:30%; float:left; main{ background-color:#9ac8bf; height:550px; width:70%; text-align:center; float:left; footer{ background-color:#08826a; font-family:verdana; text-align:right; clear:both; table{ margin:20px; border:1px solid; border-collapse:collapse; width: 80%; tr:hover{ background-color:green; th{ background-color:#1e98880; border:1px solid ; td{ border:1px solid; text-align:right; a{ ul{ img{ margin:20px; padding:15px; border:2px dotted #1E9880;