Wykład nr 1

Wprowadzenie do języka
znaczników HTML
Historia HTML
HTML (ang. HyperText Markup Language, hipertekstowy język
znaczników) to język składający się ze znaczników (ang.
tags) stosowany do pisania stron WWW. HTML jest
teoretycznie aplikacją SGML-a.
Jego pierwsza wersja została opracowana przez Tima BernersLee w 1989 roku, który w tym czasie był konsultantem do
spraw oprogramowania pracującym dla CERN (franc. Conseil
Européen pour la Recherche Nucléaire, czyli Europejski
Ośrodek Badań Jądrowych) . Pierwotnie składał się on z
kilkunastu znaczników umożliwiających wyświetlanie tekstu
wraz z odsyłaczami do innych tekstów. Rewolucyjność
pomysłu polegała na tym, że użytkownik przeskakujący do
innego tekstu nie musiał w ogóle wiedzieć gdzie fizycznie
znajduje się interesujący go tekst. Była to tzw. zerowa wersja
HTML.
WWW
World Wide Web (w skrócie określany jako WWW lub Web)
jest hipertekstowym, multimedialnym, sieciowym (TCP/IP)
systemem informacyjnym opartym na publicznie dostępnych,
otwartych standardach IETF, W3C i ISO. Pierwotnym i w
chwili obecnej nadal podstawowym zadaniem WWW jest
publikowanie informacji.
Aby uzyskać dostęp do tak udostępnianej informacji, trzeba
posłużyć się programem komputerowym, który nazywamy
przeglądarką internetową. Przeglądarka łączy się z serwerem
internetowym, skąd pobiera pewien zbiór informacji określany
jako strona internetowa. Strona internetowa może zostać
wyświetlona, zapisana w lokalnym systemie plików czy
wydrukowana.
WWW
Zawartość strony internetowej jest hipertekstem, znaczy to, że
użytkownik oglądając stronę internetową może podążać za
hiperłączami, które przenoszą go do innych stron
internetowych w ramach tego samego serwera internetowego
lub innych dostępnych w ramach sieci. Często korzystanie z
WWW nazywa się "surfowaniem po sieci".
World Wide Web został zapoczątkowany na początku lat
dziewięćdziesiątych w CERN jako system dostępu do danych,
informacji (w tym graficznych) w heterogenicznym
środowisku dużej organizacji naukowej.
Tim Berners-Lee, nazywany twórcą WWW, zbudował prototyp
systemu, który później został przekształcony w to czym
WWW jest dzisiaj. Szybko przekroczył (podobnie jak Internet)
granice środowiska naukowego, a po kilku latach został
zaadaptowany na całym świecie.
Standard Generalized Markup
Language
SGML (ang. Standard Generalized Markup Language) to
zestandaryzowany nadrzędny język znaczników służący do
ujednolicania struktury i formatu różnego typu informacji
(danych), pozwalający zapisać je w formie dokumentu
tekstowego i dzięki temu łatwo przenosić, wyświetlać i
drukować w różnych systemach elektronicznego przekazu
danych.
SGML w odróżnieniu od języków znaczników dedykowanych do
konkretnych zastosowań (takich jak np. HTML), nie jest
zbiorem określonych znaczników i reguł ich użytkowania, lecz
ogólnym, nadrzędnym językiem służącym do definiowania
dowolnych znaczników i ustalania zasad ich poprawnego
użytkowania.
Standard Generalized Markup
Language
Języka SGML używa się praktycznie do dwóch celów:
precyzyjnego definiowania zbiorów znaczników dedykowanych
do konkretnych zastosowań – przykładem jest język HTML;
ujednolicania zasad pisania i przekazywania dokumentów
tekstowych w obrębie dużych firm lub instytucji.
W obydwu przypadkach dokument w języku SGML składa się z
trzech części:
• deklaracji dokumentu, która definiuje ogólne reguły stosowane
w zapisie dokumentu (np. maksymalna długość nazwy
elementu, znak używany jako początek znacznika (domyślnie
jest to znak < );
• DTD – definicji typu dokumentu, czyli definicji wszystkich
znaczników i reguł ich stosowania;
• właściwego dokumentu – tekst wraz ze znacznikami.
Standard Generalized Markup
Language
Ze względu na złożoność standardu SGML bardzo mało narzędzi
implementuje pełen standard. Zwykle edytory SGML
obsługują większość powszechnie używanych elementów
języka i interpretują jedynie część pliku deklaracyjnego. W
związku z trudnościami implementacyjnymi powstał język i
standard XML będący początkowo podzbiorem reguł SGML
(pierwsza wersja powstała w 2000 roku). Standard XML
można obsługiwać narzędziami SGML-owymi modyfikując
odpowiednio plik deklaracyjny.
Ponieważ w praktyce zarówno deklaracja dokumentu SGML jak i
DTD "zaszyte" są najczęściej w oprogramowaniu (np. w
przypadku języka HTML w przeglądarkach i programach do
pisania stron WWW), użytkownicy końcowi, a nawet osoby
przygotowujące na co dzień dokumenty, nie mają
bezpośredniej styczności z DTD tej odmiany języka SGML, z
której właśnie korzystają.
Dobra strona
1.
2.
3.
Zastanów się dobrze nad tematyką swojej strony. Nie zapominaj, że wiele
osób łączy się z Internetem za pomocą modemu, płacąc za każdą minutę
spędzoną w sieci.
Uważaj z doborem kolorów na stronie, zwłaszcza jeśli chodzi o
tło oraz tekst. Nieciekawe lub rażąco złe zestawienie barw jest
najważniejszym czynnikiem, który zdradza, że autor serwisu jest
kompletnym amatorem. Unikaj jak ognia jaskrawych odcieni w tle. Jeśli
nie masz pomysłu, ustal białe tło i czarny tekst - tak jest najbezpieczniej.
Dobre rezultaty dają również barwy całkiem ciemne lub delikatne
pastelowe (jasne). Tło w żadnym razie nie może pogarszać czytelności
strony, dlatego należy pamiętać o doborze odpowiedniego koloru tekstu.
Nie przesadzaj z grafiką. Pamiętaj, że to właśnie grafika najbardziej
wpływa na szybkość ładowania strony, dlatego ogranicz jej ilość oraz
rozmiary. Jeśli już musisz coś umieścić, postaraj się, aby było to
naprawdę dobrej jakości. Tworząc samodzielnie obrazy, używaj
antialiasingu, czyli wygładzania poszarpanych krawędzi. Cechą po której
na pierwszy rzut oka można rozpoznać dobrego projektanta jest
oszczędne i umiejętne operowanie grafiką, która dobrze komponuje się z
wyglądem strony.
Dobra strona
4. Przyjrzyj się innym renomowanym witrynom. Zwróć uwagę na projekt szaty
graficznej. Dużo nie zawsze znaczy dobrze. Czasem bardziej oszczędna forma
wygląda lepiej - a przede wszystkim czytelniej - niż wyszukane ozdobniki.
Najważniejszy jest dobry pomysł. Pamiętaj, że kolorystyka witryny oraz
projekt oprawy graficznej to pierwsze rzeczy, na które zwracają uwagę
użytkownicy. Większość dobrych stron w Internecie zbudowana jest
następująco: na górze znajduje się banner lub logo serwisu, po lewej lub po
prawej - menu, a obok - treść strony.
Tutaj można umieścić logo serwisu
Tu umieszcza się
odsyłacze
spisu treści
Tu wpisuje się treść strony
Dobra strona
5. Nawigacja w serwisie to bardzo ważna sprawa. Nieczytelny układ strony,
menu w którym trudno cokolwiek znaleźć i inne podobne historie są częstą
przyczyną zniechęcenia użytkowników, którzy w konsekwencji opuszczają
witrynę. Przy projektowaniu systemu odsyłaczy spróbuj wczuć się w sposób
myślenia internautów. Pamiętaj, że nie znają oni serwisu tak dobrze jak Ty i
mogą nie chcieć zagłębiać się w szczegóły. Dlatego warto w widocznym miejscu
umieścić hiperłącza do najciekawszych działów, jakiś system wyszukiwania lub
indeks. W przypadku obszerniejszych witryn wskazane jest podzielenie ich na
działy tematyczne. Sposób nawigacji powinien być przede wszystkim wygodny,
praktyczny, logiczny i łatwo dostępny.
6. Dbaj o poprawność ortograficzną i stylistyczną tekstu. Naucz się zasad
wpisywania znaków interpunkcyjnych.
7. Postaraj się na bieżąco aktualizować treść strony i usuwać powstałe błędy.
Udoskonalaj oprawę graficzną oraz system nawigacji, aby serwis nie stał się
nudny. Informuj o wprowadzanych nowościach i utrzymuj kontakt listowny z
użytkownikami. Otwórz się na konstruktywną krytykę.
Struktura dokumentu
Dokument HTML jest zwykłym dokumentem tekstowym
o ustalonym kodowaniu znaków składającym się
z elementów/tagów/znaczników.
Element zwykle składa się z trzech części:
• znacznika początkowego (w formie <znacznik>)
• zawartości elementu (tekst lub inne elementy)
• znacznika końcowego (w formie </znacznik>)
Struktura dokumentu
Elementy mogą też mieć przypisane atrybuty precyzujące
znaczenie danego elementu. Atrybuty wraz z ich wartościami
wpisuje się wewnątrz znacznika początkowego (<znacznik
atrybut="wartość">). Niektóre elementy nie muszą, a niektóre
wręcz nie mogą posiadać znacznika końcowego (np. element
br służący do rozpoczęcia nowego wiersza tekstu).
Element główny każdego dokumentu HTML jest html. Element
główny zawiera dwa kolejne elementy: head (nagłówek
dokumentu) i body (zasadnicza treść dokumentu).
Element head zawiera tytuł strony oraz informacje dodatkowe
niewidoczne w dokumencie, takie jak autor, data, słowa
kluczowe, itp. Wewnątrz elementu body zawarte są wszystkie
pozostałe elementy, mogące zawierać tekst, wstawiać grafikę,
itp. Na początku dokumentu, poza elementem html powinna
się jeszcze znaleźć informacja o zastosowanym typie
dokumentu, wskazująca użytą wersję HTML.
Struktura dokumentu
<HTML>
<HEAD>
Nagłówek
</HEAD>
<BODY>
Zasadnicza treść dokumentu
</BODY>
</HTML>
Co jest potrzebne, żeby napisać
stronę internetową?
Teoretycznie może to być dowolny edytor
tekstu, no i oczywiście dobre chęci. Dokument
HTML jest po prostu plikiem tekstowym,
gdzie wpisujemy wszystkie polecenia,
dotyczące formatowania tekstu, wstawiania
grafiki i inne. Lecz pisanie strony w zwykłym
edytorze tekstu, byłoby bardzo uciążliwe.
Dlatego powstało wiele wyspecjalizowanych
edytorów, które ułatwią, przyspieszą i
uprzyjemnią Twoją pracę.
Edytory Windows
•
•
•
•
•
•
•
•
•
•
•
•
•
Pajączek (shareware - płatny),
CoreEditor (płatny - dostępna wersja DEMO),
Ager Web Edytor (darmowy),
EdHTML (darmowy),
Edytor Znaczników HTML
ezHTML (darmowy),
Extra Page (darmowy),
HateML Pro (darmowy),
kED (darmowy),
Kicia (darmowy),
SPad (darmowy),
WebSite PRO (darmowy),
Zajączek (darmowy).
Pajączek (shareware - płatny)
Najbardziej znany polski edytor HTML rozwijany od
lat. Oferuje szerokie wsparcie dla najnowszych
technologii internetowych, z których warto wymienić
takie jak HTML, XHTML, XML, PHP, JavaScript,
VBScript, Perl, MathML, SVG, SMIL, P3P, ASP i
inne. Wsparcie to dotyczy nie tylko ułatwionej edycji
plików źródłowych w tych językach - program
oferuje bowiem kontekstową dokumentację dla
wybranego polecenia języka, przeglądanie za pomocą
serwera czy funkcję dynamicznego kodu, która
uwalnia od konieczności pamiętania poleceń języka.
EdHTML (darmowy),
Uniwersalny edytor do HTMLa. Wspiera również
XHTML, CSS, JavaScript i PHP. Bardzo dobrze
koloruje składnię, pozwala na proste testowanie stron
we wbudowanych przeglądarkach, pozwala także na
testowanie skryptów PHP nie wychodząc z programu.
Program zawiera wiele wbudowanych narzędzi, np.
kompresor HTML, konwerter polskich znaków itp.
Dzięki szablonom i rozbudowanej pomocy pomaga
początkującym webmasterom.
Edytor Znaczników HTML
Dostęp do wszystkich możliwości języka HTML dają
zakładki - pomieszczone na nich zostały wszystkie
istotne znaczniki. Można także skorzystać z listy
znaczników zawierającej wszystkie tagi standardu
HTML 4.0. Wiele czynności automatyzują
"czarodzieje" i inne kreatory. Warto także zwrócić
uwagę na konfigurowalny interfejs (pasek
użytkownika, na który można przenieść najczęściej
używane polecenia), edytor kolorujący znaczniki oraz
inne drobne ułatwienia (np. powtórne wstawienie
ostatnio użytego znacznika, podpowiedzi składniowe,
automatyczne zamykanie znaczników).
Zajączek (darmowy)
Dzięki pracy z programem wykorzystanie
technologii takich jak PHP, JS, VBS, CSS,
XML, SQL stanie się prostsze, a szablony i
kreatory przyspieszą pracę nad większymi
serwisami. Program umożliwia również
tworzenie
rozbudowanych
graficznie
diagramów tworzonych dokumentów.
Edytory
• Linux:
– Bluefish (darmowy),
– gedit (darmowy),
– Kate (darmowy),
– Quanta Plus (darmowy),
– SCREEM - Site CRreation and Editing EnvironMent
(darmowy).
• Mac OS X:
– Bluefish (darmowy),
– Smultron (darmowy),
– Taco HTML Edit (darmowy).
Edytory Graficzne
Istnieją również edytory graficzne, tzw. WYSIWYG (ang. What
You See Is What You Get, czyli To Co Widzisz Jest Tym Co
Otrzymasz). Jest nim choćby FrontPage dostępny w pakiecie
biurowym Microsoft Office. Aby się nimi posługiwać, nie
musisz wcale znać języka HTML, ponieważ stronę tworzy się
w nich jak w zwykłym edytorze tekstu, a cały kod HTML
generuje automatycznie program.
Ale nie ma nic za darmo. Takie edytory nie dają Ci pełnej
kontroli nad zawartością strony. Możesz korzystać z bogatych
narzędzi, lecz czasami nauka wszystkich możliwości takiego
edytora, może zabrać więcej czasu, niż nauka podstaw HTML.
Dodatkowo generują "nadmiarowy" kod, co zwiększa objętość
strony oraz powoduje, że bardzo trudno ją później
modyfikować przy użyciu edytorów tekstowych. Poza tym
istnieją przypadki, w których znajomość choćby podstaw
HTML jest wprost niezbędna.
Microsoft FrontPage
POLSKIE ZNAKI
Przed rozpoczęciem pracy, musisz zaopatrzyć się w czcionki,
które pozwolą Ci uzyskać polskie znaki ("ogonki"). Powinny
to być koniecznie czcionki w standardzie ISO-8859-2. Jest to
powszechnie przyjęty i stosowany w polskim Internecie
standard kodowania znaków.
Jeśli chcesz używać obcojęzycznego edytora w Windows, który
nie potrafi prawidłowo zapisywać polskich znaków w
standardzie ISO, przejdź na Polską Stronę Windowsową, a
następnie na podstronę: "Klawiatura ISO-8859-2". Można tam
pobrać darmową klawiaturę Izy Kibord (dla systemu Windows
95/98/Me lub NT4/2000/XP) oraz czcionkę PolskieStrony
2000.
POLSKIE ZNAKI
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-2">
<title>PWSBiTK</title>
</head>
<body>
</body>
</html>
Układ strony
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<META NAME="Description" CONTENT="Tu wpisz opis zawartości strony">
<META NAME="Keywords" CONTENT="Tu wpisz wyrazy kluczowe rozdzielone
przecinkami">
<META NAME="Author" CONTENT="Tu wpisz swoje imię i nazwisko">
<META HTTP-EQUIV="Content-Language" CONTENT="pl">
<TITLE>Tu wpisz tytuł strony</TITLE>
</HEAD>
<BODY>
Tu wpisuje się treść strony
</BODY>
</HTML>
Tu wpisz opis zawartości strony
Należy wpisać słowny opis, co znajduje się na Twojej
stronie internetowej. Z wiadomości tej korzystają
wyszukiwarki sieciowe. Tekst który tutaj wpiszesz,
pojawi się w wyszukiwarce, po odnalezieniu przez
nią Twojej strony. Jeśli nie wpiszesz tutaj nic,
wyszukiwarka wyświetli najczęściej kilka pierwszych
linijek, które znajdują się na stronie. Ciekawy, ale
niezbyt długi, opis może zachęcić internautów do
odwiedzenia Twojego serwisu! Każda pojedyncza
strona, która znajduje się w serwisie, powinna mieć
swój własny opis, przedstawiający jej treść.
Tu wpisz wyrazy kluczowe
rozdzielone przecinkami,
Należy wpisać słowa kluczowe, których można użyć w
wyszukiwarce sieciowej, aby została odnaleziona
przez nią Twoja strona. Staraj się tutaj wpisać
wyrazy, które jak najlepiej oddają zawartość strony.
Wyrazy muszą być oddzielone od siebie przecinkami
(np.: wyraz1, wyraz2, wyraz3)! Dobrze dobrane
słowa kluczowe, pomogą wyszukiwarkom, w
odnalezieniu Twojej strony! Każda pojedyncza
strona, która znajduje się w Twoim serwisie, powinna
mieć swoje własne wyrazy kluczowe.
Tu wpisz swoje imię i nazwisko
Jest informacją o autorze strony. Dlatego możesz
tu podać swoje imię i nazwisko (choć wcale
nie musisz). Jeśli chcesz pozostać anonimowy,
wykasuj całą tą linijkę.
W opisie zawartości strony, wyrazach
kluczowych oraz autorze strony nie należy
używać znaków cudzysłowu. Jeśli musimy to
zrobić, należy zamiast nich wpisywać: &quot;
UWAGA!
W żadnym wypadku nie należy pomijać w szablonie:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
Strona startowa
Plik będący stroną startową (czyli główną) musi nazywać się
index.html lub index.htm. Witryna internetowa może składać
się z dowolnej ilości podstron - każda z nich to osobny plik,
tworzony w ten sam sposób, jak strona główna. Inne podstrony
mogą nazywać się dowolnie, byleby miały rozszerzenie *.html
lub *.htm. Jednak stosowanie bardzo długich nazw, może być
uciążliwe, szczególnie w przypadku, gdy internauta będzie
chciał się bezpośrednio przenieść do którejś z podstron
serwisu, poprzez wpisanie jej adresu w przeglądarce (każda
strona ma swój unikatowy adres, do którego można się
odnosić).
UWAGA! Bardzo ważne: w nazwach plików lepiej nie używać:
1. wielkich liter
2. znaków specjalnych (np.: \ / : * ? " < > | )
3. spacji (jeśli musisz, w zamian używaj podkreślnika "_")
4. polskich liter (ą, ć, ę, ł, ń... itd.)
Umieszczanie tekstu
Jeśli chcemy umieścić na stronie WWW zwykły tekst, możemy
wpisać go bezpośrednio z klawiatury - w miejsce właściwej
treści dokumentu. Nie trzeba przy tym stosować żadnych
dodatkowych poleceń. Należy jednak pamiętać, że
przeglądarka internetowa automatycznie zawinie wszystkie
wiersze, dlatego w edytorze HTML tekst możemy wpisywać
dowolnie, np. po wpisaniu:
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
ZNACZNIKI
Poza zwykłym tekstem, na stronę możesz wprowadzić znaczniki
(tzw. "tagi"). Znacznik jest to specjalny tekst, umieszczony w
nawiasach ostrych, np.: <BR>. Jest on częścią składni języka
HTML i pozwala sterować wyglądem strony. Dzięki niemu
można ustalić kolor tła, rodzaj formatowania tekstu, wstawić
obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie,
widoczne są tylko efekty jego działania (np. wstawienie
obrazka).
Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak
większości) są zarezerwowane dla znaczników, nie powinny
się one pojawić w normalnej treści strony. Jeżeli musimy ich
użyć, należy wpisywać zamiast nich odpowiednio: &lt; oraz
&gt;. Ponadto znak "&" (ampersand - angielskie "and" Shift+7) należy zastępować przez: &amp;.
Znacznik otwierający i zamykający
Istnieją znaczniki otwierające (np.: <CENTER>) oraz
zamykające (np.: </CENTER>). Znacznik zamykający
rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką
samą nazwę jak otwierający. Pomiędzy znacznikami
otwierającym i zamykającym może znaleźć się jakiś tekst,
który chcemy np. poddać formatowaniu (w tym przypadku
będzie to wyśrodkowanie tekstu).
<CENTER>Ten tekst zostanie ustawiony na środku ekranu.</CENTER>
ZNACZNIKI
Znacznik otwierający musi znaleźć się zawsze przed znacznikiem
zamykającym (co jest chyba dosyć logiczne - nie można
zamknąć jeszcze nie otwartych drzwi ani otworzyć nie
zamkniętych). Należy również pamiętać, że prawie każdy
znacznik (poza nielicznymi wyjątkami) trzeba zamknąć, co
oznacza, że nie można zapominać o wstawianiu znaczników
zamykających!
Nie ma żadnego znaczenia jakimi literami wpisujemy znaczniki,
np. znacznik <BR> możemy równie dobrze wpisać tak:
<bR >. Jednak ten drugi sposób jest mało czytelny. Dlatego
znaczniki będą pisane dużymi literami.
Koniec linii
Powyższy znacznik (<BR>) stosuje się, gdy chcemy
natychmiastowo zakończyć linię.
Przeglądarka internetowa ignoruje wszelkie znaki przejścia do
następnej linii za pomocą klawisza Enter (ignoruje również
postawienie obok siebie więcej niż jednej spacji). Na przykład
jeśli wpiszesz w edytorze taki tekst:
To jest pierwsza linia...
a to jest druga linia.
Koniec linii
Linia zostanie zakończona automatycznie tylko wtedy,
gdy podany tekst będzie zbyt długi, aby zmieścić się
w jednym wierszu. Jeśli jednak koniecznie chcemy
natychmiast zakończyć linię, możemy to zrobić,
stawiając w miejscu gdzie ma być ona zakończona,
znacznik <BR>. Np. wpisanie w edytorze:
To jest pierwsza linia...<BR>
a to jest druga linia.<BR>
Koniec linii
Jeśli postawimy obok siebie więcej niż jeden znacznik
<BR>, możemy "zejść" kilka linijek niżej, np.
wpisanie:
To jest pierwsza linia...<BR><BR><BR>
a to jest druga linia.<BR>
Znacznik <BR> nie ma znacznika zamykającego (to
jest właśnie jeden z nielicznych wyjątków)!
Paragraf
Paragraf (czyli nowy akapit) to pewien ustęp w tekście.
Następujące po sobie paragrafy, są rozdzielone linijką
przerwy. Treść paragrafu (akapitu) należy wpisać pomiędzy
znacznikami <P> oraz </P>. Przyjęło się, że praktycznie
każdy zwykły tekst na stronie WWW umieszcza się w
paragrafach. Pojedynczy akapit przedstawia ustęp w tekście,
który nieco różni się tematycznie od poprzedniego. Zamiast
stosować dwa znaczniki końca linii: <BR><BR>, można po
prostu objąć wybrany fragment tekstu paragrafem, a efekt
będzie identyczny. Dzięki temu strona będzie wyglądała
estetyczniej i łatwiej będzie można odszukać na niej
interesujące informacje.
Paragraf
Paragraf jest bardzo ważny w składni HTML, ponieważ
pozwala w określony sposób sformatować tekst na
ekranie (ułożyć go w podany sposób). Robi się to
podając atrybuty znacznika. Atrybut wpisuje się
zawsze wewnątrz znacznika otwierającego bezpośrednio po jego nazwie (oddzielony od niej
spacją), a przed znakiem zamknięcia nawiasu ostrego,
czyli przed ">". Każdy znacznik ma ściśle określone
atrybuty, które obsługuje.
Paragraf
•
Wyrównanie tekstu do lewej strony (domyślnie):
<P ALIGN="left">Treść paragrafu</P>
lub
<P>Treść paragrafu</P>
•
Wyrównanie tekstu do prawej:
<P ALIGN="right">Treść paragrafu</P>
•
Wyśrodkowanie tekstu:
<P ALIGN="center">Treść paragrafu</P>
•
Justowanie tekstu (wyrównanie do obu marginesów
jednocześnie):
<P ALIGN="justify">Treść paragrafu</P>
Paragraf
Formatowanie tekstu
•
Tekst pogrubiony
<B>Tu wpisz tekst</B>
Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold"), który się
wewnątrz niego znajduje.
• Tekst pochylony
<I>Tu wpisz tekst</I>
Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic").
• Tekst podkreślony
<U>Tu wpisz tekst</U>
Pozwala podkreślić fragment tekstu (ang. "underline").
• Wielkość czcionki
<FONT SIZE="n">Tu wpisz tekst</FONT>
Gdzie: "n" należy wpisać wartość od 1 (czcionka najmniejsza) do 7 (czcionka
największa).
Formatowanie tekstu
Kolor czcionki
<FONT COLOR="kolor">Tu wpisz
tekst</FONT>
gdzie: "kolor" podajemy z tabeli
•
black
(czarny)
white
(biały)
silver
(srebrny)
gray
(szary)
maroon
(kasztanowy)
red
(czerwony)
purple
(purpurowy)
fuchsia
(fuksja)
green
(zielony)
lime
(limonowy)
olive
(oliwkowy)
yellow
(żółty)
navy
(granatowy)
blue
(niebieski)
teal
(zielonomodry)
aqua
(akwamaryna)
Formatowanie tekstu
•
Rodzaj czcionki
<FONT FACE="rodzaj">Tu wpisz tekst</FONT>
lub
<FONT FACE="rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</FONT>
gdzie: zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek
(np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa
czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy
ją objąć w znaki apostrofu (np.: <FONT FACE="Verdana, 'Times New
Roman', Arial">Tekst</FONT>).
W miejsce kropek można wpisać dalsze rodzaje czcionek, rozdzielone
przecinkami (jeśli tego nie zrobimy, kropki należy pominąć).
W przypadku drugiego polecenia zostanie użyta taka czcionka, którą pierwszą w
kolejności podawania będzie posiadał użytkownik. Jest to lepszy sposób, gdyż
pozwala się ubezpieczyć na wypadek nieposiadania jednego rodzaju czcionki
przez użytkownika.
Formatowanie tekstu
UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli
użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w
swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w
Internet Explorerze będzie to najprawdopodobniej 'Times New Roman',
chociaż to też nie jest pewne).Poza tym nie każda czcionka potrafi zapisać
poprawnie polskie znaki (w standardzie ISO). Koniecznie sprawdź rezultat w
praktyce!
W systemie Windows standardowo dostępne powinny być czcionki:
'Times New Roman',
Arial,
'Courier New'.
Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są:
Verdana,
Tahoma,
'Trebuchet MS',
Georgia.
Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także
takie które domyślnie występują w innych systemach operacyjnych (np.:
Helvetica - podobna do Arial).
Formatowanie tekstu grupowanie
parametrów
Wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można
grupować:
<P ALIGN="center">
<FONT SIZE="5" COLOR="red" FACE="Courier New">
<B><I><U>Tu jest jakiś tekst</U></I></B></FONT></P>
Znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw
zamykamy znacznik, który został otwarty jako ostatni a na końcu zamykamy ten
znacznik, który otworzyliśmy jako pierwszy .
Dodatkowo atrybuty odnoszące się do tego samego znacznika można połączyć,
wypisując je po kolei, rozdzielone spacjami. Kolejność wpisywania zarówno
atrybutów jak i znaczników (otwierających) jest dowolna.
Formatowanie tekstu i tła
<BODY BGCOLOR="kolor tła" TEXT="kolor tekstu">
To jest właściwa treść strony
</BODY>
Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć
dodatkowych atrybutów dla znacznika <BODY>. Atrybuty te (BGCOLOR
oraz TEXT) wpisujemy w wewnątrz znacznika otwierającego <BODY>
ponieważ nie są one oddzielnymi znacznikami tylko atrybutami. Należy
również pamiętać, że na stronie może się znajdować tylko jeden znacznik
<BODY>. Wszystkie atrybuty które się do niego odnoszą, wpisuje się do tego
samego znacznika (otwierającego), a nie wstawia się nowego w innym miejscu
strony.
Zamiast wyrazów "kolor tła" oraz "kolor tekstu" należy wpisać definicję koloru
odpowiednio: tła strony oraz tekstu na całej stronie. Kolor tła oraz tekstu całej
strony powinniśmy ustalać zawsze jednocześnie.
Nawet jeśli ustalimy kolor tekstu na całej stronie, możemy go później lokalnie
(miejscowo) zmieniać za pomocą polecenia
<FONT COLOR="kolor">...</FONT>