tworzenie serwisu.6

Projektowanie i ocena SI 6

Sekcja <body>

- adresy, końce wierszy w HTML, znaki

specjalne, wyróżnienie liniowe, obrazy.

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Plan zajęć

●

Adresy w HTML,

●

Końce wiersza w HTML,

●

Znaki specjalne (encje) w HTML,

●

Wyróżnienie liniowe w HTML,

●

Obrazy w HTML.

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Odsyłacze w HTML

80 e-mail: <a href="mailto:skorka@up.krakow.pl" title="Wyślij wiadomość e-mail do Stanisława Skórki">skorka@up.krakow.pl</a>

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Adresy w HTML

✔

Wszelkie dane kontaktowe (nie tylko adresy) w języku HTML

powinny być obejmowane znacznikami <address> </address>

✔

Znacznika adresu <address> jest elementem blokowym.

✔

Tekst objęty znacznikami <address> zazwyczaj jest wyświetlany przez przeglądarki kursywą. Nie jest on dodatkowo formatowany

w związku z tym, aby np. dane były wyświetlane w wielu

wierszach konieczne jest użycie dodatkowych znaczników (w

tym przypadku ).

✔

Znacznik adresu <address> może zawierać standardowe

atrybuty: id, class, dir, lang title, style, xml:lang.

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Adresy w HTML

76 <address>Stanisław Skórka

77 Uniwersytet Pedagogiczny

78 ul. Podchorążych 2, 30-084 Kraków

79 tel. 012 662 63 61

80 e-mail: <a href="mailto:skorka@up.krakow.pl" title="Wyślij wiadomość e-mail do Stanisława Skórki">skorka@up.krakow.pl</a></address> Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Końce wiersza w HTML

✔

Tekst umieszczony w elemencie blokowym (poza blokiem

preformatowanym) łamany jest zgodnie z szerokością danego

elementu np. akapitu .

✔

Aby podzielić tekst zgodnie z formatowaniem w teksie

źródłowym należy użyć znacznika   (w XHTML   ). W

miejscu jego wystąpienia tekst jest przenoszony do nowego

wiersza.

✔

Znacznik końca wiersza może zawierać atrybuty: class, id, title, style.

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Końce wiersza w HTML

76 <address>Stanisław Skórka

77 Uniwersytet Pedagogiczny

78 ul. Podchorążych 2, 30-084 Kraków

79 tel. 012 662 63 61

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Końce wiersza w HTML

75

76 <address>Stanisław Skórka

77 Uniwersytet Pedagogiczny

78 ul. Podchorążych 2, 30-084 Kraków

79 tel. 012 662 63 61

80 e-mail: (…) </address>

81

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Końce wiersza w HTML

14 <h1>Architekci Informacji w Europie.

15 Sprawozdanie z konferencji berlińskiej</h1>

17

18 Stanisław Skórka

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Końce wiersza w HTML

20 Instytut Informacji Naukowej i Bibliotekoznawstwa. 21 Akademia Pedagogiczna w Krakowie

23

24

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Końce wiersza w HTML

68

66 <h2>Zalecana literatura i rekomendowane miejsca w Internecie:</h2> Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Znaki specjalne (encje) w HTML

✔

Zamieszczenie w kodzie strony i poprawne wyświetlenie przez

przeglądarkę znaków specjalnych np. nawiasów kwadratowych,

możliwe jest przy użyciu tzw. encji.

✔

Kody encji należy pobierać z tablic np.:

http://algorytmy.pl/doc/xhtml/?id=109

✔

W miejscu występowania znaku specjalnego należy w kodzie

strony zamieścić odpowiednią encję.

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Znaki specjalne (encje) w HTML

;

(

)

[

]

@ @

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Znaki specjalne (encje) w HTML

29 Przed omówieniem tematyki konferencji warto przypomnieć, co oznacza termin „architektura informacji” (ai). Zapraszając na drugi szczyt architektów informacji, organizatorzy wyróżnili trzy definicje tego pojęcia:

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Znaki specjalne (encje) w HTML

35 „informacja”

43 „klejem”

48 „personalizacji”

49 (…) „architekt informacji” (…) „wielka” (…) #8222;mała”

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Wyróżnienie liniowe w HTML

✔

Wyróżnienie liniowe pozwala na wyodrębnienie fragmentu tekstu i

nadanie mu innego formatowania np. pogrubienie, zmianę kroju,

koloru fontu itp.

✔

Wyróżnienie liniowe uzyskać można przy użyciu znacznika

 

✔

Znacznik wyróżnienia liniowego  jest elementem

wierszowym – nie może występować samodzielnie na stronie,

musi zawsze znajdować się w obrębie innego elementu

blokowego np. akapitu 

✔

Znacznik wyróżnienia liniowego  może zawierać

standardowe atrybuty: style, title, class, dir, id, lang, xml:lang Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Wyróżnienie liniowe w HTML

25 „Architektura informacji jest tak stara, jak stara jest komunikacja międzyludzka. Tam gdzie jest informacja, jest także architektura” - Jesse J. Garret. Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Obrazy w HTML

✔

Do umieszczania grafiki na stronie służy znacznik <img>

✔

Znacznik grafiki <img> jest znacznikiem pustym – nie zawiera treści

✔

W HTML znacznik <img> nie posiada znacznika zamykającego.

✔

Dla pogodzenia standardów HTML i XHTML można stosować

zapis <img />

✔

Znacznik grafiki <img> posiada dwa wymagane atrybuty (znacznik nie może bez nich występować):

●

src – wskazanie ścieżki dostępu do grafiki znajdującej się na serwerze oraz

●

alt – krótki opis obrazu, który będzie wyświetlany w sytuacji, w której grafika nie będzie mogła być załadowana (IE8 wyświetla tekst

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

atrybutu alt jako podpowiedz po najechaniu kursorem na grafikę).

Obrazy w HTML

✔

Znacznik grafiki <img> jest elementem liniowym tzn. nie może występować samodzielnie na stronie lecz zawierać się w

elemencie blokowym (samodzielnie występujący na stronie obraz

należy umieścić na warstwie <div> ).

✔

W związku z tym, że znacznik <img> jest elementem

wierszowym, umieszczone obok siebie obrazy wyświetlone

zostaną w jednej linii.

✔

Znacznik grafiki <img> może zawierać standardowe atrybuty: id, class, title, style, dir, lang, xml:lang oraz atrybut longdesc –

adres URL zawierający dłuższy opis obrazu (nie obsługiwany

przez większość przeglądarek).

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Obrazy w HTML

45 <div class="obraz">

46 <img src="https://zanotowane.pl/14/2082/skorka2_pliki/ai.jpg" alt="Rys. 1 - Dziedziny, których problematykę i metodologię wykorzystuje architektura informacji" /> 47 </div>

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin

Obrazy w HTML

49 Rys. 1 - Dziedziny, których problematykę i metodologię wykorzystuje architektura informacji.

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2011/2012 - autor: Tomasz Rusin