Ćw8. Kolory i znaki specjalne

Transkrypt

Ćw8. Kolory i znaki specjalne
Ćwiczenie 8 – Kolory i znaki specjalne
W ćwiczeniu 8 zajmować się będziemy kolorami i znakami specjalnymi.
Barwę moŜna utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony i niebieski (rgb - od
angielskich słów: red - czerwony, green - zielony, blue - niebieski).
Nasycenie kaŜdego z kolorów zapisujemy w definicji barwy w postaci: #rrggbb, gdzie: rr - nasycenie koloru czerwonego (wartości od 0
do 255); gg - nasycenie zielonego (wartości od 0 do 255); bb - nasycenie niebieskiego (wartości od 0 do 255). Natomiast znak # oznacza, Ŝe
definiujemy kolor w kodzie HEX - heksadecymalnym.
Wszystkie składowe muszą być podane w systemie szesnastkowym i poprzedzone znakiem #. Liczba musi się składać z sześciu cyfr,
nawet jeśli są to same zera. W systemie szesnastkowym (HEX) jest szesnaście podstawowych cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
PoniŜej umieszczonych zostało 16 podstawowych kolorów, dla których moŜemy uŜyć nazwy angielskiej zamiast zapisu
heksadecymalnego. Dla pozostałych kolorów konieczny jest zapis: #rrggbb. Ilość wszystkich moŜliwych kolorów do uzyskania wynosi
256x256x256 czyli 16777216.
Polecam bardzo pomocny program do definiowania kolorów: RGBtoHEX - do pobrania tutaj (418KB).
Pierwsze zadanie polega na wykonaniu tabeli z podstawowymi kolorami:
tabela z kolorami:
1. trzy kolumny: nazwa, #rrggbb, kolor
2. szesnaście wierszy - kolorów
Podpowiedź: aby uzyskać jednakową szerokość tekstu w komórkach, w obu kolumnach - nazwa i #rrggbb - naleŜy kaŜdą nazwę i kaŜdy kod
koloru objąć znacznikiem <tt>...</tt>. Dzięki temu tekst wyświetlany jest w trybie dalekopisu (kaŜdy znak jest tej samej szerokości) lub o
stałych odstępach pomiędzy znakami.
Kolejna część ćwiczenia związana jest ze znakami specjalnymi zwanymi encjami. Istnieje dość duŜa grupa znaków, których nie moŜna
wpisać wprost z klawiatury do edytora HTML, aŜeby pojawiły się na stronie WWW.
Prostym przykładem są tutaj symbole oznaczające znaczniki. Wpisanie <p> do edytora będzie równoznaczne z wstawieniem nowego akapitu.
AŜeby pojawiły się oba znaki nierówności naleŜy uŜyć zastępujących je znaków specjalnych.
PoniŜej w kilku tabelach zebrane są niektóre znaki specjalne. I tak aŜeby napisać <p> naleŜy wpisać: &lt;p&gt; lub &#60;p&#62;. KaŜdy
znak specjalny rozpoczyna znak ampersand (&), a kończy średnik (;). Dlatego Ŝeby pojawił się na stronie znak ampersand (&) naleŜy uŜyć
znaku specjalnego &amp; lub &#38;.
W pierwszej kolumnie tabel zawartych dalej widnieje dziesiętny numer danego znaku, w drugiej - jego nazwa. Są one równowaŜne, dlatego
moŜna uŜywać ich zamiennie. Ten drugi zapis jest skrótem od angielskiej nazwy danego symbolu.
Przy wpisywaniu nazwy znaku, waŜna jest wielkość liter, np. &Alpha; to nie jest to samo co &alpha;. W kolumnie Opis znajduje się pełna
angielska nazwa wszystkich znaków, dalej - objaśnienie w języku polskim, a na końcu wygląd wybranego symbolu na ekranie.
Szczególnie waŜny jest znak &nbsp; (&#160;) czyli niełamliwej spacji. Pozwala on na połączenie dwóch wyrazów tak, aby nie były
rozdzielone poprzez przełamanie wiersza. Ma to zastosowanie szczególnie przy spójnikach, aby nie pozostawały na końcu wiersza.
Edytor kED ułatwia edycję znaków specjalnych. Posiada w menu albo na pasku narzędziowym listę encji albo odrębną zakładkę z tabelą encji,
którą moŜna włączyć i albo uŜywać oddzielnie albo zadokować w lewym panelu.
Na kolejnych zrzutach moŜna zobaczyć listę i tabelę encji:
Zadanie z encjami polega na napisaniu szkieletu dokumentu HTML, tak aby znaczniki były prawidłowo wyświetlane w przeglądarce. W
znaczniku <body>...</body> naleŜy umieścić tabelę z zapisanymi w niej poznanymi znacznikami.
Podpowiedź: aby uzyskać tekst preformatowany czyli z zachowanymi z kED-a spacjami i znakami końca linii, naleŜy cały blok tego
tekstu objąć znacznikiem <pre>...</pre>. Dzięki temu moŜna uzyskać widok kodu źródłowego.
Następnie naleŜy napisać zdanie uŜywając greckich liter, tak aby były prawidłowo wyświetlane w przeglądarce.
Oceniany będzie plik kolory_znaki.html, w którym znajdzie się tabela podstawowych kolorów, szkielet dokumentu HTML ze
znacznikami w tabeli i jedno zdanie po grecku. Proszę do wysłać na email stosując prawidłowe nazwanie tematu listu:
3TI_AI_Cw8_Imie_Nazwisko
Listy z innym tytułem nie będą oceniane i sprawdzane.