1 Temat 7: Tekst
2 Za zmianę wyglądu czcionki odpowiada znacznik … . W zależności od przyjętego atrybutu może formatować rozmiar, kolor i krój czcionki. … … … Najłatwiej pokazać to w praktyce. Zacznijmy od rozmiaru czcionki. Może on przyjmować wartości od 1 do 7 (1 – najmniejsza, 3 – domyślna, 7 – największa). Rozmiar pikseli
Rozmiar pikseli
Rozmiar pikseli
Rozmiar pikseli
Rozmiar pikseli
Rozmiar pikseli
Rozmiar pikseli
3 Zmianie możemy poddać również kolor czcionkiZmianie możemy poddać również kolor czcionki. HTML standardowo korzysta z 16 dostępnych predefiniowanych kolorów(patrz tabela). Dodatkowo istnieje możliwość wprowadzenia dowolnej barwy za pomocą liczby szesnastkowej, np. dla koloru brązowego - #A52A2A. W tym przypadku czerwony ma nasycenie A5 (165 w zapisie dziesiętnym), zielony 2A (42 w zapisie dziesiętnym) oraz niebieski 2A (42 w zapisie dziesiętnym). Wartości dziesiętne podanych barw przekładają się na model przestrzeni barw RGB. Stanowi on kombinację trzech kolorów (R – red – czerwony, G – green – zielony, B – blue – niebieski) o różnym stopniu nasycenia. Pozwala to na dobranie szerokiej palety barw. Nazwa argumentu Kolor Black czarny Green zielony White biały Olive oliwkowy Silver srebrny Lime limonowy Gray szary Purple purpurowy Navy granatowy Fuchsia fuksja Blue niebieski Maroon kasztanowy Yellow żółty Aqua akwamaryna Red czerwony Teal turkusowy
4 Tekst w kolorze oliwkowym Tekst w kolorze niebieskim. Tekst w kolorze oliwkowym. Tekst w kolorze czerwonym. Tekst w kolorze fuksji. Tekst w kolorze purpurowym. Tekst w kolorze #FF7F50
Tekst w kolorze limonowym
Tekst w kolorze purpurowym
Tekst w kolorze fuksji
Tekst w kolorze kasztanowym
Tekst w kolorze #FF7F50
W przypadku wystąpienia problemów z wyświetlaniem kolorów należy użyć polecenia style:
5 Atrybut face, kolejny atrybut znacznika font, pozwala na zmianę kroju czcionki. Dobierając odpowiedni krój, najlepiej wybrać taki, który jest rozpoznawalny przez wszystkie przeglądarki. Do zestawu takich krojów należ m.in.: Arial, Times New Roman, Verdana, Courier New, Tahoma, Georgia i Trebuchet MS. Należy pamiętać, że kilkuczłonowe nazwy krojów umieszczamy w pojedynczych apostrofach. Atrybut face może zawierać kilka wartości oddzielonych przecinkami. Jest to bardzo pomocne w przypadku, gdy przeglądarka nie zna pierwszego z wprowadzonych w tym atrybucie krojów. W takim przypadku tekst przyjmuje krój kolejny z rzędu. Jeżeli została wprowadzona tylko jedna wartość nierozpoznawalna przez przeglądarkę, tekst przyjmie krój domyślny. Czcionka – Arial
Czcionka – Times New Roman
Czcionka – Verdana
Czcionka – Courier New
Czcionka – Tahoma
Czcionka – Georgia
Czcionka – Trebuchet MS
6 HTML udostępnia zestaw kilku znaczników zmieniających format tekstuHTML udostępnia zestaw kilku znaczników zmieniających format tekstu. Znacznik … odpowiada za pogrubienie tekstu, znacznik … za pochylenie tekstu, zaś znacznik … podkreśla dany tekst. Znaczników tych można używać pojedynczo lub w grupie. Wprowadzając więcej niż jedno formatowanie, należy pamiętać, aby znaczniki nie przecinały się. Tekst bez formatowania
Tekst pogrubiony
Tekst pochylony
Tekst podkreślony
Tekst pogrubiony, pochylony i podkreślony
7 Znacznik … powoduje, że wyświetlany tekst jest przekreślony. Kolejny znacznik odpowiada za migotanie tekstu, nie jest on jednak rozpoznawany przez wszystkie przeglądarki, dlatego nie zaleca się jego stosowania. HTML umożliwia również wprowadzenie na stronie tekstu w postaci indeksu górnego … oraz indeksu dolnego … . Ciekawym przykładem formatowania tekstu jest znacznik …
- tekst preformatowany. Ma on kilka cech charakterystycznych. Przede wszystkim swoim wyglądem przypomina tekst pisany na maszynie. Jako jedyny wyświetla wszystkie białe znaki, przejścia do nowej linii oraz linie puste, które wprowadzono pomiędzy znacznikami.
8 Działanie wymienionych elementów przedstawia strona stworzona na podstawie: Tekst przekreślony
Indeks górny
Indeks dolny
Tekst preformatowany – wyświetla wszystkie białe znaki
Wszystkie puste linie oraz przejścia do nowej linii
9 Ćwiczenie Wykonaj stronę internetową na podstawie poniższego rysunku. W celu wyśrodkowania treści zaproszenia zastosuj znacznik