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

1 HTML, XHTML, CSS Składnia języka XHTML ...
Author: Kinga Szulc
0 downloads 1 Views

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

2 Program NotH

3 Znaczniki i elementy Znacznik (tag) – napis otoczony znakami < oraz > - 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 XHTMLLista znaczników w języku XHTML jest ściśle określona. Język nie umożliwia dodawania nowych znaczników.

5 Elementy puste i niepusteElementy 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

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

11 Zagnieżdżanie znacznikówW 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ą niedozwoloneNatomiast 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>

15 Struktura dokumentu HTMLPoprawna, 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 wykonanaJę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 dokumentuPojawia 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.

23 Podstawowe elementy XHTML

24

25

26

27 Akapit

….

//Ctrl+D+P ĆwiczenieWykonaj 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

À cheval donné on ne regarde pas les dents.

Die Arznei ist oft ärger als das Übel.

30 Dzielenie wyrazów Zakaz łamania wierszaDo 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
//Ctrl+D+RWykonaj 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...

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

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 Tekst preformatowany //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 rozpoczyna uwypuklanie tekstu, a znacznik kończy je. Przykładowe użycie:

 one two three 

43 Indeks dolny i górny //indeks dolny //indeks górny Ćwiczenie: plik4.html

Otwarte

1030 — 1830

Ćwiczenie: plik5.html

a1 + b1 = c1

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

48 Listy Lista wypunktowana

  • Pierwsza pozycja
  • Druga pozycja
  • Trzecia pozycja
Lista numerowana

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

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

    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 

     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. Element Kod HTML 1. Tabela
    2. Wiersz tabeli 3. Komórka tabeli 4. Komórka nagłówkowa 5. Podpis tabeli

    57

    58

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