Tworzenie Stron Internetowych. odcinek 2

Transkrypt

1 Tworzenie Stron Internetowych odcinek 2

2 Zawartość DOCTYPE Deklaracja <!DOCTYPE> Deklaracja ta musi znaleźd się na samym początku dokumentu HTML, przed znacznikiem <html>. Nie jest to znacznik języka HTML, ale informacją dla przeglądarki o tym w jakim języku napisany jest dokument xhtml (i HTML4) wymaga podania DTD Document Type Definition, który określa zasady języka HTML. Dokument ten jest niezbędny dla poprawnej interpretacji kodu źródłowego przez przeglądarkę. HTML5 nie wymaga podania DTD szczegóły na przykładzie deklaracji dla xhtml1.0 Strict i HTML5: główny element dokumentu Zastosowanie dokumentu, tu ogólne Identyfikator, w tym: standard ISO, nazwa autora, nazwa języka, język użyty w opisie dokumentu. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ścieżka do pliku DTD

3 treść struktura prezentacja Koocowy wygląd strony internetowej to efekt współdziałania kilku technologii, pełniących różne zadania. Stronę tę tworzą: treśd, czyli to co chcemy opublikowad w sieci struktura, czyli podział tekstu na części o różnym znaczeniu (tzw. semantyka dokumentu); za strukturę odpowiada (x)html rozbicie dokumentu na sekcje za pomocą nagłówków, ułożenie tekstu w akapity, listy i tabele oraz nadanie precyzyjnego formatowania słowom, czy zdaniom oznaczając ich ważnośd, czy rolę w dokumencie jak np. cytat, definiowane słowo, odnośnik prezentacja/układ, czyli definiowanie wyglądu dokumentu (jego elementów strukturalnych) za pomocą CSS podanie reguł ogólne opisujących wygląd dokumentu i reguł szczegółowo opisujących wygląd poszczególnych jego elementów zachowanie, czyli kontrola zachowania zawartości i interakcja z użytkownikiem przy wykorzystaniu Javascript. Dawniej W starszych wersjach HTML opisywał zarówno strukturę, jak i prezentację.

4 poprawność HTML Poziomy poprawności HTML: 1. Poprawnośd składni niezbędna do wyświetlenia dokumentu. 2. Poprawnośd struktury, czyli odpowiednia budowa dokumentu, np. umieszczanie elementów liniowych w blokowych, a nie odwrotnie. Brak tej poprawności może powodowad błędne zachowanie przeglądarek. 3. Semantycznośd kodu, czyli wykorzystanie elementów HTML zgodnie z ich przeznaczeniem. Przeglądarka nie służy do sprawdzania poprawności kodu HTML. Przeglądarka jest litościwa. Sprawdzenie poprawności kodu (pierwsze dwa poziomy) można zrobid za pomocą walidatorów: walidator W3C (W3C Markup Validation Service), dostępny pod adresem validator.w3.org walidatory dostępne w przeglądarkach, np. Firefox z wtyczką Web Developer qua^wkwality tester (kwality.polip.com) Tidy program (opensource) Dave'a Raggetta walidujący kod HTML i XHTML, może współdziaład z edytorami HTML, np. ked CSE HTML Validator płatny program dla środowiska Windows Walidator wskazuje błędy (errors) i ostrzeżenia (warnings) oraz sugeruje jak je poprawid.

5 poprawność HTML O tym należy pamiętad (HTML5 vs. xhtml): dokument HTML musi zawierac deklarację DOCTYPE oraz elementy html, head i body wszystkie elementy HTML muszą zawierad się w jednym elemencie <html> elementy HTML powinny/muszą byd zawsze zamknięte: <p>jakiś akapit</p> elementy HTML powinny/muszą byd poprawnie zagnieżdżone: <b><i>tekst</i></b> elementy HTML powinny/muszą byd pisane małymi literami nazwy atrybutów powinny/muszą byd pisane małymi literami: <abbr title="et c etera">etc.</abbr> wartości atrybutów muszą byd w " " (lub ' ' )

