Projektowanie stron WWW W5 OdnośNIKI PSEUDOKLASY HTML 5 - WPROWADZENIE

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2014, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak Projektowanie stron WWW W5OdnośNIKIPSEUDOKLASYHTML 5 - WPROWADZENIE

Odnośniki • Tandem HTML-CSS pozwala definiować właściwości zależne od stanu odnośnika, czyli tego czy odnośnik jest aktywny, odwiedzony, nie odwiedzony lub kursor jest nad odnośnikiem. To daje możliwość dodania użytecznych efektów w serwisie WWW. • Aby kontrolować te efekty wykorzystuje się tak zwane pseudo-klasy. (klasy dziedziczone). • Pseudo-klasa pozwala zaingerować w sprawę warunków lub zdarzeń gdy definiujemy właściwości CSS dla znaczników HTML.

Odnośniki Przykład: Odnośniki określamy znacznikiem <a>. Możemy więc użyć a jako selektor w CSS: a { color: blue; }

Odnośniki - stany Odnośnik może mieć różne stany. Na przykład, może być odwiedzony lub nie odwiedzony. Możemy użyć pseudo-klas do skojarzenia różnych stylów zależnie od stanów: a:link { color: blue; } a:visited { color: red; }

Odnośniki - stany Odnośniki aktywne mają pseudo-klasę a:active oraz a:hover jeżeli kursor jest nad odnośnikiem. • a:hover { • color: red; • } a:active { color: blue; } LVHA

