HTML, XHTML, CSS Składnia języka XHTML.

Prezentacja na temat: "HTML, XHTML, CSS Składnia języka XHTML."— Zapis prezentacji:

1 HTML, XHTML, CSS Składnia języka XHTML

2 Program NotH

3 Znaczniki i elementy Znacznik (tag) – napis otoczony znakami < oraz > <strong> - znacznik otwierający </strong> - znacznik zamykający Znaczniki otwierający i zamykający otaczają pewien fragment, nadając mu odpowiednie znaczenie, np. znaczniki <strong> i </strong> uwypuklają fragment tekstu. Element- para znaczników, czyli znacznik otwierający i znacznik zamykający (powyższy przykład zawierał element strong) Nazwy znaczników zapisywane są wyłącznie małymi literami!

4 Wszystkie elementy języka XHTML
Lista znaczników w języku XHTML jest ściśle określona. Język nie umożliwia dodawania nowych znaczników.

5 Elementy puste i niepuste
Elementy niepuste – mają dwa znaczniki – otwierający i zamykający, np. em, strong. Korzystając z tych elementów, należy zawsze użyć znacznika otwierającego i zamykającego. Pominięcie znacznika zamykającego jest niedozwolone. Elementy puste – nie mają znaczników zamykających, np. br, hr.

6 Znaki specjalne < <
< < < (dziesiętnym kodem ASCII znaku < jest liczba 60 -> numeryczna encja dziesiętna) < (liczba 60 wyrażona w systemie szesnastkowym ma wartość 3c -> numeryczna encja szesnastkowa) > > Każdy znak specjalny jest poprzedzony symbolem & i zakończony średnikiem. Tylko niewielka część znaków (kilkadziesiąt) ma swoje nazwy – w odniesieniu do pozostałych należy posłużyć się kodami dziesiętnymi lub szesnastkowymi, np. å lub å Щ

7

8 Atrybuty znaczników Znaczniki otwierające mogą zawierać atrybuty; rola atrybutów polega na nadawaniu dodatkowych właściwości elementom <h1 id=„tytul”>Wakacje</h1> Atrybuty są zapisywane w postaci: nazwa=„wartość” Znak równości = nie może być otoczony przez białe znaki Cudzysłów otaczający wartości atrybutów jest konieczny i nie może być pominięty, może być natomiast zastąpiony apostrofem Wartości atrybutów mogą zawierać znaki specjalne, ale nie mogą zawierać kodu XHTML, np. <h1 title=„Wiersz pt. "Jesień"’>Jesień</h1> Niepoprawnie: <p class=„Black <br />white”>

9 Nazwy wszystkich atrybutów, podobnie jak nazwy znaczników należy zapisywać małymi literami.
W przypadku użycia kilku atrybutów ich kolejność może być dowolna, a poszczególne atrybuty należy oddzielić białymi znakami, np. <div class=„menu” id=„glowne”> Każdy element XHTML ma własną listę atrybutów, które można mu przypisać, np. do elementu h1 możemy dołączyć 16 atrybutów: id, class, style, title lang, dir onclick, ondbclick, onkeydown, onkeyup onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onmousepress

10 Komentarze w XHTML Komentarze w dokumentach XHTML należy umieszczać pomiędzy <!-- oraz -->, np. <!--komentarz --> Skrót w NOTH: Ctrl+B+K Komentarzy nie wolno zagnieżdżać Komentarze nie mogą występować wewnątrz znaczników

11 Zagnieżdżanie znaczników
W przypadku zagnieżdżania znaczników trzeba zwrócić szczególną uwagę na ich kolejność. Pierwszy znacznik otwierający musi być ostatnim zamykającym. Nie wolno ich między sobą przeplatać. Poprawny przykład: <p> <strong> Witaj </strong> </p> Niepoprawny przykład: <p> <strong> Witaj </p> </strong>

12 Tworząc dokument warto stosować znaki tabulacji dla zachowania czytelności kodu. Równoważne więc będą zapisy: <p id=”pierwszy”><h3>Witaj</h3><strong>Moja strona</strong></p> oraz <p id=”pierwszy”> <h3>Witaj</h3> <strong>Moja pierwsza strona</strong> </p> Druga postać wydaje się być bardziej czytelna. Na pewno bardziej widoczny efekt otrzymamy przy większej ilości kodu.

13 Białe znaki Na poprawność kodu nie wpływa występowanie w treści elementów białych znaków (spacja, tabulacja, złamanie wiersza). Może jedynie wystąpić drobna różnica przy wyświetlaniu elementów przez przeglądarkę. Ale generalnie białe znaki zostaną potraktowane jako pojedyncze separatory. Dla przykładu weźmy słowa kot i pies, które mają być oddzielone 5 spacjami. Przykład niepoprawny: <p>kot pies</p> Przykład poprawny: <p>kot     pies</p>

