Przygotowanie

Spróbuj zbudować stronę internetową wykonując kolejne polecenia. Strona będzie na temat tradycji okresu Bożego Narodzenia ― zaczynamy ją opracowywać na zajęciach w okresie świąt Bożego Narodzenia. Zastosowana kolorystyka i zdobnictwo będzie zbliżone do zdobnictwa dominującego w tym okresie.

Zakładam, że masz już jakieś pojęcie o tworzeniu stron w języku html. Strona dotycząca Bożego Narodzenia, a także ta, którą będziesz opracowywać samodzielnie opracowana jest według pewnego schematu. Musi zawierać:

  • nagłówek
  • menu
  • zawartość główną
  • stopkę

Notatnik

Do pracy będzie Ci potrzebny jakiś notatnik. Starałem się przyzwyczaić Cię do darmowego programu notepad++ ― możesz go pobrać z tej strony. Nie udostępniam go w tym miejscu, ponieważ program jest często aktualizowany. Jeśli interesuje Cię ten program szerzej, too pewne informacje znajdziesz w dziale Opis działania. W niniejszym opracowaniu zastosowałem kolorowanie składni Ruby blue. Przedstawia się on następująco:

<NazwaZnacznika atrybut="wartość atrybutu">treść</NazwaZnacznika>
<!-- komentarz -->
selektor {
właściwość (cecha): wartość; /* komentarz */
}

Zwracaj uwagę na kolory poszczególnych elementów znaczników i selektorów. Jeśli popełnisz błąd, w większości przypadków jest to szybki sposób ustalania źródła błędów. W szczególności, jeśli błędnie wpiszesz nazwę atrybutu notatnik zasygnalizuje Ci to kolorem czerwonym.

<h1 clas="yellow">treść</h1>

W powyższym znaczniku błędnie wpisano słowo clas (powinno być class). Tak samo kolorem czerwonym oznaczane są błędne określenia atrybutów.

Aby wybrać styl Ruby blue (lub każdy inny) wybierz w menu
Ustawienia ➽ Konfigurator stylów i z dostępnych stylów w górnej części okna wybrać interesujący Cię styl.

Ustalenia

Będą nam także potrzebne materiały. Dlatego przed rozpoczęciem budowy ściągnij i rozpakuj plik BoNar.zip.

  • folder graf zawierający obrazki wykorzystywane do budowy strony,
  • plik mstrona.txt zawierający teksty wykorzystywane w budowie strony,
  • dwa pliki wigilijnewróżby.html (zawierający dane nadające się do budowania listy) i Uniaeu.doc (zawierający tradycje świąteczne w wybranych krajach Unii — materiał do tabelki).

Na potrzeby budowanej strony ustalamy iż grafika znajduje się w folderze graf, który jest podfolderem foldera, w którym będziesz zapisywał pliki html i plik styl.css.

Wszystkie nazwy – znaczników, selektorów, atrybutów, wartości atrybutów, plików ... – nie mogą zawierać polskich znaków oraz spacji. Zasada ta dotyczy każdego programowania (wyjątek dotyczy wybranych języków programowania – chociażby Logomocja).

Jeśli stronę zamierzamy umieścić na serwerze linuksowym, pamiętajmy o wielkości liter, bo może czekać nas przykra niespodzianka. Wielkość znaków na stronie i w nazwach musi być taka sama. Szczególnie ważne jest to, gdy np. wrzucamy zdjęcia z rozszerzeniem jpg, a aparat używa rozszerzeń JPG. Windows nie zwraca uwagi na wielkość liter, Linux tak.

Plik główny strony musi nazywać się index.html. Twoja strona znajduje się na dysku lokalnym, nazwy nie są istotne. Skutki niestosowania zasad nazewnictwa zauważysz po umieszczeniu witryny w Internecie.

Witryna nasza nie będzie działać prawidłowo pod starszymi przeglądarkami. W arkuszu stylów pomijane są właściwości z przedrostkami. Przykładowo ― gdybyś skopiował gradient ze strony colorzilla.com ― wyglądałby on mniej więcej tak:

selektor {
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}

Gdybyś planował umieścić stronę w Internecie i dotrzeć do odbiorców starszych wersji systemów operacyjnych (i tym samym przeglądarek - np. InternetExplorer w systemie Windows XP), to upraszczanie nie jest wskazane. Nasza witryna ma się prawidłowo wyświetlać w Operze w wersji od 12 wzwyż. Uproszczona wersja powyższego gradientu będzie wyglądać tak:

selektor {
background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%); /* W3C */
}

Fragment /* W3C */ oznacza komentarz (komentarzem jest tu W3C [wersja zalecana przez organizację, która zajmuje się ustanawianiem standardów pisania i przesyłu stron WWW], a komentarz umieszczamy w "nawiasach" /* i */). W plikach typu HTML do oznaczenia komentarza używamy oznakowania <!-- komentarz -->. Stosowanie komentarzy jest bardzo ważne, gdy wracamy do tworzonego kodu i próbujemy sobie przypomnieć "o co nam chodziło".