I TY ZOSTAŃ WEBMASTEREM! CZĘŚĆ 2 – „STRUKTURA STRONY” STWORZYŁ GABRIEL ŚLAWSKI
1. PRZYPOMNIENIE STRUKTURY PLIKÓW Plik: index.php Plik: style.css Katalog: ustawienia Katalog: funkcje Katalog: grafika
2. PODSTAWY I PODZIAŁ DOKUMENTU HTML5 HTML (ang. Hyper text markup language) – język znaczników hipertekstu. Dzięki niemu definiujemy strukturę naszej strony, określamy jej złożoność, do której możemy się odwoływać (wykorzystując np. CSS). Podstawowe elementy: -dokument ( ) -głowa ( ) -ciało ( ) -znaczniki (np. )
3. PROJEKTOWANIE SZKIELETU Przechodzimy do Brackets i otwieramy plik naszej strony głównej index.php
3. PROJEKTOWANIE SZKIELETU Tworzymy podstawowy szkielet naszej strony
3. PROJEKTOWANIE SZKIELETU Sygnalizacja języka który chcemy używać, poprzez użycie atrybutu lang, oraz określenie jego wartości, jako pl
3. PROJEKTOWANIE SZKIELETU Określenie kodowania znaków (interesuje nas obsługa polskich znaków diakrytycznych „ą, ę, ń” itp. Używamy znacznika meta. Znaczniki meta to zbiór znaczników w sekcji nagłówkowej dokumentu używany do opisu jego zawartości. Atrybut charset uzupełniamy o wartość utf-8.
3. PROJEKTOWANIE SZKIELETU Określmy tytuł naszej strony. Ponownie działać będziemy w nagłówku. Aby określić tytuł naszej strony musimy zawrzeć go w znacznikach.
3. PROJEKTOWANIE SZKIELETU Podłączenie pliku kaskadowych arkuszy stylów. Nadal działamy w nagłówku strony. Posłużymy się znacznikiem link. Znacznik ten pozwala nam pobrać konkretną zawartość (w tym przypadku właściwości CSS do naszego pliku). Atrybut rel - zawartość Stylesheet, atrybut type – zawartość text/css, atrybut href – zawartość style.css.
4. GOSPODAROWANIE STRUKTURY Znaczniki i są używane do grupowania i strukturyzowania dokumentu. Używane w połączeniu z atrybutami class i id, które określają nazwy struktur dokumentu, po których możemy odwoływać się w css.
4. GOSPODAROWANIE STRUKTURY
Główne zasady nazewnictwa struktur: -bez polskich znaków diakrytycznych; -nazwa nie może zaczynać się od liczby; -bez znaków specjalnych oraz spacji; -duże i małe litery mają znaczenie (id=„ski” oraz id=„SKI” to dwie różne struktury).
5. PROJEKTOWANIE STRUKTURY Koncepcja strony:
5. PROJEKTOWANIE STRUKTURY Pracujemy w sekcji. Spróbujmy odwzorować wizualizację struktury strony. Dodatkowo dodajmy nadrzędny div, który będzie swoistego rodzaju rodzicem kolejnych (tworzymy stronę przyjazną dla każdej rozdzielczości). Wszystkie ukazane wcześniej elementy nigdy więcej się nie powtórzą, dlatego używać będziemy atrybutu id. Pamiętamy o zasadach nazewnictwa.
5. PROJEKTOWANIE STRUKTURY
6. PROJEKTOWANIE STRUKTURY Komentarz to fragment kodu źródłowego, którego jedynym celem istnienia jest informowanie o czymś osoby czytającej źródła, a który nie ma żadnego wpływu na postać wynikową.
6. PROJEKTOWANIE STRUKTURY Deklaracja komentarzy w HTML’U: Wszystko co znajdzie się pomiędzy będzie komentarzem.