tworzenie.6

Projektowanie i ocena SI 6

Sekcja <body>

- wyróżnienie liniowe, obrazy, tabele

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2012/2013 - autor: Tomasz Rusin

Plan zajęć

●

Wyróżnienie liniowe w HTML,

●

Obrazy w HTML,

●

Tabele w HTML.

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2012/2013 - 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

<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 2012/2013 - 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 2012/2013 - 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 2012/2013 - 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 2012/2013 - autor: Tomasz Rusin

Obrazy w HTML

45 <div class="obraz">

46 <img src="https://zanotowane.pl/14/5968/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 2012/2013 - 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 2012/2013 - autor: Tomasz Rusin

Tabele w HTML

✔

Tabele składają się z kolumn i wierszy. Wiesz i kolumna

wyznaczają pojedynczą komórkę, w której mogą znajdować się

dowolne dane.

✔

Tabelę można zdefiniować za pomocą znacznika <table>

</table>

✔

Wiersze tabel tworzone są przy użyciu znacznika <tr> </tr> , a komórki wierszy za pomocą znacznika <td> </td> . Każdy wiersz musi zawierać taką samą liczbę komórek (komórki można później

połączyć). Liczba wierszy i komórek nie jest ograniczona.

✔

Utworzona tabela wyświetlana jest przez przeglądarki bez

obramowania (można je włączyć).

✔

Znaczniki tabel <table> <tr> <td> mogą przyjmować standardowe atrybuty: class, dir, id, lang, title, xml:lang oraz inne atrybuty Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2012/2013 - autor: Tomasz Rusin

zmieniające ich wygląd i zachowanie.

Tabele w HTML

76 <table>

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2012/2013 - autor: Tomasz Rusin

Tabele w HTML

92 </table>

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2012/2013 - autor: Tomasz Rusin

Tabele w HTML

77 <tr>

78 <td class="tytulowa">Numer zadania</td> 79 <td class="tytulowa">Opis zadania</td> 80 <td class="tytulowa">Szczegóły</td> 81 </tr>

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2012/2013 - autor: Tomasz Rusin

Tabele w HTML

82 <tr>

83 <td class="pierwsza">1</td>

84 <td class="druga">Proszę podać (...) aktor, lider</td> 85 <td class="trzecia">Czas (...) kliknięć: 1</td> 86 </tr>

87 <tr>

88 <td class="pierwsza">2</td>

89 <td class="druga">W bieżącym numerze (...) Konsumenta</td> 90 <td class="trzecia">Czas (...) Liczba kliknięć: 2</td> 91 </tr>

Konspekt z laboratorium przedmiotu „Projektowanie i ocena SI”

IINiB UJ 2012/2013 - autor: Tomasz Rusin