Zadanie egzaminacyjne – HTML i CSS (tekst, czcionki, klasy, identyfikatory)
Wykonaj kompletną stronę internetową zgodnie z poniższą specyfikacją. Strona powinna składać się z pliku index.html oraz zewnętrznego arkusza stylów style.css umieszczonego w tym samym katalogu. Strona ma przedstawiać wizytówkę fikcyjnego „Centrum Szkoleń Informatycznych BIT”.
1. Struktura pliku HTML
Utwórz dokument index.html zawierający:
-
Nagłówek strony:
-
Tytuł dokumentu: Centrum Szkoleń Informatycznych BIT
-
Główny nagłówek:
<h1>z identyfikatoremmain-title -
Podtytuł
<h2>z klasąsubtitle
-
-
Sekcję informacyjną:
-
Akapit opisowy o działalności centrum (dowolna treść)
-
Lista punktowana zawierająca co najmniej 5 kierunków szkoleń
-
Link zewnętrzny do strony np. https://www.example.com
-
2. Wymagania dotyczące CSS (plik style.css)
Utwórz plik style.css i dodaj do dokumentu za pomocą:
Zastosuj następujące reguły:
A. Ogólne formatowanie tekstu
-
Ustaw domyślną czcionkę dokumentu na:
-
rodzina:
Arial, a w przypadku braku:sans-serif -
rozmiar domyślny:
16px
-
-
Wszystkie akapity (
p) powinny mieć:-
odstęp między wierszami 1.6
-
kolor tekstu: ciemnoszary
#333
-
B. Stylizacja nagłówków
-
Nagłówek z ID
main-title:-
czcionka:
Georgia, serif -
wielkość:
36px -
kolor:
#0055aa -
wyśrodkowanie tekstu
-
odstęp dolny:
20px
-
-
Elementy z klasą
subtitle:-
wielkość:
22px -
kolor:
#0077cc -
styl czcionki: italic
-
C. Lista
-
Ustaw dla listy punktowanej margines dolny:
20px -
Wszystkie elementy listy (
li) ustaw na:-
margines pionowy 5px
-
kolor czcionki:
#444
-
D. Linki
-
Linki zewnętrzne (
a[href^="http"]) powinny mieć:-
kolor:
#cc0000 -
po najechaniu myszą: kolor ciemniejszy
#990000
-
-
Linki lokalne:
-
kolor:
#006600 -
po najechaniu:
#003300
-
E. Sekcja “Nasi trenerzy”
-
Wszystkie elementy
.trainer:-
ramka:
1px solid #aaa -
zaokrąglenie rogów:
10px -
szerokość:
45% -
margines dolny:
20px -
padding:
15px -
czcionka dla opisów:
15px
-
-
Trener z identyfikatorem
lead-trainer:-
tło:
#eef6ff -
ramka:
2px solid #3399ff -
wprowadź dodatkowy cień:
0 0 10px rgba(0,0,0,0.2)
-
-
Zdjęcia trenerów:
-
szerokość:
150px -
wysokość:
150px -
obramowanie:
3px solid #ccc -
margines dolny:
10px
-
F. Stopka (.footer)
-
tło:
#222 -
kolor tekstu: biały
-
wyśrodkowanie
-
padding:
10px -
czcionka:
14px
