Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

2 Na dobry początek…  Godziny spotkań: Poniedziałek 18.10-19.40 Wtorek 18.10-19.40 Piątek 16:30-18.00  Krótkie BHP  Materiały w formie papierkowej(jeśli.

Podobne prezentacje


Prezentacja na temat: "2 Na dobry początek…  Godziny spotkań: Poniedziałek 18.10-19.40 Wtorek 18.10-19.40 Piątek 16:30-18.00  Krótkie BHP  Materiały w formie papierkowej(jeśli."— Zapis prezentacji:

1

2 2 Na dobry początek…  Godziny spotkań: Poniedziałek Wtorek Piątek 16:  Krótkie BHP  Materiały w formie papierkowej(jeśli się uda)  Pytać, pytać, pytać……

3 3 Co na kursie??  Dzisiaj wprowadzenie (raczej bez komputerów)  Później: Zabawa z tekstem Grafika na stronie (w tym odsyłacze graficzne) Tabele Style CSS Ramki i ramki pływające Formularze i przyciski Umieszczanie stron w Sieci Wstęp do PHP JavaScript  Dźwięk na stronie, publikacje elektroniczne w formacie PDF

4 4 Przykładowy dokument HTML Stronka przykladowa Stronka przykladowa

5 5 Przykładowy dokument HTML

6 6 Co to jest właściwie HTML?(1)  HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to język programowania składający się ze znaczników (ang. tags) stosowany do pisania stron WWW. Powstał w 1981r.  Ostatnią wersją HTML’a jest wersja 4.01, próbująca wydzielić zarządzanie wyglądem strony do kaskadowych arkuszy stylów CSS (będziemy omawiać później)  Specyfikacja języka: Dokument HTML jest niczym innym jak plikiem tekstowym, w którym to co chcemy w jakiś sposób wyświetlić w przeglądarce oznaczamy tagami Tagi to nawiasy „trójkątne”  Otwierający <>  Zamykający

7 7 Co to jest właściwie HTML?(2)  Pliki HTML mają rozszerzenie.html lub.htm  Otwierane są automatycznie przez przeglądarki internetowe: Internet Explorer Mozilla Firefox Inne…  Warto nazwać stronę główna index.html lub index.htm, ze względu na fakt, że będzie ona automatycznie wyświetlana przez przeglądarkę po wpisaniu adresu URL

8 8 Tagi  Tagi mówią nam, jak ma być wyświetlany tekst zawarty między nimi  Marcin - pogrubi tekst  Marcin - pogrubi i pochyli tekst  Kolejność otwierania i zamykania tagów: ….. - poprawnie …… - niepoprawnie, jednak rozumiane przez przeglądarkę, należy unikać …… - niepoprawnie, niezamknięty tag  Wielkość liter w tagach jest obojętna  Tagów jest kilkadziesiąt … trzeba je znać na pamięć

9 9 Ogólna osnowa dokumentu(1) informacje nagłówkowe właściwa treść (ciało) dokumentu  Cały dokument powinien być objęty parą znaczników. 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

10 10 Ogólna osnowa dokumentu(2)  - otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce  - umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa  - znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.

11 11 Ogólna osnowa dokumentu(3)  Między znacznikami i powinno się znaleźć polecenie  TITLE nie oznacza tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie Stronka przykladowa

12 12 Ogólna osnowa dokumentu(4) STRONA KODOWA DOKUMENTU  Zalecane stosowanie strony kodowej ISO (czyli ISO Latin 2)   Czyli….

13 13 Ogólna osnowa dokumentu(2) Tytuł strony właściwa treść (ciało) dokumentu  Pojawiło się nowe pojęcie… „Znacznik META”

14 14 Kodowanie i znaczniki META  W dokumentach powinniśmy stosować standard kodowania polskich liter ISO Jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy  Umieszcza się ją w części nagłówkowej  Często stosuje się w dokumentach WWW specjalny prolog, który identyfikuje poziom używanego języka HTML  Wstawiany PRZED otwarciem szkieletu strony, czyli znacznikiem  Jeśli dokument jest zgodny ze specyfikacją HTML 4.0, powinniśmy stosować prolog:  Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów.

15 15 Znaczniki META … (można zapomnieć)  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 internetowe  Zawiera 3 atrybuty: HTTP-EQIUV – definiuje zmienne systemowe NAME – definiuje zmienne użytkownika CONTENT  W kombinacji pierwszy z trzecim lub drugi z trzecim  Kilka przykładów… Znaczników META nie trzeba pamiętać. Edytory HTML po kliknięciu opcji „nowy dokument” wstawiają szablon znaczników ( …); należy jedynie wypełnić odpowiednie dane (dane tworzącego stronę i tym podobne) O edytorach troszkę później

16 16 Znaczniki META… cd  polecenie jest deklaracją strony kodowej dokumentu (czyli polskich ogonków)  opis zawartości strony ( znaków)  Informuje o wyrazach kluczowych dokumentu; wyrazy są oddzielane przecinkami; ułatwia to pracę wyszukiwarkom  Informacja o języku strony  Informacja o autorze strony  Zobaczmy jak to wygląda w praktyce…

17 17 Przykład Wszystko o motocyklach To jest strona o motocyklach Opis zawartości strony Słowa kluczowe Autor Język To się wyświetli w przeglądarce (pogrubione i przechylone) Kodowanie

18 18 Przykład

19 19 Stwórzmy pierwszą stronkę  Start->ustawienia->panel sterowania  Wybieramy opcje folderów zakładka widok  Znajdujemy opcję ukryj rozszerzenia znanych typów plików i ją odznaczamy  Na pulpicie klikamy prawym przyciskiem myszki i wybieramy nowy->dokument tekstowy  Nadajemy mu nazwę idex.html  Wciskamy enter  Następnie klikamy prawym przyciskiem myszki na stworzony plik i wybieramy opcję edytuj  Otworzy się nam w notatniku pusty dokument.  Zaczynamy tworzyć naszą pierwszą stronę…

20 20 Pierwsza strona ciąg dalszy  Wpisujemy ręcznie osnowę dokumentu HTML  Pomiędzy znacznikami wpisujemy dowolny tekst (można użyć znaczników )  Zapisujemy plik (skrót klawiszowy ctrl+s) lub

21 21 Pierwsza strona…ciąg dalszy  Zamykamy plik  Dwa razy klikamy na niego myszką  Otworzy się nam przeglądarka internetowa a w niej ukaże się nasza stronka  Aby zobaczyć kod strony można kliknąć na niej prawym przyciskiem myszki i wybrać opcję „Pokaż źródło strony”

22 22 Pierwsza strona…ciąg dalszy  To co się nam pojawi to zawartość (cała) naszego pliku index.html

23 23 Edytory  Pajączek (darmowy lub prawie darmowy)  WebEdit  HotDog  MS FrontPage  My wybierzemy pajączka, jest to polska dystrybucja, przez wielu uważana za jedną z najlepszych  Pajączek 2000 proffesional v.4.8.1

24 24 Więcej o (1)  Definiując możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony  Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML)  Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to, zobaczymy żółte tło  Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła  lub Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo

