dr in robert banasiak n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Projektowanie stron WWW W5 OdnośNIKI PSEUDOKLASY HTML 5 - WPROWADZENIE PowerPoint Presentation
Download Presentation
Projektowanie stron WWW W5 OdnośNIKI PSEUDOKLASY HTML 5 - WPROWADZENIE

Loading in 2 Seconds...

play fullscreen
1 / 32

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


  • 132 Views
  • Uploaded on

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne , 2014, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW. dr inż. Robert Banasiak. Projektowanie stron WWW W5 OdnośNIKI PSEUDOKLASY HTML 5 - WPROWADZENIE. Odnośniki.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Projektowanie stron WWW W5 OdnośNIKI PSEUDOKLASY HTML 5 - WPROWADZENIE' - tana-guerra


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
dr in robert banasiak

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

slide2

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.
slide3

Odnośniki

Przykład:

Odnośniki określamy znacznikiem <a>. Możemy więc użyć a jako selektor w CSS:

a {

color: blue;

}

slide4

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;

}

slide5

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

slide6

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;

}

slide7

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;

}

slide8

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;

}

slide9

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;

}

slide10

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>

slide11

Połączenie pseudoklas oraz znaczników języka HTML

ul, ul li {

display: block;

list-style: none;

margin: 0;

padding: 0;

}

slide12

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

slide13

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.
slide14

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
slide15

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;
  • }
slide16

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.
slide17

Wprowadzenie do języka HTML5

Wprowadzenie do HTML5, Bruce Lawson, Remy Sharp

wyd. Autorytety Informatyki, 2011

slide18

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
slide19

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>

slide20

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>

slide21

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>

slide22

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.

slide23

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>
slide24

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")
slide25

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>

slide26

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.
slide27

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>

slide28

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)

slide29

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>

slide30

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>

slide31

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>