1 / 29

FORMATOWANIE TEKSTU, ZNAKI DRUKARSKIE, KOMENTARZE, LINIE POZIOME

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

saniya
Download Presentation

FORMATOWANIE TEKSTU, ZNAKI DRUKARSKIE, KOMENTARZE, LINIE POZIOME

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related