Jak pisać kolorowym tekstem

Chcąc wpisać tekst w kolorze, trzeba posłużyć się kodem HTML.

Podam kilka przykładów kolorowego tekstu i stylu czcionki.

Najłatwiej sprawdzić jak wygląda tekst korzystając z opcji „edytuj opis”

Klikając na przycisk „edytuj opis” otworzy nam się okienko, w które wstawiamy kod HTML z wpisanym w niego tekstem

To okienko na razie jest puste…. ale poniżej podam kilka przykładów kodów, które można tam wstawić.

1

<b style="font-family: Monotype Corsiva; font-size: 20px; color: #000099;">Tu wpisz tekst</b>

2

<b style="font-family: Monotype Corsiva; font-size: 20px; color: maroon;">Tu wpisz tekst</b>

3

<b style="font-family: Monotype Corsiva; font-size: 20px; color: teal;">Tu wpisz tekst</b>

4

<a style="font-size: 18px; color: #800080; font-weight: bold;">Tu wpisz tekst</a>

5

<a style="font-size: 18px; color: red; font-weight: bold;">Tu wpisz tekst</a>

6

<a style="font-size: 18px; color: green; font-weight: bold;">Tu wpisz tekst</a>

W miejsce >Tu wpisz tekst< należy wpisać dowolny tekst pozostawiając te znaki > <

Tekst należy wpisać między tymi znakami.

Teraz należy zatwierdzić klikając przycisk “zatwierdź”.

Tu pokażę jak to będzie wyglądało po zatwierdzeniu.

Można wybrać dowolny kolor korzystając z poniższej tabelki.

Tu jest tyko 16 podstawowych kolorów, ale myślę, że na początek to wystarczy.

Do wyboru są nazwy i obok podane symbole w systemie HEX… niektóre przeglądarki widzą kolory pisane tylko systemem HEX, więc lepiej korzystać właśnie z tych symboli.

Teraz pokażę, w którym miejscu kodu należy wstawić oznaczenie koloru:

<a style="font-size: 18px; color: red; font-weight: bold;">Tu wpisz tekst</a>

Miejsce wpisania zaznaczyłam kolorem czerwonym

<a style="font-size: 18px; color: #FF0000; font-weight: bold;">Tu wpisz tekst</a>

A tak będzie wyglądało polecenie, jesli wstawimy oznaczenie koloru w systemie HEX, też jest to kolor czerwony.

A teraz pora na krótkie wyjaśnienie kodu HTML

<b style="font-family: Monotype Corsiva; font-size: 20px; color: maroon;">Tu wpisz tekst</b>

Kolorem niebieskim zaznaczyłam styl, zielonym wielkość, czerwonym kolor a fioletowym miejsce wpisania tekstu. Można dowolnie zmieniać kolor, rozmiar i styl.

W tym Tutorialu podałam tylko dwa style, ale ostatnio brakuje mi czasu

a otrzymuję tak wiele pytań dotyczących pisania w kolorze, że postanowiłam w szybki i prosty sposób wytłumaczyć podstawy.

Mam nadzieję, że Wam się przyda, tym bardziej, że można sobie skopiować jakikolwiek przykład kodu, podmienić tekst i gotowe

Kilka dodatkowych styli czcionki

Obiecałam dodać część drugą z dodatkowymi stylami

Oto kilka przykładów:

1

<span style=" font-size: 16px;color: #009999; font-weight: bold; font-style: italic;"> MIEJSCE na Twój tekst </span>

2

<a style="font-family: EFN zefir; font-size: 18px; color: #FF3300; font-weight: bold;">MIEJSCE na Twój tekst </a>

3

<a style="font-family: EFN tess; font-size: 18px; color: #009900;">MIEJSCE na Twój tekst </a>

4

<a style="font-family: EFN tamiza; font-size: 18px; color: #990033; font-weight: bold;">MIEJSCE na Twój tekst </a>

5

<a style="font-family: EFN skrypt; font-size: 18px; color: #3399CC; font-weight: bold;">MIEJSCE na Twój tekst </a>

6

<a style="font-family: EFN serpentine; font-size: 18px; color: #CC0066; font-weight: bold;">MIEJSCE na Twój tekst </a>

7

<a style="font-family: EFN RexFont; font-size: 18px; color: #330099;">MIEJSCE na Twój tekst </a>

8

<a style="font-family: EFN etiopia; font-size: 18px; color: #0066CC;">MIEJSCE na Twój tekst </a>

9

<a style="font-family: EFN dokument; font-size: 18px; color: #663399; font-weight: bold;">MIEJSCE na Twój tekst </a>

10

<a style="font-family: EFN gedeon; font-size: 19px; color: red; font-weight: bold;">MIEJSCE na Twój tekst </a>

A tak będzie to wyglądało w opisie folderu:

Podam jeszcze adres strony z kolorami:

http://www.statom.pl/HTML/kolory.html

to tylko jedna z licznych stron tego typu, są tam oznaczenia kolorów, które można podmieniać w poleceniu html

Pokażę tu screena jak to wygląda na podanej stronie:

Widać tu symbole obok kolorów…. ten biały pasek zaznaczony obok koloru fioletowego, to właśnie ślad zaznaczenia symbolu, którego użyłam do wklejenia

Może jeszcze wytłumaczę kwestię pogrubienia i pochylenia tekstu.

W przykładowym kodzie:

<a style="font-family: EFN dokument; font-size: 18px; color: #663399; font-weight: bold;">MIEJSCE na Twój tekst </a>

font-weight: bold; zaznaczyłam na niebiesko…. Właśnie to polecenie odpowiada za pogrubienie tekstu.

Pokażę jak to wygląda w praktyce

<a style="font-family: EFN dokument; font-size: 18px; color: #663399;">MIEJSCE na Twój tekst </a>

A tak wygląda kod tego stylu bez pogrubienia… czyli tekst pierwszy na zamieszczonym rysunku.

Niektóre czcionki bardziej efektownie wyglądają właśnie po pogrubieniu, ale nie wszystkie….

Są też takie, które tracą na wyglądzie, bo po prostu są za grube.

No i jeszcze pochylenie tekstu

<a style="font-family: EFN tess; font-size: 18px; color: #009900;">MIEJSCE na Twój tekst </a>

Ten tekst będzie prosty

<i style="font-family: EFN tess; font-size: 18px; color: #009900;">MIEJSCE na Twój tekst </i>

A ten pochylony…. odpowiada za to literka umieszczona w ostrym nawiasie

Czyli <a na początku kodu i </a> na końcu oznacza tekst prosty

Natomiast <i na początku oraz </i> na końcu oznacza tekst pochylony

W praktyce wygląda to tak:

Achoj żeglarze

---