14 Natomiast białe znaki poprzedzające nazwę znacznika są niedozwolone
Natomiast białe znaki poprzedzające nazwę znacznika są niedozwolone. Najlepiej w ogóle nie umieszczać białych znaków wewnątrz znaczników. Zapis niepoprawny: < p> < /p> </ p>

15 Struktura dokumentu HTML
Poprawna, pusta strona WWW napisana w języku XHTML:

16 Składa się ona z trzech części:
Definicji typu dokumentu (deklaracja DOCTYPE) Nagłówka dokumentu (element head) Treści dokumentu (element body) Szablon: skrót Ctrl+B+1 (NOTH)

17 Definicja typu dokumentu – ustala język, w jakim strona została wykonana
Język XHTML 1.0 jest dostępny w trzech dialektach określanych terminami: strict, transitional, frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Framset//EN" "

18 Dialekt strict jest najbardziej restrykcyjny, nie pozwala na używanie żadnych przestarzałych elementów Dialekt transitional pozwala na stosowanie wszystkich elementów dostępnych w dialekcie strict oraz dodatkowo na korzystanie z kilku wycofanych elementów Dialekt framset dopuszcza wszystkie znaczniki dialektu transitional oraz dodatkowo zezwala na stosowanie ramek Jest to informacja dla przeglądarki, w jaki sposób ma zinterpretować i wyświetlić stronę, ale także informacja dla walidatorów i edytorów kodu jakie znaczniki mogą być użyte.

19 Nagłówek strony zawarty w elemencie head zawiera różne informacje dotyczące całego dokumentu
Pojawia się tu m.in. tytuł (element title) oraz kodowanie polskich znaków (element meta) Dodatkowo mogą wystąpić tutaj dane autora dokumentu, skrócony opis treści dokumentu, lista słów kluczowych czy style formatujące dokument <meta name="Description" content="opis strony"> <meta name="Keywords" content="słowa kluczowe"> <meta name="Author" content="autor"> Treść dokumentu – fragment ujęty w znaczniki <body> i </body>, umieszcza się tu wszelkie teksty i obrazy, jakie mają być widoczne na stronie WWW

20 Ćwiczenie Wykonaj stronę WWW o tytule Witaj. W treści strony umieść zdanie Moja pierwsza strona WWW. Do umieszczenia treści strony użyj elementu p.

21 Atrybuty standardowe Jak już wcześniej wspomnieliśmy znaczniki posiadają atrybuty złożone z nazwy i wartości. Atrybuty standardowe dla większości znaczników to: class - klasa CSS (lub lista klas) elementu id - unikalny identyfikator elementu style - styl elementu (inline) title - tekst do wyświetlenia jako Tooltip po najechaniu myszką Każdy element HTML może mieć atrybut class. Wartością atrybutu jest nazwa klasy lub ciąg nazw kilku klas oddzielonych białymi znakami. Użycie atrybutu class pozwala nadać wspólne formatowanie grupie elementów. Więcej powiemy o atrybucie class przy okazji kaskadowych arkuszy stylów.

22 Przykład. <p class=”zielona”> … </p> <p class=”glowna zielona”> … </p> Atrybut id nadaje elementowi HTML unikalny identyfikator, czyli w jednym pliku nie ma dwóch elementów z taką samą wartością atrybutu id. Atrybut id wykorzystujemy w arkuszach stylów do nadania unikalnego formatowania dla danego elementu oraz do tworzenia odsyłaczy wewnętrznych na stronie. <p id=”glowny”> …</p>

23 Podstawowe elementy XHTML

24

25

26

27 Akapit <p>….</p> //Ctrl+D+P Ćwiczenie
Wykonaj stronę WWW prezentującą dowolny aforyzm. (Tytuł strony: Aforyzm) Wykonaj stronę WWW prezentującą dziesięć przysłów polskich. (Tytuł strony: Przysłowia polskie)

28 Ćwiczenie Wykonaj stronę WWW prezentującą następujące trzy przysłowia: francuskie, niemieckie, rosyjskie. Znaki diaktryczne zakoduj jako encje. À cheval donné on ne regarde pas les dents. Die Arznei ist oft ärger als das Übel.

29 <p xml:lang="fr"> À cheval donné on ne regarde pas les dents. </p> <p xml:lang="de"> Die Arznei ist oft ärger als das Übel.

