Zadanie do samodzielnego wykonania
Mirosław Zelent
Dokonaliśmy już przeglądu podstawowych właściwości CSS, a z poprzednich odcinków znamy zarówno katalog znaczników HTML, jak i sposób tworzenia struktury opartej na divach. To już całkiem spory zasób wiedzy! Pora wykorzystać zdobytą wiedzę w akcji i rozwiązać część front-endową rzeczywistego zadania egzaminacyjnego (część back-endową w tym odcinku jeszcze pomijamy).
Wykonuj polecenia cierpliwie i dokładnie, zachowując pełną koncentrację – tak jakby to był rzeczywisty egzamin. Sprawdź w jakim czasie uda Ci się zrealizować cały front-end do tego zadania. Pamiętaj – im szybciej sobie poradzisz z okodowaniem HTML i CSS na Twoim rzeczywistym egzaminie, tym więcej czasu będziesz mógł przeznaczyć na PHP, JS i MySQL. To dlatego warto ćwiczyć się w sprawnym tworzeniu layoutów totalnie od zera (nie mówiąc już o przyzwyczajeniu się do zachowania koncentracji przez długi okres czasu, jak i do zdyscyplinowanego realizowania odgórnych wytycznych co do joty – to właśnie według tych wytycznych sprawdza się pracę w kluczu odpowiedzi). Do dzieła!
Arkusz E.14 (styczeń 2017)
Wykonaj stronę internetową wspomagającą pracę komisu samochodowego, przedstawioną na rysunku poniżej (pobierz ten obraz).
Przygotowanie grafiki:
- plik auto.png (pobierz tutaj) należy przeskalować do wymiarów: szerokość 100px, wysokość 50px. Pozostałych atrybutów obrazu nie należy zmieniać.
Cechy witryny:
- nazwa pliku: auto.html,
- zastosowany standard kodowania polskich znaków,
- tytuł strony widoczny na karcie przeglądarki: "Komis Samochodowy";
- arkusz stylów w pliku o nazwie auto.css jest prawidłowo połączony z kodem strony;
- podział strony na bloki: baner, panele lewy i prawy, stopka zrealizowana zgodnie z rysunkiem 2 i wytycznymi dla zawartości stopki poniżej
- zawartość banera: nagłówek pierwszego stopnia o treści: "SAMOCHODY";
- zawartość panelu lewego: nagłówek drugiego stopnia o treści: "Wykaz samochodów", lista nienumerowana (wypunktowana) wypełniana wartościami ja na rysunku, nagłówek drugiego stopnia o treści: “Zamówienia”, lista nienumerowana wypełniona za pomocą wartościami jak na rysunku,
- zawartość panelu prawego: nagłówek drugiego stopnia o treści: "Pełne dane: Fiat", główną część panelu wypełnić wartościami jak na rysunku, z użyciem paragrafów
- zawartość stopki: tabela o jednym wierszu i trzech kolumnach: w komórce 1 odnośnik o treści "Kwerendy" prowadzący pod adres "kwerendy.html" (to tylko adres, ten plik nie musi istnieć). W komórce 2 napis "Autor: " oraz wstawiony Twój numer PESEL, w komórce 3 obraz auto.png. Tekst alternatywny ustawiony na "komis samochodowy".
Styl CSS witryny internetowej:
Plik auto.css zawiera formatowanie dla:
- banera: kolor tła #45517D, biały kolor czcionki, rozmiar czcionki 120%, wyrównanie tekstu do prawej strony, wysokość banera 60px;
- panelu lewego: kolor tła #61B2EC, szerokość 40%, wysokość 500px;
- panelu prawego: kolor tła #8EC9F2, szerokość 60%, wysokość 500px;
- stopki: kolor tła #45517D, biały kolor czcionki, rozmiar czcionki 150%, wyrównanie tekstu do środka;
- odnośników: odnośnik niewybrany w kolorze pomarańczowym, odwiedzony w kolorze zielonym;
- tabeli: szerokość tabeli zajmuje 100% strony.
Niewymienione właściwości obiektów przybierają wartości domyślne!
Polecamy: Sekurak Academy 2024
Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus