Powrót do strony głównej: 'Index.htm'

PODSTAWY JĘZYKA HTML

 

1. Podstawy HTML,struktura dokumentu 2. BLOKI 3.WYKAZY 4. Znaczniki 5. Odsyłacze 6. Grafika 7. Tabele 7. Formularze


1. Podstawy HTML, struktura dokumentu

Dokument HTML i język HTML | Podstawowe elementy dokumentu | Szczegóły HEAD | Szczegóły BODY

 

Dokument HTML i język HTML

Do utworzenia strony WWW, w języku HTML, którą można przeglądać przy pomocy przeglądarki (Microsoft Internet Explorer, Netscape) potrzebny jest zwykły edytor tekstów. Może to być, przynajmniej teoretycznie, najprostszy edytor dla DOS, który potrafi zapisywać dokument w postaci tekstowej, choćby Norton Editor, edytor języka programowania (Turbo Pascal, C/C++) czy też NotePad w Windows.W dokumentach powinno się stosować standard kodowania polskich liter ISO-8859-2. Jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy. Deklarację strony kodowej, umieszcza się w ramach części nagłówkowej strony (HEAD). Ma ona w tym wypadku następującą postać:

<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
</HEAD>

Gdy stosuje się standard kodowania Windows-1250, należy umieścić w dokumencie deklarację użytej strony kodowej:

<HEAD>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
</HEAD>

HTML (HyperText Markup Language) nie jest językiem programowania ale zawiera zbiór reguł składniowych, których trzeba przestrzegać przy budowie dokumentów WWW. HTML to język do tworzenia niezależnych platformowo stron WWW. Aby utworzyć dokument dodaje się do pliku tekstowego odpowiednie znaczniki, ewentualnie kody pojedynczych znaków. Nazwa znacznika to ciąg liter między znakami < oraz >. Np. w znaczniku <BODY>, nazwą znacznika jest BODY.

Podstawowe elementy dokumentu

Dokument HTML, aby odpowiadał przyjętemu standardowi, powinien zawierać co najmniej trzy elementy. Choć często spotyka się w Internecie dokumenty nie zawierające wszystkich poleceń, należy tego unikać.Często stosuje się w dokumentach WWW specjalny prolog, który identyfikuje poziom używanego języka HTML.

Jeśli dokument jest zgodny ze specyfikacją HTML 4.0, powinniśmy stosować prolog:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Jeśli dokument jest zgodny z wcześniejszą specyfikacją HTML 3.2, powinniśmy stosować prolog:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> lub

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Schemat strony:

<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<!-- lub meta http-equiv="content-type" content="text/html; charset=Windows-1250" -->
<TITLE>Tytuł strony</TITLE>
</HEAD>
<BODY>
właściwa treść (ciało) dokumentu - tekst, grafika, odsyłacze...
</BODY>
</HTML>

Najważniejsze elementy HTML:

<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. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa.

<TITLE> </TITLE>. Służy do określenia tytułu dokumentu - wyświwtlanego w górnej części okna programu.

<BODY> </BODY>. Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu

 

Szczegóły HEAD

Definiując <HEAD> możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie.

TITLE></TITLE> - tytuł strony

Najważniejszym, koniecznym elementem jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki.

<META>

Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe. Zawiera ono trzy atrybuty: HTTP-EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim lub drugi z trzecim. HTTP-EQUIV definiuje zmienne systemowe, natomiast NAME - zmienne użytkownika.

W <META> zalecane są w szczególności: strona kodowa, opis strony, wyrazy kluczowe, autor strony.

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">

Inna postać to charset=windows-1250. Nowe przeglądarki (Navigator/Communicator, Internet Explorer) potrafią się automatycznie przestawić na właściwą stronę kodową, zgodnie z podaną deklaracją. Nie jest potrzebna interwencja użytkownika, który nie musi nawet wiedzieć, z jakim standardem kodowania polskich znaków ma do czynienia. Polecenie to jest bezwzględnie zalecane przy tworzeniu stron WWW.

