Pomoc - Zarządzanie informacją
Spis paragrafów >>
Elementy formatowania tekstu… i nie tylko
<< Powrót
<< Poprzedni Następny >>
86.5. Elementy formatowania tekstu… i nie tylko
Format tekstu określony jest w arkuszu stylów. Są w nim zapisane wszystkie reguły dla danego wyglądu strony i zawartego w niej tekstu. Określono tam między innymi ogólny wygląd strony, wygląd tekstu podstawowego, tytułów, podtytułów, odnośników.
Jednymi ze znaczników, których możesz użyć do formatowania tekstu, są:
<h1>…</h1>, <h2>…</h2>, …, <h6>…</h6>. Określają one wygląd nagłówków i ich ważność w hierarchii dokumentu. Poniżej pokazujemy kod pliku i wygląd nagłówków w przeglądarce.
| Fragment kodu pliku | bez użycia css | style.css | style2.css |
<body> |
 |
|
|
| <h1>Tytuł 1</h1> |  |
Tytuł 1 |
 |
| <h2>Tytuł 2</h2> |  |
Tytuł 2 |
 |
| <h3>Tytuł 3</h3> |  |
Tytuł 3 |
 |
| <h4>Tytuł 4</h4> |  |
Tytuł 4 |
 |
| <h5>Tytuł 5</h5> |  |
Tytuł 5 |
 |
| <h6>Tytuł 6</h6> |  |
Tytuł 6 |
 |
| </body> | |
|
|
Odnośniki do plików => |
[odnośnik]>> |
[odnośnik]>> |
[odnośnik]>> |
Jak widać na przykładzie, znacznik pobiera z pliku css informację o sposobie formatowania tekstu i przedstawia go na ekranie w określonej formie. Określone są rodzaj czcionki, wielkość liter, kolor, wyrównanie i inne atrybuty wyglądu.
Większość informacji o wyglądzie tekstu przekazują znaczniki <div>...</div>. Przykład poniżej pokazuje znacznik „ustawiający” z lewej strony menu z linkami do innych plików html. Wszystkie elementy wyglądu są zapisane w pliku *.css.
| Kod pliku | style.css | style2.css |
|
<div id="menu"> <ul> <li><a href= "index.html">Strona główna</a></li> <li><a href= "o_mnie.html">O mnie</a></li> <li><a href= "moja_szkola.html">Moja szkoła</a> <ul> <li><a href= "moja_klasa.html">Moja klasa</a></li> <li><a href= "plan_lekcji.html">Plan lekcji</a></li> </ul> </li> <li><a href= "moje_hobby.html">Moje hobby</a></li> <li><a href= "kontakt.html">Kontakt</a></li> <li><a href= "linki.html">Linki</a></li> </ul> </div> |
 |
 |
| Odnośniki do plików => | [odnośnik]>> | [odnośnik]>> |
Widzimy tu parę znaczników <div id="menu">…>/div>. Wartość "menu" dla parametru id jest ustalona w pliku *.css.
Umieszczenie w pliku tego samego kodu nieodnoszącego się do arkusza stylów przedstawia następujący widok.
| Kod pliku bez odniesienia do *.css | Obraz w przegladarce |
|
<ul> <li><a href= "index.html">Strona główna</a></li> <li><a href= "o_mnie.html">O mnie</a></li> <li><a href= "moja_szkola.html">Moja szkoła</a> <ul> <li><a href= "moja_klasa.html">Moja klasa</a></li> <li><a href= "plan_lekcji.html">Plan lekcji</a></li> </ul> </li> <li><a href= "moje_hobby.html">Moje hobby</a></li> <li><a href= "kontakt.html">Kontakt</a></li> <li><a href= "linki.html">Linki</a></li> </ul> |
 |
| Odnośnik do pliku => | [odnośnik]>> |
Wyrównanie tekstu
W HTML do ustawienia wyrównania tekstu służą odpowiednie atrybuty w znacznikach. W XHTML to należy do domeny stylów. W omawianym szablonie element określający wyrównanie tekstu jest wprowadzany jako atrybut w znaczniku <div></div> lub <p></p>.
Dla znajdujących się na płycie szablonów pary znaczników określają:
-
<div id="main">…</div> – wygląd całego dokumentu;
-
<div id="content">...</div> – wygląd części przeznaczonej na treść, obok menu. Tekst objęty znacznikiem jest wyrównany do lewej. Jednocześnie w tym obszarze określone są kolor tła, rodzaj i wielkość czcionek, szerokość pola, w którym piszemy, i inne elementy;
-
<br /> – koniec wiersza. Ten znacznik nie wymaga zakończenia. Stosujemy go w obrębie dłuższego tekstu, który musimy podzielić. Odpowiada skrótowi Shift + Enter w edytorze tekstu. Częściej jednak stosujemy znacznik <div> </div>;
-
<p> </p> – wygląd jednego akapitu. Użyty z parametrami ustala jego wyrównanie i inne elementy wyglądu.
O wyglądzie tekstu w zasadzie powinny decydować style. Część znaczników pozostała w użyciu tak w XHTML, jak i w HTML. Poniżej kilka przykładów ich zastosowania.
| <b>Tekst pogrubiony</b><br /> | Tekst pogrubiony |
| <big>Tekst powiększony</big><br /> | Tekst powiększony |
| <strong>Tekst mocno wytłuszczony</strong><br /> | Tekst mocno wytłuszczony |
| <i>Tekst pochylony</i><br /> | Tekst pochylony |
| <em>Tekst pochylony</em><br /> | Tekst pochylony |
| Tekst pisany <sub>w indeksie dolnym</sub><br /> | Tekst pisany w indeksie dolnym |
| Tekst pisany <sup>w indeksie górnym</sup><br /> | Tekst pisany w indeksie górnym |
| Tekst <small>pomniejszony</small><br /> | Tekst pomniejszony |
| Tekst <s>przekreślony</s><br /> | Tekst |
| Tekst <u>podkreślony</u><br /> | Tekst powiększony |
Odnośniki do plików => |
[odnośnik]>> |
- Przykładowe pliki >>
Kurs XHTML na CD – formatowanie tekstu – [odnośnik1]>>
– wyrównanie tekstu – [odnośnik2]>>
Przykładowe pliki do tego paragrafu znajdują się w folderze pliki_przykladowe. Są to:
- formatowanie_tekstu.html - [odnośnik]>>;
- menu.html - [odnośnik]>>;
- wyrownania.html - [odnośnik]>>;
- tytuly.html - [odnośnik]>>;
- kartka_xhtml1.html - [odnośnik]>>;
- kartka_xhtml2.html - [odnośnik]>>;
- i inne.
Aby zaobserwować zmiany zachodzące przy zamienianiu plików style.css, trzeba folder umieścić na twardym dysku komputera i odpowiednio w folderze css zamieniać pliki style.css. Można też w przykładowych plikach zmieniać wpis dotyczący stylu.
<< Powrót [Do góry]