<body onLoad="showtime()"><h1></h1&

<null>#4345652671</null>
<null>#4345652671</null>
<null>#4345653791</null>
<null>#4345437831</null>
<null>#4345763901</null>
<null>#4345432431</null>
<null>#4345657691</null>
<null>#4345165831</null>
<null>#4345184031</null>
<null>#4345158731</null>
<null>#4345615741</null>

W tym rozdziale:

14. Wstawianie własnego kodu HTML
14.1. Określanie właściwości i testowanie pola z kodem HTML
14.2. Porady dotyczące wstawiania własnego kodu HTML

Zasadniczo WebMajster nie jest przeznaczony do pracy z kodem HTML. Jednak wielu użytkowników chce wprowadzić na swoją stronę kod sondy, webringu lub kod HTML systemu wymiany banerowej itp. - do tego potrzebna jest możliwość umieszczenia na stronie własnego kodu HTML.

Na procedurę wstawienia własnego kodu HTML składa się etap uzyskania kodu, skopiowania go do schowka i wklejenia w edytorze WebMajster i na koniec przetestowania działania strony na podglądzie oraz wprowadzenia ew. poprawek we właściwościach pola kodu HTML.

Każdy dokument HTML posiada następującą strukturę:

<HTML>
<HEAD>
<TITLE>Tutaj jest tytuł</TITLE>
</HEAD>
<BODY>
<P>To jest jakaś treść.</P>
</BODY>
</HTML>

Kod strony musi być ograniczony znacznikami <HTML>...</HTML> - w ten sposób przeglądarka wie, że ma do czynienia z dokumentem HTML. Pomiędzy znacznikami <HEAD> i </HEAD> zapisywane są ustawienia, które nie pokazują się w oknie dokumentu, ale mają znaczenie dla wyświetlenia strony, np. znacznik <TITLE> definiuje tytuł strony - ten, który pojawia się na pasku tytułu twojej przeglądarki. Obszar pomiędzy znacznikami <BODY> i </BODY> zawiera całą widoczną w oknie przeglądarki treść strony.

Znaczniki ustawia się przed i za danym fragmentem tekstu. Np. aby poinformować przeglądarkę, że określony fragment należy wyświetlić czcionką pogrubioną, należy "objąć" tekst znacznikami: <B>tekst pogrubiony</B>. Język HTML zawiera oczywiście wiele innych znaczników, które pomagają sformatować stronę, tekst na stronie oraz grafikę. HTML zawiera znaczniki umożliwiające osadzanie na stronie odnośników do innych stron, formularzy oraz rozmaitych składników multimedialnych.

WebMajster podczas budowania strony tworzy kod HTML, w tym sekcję <HEAD> … </HEAD> oraz <BODY> … </BODY>. Poprzez narzędzie Wstaw - Kod HTML można wprowadzić własny kod HTML, który powinien znajdować się wewnątrz sekcji <BODY>. Jeśli kod jest bardziej skomplikowany, np. wymaga modyfikacji sekcji <HEAD> - nagłówka strony - należy odpowiedni fragment kodu wstawić do strony poprzez menu Strona – Head i wstawić go w pole edycji nagłówka. W pole edycji nagłówka wstawia się najczęściej funkcje języka JavaScript oraz definicje arkuszy stylów.

Aby wstawić na stronie własny kod HTML:

Skopiuj zaznaczony kod HTML do schowka za pomocą skrótu klawiszowego ctrl+insert lub ctrl+c.
W edytorze WebMajster z menu Wstaw wybierz polecenie Kod HTML. Otworzy się okno dialogowe Kod HTML.
Wklej do okienka skopiowany fragment kodu HTML za pomocą skrótu klawiszowego shift+insert lub ctrl+v.
Kliknij OK. W polu edycji pojawi się pole . Możesz użyć myszki, aby zmienić położenie i rozmiar pola zawierającego kod HTML.

Aby wstawić do nagłówka strony własny kod:

Skopiuj zaznaczony kod do schowka za pomocą skrótu klawiszowego ctrl+insert lub ctrl+c.
W edytorze WebMajster z menu Strona wybierz polecenie HEAD. Otworzy się okno dialogowe Blok <head>…</head> – rys. 14-1.
Wklej do okienka skopiowany kod za pomocą skrótu klawiszowego shift+insert lub ctrl+v.
Kliknij OK.