<META NAME ="Description" CONTENT="jakaś tam treść">

Polecenie to opisuje zawartość strony. Zalecam stosowanie go, gdyż dzięki niemu ułatwiamy pracę osobom korzystającym z wyszukiwarki. Przykładowo, gdy posłużymy się Infoseekiem, szukając np. stron poświęconym językowi Esperanto, łatwo dostrzeżemy funkcjonalność poleceń TITLE i Description. To, co umieściliśmy w ramach TITLE, zostanie wyświetlone jako tytuł znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej strony. Gdybyśmy nie użyli Description, wyszukiwarka wyświetli kilka pierwszych wierszy naszego dokumentu, które mogą być zupełnie przypadkowe. Uważnie i świadomie zredagowana zawartość Description da natychmiast orientację co do zawartości strony. Może to być na przykład:

<META NAME ="Description" CONTENT="Esperanto: strona zawiera podstawowe informacje o języku Esperanto, odsyłacze do najważniejszych stron, podręcznik i słowniczek.">

Zaleca się nieprzekraczanie 150-200 znaków.

<META NAME="Keywords" CONTENT="jakieś wyrazy kluczowe">

Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość Keywords: HTML, Lupus. Warto stosować wyrazy kluczowe, gdyż ułatwia to pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. To my właśnie decydujemy tutaj, jakie są istotne elementy strony. Jeśli nasza strona zawiera opis jakiegoś produktu, moglibyśmy podać wyrazy kluczowe "marmolada śliwkowa, przemysł, spółdzielnia Lepsze Jutro, żywność". Poszczególne wyrazy kluczowe są oddzielane przecinkami.

<META NAME="Language" CONTENT="pl">

Polecenie informuje o języku strony. Niektóre przeglądarki korzystają z niego przy precyzowaniu zapytań. Dla języka angielskiego użyjemy en, dla amerykańskiego angielskiego en-us, dla niemieckiego de, dla francuskiego fr.

<META NAME="Author" CONTENT="imię i nazwisko">

Polecenie informuje o autorze strony.

<META NAME="Generator" CONTENT="nazwa edytora">

Polecenie informuje o użytym narzędziu do tworzenia stron HTML, np. Homesite, Pajączek, Tiger98.

<META HTTP-EQUIV="Refresh" CONTENT="x">

Polecenie spowoduje regularne odświeżanie strony co x sekund. Może to mieć praktyczne zastosowanie w przypadku, gdy strona zawiera bardzo często aktualizowane informacje (wiele razy dziennie). Gdy użytkownik korzysta ze strony przez dłuższy czas, strona będzie się sama aktualizowała.

<META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://.../strona.html">

Polecenie spowoduje automatyczne wczytanie nowej strony po x sekundach. W Internecie często spotyka się strony z informacją o zmianie adresu, gdy odsyłacz z innej strony jest już nieaktualny. Autor strony pozostawia pod starym adresem informację o zmianie, podając nowy adres, ale opatrując tę stronę zaprezentowanym poleceniem, które spowoduje automatyczne przejście pod właściwy adres po x sekundach. Tylko niektóre przeglądarki interpretują to polecenie.

<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

Polecenie informuje o dacie utworzenia dokumentu, zwracając wartość (np. sieciowemu indekserowi) Creation-Date: Tue, 04 Dec 1993 21:29:02 GMT.

<BASE>

Polecenie definiuje bazowy adres dokumentu.

<BASE HREF="http://www.firma.com/dokument.html">

Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze. Jednak w dokumentach znajdują się zazwyczaj relatywne odsyłacze do innych stron na serwerze, a nie odsyłacze absolutne. Oznacza to, że nie jest w nich podawana pełna ścieżka dostępu, lecz jedynie jej fragmenty. Jest to znacznie wygodniejsze w trakcie konstruowania dokumentu.

Szczegóły BODY

Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony.

<BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif">

Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML)

