HTML
Język HTML służy do składania stron, które można oglądać w sieci WWW. Określa sposób wyświetlania dokumentu (strony WWW) zawierającego tekst, obrazki, muzykę itp. przez przeglądarki WWW takie jak Netscape Navigator czy Microsoft Internet Explorer.
Podstawowym pojęciem języka HTML jest znacznik. Znacznik rozpoczynamy od znaku mniejszości (<), kończymy znakiem większości (>) pomiędzy którymi zawarte jest polecenie. Znaczniki występują w parach: znacznik otwierający i zamykający (zawiera ukośnik /).
Oto przykład <znacznik> tekst</znacznik>
Słowo „znacznik” oznacza tutaj słowo z języka HTML, natomiast określenie „tekst” to dowolny tekst wstawiony przez twórcę strony.
Znaczniki mogą posiadać parametry, umieszczamy je wtedy wewnątrz znacznika:
<znacznik jakieś-parametry>
Znaczniki można zagnieżdżać tak jak nawiasy w wyrażeniach arytmetycznych i obowiązują tutaj te same reguły, co w przypadku zwykłych nawiasów. Na przykład:
<znacznik1> <znacznik2> jakiś tekst </znacznik2> inny tekst </znacznik1>
W tym przykładzie „jakiś tekst” mieści się w zakresie obydwu znaczników, natomiast „inny tekst” tylko w zakresie zewnętrznego znacznika.
Strona WWW posiada następującą podstawową strukturę:
<html>
<head>
Nagłówek strony
</head>
<body>
Główna część strony
</body>
</html>
W nagłówku strony umieszcza się tytuł strony, informacje o standardzie kodowania polskich liter, informacje dla wyszukiwarek internetowych i inne ważne sprawy. Na początku ograniczymy się jedynie do zdefiniowania tytułu strony. Umieszczamy go między znacznikami <title> oraz </title>. Tak zdefiniowany tekst będzie wyświetlany na górnym pasku okna przeglądarki. Główną część strony zajmują teksty i grafika.
Ćwiczenie 1.
Ćwiczenie 2.
Przejdź do pliku źródłowego (wybierz Widok/Źródło). Wpisz do tekstu znaczniki jak na rysunku
Zapisz zmiany i możesz obejrzeć rezultat (zamknij plik tekstowy i Odśwież).
Tytuły wyróżniamy przy użyciu następujących par znaczników:
<h1> Tytuł główny </h1>
<h2> Podtytuł 1 </h2>
...
<h6> Najmniejszy Podtytuł </h6>
Liczba w znaczniku jest związana z wielkością użytej czcionki ( 1-największa, 2-nieco mniejsza, ..., 6-najmniejsza). Każdy tytuł jest ponadto wyróżniony pogrubieniem czcionki oraz odstępem od otaczającego go tekstu.
<br> - znacznik powoduje przełamanie linijki tekstu i przejście do nowego wiersza. Dwa takie znaczniki obok siebie oznaczają po prostu pustą linijkę.
Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się atrybuty czcionki – pogrubienie, pochylenie i podkreślenie. Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia.
<b> ten tekst będzie pogrubiony </b>
<i> ten tekst będzie pochylony </i>
<u> ten tekst będzie podkreślony </u>
Ćwiczenie 3.
SUM
Mieszkał w Wiśle sum wąsaty,
Znakomity matematyk
Krzyczał więc na całe skrzele:
- Do mnie młodzi przyjaciele!
W dni powszednie i niedzielę
Na życzenie mnożę, dzielę,
Zapisany na stronie tekst możemy wyrównać w dowolny sposób (nie dotyczy to tytułów). Znacznik <p> oznacza początek akapitu, zaś jego parametr align określa sposób wyrównania poszczególnych jego linijek. Możliwe są tutaj następujące wartości:
center - wyśrodkowanie,
left – dosunięcie do lewego marginesu (standard),
right – dosunięcie do prawego marginesu,
justify – wyjustowanie tekstu (wyrównanie do obu marginesów).
Ustalenia znacznika <p> obowiązują aż do końca danego akapitu, czyli do pojawienia się kolejnego znacznika <p>, być może z innymi parametrami, albo do wystąpienia znacznika </p>, który może, ale nie musi wystąpić.
W naszym tekście możemy zmienić krój czcionki, możemy również zastosować różne kroje. Pamiętaj, że zestaw krojów czcionek użytych do realizacji strony pochodzi z komputera odbiorcy strony zatem kroje typowe dla naszego środowiska np. Arial czy Times New Roman mogą nie występować na innych platformach sprzętowych.
Do zmiany kroju czcionki służy znacznik <font>. Posiada on kilka parametrów: face, size oraz color. Zacznijmy od parametru face, który pozwala na wybranie innego niż standardowy kroju czcionki. Standardowy krój to zwykle Times New Roman dla Netscape Navigatora oraz Arial dla Internet Explorera. Oto przykład zmiany kroju czcionki dla treści akapitu:
<font face=PL Erie> Treść akapitu </font>
Oprócz kroju możemy także regulować rozmiar czcionki (size), który określony jest w pewnych umownych jednostkach w skali od 1 (najmniejszy) do 7 (największy). Rozmiar standardowy to 3 jednostki, zwykle odpowiada mu wielkość 12 punktów, numerowi 4 – 14 punktów, numerowi 2 – 10 punktów i tak dalej.
Tak więc możemy wybrany fragment tekstu złożyć krojem o zadanej wielkości:
<font size=4> Fragment tekstu </font>
Możemy także podawać zmianę rozmiaru czcionki przez poprzedzenie liczby znakiem plus lub minus. I tak określenie
<font size=+1> Fragment tekstu </font>
oznacza krój o stopień większy od używanego dotychczas, natomiast
<font size=-2> Inny fragment tekstu </font>
oznacza krój o dwa stopnie mniejszy od używanego do tej pory.
Możemy również zmienić kolory poszczególnych fragmentów tekstu przez dodanie parametru color do znacznika <font>, np.:
<font size=7 color=yellow> Okazja! </font>
Kolory możemy definiować za pomocą wartości szesnastkowych, albo za pomocą ich nazw. Oto kilka podstawowych barw: black, silver (tego koloru nie widać, gdyż zlewa się z tłem strony), gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua.
Często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <hr>. Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta.
Ćwiczenie 4.
Otwórz nasz plik źródłowy i dopisz tekst wraz ze znacznikami
Zapisz zmiany zobacz rezultat.
Ćwiczenie 5.
1. W pliku poezja ustaw różną wielkość czcionki i różny kolor dla każdej linijki tekstu.
2. Wstaw po każdych dwóch wierszach poziomą linię.
3. Zapisz zmiany zobacz rezultat.
Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie. Stosowane są dwa podstawowe formaty bitowych plików graficznych – GIF i JPG, które z założenia są skompresowane często nawet dziesięciokrotnie bardziej niż inne popularne formaty, a więc zajmują znacznie mniej miejsca i dzięki temu transmisja strony trwa znacznie krócej.
Grafikę możemy wprowadzić za pomocą polecenia:
<img src=”D:\ Nazwa_katalogu\nazwa_pliku.rozszerzenie”>
Najlepiej, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę, bez podanie ścieżki dostępu. Na przykład:
<img src=”nazwa_pliku.rozszerzenie”>
Ćwiczenie 6.
Znacznik powodujący włączenie grafiki - <img> - może mieć dużą ilość parametrów. Do najważniejszych z nich (oprócz src) należą parametry width i height, które decydują o rozmiarach przedstawionego obrazu. Jeśli dodamy parametr
<img src=”nazwa_pliku” height=200>
to nasz obrazek zostanie powiększony. Wysokość zwiększy się do 200 pikseli, zaś szerokość zostanie proporcjonalnie powiększona. Można podać obydwa parametry (w dowolnej kolejności), ale na ogół będzie to oznaczało deformację obrazu przez zmianę jego proporcji:
<img src=”nazwa_pliku” height=200 width=100>
Można podawać szerokość i wysokość obrazu w pikselach, a można podawać też w procentach: za 100% jest przyjmowany odpowiedni wymiar okna przeglądarki, na przykład:
<img src=”nazwa_pliku” width=50%>
Taki obrazek zajmuje dokładnie połowę szerokości okna bez względu na jego rozmiar i zdolność rozdzielczą ekranu odbiorcy strony.
Jeśli chcemy, żeby tekst został przedstawiony na stronie dokładnie tak jak został napisany w pliku HTML (wcięcia, nowe linie) należy użyć znacznika <pre> ...</pre>. Jako przykład wpiszmy treść programu napisanego w języku Pascal.
Ćwiczenie 7.
<pre>
Program StoKłamstw;
var
i: integer;
begin
for i:=1 to 100 do
writeln (‘Kocham Cię!’)
end.
</pre>
Aby utworzyć listy wypunktowane, należy użyć polecenia <ul> ... </ul>. Poszczególne punkty wykazu wprowadzamy za pomocą polecenia <li>.
Ćwiczenie 8.
<head> <title> HTML - Listy </title> </head>
<p><b><i> Dlaczego zajmuję się UFO?</b> </i></p>
<ul>
<li> Uważam, że UFO istnieje </li>
<li> Uważam, że pozaziemskie cywilizacje mogą nam pomóc </li>
<li> Uważam, że należy się przygotować na spotkanie </li>
Lista czterech zagadnień umieszczona między znacznikami <ul> ... </ul> jest listą podpunktów bez kolejnych numerów porządkowych, oznaczonych jedynie dużymi kropkami z lewej strony. Jeśli chcemy, aby kolejne pozycje na liście otrzymały numery porządkowe należy znaczniki <ul> ... </ul> zastąpić znacznikami <ol> ... </ol>.
Ćwiczenie 9.
Tabelki są ważnym narzędziem języka HTML służącym do rozmieszczania tekstu na stronie. Przy ich pomocy możemy poprawnie ułożyć wszelkie zestawienia i kolumny tekstu, ale także możemy użyć ich do rozmieszczenia grafiki względem tekstu. Zaczniemy od bardzo prostego przykładu tabelki zawierającej dwie kolumny tekstu. Cała zawartość tabelki mieści się między znacznikami <table> ... </table> (nie zapominaj o znaczniku zamykającym tabelkę, bo nie zostanie ona w ogóle zamieszczona na stronie). Każdy wiersz tabelki zaczyna się od znacznika <tr>. Zaś każda pozycja w wierszu od znacznika <td>. Przeglądarka przetwarza tabelkę jako całość. Szerokość kolumny zostanie dopasowana do najdłuższego napisu w danej kolumnie.
michael2679