6 poprawność HTML Dlaczego elementy HTML należy używad zgodnie z ich przeznaczaniem (kod semantyczny)? (autor) arkusze CSS dla nich są prostsze i czytelniejsze - nadanie stylów danemu elementowi zmieni tylko odpowiednie fragmenty strony i nic innego. (przeglądarka) lepsze przedstawienie strony użytkownikowi (wyszukiwarka) lepsze rozpoznawanie temat dokumentu W kodzie semantycznym unikamy używania znaczników prezentacyjnych a dostępne znaczniki używamy do budowy struktury dokumentu. Co znaczy zgodnie z ich przeznaczaniem? kursywa: podkreślenie ważności <em>, czy np. podanie źródła cytatu <cite>? pogrubienie: nagłówek <h1> czy bardzo ważny fragment tekstu <strong>? Pamiętajcie o globalnej strukturze dokumentu elementy powinny mied odpowiedni, logiczny układ : najważniejsze nagłówki zamykamy w znaczniku <h1>, te niższego poziomu oznaczamy <h2>, itd., dla akapitów używamy <p>

7 formatowanie dokumentu Element HTML składa się z: znacznika otwierającego atrybut(u/ów) zawartości znacznika zamykającego przykład: <p id= intro > przykładowy akapit</p> Typy funkcyjne elementów HTML: strukturalne opis logicznej struktury tekstu hipertekstowe zawierają linki do innych dokumentów lub innych części tego samego dokumentu prezentacyjne opis wyglądu poszczególnych elementów

8 formatowanie dokumentu Elementy HTML można podzielid na: Elementy blokowe (block elements) Bloki otaczające tekst, np.: akapity, nagłówki, tabele, listy. Najczęściej są same w linii. Mogą zawierad w sobie elementy liniowe i w niektórych przypadkach inne elementy blokowe. Elementy liniowe (inline elements) Elementy wplecione w tekst i zachowujące sie jak tekst, np. wyróżnienie, odnośnik. Elementy liniowe są dzielone i przenoszone do nowej linii razem z tekstem, który zawierają. Elementy liniowe nie mogą zawierad elementów blokowych.

9 elementy blokowe Nagłówki <h1>, <h2>,..., <h6> Nagłówki (heading) dzielą dokument na logiczne fragmenty (np.: tytuły rozdziałów, podrozdziałów, itp.). Występują w sześciu stopniach, od <h1> (najgrubszy podział) do <h6> (najdrobniejszy podział). Nagłówki powinny byd ułożone wg hierarchii. <h1>tytuł strony</h1> <h2>tytuł rozdziału 1</h2> <h3>tytuł podrozdziału 1.1</h3>... <h2>tytuł rozdziału 2</h2> Numeracja nagłówków nie oznacza ich kolejności, ani ważności. Oznacza ich hierarchię.

10 elementy blokowe Akapity: <p> (i łamanie linii: <br />) Akapit oznacza element <p> (paragraph). Unikamy wymuszania przejścia do nowej linii wykorzystując <br />, ponieważ tekst jest automatycznie łamany do szerokości akapitu. Łamanie linii stosujemy tylko w przypadkach koniecznych, np.: wiersze, dialogii. przykład: <p>mars ma dwa księżyce, Fobosa i Deimosa, które są małe i mają nieregularny kształt. Mogą one byd przechwyconymi planetoidami.</p>

11 elementy blokowe Listy nieuporządkowane, uporządkowane i listy definicji Listy nie mogą byd wewnątrz akapitu <p>. Listy nieuporządkowane: <ul> Używa się ich, gdy kolejnośd elementów listy jest bez znaczenia. Listę definiuje się przez <ul> (unordered list), a poszczególne jej elementy przez <li> (list item). Bezpośrednio w <ul> nie może byd żadnych innych elementów niż <li>. Listy można zagnieżdżad. Kod list podrzędnych wpisujemy wewnątrz znacznika <li>...</li> będącego punktem nadrzędnym. <p>jadąc na rajd zabierz:</p> <ul> <li>buty - trapery</li> <li>nieprzemakalna kurtkę</li> <li>smaczny prowiant: <ul> <li>czekolada</li> </ul> </li> </ul>

12 elementy blokowe Listy uporządkowane: <ol> List uporządkowanych używamy, gdy kolejnośd elementów ma znaczenie dla treści. Listę definiuje się przez <ol> (ordered list), a poszczególne jej elementy przez <li> (list item). Elementy listy będą automatycznie ponumerowane przez przeglądarkę. Bezpośrednio w <ul> nie może byd żadnych innych elementów niż <li>. Zasady zagnieżdżania są takie same jak dla <ul>. <p>plan rajdu:</p> <ol> <li>spotkanie na dworcu</li> <li>przejazd pociągiem</li> <li>przejście trasy</li> <li>kolacja i nocleg</li> </ol>