25 25 Więcej o (2)  Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty ALINK="kolor" (active link) określa kolor aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany  Przykład:

26 26 Kolory  Black  Olive  Red  Blue  Yellow  Green  White <-white  Aqua  Silver  Edytory takie jak Pajączek posiadają paletę kolorów i można wybrać kolor za pomocą myszki. Należy jednak znać podstawowe nazwy kolorów. Pokolorujmy naszą stronę

27 27 Przykład Elemeledutki

28 28 Przykład cd.

29 29 Co to są podstrony? Czyli wstęp do odsyłaczy (hiperłączy)  Wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej, strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablony przedstawionego wcześniej)  Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca: opis odsyłacza  Odsyłacz do adresu internetowego opis odsyłacza  Odsyłacz pocztowy opis odsyłacza Przykład

30 30 Przykład Elemeledutki Polacz z Napisz do mnie…

31 31 Przykład Po najechaniu na odsyłacz kursor przyjmie postać rączki

32 32 Pajączek Ciało dokumentu Podgląd strony

33 33 Pajączek (2)  Edytor sam dba o zamykanie tagów  Zawiera „ściągę” znaczników  Zawiera paletę kolorów  Umożliwia tworzenie strony w trybie graficznym

34 34 Zabawa z tekstem (1)  Akapit  Stosując akapity, możemy skorzystać z kilku metod wyrównywania tekstu na stronie (czyli jego ustawienia): …  Tytuł, gdzie n=1,…,6  Służy nadaniu części dokumentu (rozdziałowi) jakiegoś tytułu (nagłówka) H1 tytuł pierwszego rzędu H6 tytuł szóstego rzędu Przykład

35 35 Zabawa z tekstem (2) To jest pierwszy akapit wysrodkowany To jest drugi akapit wyrownany do prawej To jest tytuł pierwszego rzędu To jest tytuł drugiego rzędu To jest tytuł szostego rzędu

36 36 Zabawa z tekstem (3)

37 37 Zabawa z tekstem (4)  Dymek narzędziowy  Stosując polecenie:..., możemy wprowadzić opis, który będzie się pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (title="...") można stosować praktycznie w stosunku do wszystkich znaczników HTML  Koniec linii (enter)  Pogrubienie kursywa i podkreślenie  Aby wyświetlić tekst podkreślony linią innego koloru jak sam tekst  To jest czarne podkreślenie czerwoną linią  Czcionka migająca (tylko mozilla firefox)  Czcionka przekreślona  Indeks górny

