HTML - podstawowe znaczniki

Strukturę dokumentu HTML możemy przedstawić następujšco:

<HTML>

    <HEAD>

        <TITLE>Tytuł strony</TITLE>

    </HEAD>

    <BODY>

    </BODY>

</HTML>

W niej zagnieżdżać będziemy pozostałe znaczniki.

Wiersze i akapity

Każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "zwykły tekst". Gdybyœmy jednak wpisali dłuższy fragment tekstu, rozdzielajšc w edytorze akapity za pomocš klawisza Enter, przeglšdarka zignoruje znaki końca wierszy i akapitów i wyœwietli jednolity blok tekstu. Aby rozdzielić akapity, należy się posłużyć się znacznikiem <P> (P = paragraph), który wstawi interlinie między poszczególne fragmenty tekstu. Znacznikiem zamykajšcym jest </P>.

Przykład:

<P>Treœć pierwszego akapitu</P>

<P>Treœć drugiego akapitu</P>

Aby przełamać tekst, nie wprowadzajšc przy tym znaku końca akapitu, możemy zastosować pojedynczy znacznik <BR>, który przenosi tekst o jeden wiersz w dół nie wprowadzajšc dodatkowej interlinii.

Pierwszy wiersz<BR>
Drugi wiersz<BR>
Trzeci wiersz<BR>

Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między paragrafami. Znacznik <BR> nie występuje w parze ze znacznikiem zamykajšcym.


Tytuły

W dokumentach często wprowadzamy nagłówki, tytuły. Służy do tego para znaczników <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (jest ich szeœć). Przykładowo polecenie wprowadzajšce tytuł stopnia pierwszego składa się ze znacznika otwierajšcego <H1> i zamykajšcego </H1>. Im wyższy numer nagłówka tym mniejsza czcionka. .

Tytuł 1

Tytuł 2

Tytuł 3

Tytuł 4

Tytuł 5
Tytuł 6

Pozioma linia

Często spotykanym elementem jest linia pozioma , którš wstawiamy za pomocš znacznika <HR> (ang. horizontal rule).

Linia może być bez cieniowania

<HR NOSHADE>

Możemy okreœlić dowolnš gruboœć linii

<HR SIZE=5>


Linia może mieć okreœlonš w pikselach długoœć

<HR WIDTH=300>


lub długoœć wyrażonš w procencie szerokoœci strony

<HR WIDTH=50%>


Linia może być umieszczona na œrodku (domyœlnie)

<HR ALIGN=center>

Może być wyrównana do lewego lub do prawego brzegu strony

<HR ALIGN=left>

<HR ALIGN=right>

Innš możliwoœciš jest ustawienie koloru linii poziomej .

<HR COLOR="nazwa_koloru">
 


Punktowanie, numerowanie

Podobnie jak w edytorach tekstów na stronach www czasami stosujemy wypunktowanie lub numerowanie.

Aby utworzyć strukturę wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang. unordered list). W rstrukturze umieszczamy z kolei poszczególne punkty wykazu, które wprowadzamy za pomocš znacznika <LI>

Przykład:

<P>Moje zainteresowania:</P>

<UL>
<LI>Informatyka</LI>
<LI>Muzyka klasyczna</LI>
<LI>Astronomia</LI>
</UL>

Wykazy numerowane uzyskamy stosujšc  <OL> i </OL> zamiast <UL> i </UL> (ang. ordered list).

Możemy dodatkowo wybrać typ numeracji: a, A, i, I  1 (domyœlny).

Przykład:

 <OL TYPE=a>


Atrybuty czcionki

Aby tekst w przeglšdarce nie wyglšdał wszędzie tak samo, stosujemy  dodatkowe atrybuty czcionki - pogrubienie (bold), pochylenie (italic) i podkreœlenie (underlined). Atrybuty pozwalajš uwypuklić okreœlone fragmenty tekstu.

<B>Tekst pogrubiony</B>

<I>Tekst pochylony</I>

<U>Tekst podkreœlony</U>

W dokumentach HTML stosuje się nieco innš definicję wielkoœci czcionki niż przyjęta w edytorach tekstów. Podstawowa czcionka ma wielkoœć 3 jednostek i jest zazwyczaj wyœwietlana w przeglšdarkach WWW jako czcionka 10-12-punktowa.. W dokumencie możemy stosować czcionkę o wielkoœci od 1 do 7. Im większa wartoœć, tym większa czcionka w przeglšdarce.

Znacznik okreœlajšcy wielkoœć czcionki, ma następujšcš postać:

<FONT SIZE="x">Tekst</FONT>

x = 1...7

Gdy w taki właœnie sposób definiujemy wielkoœć czcionki, nadajemy jej wartoœć absolutnš. Możemy jednak także nadać wartoœć relatywnš, czyli względnš, podajšc wielkoœć zmiany. Skoro czcionka standardowa ma wielkoœć 3, możemy dodać do niej co najwyżej 4 jednostki lub odjšć co najwyżej 2. Gdyby czcionka podstawowa miała wielkoœć 1, moglibyœmy dodać 6, ale już niczego nie moglibyœmy odejmować.

<FONT SIZE="+x">Tekst</FONT>

