Formatowanie bloków tekstu - HTML - Zmiana wyglądu czcionek
Podczas tworzenia tekstu na stronę internetową zazwyczaj zachodzi potrzeba podzielenia go na mniejsze fragmenty tekstu , czyli paragrafy. Wynika to z chęci podziału tego tekstu na bardziej zwarte bloki, z których każdy odnosi się np. do innego zagadnienia. Taki podział ułatwia późniejsze jego czytanie.
Innym elementem ułatwiającym lekturę dowolnego tekstu są nagłówki - zarówno nagłówki artykułów (czyli ich tytuły), ale także mniejsze nagłówki umieszczanie wewnątrz tekstu w celu zaznaczenia ważniejszych części tekstu.
Język HTML również daje możliwości formatowania tekstu o których pisałem powyżej, m.in. podziału tekstu na paragrafy i wstawiania nagłówków. Wszystko to można uzyskać stosując odpowiednie znaczniki. Oto one:
- Nagłówki - dostępnych jest sześć różnych nagłówków, różniących się wielkością czcionki. tworzy się je za pomocą znaczników od <h1> (największy) do <h6> (najmniejszy).
<h1>Nagłówek stopnia 1</h1> <h2>Nagłówek stopnia 2</h2> <h3>Nagłówek stopnia 3</h3> <h4>Nagłówek stopnia 4</h4> <h5>Nagłówek stopnia 5</h5> <h6>Nagłówek stopnia 6</h6>
Nagłówek stopnia 1
Nagłówek stopnia 2
Nagłówek stopnia 3
Nagłówek stopnia 4
Nagłówek stopnia 5
Nagłówek stopnia 6
Nagłówek można także wyrównywać za pomocą parametrualign, przypisując mu wartościleft(wyrównanie do lewej),center(wyrównanie do środka),right(wyrównanie do prawej strony) ijustify(tekst wyjustowany). Atrybut ten nie jest zalecany - zamiast niego powinno się stosować polecenie kaskadowych arkuszy stylów CSStext-align.
<h2 align="left">Nagłówek wyrównany do lewego marginesu strony</h2> <h2 align="center">Nagłówek który został wyrównany do środka strony</h2> <h2 align="right">Nagłówek wyrównany do prawego marginesu strony</h2> <h2 align="justify">Nagłówek który został wyjustowany względem obydwu marginesów</h2>
<h2 style="text-align: left">Nagłówek wyrównany do lewego marginesu strony</h2> <h2 style="text-align: center">Nagłówek który został wyrównany do środka strony</h2> <h2 style="text-align: right">Nagłówek wyrównany do prawego marginesu strony</h2> <h2 style="text-align: justify">Nagłówek który został wyjustowany względem obydwu marginesów</h2>
Nagłówek wyrównany do lewego marginesu strony
Nagłówek który został wyrównany do środka strony
Nagłówek wyrównany do prawego marginesu strony
Nagłówek który został wyjustowany względem obydwu marginesów
Dla nagłówka (oraz także dla bardzo wielu innych znaczników) można także przypisać dodatkowy tekst, który zostanie przez przeglądarkę wyświetlony gdy kursor myszki na dłużej się nad nim zatrzyma (tzw. tooltip - tekst pomocniczy). Służy do tego parametrtitle
<h3 title="To jest właśnie opis który może się pokazać jako dodatkowe wyjaśnienie">Zatrzymaj tu kursor myszki</h3>
Zatrzymaj tu kursor myszki
- Paragrafy - definiuje się je za pomocą znacznika <p>. Znacznik ten posiada także parametry które zostały wymienione powyżej przy opisywaniu znaczników definiujących nagłówki, czyli
alignititle. Odnoszą się do nich także te same uwagi.
<p>Paragraf pierwszy</p> <p title="Pomocniczy opis">Paragraf drugi, posiada opis pokazujący się gdy kursor myszki zatrzyma się nad nim</p> <p align="center">Paragraf trzeci, który jest wycentrowany</p>
<p>Paragraf pierwszy</p> <p title="Pomocniczy opis">Paragraf drugi, posiada opis pokazujący się gdy kursor myszki zatrzyma się nad nim</p> <p style="text-align: center">Paragraf trzeci, który jest wycentrowany</p>
Paragraf pierwszy
Paragraf drugi, posiada opis pokazujący się gdy kursor myszki zatrzyma się nad nim
Paragraf trzeci, który jest wycentrowany
- Wymuszenie przełamania wiersza (przejście do nowej linii) - służy do tego znacznik <br>. Jak to widać z powyższego przykładu, pomiędzy paragrafami wstawiana jest dodatkowa pusta linia rozdzielająca. Aby jej uniknąć, należy zastosować ten znacznik. Pamiętaj jednak że stosowanie tego znacznika do podziału tekstu na wiersze nie jest jego prawidłowym zastosowaniem - w tym celu należy stosować pokazany wcześniej znacznik <p> (no chyba że chcesz opublikować na swojej stronie internetowej wiersz - wtedy jego zastosowanie jest jak najbardziej uzasadnione).
Znacznik ten jest też jednym ze znaczników które w HTML nie mają znacznika zamykającego, dlatego pisząc swoją stronę w XHTML musisz pamiętać o jego zamknięciu (pierwszy przykład w HTML, drugi w XHTML):
<p>Paragraf, który tutaj<br>został przełamany po raz pierwszy, a tutaj<br>po raz kolejny</p>
<p>Paragraf, który tutaj<br />został przełamany po raz pierwszy, a tutaj<br />po raz kolejny</p>
Paragraf, który tutaj
został przełamany po raz pierwszy,
a tutaj
po raz kolejny
- Centrowanie - można wykonać za pomocą znacznika <center>. Znacznik ten nie jest zalecany - zamiast niego powinno się stosować wymienione już wcześniej polecenie kaskadowych arkuszy stylów CSS
text-align.
<center>Ten tekst jest wycentrowany</center>
- Tekst preformatowany - uzyskuje się go za pomocą znacznika <pre>. W obrębie takiego bloku tekst pisany jest czcionką o stałej szerokości znaku, uwzględniane są także przy wyświetlaniu wszelkie spacje, tabulatory i znaki nowej linii.
<pre>Tu wstawię cztery spacje, i Enter na końcu Tu jest tabulator A tu dwa tabulatory Poniżej jest prosta tabelka 1 2 3 11 22 33 1 23 4</pre>
Tu wstawię cztery spacje, i Enter na końcu Tu jest tabulator A tu dwa tabulatory Poniżej jest prosta tabelka 1 2 3 11 22 33 1 23 4
- Cytat - do stworzenia większego bloku zawierającego cytat, służy znacznik <blockquote>. Tak stworzony cytat jest odsunięty nieco od lewego brzegu dokumentu. Do rozdzielania kolejnych linii (np. w wierszu) należy stosować znacznik
<br>.
<blockquote><div>To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu<br>wstawiony zostanie znacznik przejścia do nowej linii</div></blockquote>
To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu
wstawiony zostanie znacznik przejścia do nowej linii
Uwaga: Używanie tego znacznika wyłącznie do tworzenia wcięć nie jest zalecane. Zamiast niego wskazane jest ustawienie lewego marginesu za pomocą odpowiedniego polecenia kaskadowych arkuszy stylów CSS:
<div style="margin-left: 30px">To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu<br>wstawiony zostanie znacznik przejścia do nowej linii</div>
To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej linii i będzie musiał być kontynuowany w kolejnej, a tu
wstawiony zostanie znacznik przejścia do nowej linii
- Adres - do wstawienia bloku zawierającego adres można użyć znacznika <address>
<address>Jan Trawka<br>ul. Błotna 12/34<br>56-789 Bagienko Mniejsze</address>
Jan Trawka
ul. Błotna 12/34
56-789 Bagienko Mniejsze - Obramowanie - do stworzenia ramki otaczającej np. tekst służy znacznik <fieldset>
<fieldset>Ten napis znajduje się w ramce</fieldset>
To jednak nie wszystko co oferuje ten znacznik - jeżeli wewnątrz niego wstawiony zostanie znacznik <legend>, to ramka będzie posiadała tytuł. Taką ramkę można użyć np. do zgrupowania przycisków radiowych w formularzu (jest to opisane w lekcji poświęconej formularzom).
<fieldset><legend>Tytuł</legend>Tekst w ramce z tytułem</fieldset>
- Pozioma linia - wstawia się ją za pomocą znacznika <hr>
tekst nad linią<hr>tekst pod linią
tekst nad linią
tekst pod linią
Za pomocą parametrów tego znacznika można uzyskać następujące efekty:
- usunąć "cień", za pomocą parametru
noshade. Ten atrybut nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<hr noshade>
<hr style="border-bottom: solid 1px gray" />
- zmienić grubość linii za pomocą parametru
size. Ten atrybut też nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
linia o grubości 10<hr size="10">
linia o grubości 10<hr style="height: 10px">
linia o grubości 10 - zmienić długości linii - odpowiednią wartość należy podać w pikselach lub w procentach, jako wartość parametru
width. Jest to kolejny atrybut który nie jest zalecany, zamiast którego się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
linia o długości 100 pikseli<hr width="100"> linia o długości 50%<hr width="50%">
linia o długości 100 pikseli<hr style="width: 100px"> linia o długości 50%<hr style="width: 50%">
linia o długości 100 pikseli
linia o długości 50% - wyrównać linię do jednego z brzegów lub do środka, za pomocą parametru
align. Dozwolone są wartości:left(wyrównanie do lewej strony),center(wyrównanie do środka) iright(wyrównanie do prawej strony). Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
linia wyrównana do lewej <hr width="50%" align="left"> linia wyrównana do środka <hr width="50%" align="center"> linia wyrównana do prawej <hr width="50%" align="right">
linia wyrównana do lewej <hr style="width: 50%; text-align: left; margin-left: 0"> linia wyrównana do środka <hr style="width: 50%; text-align: center; margin-left: auto; margin-right: auto"> linia wyrównana do prawej <hr style="width: 50%; text-align: right; margin-right: 0">
linia wyrównana do lewej
linia wyrównana do środka
linia wyrównana do prawej
- usunąć "cień", za pomocą parametru
- Element grupujący blokowy - czyli znacznik <div>. Został wprowadzony przede wszystkim aby umożliwić łatwe zastosowanie kaskadowego arkusza stylów w stosunku do określonej grupy znaczników HTML (zostanie to omówione w osobnym kursie), ale można go także użyć go pozycjonowania elementów poprzez wykorzystanie parametru
alignz wartościamileft,centeriright. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<div align="right"> <p>Pierwszy paragraf wyrównany do prawej</p> <p>Drugi paragraf wyrównany do prawej</p> </div>
<div style="text-align: right"> <p>Pierwszy paragraf wyrównany do prawej</p> <p>Drugi paragraf wyrównany do prawej</p> </div>
- Komentarz - w pewnych sytuacjach chcielibyśmy wstawić komentarz do pliku HTML, aby np. oznaczyć pewne miejsca (jak np. miejsce od którego zaczyna się menu czy właściwa treść strony), lub też "wyłączyć" pewne fragmenty kodu, które tymczasowo nie są potrzebne. Służy do tego znacznik
<!-- -->, w obrębie którego wstawia się komentarz.
<!-- to jest komentarz -->
Brak komentarzy:
Prześlij komentarz