<BODY BGCOLOR="kolor">

Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Należy deklarować kolor tła strony, gdyż jeśli tego nie zrobimy, czytelnik strony zobaczy tło zależne od jego własnych ustawień w przeglądarce, białe, szare czy jakiekolwiek inne. Może to "zrujnować" wyświetlanie strony. Ponadto, gdy używamy pliku graficznego jako tła, także podawajmy alternatywny kolor tła strony, gdyż wiele osób wyłącza grafikę w przeglądarce - wtedy widoczny jest jedynie kolor tła strony.

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

<BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3">

Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty (zauważmy związek z ustawieniem przeglądarki u odbiorcy, który może na ogół swobodnie definiować czas "wygasania" informacji o wizytowaniu jakiegoś miejsca w Internecie). ALINK="kolor" (active link) określa kolor aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany. Możemy przykładowo użyć kolorów:

<BODY LINK="blue" VLINK="red" ALINK="yellow">

<BODY LEFTMARGIN="xx">

Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo.

<BODY TOPMARGIN="xx">

Ta sama przeglądarka akceptuje kod wprowadzający górny margines strony. Wartość TOPMARGIN="yy" spowoduje przesunięcie zawartości dokumentu o yy pikseli w dół.

Oba polecenia nie wchodzą w zakres standardu HTML 4.0.


2. BLOKI, formatowanie bloków

Nagłówki <H1>..<H6>

<Hi>Nazwa w nagłówku</Hi>

<Hi [ALIGN=|"CENTER"|"LEFT"]>Nazwa w nagłówku</Hi>

gdzie i=1..6,  1 - największa czcionka

Przykłady:
Zapisy w postaci kodu HTML
<H2>Nagłówek1</H2>

<H6 ALIGN="center">Nagłówek 6 (ALIGN="center")</H6>

Wyniki na stronie WWW

Nagłowek 1

Nagłowek 6

Akapity - znaczniki akapitów <P>

AKAPIT ALIGN=LEFT

AKAPIT ALIGN=CENTER

AKAPIT ALIGN=RIGHT


Znacznik końca wiersza BR

<BR>

Znacznik końca wiersza może być obecnie opatrywany dodatkowymi parametrami: CLEAR=LEFT, CLEAR=RIGHT i CLEAR=ALL. Parametry te są wykorzystywane przy pozycjonowaniu grafiki i tekstu.

<BR CLEAR="left"|"right"|"all">


Pozioma linia - <HR>

Znacznik <HR> - kreska pozioma (domyslnie ALIGN="center" WIDTH="100%"

<HR [NOSHADE][SIZE=N][WIDTH=W|W%][ALIGN="left"|"center"\"right"] COLOR="kolor">

Linia może być pozbawiona cieniowania, możemy jej nadać dowolną grubość i dlugosc (piksele lub % szerokosci strony). Linii możemy nadać dowolną grubość, moze byc wyrownana do lewej, prawej strony, wycentrowana.

Przyklady:

<HR COLOR="yellow"> - kolor żółty


<HR NOSHADE> - bez cieniowania


<HR SIZE=5> - grubosc 5 pikseli


<HR WIDTH=300> - dlugosc 5 pikseli


<HR WIDTH=50%>


<HR ALIGN=center> - wyrownana do srodka


<HR ALIGN=center SIZE=8 WIDTH=200>


<HR ALIGN=left> - justowana do lewego brzegu


<HR ALIGN=left NOSHADE SIZE=4 WIDTH=300>


<HR ALIGN=right> - justowana do prawego brzegu


<HR ALIGN=right SIZE=3 WIDTH=400>



HR WIDTH="50%" ALIGN="right"


HR WIDTH=120 ALIGN="left"


HR SIZE=10


HR NOSHADE



Blok preformatowany <PRE></PRE>

<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

Polecenie PRE jest zalecane zamiast przestarzałych (nie istniejących już w specyfikacji języka) konstrukcji LISTING, PLAINTEXT i XMP.


Blok cytowany <BLOCQKUOTE></BLOCQKUOTE>

<BLOCKQUOTE> </BLOCKQUOTE>

Bloku cytowanego możemy użyć przy powoływaniu się na jakieś źródło. Cytat jest wyświetlany z uwzględnieniem tabulacji. Na przykład:

Soft you now, the fair Ophelia.
Nymph, in thy orisons,
be all my sins remembered.

Przykład zaczerpnięty z HTML Reference Library)


