Z jednego systemu nie wydobędziemy się długo: ze słonecznego

• Joomla
• CSS
• HTML
• Początek
• Start

Początek

Strona Główna

HTML

Wprowadzenie

Ćw. 1 - Wstęp do HTML i XHTML

Ćw. 2 - Body i meta

Ćw. 3 - Tekst

Ćw. 4 - Odsyłacze

Ćw. 5 - Tabele

Ćw. 6 - Multimedia

Ćw. 7 - Ramki

Ćw. 8 - Formularze

Ćw. 9 - Kolory i znaki specjalne

CSS

Wprowadzenie

Ćw. 10 - CSS i wstawianie CSS

Ćw. 11 - Selektory

Ćw. 12 - Czcionki i tekst

Ćw. 13 - Tło i marginesy

Ćw. 14 - Obramowanie i wykazy

Ćw. 15 - Rozmiary i tabele

Ćw. 16 - Pozycjonowanie i kursory

Ćw. 17 - Suwaki i filtry

Ćw. 18 - Menu w CSS

Ćw. 19 - Strona na DIV-ach

Joomla

Wprowadzenie

Ćw. 20 - Instalacja i konfiguracja

Ćw. 21 - Treść, sekcje i kategorie

Ćw. 22 - Tworzenie menu

Ćw. 23 - Komponenty Joomla

Ćw. 24 - Szablony i inne atrakcje

Ćwiczenie 12 - Czcionki i tekst

Wprowadzenie:

W tym ćwiczeniu rozpoczniemy analizę konkretnych właściwości i ich wartości, dzięki którym można wpływać na wygląd strony WWW, używając ich w arkuszach stylów CSS. Omówione będą własności czcionek i tekstu.

1. zadania do wykonania

Własności czcionek:

1. wielkość czcionek
2. rodzaj czcionek
3. styl czcionek
4. waga czcionek
5. wariant czcionek

Własności tekstu:

1. kolor tekstu
2. dekoracja tekstu
3. transformacja tekstu
4. wyrównanie tekstu
5. wcięcie tekstu
6. odstęp między wierszami
7. odstęp między wyrazami
8. odstęp między literami
9. łączenie własności czcionek i tekstu

Czcionki

Wielkość czcionek

Składnia reguły:

1. selektor {font-size: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Jako wielkość należy podać konkretną wartość. Można to zrobić, używając czterech grup wielkości:

1. 1. wielkości absolutne:
2. "xx-small" - najmniejsza (10px)
3. "x-small" - mniejsza (10px)
4. "small" - mała (12px)
5. "medium" - średnia (16px)
6. "large" - duża (18px)
7. "x-large" - większa (24px)
8. "xx-large" - największa (32px)

Tak wyglądają te wielkości:

1. 2. wielkości względne:
2. "smaller" - mniejsza od bieżącej
3. "larger" - większa od bieżącej

Tak to wygląda w praktyce:

1. 3. jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)

Takie mogą być przykładowe wielkości czcionek według jednostek miary:

1. 4. procent wielkości bieżącej:
2. procent - %

Na przykład:

do góry

Rodzaj czcionek

Składnia reguły:

