HTML5 - Ciąg dalszy - Komunikacja człowiek-komputer

HTML5 - Ciąg dalszy

Tworzenie odnośników (linków) i systemu nawigacyjnego stron

W trakcie konstruowania własnej strony HTML5 bardzo ważnym zagadnieniem jest umożliwienie "komunikacji" naszej strony z innymi witrynami lub stworzenie sieci odniesień między podstronami (np. w postaci menu). W tym celu należy przede wszystkim posłużyć się znacznikiem <a>:

 <a href="http://www.psychologia.amu.edu.pl"> To jest strona psychologii </a>

Da to następujący efekt:

To jest strona psychologii

Przy okazji omawiania znacznika <a> zwróćmy uwagę na pewne fakty:

Znacznik ten ma podany atrybut href, który definiuje adres podlinkowanej strony (w tym wypadku jest to adres URL)
Jeszcze nieraz będziemy podawać atrybuty znaczników (często nawet więcej niż jeden na znacznik). Dokładna wartość atrybutu pojawiająca się po znaku równości musi być podana między dwoma cudzysłowami. Na zeszłych zajęciach użyliśmy znacznika meta, dotyczącego kodowania, który miał dwa atrybuty.
Przy okazji: umieszczając znacznik <a>, oprócz niezbędnego atrybutu href zalecane jest dodanie atrybutu title. Wartość tego parametru (czyli określona treść) będzie pojawiała się po najechaniu myszką na link. Ma to swoje zastosowania.

 <a href="http://www.psychologia.amu.edu.pl" title="strona ip" > To jest strona psychologii </a>

Atrybut target definiuje gdzie ma otworzyć się strona z linku: gdy wartość tego atrybutu ustawimy na przykład na _blank (jak w przykładzie poniżej), strona otworzy się w nowej karcie. Podając wartość atrybutu jako _parent lub w ogóle nie ustawiając atrybutu target (domyślnie) strona otworzy się w tej samej karcie, co strona z linkiem.

 <a href="http://www.psychologia.amu.edu.pl" title="strona ip" target="_blank" > To jest strona psychologii </a>

Jeśli naprawdę nie chcemy pozostawić użytkownikowi decyzji o tym, gdzie otworzyć stronę, możemy zdefiniować tryb jej otwierania w pliku CSS lub używając JavaScript (wszystko na dalszych zajęciach). W samym dokumencie HTML możemy np. zastosować atrybut onclick:

 <a href="http://www.psychologia.amu.edu.pl" title="strona ip" onclick="window.open(this.href,'_blank');return false;" > To jest strona psychologii </a>

Powyższy przykłady pokazują jak stworzyć link do zewnętrznej strony (i przy okazji nie pozwolić użytkownikowi wyłączyć naszej).

Znacznik <a> wykorzystuje się jeszcze w innym celu. Można mianowicie utworzyć referencje do stron znajdujących się w katalogu (lub podkatalogach) z naszą stroną:

Plik podstrony znajduje się w katalogu z naszą stroną:

 <a href="oczymś.html" title="informacje o czymś" > Informacje o tym </a>

Plik podstrony znajduje się w jakimś podkatalogu (trzeba podać ścieżkę):

 <a href="nazwa_podkatalogu/oczymś.html" title="informacje o czymś" > Informacje o tym </a>

Ma to szczególny sens wtedy, gdy treść jaką chcemy zamieścić w internecie dzielimy tematycznie i zależy nam na tym, aby różne wątki znajdowały się na różnych stronach tej samej witryny. Możemy się w tym momencie postarać, aby dostęp do nich był jednakowy z każdej podstrony tworząc menu (można to zrobić tworząc listę z linkami do naszych podstron).

Znacznik <a> przydaje się również wtedy, gdy zależy nam, aby osoba przeglądająca naszą stronę mogła szybko przenieść do jakiejś treści znajdujących się na tej samej stronie lub do określonego fragmentu innej strony.
W tym celu:

