nagłówek treści - Kurs HTML i CSS
HTML5 / Nowe elementy HTML5...Sekcje Sekcje to odrębne tematycznie fragmenty treści na stronie. Można je porównać do rozdziałów w książce. Każda sekcja może mieć nagłówek (tytuł rozdziału) i stopkę (zawierającą informacje o autorze, prawach autorskich itp.). W ramach znaczników przydatnych przy wstawianiu sekcji, wyróżnić możemy elementy, które fizycznie te sekcje tworzą (ang. sectioning elements) - są to: ARTICLE, ASIDE, NAV, SECTION. Definiują one w dokumencie zakres dla stopek sekcji (element FOOTER)...
Szablon strony na DIV-ach / Płynny szablon...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ć wygodny, np. kiedy zawiera jakieś szerokie elementy, które mogą nie zmieścić się w ustalonej szerokości dla stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i...
- Tabele HTML / Komórki nagłówkowe tabeli <th>
...nie tylko w pierwszym. Dodatkowo w wierszu takim mogą się znajdować również inne zwykłe komórki <td>...</td>. Dzięki temu możemy stworzyć pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli. Chociaż identyczny efekt wizualny można uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (<td align="center"><b>...</b></td>), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe <th>...</th> oprócz efektu wizualnego niosą ze sobą ważne znaczenie semantyczne...
- Szablon strony na DIV-ach / Stały szablon
...użytkownicy 800x600 będą w stanie w miarę wygodnie przeglądać serwis. Nie można przecież jednocześnie korzystać z menu nawigacyjnego oraz czytać treści artykułu na stronie (chyba, że ktoś ma bardzo podzielną uwagę i dużego zeza rozbieżnego 😉). Zatem przy odpowiednio dobranej szerokości bloku treści, użytkownicy niższych rozdzielczości nie będą musieli używać poziomego paska przewijania podczas czytania artykułu, a jedynie w momencie przejścia do widoku menu nawigacyjnego i odwrotnie...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...2, Nagłówek 3 Treść kolejnych nagłówków menu (element <dt>...</dt>). Można tutaj wstawić zwykły tekst, jak również inne elementy - np. obrazek. Aby nagłówek wyglądał jak odsyłacz, można się posłużyć kodem: <a href="javascript:void(0)">Treść nagłówka</a>. Można też wstawić normalny odsyłacz, prowadzący do wybranego dokumentu, jednak wtedy w docelowym dokumencie należy zadbać o wstawienie takiego samego układu menu, ponieważ inaczej nigdy nie będzie dostępu do linków znajdujących się w tej...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...Zwykle daje się łatwo rozpoznać, czy w określonym przypadku powinno się użyć tabeli: W prezentowanych danych można wyróżnić poziomy lub/i pionowy nagłówek - może go nawet nie być, ważne żeby dało się go logicznie wyznaczyć choćby wirtualnie. Prezentujemy przynajmniej dwa egzemplarze krótkich danych o podobnym charakterze - będą to odpowiedniki kolejnych wierszy tabeli. Taka tabela może mieć nawet tylko jedną kolumnę danych (w takim przypadku zwykle mamy do czynienia z pionowym nagłówkiem...
- Tabele HTML / Łączenie wierszy tabeli w grupy <thead, tbody, tfoot>
...komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 Nagłówek i stopka <thead, tfoot> Dla tabel często również podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka - na dole. Nagłówek tworzymy, przy użyciu: <thead>...</thead>, natomiast stopkę: <tfoot>...</tfoot>: W tebeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast można tam umieścić dowolną ilość znaczników <tbody>...</tbody>. Znacznik TFOOT musi się znajdować w...
- Widżety HTML / Szablon strony bez ramek
...Załóżmy, że Twój serwis składa 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ć...
- HTML5 / Nagłówek <header>
<header>...</header> Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6 albo HGROUP), ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo. Sam element HEADER nie stanowi nagłówka sekcji. Może to być nieco mylące, ponieważ z kolei element FOOTER stanowi stopkę sekcji. Elementami definiującymi nagłówek sekcji są: H1, H2, H3, H4, H5, H6. W szczególności znacznik HEADER nie tworzy...
- HTML5 / Otwierany panel <details, summary>
(interpretuje: Firefox 49, Opera 15, Chrome 12) Panel domyślnie zamknięty: <details> <summary>nagłówek</summary> ... </details> Panel domyślnie otwarty: <details open> <summary>nagłówek</summary> ... </details> Na stronach internetowych bardzo często spotykamy interaktywne elementy w postaci paneli, które otwierają się po kliknięciu w ich nagłówek myszką. Tego typu rozwiązanie jest szczególnie przydatne na stronach, zawierających dużo informacji. Aby nie przytłoczyć użytkownika...