Programowanie webowe | 03. Przegląd znaczników HTML

Zadanie do samodzielnego wykonania

Mirosław Zelent

Wykonaj interfejs strony internetowej polskiego klanu graczy CS:GO o nazwie Non omnis moriar (aktualnie jeszcze silverów), którzy chcąc rozwijać pasję wspólnego rozgrywania meczy online, pragną uruchomić w sieci klanową witrynę ułatwiającą rekrutację, jak i przegląd aktualnego składu drużyny głównej i rezerwowej. Pierwsza, robocza wersja serwisu ma składać się z dwóch podstron: index.html (strona główna) oraz register.html (podstrona zawierająca formularz rekrutacyjny).

Wymagania dotyczące witryny

1. Korzystając z wiedzy z odcinka 1 i 2 kursu, zrealizuj od zera następującą strukturę blokową serwisu (z użyciem display: inline-block; bądź float:left;) tak dla strony głównej, jak i podstrony z formularzem rejestracji. Interfejs ma zajmować 100% dostępnej w przeglądarce przestrzeni (20% nawigacja, 50% główny content, 30% tabela graczy).

Wymagania dotyczące obu plików (index.html, register.html):

2. Logiem serwisu ma być obraz związany z CS:GO (którego klan niestety nie dostarczył – trzeba będzie coś samodzielnie opracować), o wymiarach 800×150 px. Obraz powinien posiadać ustawiony alternatywny opis o treści: klan non omnis moriar przeznaczony dla osób słabowidzących (korzystających z czytników witryn), bądź odwiedzających serwis z wyłączonym pokazywaniem grafik. Pod linkami, w nowym paragrafie <p></p> ma znaleźć się następująca informacja:

Uwaga! Trwa rekrutacja! Wymagana ranga: silver.

Słowa te uznawane są za ważne informacje klanowe i będą restrykcyjnie przestrzegane.

3. Nawigacja (lewa szpalta witryny) ma zawierać trzy hiperłącza umieszczone wewnątrz listy nienumerowanej:

• do pliku index.html, kotwicą linku jest napis: Strona główna
• do pliku register.html, kotwicą linku jest napis: Dołącz do nas
• do serwisu Twitch.tv (adres: http://bit.ly/streamy-csgo), kotwicą linku jest napis: Streamy z CS:GO. Link powinien otwierać się w nowej karcie przeglądarki.

4. Obszar prawej szpalty serwisu ma zawierać aktualną tabelę graczy (w przyszłości dane będą wyjmowane z bazy, aktualnie jest to tabela 5 wierszy na 3 kolumny). Wygląd tabeli dostarczony przez klan jest następujący:

Uwaga: pierwszy wiersz nie zawiera wartości, tylko słowny opis zawartości kolumn. Czcionka wiersza zawierającego dane gracza Sn1p3RR ma kolor czerwony, gdyż jest on założycielem (szefem) całego klanu, zaś czcionka wiersza zawierającego dane gracza Gh0st256 ma kolor zielony, gdyż jest on sekretarzem drużyny. Pod tabelą ma znaleźć się legenda wyjaśniająca te barwy – ma zostać zapisana małą czcionką w znacznikach <small></small>. Poszczególne kolory zaś, mają zostać uzyskane przez zastosowanie znaczników <span></span>.

5. Stopka witryny ma zawierać następujący cytat:

Słowa Douglas MacArthur są podlinkowane do następującego adresu (źródła cytatu): https://pl.wikiquote.org/wiki/Douglas_MacArthur Słowa w mgnieniu oka zostały podkreślone emfazą, gdyż mają charakterystyczną wymowę w kontekście gry FPS wymagającej nad wyraz rozwiniętego refleksu.

Wymagania dotyczące jedynie strony głównej (index.html):

6. Obszar contentu strony głównej rozpoczyna się od nagłówka h1 o treści: Witaj w witrynie klanu CS:GO Non Omnis Moriar! po czym następują dwa akapity cytowanego tekstu:

Counter-Strike: Global Offensive (CS:GO) – wieloosobowa gra komputerowa z gatunku first person shooter, stworzona oraz wydana przez studia Valve Corporation i Hidden Path Entertainment, które już wcześniej pracowały nad Counter-Strike: Source. Jest to najnowsza część serii Counter-Strike.

Global Offensive wydano 21 sierpnia 2012 roku na platformę Steam. Gra jest dostępna na systemy: Microsoft Windows, Linux, Mac OS X, Xbox 360 (poprzez Xbox Live Arcade) oraz PlayStation 3 (za pośrednictwem PlayStation Network) – źródło: Wikipedia

Link ma prowadzić pod adres:
https://pl.wikipedia.org/wiki/Counter-Strike:_Global_Offensive

Wymagania dotyczące jedynie podstrony z formularzem rejestracji (register.html):

7. Obszar contentu ma zawierać formularz prowadzący do pliku new.php (skrypt dodający nowego klanowicza – póki co jedynie zakładamy, że taki plik powstanie (interesuje nas jedynie ustawienie przekierowania do takiego pliku przy submitowaniu formularza). Metodą przesyłania danych formularza będzie metoda post.

8. Formularz ma zawierać następujące kontrolki (opatrzone odpowiednimi etykietami):

• Tekstowe pole edycyjne do wprowadzenia nicka, z ustawioną placeholderem podpowiedzią o treści: istniejący nick z CS
• Dwa pola edycyjne do wprowadzenia i powtórzenia hasła
• Numeryczne pole edycyjne do wprowadzenia roku urodzenia
• Dwa pola radio do wyboru płci (domyślnie zaznaczone jest pole Mężczyzna)
• Checkbox Akceptuję regulamin serwisu (domyślnie zaznaczone)
• Checkbox Wyrażam zgodę na otrzymywanie newslettera (domyślnie odznaczone)
• Lista jednokrotnego wyboru Ulubiona broń z następującymi opcjami: Five-SeveN, Desert Eagle, PP-Bizon, AWP, MP9, AK-47,
• Lista umożliwiająca wielokrotny wybór Ulubione mapy: Dust II, Mirage, Cache, Inferno, Nuke, Train
• Wielolinowe pole tekstowe Kilka słów o sobie, które dodatkowo opisane jest komentarzem zamkniętym w tagach <small></small> o treści: Opisz swoją przygodę z CS:GO, dlaczego wybrałeś akurat nasz klan?
• Przycisk submitujący formularz Zarejestruj się!

Oczywiście w zadaniu tworzymy jedynie front-endowy interfejs formularza (aby przećwiczyć w praktyce poznane w niniejszym przeglądzie znaczniki HTML) – zrealizowanie mechaniki przetwarzania formularza, jak i bazodanowego zaplecza to już zadanie na inne epizody serii. Powodzenia!