Cytat w wierszu <Q></Q>

Nowym poleceniem HTML jest krótki cytat w ramach wiersza (in-line quote), wprowadzany za pomocą <Q></Q>.

Polecenie ma automatycznie obejmować cytowany tekst cudzysłowem, przy czym od definicji języka zależy sposób wyświetlania cudzysłowu. Na przykład, dla języka angielskiego, zagnieżdżone polecenie:

John said, <Q lang="en">I saw Lucy at lunch, she says <Q lang="en">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

powinno dać w efekcie

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

Jak widać, "zewnętrzne" Q tworzy cudzysłów " ", a "wewnętrzne" apostrofy ' '.

Żadna z przeglądarek nie interpretuje tego polecenia (w przykładzie cudzysłowy zostały wprowadzone ręcznie).

(przykład pochodzi z HTML Reference Library)


Adres <ADDRESS></ADDRESS>

<ADDRESS>Odpowiedni adres </ADDRESS>

Polecenie jest interpretowane jako kursywa i jest często stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej, np.:

Mr. Jan Nowak
ul. Piękna 2
00-240 Warszawa
e-mail: JanNowak@syrena.warszawa.com.pl Poland

3. WYKAZY

Lista nieuporządkowana | Lista uporządkowana | Menu | Katalog | Lista definicyjna


Lista nieuporządkowana (nienumerowana - unordered) <UL></U>

Przyklad listy nienumerowanej

Zapis w postaci kodu HTML

<UL>
<LI>Pozycja a
<LI>Pozycja b
</UL>

Lista uporządkowana (numerowana -ordered) <OL></OL>>

Przyklad listy numerowanej

Zapis w postaci kodu HTML

<OL>
<LI>Pozycja 1
<LI>Pozycja 2
</OL>
  1. Pozycja 1
  2. Pozycja 2

Lista numerowana z parametrem: <OL TYPE="a">

  1. Pozycja pierwsza
  2. Pozycja druga

Lista numerowana z parametrem: <OL TYPE="circle">

  1. Pozycja 1
  2. Pozycja 2

Lista numerowana z parametrem: <OL TYPE="disc">

  1. Pozycja 1
  2. Pozycja 2

Lista numerowana z parametrem: <OL START=10>

  1. Linia 1
  2. Linia 2

Menu

