Porady: Użyteczne tytuły serwisów WWW

Kod każdej strony napisanej w języku HTML składa się z dwóch podstawowych części - sekcji BODY i HEAD. W tej pierwszej umieszczona jest merytoryczna treść witryny - to, co pokazywane jest użytkownikowi (artykuły, grafiki itp.). Ta druga zawiera z kolei informacje typu META - kodowanie znaków, imię i nazwisko lub pseudonim autora, słowa kluczowe, odnośnik do kaskadowego arkusza stylów (CSS) odpowiedzialnego za formatowanie wyglądu witryny.

Uwaga: To jest stary temat Ta dyskusja jest starsza niż 90 dni. Informacje w niej zawarte mogą już nie być aktualne

Kilka porad więcej dla zainteresowanych

HTML dla początkujących

O rozdziale: Jeśli Czytelnik tego kursu jest człowiekiem bardzo zapracowanym i mającym mało czasu, zapewne ucieszy go fakt, że w zasadzie może zakończyć lekturę, przynajmniej chwilowo, po przestudiowaniu tego rozdziału. Polecam jednak sięgnięcie za jakiś czas do kursu i przyjrzenie się dodatkowym możliwościom. Na razie prezentuję w skróconej formie najważniejsze polecenia, które wystarczą do sporządzenia prostej strony. Jeśli poświęcisz jeden weekend na gruntowne przestudiowanie tego rozdziału i przećwiczenie podanych w nim poleceń, będziesz już webmasterem - a przynajmniej domowym webmasterem, który przedstawi na swojej stronie rodzinę, hobby czy zwierzaka. Nawet gdy korzystasz głównie z blogów, znajomość HTML może być przydatna.

A jeśli masz większe ambicje, następne rozdziały kursu pomogą Ci w poznaniu obszerniejszej palety narzędzi webmasterskich i będą dobrym wstępem do późniejszych, pogłębionych studiów nad zaawansowanymi instrumentami, jakie mają dzisiaj do dyspozycji twórcy witryn - XHTML, JavaScript, PHP, ASP, XML to przykłady powszechnie wykorzystywanych języków, z którymi zaawansowani webmasterzy są za pan brat. Ale wszystko i tak zaczyna się od HTML.

Edytor

Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów - jak Notatnik w Windows - ręcznie wpisując znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy komercyjne, aczkolwiek znajdziemy też sporo programów całkowicie bezpłatnych (freeware).

W chwili obecnej (2006 rok) mamy do dyspozycji wiele polskich programów, które doskonale nadają się do tworzenia stron.

Osobiście polecam używanie edytorów pracujących w trybie tekstowym, a nie graficznym, gdyż mamy wtedy lepszą kontrolę nad tworzonym dokumentem.

W środowisku Windows 95/98/ME/NT/2000/XP możesz używać m.in. (nazwy szczególnie polecanych przeze mnie programów są pogrubione):

* Pajączek NxG - w tej chwili wybór numer 1 dla polskiego webmastera, program komercyjny. Oferuje wersje profesjonalną i standardową, w odmianie osobistej (do użytku niekomercyjnego) lub komercyjnej. Moim zdaniem to najlepszy tekstowy edytor HTML i XHTML na świecie.
* CoreEditor - polski, komercyjny edytor, porównywalny z Pajączkiem, obsługujący także XHTML. Edytor jest następcą bezpłatnego edHTML.
* kED - polski, darmowy edytor, szybki i konfigurowalny, obsługujący XHTML - sam go używam do codziennej pracy.
* HateML Pro - polski, darmowy edytor z obsługą (X)HTML.
* Tiger98 i TigerII Millenium - komercyjny polski edytor, jednak już bardzo wiekowy.
* TigerII MiniPad - darmowy notatnik, wygodny do szybkich poprawek.
* edHTML - polski, darmowy edytor; jego następcą jest CoreEditor.
* Website Pro - polski, darmowy edytor; los nieznany (?).
* Zajączek PHP - polski, darmowy edytor, z dobrą obsługą PHP.
* Ager Web Edytor - polski, darmowy edytor ze wsparciem dla PHP i JavaScript.
* Extra Page - darmowy polski edytor, jednak piszący w "starym stylu".
* ezHTML - polski edytor, także darmowy - chyba nie jest już rozwijany.
* HTML-Kit - bardzo silny amerykański edytor, z ogromną liczbą pluginów, darmowy.
* 1'st Page 2000 - jeden z najpotężniejszych programów webmasterskich, darmowy.
* ACE HTML Freeware - darmowy, anglojęzyczny edytor, z obsługą stron kodowych.
* HotDog - silny amerykański edytor, komercyjny.
* CoffeeCup HTML Editor - silny, amerykański edytor, komercyjny.

Oczywiście możesz się także posłużyć graficznymi edytorami - dla początkujących polecam szczególnie darmowy edytor dołączony do Mozilli oraz spolszczony edytor Nvu. Ponieważ jednak uczysz się języka HTML, warto się posługiwać edytorami tekstowymi.

Osnowa dokumentu

Znacznik HTML jest specjalnym ciągiem znak&#243;w objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go znacznikami <h1>treść tytułu</h1>. W HTML wielkość liter w znacznikach jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam spos&#243;b. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami.

Chociaż zwyczajowo stosuje się zamiennie określenia polecenie, element, znacznik czy tag, formalnie rzecz biorąc element jest og&#243;lną nazwą, np. h1, natomiast znaczniki to <h1> (znacznik otwierający) i </h1> (znacznik zamykający). Kr&#243;tko m&#243;wiąc, element jest og&#243;lniejszym i zbiorczym określeniem. Nie powinno to jednak prowadzić do nieporozumień, gdyż z kontekstu wiadomo, o co chodzi.

Kilka dobrych i ważnych rad na początek

W HTML zalecane jest stosowanie małych znacznik&#243;w - w XHTML, kt&#243;ry jest kontynuacją języka HTML, małe znaczniki są już obowiązkowe, zatem lepiej jest się przyzwyczajać do właściwych technik.
Pisz więc nie:
<H1>Nasza wycieczka do lasu</H1>
lecz:
<h1>Nasza wycieczka do lasu</h1>

Domykaj zawsze znaczniki - dotyczy to ogromnej większości znacznik&#243;w, poza bardzo nielicznymi, jak <img>, <hr> czy <br>.
Nigdy nie pisz:
<p>Wczoraj byliśmy w lesie i było bardzo przyjemnie.
lecz zawsze:
<p>Wczoraj byliśmy w lesie i było bardzo przyjemnie.</p>

Zwr&#243;ć uwagę na używanie cudzysłow&#243;w przy podawaniu konkretnych wartości poleceń i atrybut&#243;w, co jest wymagane we wsp&#243;łczesnych standardach, choć nie było egzekwowane w starszych.
Pisz zatem nie:
<img src=fotka.jpg alt=fotka z wakacji>
lecz
<img src="fotka.jpg" alt="fotka z wakacji">
Nie:
<a href=http://www.onet.pl>Portal Onet.pl</a>
lecz
<a href="http://www.onet.pl">Portal Onet.pl</a>
Nie:
<p style=color: blue; >Tekst w kolorze niebieskim.</p>
lecz
<p style="color: blue; ">Tekst w kolorze niebieskim.</p>

Nigdy nie mieszaj znacznik&#243;w, nie tw&#243;rz z nich "przekładańca". Gdy np. otworzysz znacznik wyr&#243;żnienia tekstu <strong>, a potem znacznik emfazy <em>, to najpierw zamknij emfazę </em>, a dopiero potem zamknij wyr&#243;żnienie </strong> (gdy zakładasz skarpetkę, a potem but, to potem najpierw musisz zdjąć but, aby m&#243;c zdjąć skarpetkę). Chodzi o to, aby poprawnie zagnieżdżać jedne znaczniki w drugich.
Nie pisz więc:
<strong><em>Jakaś tam treść</strong></em>
lecz
<strong><em>Jakaś tam treść</em></strong>

Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, kt&#243;ry stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, kt&#243;re szkieletu nie zawierają (czasem tylko jego część), ale odradzamy taką praktykę, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami.

Cały dokument powinien być objęty parą znacznik&#243;w <html> </html>. Między nimi powinna zaś się znaleźć para znacznik&#243;w <head> </head>, kt&#243;ra stanowi ramy dla informacji nagł&#243;wkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <body> </body>. Wygląda to następująco:
<html>
<head>
informacje nagł&#243;wkowe
</head>
<body>
właściwa treść (ciało) dokumentu
</body>
</html>

Tak spreparowany szkielet jest już "bezpieczny" i nie niesie ze sobą ryzyka jakichś niespodzianek.

Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji.

Między znacznikami <head> i </head> powinno się znaleźć polecenie <title> </title>.
<head>
<title>Tytuł strony</title>
</head>

Title nie oznacza wcale śr&#243;dtytułu (nagł&#243;wka) na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład:
<head>
<title>Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</title>
</head>

Proszę zwr&#243;cić teraz uwagę na pasek tytułowy przeglądarki, gdzie widnieje treść "Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących".

Ważne: polecenie title powinno być umieszczone zaraz za otwierającym znacznikiem head, jeszcze PRZED wszystkimi informacjami meta.

Drugim bardzo ważnym elementem jest informacja stronie kodowej dokumentu.

Zalecamy usilnie stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Powinieneś sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach znacznik&#243;w head i wygląda następująco:

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

Przed dokumentem, tj. przed otwierającym znacznikiem <html> dodaj jeszcze zalecaną definicję typu dokumentu, czyli tzw. prolog:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Uwaga: wielkie litery w deklaracji DTD (Document Type Definition) są konieczne!

Deklaracja ta mówi, że piszesz w języku HTML 4.01 Strict, czyli we współcześnie używanym standardzie. Więcej o deklaracjach Doctype przeczytasz w w rozdziale Struktura dokumentu.

Ostatecznie więc, stosuj standardową osnowę:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>tytuł strony</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
</head>
<body>
właściwa treść (ciało) dokumentu
</body>
</html>

Jak uzyskać polskie znaki w edytorach?

UWAGA: czołowe polskie edytory HTML nie wymagają już stosowania odrębnych klawiatur i czcionek ekranowych, gdyż same automatycznie konwertują polskie znaki do wybranej przez nas strony kodowej. Po prostu piszesz w nich normalnie, jak np. w zwykłym edytorze tekstów.

Poniższe uwagi dotyczą niektórych edytorów produkcji zachodniej.

Aby wygodnie redagować dokumenty w standardzie kodowania ISO-8859-2, należy się zaopatrzyć w czcionki w tym standardzie. Użytkownikom edytorów dla Windows polecam darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostępne w serwisie Polska Strona Windowsowa. Darmową klawiaturę ISO można pobrać także w serwisie Polska Strona Windowsowa, czyli tam, gdzie jest czcionka ekranowa PolskieStrony.

Problem konwersji już istniejących dokumentów można załatwić "hurtowo" za pomocą specjalnych programów konwertujących. Polecamy przede wszystkim program Ogonki 97, Michała Jaskólskiego - Michał oferuje ją wszystkim za darmo i warto podkreślić, że jego program stał się jednym z najważniejszych narzędzi w "dziecięcym" okresie polskiego Internetu. Niezliczone tysiące osób konwertowały już nim swoje strony, dostosowując je do zalecanego standardu.

Gdy z jakichś powodów zechcesz używać w swojej witrynie internetowej strony kodowej Windows-1250 (co odradzamy), wpisz koniecznie odpowiednią informację META:

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

Podsumowanie:

Jeśli zechcesz stosować stronę kodową ISO-8859-2 (zalecamy), wykonaj następujące działania:

* Zaopatrz się w dowolną czcionkę ekranową w standardzie ISO-8859-2, za pomocą której będziesz wyświetlać tekst dokumentu w edytorze HTML
* Używaj polskiej klawiatury w standardzie ISO-8859-2
* Wstaw deklarację strony kodowej ISO-8859-2 w nagłówku dokumentu

Jeśli zamierzasz stosować stronę kodową Windows-1250 (nie zalecamy)

* Użyj dowolnej czcionki ekranowej w tym standardzie (jest ich sporo w Windows)
* Używaj standardowej klawiatury Windows
* Wstaw deklarację strony kodowej Windows-1250 w nagłówku dokumentu

Użytkownicy systemu operacyjnego Linux w ogóle nie mają problemu ze stroną kodową, gdyż system ten posługuje się międzynarodowymi standardami.

Tytuły

W dokumentach często wprowadzamy tytuły, zwane też śr&#243;dtytułami lub nagł&#243;wkami. Służy do tego polecenie <hx> </hx>. Znak h oznacza heading, natomiast x to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <h1> i zamykającego </h1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash).

Znaczna większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek są też polecenia zawierające jedynie pojedynczy znacznik, np. znacznik poziomej linii, grafiki czy końca wiersza. Gdy masz do czynienia z poleceniem zawierającym oba znaczniki, koniecznie stosuj i znacznik otwierający, i zamykający. W HTML jest to bezwzględnie zalecane, a w XHTML już nawet konieczne.

