html
html
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ó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ó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ólną nazwą, np. h1, natomiast znaczniki to <h1> (znacznik otwierający) i </h1> (znacznik zamykający). Krótko mówiąc, element jest ogólniejszym i zbiorczym określeniem. Nie powinno to jednak prowadzić do nieporozumień, gdyż z kontekstu wiadomo, o co chodzi.
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ó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ó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ólną nazwą, np. h1, natomiast znaczniki to <h1> (znacznik otwierający) i </h1> (znacznik zamykający). Krótko mówiąc, element jest ogólniejszym i zbiorczym określeniem. Nie powinno to jednak prowadzić do nieporozumień, gdyż z kontekstu wiadomo, o co chodzi.
czesc 2
Kilka dobrych i ważnych rad na początek
W HTML zalecane jest stosowanie małych znaczników - w XHTML, któ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ó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óć uwagę na używanie cudzysłowów przy podawaniu konkretnych wartości poleceń i atrybutów, co jest wymagane we współ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ów, nie twórz z nich "przekładańca". Gdy np. otworzysz znacznik wyróżnienia tekstu <strong>, a potem znacznik emfazy <em>, to najpierw zamknij emfazę </em>, a dopiero potem zamknij wyróżnienie </strong> (gdy zakładasz skarpetkę, a potem but, to potem najpierw musisz zdjąć but, aby mó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>
W HTML zalecane jest stosowanie małych znaczników - w XHTML, któ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ó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óć uwagę na używanie cudzysłowów przy podawaniu konkretnych wartości poleceń i atrybutów, co jest wymagane we współ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ów, nie twórz z nich "przekładańca". Gdy np. otworzysz znacznik wyróżnienia tekstu <strong>, a potem znacznik emfazy <em>, to najpierw zamknij emfazę </em>, a dopiero potem zamknij wyróżnienie </strong> (gdy zakładasz skarpetkę, a potem but, to potem najpierw musisz zdjąć but, aby mó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>
czesc 3
Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, któ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ów <html> </html>. Między nimi powinna zaś się znaleźć para znaczników <head> </head>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei 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>
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ódtytułu (nagłó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ó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ó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.
Cały dokument powinien być objęty parą znaczników <html> </html>. Między nimi powinna zaś się znaleźć para znaczników <head> </head>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei 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>
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ódtytułu (nagłó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ó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ó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.
czesc 4
Tytuły
W dokumentach często wprowadzamy tytuły, zwane też śródtytułami lub nagłó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łówek" jest nieco mylący. Aby nie było kłopotu z rozróżnianiem tytułu i nagłówka dokumentu, przyjmujemy właśnie pojęcie "tytuł" lub "śródtytuł". Jest ono zresztą bardziej intuicyjne, gdyż kojarzy się z tytułami rozdziałów i podrozdziałów w obszernych dokumentach, a taka jest jego istota.
Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znakó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óstego</h6>
I efekt:
Tytuł stopnia pierwszego
Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego
Akapit i wiersz
Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, któ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ów w edytorze i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p> (p = paragraph), które wstawi interlinie między poszczegó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ówczas zastosować pojedyncze polecenie <br>, które przenosi tekst o jeden wiersz w dół, 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>
Rezultat:
To jest pierwszy wiersz
To jest drugi wiersz
To jest trzeci wiersz
To jest czwarty wiersz
Pozioma linia
Następnym, często spotykanym elementem jest pozioma linia, któ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ów, które w przeciwieństwie do tekstu o charakterze opisowym w skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Użytkownicy edytorów tekstó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ólne punkty wykazu, któ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ó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óc
* Uważam, że należy się przygotować na spotkanie
Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <ul> i </ul> możemy zastosować <ol> i </ol> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebnikó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ó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óż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
Odsyłacze
Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Gdy na zbudowanych przez nich stronach znajdą się odsyłacze, ich wspólne zainteresowania zostaną zjednoczone za pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp do informacji.
W tym miejscu przedstawimy dwa szczególnie ważne odsyłacze: odsyłacze do innych stron WWW i odsyłacz uruchamiający pocztę elektroniczną. Są one bowiem najpowszechniej stosowane.
Odsyłacz do innej strony jest tworzony za pomocą polecenia:
<a href="adres.strony.internetowej">Jakaś nazwa tej strony</a>
Przykładowy adres mógłby wyglądać następująco:
<a href="http://www.pcworld.pl">PC World Komputer</a>
czyli,
PC World Komputer
to tam, gdzie zarabiam na swoją miskę ryżu![Smile :-)](./images/smilies/icon_smile.gif)
Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW).
Uwaga: zalecamy nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html. A jeśli spotkasz się z rozszerzeniem .php, to wiedz, że dany serwis korzysta ze skryptów server-side w języku PHP.
Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <a href="... "> i </a>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony.
Zwróćmy uwagę na to, że sam adres internetowy jest podawany w cudzysłowie. Dla działania odsyłacza nie jest to wprawdzie absolutnie konieczne (przeglądarki łagodnie traktują takie usterki), ale wymaga tego formalna poprawność składni. Edytory HTML na ogół respektują ten wymóg (choć nie wszystkie).
Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron, którzy dysponują przecież zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika (ale rzadko to czynią autorzy stron z informacjami dla hackerów!). Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z autorem.
Stosujemy tutaj na przykład następujące polecenie:
<a href="mailto:autor@jego.adres">Imię i nazwisko</a>
Na przykład:
<a href="mailto:wimmer@helion.pl.">Redaktor</a>
Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. Firefox wywoła Thundebirda (a jak go nie ma, to zapewne Outlook Express), Opera przywoła własny, wbudowany program pocztowy, zaś Internet Explorer zaś skorzysta z Outlook Express (albo np. z MS Outlook, jeśli jest on domyślnym programem pocztowym). Także i tutaj stosujmy konsekwentnie w adresie cudzysłów. Fragment w postaci:
Jeśli masz jakieś uwagi, napisz do <a href="mailto:wimmer@helion.pl">autora strony</a>
zostanie przedstawiony w przeglądarce następująco:
Jeśli masz jakieś uwagi, napisz do autora strony
Przesunięcie kursora myszki nad tekst "autora strony" wyświetli w pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł zredagować list do autora.
Wielkość i kolor czcionki
W starszych specyfikacjach HTML istniały specjalne polecenia definiujące wielkość i kolor czcionki. W HTML 4.01 już ich nie ma, natomiast atrybuty te zostały przeniesione do stylów, za pomocą których można uzyskać znacznie bogatsze efekty. W tym miejscu podajemy jedynie proste przykłady, odsyłając do rozdziału o stylach, który trzeba będzie uważnie przestudiować.
Przykładowo, chcąc określić wielkość czcionki w akapicie, możemy napisać:
<p style="font-size:xx-large">Treść akapitu</p>
Co w efekcie da:
Treść akapitu zapisana czcionką o wielkości xx-large
Albo:
<p style="font-size:small">Treść akapitu</p>
Co da:
Treść akapitu zapisana czcionką small
Zaleca się stosowanie imiennych wielkości absolutnych i relatywnych czcionek, jak xx-small, x-small, small, medium, large, x-large, xx-large oraz smaller i larger, które są najbardziej elastyczne.
O definiowaniu za pomocą stylów rozmaitych atrybutów czcionek - krojach, stylach, wielkości, wariantach - przeczytasz w rozdziale o własnościach czcionek.
Podobnie, zmienił się sposób określania kolorów czcionek, na przykład:
<p style="color: darkgreen; ">Treść akapitu w kolorze darkgreen</p>
Co w efekcie da:
Treść akapitu w kolorze darkgreen.
O definiowaniu kolorów za pomocą stylów przeczytasz w rozdziale o kolorach
W dokumentach często wprowadzamy tytuły, zwane też śródtytułami lub nagłó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łówek" jest nieco mylący. Aby nie było kłopotu z rozróżnianiem tytułu i nagłówka dokumentu, przyjmujemy właśnie pojęcie "tytuł" lub "śródtytuł". Jest ono zresztą bardziej intuicyjne, gdyż kojarzy się z tytułami rozdziałów i podrozdziałów w obszernych dokumentach, a taka jest jego istota.
Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znakó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óstego</h6>
I efekt:
Tytuł stopnia pierwszego
Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego
Akapit i wiersz
Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, któ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ów w edytorze i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p> (p = paragraph), które wstawi interlinie między poszczegó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ówczas zastosować pojedyncze polecenie <br>, które przenosi tekst o jeden wiersz w dół, 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>
Rezultat:
To jest pierwszy wiersz
To jest drugi wiersz
To jest trzeci wiersz
To jest czwarty wiersz
Pozioma linia
Następnym, często spotykanym elementem jest pozioma linia, któ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ów, które w przeciwieństwie do tekstu o charakterze opisowym w skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Użytkownicy edytorów tekstó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ólne punkty wykazu, któ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ó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óc
* Uważam, że należy się przygotować na spotkanie
Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <ul> i </ul> możemy zastosować <ol> i </ol> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebnikó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ó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óż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
Odsyłacze
Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Gdy na zbudowanych przez nich stronach znajdą się odsyłacze, ich wspólne zainteresowania zostaną zjednoczone za pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp do informacji.
W tym miejscu przedstawimy dwa szczególnie ważne odsyłacze: odsyłacze do innych stron WWW i odsyłacz uruchamiający pocztę elektroniczną. Są one bowiem najpowszechniej stosowane.
Odsyłacz do innej strony jest tworzony za pomocą polecenia:
<a href="adres.strony.internetowej">Jakaś nazwa tej strony</a>
Przykładowy adres mógłby wyglądać następująco:
<a href="http://www.pcworld.pl">PC World Komputer</a>
czyli,
PC World Komputer
to tam, gdzie zarabiam na swoją miskę ryżu
![Smile :-)](./images/smilies/icon_smile.gif)
Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW).
Uwaga: zalecamy nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html. A jeśli spotkasz się z rozszerzeniem .php, to wiedz, że dany serwis korzysta ze skryptów server-side w języku PHP.
Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <a href="... "> i </a>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony.
Zwróćmy uwagę na to, że sam adres internetowy jest podawany w cudzysłowie. Dla działania odsyłacza nie jest to wprawdzie absolutnie konieczne (przeglądarki łagodnie traktują takie usterki), ale wymaga tego formalna poprawność składni. Edytory HTML na ogół respektują ten wymóg (choć nie wszystkie).
Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron, którzy dysponują przecież zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika (ale rzadko to czynią autorzy stron z informacjami dla hackerów!). Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z autorem.
Stosujemy tutaj na przykład następujące polecenie:
<a href="mailto:autor@jego.adres">Imię i nazwisko</a>
Na przykład:
<a href="mailto:wimmer@helion.pl.">Redaktor</a>
Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. Firefox wywoła Thundebirda (a jak go nie ma, to zapewne Outlook Express), Opera przywoła własny, wbudowany program pocztowy, zaś Internet Explorer zaś skorzysta z Outlook Express (albo np. z MS Outlook, jeśli jest on domyślnym programem pocztowym). Także i tutaj stosujmy konsekwentnie w adresie cudzysłów. Fragment w postaci:
Jeśli masz jakieś uwagi, napisz do <a href="mailto:wimmer@helion.pl">autora strony</a>
zostanie przedstawiony w przeglądarce następująco:
Jeśli masz jakieś uwagi, napisz do autora strony
Przesunięcie kursora myszki nad tekst "autora strony" wyświetli w pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł zredagować list do autora.
Wielkość i kolor czcionki
W starszych specyfikacjach HTML istniały specjalne polecenia definiujące wielkość i kolor czcionki. W HTML 4.01 już ich nie ma, natomiast atrybuty te zostały przeniesione do stylów, za pomocą których można uzyskać znacznie bogatsze efekty. W tym miejscu podajemy jedynie proste przykłady, odsyłając do rozdziału o stylach, który trzeba będzie uważnie przestudiować.
Przykładowo, chcąc określić wielkość czcionki w akapicie, możemy napisać:
<p style="font-size:xx-large">Treść akapitu</p>
Co w efekcie da:
Treść akapitu zapisana czcionką o wielkości xx-large
Albo:
<p style="font-size:small">Treść akapitu</p>
Co da:
Treść akapitu zapisana czcionką small
Zaleca się stosowanie imiennych wielkości absolutnych i relatywnych czcionek, jak xx-small, x-small, small, medium, large, x-large, xx-large oraz smaller i larger, które są najbardziej elastyczne.
O definiowaniu za pomocą stylów rozmaitych atrybutów czcionek - krojach, stylach, wielkości, wariantach - przeczytasz w rozdziale o własnościach czcionek.
Podobnie, zmienił się sposób określania kolorów czcionek, na przykład:
<p style="color: darkgreen; ">Treść akapitu w kolorze darkgreen</p>
Co w efekcie da:
Treść akapitu w kolorze darkgreen.
O definiowaniu kolorów za pomocą stylów przeczytasz w rozdziale o kolorach
czesc ostatnia ;p
Grafika na stronie
Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony. Na szczęście za następnym razem przeglądarka sięga do katalogu cache, gdzie gromadzą się grafiki z Internetu, co znacznie przyspieszy transmisję zawartości strony. Niemniej jednak warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści.
Na stronach WWW są stosowane trzy podstawowe formaty bitowych plików graficznych - GIF, JPG (JPEG) i PNG - 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 niż grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej.
Grafikę możemy wprowadzić za pomocą polecenia:
<img src="nazwa_pliku" alt="nazwa alternatywna">
Na przykład:
<img src="sufinka.jpg" alt="Sufi w tulipanach">
Sufi w tulipanach
W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Na przykład:
<img src="../podkatalog/grafika.jpg" alt="nazwa alternatywna">
Układ strony
Twoja witryna może się składać z jednej zaledwie strony, może ich też zawierać dowolnie wiele, gdzie poszczególne wchodzące w jej skład dokumenty są powiązane odsyłaczami. Dlatego już w tym miejscu warto wspomnieć o sposobach ułożenia treści, czyli o tzw. layoutach stron.
* Początkowo, w pierwszych latach rozwoju WWW, dominował prosty, wręcz ascetyczny wygląd stron, które zawierały podstawowe znaczniki struktury dokumentu, zaś strony wiązano po prostu zwykłymi odsyłaczami, umieszczając zwykle spis treści na początku pierwszej strony. Taki sposób sprawdza się doskonale do dzisiaj i nic nie stoi na przeszkodzie, aby strona startowa witryny zawierała podstawowe informacje o witrynie i jej autorze oraz odsyłacze do innych dokumentów. To najprostsza technika, dzięki której strony szybko się ładują, i w której trudno popełnić jakieś błędy techniczne.
* W połowie lat 90. firma Netscape wprowadziła w swojej przeglądarce Navigator - a inne przeglądarki poszły potem w jej ślady - obsługę tzw. ramek (piszemy o nich szerzej w rozdziale o ramkach), dzięki którym można było tworzyć pomocnicze okienko zawierające spis treści, zaś zawarte w nim odsyłacze wczytywały dowiązane do nich strony do głównego okna. Technika ta, dobrze opanowana przez autora, była niewątpliwie efektywna (jest nierzadko używana do dzisiaj), ale z czasem wyszły na jaw rozmaite związane z nią kłopoty (szczególnie uciążliwy jest m.in. fakt, że wyszukiwarki sieciowe, jak Google, indeksują dokumenty w ramkach i podsuwają je potem szukającym poza kontekstem nadrzędnego układu ramkowego), zatem w ostatniej wersji HTML uznano ją za przestarzałą i zaczęto odradzać jej stosowanie.
* Gdy minęła moda na ramki, pod koniec lat 90. przyszedł czas tabel, w których umieszczano elementy strony. Technika ta została spopularyzowana przez wielkie portale, stąd nawet przyjęło się określenie "portalowy układ strony". Jest do dzisiaj dość powszechnie stosowana, aczkolwiek w dobie tzw. webmasterstwa semantycznego tego rodzaju podejście jest uznane za niewłaściwe, gdyż tabele są tu wykorzystywane niezgodnie z ich naturalnym przeznaczeniem, którym jest tworzenie danych tabelarycznych. Tabela jako szkielet strony jest po prostu sztuczką, sposobem wykorzystania niezgodnym z istotą tabeli, na dodatek wprowadzającym mnóstwo trudnego do utrzymania i modyfikacji kodu (zajrzyj do źródła strony w dowolnym portalu, a przerazisz się jego skomplikowaniem). Dzisiaj odradza się używanie tabel w roli szkieletów układu, a dlaczego, możesz przeczytać w wolnej chwili w pamflecie "Dlaczego układ na tabelkach jest głupi", w serwisie Osiołki.net.
* I wreszcie pojawiła się tendencja, którą uczeni w piśmie uznają za tę właściwą, i która powoli, bardzo powoli, zyskuje sobie uznanie w światowym webmasterstwie. Strony są budowane w oparciu o bloki (sekcje, warstwy) zakreślone przez znaczniki div, dzięki którym można swobodnie rozmieszczać na stronie poszczególne elementy.
Co zatem masz począć, ucząc się dopiero języków webmasterskich? Przede wszystkim zacznij od tych najstarszych, tradycyjnych sposobów, które są w pełni aktualne do dzisiaj i dzięki swojej prostocie zawsze będą aktualne. Unikaj ramek, tabele stosuj tylko zgodnie z ich naturalnym przeznaczeniem. Gdy nabierzesz wprawy w tworzeniu prostych konstrukcyjnie stron, formatowaniu zawartych w nich elementów i łączeniu ze sobą wszystkich dokumentów w zwarty kompleks, spróbuj się zmierzyć z nowoczesnymi technikami, a więc właśnie z układami opartymi na blokach. Nasz kurs jest oparty na blokach div, pokazując, że można tworzyć całkiem niebrzydko wyglądające strony, z systemami nawigacyjnymi korzystającymi z formatowania za pomocą stylów.
Co dalej?
Nie po to uczymy się języka HTML, aby bawić się nim w domu. W końcu każdy zechce wystawić swoją stronę w Internecie, aby podzielić się z innymi swoimi wiekopomnymi dokonaniami czy przemyśleniami. Dlatego trzeba sobie zapewnić miejsce na jakimś serwerze.
Możesz wykupić dowolną liczbę megabajtów miejsca u dostawcy usług internetowych (firmy hostingowej), ale to oczywiście kosztuje nieco grosza, choć nie tak wiele. Możesz także skorzystać z jakiejś darmowej oferty - wiele polskich serwisów, w tym i portale, udostępnia miejsce na swoich serwerach.
Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony. Na szczęście za następnym razem przeglądarka sięga do katalogu cache, gdzie gromadzą się grafiki z Internetu, co znacznie przyspieszy transmisję zawartości strony. Niemniej jednak warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści.
Na stronach WWW są stosowane trzy podstawowe formaty bitowych plików graficznych - GIF, JPG (JPEG) i PNG - 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 niż grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej.
Grafikę możemy wprowadzić za pomocą polecenia:
<img src="nazwa_pliku" alt="nazwa alternatywna">
Na przykład:
<img src="sufinka.jpg" alt="Sufi w tulipanach">
Sufi w tulipanach
W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Na przykład:
<img src="../podkatalog/grafika.jpg" alt="nazwa alternatywna">
Układ strony
Twoja witryna może się składać z jednej zaledwie strony, może ich też zawierać dowolnie wiele, gdzie poszczególne wchodzące w jej skład dokumenty są powiązane odsyłaczami. Dlatego już w tym miejscu warto wspomnieć o sposobach ułożenia treści, czyli o tzw. layoutach stron.
* Początkowo, w pierwszych latach rozwoju WWW, dominował prosty, wręcz ascetyczny wygląd stron, które zawierały podstawowe znaczniki struktury dokumentu, zaś strony wiązano po prostu zwykłymi odsyłaczami, umieszczając zwykle spis treści na początku pierwszej strony. Taki sposób sprawdza się doskonale do dzisiaj i nic nie stoi na przeszkodzie, aby strona startowa witryny zawierała podstawowe informacje o witrynie i jej autorze oraz odsyłacze do innych dokumentów. To najprostsza technika, dzięki której strony szybko się ładują, i w której trudno popełnić jakieś błędy techniczne.
* W połowie lat 90. firma Netscape wprowadziła w swojej przeglądarce Navigator - a inne przeglądarki poszły potem w jej ślady - obsługę tzw. ramek (piszemy o nich szerzej w rozdziale o ramkach), dzięki którym można było tworzyć pomocnicze okienko zawierające spis treści, zaś zawarte w nim odsyłacze wczytywały dowiązane do nich strony do głównego okna. Technika ta, dobrze opanowana przez autora, była niewątpliwie efektywna (jest nierzadko używana do dzisiaj), ale z czasem wyszły na jaw rozmaite związane z nią kłopoty (szczególnie uciążliwy jest m.in. fakt, że wyszukiwarki sieciowe, jak Google, indeksują dokumenty w ramkach i podsuwają je potem szukającym poza kontekstem nadrzędnego układu ramkowego), zatem w ostatniej wersji HTML uznano ją za przestarzałą i zaczęto odradzać jej stosowanie.
* Gdy minęła moda na ramki, pod koniec lat 90. przyszedł czas tabel, w których umieszczano elementy strony. Technika ta została spopularyzowana przez wielkie portale, stąd nawet przyjęło się określenie "portalowy układ strony". Jest do dzisiaj dość powszechnie stosowana, aczkolwiek w dobie tzw. webmasterstwa semantycznego tego rodzaju podejście jest uznane za niewłaściwe, gdyż tabele są tu wykorzystywane niezgodnie z ich naturalnym przeznaczeniem, którym jest tworzenie danych tabelarycznych. Tabela jako szkielet strony jest po prostu sztuczką, sposobem wykorzystania niezgodnym z istotą tabeli, na dodatek wprowadzającym mnóstwo trudnego do utrzymania i modyfikacji kodu (zajrzyj do źródła strony w dowolnym portalu, a przerazisz się jego skomplikowaniem). Dzisiaj odradza się używanie tabel w roli szkieletów układu, a dlaczego, możesz przeczytać w wolnej chwili w pamflecie "Dlaczego układ na tabelkach jest głupi", w serwisie Osiołki.net.
* I wreszcie pojawiła się tendencja, którą uczeni w piśmie uznają za tę właściwą, i która powoli, bardzo powoli, zyskuje sobie uznanie w światowym webmasterstwie. Strony są budowane w oparciu o bloki (sekcje, warstwy) zakreślone przez znaczniki div, dzięki którym można swobodnie rozmieszczać na stronie poszczególne elementy.
Co zatem masz począć, ucząc się dopiero języków webmasterskich? Przede wszystkim zacznij od tych najstarszych, tradycyjnych sposobów, które są w pełni aktualne do dzisiaj i dzięki swojej prostocie zawsze będą aktualne. Unikaj ramek, tabele stosuj tylko zgodnie z ich naturalnym przeznaczeniem. Gdy nabierzesz wprawy w tworzeniu prostych konstrukcyjnie stron, formatowaniu zawartych w nich elementów i łączeniu ze sobą wszystkich dokumentów w zwarty kompleks, spróbuj się zmierzyć z nowoczesnymi technikami, a więc właśnie z układami opartymi na blokach. Nasz kurs jest oparty na blokach div, pokazując, że można tworzyć całkiem niebrzydko wyglądające strony, z systemami nawigacyjnymi korzystającymi z formatowania za pomocą stylów.
Co dalej?
Nie po to uczymy się języka HTML, aby bawić się nim w domu. W końcu każdy zechce wystawić swoją stronę w Internecie, aby podzielić się z innymi swoimi wiekopomnymi dokonaniami czy przemyśleniami. Dlatego trzeba sobie zapewnić miejsce na jakimś serwerze.
Możesz wykupić dowolną liczbę megabajtów miejsca u dostawcy usług internetowych (firmy hostingowej), ale to oczywiście kosztuje nieco grosza, choć nie tak wiele. Możesz także skorzystać z jakiejś darmowej oferty - wiele polskich serwisów, w tym i portale, udostępnia miejsce na swoich serwerach.
Niestety (nie wiem dlaczego) nie moglem nabic calosci w jeden temat... poprostu nie chcialo sie wyslac...
Kurs html moze komus sie przyda jak bendzie chial robic nieoficjalna strona o nocarzu... sam wystawilem go z ta mysla..
Kurs html moze komus sie przyda jak bendzie chial robic nieoficjalna strona o nocarzu... sam wystawilem go z ta mysla..
Ostatnio zmieniony 22 sty 2007, o 18:10 przez Zed, łącznie zmieniany 1 raz.
- Falk
- Major Nocarzy
- Posty: 2611
- Rejestracja: 25 kwie 2006, o 13:47
- Płeć: Mężczyzna
- Lokalizacja: Tam, gdzie żyją Forfitery
- Kontakt:
Była kiedyś książka wydawnictwa Xelion "html 4.0". Pozwalała ona takiemu kotowi jak ja zrobić dość prostą stronkę, której już nie ma, ale mam ją chyba na twardzielu, jakby kogo interesowało, co robiłem jak miałem 17 lat ;P.
Głową muru nie przebijesz, ale jeśli zawiodły inne metody należy spróbować i tej.
J. Piłsudski
J. Piłsudski
- Falka Valiarde
- Major Renegatów
- Posty: 1001
- Rejestracja: 1 kwie 2006, o 20:34
- Płeć: Kobieta
- Lokalizacja: Warszawa
- Kontakt:
Jeśli ktoś chce bawić się w robienie stron to najlepiej ściągnąć sobie pajączka. Do niego dołączona jest instrukcja i z tego co widze to Zed właśnie tą instrukcję tutaj wklejał.
O tyle program jets sympatyczny, że na bierząco można podglądać co się zmieniło na tronce jak się bawicie w kodzie. Później jak się zmienia jakieś pierdoły to wystarcza notatnik (baardzo przydatne i poręczne narzędzie pracy ^.^)
Kiedyś też używałam jakiegoś programu który w sumie sam rozpisywał kod html, a użytkownik miał do dyspozycji jakby worda i tam ustawiął sobie tekst gdzie chciał, jaką czcionkę chciał, ustawiał tło, wklejał obrazki itd itp.
Lecz przed takimi programami przestrzegam (choć sama się na tym uczyłam), ponieważ stronak w taki posób nie będzie zrobiona tak na prawdę dobrze. Cały kod html jets bardzo wtedy zaśmiecony i przez to czasem potrafiły pojawiać się jakieś błędy i nie wszytsko chciało działać poprawnie.
O tyle program jets sympatyczny, że na bierząco można podglądać co się zmieniło na tronce jak się bawicie w kodzie. Później jak się zmienia jakieś pierdoły to wystarcza notatnik (baardzo przydatne i poręczne narzędzie pracy ^.^)
Kiedyś też używałam jakiegoś programu który w sumie sam rozpisywał kod html, a użytkownik miał do dyspozycji jakby worda i tam ustawiął sobie tekst gdzie chciał, jaką czcionkę chciał, ustawiał tło, wklejał obrazki itd itp.
Lecz przed takimi programami przestrzegam (choć sama się na tym uczyłam), ponieważ stronak w taki posób nie będzie zrobiona tak na prawdę dobrze. Cały kod html jets bardzo wtedy zaśmiecony i przez to czasem potrafiły pojawiać się jakieś błędy i nie wszytsko chciało działać poprawnie.
"Jeśli zamierzasz czytać dalej, pamiętaj proszę, że słowa mogą krwawić."
- GAndrel
- --------
- Posty: 2
- Rejestracja: 4 sty 2008, o 10:57
- Płeć: Mężczyzna
- Lokalizacja: Gołdap
- Kontakt:
Re: czesc 2
Mała uwaga. W XHTMLu zamykanie dotyczy wszystkich znaczników bez wyjątku. Jeżeli ktoś już dostosuje się do XHTMLa i będzie pisał nazwy znaczników małymi literami niech też zamyka wszystkie znaczniki.Zed pisze:...Domykaj zawsze znaczniki - dotyczy to ogromnej większości znaczników, poza bardzo nielicznymi, jak <img>, <hr> czy <br>.(...)
Wzmiankowane nieliczne <img>, <hr> i <br> zamyka się nimi samymi i wyglądają one wtedy tak: <img />, <hr /> i <br />.