Polecenie formatujące <MENU> <LI>.. <LI> </MENU>

  • Pomidorowa
  • Pomidorowa z ryżem
  • Rosół
  • Soczewicowa
  • Kasza
  • Ogórkowa
  • Grzybowa
  • Tajemnicza zupa

  • Katalog

    Polecenie formatujace <DIR> <LI>... <LI> </DIR>

  • Rogal z indykiem
  • Szynka i ser
  • Pieczywo czosnkowe

  • Lista definicyjna <DL>, < DT> - termin, <DD> - definicja

    Zawartością DL jest ciąg haseł DT i definicji DD

    Przykład 1:

    Zapis w postaci kodu HTML

    <DL>
    <DT>kowboj
    <DD>tosoba, która jeżdzi konno i gra w piłke
    <DT>programista
    <DD>osoba, która w USA zarabia więcej niż kowboj
    <DT>dziekan
    <DD>szef wydziału na uczelni 
    </DL>
    

    Wynik HTML

    kowboj
    osoba, która jeżdzi konno i gra w piłke
    programista
    osoba, która w USA zarabia więcej niż kowboj
    dziekan
    szef wydziału na uczelni

    Przykład 2

    Definicje i listy (DL DT UL LI..LI ... DT UL LI..LI /UL /DL)

    Zapis w postaci kodu HTML

    Tradycyjne zioła lecznicze to:
    <DL>
    <DT><B>Wysokie ciśnienie</B>
    <UL>
    <LI>Balsam
    <LI>Owoc głogu 
    </UL>
    <DT><B>Bronchit</B>
    <UL>
    <LI>Dzięgiel 
    <LI><I>Nasienie anyżu</I>
    </UL>
    <DT><B>Oparzenia</B>
    <UL>
    <LI>Aloes
    <LI>Cykoria
    <LI><I>Czarny bez</I>.
    </UL>
    </DL>
    

    Wynik HTML
    Tradycyjne zioła lecznicze to:

    Wysokie ciśnienie
    Bronchit
    Oparzenia

    4. Znaczniki logiczne i fizyczne, czcionki

    Znaczniki do pojedynczych słow - znaczniki logiczne

    Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego stylu

    <EM> - czcionka wyróżniona - emfaza

    Akapit pierwszy, linia 1 <EM>Wszystko jest w porządku</EM>

    Wszystko jest w porządku

    <STRONG> - czcionka mocno wyrózniona

    <STRONG>Wszystko będzie dobrze!</STRONG>

    Wszystko będzie dobrze!

    <KBD> - czcionka wprowadzona z klawiatury

    Czcionka EM, teraz zwykła, teraz KBD <kdb>Z klawiatury - kbd</kbd>

    Z klawiatury kbd

    <CITE> - cytat blokowy

    <CITE> Treść cytatu </CITE>
    Tekst zwykły, a to jest cytat.

    <DFN>-definicja

    DFN czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarka interpretuje DFN jako kursywę (IE4) lub nie wyróżnia czcionki (NC4). Internet Explorer 5 to najnowsza przeglądarka firmy Microsoft.

    <DEL> - Element usunięty

    Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem DEL, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.: Dokument nie jest już dostępny.
    Polecenie jest interpretowane przez IE4 i 5.

    <INS> - Element wstawiony

    Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem INS.
    To jest nowe opracowanie tematu.
    Polecenie jest interpretowane przez IE4 i 5.

    <ABBR> - skrót i <ACRONYM> - akronim

    Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów.

    <ABBR lang="pl">Prof.</ABBR>
    Prof.
    <ACRONYM lang="en">WWW</ACRONYM>
    WWW

    <SAMP> </SAMP> - przykład

    <SAMP>Przykład (sample)</SAMP>

    Przykład (sample)

    <VAR> - zmienna (słowo kluczowe języka)

    <VAR>Zmienna (variable)</VAR>
    Zmienna (variable)

     


    Czcionki

    Kolory czcionki: <FONT COLOR="kolor"</FONT>

    Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Poniżej przedstawiamy listę 16 podstawowych barw stosowanych w dokumentach internetowych - są one widoczne w przeglądarkach Netscape Navigator i Microsoft Internet Explorer. Naturalnie możemy w dowolny sposób kombinować barwy z atrybutami i stylami. Składnia: <FONT COLOR="nazwa_koloru"> </FONT >

    Kolor black
    Kolor olive
    Kolor teal
    Kolor red
    Kolor blue
    Kolor maroon
    Kolor navy
    Kolor gray
    Kolor lime
    Kolor fuchsia
    Kolor white
    Kolor green
    Kolor purple
    Kolor yellow
    Kolor aqua
    Kolor 00ff00

    Wielkość czcionki:

    <FONT SIZE="1..7"></FONT> lub <FONT SIZE="+x"></FONT>

    Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników <FONT SIZE="xx">< /FONT>

    Przykłady:
    To jest tekst normalny - size=3
    To jest tekst nieco większy - size=4
    To jest tekst największy - size=4
    To jest tekst najmniejszy - size=1

    Możemy jednak także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość.

    Na przykład: To jest tekst normalny, który teraz powiększamy o 1, a następnie zmniejszamy o 1, po czym powracamy do standardowej wielkości.

    Zmiana kroju czcionki

    <FONT FACE="krój"> </FONT>

    Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie FONT FACE="nazwa_kroju". Pozwala ono zmienić krój czcionki dla danego dokumentu.

    Przykłady:
    To jest tekst, który zapewne widzisz jako Times. A teraz zmieniamy go na moment na Arial, przechodzimy do kroju courier, aby powrócić do Times.

    Tekst o kolorze 0000ff, SIZE=5

    Możemy nawet podać listę krojów, oddzielonych przecinkami, dzięki czemu w przeglądarce odbiorcy zostanie zastosowany jeden z nich (na dobrą sprawę nie wiemy, jakimi dysponuje, więc należy być ostrożnym). Szczególnie warto polecać w takich sytuacjach stosowanie ciągu w rodzaju , gdyż zabezpieczymy się w ten sposób przed ryzykiem niepoprawnego wyświetlania polskich znaków w Windows 3.1.


    Znaczniki fizyczne

    atrybuty: <I>, <B>, <U>, <STRIKE>, <BLINK>, <TT>, <SUP>, <SUB>, <BIG>, <SMALL>

    Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów.

    I - czcionka italic (kursywa)
    B -czcionka bold (czcionka gruba)
    U - czcionka podkreślona
    BLINK - migającaTT - teletype (czcionka z maszyny do pisania)
    STRIKE - przekreślona
    SUP - indeks górny
    SUB - indeks dolny

    I - kursywa

    <I>Kursywa</I> Kursywa

    B - gruba (bold)

    <I>Czcionka gruba</I>

    Czcionka gruba

    U - podkreślona (underline)

    <U>Czcionka podkreślona</U>

    Czcionka podkreślona

    STRIKE - przekreślona

    <STRIKE>Czcionka przekreślona</STRIKE>

    Czcionka przekreślona

    BLINK - migająca

    <BLINK>Czcionka migająca</BLINK>

    Czcionka migająca

    TT typu teletype - o stałej szerokości

    Czcionka typu<TT>TeleType - TT</TT>

    Czcionka typu TeleType - TT tintin@belgium.gov

    SUP - czcionka z superskryptem (indeks górny)

    x<SUP>x</SUP>2

    x2

    SUB - czcionka z subskryptem (indeks dolny)

    H<SUP>2</SUP>O

    H2O

    BIG

    To jest czcionka duża - BIG (+1 pkt)

    SMALL

    To jest czcionka mała - SMALL (-1 pkt)

    Dwa znaczniki, np. B I

    <B><I>Pogrubiona i kursywa</I></B>

    Pogrubiona i kursywa


    Znaki specjalne: < > &  

    Znaki:
     &<;   - <
     &>;   - >
     &amp;  - &
     &nbsp; - nie łamiąca spacja
    
    

    Polskie litery

    <META HTTP-EQUIV="Content type" CONTENT "text/html; charset=ISO-8859-2">


    5. ODSYŁACZE

    <A HREF="Adres" >Nazwa</A> - Odnośniki - połączenia miedzy stronami WWW

    <A HREF="http://www.uj.edu.pl">UJ</A>
    <A HREF="http://www.w3.org">Serwer HTML 4.0</A>

    UJ
    Serwer HTML 4.0

    Odnośniki relatywne A HREF="../index.html"

    <A HREF="../index.html">Glowna strona UJ</A>
    Główna strona uj

    Pliki domyślne index.html, default.asp (Microsoft)


    Odwołania wewnątrz dokumentu - kotwice, skoki - pozycjonowanie na stronie WWW

    <A HREF="#Nazwa_kotwicy">Skok do kotwicy</A>

    <A NAME="Nazwa_kotwicy"Kotwica</A>

    czyli

    <A NAME="Ident">Pozycjonowanie na stronie</A>

    Przykład:

    Zapisy w postaci kodu HTML
    <A HREF="#ambr">Skok do kotwicy Ambrozja</A>
    <A NAME="ambr">Ambrozja</A>

    Wyniki na stronie WWW
    Skok do kotwicy Ambrozja
    Ambrozja


    Skoki do list uporządkowanych - przykład książki telefonicznej

    Zapisy w postaci kodu HTML (fragment)

    <a href="#a-c">[A-C]</a>
    <a href="#d-h">[D-H]</a>
    <a href="#i-l">[I-L]</a> 
    <a href="#m-n">[M-N]</a> 
    <a href="#o-s">[O-S]</a> 
    <a href="#t-z">[T-Z]</a>
    
    <a name="a-c">A-C</a>
    Asnyk Adam 324561
    Bieniek Jan 2640001
    Cebula Jacek  123456
    Coletrane, John  (x5544)
    
    <a name="d-h">D-H</a>
    Dudek Jerzy  412354
    Froc Damian 3133111
    Getz Stanisław  222345
    
    itd.
    
    

    Wyniki na stronie WWW

    Książka telefonoczna

    Skróty: [A-C] [D-H] [I-L] [M-N] [O-S] [T-Z]

    A-C

    Asnyk Adam 324561
    Bieniek Jan 2640001
    Cebula Jacek 123456
    Coletrane, John (x5544)

    D-H

    Dudek Jerzy 412354
    Froc Damian 3133111
    Getz Stanisław 222345

    I-L

    Jackson Milt 0434561
    Lafayette Guy 5358123

    M-N

    Monk Thelonious 333333
    Noone Jimmy 335123

    O-S

    Parker Charlie 224141111
    Peterson Oscar 228983
    Reinhardt Django 225351

    T-Z

    Taylor Billy 113311
    Tyner McCoy 114131
    Waller Fats 111321

    Skoki do punktów docelowych w dokumentach zewnętrznych

    <A HREF="plik"#Kotwica>Tekst</A>
    np. <A HREF="prognau.htm#Literatura">Program nauczania (Plik ProgNau.htm). Literatura geodezyjna</A>
    Program nauczania (Plik ProgNau.htm). Literatura geodezyjna


    6. GRAFIKA - UPIĘKSZANIE STRON WEB - obrazki

    Włączanie grafiki - obrazki GIF i JPEG

    <IMG SRC="zrodlo"ALT="Tekst alternatywny dla przeglądarki tekstowej">
    żrodło - plik lokalny lub z Internetu, np. "http:/www.uj.edu.pl/herb.gif" ALT="herb.UJ"

    Przykład: <IMG SRC="znakstop.gif">

    W przeglądarce WWW można oglądać 2 formaty obrazków

    Wyrównanie obrazu - zmienna ALIGN:

    TOP

    CENTER

    BOTTOM

    Odnośniki jako obrazki:

    <A HREF="http:/www.venus.com"><IMG SRC="nakstop" ALT="[STOP]"</A>

    [STOP]Nie wchodź!

    Obrazki pływające

    [HERB UJ] 1) HERB UJ - Align=Top
    top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top top c top

    [HERB UJ] 2) HERB - Align=Left
    left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left left c left

    [HERB UJ] 3) HERB Align=Bottom
    bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom bottom c bottom

    [HERB UJ] 4) HERB - Align=right
    right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right right c right

    [HERB UJ] 5) HERB - Align=center
    center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center center c center

    Dwa obrazki middle
    Tekst przed obrazkami Tekst posrodku Tekst za obrazkami


    7. Tabele


    Ogólne ramy tabeli

    <TABELE> </TAEBLE>

    Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. 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>

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

    <TR> <TD> </TD><TD> </TD></TR>

    </TABLE>

    Przykład:

    <TABLE>
    <TR>
    <TD>a1<TD>a2<TD>a3<TD>a4<TD>a5
    <TD>a1<TD>a2<TD>a3<TD>a4<TD>a5
    <TD>a1<TD>a2<TD>a3<TD>a4<TD>a5
    </TABLE>

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

    Obramowanie tabeli

    <TABLE BORDER> </TABLE>

    Table border=1

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

    <TABLE BORDER=10> </TABLE>

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

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

    Szerokość tabeli

    Tabele przyjmują 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>

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

    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>

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

    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 (akceptują ją Navigator i Internet Explorer, ale HTML 4.0 zaleca unikania tego polecenia).

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

    Wyrównanie tabeli

    <TABLE BORDER ALIGN=right> </TABLE>

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

    to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst

    Jak widać, tekst wstawiony za definicją tabeli "oblewa" ją z jednej lub drugiej strony, zależnie od rodzaju wyrównania.

    <TABLE BORDER=10 ALIGN=left> </TABLE>

    a1 a2 a3 a4 a5
    b1 b2 b3 b4 b5
    c1 c2 c3 c4 c5

    to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to est jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst


    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 (polecenie nie wchodzi w skład HTML 4.0), podając parametr HEIGHT, wyrażony w pikselach lub procencie widocznej strony. W poniższym przykładzie zostały użyte parametry <TABLE BORDER WIDTH="50%" HEIGHT="30%">

    Komórka a1 Komórka a2
    Komórka a3 Komórka a4

    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.

    a1 - do górnego brzegu a2 - do górnego brzegu a3 - do górnego brzegu
    b1 - do górnego brzegu b2 - do dolnego brzegu b3 - do środka

     

    Kolor tła tabeli

    Microsoft Internet Explorer i Nescape Communicator pozwalają wykorzystać kolor tła tabeli (HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów). W tym celu należy w definicji tabeli dodać parametr <BGCOLOR=barwa>, np. <TABLE BORDER HEIGHT=200 BGCOLOR=yellow>

    Kolory - Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver (silver), Yellow, Aqua

     


    Przykłady tabel:

    Przykład 1.

    Kod:

    <TABLE BORDER=10>
    <TR>
    <TD>1)
    <TD>2)
    <TR>
    <TD>3)
    <TD>4)
    </TABLE>

    Tabela:

    1) 2)
    3) 4)

     

    Przykład 2.

    Kod:
    <table border="10">
    <tr>
    <td align="center">1) Align=center </td>
    <td>2)
    <tr>
    <td valign="top">3) Valign=top
    <td>4)
    </table>

    Tabela:

    1) Align=center 2)
    3) Valign=top 4)

    Laczenie komorek w tabeli - COLSPAN, ROWSPAN

    Przykład 3

    COLSPAN - łączenie kolumn:

    Kod:

    <TABLE BORDER=5>
    <TR> <TD COLSPAN=2>1)+2)
    <TR> <TD>3) <TD>4)
    </TABLE>:

    Tabela

    Komórka1 + Komórka2
    Komórka 3 Komórka 4

     

    Przykład 4
    Laczenie wierszy - ROWSPAN

    Tabela

    1)+3) 2)
    4)

     

    Sterowanie szerokoscia komorek w tabeli - piksele

    Przykład 5

    Kod
    <TABLE>
    <tr>
    <td width="370">Duzo tekstu
    <td width="200">mniej tekstu
    </table>

    Tabela

    Duzo tekstu mniej tekstu

     

    Przykład 6. Sterowanie szerokoscia komorek w tabeli - obrazek

    Kod
    <table border="10">
    <tr>
    <td width="100"><img src="egipt.bmp" alt="egipt" align="top" width="32" height="100">Tekst1 Tekst1a
    <td width="200">Tekst2

    Tabela

    egiptTekst1
    Tekst1a
    Tekst2

     

    Przykład 7. Sterowanie szerokoscia calej tabelki

    Tabela

    Tekst2

     

    Przykład 8. Pływające tabelki

    Tabela

    Tekst2

     

    Przykład 9. Pływające tabelki: ALIGN, 'Zwykly tekst' poza tabela'


    Align='center'

    Zwykly tekst - linia1
    Linia2

     

    Przykład 10 - Caption

    <center>
    <table border="5" width="50%">
    <tr>
    <th>Show</th>
    <th>Dzień</th>
    </tr>
    <tr>
    <td align="center">
    Sherlock Holmes
    </td>
    <td align="center">Poniedziałek </td>
    </tr>
    <tr>
    <td align="center">Bonanza</td>
    <td align="center">Poniedziałek </td>
    </tr>
    <caption align="bottom"><b>Wielkie pokazy</b></caption>
    </table> </center>

    Show Dzień
    Sherlock Holmes Poniedziałek
    Bonanza Poniedziałek
    Wielkie pokazy