30 Dzielenie wyrazów Zakaz łamania wiersza
Do wskazania miejsc podziału długich wyrazów służy znak nazywany opcjonalnym łącznikiem, zapisywany w postaci encji ­ (informuje przeglądarkę o możliwości złamania wiersza) Przykład: trans­for­ma­tor Zakaz łamania wiersza Twarda spacja   //Ctrl+Q+S Przykład: w połowie lipca w Krakowie odbywa się…

31 Złamanie wiersza Ćwiczenie Element pusty <br /> //Ctrl+D+R
Wykonaj stronę WWW prezentującą treść piosenki dziecięcej pt. Bajka iskierki.

32 Znaki interpunkcyjne Podstawowe znaki interpunkcyjne, np. kropkę, przecinek czy średnik, uzyskujemy z klawiatury. Myślniki oraz stosowany w języku polskim cudzysłów nie są dostępne na klawiaturze. Myślnik : — //Ctrl+Q+M Półpauza: – //Ctrl+Q+N Polski cudzysłów: „ (znak otwierający) ” (znak zamykający) //Ctrl+Q+P Wielokropek: … //Ctrl+Q+H

33 Ćwiczenie Wykonaj stronę WWW z tekstem bajki Ignacego Krasickiego „Dewotka” <p> Dewotce służebnica w czymsiś przewiniła<br /> Właśnie natenczas, kiedy pacierze kończyła.<br /> Obróciwszy się przeto z gniewem do dziewczyny,<br /> Mówiąc właśnie te słowa: „… i odpuść nam winy,<br /> Jako my odpuszczamy” — biła bez litości.<br /> Uchowaj, Panie Boże, takiej pobożności.<br /> </p>

34 Nagłówki Elementy : h1, h2, h3, h4, h5 oraz h6 odgrywają rolę nagłówków. Służą do oznaczania rozdziałów oraz do definiowania struktury dokumentu. Nagłówek h1 ma największą wagę, zaś h6 najmniejszą. Domyślnie przeglądarka wyświetla nagłówki h1 największą czcionką, a h2, h3, h4, h5 coraz mniejszą, a h6- najmniejszą. Przykład: <h1>Jak Brzechwa</h1> <h2>Żuraw i czapla</h2> <p>Przykro było żurawiowi<br /> Że samotnie ryby łowi...</p> <h1>Adam Mickiewicz</h1> <h2>Pan Tadeusz</h2> <h3>Księga trzecia</h3> <h4>Umizgi</h4>

35 Ćwiczenie Wykonaj stronę WWW prezentującą fragment spisu treści książki Włodzimierza Gajdy pt. jQuery. Poradnik programisty. Wykorzystaj nagłówki h1, h2, h3 i h4. Autora i tytuł książki oznacz nagłówkami h1 i h2, zaś rozdziały i podrozdziały- nagłówkami h3 i h4. Wykorzystaj plik1.txt

36 <h1>Włodzimierz Gajda</h1> <h2>jQuery
<h1>Włodzimierz Gajda</h1> <h2>jQuery. Poradnik programisty</h2> <h3>Część pierwsza: Abecadło</h3> <h4>Rozdział 1. Korzystanie z biblioteki jQuery</h4> <h4>Rozdział 2. Trzy warstwy dokumentu XHTML:...</h4> <h4>Rozdział 3. Selektory CSS i zdarzenia XHTML</h4> ... <h3>Część druga: Interfejs API biblioteki jQuery</h3> <h4>Rozdział 13. Funkcja jQuery() ? w skrócie $()</h4> <h4>Rozdział 14. Selektory</h4> <h4>Rozdział 15. Odczyt i modyfikacja węzłów drzewa...</h4> <h3>Część trzecia: Wtyczki</h3> <h4>Rozdział 19. Pierwsza wtyczka</h4> <h4>Rozdział 20. Parametry wtyczek</h4> <h4>Rozdział 21. Tworzenie wtyczek</h4>

37 Wyróżnianie tekstu Tekst preformatowany
<em>…</em> //kursywa Ctrl+E+E <strong>…</strong> //wytłuszczenie Ctrl+E+S Tekst preformatowany <pre>…</pre> //Ctrl+D+C Domyślna czcionka nieproporcjonalna (o stałej szerokości, wykorzystywana do przedstawiania kodów źródłowych programów komputerowych, wyraźnie widać wcięcia i odstępy między znakami) Zachowywanie białych znaków