musimy nadać etykietę odpowiedniemu fragmentowi (np. nagłówkowi) strony przy pomocy atrybutu id:

 <h1 id="tu powinni zajrzeć"> Wiem coś o życiu </h1>

musimy utworzyć odniesienie w miejscu, z którego chcemy "przejść" do etykiety:

na tej samej stronie:

 <a href="#tu powinni zajrzeć" title="tu zaciekawiam"> tutaj więcej informacji </a>

na innej stronie:

 <a href="strona.html#tu powinni zajrzeć" title="tu zaciekawiam"> tutaj więcej informacji </a>

Ponadto, używając znacznika <a> możemy utworzyć punkt kontaktowy:

 <a href="mailto:adres_mailal@przykład.com"> Porozmawiajmy (wyślij maila) </a>

odnośnik MUSI być w otoczeniu akapitu, listy, nagłówka itp, nie może być pozostawiony "luzem" (Tak samo obrazek!!)

dobrze:
Cos tam <a href="http://www.wp.pl">odnośnik</a>
Cos innego
(tak samo z obrazkami <img…. />)

wszystkie wartości atrybutów muszą być w cudzysłowach, także liczbowe

dobrze:
<img src="obrazek.png" alt="obrazek" height="200" />

Nowe ważne elementy strony

Na poprzednich zajęciach poznawaliśmy znaczniki przydatne w trakcie edycji treści strony. W tym miejscu będziemy proces ten kontynuować.

Tworzenie list

Może się zdarzyć, że zależeć nam będzie, aby szczególnie wyróżnić jakąś treść na naszej stronie lub dokonać wyliczenia jakichś elementów. W takim przypadku przydadzą nam się znaczniki umożliwiające stworzenie różnego rodzaju list. Innym, szczególnym zastosowaniem list jest stworzenie przy ich pomocy menu.

Listy uporządkowane

Listy uporządkowane umożliwiają podanie elementów w ustalonej kolejności:

<h3> Co zrobić by być szczęśliwym: </h3>
    <ol>
       <li> Wstać </li>
       <li> Dobrze się ubrać </li>
    </ol>

Powyższy zapis da następujący efekt:

Co zrobić by być szczęśliwym:

Wstać

Dobrze się ubrać

Zwróćmy uwagę na wykorzystane znaczniki:

<ol> </ol> (ang. ordered list) - znacznik mówiący, że w jego zasięgu będzie tworzona lista uporządkowana
<li> </li> (ang. list item) - ten znacznik służy do podania elementów listy

w liście nie wolno nic pisać w tym miejscu, gdzie jest napisane nic_nie_pisac
<ul>nic_nie_pisac
<li>punkt1</li>
<li>punkt2</li>
</ul>

Listy nieuporządkowane

Bywa, że chcemy po prostu wymienić jakieś elementy i nie zależy nam na podaniu ich w ustalonej kolejności:

<h3> Kto jest moim kolegą: </h3>
    <ul>
       <li> Michał </li>
       <li> Kostek </li>
    </ul>

Wykorzystane znaczniki:

<ul> </ul> (ang. unordered list) - znacznik mówiący, że w jego zasięgu będzie tworzona lista nieuporządkowana
<li> </li> (ang. list item) - j.w.

Listy definicji

Jest też możliwe, że będziemy chcieli zdefiniować jakiś termin podając jego znaczenie/znaczenia:

    <dl>
       <dt> Definiendum </dt>
         <dd> 1. Definiens </dd>
         <dd> 2. Definiens </dd>
    </dl>

Wykorzystane znaczniki:

<dl> </dl> (ang. definition list) - znacznik mówiący, że w jego zasięgu będzie tworzona lista definicji
<dt> </dt> (ang. definition term) - treścią tego znacznika jest wyrażenie definiowane
<dd> </dd> (ang. definition description) - treścią jest wyrażenie informujące o znaczeniu wyrażenia definiowanego

Jest dość oczywiste, że w obrębie jedno znacznika <dl> możemy umieścić kilka znaczników <dt>.