1. selektor {font-family: rodzaj_1, rodzaj_2, rodzaj_3,...;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

W miejsce zwrotów: rodzaj_1, rodzaj_2, rodzaj_3,... należy wpisać rodzaje czcionek. Zaleca się wpisywać kilka rodzajów, ponieważ w przypadku braku danej czcionki u oglądającego, wybrana zostanie druga, a jeżeli nie druga to kolejna. Można podać jeden rodzaj - w tej sytuacji, gdy zabraknie czcionki u użytkownika - wczytana zostanie systemowa czcionka.

Nazwę czcionki opisaną kilkoma wyrazami koniecznie należy ująć w znaki apostrofu (np. 'Times New Roman', 'Courier New').

Warto wypisać kilka rodzajów czcionek, ponieważ dzięki temu istnieje większe prawdopodobieństwo wczytania tej, którą zaprojektował autor strony. Można w ten sposób uniknąć wczytania niepożądanej, a tym samym uniknąć nieprzewidywalnych zachowań podczas wyświetlania się strony.

1. selektor {font-family: Arial, 'Courier New', 'Times New Roman';}

źódło: www.kurshtml.boo.pl

Rodziny ogólne to dodatkowy sposób na prawidłowe wyświetlenie strony. W przypadku braku u oglądającego jakiejkolwiek z zadeklarowanych czcionek w dokumencie, wczytana zostanie ta z rodziny ogólnej i przynajmniej będzie podobna (z tej samej rodziny) do założonej przez autora strony. Zapisuje się ją na końcu listy czcionek:

1. selektor {font-family: Arial, Helvetica, Verdana, sans-serif ;}

Pozostaje jeszcze problem polskich znaków, których nie potrafią interpretować wszystkie rodziny czcionek. Należy koniecznie wypróbować czcionkę na polskich znakach.

Przykłady czcionek:

Przykłady rodzin ogólnych:

do góry

Styl czcionek

Składnia reguły:

1. selektor {font-style: styl;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. styl:
2. "normal" - czcionka normalna (podstawowa)
3. "italic" - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique)
4. "oblique" - również czcionka pochylona (podobna jak poprzednio)

Dzięki temu poleceniu można określić styl czcionki. Do wyboru są właściwie dwa rodzaje: czcionka normalna i pochyła.

źódło: www.kurshtml.boo.pl

Przykłady stylów:

do góry

Waga czcionek

Składnia reguły:

1. selektor {font-weight: waga;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. waga - wielkości bezwzględne:
2. "normal" - czcionka normalna (podstawowa)
3. "bold" - czcionka pogrubiona
4. "100"
5. "200"
6. "300"
7. "400" (odpowiednik "normal")
8. "500"
9. "600"
10. "700" (odpowiednik "bold")
11. "800"
12. "900"

Przykłady wagi czcionek:

1. waga - wielkości względne:
2. "lighter" - czcionka mniej wytłuszczona od odziedziczonej
3. "bolder" - czcionka bardziej wytłuszczona od odziedziczonej

Niektóre rodziny czcionek mogą nie posiadać wszystkich dziewięciu stopni wytłuszczenia. Wiele posiada tylko wartości normal i bold.

do góry

Wariant czcionek

Składnia reguły:

1. selektor {font-variant: wariant;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. wariant:
2. "normal" - czcionka normalna (podstawowa)
3. "small-caps" - kapitaliki

Dzięki poleceniu small-caps można napisać tekst wielkimi literami, ale o wielkości małych liter.

Przykład:

do góry

Tekst

Kolor tekstu

Składnia reguły:

1. selektor {color: kolor;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Natomiast jako kolor należy podać definicję koloru.

Dzięki temu poleceniu można ustalić dowolny kolor tekstu.

Przykład:

do góry

Dekoracja tekstu

Składnia reguły:

1. selektor {text-decoration: dekoracja;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. dekoracja:
2. "none" - bez zmian
3. "underline" - podkreślenie
4. "line-through" - przekreślenie
5. "overline" - nadkreślenie
6. "blink" - migotanie tekstu (tylko Netscape/Mozilla/Opera)

Dzięki temu poleceniu można dodać do tekstu jeden z efektów dekoracyjnych. Migotanie może nie być interpretowane przez wszystkie przeglądarki!

Przykład:

do góry

Transformacja tekstu

Składnia reguły:

1. selektor {text-transform: transformacja;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. transformacja:
2. "none" - bez zmian
3. "capitalize" - zamiana pierwszych liter wszystkich wyrazów na wielkie
4. "uppercase" - zamiana wszystkich liter na wielkie
5. "lowercase" - zamiana wszystkich liter na małe

Dzięki temu poleceniu można dokonać zmian wielkości liter.

Przykład:

do góry

Wyrównanie tekstu

Składnia reguły:

1. selektor {text-align: wyrównanie;}

Wyraz selektor ma zastosowanie do elementów blokowych.

1. wyrównanie:
2. "left" - wyrównanie tekstu do lewego marginesu (domyślnie)
3. "right" - wyrównanie tekstu do prawego marginesu
4. "center" - wyśrodkowanie
5. "justify" - wyrównanie do obu marginesów jednocześnie (justowanie)

Dzięki temu poleceniu można dodać sposób wyrównania tekstu.

Przykład:

do góry

Wcięcie tekstu

Składnia reguły:

1. selektor {text-indent: wcięcie;}

Wyraz selektor ma zastosowanie do elementów blokowych.

1. wcięcie:
2. należy podać konkretną wielkość, używając jednostek miary:
3. piksele - px
4. punkty edytorskie - pt
5. wysokość litery "x" - ex
6. wysokość aktualnej czcionki - em
7. centymetry lub milimetry - cm, mm
8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
9. cale - in (1in=2.54cm)
10. procent wielkości nadrzędnej - %

Dzięki temu poleceniu można dodać dodatkowe wcięcie pierwszej linii tekstu w akapicie.

Przykład:

do góry

Odstęp między wierszami

Składnia reguły:

1. selektor {line-height: odstęp;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. odstęp:
2. należy podać konkretną wielkość, używając jednostek miary:
3. piksele - px
4. punkty edytorskie - pt
5. wysokość litery "x" - ex
6. wysokość aktualnej czcionki - em
7. centymetry lub milimetry - cm, mm
8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
9. cale - in (1in=2.54cm)
10. procent wielkości nadrzędnej -%
11. "normal" - przywraca wartość domyślną

Dzięki temu poleceniu można zmienić odstęp między liniami tekstu w danym bloku (np.: akapicie).

Przykład:

do góry

Odstęp między wyrazami

Składnia reguły:

1. selektor {word-spacing: odstęp;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. odstęp:
2. należy podać konkretną wielkość, używając jednostek miary:
3. piksele - px
4. punkty edytorskie - pt
5. wysokość litery "x" - ex
6. wysokość aktualnej czcionki - em
7. centymetry lub milimetry - cm, mm
8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
9. cale - in (1in=2.54cm)
10. "normal" - przywraca wartość domyślną

Dzięki temu poleceniu można zmienić odstęp między wyrazami tekstu w danym bloku (np.: akapicie).

Przykład:

do góry

Odstęp między literami

Składnia reguły:

1. selektor {letter-spacing: odstęp;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. odstęp:
2. należy podać konkretną wielkość, używając jednostek miary:
3. piksele - px
4. punkty edytorskie - pt
5. wysokość litery "x" - ex
6. wysokość aktualnej czcionki - em
7. centymetry lub milimetry - cm, mm
8. części dziesiętne centymetra pisane z kropką np.: 0.5cm
9. cale - in (1in=2.54cm)
10. "normal" - przywraca wartość domyślną

Dzięki temu poleceniu można zmienić odstęp między literami w wyrazach tekstu w danym bloku (np.: akapicie).

Przykład:

do góry

Łączenie własności czcionek i tekstu

Składnia reguły:

1. selektor {font: wartości atrybutów;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Jako wartości atrybutów wpisać należy zgodnie z podaną poniżej kolejnością, oddzielając spacjami, konkretne wartości, które opisują poszczególne atrybuty czcionek i tekstu. Można niektóre pominąć.

1. wartości atrybutów:
2. font-style
3. font-variant
4. font-weight
5. font-size
6. line-height
7. font-family

Dzięki temu poleceniu można w jednym miejscu zebrać atrybuty dotyczące czcionek i tekstu. Pomiędzy font-size, a line-height należy wstawić ukośnik (bezpośrednio przed line-height).

Przykład:

do góry

Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS czcionek i tekstu do sformatowania plików HTML. Zadanie polega na sformatowaniu dwóch plików HTML jednym, zewnętrznym plikiem CSS, w którym użyte będą wszystkie własności dotyczące czcionek i tekstu. W pliku plik_2.html zostanie dokonana również lokalna modyfikacja wewnątrzwierszowymi arkuszami stylów. Konieczne będzie także użycie klas selektorów.

1. Należy zacząć od przygotowania struktury folderów i plików:

1. foldery:
2. cw_12 - główny
3. pliki - zawarty w głównym
4. style - zawarty w głównym

1. pliki:
2. plik_1.html - w folderze pliki
3. plik_2.html - w folderze pliki
4. style.css - w folderze style

2. W obu plikach HTML należy umieścić taką samą treść:

1. zawartość plików HTML:
2. szablon HTML 4.01 Transitional
3. w sekcji <head>...</head>:
4. łącze do arkusza stylów - patrz tutaj
5. w znaczniku <title>...</title> nazwa pliku
6. w sekcji <body>...</body>:
7. jedna linia
8. napis: Menu nawigacyjne w znaczniku <p>...</p>
9. przypisać temu znacznikowi klasę: klasa_1
10. wzajemne łącza do plików - umieszczone w znaczniku <div>...</div>
11. przypisać temu znacznikowi klasę: klasa_2
12. jedna linia
13. nazwa pliku w znaczniku <p>...</p>
14. przypisać temu znacznikowi klasę: klasa_3
15. jedna wstawka Lorem w znaczniku <p>...</p>
16. przypisać temu znacznikowi klasę: klasa_4
17. środkowe zdanie tej wstawki w znaczniku <span>...</span>
18. przypisać temu znacznikowi klasę: klasa_5

Po wpisaniu całej zawartości pliki powinny wyglądać tak - bez żadnego formatowania:

Krok 1

3. W pliku CSS należy przygotować dla wszystkich pięciu klas, pięć różnych reguł formatujących czcionki i tekst, uwzględniających wszystkie ich właściwości.

1. zawartość pliku CSS:
2. klasa_1:
3. wielkość czcionki: 20px;
4. rodzaj czcionki: Verdana, Tahoma, Arial, Helvetica, sans-serif;
5. styl czcionki: normal;
6. waga czcionki: 100;
7. wariant czcionki: normal;
8. kolor tekstu: #0000ff; (blue)
9. dekoracja tekstu: overline;
10. transformacja tekstu: lowercase;
11. wyrównanie tekstu: center;
12. wcięcie tekstu: 20px;
13. odstęp między wierszami: 20px;
14. odstęp między wyrazami: 20px;
15. odstęp między literami: 20px;
17. klasa_2:
18. wielkość czcionki: 18px;
19. rodzaj czcionki: Arial, Verdana, Tahoma, Helvetica, sans-serif;
20. styl czcionki: normal;
21. waga czcionki: 300;
22. wariant czcionki: small-caps;
23. dekoracja tekstu: none;
24. transformacja tekstu: none;
25. wyrównanie tekstu: left;
26. wcięcie tekstu: 18px;
27. odstęp między wierszami: 18px;
28. odstęp między wyrazami: 18px;
29. odstęp między literami: 18px;
31. klasa_3:
32. wielkość czcionki: 16px;
33. rodzaj czcionki: 'Courier New', Courier, monospace;
34. styl czcionki: italic;
35. waga czcionki: 500;
36. wariant czcionki: normal;
37. kolor tekstu: #ff00ff; (fuchsia)
38. dekoracja tekstu: line-through;
39. transformacja tekstu: normal;
40. wyrównanie tekstu: right;
41. wcięcie tekstu: 16px;
42. odstęp między wierszami: 16px;
43. odstęp między wyrazami: 16px;
44. odstęp między literami: 16px;
46. klasa_4:
47. wielkość czcionki: 14px;
48. rodzaj czcionki: 'Times New Roman', Bodoni, serif;
49. styl czcionki: oblique;
50. waga czcionki: 700;
51. wariant czcionki: normal;
52. kolor tekstu: #ff0000; (red)
53. dekoracja tekstu: underline;
54. transformacja tekstu: capitalize;
55. wyrównanie tekstu: justify;
56. wcięcie tekstu: 14px;
57. odstęp między wierszami: 14px;
58. odstęp między wyrazami: 14px;
59. odstęp między literami: 14px;
61. klasa_5:
62. wielkość czcionki: 12px;
63. rodzaj czcionki: Helvetica, Verdana, Tahoma, Arial, sans-serif;
64. styl czcionki: italic;
65. waga czcionki: 900;
66. wariant czcionki: small-caps;
67. kolor tekstu: #008000; (green)
68. dekoracja tekstu: none;
69. transformacja tekstu: lowercase;
70. wyrównanie tekstu: right;
71. odstęp między wierszami: 12px;
72. odstęp między wyrazami: 12px;
73. odstęp między literami: 12px;

Efekt powinien być taki, że oba pliki HTML będą tak samo sformatowane. Wygląda to następująco:

Krok 2

4. W pliku: plik_2.html należy dokonać lokalnych wewnątrzwierszowych modyfikacji:

1. wewnątrzwierszowe modyfikacje w pliku: plik_2.html:
2. usunąć górną linię
3. w wyrażeniu Menu nawigacyjne pogrubić czcionkę do 900
4. i zmienić nadkreślenie na podkreślenie
5. odsyłacze wyrównać do prawej
6. zmniejszyć odstęp między literami w menu z odsyłaczami do 4px
7. zwiększyć czcionkę w nazwie pliku 300%
8. usunąć przekreślenie w nazwie pliku
9. i zmienić kolor na #00ff00; (lime)
10. w akapicie z tekstem zamienić kolory ze znacznikiem <span>...</span>
11. zwiększyć wcięcie do 2cm
12. zmienić dekorację na przekreślenie
13. zmienić czcionkę na Tahoma
14. zwiększyć odstęp między wierszami do 0.7cm
15. w znaczniku <span>...</span> zmienić wariant czcionki na normal
16. powiększyć czcionkę do 5mm
17. zwiększyć odstęp między wierszami do 1cm

Po zmianach plik plik_2.html powinien wyglądać tak:

Krok 3

Oceniany będzie folder cw_12 z dwoma podfolderami: pliki i style, w których zawarte będą odpowiednio pliki: w folderze pliki: plik_1.html, plik_2.html, a w folderze style plik: style.css. Pliki HTML powinny być sformatowane zgodnie z poleceniami za pomocą zewnętrznego arkusza stylów z pliku style.css. Formatowanie obejmuje czcionki i tekst - użyte są wszystkie własności formatowania tych dwóch elementów. Ponadto w pliku plik_2.html dokonana ma zostać lokalna wewnątrzwierszowa modyfikacja wyżej wspomnianych elementów.

Strona Główna

do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki