ezHTML – środowisko robocze
Po uruchomieniu edytora znaczników HTML ujrzymy poniższe okno.
U góry znajduje się menu i pasek narzędzi. Po lewej stronie widnieje panel plików. Biały obszar, w którym miga kursor to obszar roboczy. Tu wpisujemy kod HTML.
ezHTML – wiadomości podstawowe
Struktura dokumentu HTML
Cały dokument powinien być objęty parą znaczników <html> </html>. Między nimi powinna się znaleźć para znaczników <head> </head>, stanowiąca ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte znacznikami <body> </body>. Wygląda to następująco:
<html>
<head>
Informacje nagłówkowe
</head>
<body>
Właściwa treść (ciało) dokumentu
</body>
</html>
Tytuł strony i strona kodowa dokumentu
Gdy otwieramy jakąś stronę w przeglądarce, na belce tytułowej widzimy zwykle jej tytuł (np. Strona Adama Nowaka). W części nagłówkowej należy więc zawsze wstawiać tytuł, np.:
<title>Strona Adama Nowaka</title>
Tytułu strony nie należy mylić z tytułami w treści dokumentu.
W systemie operacyjnym Windows standardem jest strona kodowa Windows-1250. Jednak właściwą stroną kodową dokumentu HTML jest ISO-8859-2. Jest to standard międzynarodowy przyjęty przez stosowne ciała kodyfikujące. Deklarację strony kodowej należy wstawiać do każdego dokumentu HTML.
Rozpoczęcie tworzenia strony internetowej
Aby wprowadzić strukturę dokumentu zawierającą omówione wyżej niezbędne elementy w zakładce Podstawowe klikamy narzędzie Szybki start. Ukaże się okno dialogowe, w którym wpisujemy tytuł strony, ustalamy odpowiednią stronę kodową i zatwierdzamy klikając przycisk [Gotowe!]:
W obszarze roboczym powstanie zarys kodu tworzonego dokumentu. Kursor miga w sekcji BODY, gdzie wpisujemy kod ciała tworzonej strony.
ezHTML – praca z tekstem
Tytuły
Tytułami nazywamy specjalnie wyróżnione akapity nazywające w jakiś sposób pewne fragmenty tekstu. Mają one różny stopień – od 1 do 6.
Uruchom teraz Kurs HTML i w temacie HTML wybierz rozdział Tekst. Zapoznaj się z podtematem TYTUŁ.
Wstawimy teraz do dokumentu wyśrodkowany tytuł stopnia pierwszego. W tym celu należy w pasku narzędzi kliknąć zakładkę Czcionki, a następnie ikonę H1.
Znacznik zostanie wstawiony do obszaru roboczego, a w panelu plików pojawi się edytor znaczników (tagów). Właściwości align (wyrównanie) nadajemy wartość center. Pomiędzy znacznikami wpisujemy z klawiatury treść tytułu. Po kliknięciu na ikonę zobaczymy podgląd tworzonej strony (aby powrócić do edycji dokumentu klikamy ikonę ).
Uzupełnij teraz kod dokumentu tak, aby uzyskać poniższy efekt:
Paragrafy (akapity)
W Kursie HTML przeczytaj teraz podtemat PARAGRAF. Zamieszczona jest tu m.in. uwaga, że atrybut align (wyrównanie) jest zdeprecjonowany. Oznacza to, że World Wide Web Consortium uznało rozmaite znaczniki i atrybuty za schyłkowe. Zaleca się sukcesywne rezygnowanie z ich stosowania w dokumentach HTML. W wielu sytuacjach użycie starszych poleceń jest jednak szybsze i wygodniejsze, a przeglądarki prawidłowo interpretują polecenia schyłkowe. My będziemy je stosować, choć w przyszłości poznamy również inne metody (np. style).
Utworzymy teraz na naszej stronie kilka paragrafów (akapitów).W tym celu, aby utworzyć akapit wyrównany do lewej, klikniemy zakładkę Format i narzędzie Nowy paragraf. W edytorze znaczników ustalimy wartość atrybutu align na left i wpiszemy między znacznikami treść akapitu:
W podobny sposób wstaw dwa następne akapity tak, aby uzyskać poniższy efekt:
Pasek użytkownika
Zauważyłeś już zapewne, że aby uzyskać dostęp do różnych narzędzi wstawiających odpowiednie znaczniki musimy przemiennie wybierać różne zakładki paska narzędzi (Podstawowe, Format, Style, Czcionki itd.). Niektóre narzędzia używane są częściej od pozostałych. Należy do nich też narzędzie Nowy paragraf. Aby mieć do niego stały dostęp kliknij na jegi ikonie prawym przyciskiem myszki, w oknie dialogowym wybierz przycisk [1] i kliknij [Gotowe!]. Przycisk ten znajdzie się automatycznie na pasku użytkownika.
Analogicznie przenieś narzędzie <BR> na przycisk [2]. W efekcie uzyskasz stały bezpośredni dostęp do tych narzędzi:
Koniec linii
Jeśli pisząc treść akapitu chcesz wymusić przejście do następnej linii, to nie możesz tego uczynić wciskając[ENTER], gdyż znak ten będzie zignorowany przez przeglądarkę. Zamiast tego musisz wstawić znacznik <br>. Wpisz teraz kod:
<p align="left">To jest pierwsza linijka akapitu.<br>To druga bezpośrednio niżej.<br><br><br>A to trzecia po dwu liniach przerwy</p>
i obejrzyj efekt:
ezHTML – praca z tekstem – cd.
Czcionka (font)
Tworząc dokument HTML możemy używać różnych krojów i wielkości czcionki, a także ustalać jej kolor. W kursie HTML w rozdziale Tekst zapoznaj się teraz z podtematem CZCIONKA. Zwróć uwagę, że dostępnych jest tylko 7 różnych wielkości czcionki.
W programie ezHTML otwórz teraz nowy dokument i wykorzystując narzędzie Szybki start utwórz szkielet strony internetowej podając koniecznie tytuł strony (np. Strona testowa) oraz wybierając odpowiednią stronę kodową (ISO-8859-2).
W sekcji <BODY> wstawimy teraz jakiś tekst ustalając równocześnie niektóre właściwości czcionki. W tym celu w zakładce Czcionki klikamy narzędzie Wybierz czcionkę. W oknie dialogowym Czcionka wybieramy krój Arial, styl pogrubionej kursywy, rozmiar 20 pkt., zaznaczamy Podkreślenie i kolor czcionki fuksja. Akceptujemy wybór klikając [OK].
Znacznik otwierający <font> pozostaje zaznaczony, a w panelu plików w edytorze znaczników możemy zmienić wielkość, krój i kolor czcionki:
Zauważ, że wielkość czcionki została zamieniona na 5, czyli w praktyce 24, a nie 20 pkt. Teraz pomiędzy znacznikami wpisujemy przykładowy tekst.
<b><i><u><font size=5 face="Arial" color="#FF00FF">Tekst przykładowy</font></u></i></b>
W trybie podglądu widać efekt wprowadzenia tego fragmentu kodu:
Oczywiście znaczniki <b>, <i> oraz <u> odpowiadają odpowiednio za pogrubienie, pochylenie i podkreślenie czcionki.
Kodowanie koloru w języku HTML
Przyjrzyjmy się teraz bliżej wprowadzonemu kodowi. Kolor „fuksja” został zakodowany jako #FF00FF. Jest to kod szesnastkowy odpowiadający 16-milionowej palecie RGB. Pierwsze dwie cyfry odpowiadają nasyceniu koloru czerwonego, następne dwie – koloru zielonego, a ostatnie dwie odpowiadają za kolor niebieski. W oknie dialogowym Czcionka mamy do dyspozycji 16 kolorów podstawowych, reprezentowanych również na belce narzędziowej programu ezHTML:
Możemy jednak ustalić kolor (w tym przypadku kolor czcionki) na dowolny spośród 16 777 216 odcieni. W tym celu w kodzie programu zaznaczamy myszką kod koloru
i klikamy narzędzie Wybierz niestandardowy kolor (). W prawej części okna dialogowego Kolor przesuwamy odpowiednio suwaki aż do uzyskania pożądanego koloru w okienku Kolor pełny i klikamy [OK]. Zmieni się zarówno kod programu, jak i oczywiście efekt optyczny.
Omówiony sposób zmiany kodu koloru dotyczy oczywiście nie tylko koloru czcionki, ale również kolorów innych elementów tworzonej strony.
Pogrubienie, pochylenie, podkreślenie i przekreślenie czcionki
Przeczytaj odpowiednie podrozdziały w rozdziale Tekst kursu HTML. Za pogrubienie, pochylenie i podkreślenie czcionki odpowiadają w naszym edytorze narzędzia umieszczone w zakładce Format. Dopisz teraz odpowiedni fragment kodu i obejrzyj efekt w trybie podglądu:
Zauważ, że konieczne było użycie znacznika <br>, aby kolejne fragmenty tekstu były umieszczane w kolejnych liniach.
Uzupełnij teraz kod dokumentu tak, aby otrzymać poniższy efekt:
Kod tekstu przekreślonego moglibyśmy oczywiście wpisać ręcznie, gdyż nie mamy odpowiedniego narzędzia na belce narzędziowej. Możemy jednak posłużyć się listą znaczników z panela plików. W tym celu w panelu plików klikamy zakładkę Tagi, a następnie przełącznik Lista znaczników do wstawienia ( - na dole panela). Po dwukrotnym kliknięciu na odpowiednim znaczniku zostanie on wstawiony do dokumentu i po wpisaniu odpowiedniego tekstu pomiędzy znacznikami otrzymamy pożądany efekt:
Przeglądając kurs HTML zwróciłeś zapewne uwagę na „sztuczkę” pozwalającą uzyskać efekt tekstu pisanego w jednym kolorze podkreślonego (lub przekreślonego) linią w innym kolorze. Utworzymy teraz napis w kolorze czerwonym podkreślony na zielono. Wymaga to użycia tzw. stylu. W zakładce Style klikamy narzędzie span...
Mario_43