Kilka dobrych i ważnych rad na początek

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>
Kaskadowe arkusze stylów
Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) są nieodłącznym towarzyszem
współczesnej wersji języka HTML.
Język HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych
dokumentów (ich stronę semantyczną)
Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach
Można wprawdzie stworzyć witrynę, używając jedynie czystego HTML, jednak będzie to witryna
prosta i mało atrakcyjna. Style pomogą znacznie ją wzbogacić, dlatego ich znajomość jest dzisiaj po
prostu niezbędna. Ponadto stosowanie stylów oszczędza wiele pracy koniecznej dawniej do
sformatowania dokumentów za pomocą tradycyjnych technik - nierzadko zmiana jednego drobnego
parametru w arkuszu stylów pozwala zmienić wygląd całej witryny!
Dlaczego style są ważne
Języki służące do budowy stron WWW (zarówno HTML, jak i jego bezpośredni następca, czyli
XHTML) zostały uzupełnione o potężne narzędzie do formatowania dokumentów internetowych kaskadowe arkusze stylów. Jest to rewolucyjna idea, w zasadniczy sposób zwiększająca
elastyczność narzędzi i możliwości autorów stron. Warto zauważyć, że style leżą także u podstaw
dynamicznego HTML.
Style, zwłaszcza na najczęściej stosowanym poziomie CSS1, są niezbyt skomplikowane w
konstrukcji, dając zarazem zaawansowane możliwości manipulowania postacią dokumentów, jakich
brakowało w tradycyjnym języku HTML. Umiejętne stosowanie stylów pozwala całkowicie
odmienić wygląd strony, nie szkodząc zarazem przeglądarkom, które stylów nie interpretują.
Styl, będący zespołem kodów formatujących (jednego czy kilku), pozwala obecnie globalnie lub
lokalnie zmieniać sposób formatowania wybranego fragmentu dokumentu.
Do zalet stosowania CSS można zaliczyć:
oddzielenie struktury witryny od jej prezentacji, co ułatwia jej tworzenie i utrzymywanie
dużo większe możliwości formatowania za pomocą stylów niż za pomocą znaczników i ich
atrybutów
znaczące zmniejszenie ilości kodu użytego do wizualizacji
łatwość manipulowania całymi kompleksami stron
łatwość ujednolicenia wyglądu dokumentów opartych na tym samym arkuszu stylów
Na marginesie uwaga: jest niemal pewne, że podstawowe sposoby formatowania z HTML zawsze
będą interpretowane, gdyż miliony dokumentów w WWW są formatowane za pomocą klasycznego
HTML i konieczne by było ich przetworzenie, zgodnie ze specyfikacją stylów - raczej nie jest to
możliwe, więc konieczność zgodności "w dół" spowoduje, że te zaszłości będą zawsze honorowane
przez przeglądarki.
Uwaga: Przeglądarki internetowe implementują interpretację stylów stopniowo, więc przy
kolejnych aktualizacjach przeglądarek można się spodziewać następnych poprawek. Trzeba jednak
podkreślić, że w interpretacja w najnowszych wersjach przeglądarek jest już bardzo zaawansowana.
Ramy dokumentu
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>.
<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.
Warto jeszcze dodać kilka użytecznych informacji.
<head>
<title>Kurs języka HTML - poradnik webmastera: HTML dla bardzo
początkujących</title>
</head>
Title - zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki.
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.
Powinniśmy stosować przede wszystkim standard kodowania polskich liter ISO-8859-2.
Po pierwsze, jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy.
Po drugie, jest to standard bardziej uniwersalny, gdyż jest dostępny w wielu systemach
operacyjnych.
Drugim wartym rozważenia standardem, zalecanym zwłaszcza w języku XHTML, jest UTF-8
(Unicode), który bez wątpienia jest przyszłością webmasterstwa. Według informacji Google, na
początku 2010 roku około 50 procent stron było już kodowanych w UTF, a posługują się nim także
popularne systemy CMS, jak np. Joomla.
Należy unikać używania innych "polskich" standardów, a szczególnie Windows-1250, typowego
jedynie dla Windows. Deklarację strony kodowej umieszcza się w ramach części nagłówkowej
strony (HEAD):
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
</head>
W przypadku standardu Unicode informacja o stronie kodowej ma następującą postać:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
Przeglądarki potrafią się automatycznie przestawić na właściwą stronę kodową, zgodnie z podaną
deklaracją. Nie jest potrzebna interwencja użytkownika, który nie musi nawet wiedzieć, z jakim
standardem kodowania polskich znaków ma do czynienia.
Uwaga: aby strona była poprawnie wyświetlana w danym standardzie, np. ISO-8859-2, nie
wystarczy podać jedynie tę deklarację. Także i polskie litery muszą być zapisane w tym
standardzie.
Dodatkowe informacje nagłówkowe
<meta ...>
Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla
celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np.
wyszukiwarki sieciowe. Zawiera ono trzy atrybuty: HTTP-EQUIV, NAME i CONTENT w
kombinacji pierwszy z trzecim lub drugi z trzecim. HTTP-EQUIV definiuje zmienne systemowe,
natomiast NAME - zmienne użytkownika.
Chociaż meta jest poleceniem opcjonalnym, nie wymaganym dla poprawności dokumentu,
używanie go jest zalecane, gdyż usprawnia funkcjonowanie witryny w Sieci. Meta nie jest zbiorem
nikomu niepotrzebnych zaklęć, lecz użytecznym instrumentem współpracującym z przeglądarkami
internetowymi i sieciowymi wyszukiwarkami. Wstawienie tych "zaklęć" jest banalną czynnością, a
korzyści są niezaprzeczalne. Pamiętaj, że trzeba opisać każdy dokument z osobna, aczkolwiek w
wielu sytuacjach wystarczy po prostu skopiować dane meta z jednego dokumentu do pozostałych.
Opis strony
<meta name ="description" content="jakaś tam treść">
Polecenie to opisuje zawartość strony. Zalecam stosowanie go, gdyż dzięki niemu ułatwiamy pracę
osobom korzystającym z wyszukiwarki. Przykładowo, gdy posłużymy się wyszukiwarką Google,
szukając np. stron poświęconym językowi Esperanto, łatwo dostrzeżemy funkcjonalność poleceń
TITLE i Description. To, co umieściliśmy w ramach TITLE, zostanie wyświetlone jako tytuł
znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej
strony. Gdybyśmy nie użyli Description, wyszukiwarka wyświetli kilka pierwszych wierszy
naszego dokumentu, które mogą być zupełnie przypadkowe. Uważnie i świadomie zredagowana
zawartość Description da natychmiast orientację co do zawartości strony. Może to być na przykład:
<meta name ="description" content="Esperanto: strona zawiera podstawowe
informacje o języku Esperanto, odsyłacze do najważniejszych stron, podręcznik
i słowniczek.">
Zaleca się nieprzekraczanie 150-200 znaków - w niektórych specjalistycznych serwisach spotyka
się zalecenie "co najwyżej 20-25 wyrazów".
Wyrazy kluczowe
<meta name="keywords" content="jakieś wyrazy kluczowe">
Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość
Keywords: HTML, webmaster, kurs, poradnik. Warto stosować wyrazy kluczowe, gdyż ułatwia to
pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony
przez innych użytkowników. To my właśnie decydujemy tutaj, jakie są istotne elementy strony.
Jeśli nasza strona zawiera opis jakiegoś produktu, moglibyśmy podać wyrazy kluczowe
"marmolada śliwkowa, przemysł, spółdzielnia Lepsze Jutro, żywność". Poszczególne wyrazy
kluczowe są oddzielane przecinkami. Dla scharakteryzowania strony zazwyczaj wystarcza kilka,
rzadziej kilkanaście wyrazów.
Autor strony
<meta name="author" content="imię i nazwisko">
Polecenie informuje o autorze strony.
Tekst, obrazy i kolory na stronach WWW
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>.
<h1>Tytuł
<h2>Tytuł
<h3>Tytuł
<h4>Tytuł
<h5>Tytuł
<h6>Tytuł
stopnia
stopnia
stopnia
stopnia
stopnia
stopnia
pierwszego</h1>
drugiego</h2>
trzeciego</h3>
czwartego</h4>
piątego</h5>
szóstego</h6>
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
odstępy między poszczególne fragmenty tekstu.
<p>To jest treść pierwszego akapitu</p>
<p>To jest treść drugiego akapitu</p>
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 dodatkowego odstępu.
To
To
To
To
jest
jest
jest
jest
pierwszy wiersz<br>
drugi wiersz<br>
trzeci wiersz<br>
czwarty wiersz<br>
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>
Własności czcionek
Znaczniki fizyczne
Działają w podobny sposób jak atrybuty czcionek w edytorze tekstów, tworząc warstwę
prezentacyjną redagowanego tekstu - wyróżniają one pewne fragmenty z całego przekazu.
<b> Czcionka pogrubiona </b>
Odpowiednik w CSS: font-weight: bold
<i> Czcionka pochylona</i>
Odpowiednik w CSS: font-style: italic
<u> Czcionka podkreślona</u>
<s> Czcionka przekreślona</s>
<tt> Czcionka o stałej szerokości znaku</tt>
Odpowiednik w CSS: font-family: monospace
<sup> Superskrypt (indeks górny)</sup>
Odpowiednik w CSS: vertical-align: super
<sub> Subskrypt (indeks dolny)</sub>
Odpowiednik w CSS: vertical-align: sub
<big> Duża czcionka (+1)</big>
Odpowiednik w CSS: font-size: larger
<small> Mała czcionka (-1)</small>
Odpowiednik w CSS: font-size:smaller
Znaczniki logiczne
Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale wizualny efekt ich działania jest
analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub
monotypiczna są domyślnie przypisane do wybranego znacznika logicznego.
<cite> Odwołanie do źródła </cite>
<code> Kod (tekst programu) </code>
<del> Element usunięty </del> Przy najrozmaitszych rewizjach tekstów możemy
się posłużyć poleceniem <del>, które sygnalizuje zmiany. Pokazuje ono
przekreślony fragment tekstu
<ins> Element wstawiony </ins> Gdy chcemy wyraźnie podkreślić jakąś nowość
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:
<strong> Czcionka mocno wyróżniona </strong>
<em> Czcionka wyróżniona (emfaza) </em>
Kolor czcionki
Dowolnemu fragmentowi tekstu można nadać kolor. W starszych wersjach HTML stosowano
polecenie font color="nazwa_koloru", jednak w HTML 4 zostało ono uznane za przestarzałe i do
określania koloru stosuje się obecnie style.
<p style="color: blue; ">Tekst w kolorze niebieskim.</p>
16 podstawowych barw (nazwy imienne) stosowanych w dokumentach internetowych:
black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white, green, purple, silver, yellow,
aqua.
Wielkość czcionki
Dowolnemu fragmentowi tekstu można nadać wielkość czcionki. W starszych wersjach HTML
stosowano polecenie font size="wielkość", jednak w HTML 4 zostało ono uznane za przestarzałe i
do określania wielkości stosuje się obecnie style.
Wielkość czcionki możemy regulować za pomocą czterech metod: imiennych wielkości
absolutnych, wielkości relatywnych, wysokości w jednostkach miary i wysokości w procentach.
a. Imienne wielkości absolutne (xx-small, x-small, small, medium, large, x-large, xx-large)
<p style="font-size: large; ">Tekst o wielkości large</p>
b. Wielkości relatywne (larger, smaller - w stosunku do domyślnej)
<p style="font-size: larger; ">Tekst o wielkości larger</p>
c. Wielkość w jednostkach miary - piksele (px), punkty (pt), centymetry (cm), milimetry (mm)
<p style="font-size: 14pt; ">Tekst o wielkości 14 punktów</p>
d. Wielkość w procentach
<p style="font-size: 125%; ">Akapit o wielkości 125%</p>
Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego
selektora, np. akapitu, tytułu itp.
Przeglądarki często interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu, choć
akapit jest wyświetlany poprawnie.
Krój czcionki
W starszych wersjach HTML stosowano polecenie font face="nazwa_kroju". W HTML 4.01
zrezygnowano z niego na rzecz stylów. Na przykład:
<p style="font-family: arial; ">Treść akapitu wyświetlona krojem Arial</p>
Ponieważ nie wiemy dokładnie, jakimi czcionkami dysponuje czytelnik strony, możemy się
zabezpieczyć, podając kilka kolejnych czcionek, np:
<p style="font-family: Times, Georgia'">Treść akapitu</p>
Proszę zwrócić uwagę, że gdy podajemy kilka czcionek, rozdzielamy je przecinkami i spacją. Gdy
czcionka ma kilka wyrazów w nazwie, ujmujemy je w apostrof ', podczas gdy cała definicja jest
objęta cudzysłowem.
Możemy także poslużyć się nazwą rodzajową, np. serif, co jeszcze bardziej zwiększa szansę, że
akapit zostanie wyświetlony czcionką szeryfową, gdyby zabrakło w systemie czytelnika czcionek
Times, Times New Roman itd. (sans-serif dla czcionek bezszeryfowych)
<p style="font-family: serif">Treść akapitu</p>