14-1. Pole edycji nagłówka

Kod JavaScript

Istnieją przykłady JavaScript, które wymagają zdefiniowania pewnych funkcji w nagłówku i następnie wywołania ich podczas ładowania strony do przeglądarki. Wywołanie takich funkcji możliwe jest przez wstawienie do znacznika <body> atrybutu OnLoad, którego wartością będzie nazwa funkcji. WebMajster umożliwia wywołanie zdarzenia Onload. Na przykład jeśli w nagłówku umieszczono kod funkcji o nazwie function showtime() i funkcja ta powinna być wywołana wraz ze zdarzeniem OnLoad, to w kodzie HTML zapis wygląda następująco:

<body onLoad="showtime()">

W WebMajstrze funkcję showtime() wywołuje się po wpisaniu jej nazwy do pola OnLoad okna dialogowego Właściwości strony.

Aby wywołać funkcję ze zdarzeniem OnLoad:

Kliknij przycisk na pasku narzędziowym
- lub -
z menu Strona wybierz polecenie Właściwości. Otworzy się okno dialogowe pokazane na rysunku 14-2.
Wstaw nazwę funkcji w pole OnLoad.
Kliknij OK.

14-2. Właściwości strony

<lurlnull>http://republika.onet.pl/1,637,87,pomoc.html</lurlnull>

Kod poprawny semantycznie

Patrząc na liczbę znaczników, służących do formatowania tekstu na ekranie przeglądarki internetowej, można się zastanawiać: po co jest ich aż tyle? Jaki był sens wprowadzania znacznika <strong>...</strong> (mocne wyróżnienie), skoro właściwie zwykle jest on wyświetlany tak samo jak <b>...</b> (pogrubienie) Question

Czy nie lepiej tworzyć akapity za pomocą podwójnych znaczników <br /> zamiast <p>...</p> Question

Czy to aby nie jest pomyłka organizacji W3C, że wprowadzono znacznik <h1>...</h1> (tytuł rozdziału), skoro ten sam efekt można uzyskać dobierając odpowiednią czcionkę za pomocą znacznika <font>...</font> Question

