<HTML> </HTML>
Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce.
<HEAD> </HEAD>
Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony.
<BODY> </BODY>
Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.
W praktyce wygląda to
następująco:
<HTML>
<HEAD>
Informacje o dokumencie, łącznie z tytułem
</HEAD>
<BODY>
Treść dokumentu - tekst, grafika, odsyłacze itp.
</BODY>
</HTML>
<TITLE></TITLE>
Najważniejszym elementem jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki. Tytułu nie należy mylić z pierwszym nagłówkiem strony, aczkolwiek oba te elementy mogą mieć oczywiście tę samą treść
<BODY
BGCOLOR="kolor">
Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy żółty
<BODY
TEXT="kolor">
parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła.
<B> Czcionka pogrubiona </B>
<I> Czcionka pochylona </I>
<U> Czcionka podkreślona </U>
<TT> Czcionka o stałej szerokości znaku </TT>
<STRIKE> Czcionka przekreślona</STRIKE>
<SUP> Superskrypt (indeks górny) </SUP>
<SUB> Subskrypt (indeks dolny) </SUB>
<BIG> Duża czcionka (+1 punkt) </BIG>
<SMALL> Mała czcionka (-1 punkt) </SMALL>
Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru.
Składnia: <FONT COLOR="nazwa_koloru"> </FONT>
Nazwa koloru:
black - czarny
olive -oliwkowy
red - czerwony
blue - niebieski
navy - morski
gray – szary
white – biały
orange - pomarańczowy
lime - jasnozielony
fuchsia - różowy
green - zielony
purple - purpurowy
silver - srebrny
yellow - żółty
aqua – morski
Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników
<FONT SIZE="xx"> </FONT>
Czcionka normalna ma przypisaną wartość 3 (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.
Możemy także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość.
<FONT SIZE="+x"> </FONT>
Czcionka ma domyślną wielkość 3, ale w dowolnym momencie możemy ją zmienić za pomocą polecenia:
<BASEFONT SIZE="x">
Oznacza ono, że od momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości.
Jeszcze jedną możliwość urozmaicenia dokumentu (nie mieszczącą się jednak w zakresie HTML 3.2) daje polecenie
<FONT FACE="nazwa_kroju"> </FONT>
Pozwala ono zmienić krój czcionki dla danego dokumentu
pierwszego stopnia: <H1> </H1>
drugiego stopnia: <H2> </H2>
trzeciego stopnia: <H3> </H3>
czwartego stopnia: <H4> </H4>
piątego stopnia: <H5> </H5>
szóstego stopnia: <H6> </H6>
Wyrównywanie tytułów
<Hx ALIGN=sposób> </Hx>
sposób:
LEFT, RIGHT, CENTER
<P ALIGN=LEFT>…. </P> - do lewej
<P ALIGN=RIGHT>…</P> - do prawej
<P ALIGN=CENTER> </P> - do środka
Znacznik końca wiersza <BR> - powoduje przełamanie wiersza be znaku końca akapitu
Blokada przełamania <NOBR>... </NOBR>
Niekiedy zdarza się, że jakiś tekst powinien być wyświetlany w jednym wierszu. Aby zapobiec przełamaniu wiersza, możemy objąć tekst poleceniem <NOBR> </NOBR>.
Należy je stosować ostrożnie, gdyż przeglądarka jest wtedy zmuszona do sztucznego poszerzania okna. Gdyby tekst był długi, użytkownik byłby zmuszony do kłopotliwego przewijania okna wszerz, aby przeczytać całą zawartość wiersza.
5. Pozioma linia
<HR>
Linia może być pozbawiona cieniowania - <HR NOSHADE>
Linii możemy nadać dowolną grubość – np.: <HR SIZE=5>
Linia może mieć określoną długość w pikselach – np:<HR WIDTH=300>
lub w procencie szerokości strony - <HR WIDTH=50%>
<HR ALIGN=center> - linia wyrównana do środka
<HR ALIGN=left> - do lewej
<HR ALIGN=right> - do prawej
<hr color="nazwa_koloru"> - ustalenie koloru linii
<PRE>... </PRE>
Tekst preformatowany, wyświetlany czcionką monotypiczną (o stałej szerokości znaku)
pozwala wprowadzać dodatkowe spacje, uwzględnia także punkty tabulacji, i znaki końca akapitu:
a1 a2 a3 a4
b1 b2 b3 b4
7. Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego
<UL>
<LI>Pierwszy punkt
<LI>Drugi punkt
<LI>Trzeci punkt
</UL>
Lista nieuporządkowana może dodatkowo zawierać
definicję graficznego symbolu:
<UL TYPE=disc> - koło;
<UL TYPE=circle> - okrąg;
<UL TYPE=square> - kwadrat
Wykaz uporządkowany - służy do sporządzenia wykazu numerowanego
<OL>
<LI>Pierwszy punkt
<LI>Drugi punkt
<LI>Trzeci punkt
</OL>
Parametr START=x pozwala rozpocząć numerowanie listy od x: <OL START=x>
Parametr TYPE=n pozwala określić typ numerowania listy:
<OL TYPE=A> numerowanie według wielkich liter
<OL TYPE=a> numerowanie według małych liter
<OL TYPE=I> numerowanie według wielkich liczebników rzymskich
<OL TYPE=i> numerowanie według małych liczebników rzymskich
<OL TYPE=1> numerowanie według liczebników arabskich
Podstawowa konstrukcja ma następującą postać:
<IMG SRC="plik_graficzny">
IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (żródło).
Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka.
Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość).
Na
przykład:
<IMG SRC="tucows.gif" HEIGHT=150>
<IMG SRC="tucows.gif" WIDTH=200>
Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o
grubości równej x pikseli:
<IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5>
Parametry VSPACE (vertical space) i HSPACE
(horizontal space) pozwalają ustalić odległość
obrazka, w pikselach, od oblewającego go tekstu:
<IMG SRC="tucows.gif" HSPACE=50>
<IMG SRC="tucows.gif" VSPACE=50>
Odrębny, specjalny zespół parametrów, ALIGN=abc,
steruje pozycją obrazka w stosunku
do oblewającego go akapitu.
Konstrukcja ma postać <IMG SRC="obrazek" ALIGN=abc>
ALIGN=left; ALIGN=right; ALIGN=top;
ALIGN=middle
9. Odsyłacze
Odsyłaczem jest konstrukcja,
która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą
kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w
postaci:
<A HREF="miejsce_docelowe">Tekst, na którym należy
kliknąć</A>
Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony.
Do jakich miejsc możemy się odwoływać?
Do stron WWW, których charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć postać:
<A HREF="http://host.domena>Tekst</A>
np: <A HREF="http://www.onet.pl>ONET</A>
Zauważmy od razu, że taki
adres powoduje wywołanie głównej (domyślnej) strony WWW. Nazwy strony nie
podawaliśmy. Dlatego zaleca się, aby strona główna serwisu była plikiem o
nazwie index.htm lub index.html.
Do pliku tekstowego (*.TXT):
<A
HREF="plik_tekstowy.txt">opis</A>
np: <A HREF="czytaj.txt">CZYTAJ</A>
Plik czytaj.txt powinien się znajdować w katalogu bieżącym
Do pliku graficznego (*.GIF):
<A
HREF="plik graficzny">opis</A>
np: <A HREF="chomik.gif">CHOMIK</A>
Plik chomik.gif powinien się znajdować w katalogu bieżącym
Do poczty e-mail:
Często stosowanym odsyłaczem jest konstrukcja pozwalająca czytelnikowi strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczną. Jej konstrukcja wygląda następująco:
<A
HREF=mailto:adres e-mail>Tutaj kliknij</A>
Przykładowa zachęta do wysłania listu mogłaby wyglądać następująco:
<A HREF=mailto:j_kowalski@poczta.interia.pll>napisz do mnie</A>
Równie często stosowaną
usługą jest FTP, który pozwala sięgnąć do serwera FTP w poszukiwaniu jakichś
plików.Odpowiednia konstrukcja wskazująca na FTP ma postać:
<A
HREF=ftp://ftp.adres>Jakiś tekst</A>
Gdybyśmy chcieli sięgnąć do serwera Wydawnictwa Lupus, możemy podać odsyłacz:
<A HREF=ftp://ftp.polbox.com.pl/library/!lupus>Tutaj znajdziesz listingi Dla Praktyków</A>
<TABLE> </TABLE>
Definicja tabeli musi być
umieszczona między tymi dwoma znacznikami. W ich ramach są umieszczane
definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach,
tytuł tabeli i nagłówki wierszy i kolumn.
<TR> </TR>
Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu:
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
<TD> </TD>
Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład:
<TABLE>
<TR>
<TD> </TD><TD> </TD><TD> </TD></TR>
<TR>
<TD> </TD><TD> </TD><TD> </TD></TR>
<TR>
<TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTM warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co oczywiście nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza.
Przykład:
a1 |
a2 |
a3 |
a4 |
a5 |
b1 |
b2 |
b3 |
b4 |
b5 |
c1 |
c2 |
c3 |
c4 |
c5 |
Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwiłę przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość informacyjna.
Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.
<TABLE BORDER> </TABLE>
a1 |
a2 |
a3 |
a4 |
a5 |
b1 |
b2 |
b3 |
b4 |
b5 |
c1 |
c2 |
c3 |
c4 |
c5 |
Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę , na przykład:
<TABLE BORDER=10> </TABLE>
Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami).
<TABLE
BORDER CELLSPACING=8>
</TABLE>
a1 |
a2 |
a3 |
a4 |
a5 |
b1 |
b2 |
b3 |
b4 |
b5 |
c1 |
c2 |
c3 |
c4 |
c5 |
Jeśli uznamy, że odstęp między wartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1).
<TABLE
BORDER CELLSPACING=5 CELLPADDING=15>
</TABLE>
a1 |
a2 |
a3 |
a4 |
a5 |
b1 |
b2 |
b3 |
b4 |
b5 |
c1 |
c2 |
c3 |
c4 |
c5 |
Oczywiście należy w rozsądny sposób ustawiać wartości parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzystą i niezbyt estetyczną.
Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki. Parametr WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany parametr jest "silniejszy" od innych parametrów, które wpływają na szerokość tabeli na ekranie.
<TABLE
BORDER WIDTH=600> </TABLE>
Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki.
<TABLE
BORDER WIDTH=50%> </TABLE>
Parametr WIDTH możemy wykorzystać także de zdefiniowania
szerokości komórki, umieszczając go w ramach definicji wybranej komórki, np.
<TD WIDTH=100>
</TD>. Można też podać wartość procentową, która odnosi się do
szerokości komórki w ramach tabeli, a nie całego ekranu .
Parametr ALIGN pozwala wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu, na przykład:
<TABLE
BORDER ALIGN=right>
</TABLE>
<TABLE
BORDER=10 ALIGN=left>
</TABLE>
Parametr ALIGN możemy także wykorzystać do poziomego
wyrównania zawartości komórki - środkowania, justowania do lewej i justowania
do prawej. Używamy wówczas odpowiednio konstrukcji
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>
<TD ALIGN=right> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy szerokość
komórki za pomocą WIDTH.
a1
- do lewej |
a2
- środkowanie |
a3 - do prawej |
b1
- do lewej |
b2
- środkowanie |
b3 - do prawej |
c1
- do lewej |
c2
- środkowanie |
c3 - do prawej |
Możemy zdefiniować nie tylko szerokość, ale i wysokość tabeli (nie jest to legalna opcja HTML 3.2), podając parametr HEIGHT, wyrażony w pikselach lub procencie widocznej strony.
Parametr VALIGN (vertical) służy do pionowego wyrównania
zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy
wówczas odpowiednio konstrukcji:
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy wysokość
tabeli za pomocą HEIGTH.
Microsoft Internet Explorer i Nescape Communicator pozwalają
wykorzystać kolor tła tabeli (wykracza to poza standard HTML 3.2). W tym celu
należy w definicji tabeli dodać parametr <BGCOLOR=barwa>, np. <TABLE BORDER
HEIGHT=200 BGCOLOR=yellow>
Możemy również "pomalować" poszczególne komórki,
wstawiając definicję koloru w ramach definicji komórek, np. TD BGCOLOR="barwa" -
Jako tła tabeli (czy wręcz
poszczególnych komórek) można także użyć gotowego obrazka, stosując polecenie
<table background="nazwa_obrazka">
Microsoft Internet Explorer interpretuje także kolor
obramowania tabeli. W definicji tabeli należy wstawić parametr <BORDERCOLOR=barwa>, np. <TABLE BORDER=5
BORDERCOLOR=red>.
a1 |
a2 |
a3 |
a4 |
a5 |
b1 |
b2 |
b3 |
b4 |
b5 |
c1 |
c2 |
c3 |
c4 |
c5 |
11. Animacja Marquee
Minimalna definicja Marquee ma postać:
<MARQUEE>Tekst
animacji</MARQUEE>
Animację można wstawiać także do komórki tabeli, między
znaczniki
<TD>....... </TD>
np.:
<table
border=2 bgcolor=red>
<tr><td
width=500><marquee>tekst</marquee></td>
</table>
BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu.
BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.
BEHAVIOR=ALTERNATE
powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i
"odbija się",
powracając w kierunku pierwszego.
BGCOLOR=kolor pozwala określić
kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w
postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray,
Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.
Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo.
Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu.
Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy.
Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE.
Jak wiemy, definicja
koloru fragmentu tekstu ma postać:
<FONT COLOR=kolor> Tekst
</FONT>.
Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy.
Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami. 1000 = 1 sekunda.