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
●
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
✔
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 <br>).
✔
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<br />
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
✔
Tekst umieszczony w elemencie blokowym (poza blokiem
preformatowanym) łamany jest zgodnie z szerokością danego
elementu np. akapitu <p>.
✔
Aby podzielić tekst zgodnie z formatowaniem w teksie
źródłowym należy użyć znacznika <br> (w XHTML <br /> ). W
miejscu jego wystąpienia tekst jest przenoszony do nowego
wiersza.
✔
Znacznik końca wiersza <br> 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<br />
77 Uniwersytet Pedagogiczny<br />
78 ul. Podchorążych 2, 30-084 Kraków<br />
79 tel. 012 662 63 61<br />
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
75 <br /><br />
76 <address>Stanisław Skórka<br />
77 Uniwersytet Pedagogiczny<br />
78 ul. Podchorążych 2, 30-084 Kraków<br />
79 tel. 012 662 63 61<br />
80 e-mail: (…) </address>
81 <br />
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.<br />
15 Sprawozdanie z konferencji berlińskiej</h1>
16
17 <br />
18 <p id="autor">Stanisław Skórka<p/>
Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”
IINiB UJ 2011/2012 - autor: Tomasz Rusin
Końce wiersza w HTML
20 <p id="jednostka">Instytut Informacji Naukowej i Bibliotekoznawstwa.<br /> 21 Akademia Pedagogiczna w Krakowie</p>
22
23 <br />
24 <br />
Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”
IINiB UJ 2011/2012 - autor: Tomasz Rusin
Końce wiersza w HTML
68 <br />
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 <p>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:</p>
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 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
<span> </span>
✔
Znacznik wyróżnienia liniowego <span> jest elementem
wierszowym – nie może występować samodzielnie na stronie,
musi zawsze znajdować się w obrębie innego elementu
blokowego np. akapitu <p>
✔
Znacznik wyróżnienia liniowego <span> 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 <p><span class="kursywa">„Architektura informacji jest tak stara, jak stara jest komunikacja międzyludzka. Tam gdzie jest informacja, jest także architektura”</span> - Jesse J. Garret.</p> Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”
IINiB UJ 2011/2012 - autor: Tomasz Rusin
✔
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ę).
✔
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="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 <p class="podpis">Rys. 1 - Dziedziny, których problematykę i metodologię wykorzystuje architektura informacji.</p>
Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”
IINiB UJ 2011/2012 - autor: Tomasz Rusin