Otóż na pewno nie jest to pomyłka. W języku (X)HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu:

Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER (wyśrodkowanie), B (pogrubienie), I (pochylenie), U (podkreślenie), S i STRIKE (przekreślenie), FONT (czcionka), BASEFONT (czcionka bazowa), BIG (czcionka powiększona) SMALL (czcionka pomniejszona). Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu. Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony.
Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: Hn (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), ACRONYM (akronim), DFN (definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>...</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie, aby jakaś specjalna przeglądarka wyświetliła go normalnie, a jedynie ze zmienionym na czerwono kolorem.

W przypadku znaczników semantycznych to nie sposób formatowania jest najważniejszy, ale informacje jakie ze sobą niosą. Element <strong>...</strong> wskazuje, że objęty nimi tekst jest bardzo ważny. <code>...</code> daje do zrozumienia, że jest to fragment kodu komputerowego - np. jakiegoś programu. <acronym>...</acronym> i <abbr>...</abbr> to wspólnie z <q>...</q> i <cite>...</cite> jedne z najbardziej "niedocenianych" znaczników. Tymczasem niosą ze sobą niezwykle ważne informacje.
Komu to jest potrzebne?

Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe przeglądarki internetowe, wyróżniając je w specjalny, właściwy sobie sposób.

Znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy, czyli specjalnych przeglądarek, które odczytują treść stron WWW na głos. Używane są najczęściej przez osoby niewidome. Taka osoba nie zobaczy koloru czcionki i nie będzie wiedzieć, że gdzieś tekst został wytłuszczony w tradycyjny sposób. Natomiast używany syntezator mowy, kiedy natrafi na znacznik <strong>...</strong>, może specjalnie podkreślić tonem głosu zawarty w nim tekst. Wprost nieocenioną pomocą dla syntezatorów mowy są znaczniki akronimów i skrótów. Aplikacje takie mają zwykle wbudowaną bazę najpopularniejszych skrótów i akronimów, a więc kiedy na nie natrafią, mogą odczytać ich pełną nazwę, a nie literować. Oczywiście najpierw trzeba poinformować syntezator, że dany wyraz jest skrótem lub akronimem, a nie jakąś specjalną nazwą, którą używasz w swoim tekście. Jeżeli używasz skrótów lub akronimów, które są dość mało znane, zalecane jest dodanie atrybutu title="...", w którym można umieścić pełne rozwinięcie nazwy. Wyeliminuje to konieczność domyślania się rozwinięcia przez syntezator i ewentualnych pomyłek (jeden akronim może mieć zupełnie różne rozwinięcia w różnych dziedzinach wiedzy). Ważne jest również, aby prawidłowo odróżniać akronimy (<acronym>...</acronym>) od zwykłych skrótów (<abbr>...</abbr>), ponieważ może to mieć wpływ na sposób ich odczytania przez syntezator mowy - skróty zwykle rozwija się do pełnej formy, podczas gdy akronimy literuje.

Jeżeli nie sądzisz, aby Twoja strona mogła być kiedykolwiek odwiedzona przez osobę niewidomą (nigdy tego nie zakładaj, bo możesz się bardzo zdziwić Exclamation

), na pewno nie możesz zlekceważyć, że właściwe oznaczanie tekstu za pomocą znaczników semantycznych ma niebagatelne znaczenie dla robotów wyszukiwarek sieciowych. Są to aplikacje, które przez cały czas szukają nowych stron w Internecie i sprawdzają, czy stare się nie zmieniły. Za pomocą specjalnego algorytmu informatycznego przetwarzającego treść odwiedzanych stron, zapisują linki do nich w bazie danych przyporządkowując je do odpowiednich słów kluczowych (haseł). Z tej bazy danych korzystają następnie wyszukiwarki sieciowe, takie jak Google, kiedy użytkownicy przeszukują Internet za ich pośrednictwem. Aby serwis WWW mógł być popularny, konieczne jest takie zbudowanie treści, aby była ona przyjazna dla robotów wyszukiwarek, ponieważ inaczej trudno go będzie komukolwiek odszukać. Może to zabrzmi dziwnie, ale można powiedzieć, że roboty wyszukiwarek są "niewidome" Exclamation

Dlatego na pewno docenią, że chcesz im pomóc w prawidłowym zaindeksowaniu (zapisaniu informacji o stronie w bazie danych) swojej strony. Mogą się odwdzięczyć oczywiście wyższą pozycją na liście wyszukiwania, co bezpośrednio wpłynie na popularność serwisu [link widoczny dla zalogowanych]

Dla robotów wyszukiwarek sieciowych nie jest obojętne, czy do oznaczania tytułów rozdziałów użyjesz znaczników <h1>...</h1> - <h6>...</h6>, czy może <font size="7">...</font> - <font size="1">...</font>. Nikt rozsądny nie wpisuje w znacznikach tytułu tekstu, który nie ma nic wspólnego z zawartością rozdziału, co może mieć miejsce dla elementu FONT. Tak na marginesie: wiele osób próbuje oszukać wyszukiwarki, umieszczając na stronie tytuły w taki sposób: <h1><font size="1">...</font></h1>. Powoduje to wstawienie tytułu pierwszego rzędu (czyli najważniejszego dla wyszukiwarek) miniaturową czcionką. W tym przypadku efekt jednak może być odwrotny, ponieważ wyszukiwarki już dawno uodporniły się na takie sztuczki. W skrajnym przypadku taka strona może zostać zupełnie usunięta z wyszukiwarki!
Podsumowanie

Zrozumienie istoty poprawności semantycznej kodu (X)HTML jest niezwykle ważne. Niejednokrotnie można w ten sposób odróżnić osobę doświadczoną od nowicjusza. Stosuj znaczniki formatujące tylko wtedy, gdy obejmowany nimi tekst nie niesie ze sobą jakiegoś specjalnego znaczenia, a zależy Ci natomiast na tym, aby w każdych warunkach był wyświetlony tak, jak to przewidziałeś. Znaczniki semantyczne należy używać wszędzie tam, gdzie chcemy wskazać specjalne znaczenie obejmowanego nimi tekstu i jest to dla nas ważniejsze, niż jednoznaczne określenie jego wyglądu. Szczególnie przyswój sobie przeznaczenie następujących znaczników: Hn (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ABBR (skrót), ACRONYM (akronim).
[link widoczny dla zalogowanych]