Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


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

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

2 Program NotH

3 Znaczniki i elementy  Znacznik (tag) – napis otoczony znakami  - znacznik otwierający  - znacznik zamykający  Znaczniki otwierający i zamykający otaczają pewien fragment, nadając mu odpowiednie znaczenie, np. znaczniki i 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 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  Wakacje  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. Jesień Niepoprawnie: 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.  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, np.  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: Witaj Niepoprawny przykład: Witaj

12  Tworząc dokument warto stosować znaki tabulacji dla zachowania czytelności kodu. Równoważne więc będą zapisy: Witaj Moja strona oraz Witaj Moja pierwsza strona  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: kot pies  Przykład poprawny: kot pies

14  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:

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 :

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  Treść dokumentu – fragment ujęty w znaczniki i, 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. …  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. Przykład. …

23 Podstawowe elementy XHTML

24

25

26

27 Akapit  …. //Ctrl+D+P Ćwiczenie Wykonaj stronę WWW prezentującą dowolny aforyzm. (Tytuł strony: Aforyzm) Ćwiczenie 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 À cheval donné on ne regarde pas les dents. Die Arznei ist oft ärger als das Übel.

30 Dzielenie wyrazów  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  Element pusty //Ctrl+D+R Ćwiczenie  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” Dewotce służebnica w czymsiś przewiniła Właśnie natenczas, kiedy pacierze kończyła. Obróciwszy się przeto z gniewem do dziewczyny, Mówiąc właśnie te słowa: „… i odpuść nam winy, Jako my odpuszczamy” — biła bez litości. Uchowaj, Panie Boże, takiej pobożności.

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: Jak Brzechwa Żuraw i czapla Przykro było żurawiowi Że samotnie ryby łowi... Przykład: Adam Mickiewicz Pan Tadeusz Księga trzecia Umizgi

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

37 Wyróżnianie tekstu  … //kursywa Ctrl+E+E  … //wytłuszczenie Ctrl+E+S Tekst preformatowany  … //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 int maximum(int a, int b) { if (a > b) { return a; } else { return b; }

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 function maximum(a:integer, b:integer) begin if (a > b) maximum := a; else maximum := b; end ;

41 Ćwiczenie  Patrz plik3.html

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

43 Indeks dolny i górny  … //indeks dolny  … //indeks górny  Ćwiczenie: plik4.html Otwarte —  Ćwiczenie: plik5.html a 1 + b 1 = c 1

44 Linia pozioma  //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 über to słowo oznacza – „nad” Wzór matematyczny a 2 = 4 a 1 = 2, a 2 = -2 x ≥ 15 50€ ¼ × ½ < 3²

48 Listy  Lista wypunktowana Pierwsza pozycja Druga pozycja Trzecia pozycja  Lista numerowana Pierwsza pozycja Druga pozycja Trzecia pozycja

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

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

51

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

53 Systematyka kota domowego: 1.Domena: eukarionty 2.Królestwo: zwierzęta 3.Typ: strunowce 4.Podtyp kręgowce 5.Gromada: ssaki 6.Podgromada żyworodne 7.Infragromada łożyskowce 8.Rząd drapieżne o Podrząd: psokształtne o 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 oraz, wewnątrz umieszczając wiersze. Do definiowania wierszy stosujemy znaczniki i. Nazwa znacznika tr jest skrótem Table Row - wiersz tabeli. Komórki umieszczamy pomiędzy oraz (ang. Table Data - dane tabeli). lp.ElementKod HTML 1. Tabela 2. Wiersz tabeli 3. Komórka tabeli 4. Komórka nagłówkowa 5. Podpis tabeli

57

58 lp. Imię 1. Jan 2. Janek 3. Janusz


Pobierz ppt "HTML, XHTML, CSS Składnia języka XHTML. Program NotH."

Podobne prezentacje


Reklamy Google