HTML - PODSTAWY

1. Szkielet strony

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

 

2. Tytuł strony

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

 

3. Parametry znacznika BODY

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

 

4. Atrybuty czcionek

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

 

Kolory czcionki

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

 

Wielkość czcionki

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 bazowa

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.

 

Zmiana kroju czcionki

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

 

Tytuły

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

 

5. Znacznik akapitu

 <P> - powoduje przejście do nowej linii rozpoczynając nowy akapit

 

Wyrównywanie akapitów:

<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

 

6. Blok preformatowany

 <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

8. Wstawianie grafiki do dokumentu

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>

 

Do FTP

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>

 

 

10. Ogólne ramy tabeli

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

 

Wiersz tabeli

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

 

Komórka w wierszu

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

 

Obramowanie tabeli

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>

 

Obramowanie komórek

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

 

Marginesy dla komórek

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

 

 

Szerokość tabeli

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>

 

Szerokość komórki

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 .

 

Wyrównanie tabeli

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>

 

Poziome wyrównanie danych w komórkach

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

 

Wysokość tabeli

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.

 

Pionowe wyrównanie danych w komórkach

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.

 

Kolor tła tabeli

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

 

Kolor obramowania tabeli

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>


Tekst może się poruszać na trzy sposoby:

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.