Ć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ć: <p> lub <p>. 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 & lub &. 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. Α to nie jest to samo co α. 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 ( ) 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.