13 elementy blokowe Listy definicji: <dl> Lista definicji <dl> (definition list) zawieraja dwa rodzaje elementów - termin <dt> (definition term) i jego objaśnienie <dd> (definition description). Umożliwia tworzenie np.: słowników, FAQ. Jeden termin może mied wiele definicji i jedna definicja może opisywad wiele terminów. przykładowy kod źródłowy: <p>słownik rajdowy:</p> <dl> <dt>kt PKP</dt> <dd>" konsorcjum turystyczne " organizujące Rajd Astronomów</dd> <dt>niezbędnik Uczestnika Rajdu</dt> <dd>informator rajdowy</dd> </dl> i efekt jego działania: Słownik rajdowy: KT PKP "konsorcjum turystyczne" organizujące Rajd astronomów Niezbędnik Uczestnika Rajdu informator rajdowy

14 elementy blokowe Cytowany fragment: <blockquote> Używany jest do cytowania długich fragmentów tekstu. Wewnątrz <blockquote> należy używad elementów blokowych formatujących tekst (np. paragrafów). Atrybut cite pozwala definiowad źródło pochodzenia cytatu Krótkie cytaty można oznaczad za pomocą <q>. <p>na stronach rajdowych znajdujemy taki oto tekst</p> <blockquote cite=" <p>rajd odbywa się dwa razy w roku: pierwszy na wiosnę (edycja wiosenna), drugi na jesieo (edycja jesienna). Jedynym warunkiem uczestnictwa jest nieodparta chęd powałęsania się w dobrym towarzystwie i z garbem (czyli plecakiem) po dzikich, górskich ostępach.</p> </blockquote>

15 elementy blokowe Oddzielanie elementów: <hr /> Element <hr /> (horizontal rule) wstawia poziomą linię. Umożliwia podział dokumentu inaczej niż z wykorzystaniem nagłówków. Nie może byd umieszczany wewnątrz paragrafów. <p>opis trasy rajdowej </p> <hr /> <p>pytania? napisz do nas: </p> Tekst preformatowany: <pre> Element ten służy do wyświetlania tekstu z zachowaniem wszystkich spacji i znaków podziału wiersza dokładnie tak, jak są zapisane w kodzie źródłowym HTML. Zazwyczaj używa się go w połączeniu z <code> lub <samp>. <pre> <code> a=findgen(100)/10.0 b=sin(a) c=fltarr(10) for i=0,9 do c(i)=a(i)*b(i) </code> </pre>

16 elementy blokowe Dane kontaktowe: <address> Element ten definiuje adres związany ze stroną, na której jest umieszczony, np. dane kontaktowe z autora danej strony lub znaczącej jej części (adres tradycyjny lub , numer telefonu czy numer komunikatora internetowego). Może zawierad jedynie elementy liniowe. Wstawiając wielolinijkowy adres należy posłużyd się elementem <br />: <address> Konsorcjum Turystyczne PKP <br /> ul. Kopernika 11 <br /> Wrocław </address> Blok/sekcja: <div> Służy do grupowania elementów i dzielenia strony na bloki, jeśli nie ma bardziej właściwego elementu do tego celu. <div> <h1>rajd Astronomów</h1> <p>najnowsze informacje</p> </div>

17 elementy blokowe Obramowanie <fieldset> Znacznik <fieldset> służy do grupowania pól w formularzach, jednak za jego pomocą możemy dodad obramowanie wokół wybranego fragmentu dokumentu (nie tylko formularza). Wygląd obramowania może zależed od przeglądarki. <fieldset> tekst </fieldset> Dodając znacznik <legend> (musi byd wewnątrz <fieldset>) można podad tytuł ramki. <fieldset> <legend>opis</legend> tekst </fieldset>

18 elementy liniowe Elementy liniowe (ang. inline) Elementy liniowe służą do oznaczania tekstu (nie tworzą bloków) Skrót: <abbr> i skrótowiec: <acronym> Wskazuje, że dane słowo jest skrótem lub skrótowcem. Użycie atrybutu title umożliwia podanie jego rozwinięcia, co ułatwia czytelnikowi (i wyszukiwarkom) zrozumienie tekstu. <abbr title="et cetera (i tym podobne)">etc.</abbr> <acronym title= Studenckie Koło Przewodników Sudeckich">SKPS</acronym> <acronym> został usunięty z HTML5 Cytat: <q> Oznacza cytowany krótki fragment. Dłuższe fragmenty najlepiej oznaczad przez <blockquote>. <p>przed pierwszym rajdem większośd twierdziła, że <q>trasa rajdowa powinna mied km</q> na jeden dzieo.</p>

