1. Rodzaje czcionek

Czasami chcielibyśmy, w "Informacjach o Chomiku" lub w "Chomikowych rozmowach", napisać coś czcionką inną niż ta, która została ustawiona przez twórców strony Chomikuj.pl. W takiej sytuacji najlepiej użyć styli CSS, dzięki którym możemy określić rodzaj czcionki, jej wielkość, kolor, grubość itp.

Poniżej znajduje się kod HTML akapitu (<p>...</p>), wraz ze stylem CSS (style="..."), który określa rodzaj czcionki:

<p style="font-family:rodzaj czcionki;">Treść akapitu</p>

W miejsce "rodzaj czcionki" należy wpisać nazwę czcionki (w naszym przykładzie będzie to: Georgia).

Uwaga: Jeżeli nazwa czcionki składa się z więcej niż jednego wyrazu, należy ją objąć w znaki apostrofu (np.: 'Comic Sans MS', 'Monotype Corsiva', 'Times New Roman', 'Courier New').

Natomiast w miejsce "Treść akapitu" należy wpisać tekst, którego wygląd chcemy określić (w naszym przykładzie treścią akapitu będzie zdanie: To jest tekst napisany czcionką Georgia).

Przykład:

HTML:

<p style="font-family:Georgia;">To jest tekst napisany czcionką Georgia</p>

Nazwy wybranych czcionek:

Arial

'Arial Black'

'Arial Narrow'

'Arial Unicode MS'

Verdana

Tahoma

'Trebuchet MS'

Georgia

'Courier New'

'Times New Roman'

'Palatino Linotype'

'Lucida Sans Unicode'

'Comic Sans MS'

'Microsoft Sans Serif'

Mistral

'Monotype Corsiva'

'Tw Cen MT'

'Tw Cen MT Condensed'

Impact

'Book Antiqua'

Uwaga: Jeżeli użytkownik czytający Twój tekst, nie będzie posiadał danej czcionki w swoim systemie, tekst zostanie mu wyświetlony czcionką domyślną (najprawdopodobniej 'Times New Roman'). Poza tym nie każda czcionka potrafi poprawnie zapisać polskie znaki (ą, ę, ć, ś, ź, ż, ó) w standardzie ISO.

1. Wielkość czcionki

Kod HTML akapitu, wraz ze stylem CSS, który określa wielkość czcionki:

<p style="font-size:wielkość czcionki;">Treść akapitu</p>

W miejsce "wielkość czcionki" należy wpisać konkretną wielkość czcionki wyrażoną w pikselach (px). W naszym przykładzie wielkość czcionki będzie wynosiła: 18px.

Natomiast w miejsce "Treść akapitu" należy wpisać tekst, którego wygląd chcemy określić (w naszym przykładzie treścią akapitu będzie zdanie: To jest tekst napisany czcionką o wielkości 18 pikseli).

Przykład:

HTML:

<p style="font-size:18px;">To jest tekst napisany czcionką o wielkości 18 pikseli</p>

1. Kolor czcionki

Kod HTML akapitu, wraz ze stylem CSS, który określa kolor czcionki:

<p style="color:kolor czcionki;">Treść akapitu</p>

W miejsce "kolor czcionki" należy wpisać nazwę koloru (np. black, red, green, blue). Zaleca się jednak określanie kolorów za pomocą kodu heksadecymalnego (HEX). Zapis heksadecymalny składa się z sześciu cyfr poprzedzonych znakiem # (krzyżyk). W naszym przykładzie tekst będzie koloru czerwonego (red), a jego zapis heksadecymalny będzie wyglądał następująco: #FF0000.

W miejsce "Treść akapitu" należy wpisać tekst, którego wygląd chcemy określić (w naszym przykładzie treścią akapitu będzie zdanie: To jest tekst napisany czcionką w kolorze czerwonym).

Przykład:

HTML:

<p style="color:#FF0000;">To jest tekst napisany czcionką w kolorze czerwonym</p>

Podstawowa paleta kolorów:

Nazwa HEX Kolor

black #000000

silver #C0C0C0

gray #808080

white #FFFFFF

maroon #800000

red #FF0000

purple #800080

fuchsia #FF00FF

green #008000

lime #00FF00

olive #808000

yellow #FFFF00

navy #000080

blue #0000FF

teal #008080

aqua #00FFFF

Rozszerzona paleta kolorów:

http://html-color-codes.info/

http://www.computerhope.com/htmcolor.htm

http://www.kurshtml.boo.pl/generatory/kolory.html

http://htmlcolorcodes.org/

http://www.colorsontheweb.com/colorwizard.asp

1. Wstawianie grafiki

Kod HTML do wstawiania grafiki na Chomikuj.pl:

<img src="adres obrazka" alt="krótki opis obrazka" />

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (w naszym przykładzie będzie to: http://chomikuj-wyszukiwarka.eu/graphics/ptak.png).

Natomiast w miejsce "krótki opis obrazka" należy wpisać kilka słów opisujących obrazek, które pojawią się u użytkowników z wyłączonym wyświetlaniem grafiki (w naszym przykładzie będzie to: Ptak).

Przykład:

HTML:

<img src="http://chomikuj-wyszukiwarka.eu/graphics/ptak.png" alt="Ptak" />

Można też stosować skróconą formułę :

<img src="adres obrazka " />

W miejsce "adres obrazka" należy wpisać pełny adres internetowy obrazka (czyli wchodzisz na jakąś stronę klikasz drugim przyciskiem myszy na wybranym obrazku wybierasz kopiuj adres odnośnika i wklejasz go w kod tam gdzie pisze adres obrazka.