Odnośniki - stany Pseudo-klasa: link Pseudo-klasa :linkjest używana dla odnośników prowadzących do stron nie odwiedzonych przez użytkownika (czyli standardowo ) W przykładzie poniżej, nie odwiedzony odnośnik będzie jasno niebieski. a:link { color: #6699CC; }

Odnośniki Pseudo-klasa: visited Pseudo-klasa :visited jest używana dla odnośników prowadzących do stron odwiedzonych już przez użytkownika. Na przykład, kod poniżej uczyni wszystkie odwiedzone odnośniki ciemno purpurowe: a:visited { color: #660099; }

Odnośniki Pseudo-klasa: hover Pseudo-klasa :hoverjest używana kiedy kursor myszy najedzie na odnośnik. Można to wykorzystać do tworzenia interesujących efektów. Na przykład, jeżeli chcemy aby nasze odnośniki były pomarańczowe i pochylone kiedy kursor najedzie na odnośnik, kod CSS powinien wyglądać następująco: a:hover { color: orange; font-style: italic; }

Odnośniki Pseudo-klasa: active Pseudo-klasa :active jest używana dla odnośników aktywnych. Przykład zamieni kolor tła aktywnych odnośników na żółty (po kliknięciu i przytrzymaniu przycisku myszy): a:active { background-color: #FFFF00; }

Połączenie pseudoklas oraz znaczników języka HTML <ul> <li><a href="odnosnik1.html">Menu1</a></li> <li><a href="odnosnik2.html">Menu2</a></li> <li><a href="odnosnik3.html">Menu3</a></li> <li><a href="odnosnik4.html">Menu4</a></li> <li><a href="odnosnik5.html">Menu5</a></li> </ul>

Połączenie pseudoklas oraz znaczników języka HTML ul, ul li { display: block; list-style: none; margin: 0; padding: 0; }

Połączenie pseudoklas oraz znaczników języka HTML • ul, ul li { • display: block; • list-style: none; • margin: 0; • padding: 0; • } • ul { • width: 200px; • } • ul a:link, ul a:visited { • display: block; • width: 186px; • text-decoration: none; • background-color: #ccc; • color: #000; • padding: 5px; • border: 2px outset #ccc; • } • ul a:hover { • border-style: inset; • padding: 7px 3px 3px 7px; • } Menu1 Menu2 Menu3 Menu4 Menu5

Połączenie pseudoklas oraz znaczników języka HTML • (1) ul, ul li { • display: block; • list-style: none; • margin: 0; • padding: 0; • } • (2) ul { • width: 200px; • } • (3)(4) ul a:link, ul a:visited { • display: block; • width: 186px; • text-decoration: none; • background-color: #ccc; • color: #000; • padding: 5px; • border: 2px outset #ccc; • } • (5) ul a:hover { • border-style: inset; • padding: 7px 3px 3px 7px; • } • Na początku wstawiamy znaną już regułę, która usuwa domyślne formatowanie listy.

Połączenie pseudoklas oraz znaczników języka HTML • (1) ul, ul li { • display: block; • list-style: none; • margin: 0; • padding: 0; • } • (2) ul { • width: 200px; • } • (3)(4) ul a:link, ul a:visited { • display: block; • width: 186px; • text-decoration: none; • background-color: #ccc; • color: #000; • padding: 5px; • border: 2px outset #ccc; • } • (5) ul a:hover { • border-style: inset; • padding: 7px 3px 3px 7px; • } • Ustalamy szerokość menu, aby nie zajmowało całego ekranu

Połączenie pseudoklas oraz znaczników języka HTML • Stylizujemy odnośniki listy tak, aby wyświetlały się w bloku (display: block). Dzięki temu nie trzeba dokładnie wskazywać tekstu, aby link zmienił wygląd • Konieczne jest również dodatkowo określenie szerokości (width) bloku odnośnika. Zgodnie z tzw. modelem pudełkowym szerokość ta jest równa szerokości bloku rodzica, pomniejszonej o sumę grubości obramowania (border) i szerokości marginesu wewnętrznego; • Ustalamy kolor, tło, margines wewnętrzny (padding) i obramowanie odnośników, tak aby wyglądały jak przyciski. • Dodatkowo usuwamy domyślne podkreślenie linków (text-decoration: none), które w tym przypadku jest niepożądane; • (1) ul, ul li { • display: block; • list-style: none; • margin: 0; • padding: 0; • } • (2) ul { • width: 200px; • } • (3)(4) ul a:link, ul a:visited { • display: block; • width: 186px; • text-decoration: none; • background-color: #ccc; • color: #000; • padding: 5px; • border: 2px outset #ccc; • } • (5) ul a:hover { • border-style: inset; • padding: 7px 3px 3px 7px; • }

Połączenie pseudoklas oraz znaczników języka HTML • (1) ul, ul li { • display: block; • list-style: none; • margin: 0; • padding: 0; • } • (2) ul { • width: 200px; • } • (3)(4) ul a:link, ul a:visited { • display: block; • width: 186px; • text-decoration: none; • background-color: #ccc; • color: #000; • padding: 5px; • border: 2px outset #ccc; • } • (5) ul a:hover { • border-style: inset; • padding: 7px 3px 3px 7px; • } • Zmieniamy styl obramowania, które zostanie wyświetlone po wskazaniu tekstu myszką • Tworzymy niesymetryczny margines wewnętrzny (padding), przesuwając tekst odnośników nieco w prawo i w dół, dzięki czemu uzyskujemy efekt wciśniętego przycisku.

Wprowadzenie do języka HTML5 Wprowadzenie do HTML5, Bruce Lawson, Remy Sharp wyd. Autorytety Informatyki, 2011

Połączenie pseudoklas oraz znaczników języka HTML • HTML5 jest bezpośrednim rozwinięciem XHTML4.01. • Wprowadza między innymi nowe znaczniki, nowe typy oraz nowe atrybuty pól formularzy. • HTML5 posiada wiele nowych ciekawych API javascript: • Canvas Context 2d, • GeolocationAPI, • Web Workers, • Localstorage, • Websockets

Szkielet dokumentu HTML5 Pierwszym wspólnym i obowiązkowym elementem strony jest deklaracja typu dokumentu. W przypadku HTML5 wpis ten jest bardzo prosty (w porównaniu do deklaracji HTML4): <!DOCTYPE html> Kolejne elementy, które muszą się znaleźć w dokumencie to oczywiście html, headi body. <html> <head> </head> <body> </body> </html>

Prosty dokument HTML5 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Tytułstrony</title> <meta name="description" content="opisstrony"> <meta name="keywords" content="slowa kluczowe"> </head> <body> </body> </html>

Nowe znaczniki w HTML5 Nowe znaczniki nie wpływają bezpośrednio na wygląd zawartych w nich danych, ale pozwalają zgrupować szereg innych elementów i łatwiej nimi zarządzać. header— pomiędzy znacznikami powinna być część strony, która ma charakter nagłówka, nav— pomiędzy znacznikami powinny być zamieszczone elementy odpowiedzialne za główne menu nawigacyjne witryny, article— pomiędzy znacznikami zamieszczamy zestaw elementów tworzących spójny artykuł, section— pomiędzy znacznikami zamieszczamy wybraną zawartość części witryny tworzącą spójną sekcję, aside— pomiędzy znacznikami powinna być zamieszczona ta część strony, która jest elementem uzupełniającym głównej struktury, footer— pomiędzy znacznikami powinna być zamieszczona stopka strony, canvas— pomiędzy znacznikami jest płótno po którym możemy rysować za pomocą javascript, audio i video — dają możliwość odtwarzania na stronie dźwięku oraz klipu video bez użycia dodatkowych wtyczek.

Nowe znaczniki w HTML5 – przykładowy dokument • <!DOCTYPE html> • <html> • <head> • <meta charset="UTF-8" /> • <title>Tytuł strony</title> • <meta name="description" content="opis strony"> • <meta name="keywords" content="slowa kluczowe"> • </head> • <body> • <header> • <nav></nav> • </header> • <article><hgroup><h3></h3><h4></h4></hgroup> • </article> • <aside></aside> • <footer></footer> • </body> • </html>

Nowe znaczniki w HTML5 - header Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6 lub HGROUP) ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo. <header> <p>Witam na stronie...</p> <h1>Przedmiotu: Projektowanie stron WWW</h1> </header> <header> <h1>Sekcja 1</h1> <p>Akapit sekcji 1</p> <h2>Podsekcja 1.1</h2> </header> <p>Akapit podsekcji 1.1</p> <h2>Podsekcja 1.2</h2> <p>Akapit podsekcji 1.2</p> • Sekcja 1(zawiera akapit "Akapit sekcji 1") • Podsekcja 1.1(zawiera akapit: "Akapit podsekcji 1.1") • Podsekcja 1.2(zawiera akapit: "Akapit podsekcji 1.2")

Nowe znaczniki w HTML5 - nav Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. <nav> <ul> <li><a href="index.html">Strona glowna</a></li> <li><a href="contents.html">Spis tresci</a></li> </ul> </nav> <article> <h1>Moj artykul</h1> <nav> <ul> <li><a href="#sec1">Rozdzial1</a></li> <li><a href="#sec2">Rozdzial2</a></li> </ul> </nav> <h2 id="sec1">Rozdzial1</h2> <p>Treść rozdział 1...</p> <h2 id="sec2">Rozdzial2</h2> <p>Treść rozdział 2...</p> </article>

Nowe znaczniki w HTML5 - article • Artykuł reprezentuje samodzielną część dokumentu lub aplikacji, która potencjalnie mogłaby być opublikowana niezależnie od pozostałej treści na stronie (np. w kanale RSS). • Może to być np.: wiadomość wysłana na forum dyskusyjnym, wpis na blogu, komentarz użytkownika pod artykułem, interaktywny widget. • W pojedynczym dokumencie może być więcej niż jeden element ARTICLE. • Znaczniki te można również zagnieżdżać (umieszczać jeden w drugim) - w takim przypadku oznacza to, że tematyka treści elementów podrzędnych (wewnętrznych) jest w istotny sposób powiązana z treścią, którą obejmuje znacznik nadrzędny (zewnętrzny). • Na przykład: Nadrzędnym artykułem może być wpis na blogu, a podrzędnymi - komentarze użytkowników.

Nowe znaczniki w HTML5 - article <article> <h1>Mój pierwszy wpis na blogu</h1> <p>Stało się. Postanowiłem założyć własnego bloga. Nie wiem, czy będę miał czas, aby regularnie go aktualizować, ale zrobię co w mojej mocy.</p> <section> <h2>Komentarze</h2> <article> <p>Życzę powodzenia.</p> </article> <article> <p>Nareszcie. Bardzo się cieszę.</p> </article> </section> </article>

Nowe znaczniki w HTML5 - hgroup • Służy do definiowania nagłówków dla sekcji (ARTICLE, ASIDE NAV, SECTION), poprzez grupowanie tytułów nagłówkowych. <hgroup> <hm>...</hm> <hn>...</hn> </hgroup (m = 1...5, n = m + 1)

Nowe znaczniki w HTML5 - hgroup • HTML 4.01 tak naprawdę nie dawał możliwości definiowania podtytułów. Twórcy stron musieli sobie z tym jakoś radzić, np. wstawiając zamiast tego znacznik standardowego akapitu i stylizując go odpowiednio za pomocą CSS. Taka konstrukcja jednak nie niosła ze sobą żadnego semantycznego znaczenia. Umieszczenie znacznika np. H2 zaraz po H1 sprawiało, że cała dalsza treść tak naprawdę zawierała się w podsekcji, a nie w sekcji głównej. • HTML5 uzupełnia ten brak. Jako nagłówek sekcji możemy wstawić element HGROUP, który zawiera znaczniki H1 i H2. Tytułem sekcji będzie znacznik o najważniejszym poziomie (tutaj H1), a pozostałe zostaną oznaczone jako podtytuły i nie utworzą nowej podsekcji w dokumencie. Ma to niebagatelne znaczenie przy automatycznym tworzeniu spisu treści. <article> <hgroup> <h1>Hobbit</h1> <h2>czyli tam i z powrotem</h2> </hgroup> ... </article>

Nowe znaczniki w HTML5 - aside Wstawka reprezentuje sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z treścią elementu, w którym się znajduje. Jednocześnie gdybyśmy usunęli taką sekcję z dokumentu, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych. <article> <h1>Komputery</h1> <p>W dzisiejszych czasach komputery towarzyszą człowiekowi na każdym kroku. Używamy ich w codziennej pracy, jak również szukając odprężenia po trudnym dniu. Sterują zarówno naszymi samochodami, jak i statkami kosmicznymi.</p> <aside> <h1>Laptop</h1> <p>Ten przenośny rodzaj komputera, ze względu na liczne zalety, szybko przyjął się wśród użytkowników.</p> </aside> <article>

Nowe znaczniki w HTML5 - 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. <article> <h1>Mój artykuł</h1> <p>To jest mój artykuł...</p> <footer> Autor: <address>Jan Kowalski (jan.kowalski@example.com)</address> <p>wszelkie prawa zastrzeżone</p> </footer> </article>

Koniec 

Projektowanie stron WWW W5 OdnośNIKI PSEUDOKLASY HTML 5 - WPROWADZENIE