Zagnieżdżanie list

Nie powinno nas dziwić w świetle tego, co już wiemy o HTML'u, że możliwe jest łączenie różnego rodzaju list:

<ol>
    <li>element</li>
    <li>element: będę coś wymieniał:
        <ul>
            <li>treść</li>
            <li>treść</li>
        </ul>
    </li>
    <li>treść: podam czegoś definicję
        <dl>
            <dt>coś</dt>
              <dd>według mnie może znaczyć to i to</dd>
              <dd>to też może znaczyć coś innego</dd>
        </dl>
    </li>    
</ol>

listy muszą być poza akapitami
Akapit jakis
<ul>
<li>bebe</li>
<li>baba</li>
</ul>

Wstawianie plików graficznych

Składnia HTML'a daje nam możliwość zamieszczania na stronie obrazków i zdjęć. Należy jednak pamiętać, że nie ma powodu zamieszczania obrazków tylko po to, żeby ładnie wyglądały. Powinny one pełnić jakąś funkcję. Jeżeli zależy nam na wzbogaceniu graficznym naszej strony powinniśmy skorzystać z arkuszy stylów CSS (będziemy się o nich uczyć już wkrótce).

<img src="zdjecie.jpg" alt="to zdjecie obrazuje to i to" title="obrazek taki" />

Wykorzystane atrybuty:

src - dotyczy ścieżki pliku z grafiką
alt - opis zawartości obrazka (gdy obrazek się nie wyświetla)

Dodatkowo:

title - tekst wyświetlający się po najechaniu myszką na obrazek
height - tu podaje się wysokość obrazka w pikselach
width - tu podaje się szerokość obrazka w pikselach

Inne:
Jest możliwe wstawienie obrazka jako linku:

<a href="http://www.jakastrona.com"> <img src="obrazek.gif" width="21" height="21"/> </a>

Tworzenie tabel

Przykładowa tabela:

<table border="1">
<tr><td>komorka 1</td><td>komorka 2</td></tr>
<tr><td>komorka 3</td><td>komorka 4</td></tr>
<tr><td>komorka 5</td><td>komorka 6</td></tr>
</table>

<table></table> - pomiędzy tymi
<tr></tr> - table row - pomiędzy tymi znacznikami jest wiersz tabeli
<td></td> - table data - pomiędzy tymi znacznikami jest komórka tabeli

<table border="1">
<caption>tytul</caption>
<tr><th>imie</th><th>nazwisko</th></tr>
<tr><td colspan="2">te dwie komorki scalono</td></tr>
<tr><td>Ziuta</td><td>Jakastam</td></tr>
<tr><td>Krzychu</td><td>Inny</td></tr>
</table>

<th></th> - table heading - oznacza nagłówki tabeli, a więc informacje mówiące o informacjach, które są w kolumnach pod nimi. (nagłówki są więc przez przeglądarkę nieco inaczej formatowane).
<caption></caption> - podpisywanie tabeli

<table border="1">
<caption>tytul</caption>
<tr><th>imie</th><th>nazwisko</th></tr>
<tr><td colspan="2">te dwie komorki scalono</td></tr>
<tr><td>Ziuta</td><td>Jakastam</td></tr>
<tr><td>Krzychu</td><td>Inny</td></tr>
</table>

Scalanie komórek:
atrybut colspan - number of columns a cell should span
odpowiednio: rowspan

<table border="1">
<caption>tytul</caption>
<tr><th>imie</th><th>nazwisko</th></tr>
<tr><td rowspan="2">Ziuta</td><td>Jakastaminna</td></tr>
<tr><td>Jakastam</td></tr>
<tr><td>Krzychu</td><td>Inny</td></tr>
</table>

Cytowanie

Cytować w HTML'u można na różne sposoby w zależności od tego, co chcemy osiągnąć.

Gdy chcemy powołać się na jakieś zewnętrzne źródło (np. tytuł książki) możemy użyć znacznika <cite>:

