html 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...Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie...
- Szablon strony na DIV-ach / Stały szablon
...przykłady w skali 1:2, czyli dwukrotnie pomniejszone): Dwie kolumny: Nagłówek szablonu Menu nawigacyjne Treść strony Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; text-align: center; } #top { width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; background-color: #ccc; } #TRESC { width: 630px; float: left...
- 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 / 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...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj) { if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25; if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25; if...
- Widżety HTML / Szablon strony bez ramek
...Rozwiązaniem tego problemu mogłyby być ramki lokalne (<iframe>...</iframe>). W takim przypadku teoretycznie można stworzyć jedną stronę index.html, na której umieszcza się menu i inne stałe elementy, a w miejsce właściwej treści strony wstawia się ramkę lokalną, gdzie wczytuje się zawartość poszczególnych podstron. Taki sposób niestety posiada poważną wadę: na pasku adresu przeglądarki wyświetla się cały czas taki sam adres. Powoduje to problemy z dodaniem wybranej podstrony do...
- Dobre praktyki / Przykazania webmastera
...przeglądarki. Jeśli dodatkowo zmiany dotyczyły również kodu HTML, mamy gotowy przepis na zupełne rozsypanie się wyglądu strony. Ponieważ pliki *.html zwykle cache'ują się słabiej (na krótszy czas), może dojść do sytuacji, kiedy użytkownicy dostaną już nową wersję kodu źródłowego HTML, która wymaga jednak zmienionego właśnie arkusza CSS, ale sam arkusz zaczyta się stary - z pamięci podręcznej przeglądarki. Aby do tego nie dopuścić, zawsze można wprowadzić na serwer po prostu nowy plik...
- 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 / Sekcja <section>
<section>...</section> Sekcja dokumentu lub aplikacji to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do...