FORMATOWANIE TEKSTU, ZNAKI DRUKARSKIE, KOMENTARZE, LINIE POZIOME

1. FORMATOWANIE TEKSTU, ZNAKI DRUKARSKIE, KOMENTARZE, LINIE POZIOME OPRACOWAŁ : KONRAD MIGAŁA iz10015

2. FORMATOWANIE TEKSTU

3. Do formatowania tekstu użyjemy znacznika <p> </p> jest to znacznik który umożliwia utworzenie akapitu zakończonego jednym wierszem odstępu. Część tekstu nie mieszcząca się w oknie zostanie przesunięta do nowego wiersza3 np.: • <p> krótki tekst</p> Krótki tekst

4. <p bardzo dłuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuugi tekst ze nie mieści się w jednej liniiiiiiiiiii</p> bardzo dłuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuugi tekst ze nie mieści się w jednej liniiiiiiiiiii

5. Znacznik <br> powoduje przejście do nowej linii bez zakończenia akapitu. Bywa też stosowany w celu dodania linii odstępu w tekście lub między dowolnymi elementami strony4 np.: • <p bardzo dłuuuuuuuuuuuuu<br>uuuuuuuuuuuuuuuuuuuuuuuuuuugi tekst ze nie mieści się w jednej liniiiiiiiiiii</p> bardzo dłuuuuuuuuuuuuu uuuuuuuuuuuuuuuuuuuuuuuuuuugi tekst ze nie mieści się w jednej liniiiiiiiiiii

6. Najważniejsze znaczniki formatowania tekstu: <B> tekst</B> -pogrubiony tekst • <S> tekst</S>-przekreślony • tekst • <I> tekst</I>- pochylony tekst • <U> tekst </U>-podkreślony tekst • <CENTER >tekst </CENTER>- wycentrowany tekst • <DIV align=”right”> tekst </DIV>-wyrównany do prawej krawędzi tekst • <DIV align=”left”> tekst </DIV>- wyrównany do lewej krawędzi tekst • <SUB>tekst - wstawienie dolnego indeksu tekst • <SUP>tekst - wstawienie górnego indeksu tekst

7. Krój, rozmiar, kolor czcionki

8. Aby sformatować czcionkę stosujemy znacznik <FONT> </FONT> wraz z atrybutami oto one: face - krój czcionki np. Arial, Courier size – rozmiar czcionki color – kolor czcionki

9. <P>Czcionka standardowa<P><FONT SIZE=7>Czcionka największa czyli 7</FONT></P> Czcionka większa czyli 7 <P><FONT SIZE=3>Czcionka wielkości standardowej </FONT></P> • Czcionka wielkości standardowej

10. Można również zmienić kolor czcionki <P><FONT FACE=”Arial” COLOR=”CYAN”</FONT></P> CYAN <P><FONT FACE=”Times” COLOR=”MAGENTA”</FONT></P> MAGENTA

11. Tekst preformatowany

12. 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.5 <P><PRE>Tekst teksttekst tekst tekst</PRE> Tekst teksttekst tekst tekst

13. Nagłówek

14. Nagłówek służy do dzielenia tekstu na sekcje. W języku HTML wyróżniamy 6 znaczników od <h1> do <h6> Dlatego też im większy numer nagłówka tym mniejsza czcionka. • <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

15. Wpisując odpowiedni znacznik nagłówek można wyrównać: align=”left” – wyrównanie z lewej strony align=”right” – wyrównanie z prawej strony align=”center” wyrównanie do środka align=”justify” wyjustowanie

16. <h2align="left">Nagłówek wyrównany do lewego marginesu strony</h2> • Nagłówek wyrównany do lewego marginesu strony <h2align="center">Nagłówek który został wyrównany do środka strony</h2> • Nagłówek który został wyrównany do środka strony <h2align="right">Nagłówek wyrównany do prawego marginesu strony</h2> • Nagłówek wyrównany do prawego marginesu strony <h2align="justify">Nagłówek który został wyjustowany względem obydwu marginesów</h2> Nagłówek który został wyjustowany względem obydwu marginesów

17. Linia pozioma

18. Linie poziome podobnie jak i nagłówki stosowane są do podziału stron WWW na fragmenty. Wizualnie zwiększa to czytelność i przejrzystość dokumentu, a także ułatwia poruszanie się po nim. 7 Do wstawienia linii poziomej będzie nam służył pojedynczy znacznik <hr>. tekst znajduję się nad linią<hr>tekst znajduje się pod linią tekst znajduję się nad linią tekst znajduję się pod linią

19. Do znacznika <hr> możemy użyć następujących atrybutów, które będą miały wpływ na wygląd linii poziomej. Oto one: • size=”x” – odpowiada za grubość linii w pikselach, nie zastosowanie jego spowoduje że wyświetlenie linii o grubości zależnej od przeglądarki np.: <hr size="10"> linia o grubości 10

20. width=”x” – określa długość linii, można ją podawać w pikselach lub procentach np.: <hr width="100"> linia o długości 100 pikseli <hr width="50%"> linia o długości 50%

21. align=”left” – wyrównuje linię od lewej krawędzi <hr width="50%" align="left"> linia wyrównana do lewej • align=”right” – wyrównuję linię od prawej krawędzi <hr width="50%" align="right"> linia wyrównana do prawej • aling=”center” – centruje linię, aby odległości od prawej i lewej krawędzi były równe <hr width="50%" align="center"> linia wyrównana do środka

22. Znaki drukarskie

23. Czasem zachodzi konieczność stosowania znaków, które nie są dostępne wprost z klawiatury lub też nie można uzyskać ich wprost albowiem służą do budowania znacznika (np. < > ^ ) i przeglądarka mogłaby się je nieprawidłowo zinterpretować.8 Stosujemy wtedy kod znaków. Wyróżniamy kody nazwane i numerowane.

24. Kody nazwane: rozpoczynamy znakiem & (wpisujemy skrót nazwy znaku) kończymy ; np.: • &lt; oznacza < • &gt; oznacza > • &cicr oznacza ^ Kody numerowane: jest to numer, który należy wprowadzić jednakże poprzedzić go znakami & # a kończymy ; np. : • &#60; oznacza < • &#62; oznacza > • &#710; oznacza ^

25. Komentarz

26. 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.9 Znacznik komentarza <!-- -->, <!-- to jest komentarz -->

27. A. Tomaszewska – Adamek, Tworzenie stron WWW ilustrowany przewodnik, Gliwice 2007, wyd. Helion, str.70 • http://www.poradnik-webmastera.com/kursy/html/bloki.php • E. Mirecka, T. Chrzanowski, Wyszukiwanie selekcjonowanie i gromadzenie informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 136 • E. Mirecka, T. Chrzanowski Wyszukiwanie selekcjonowanie i gromadzenie informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 136 • http://www.poradnik-webmastera.com/kursy/html/bloki.php tekst preformatowany • E. Mirecka, T. Chrzanowski Wyszukiwanie selekcjonowanie i gromadzenie informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 137 • E. Mirecka, T. Chrzanowski Wyszukiwanie selekcjonowanie i gromadzenie informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 145 • http://www.poradnik-webmastera.com/kursy/html/bloki.php/ komentarz Przypisy

28. Bibliografia • http://www.il.pw.edu.pl/~vine/html/HTML04.htm • http://www.poradnik-webmastera.com/kursy/html/bloki.php • 3. E. Mirecka, T. Chrzanowski, Wyszukiwanie selekcjonowanie i gromadzenie informacji cz. 2, Warszawa 2003, wyd. WSPSA;

29. KONIEC