<p> Cały tydzień zastanawiałem się nad książką <cite> Syreny z Tytana </cite> Kurta Vonneguta. </p>

Krótszy fragment tekstu możemy zacytować korzystając ze znacznika <q>:

<p> Piotr lekko zdyszany zauważył - <q> Już nie mogę chodzić do szkoły na rękach</q></p>

Dłuższy fragment tekstu zacytujemy przy pomocy znacznika <blockquote>:

(wewnatrz tego znacznika trzeba uzywac akapitów)

<blockquote cite="http://kognitywna.nazwa.pl/site/kognitywistyka.html" title="Czym jest kognitywistyka">
<p>Cognitive science jest interdyscyplinarną dziedziną naukową, wytworzoną przez unifikację nauk szczegółowych
 zajmujących się systemami poznawczymi ze szczególnym uwzględnieniem człowieka i systemów sztucznych
 takich, jak [dziś] komputery. </p>
<p>jakis inny akapit ktorego nie musi byc a moze byc a moze byc wiecej</p>
</blockquote>

Zauważmy, że przy użyciu znacznika <blockquote> wykorzystaliśmy dwa atrybuty:

cite - w którym podajemy źródło, z którego cytujemy
title - w którym podajemy tytuł cytatu

możemy nadać mu także atrybut lang — jeśli cytat jest w innym języku, niż deklarowany dla całej strony

Znaczniki meta

Znaczniki meta umieszczane w nagłówku strony (a więc między znacznikami <head> </head>) służą do dostarczania specjalnych informacji (tzw. meta-danych) o naszej stronie internetowej. Efekty ich obecności nie są obserwowane bezpośrednio na stronie, ale dostarczają bardzo istotnych informacji dla przeglądarek i wyszukiwarek internetowych. Może się to przełożyć na popularność naszej strony internetowej. Informacje o zastosowaniu dwóch ważnych znaczników znajdziesz tutaj:
http://www.kaila.biz/design/htm/article/meta.htm

Ważnymi atrybutami znaczników <meta> są:

name -zmienna użytkownika wykorzystywana przez wyszukiwarki (czasem też http-equiv - zmienna systemowa wykorzystywana przez przeglądarki)
content - wartość zmiennej

Przykłady znaczników meta:

Słowa kluczowe:

<meta name="keywords" content="hasła związane z naszą stroną (oddzielone przecinkami)" />

Krótki opis strony:

<meta name="description" content="opis krótki" />

Informacje o autorze:

<meta name="author" content="imię i nazwisko" />

Zagadnienie poprawności stron (część 1)

Poprawność składniowa i walidacja

http://validator.w3.org/

Najczęstsze błędy wykrywane przez validator.w3.org:

uważać, żeby każdy znacznik zamknąć

zamykać cudzysłowy

nie zagnieżdżamy akapitów w nagłówkach ani nagłówków w akapitach

nie wstawiamy znaczników na krzyż:
źle blebe beaba
(powinno być: bleble beaba

Zadanie 2

Dodać 2 podstrony z różną treścią do swojej strony
Na każdej z podstron umieścić spójną nawigację w postaci listy (słowo klucz: listy) odnośników do pozostałych podstron
Na podstronach wykorzystać wybrane znaczniki omówione na zajęciach (listy uporządkowane, nieuporządkowane, definicji, cytaty, tabele — co najmniej 2 na stronę)
Zamieścić na wybranej stronie co najmniej 1 obrazek
Umieścić w nagłówku każdej z podstron odpowiednie znaczniki meta zawierające opis strony, słowa kluczowe, dane autora, język strony, kodowanie znaków
Każda z podstron musi oczywiście być poprawnym ("walidującym się") HTML-em — za więcej niż 1 błąd na pojedynczej stronie (własnego dokumentu html, reklam nie uwzględniamy): -0,5 pkt

termin: niedziela, godzina 23:59
punkty: 4

kara za każdy dzień spóźnienia: -1 pkt; za przysłanie po wtorku, 23:59 — brak punktów

Komunikacja człowiek-komputer