Wielkość czcionki w jednostkach miary

W dokumencie można użyć szeregu jednostek miary: piksele (px), punkty (pt), centymetry (cm), cale (in), milimetry (mm) i pica (pc).

1px - piksele
1in = 2.54cm
1pt = 1/72in
1pc = 12pt
1em - krotność wielkości domyślnego pisma

Na przykład:

<p style="font-size: 14px">Treść akapitu 14px</p>

<p style="font-size: 1cm">Treść akapitu 1 cm</p>

<p style="font-size: 1.5em">Treść akapitu 1.5em</p>

<p style="font-size: 1in">Treść akapitu 1 in</p>

Treść akapitu wyświetlana za pomocą wielkości 14 pikseli (najpowszechniej używana w Internecie jednostka miary pisma)

d. Wielkość w procentach

Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np. akapitu, tytułu itp.
Wszystkie trzy przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu, choć akapit jest wyświetlany poprawnie.

Na przykład:

<h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1>

Styl czcionki

Aby zdefiniować styl czcionki, należy wpisać w definicji stylu font-style : wartość

Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwa ostatnie są wyświetlane w podobny sposób, zatem to w dużej mierze kwestia indywidualnego wyboru użytkownika.

<p style="font-style: normal">Treść akapitu</p>

<p style="font-style: italic">Treść akapitu</p>

<h3 style="font-style: oblique">Treść akapitu</h3>

Wariant czcionki

Aby zdefiniować wariant czcionki, należy wpisać w definicji stylu

font-variant: wartość.

W kaskadowych arkuszach stylów rozróżniane są dwa warianty czcionek: normal i small-caps (czyli tak zwane małe kapitaliki) - można je stosować nie tylko do akapitów, ale i np. śródtytułów.

<p style="font-variant: normal">Treść akapitu</p>

<p style="font-variant: small-caps">Treść akapitu</p>

Waga czcionki

Aby zdefiniować wagę czcionki, należy wpisać w definicji stylu font-weight : wartość

Do dyspozycji mamy aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno je będzie niekiedy rozróżnić na ekranie): normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Pokażmy to na przykładach:

<p style="font-weight: waga">Treść akapitu wyświetlana za pomocą wybranej wagi</p>

WYRÓWNANIE AKAPITU

<p style="text-align: right; ">Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu</p>

<p style="text-align: center; ">Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. </p>

<p style="text-align: justify; ">Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. </p>

<p style="word-spacing:1em; border: 1px dashed brown; padding:5px; ">Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli</p>

<p style="width: 50%; text-indent: 5em; line-height: 200%; text-align: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szerokości 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójną wysokością wiersza</p>

Zadanie

Proszę skopiować poniższy tekst.

Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.

Ten akapit ma być napisany kolorem oliwkowym (olive), wielkość czcionki 16px, pogrubiona, krój czcionki Verdana, kolor tła srebrny (silver), wyrównany do środka, obramowany 1px.

Odsyłacze

Czym jest odsyłacz?

Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej budowę można obrazowo przedstawić w postaci:

<a href="miejsce_docelowe">Tekst, na którym należy kliknąć</a>

Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony (choć można to zmienić). Na przykład odsyłacz do miesięcznika PC World Komputer:

http://www.pcworld.pl">Tutaj znajdziesz miesięcznik PC World Komputer

Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna się pojawić informacja http://www.pcworld.pl. Kliknięcie spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy trwa to całkiem długo, jeśli łącza są przeciążone...).

ISTOTNA UWAGA: przy tworzeniu odsyłaczy należy zwracać uwagę na wielkość liter w odsyłaczach. Dla wielu serwerów internetowych ta sama wielka i mała litera są dwoma różnymi znakami, więc "MojaFirma" nie jest tym samym co "mojafirma". Praktyka pokazuje, że wiele osób nie zwraca na to uwagi, wskutek czego nie można wczytać strony albo obrazka czy pliku dźwiękowego na konkretnej stronie - gdy plik na serwerze zawiera jakieś wielkie litery, koniecznie należy to uwzględnić w odsyłaczu.