Jak zmieniać kody Kolorów w języku HTML.pdf

(844 KB) Pobierz
Wstęp Jak zmieniać kody Kolorów w języku HTML
Definicje kolorów przydają się np. do ustawiania koloru tekstu lub tła elementów na stronie lub tła
tekstu. W miejsce wyrazu "kolor" należy wpisać o jaką barwę nam chodzi. Można to zrobić na dwa
sposoby: podać słowną nazwę jednego z szesnastu kolorów podstawowych [Tak zwanych, kolorów
predefiniowanych (czyli ustalonych arbitralnie w języku HTML) - jest tych kolorów 16.] lub wstawić w
to miejsce odpowiednik dowolnego koloru w kodzie szesnastkowym (HEX), lub kodowaniu
dziesiętnym rgb(RGB).
A teraz mała powtórka z fizyki (Nikuś, proszę, nie uciekaj jeszcze od komputera, to będzie
baaardzo krótka powtórka).
Każdą 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
GG - nasycenie koloru
BB - nasycenie koloru
[użyty w kodzie koloru
szesnastkowym).
czerwonego,
zielonego;
niebieskiego
znak # (hash) oznacza, że definiujemy kolor kodzie HEX -
w
Wszystkie składowe muszą być podane w systemie szesnastkowym i poprzedzone znakiem t.
Zasada jest taka Im większa liczba (HEX), tym jaśniejszy kolor.
Ważne: zauważ, że liczba musi się składać z sześciu cyfr, nawet jeśli są to same zera!
Uwaga:
(w systemie dziesiętnym jest dziesięć cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,):
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.
Przyktadowo: liczba B5 zapisana w kodzie HEX, oznacza w systemie dziesietnym 181
bo B to:- [=11], a 5 to: [=5] to daje w zapisie pozycyjnym
11 x 161 + 5 x 160 = 11 x 176+5x 1= 181.
W systemie (Hex) obowiązuje tak jak i w systemie dziesiętnym pozycyjny system zapisu licz.
W systemie dziesiętnym:
Liczba 181 - to jej wartość oznacza (1 x 102 + 8 x 101 + 1 x 100) czyli
1x100+8x10+1x1=181
ten sam zapis w systemie (hex):
Będzie miał kod BO — wartość tego zapisu oznacza:
B czyli w dziesiętnym to 11,
a 5to w dziesiętnym też 9.
Strona 1
Czyli mamy:
BS(Hex) w zapisie pozycyjnym to:
(11 x 161 + 5 x 16°) = 176+ 5 = 181
To nie jest trudne, ale aby takiej Konwersji DEC -> HEX (lub odwrotnie) można tego w prosty sposób
dokonać np. w windowsowym Kalkulatorze (trzeba tylko włączyć w nim widok Profesjonalny lub
Programisty).
Całkowita ilość kolorów możliwych do uzyskania tą metodą wynosi: 16 777 216.
Oto przykład:
kod koloru: zapisany w (HEX): #9933CC to będzie taki kolor PIW
Aby otrzymać inne barwy, wystarczy zmienić niektóre cyfry w zapisie (HEX). Najlepsze rezultaty
(będą widoczne różnice) można otrzymać, zmieniając pierwszą; trzecią lub piątą cyfrę (w
kolejności od lewej strony), można zmieniać pojedynczo lub zmieniając wszystkie jednocześnie.
Otrzymamy wtedy 4 różne kolory. Dotyczy to zarówno koloru tekstu jak i koloru tła tekstu, kodowanie
jest dokładnie takie samo.
Oto warianty koloru tekstu dla powyższego przykładu:
Jeśli przyjmiemy jako nasz kolor wyjściowy kolor: £9933CC MN:
„am
to
HEX): 4A933CC
[EE]
to zmiana na pozycji (1)
p
HEX): *99A3CC [7
]to zmiana na pozycji (3)
p
HEX): #9933AC |
HEX): #A9A3AC
to zmiana na pozycji (4)
Hite zmiana na pozycjach (1; 3; i 4)
a
Uwaga:
Jeśli tekst będzie miał taki sam kolor jak i jego tło tekst zniknie (nie będzie widoczny).
Dla kodowania koloru tekstu jako (Hex) szablon jest taki:
Selektor: (style = "atrb.1; arb.2; arb.3; ...., arb.n;')> Tu Tekst do wyświetlenia (To co chcemy
napisać)</selecor>
Za napis selektor można podstawić znaczniki:
<p>....</p>, - to znacznik akapitu testu
<a>.... <a>, - to znacznik tzw. Kotwicy, czyli umocowania tekstu na stronie (wyznacza przywiązanie
tekstu do pozycji na stronie)
<b>....</b>, - to znacznik pogrubienia tekstu nie zależnie od grubości wybranej czcionki.
<i>....</i>,- to znacznik pochylenia tekstu nie zależnie od rodzaju wybranej czcionki.
<u>....<lu>,- to znacznik podkreślenia tekstu nie zależnie od rodzaju wybranej czcionki.
<div>....</div> - to znacznik grupujący jakieś elementy strony, czy kartki papieru lub obrazków jako
wspólny blok (testu, obrazków innych elementów)
Strona 2
Przykład użycia znacznika akapitu:
Akapit (inaczej paragraf) jest bardzo ważny w składni HTML, ponieważ pozwala w określony
sposób sformatować tekst na ekranie (ułożyć go w podany sposób). Robi się to podając atrybuty
znacznika.
Atrybut wpisuje się zawsze wewnątrz znacznika otwierającego - bezpośrednio po jego nazwie
(oddzielony od niej spacją), a przed znakiem zamknięcia nawiasu ostrego, czyli przed ">". Każdy
znacznik ma ściśle określone atrybuty, które obsługuje. W przypadku akapitu można zastosować
m.in. następujące:
1.
Wyrównanie tekstu do lewej strony (domyślnie)
<p style="text-align:
left">Tresé akapitu</p>
Na ekranie wyglada to tak:
Treść akapitu
2.
Wyrównanie tekstu do prawej
<p style="text-align: right">Treść akapitu<ip>
Na ekranie wygląda to tak:
Treść akapitu
3.
Wyśrodkowanie tekstu
<p style="text-align: center">Tresé akapitu</p>
Na ekranie wyglada to tak:
Treść akapitu
4.
Justowanie tekstu (wyrównanie do obu marginesów jednocześnie)
<p style="text-align: justify">Treść akapitu Treść akapitu Treść akapitu<ip>
Na ekranie wygląda to tak:
Treść akapitu
Treść akapitu
Treść akapitu
We wszystkich przypadkach wyróżnione zostały właśnie atrybuty znacznika wraz z ich
wartościami (wartość atrybutu podaje się w cudzysłowie po znaku równości).
Można podawać atrybuty określając sży/ pisania tekstu przez podanie takiego zapisu używając
znacznika (słowa kluczowego) style=, wtedy można wymienić atrybuty które chcemy zmieniać
podać je w formie listy atrybutów.
W miejsce tekstu: Treść akapitu, należy wpisać tekst, który ma zostać sformatowany w sposób
określony przez parametr.
<p style="text-align: wyrównanie; text-indent: wcięcie; font-family: "Arial Unicode MS';
font-size: 78px; font-weight: waga; font-style: styl; text-decoration: dekoracja; Color.
HRRGGBB;”> Treść akapitu </p>
Strona 3
Kolejność podawania atrybutów jest dowolna, nie trzeba wymieniać wszystkich dostępnych atrybutów
tylko te które chcemy zmienić.
Omówię
teraz poszczeqólne
atrybuty:
text-align: wyrównanie
Dzięki temu tekst we wszystkich akapitach na stronie zostanie wyrównany w określony sposób:
za słowo wyrównanie można podstawić wyrażenie:
left - wyrównanie tekstu do lewego marginesu (domyślnie)
right - wyrównanie do prawego marginesu
center - do środka (wyśrodkowanie)
justify - do obu marginesów
text-indent: wcięcie;
jednocześnie (justowanie)
Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek
długości.
Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego
marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat).
e
e
«
e
e
e
in-cale (1in = 2.54cm)
cm-centymetry
mm-
milimetry
pt- punkty (1pt = 1/72in) - często używane przy definiowaniu rozmiaru czcionki w
edytorach tekstu
pce - pika (1pe = 12pt)
px - piksele (1px = 1/96in)
font-family: rodzaj czcionki
font-family: rodzaj(1), rodzaj(2), rodzaj(3),... , rodzaj(n);
Selektorem czyli wyznacznikiem, może być dowolny znacznik, w którym można wpisywać
tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli lub div — blok tekstu;
W selektorze w atrybutach zamiast: rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać
rodzaje czcionek należy wpisać rodzaje czcionek (np.: Arial, ' Courier New',"Times New
Roman‘, Verdana i inne).
Lepiej zamiast jednego rodzaju czcionki jest podawanie kilku rodzajéw czcionki w postaci
listy rozdzielonej przecinkami. Wtedy gdy w komputerze uzytkownika jeSli nie ma
zainstalowanej uzytego rodzaju Czcionki, to zostanie wybrany kolejny rodzaj czcionki
wymieniony na tej liście. Jeśli podamy tylko jeden rodzaj Czcionki, a nie będzie on
zainstalowany, na komputerze użytkownika wtedy HTML podstawi domyślny rodzaj
Czcionki, co może zaburzyć planowany wygląd strony.
Jeśli nazwa czcionki składa się z co najmniej dwóch wyrazów jak na przykład ta 'Arial
Unicode MS” to nazwa musi być objęta apostrofem górnym pojedynczym.
Można używać znacznika <span> np.:<span style = "font-family: Arial; *> to dla HTML
oznacza tylko lokalną czasową zmiana czcionki do momentu wystąpienia znacznika
zamykającego </span>
Strona 4
Zmiana atrybutéw dotycz wtedy tylko tekstu miedzy obu znacznikami <span>
a nie dotyczy CAŁEGO AKAPITU <p>....</p>
</span>,
Za pomocą tego ZNACZNIKA <span...>....</Span> można zmieniać dowolny atrybut
(atrybuty) wcześniej ustalone dla <p> - akapitu; <td> - komórki tabeli; czy <div> - bloku
tekstu
Przykład:
Tak będzie wyglądał kod:
<p style="text-align: center; font-family: ‘Arial Unicode MS’; font-size: 16px; font-
weight: normal; Cołor: 4993333;”>Dla całego akapitu tak będzie wyglądał tekst. <span
style =” font-family: ‘ Comic Sans MS ‘;font-size:18px;font-weight: 600; Color:
HF82886;>.Ale ten fragment będzie pisany innym kolorem, innym rodzajem czcionki oraz
czcionką pogrubioną.</span>, za tym znacznikiem </span> dalej w tym akapicie wracamy
do wcześniej ustalonych atrybutów akapitu.</p>
A tak będzie to wygladało to na stronie.
Dla całego akapitu tak będzie wyglądał tekst Ale ten fragment
będzie pisany innym kolorem I rodzajem czcionki oraz
inną wielkością czcionki
i czcionką pogrubioną., za tym
znacznikiem </span> dalej w tym akapicie wracamy do wcześniej
ustalonych atrybutów tego akapitu.
Kolory - można definiować w kodzie dziesiętnym (RGB), ale zapis dla koloru jest taki: Dla kodowania
dziesiętnego rgb(RGB):
<p style="text-align: center; font-family: ‘Arial Unicode MS’; font-size: 20px; font-
weight: 600; Color: rgb(248,40,134); font-style: italic;”>Tresé akapitu bedzie takiego
koloru, a czcionka będzie pochyła.</p>
A tak będzie to wyglądało
na stronie:
Treść akapitu będzie takiego koloru, a czcionka
będzie pochyła.
WAŻNE:
JEŚLI DECYDYJEMY SIĘ PODAWAĆ KOD KOLORU W KODOWANU (HEXADECYMALNYM)
CYFRY OZNACZJĄCE KOD KOLORU MUSZĄ BYŻ POPRZEDZONE ZNAKIEM # (hash).
np. tak: Color: #F82886;
Strona 5

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin