stopka - Kurs HTML i CSS
HTML5 / Stopka <footer><footer>...</footer> Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp. Mimo z pozoru analogicznej...
Szablon strony na DIV-ach / Płynny szablonPłynny szablon (ang. liquid layout) charakteryzuje się zmianą swoich poziomych proporcji przy zmianie rozmiaru okna przeglądarki lub rozdzielczości ekranu. Najczęściej w każdych warunkach zajmuje on całą dostępną szerokość w oknie. Jest on raczej rzadziej stosowany, ze względu na niemożliwe do przewidzenia ułożenie elementów treści. Poza tym tekst w zbyt długich linijkach zwykle gorzej się czyta, ponieważ trudniej przenieść wzrok z końca wiersza na początek następnego. Czasami jednak może być...
- Szablon strony na DIV-ach / Stały szablon
Stały szablon (ang. fixed layout) charakteryzuje się odgórnie ustaloną szerokością w pikselach. Jeśli użytkownik zmieni rozdzielczość ekranu lub rozmiar okna przeglądarki, taki szablon będzie zajmował inną powierzchnię szerokości ekranu. Aby zapewnić komfortowe przeglądanie strony, szerokość szablonu nie powinna być szersza od najmniejszej przewidzianej rozdzielczości ekranu, z której mają korzystać czytelnicy serwisu - w przeciwnym razie w oknie przeglądarki pojawi się poziomy suwak i...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...tym celu użyliśmy identyfikatorów (atrybuty id="..."), ponieważ wiemy, że w jednym pliku na pewno nie pojawią się np. dwa bloki treści ani podwójna stopka. Jeśli będziemy chcieć wstawić w dokumencie blok, który może się powtórzyć w obrębie tego samego pliku, zamiast identyfikatorów należy użyć klasy (atrybut class="..."). Wielkie litery w identyfikatorach poszczególnych bloków zapobiegną ewentualnym kolizjom nazw elementów występujących w treści (nie dotyczy trybu Quirks). Dlaczego nie...
- Szablon strony na DIV-ach / Responsywny szablon
...urządzeń mobilnych. Takie podejście nosi nazwę najpierw urządzenia mobilne (ang. mobile first). Wszystkie bloki na stronie - nagłówek, menu, treść i stopka - znajdują się w jednej kolumnie, której szerokość dynamicznie dopasowuje się do całej dostępnej poziomej przestrzeni okna przeglądarki. Dzięki temu strona powinna być czytelna nawet na najmniejszych ekranach. Pierwszy punkt przeskoku zdefiniowaliśmy na wartości 800px. Jeśli użytkownik dysponuje urządzeniem z przynajmniej tak dużym...
- Tabele HTML / Łączenie wierszy tabeli w grupy <thead, tbody, tfoot>
Spis treści <thead, tbody, tfoot> Łączenie wierszy tabeli w grupy <tbody> Nagłówek i stopka <thead, tfoot> Łączenie wierszy tabeli w grupy <tbody> <table> <tbody> <tr>...</tr> </tbody> </table> Łączenie wierszy w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie np. określone formatowanie za pomocą CSS. W grupę można połączyć dowolną liczbę wierszy. W jednej tabeli może istnieć kilka grup. Jeżeli umieścimy w...
- Dobre praktyki / Przykazania webmastera
...powtórzona nawigacja pojawia się w stopce serwisu, ale w odróżnieniu od linków nagłówkowych, może zawierać znacznie więcej odnośników. Oprócz tego stopka jest dobrym miejscem na zaznaczenie praw autorskich i podanie odnośnika do kontaktu. Zapomnij o wstawieniu nawigacji tylko na stronie głównej, a na podstronach samego linku "Powrót do strony głównej". To tylko niepotrzebny klik, a przy tym zmiana układu strony, co może zdezorientować użytkownika. Natomiast dobrym zwyczajem jest...
- HTML5 / Szablon strony w HTML5
Bardzo dawno temu, gdy nie było innej możliwości, do tworzenia szkieletu strony powszechnie używano tabel. Ale po wprowadzeniu języka CSS, takie podejście zaczęto uznawać za bardzo poważny błąd semantyczny. Mając do dyspozycji CSS i HTML 4.01, jedyną możliwością zbudowania prawidłowego szablonu strony było wykorzystanie bloków DIV. Sekcje szkieletu zwykle były potem formatowane przy pomocy CSS, a więc takie użycie znaczników było poprawne. W języku HTML5 zostały jednak wprowadzone zupełnie nowe...
- Tekst HTML / Tytuł nagłówka <h1, h2, h3, h4, h5, h6>
Spis treści <h1, h2, h3, h4, h5, h6> Tytuł nagłówka <h1, h2, h3, h4, h5, h6> Prawidłowa kolejność tytułów Dymek narzędziowy <h1 title, h2 title, h3 title, h4 title, h5 title, h6 title> Tytuł nagłówka <h1, h2, h3, h4, h5, h6> Tytuł pierwszego poziomu (główny) <h1>...</h1> Tytuł drugiego poziomu (sekcji) <h2>...</h2> Tytuł trzeciego poziomu (podsekcji) <h3>...</h3> Tytuł czwartego poziomu <h4>...</h4> Tytuł piątego poziomu <h5>...</h5> Tytuł szóstego poziomu (najniższej podsekcji)...
- Widżety HTML / Szablon strony bez ramek
...się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego stopnia, że po jakimś czasie można się wręcz zniechęcić do robienia jakichkolwiek...