<FONT SIZE="-x">Tekst objęty</FONT>

x = 1...6

W podobny sposób możemy zmieniać kolor czcionki:

<FONT COLOR="kolor">Tekst</FONT>

Kolory możemy definiować w postaci tradycyjnej, a więc za pomocš wartoœci szesnastkowych (np. kolor biały ma wartoœć #FFFFFF, a czarny #000000), albo za pomocš ich nazw. Wszystkie popularne przeglšdarki akceptujš wartoœci heksadecymalne (w formacie RRGGBB, gdzie RR - składowa czerwona, GG - składowa zielona, BB - składowa niebieska), aczkolwiek ich wprowadzanie wymaga wspomagania w edytorze HTML.

Internet Explorer i Netscape Navigator interpretujš również nazwy kolorów. Poczštkowo można było się posłużyć jednš z 16 barw, zaœ ostatnio paleta rozszerzyła się do 256 kolorów. Najczęœciej jednak przy definiowaniu koloru tekstu wystarczy 16 barw i można przyjšć, że posługiwanie się nazwami kolorów jest najwygodniejszš metodš ich definiowania.

Przykłady:

black, silver, gray, maroon, red, purple, fuchsia, green, lime, olive, yellow,,navy, blue, teal, aqua.


Grafika

Grafika na stronach www jest bardzo istotnym elementem - urozmaica ich czytanie.

Na stronach WWW sš stosowane dwa podstawowe formaty bitowych plików graficznych - GIF i JPG (JPEG) - które sš z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych popularnych formatów), a więc zajmujš znacznie mniej miejsca grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej.

Grafikę możemy wprowadzić na stronę za pomocš znacznika:

<IMG SRC="nazwa_pliku">

W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy w odrębnym katalogu, konieczne jest podanie œcieżki dostępu.

Przykład:

<IMG SRC="grafika/domek.gif">

Wielkoœć obrazka możemy regulować za pomocš parametrów HEIGHT (wysokoœć) i WIDTH (szerokoœć).

<IMG SRC="domek.gif" HEIGHT=100>

<IMG SRC="domek.gif" WIDTH=200>

<IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50>

 

Parametr BORDER=x pozwala wyœwietlić wokół obrazka ramkę o gruboœci równej x pikseli:

<IMG SRC="domek.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="domek.gif" HSPACE=50>

<IMG SRC="tucows.gif" VSPACE=50>

 

Parametr, ALIGN=..., steruje pozycjš obrazka w stosunku do oblewajšcego go akapitu.

Jeżeli chcemy umieœcić obrazek na œrodku wiersza, musimy objšć go znacznikami <CENTER></CENTER>

Obrazek można też umieœcić w komórce tabeli, wstawiajšc między znacznikami komórki <TD></TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglšdajšcych obramowań.


Pływajšce napisy (neony)

Efektownym elementem jest pływajšcy napis zwany też neonem.

Animacja napisu można sterować.

Minimalna definicja ma postać <MARQUEE>Tekst </MARQUEE>.

Tekst może poruszać się 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).

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.

Parametry HSPACE=x i VSPACE=y pozwalajš okreœlić odległoœć pola animacji w poziomie i/lub w pionie od sšsiadujšcych elementów, np. tekstu.

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.

 Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokoœci pola) znajduje się tekst sšsiadujšcy z animacjš.

Mój neon


Przykładowa strona

<HTML>
    <HEAD>
        <TITLE>Moja strona</TITLE>
    </HEAD>
    <BODY BGCOLOR="yellow">
        <H1 ALIGN="center">Moja strona WWW</H1>
        <P>To jest moja pierwsza strona WWW. Czytam kolejne lekcje "e-nauki" i poznaję znaczniki <FONT FACE="Arial CE" SIZE="+1"                   
            COLOR="Red"><B>HTML</B></FONT>. Uczę się tworzenia stron WWW.</P>
        <H3>E-nauka obejmuje 11 tematów:</H3>
    <OL TYPE=I>
        <LI>Algorytmika i programowanie</LI>
        <LI>Animacje komputerowe</LI>
        <LI>Edukacja regionalna</LI>
        <LI>Grafika komputerowa</LI>
        <LI>Metoda projektu w nauczaniu</LI>
        <LI>Moja szkoła w Unii Europejskiej</LI>
        <LI>Multimedia w szkole</LI>
        <LI>Ocenianie w szkole</LI>
        <LI>Oprogramowanie alternatywne</LI>
        <LI>Projektowanie witryn www</LI>
        <LI>Szkolny portal internetowy</LI>
    </OL>
    <HR WIDTH=80% SIZE=5 COLOR="blue">
    <P ALIGN="center"><IMG SRC="WYKRZ.GIF"></P>
     <MARQUEE BEHAVIOR=SCROLL BGCOLOR="pink">WODIiP Opole </MARQUEE>.
    </BODY>
</HTML>

Zadanie

Korzystajšc z "Notatnika" i posługujšc się podstawowymi znacznikami HTML utwórz stronę www, na której umieœć trochę informacji o sobie, np. zainteresowania, nauczany przedmiot, swoje zdjęcie itp. Nie stosuj żadnych edytorów HTML.