Kilka dobrych i ważnych rad na początek

Transkrypt

1 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> : <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. 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> <img src="fotka.jpg" alt="fotka z wakacji"> Nie: <a href= Onet.pl</a> <a href=" Onet.pl</a> Nie: <p style=color: blue; >Tekst w kolorze niebieskim.</p> <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> <strong><em>jakaś tam treść</em></strong>

2 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.

3 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, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <body> </body>. <html> informacje nagłówkowe <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. <title>kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</title> 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 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): <meta http-equiv="content-type" content="text/html; charset=iso "> W przypadku standardu Unicode informacja o stronie kodowej ma następującą postać: <meta http-equiv="content-type" content="text/html; charset=utf-8"> 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.

4 Uwaga: aby strona była poprawnie wyświetlana w danym standardzie, np. ISO , 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ęć, 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 znaków - w niektórych specjalistycznych serwisach spotyka się zalecenie "co najwyżej 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.

5 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ł 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> 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 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ó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>

6 Odpowiednik w CSS: font-family: monospace ^{Superskrypt (indeks górny)} Odpowiednik w CSS: vertical-align: super _{Subskrypt (indeks dolny)} 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>

7 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>