Podkreślmy od razu, że znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają "w locie" formatować tekst.

Uwaga: Powszechnie używany termin "nagł&#243;wek" jest nieco mylący. Aby nie było kłopotu z rozr&#243;żnianiem tytułu i nagł&#243;wka dokumentu, przyjmujemy właśnie pojęcie "tytuł" lub "śr&#243;dtytuł". Jest ono zresztą bardziej intuicyjne, gdyż kojarzy się z tytułami rozdział&#243;w i podrozdział&#243;w w obszernych dokumentach, a taka jest jego istota.

Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytuł&#243;w, r&#243;żniącymi się w przeglądarce wielkością znak&#243;w. Wprowadzamy je za pomocą poleceń h1, h2 itd.
<h1>Tytuł stopnia pierwszego</h1>
<h2>Tytuł stopnia drugiego</h2>
<h3>Tytuł stopnia trzeciego</h3>
<h4>Tytuł stopnia czwartego</h4>
<h5>Tytuł stopnia piątego</h5>
<h6>Tytuł stopnia sz&#243;stego</h6>

Akapit i wiersz

Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, kt&#243;ry nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". 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&#243;w w edytorze i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p> (p = paragraph), kt&#243;re wstawi interlinie między poszczeg&#243;lne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego </p>.

Przykład:
<p>To jest treść pierwszego akapitu</p>
<p>To jest treść drugiego akapitu</p>

Efekt:

To jest treść pierwszego akapitu

To jest treść drugiego akapitu

Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy w&#243;wczas zastosować pojedyncze polecenie <br>, kt&#243;re przenosi tekst o jeden wiersz w d&#243;ł, choć nie wprowadza dodatkowej interlinii.
To jest pierwszy wiersz<br>
To jest drugi wiersz<br>
To jest trzeci wiersz<br>
To jest czwarty wiersz<br>

Pozioma linia

Następnym, często spotykanym elementem jest pozioma linia, kt&#243;rą wstawiamy za pomocą polecenia <hr> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony czy bloku, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta.

<hr>

Wykazy (listy)

Na stronach WWW powszechnie stosuje się wykazy, zwane też często listami (ang. list). Są to po prostu systematyczne wyliczenia jakichś punkt&#243;w, kt&#243;re w przeciwieństwie do tekstu o charakterze opisowym w skondensowany spos&#243;b prezentują jakąś myśl czy zesp&#243;ł zagadnień. Użytkownicy edytor&#243;w tekst&#243;w spotykają się z tym elementem - np. w polskiej wersji edytora Word są one znane pod nazwą list numerowanych i list wypunktowanych.

Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <ul> </ul> (ang. unordered list). W ramach szkieletu znajdą się poszczeg&#243;lne punkty wykazu, kt&#243;re wprowadzamy za pomocą polecenia <li> </li>.
<p>Dlaczego zajmuję się UFO?</p>
<ul>
<li>Uważam, że UFO istnieje</li>
<li>Uważam, że pozaziemskie cywilizacje mogą nam pom&#243;c</li>
<li>Uważam, że należy się przygotować na spotkanie</li>
</ul>

W efekcie uzyskamy:

Dlaczego zajmuję się UFO?

* Uważam, że UFO istnieje
* Uważam, że pozaziemskie cywilizacje mogą nam pom&#243;c
* Uważam, że należy się przygotować na spotkanie

Gdy chcemy utworzyć wykaz numerowany, w&#243;wczas zamiast <ul> i </ul> możemy zastosować <ol> i </ol> (ang. ordered list). Uzyskamy w&#243;wczas listę numerowaną za pomocą liczebnik&#243;w arabskich (w dalszej części podręcznika pokażemy inne sposoby numerowania).

1. Uważam, że UFO istnieje
2. Uważam, że pozaziemskie cywilizacje mogą nam pom&#243;c
3. Uważam, że należy się przygotować na spotkanie

Atrybuty czcionki

Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - wyr&#243;żnienie (pogrubienie) i emfazę (pochylenie). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia:

To jest tekst normalny

<strong>To jest tekst pogrubiony</strong>

<em>To jest tekst pochylony</em>

Efekt działania tych poleceń:

To jest tekst normalny

To jest tekst pogrubiony

To jest tekst pochylony