19 elementy liniowe Nawiązanie: <cite> Elementem <cite> oznaczamy autora lub źródło cytatu (np. tytuł cytowanej książki). <p>na podstawie <cite>słownika Geografii Turystycznej Sudetów, tom 20</cite>.</p> Emfaza: <em> i ważny tekst: <strong> Umożliwiają podkreślenie, wzmocnienie wyrazistości wybranego fragmentu tekstu. <em> ma mniejszy nacisk niż <strong>. <p><strong>uwaga</strong> pamiętajcie, aby zabrad <em>korony czeskie</em> na rajd. </p> Kod: <code> Używany do oznaczenia przykładowego kodu komputerowego. Często używany wewnątrz tekstu pre formatowanego <pre>. <code>a=reform(b)</code>

20 elementy liniowe Zmienna: <var> Zmienna (komputerowa, matematyczna). Może byd używany wewnątrz <code> lub samodzielnie. Element przydatny do wyróżniania zmiennych w cytowanym kodzie. <var>y</var> = exp(<var>x</var>) Definicja: <dfn> Pomaga umieścid objaśnienie terminu pojawiającego się w tekście. Objaśniane słowo oznaczamy przez <dfn>. <dfn>sgts</dfn> - Słownik Geografii Turystycznej Sudetów Kombinacja klawiszy: <kbd> Określa przykładowy tekst do wpisania lub skrót klawiszowy. Wciśnij <kbd>ctrl+alt+del</kbd>

21 elementy liniowe Przykład: <samp> Pozwala oznaczyd przykładowy wynik działania programu. Łącząc ten element z <kbd> możemy opisad dialog użytkownika z komputerem. Jeżeli program zapyta nas <samp>czy na pewno kontynuowad?</samp>, musimy kliknąd <samp>tak</samp> lub wcisnąd <kbd>enter</kbd>. Indeks dolny: <sub> i górny: <sup> Stosujemy, gdy tekst wymaga zapisu z indeksem górnym i dolnym. W skład wiatru słonecznego wchodzi <sup>4</sup>he Oznaczanie zmian: <ins> i <del> Element <ins> oznacza tekst, który został wstawiony, natomiast <del> tekst, który został (a właściwie ma zostad) usunięty. Wyjazd o godzinie <ins>7:00</ins> a nie o <del>8:00</del>.

22 elementy liniowe Drobny tekst: <small> Stosuje się go do opisu mało ważnego tekstu (przeciwieostwo <em> i <strong>) <small>przedpłata nie podlega zwrotowi.</small> Dowolny zakres: <span> Liniowy odpowiednik blokowego <div>. Korzystając z niego możemy np. tworzyd własne elementy do rzeczy, których HTML nie przewiduje. <span>rajd Astro</span> <span>nomów</span> Elementy prezentacyjne: <b> (pogrubienie) i <i> (kursywa) Zazwyczaj nie powinno się ich używad. Należy rozważyd czy inny znacznik HTML nie jest w danej sytuacji bardziej odpowiedni. Uwaga: dzięki CSS można każdy fragment tekstu pogrubid lub pochylid. Tekst <b>pogrubiony</b> lub <i>pochylony</i>

23 elementy liniowe Wyróżniony tekst: <mark> Znacznik stosuje się do oznaczenia tekstu, który ma byd wyróżniony. Znacznik dostępny tylko w HTML5. Przedpłata <mark>nie podlega zwrotowi.</mark> Przełamanie wyrazu: <wbr> Znacznik wstawia punkt przełamania wyrazu (word break). Pozwala on przeglądarce podzielid wyraz we wskazanym miejscu. Szczególnie przydatny w przypadku długich wyrazów. Znacznik dostępny tylko w HTML5. Megkápo<wbr>sztáshúsíto<wbr>ttalanítottátok to jedno z najdłuższych słów w języku węgierskim.

24 przydatna encja Niełamliwa spacja Niełamliwa spacja, zwana również twardą spacją umożliwia: blokadę przełamania wiersza miedzy wybranymi wyrazami dodanie więcej niż jednej spacji między wybranymi wyrazami lub spacji na początku akapitu. Dzięki temu możemy zapobiec np. pojawienia się spójników na koocu linii lub rozdzielenia wartości od jednostek do osobnych wierszy: biały i czarny masa wynosi 10 kg

25 wygląd domyślny i semantyczność (Domyślnie) niektóre elementy dają podobny efekt wizualny (np. pogrubienie i pochylenie). Należy ich jednak używad zgodnie z przeznaczeniem (kod semantyczny). Dla przykładu: <p><strong>tekst</strong></p> wygląda tak samo jak nagłówek, ale ma zupełnie inne znaczenie.