38 38 Zabawa z tekstem (5)  Indeks dolny  Duża czcionka +1 punkt  Mała czcionka -1 punkt  Czcionka mocno wyróżniona  Czcionka Dzięki temu poleceniu, możesz określić wiele parametrów dotyczących pisanego tekstu (szerzej za chwilę)

39 39 Zabawa z tekstem (6)  Dalekopis Pozwala wprowadzić do dokumentu tekst, napisany czcionką monotypiczną, czyli o stałej szerokości znaku (efekt dalekopisu).  Cytat Odniesienie do źródła: ; zwykle napisane kursywą. Można w nim umieścić imię i nazwisko autora, którego cytujemy lub tytuł książki do której się odwołujemy Krótki cytat ; Przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu dlatego nie należy wstawiać dodatkowych cudzysłowów ręcznie. Umieszcza się w nim treść krótkich cytatów, które nie zawierają żadnych akapitów. Jeśli chcemy zacytować dłuższy fragment tekstu z kilkoma paragrafami, powinniśmy wykorzystać znacznik.

40 40 Przykład  Albert Einstein powiedział: Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.

41 41 Zabawa z tekstem (7)  Blok cytowany... Wprowadza blok cytowany, którego możemy użyć np. gdy powołujemy się na jakieś źródła. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Można go używać do zacytowania jakiegoś większego fragmentu, który ciągnie się przez wiele linijek.  Adres … Wprowadza blok adresu, którego możemy użyć gdy podajemy na stronie swój własny lub jakiś inny adres. Blok taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest automatycznie napisany czcionką.  Treść wstawiona i usunięta … … Pozwala podać informację o wprowadzonych na stronie zmianach. Jeśli ostatnio dodane zostały jakieś nowe rozdziały, aby o tym zakomunikować, opis tych zmian można wpisać do znacznika (taki tekst może zostać automatycznie podkreślony). Natomiast do znacznika wpisujemy opis usuniętych rozdziałów, które nie są już dostępne (zwykle tekst przekreślony).

42 42 Zabawa z tekstem (8)  Wykazy Wypunktowanie Punkt pierwszy Punkt drugi Punkt trzeci gdzie rodzaj  disc – koło (domyślny)  circle – okrąg  square – wypełniony kwadrat

43 43 Zabawa z tekstem (9)  Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu: Punkt pierwszy Punkt drugi Punkt trzeci

44 44 Zabawa z tekstem (10)  Wykazy cd Numerowany Punkt pierwszy Punkt drugi Punkt trzeci gdzie jako "rodzaj numeracji" należy podać:  "1" (domyślny) - numeracja według liczb arabskich  "I" - według dużych liczb rzymskich  "i" - według małych liczb rzymskich  "a" - według małych liter  "A" - według dużych liter

45 45 Przykład

46 46 Pozioma linia  Pozbawiona cienia - O ustalonym rozmiarze (grubości) O ustalonej długości w pikselach O ustalonej długości w % szerokości strony Można ją pozycjonować O ustalonym kolorze

47 47 Obramowanie  … Wprowadza obramowanie wokół wybranego fragmentu tekstu Polecenie to często stosuje się wraz z:..., co pozwala podać tytuł ramki. Po wpisaniu: OPIS Jakiś tekst

48 48 Komentarz  Tekst ignorowany przez przeglądarkę. Zazwyczaj zapisuje się w komentarzach informację dla nas, jako tworzących stronę, np.:

49 49 Czcionka (wielkość)  Wielkość czcionki (bezwzględna)  …, gdzie n oznacza wielkość pisma (1- najmniejsza, 7-największa, 3-domyślna) (względna)  …, gdzie +n oznacza czcionkę o n większą od aktualnej. Analogicznie –n.  Czcionka bazowa (aktualna) Oznacza ono, że od tego momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości. Gdy x=5, wprowadzi czcionkę o wielkości 6, - o wielkości 4, zmniejszy czcionkę do 2 punktów itd. Polecenie niepożądane; zalecane niestosowanie;

50 50 Czcionka (kolor i rodzaj)  Kolor...  Rodzaj... lub...  gdzie zamiast "rodzaj, rodzaj1, rodzaj2..." należy wpisać rodzaj czcionki (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu np.:...

51 51 Znaki specjalne  " = ”  = ” ” (niełamliwa spacja)  § = paragraf  © = copyright

52 52 Podział znaczników  Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER (wyśrodkowanie), B (pogrubienie), I (pochylenie)… Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu. Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony.  Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: Hn (tytuł), STRONG (mocne wyróżnienie), Q (cytat). Są wykorzystywane przez syntezatory mowy Przez roboty wyszukiwarek sieciowych


Pobierz ppt "2 Na dobry początek…  Godziny spotkań: Poniedziałek 18.10-19.40 Wtorek 18.10-19.40 Piątek 16:30-18.00  Krótkie BHP  Materiały w formie papierkowej(jeśli."

Podobne prezentacje


Reklamy Google