38 <pre> int maximum(int a, int b) { if (a > b) { return a; } else { return b; } </pre>

39 Ćwiczenie Wykonaj stronę WWW prezentującą funkcję maximum() napisaną w języku Pascal. Uwypuklij słowa kluczowe. Patrz plik2.html Ćwiczenie to pokazuje, że element pre może zawierać niektóre elementy zmieniające format tekstu. Wewnątrz pre nie można umieszczać m.in. elementów sub, sup oraz hr.

40 <pre> <strong>function</strong> maximum(a:integer, b:integer) <strong>begin</strong> <strong>if</strong> (a > b) maximum := a; <strong>else</strong> maximum := b; <strong>end</strong>; </pre>

41 Ćwiczenie Patrz plik3.html

42 <p> Znacznik <strong><em></strong> rozpoczyna uwypuklanie tekstu, a znacznik <strong></em></strong> kończy je. Przykładowe użycie: </p> <pre> one <em>two</em> three </pre>

43 Indeks dolny i górny _… //indeks dolny
^… //indeks górny Ćwiczenie: plik4.html <h1>Otwarte</h1> <h2>10³⁰ — 18³⁰</h2> Ćwiczenie: plik5.html <p> a₁ + b₁ = c₁ </p>

44 Linia pozioma <hr /> //obecnie bardzo rzadko używany, poziome linie dekoracyjne lepiej jest wykonywać, korzystając z arkuszy stylów //Ctrl+D+H

45 Popularne znaki specjalne
× → ↑ ↓ ←

46 Ćwiczenie

47 <!-- słownik --> <h4 lang="de"><strong>über</strong></h4> <p>to słowo oznacza – <em>„nad”</em></p> <hr> <!-- wzór matematyczny --> <h3>Wzór matematyczny</h3> <pre>a² = 4 a₁ = 2, a₂ = -2 </pre> <!-- inne --> <p> x ≥ 15 <br> 50€ <br> ¼ × ½ < 3² </p>

48 Listy Lista wypunktowana <ul>
<li>Pierwsza pozycja</li> <li>Druga pozycja</li> <li>Trzecia pozycja</li> </ul> Lista numerowana <ol> </ol>

49 Lista definicji Za pomocą znaczników <dl></dl> określamy główne ramy listy. Następnie przy użyciu znaczników <dt></dt> oznaczamy słowo lub fragment tekstu, który chcemy szerzej opisać. Na koniec używając <dd></dd> dodajemy opis. <dl> <dt>słowo definiowane</dt> <dd>opis słowa definiowanego</dd> <dt>kolejne słowo definiowane</dt> <dd>kolejny opis słowa definiowanego</dd> </dl>

50 <li>śmietana</li> </ul> </li>
Listy zagnieżdżone Podczas zagnieżdżania możemy łączyć różne typy list, np. numerowaną z wypunktowaną. Przykład <ol> <li>Sporty <ul> <li>siatkówka</li> <li>koszykówka</li> <li>piłka ręczna</li> </ul> </li> <li>Produkty mleczne <li>mleko</li> <li>jogurt naturalny</li> <li>śmietana</li> </ul> </li> <li>Warzywa <ul> <li>cebula</li> <li>korzeniowe <li>pietruszka</li> <li>marchew</li> </ol>

51

52 Ćwiczenie Państwa Europy to: Włochy Polska Czechy Słowacja Białoruś
Stwórz następujące listy: Państwa Europy to: Włochy Polska Czechy Słowacja Białoruś

53 Systematyka kota domowego: Domena: eukarionty Królestwo: zwierzęta
Typ: strunowce Podtyp kręgowce Gromada: ssaki Podgromada żyworodne Infragromada łożyskowce Rząd drapieżne Podrząd: psokształtne Podrząd: kotoksztaltne Felidae – kotowate Viverridae – wiwerowate Eupleridae – falanrukowate

54

55

56 Tabele Tabela HTML składa się z wierszy podzielonych na komórki. Całą tabelę otaczamy znacznikami <table> oraz </table>, wewnątrz umieszczając wiersze. Do definiowania wierszy stosujemy znaczniki <tr> i </tr>. Nazwa znacznika tr jest skrótem Table Row - wiersz tabeli. Komórki umieszczamy pomiędzy <td> oraz </td> (ang. Table Data - dane tabeli). lp. Element Kod HTML 1. Tabela <TABLE></TABLE> 2. Wiersz tabeli <TR></TR> 3. Komórka tabeli <TD></TD> 4. Komórka nagłówkowa <TH></TH> 5. Podpis tabeli <CAPTION></CAPTION>

57

58 <table> <tr> <th>lp
<table> <tr> <th>lp.</th> <th>Imię</th> </tr> <td>1.</td> <td>Jan</td> <td>2.</td> <td>Janek</td> <td>3.</td> <td>Janusz</td> </table>