FORMATOWANIE TEKSTU, ZNAKI DRUKARSKIE, KOMENTARZE,

LINIE POZIOME

OPRACOWAŁ : KONRAD MIGAŁA iz10015

FORMATOWANIE TEKSTU

<p> krótki tekst</p>

Krótki tekst

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 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

<p bardzo dłuuuuuuuuuuuuu<br>uuuuuuuuuuuuuuuuuuuuuuuuuuugi tekst ze nie mieści się w jednej liniiiiiiiiiii</p>

bardzo dłuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuugi tekst ze nie mieści się w jednej liniiiiiiiiiii

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.:

<B> tekst</B> -pogrubionytekst

<S> tekst</S>-przekreślonytekst

<I> tekst</I>- pochylonytekst

<U> tekst </U>-podkreślony tekst

<CENTER >tekst </CENTER>- wycentrowany tekst

<DIV align=”right”> tekst </DIV>-wyrównany do prawej krawędzitekst

<DIV align=”left”> tekst </DIV>- wyrównany do lewej krawędzitekst

<SUB>tekst - wstawienie dolnego indeksutekst

<SUP>tekst - wstawienie górnego indeksu

tekst

Najważniejsze znaczniki formatowania tekstu:

Krój, rozmiar, kolor czcionki

Aby sformatować czcionkę stosujemy znacznik <FONT> </FONT> wraz z atrybutami oto one:

face - krój czcionki np. Arial, Couriersize – rozmiar czcionkicolor – kolor czcionki

<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

<P><FONT FACE=”Arial” COLOR=”CYAN”</FONT></P>

CYAN

<P><FONT FACE=”Times” COLOR=”MAGENTA”</FONT></P>

MAGENTA

Można również zmienić kolor czcionki

Tekst preformatowany

<P><PRE>Tekst tekst    tekst tekst tekst</PRE>

Tekst tekst    tekst tekst tekst

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

Nagłówek

•<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 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.

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

<h2 align="left">Nagłówek wyrównany do lewego marginesu strony</h2>

Nagłówek wyrównany do lewego marginesu strony

<h2 align="center">Nagłówek który został wyrównany do środka strony</h2>

Nagłówek który został wyrównany do środka strony

<h2 align="right">Nagłówek wyrównany do prawego marginesu strony</h2>

Nagłówek wyrównany do prawego marginesu strony

<h2 align="justify">Nagłówek który został wyjustowany względem obydwu marginesów</h2>

Nagłówek który został wyjustowany względem obydwu marginesów

Linia pozioma

tekst znajduję się nad linią<hr>tekst znajduje się pod linią

tekst znajduję się nad linią

tekst znajduję się pod linią

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>.

<hr size="10"> linia o grubości 10

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 width="100">linia o długości 100 pikseli

<hr width="50%">linia o długości 50%

width=”x” – określa długość linii, można ją podawać w pikselach lub procentach np.:

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

Znaki drukarskie

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.

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 ^

Komentarz

Znacznik komentarza

<!-- -->,

<!-- to jest 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.9

1. A. Tomaszewska – Adamek, Tworzenie stron WWW ilustrowany przewodnik, Gliwice 2007, wyd. Helion, str.70

2. http://www.poradnik-webmastera.com/kursy/html/bloki.php3. E. Mirecka, T. Chrzanowski, Wyszukiwanie selekcjonowanie i

gromadzenie informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 1364. E. Mirecka, T. Chrzanowski Wyszukiwanie selekcjonowanie i gromadzenie

informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 1365.http://www.poradnik-webmastera.com/kursy/html/bloki.php

tekst preformatowany6. E. Mirecka, T. Chrzanowski Wyszukiwanie selekcjonowanie i gromadzenie

informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 1377. E. Mirecka, T. Chrzanowski Wyszukiwanie selekcjonowanie i gromadzenie

informacji cz. 2, Warszawa 2003, wyd. WSPSA, str. 1458.http://www.poradnik-webmastera.com/kursy/html/bloki.php

/ komentarz

Przypisy

1. http://www.il.pw.edu.pl/~vine/html/HTML04.htm

2. http://www.poradnik-webmastera.com/kursy/html/bloki.php

Bibliografia

3. E. Mirecka, T. Chrzanowski, Wyszukiwanie selekcjonowanie i gromadzenie informacji cz. 2, Warszawa 2003, wyd. WSPSA;

KONIEC