Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Język HTML. Podstawowe problemy w przetwarzaniu informacji Jak zapisywać informację w sieci Internet, Jak ją przetwarzać, Jak wprowadzać dane, Odpowiedź.

Podobne prezentacje


Prezentacja na temat: "Język HTML. Podstawowe problemy w przetwarzaniu informacji Jak zapisywać informację w sieci Internet, Jak ją przetwarzać, Jak wprowadzać dane, Odpowiedź."— Zapis prezentacji:

1 Język HTML

2 Podstawowe problemy w przetwarzaniu informacji Jak zapisywać informację w sieci Internet, Jak ją przetwarzać, Jak wprowadzać dane, Odpowiedź - obecnie strony WWW, język HTML.

3 Języki opisu dokumentów – SGML – trochę historii Język SGML (ang. Standard Generalized Markup Language) - pomysł na zestan- daryzowanie uogólnionego znakowania dokumentów. Jest to język zdefiniowany w standardzie ISO 8879 opublikowany w październiku 1986 r. Twórcą standardu jest dr Charles Goldfarb.

4 Przykład Jeżeli np. zdefiniujemy elementy chap, title i p w następujący sposób : to możemy napisać w dokumencie: Tytuł rozdziału Pierwszy akapit tekstu a nawet: Tytuł rozdziału Pierwszy akapit tekstu

5 Co po SGML HTML - pochodzi od SGML, SGML należy do języków kodujących dokument, a HTML należy do języków prezentacyjnych, tzn. wyświetlających dokument. XML - pochodzi od SGML, ma zachować zgodność w „dół” z HTML. Zrezygnowano z DTD, ponieważ jego opracowanie jest sprawą złożoną.

6 XML XML (skrót od eXtensible Markup Language - rozszerzalny ję zyk znaczników) to otwarty standard opracowany przez W3C. Otóż XML nie jest kolejnym językiem do przechowywania konkretnych danych, jak np. język HTML opisujący wygląd stron sieciowych. XML to język opisujący dane, czyli metajęzyk. W uproszczeniu można powiedzieć, że XML służy do tworzenia innych języków (aplikacji XML) służących do przechowywania informacji.

7 W języku XML opisem dla danych są one same Można również stosować schematy Definicji Typu Dokumentu (znane jeszcze z SGML, DTD) i inne sposoby deklarowania jego zawartości (jak XML Schemas), ale rzadko jest to potrzebne. Czytelność XML, nawet bez użycia specjalnych narzędzi, to jedna z jego ważniejszych zalet.

8 Przykład informacji zapisanej w XML Paweł Stroiński Jan Kowalski

9 HTML - co to jest? HTML to skrót od angielskieg o HyperText Mark-up Language. Jest to swoisty język programowania, który służy do "opisu stron". "Opis stron" to reguły określania w yglądu tekstu (wielkość, czcionka, pogrubienie, kursywa itd.). Najważniejszą cechą HTML jest to, że jest on kompatybilny z każdym systemem operacyjnym (Windows, MacOS, OS/2, rożne odmiany Unixa, itd.). HTML jest językiem (ale nie programowania)

10 Historia HTML (na podstawie W 1993 roku organizacja IETF (ang. Internet Engineering Task Force) opublikowała pierwszy szkic specyfikacji języka HTML. Producenci przeglądarek mogli zgłaszać swoje propozycje do specyfikacji przez okres 6 miesięcy. W tym samym roku w szkicu HTML+ zasugerowano standaryzację zaimplementowanych znaczników. W 1994 roku powstała Grupa Robocza HTML (ang. HTML Working Group), która w 1995 roku zaprezentowała specyfikację HTML 2.0. Był to pierwszy oficjalny standard. Specyfikacja ta zawierała pomysły ze szkicu HTML oraz HTML+. Język umożliwiał określenie koloru tła, umieszczenie obrazka w tle, tworzenie tabel oraz formularzy. W 1995 roku została zaprezentowana trzecia wersja tego języka, lecz z powodu zbytniej złożoności, prace nad nią zostały przerwane. Od 1996 roku specyfikacje HTML były rozwijane przez konsorcjum producentów oprogramowania World Wide Web Consortium (W3C) pod kontrolą, którego rozwój języka trwa do chwili obecnej. W 1997 roku HTML 3.2 został opublikowany jako rekomendacja. Wprowadzał on nowe atrybuty oraz obsługę CSS (ang. Cascading Style Sheets). W tym samym roku czarta wersja tego języka została opublikowana jako rekomendowana. Wprowadziła kilka nowych elementów, a wszystkie kwestie dotyczące wyglądu strony przejął CSS. Język ten został zaproponowany w trzech typach (Strict, Transitional, Frameset). W 1999 roku została wydana uaktualniona wersja pod numerem Obecnie jest to ostatnia rekomendowana wersja tego języka. W 2004 roku producenci Mozilli oraz Opery przedstawili swoje stanowiska na temat rozwoju HTML. Została stworzona specjalna grupa WHATWG (ang. Web Hypertext Application Technology Working Group), która w 2008 roku przedstawiła pierwszy publiczny szkic HTML 5. Do końca 2011 roku producenci przeglądarek mogli zgłaszać swoje uwagi do specyfikacji, natomiast w 2012 roku HTML 5 przeszedł w fazę kandydata do rekomendacji. W 2013 roku prace nad piątą wersją języka zostały zakończone, a w 2014 roku ma być on uznany za oficjalnie rekomendowany

11 Zgodność przeglądarek z HTML5

12 Organizacja i nawigacja - struktura liniowa Strona główna

13 Organizacja i nawigacja - struktura hierarchiczna Strona główna

14 Organizacja i nawigacja - struktura liniowa z alternatywą Strona główna

15 Organizacja i nawigacja - struktura mieszana (liniowo hierarchiczna) Strona główna

16 Organizacja i nawigacja - struktura sieciowa (pajęczyna) Strona główna

17 Elementy HTML Publiczne identyfikatory tekstu HTML Znaczniki łamania tekstu Listy Kroje czcionek Tabele Grafika i multimedia Sieć dokumentów HTML Tu znajduje się przegląd wszystkich znaczników dostępnych w poszczególnych wersjach HTMLhttp://webmaster.helion.pl/index.php/spis-polecen/32-tabela- znacznikow

18 Pierwszy plik HTML Mój pierwszy HTML Cześć Oj, oj, a co z polskimi znaczkami? Może inne?: ążźęćńłóĄŹŻĆŃŁÓ To mój pierwszy HTML

19 Dodatkowe informacje o dokumencie Mój pierwszy HTML Cześć Oooo, są polskie znaczki, :) Więcej polskich znaczków: ążźśęćłóĄŻŚŹĆĘŁŃ To mój pierwszy HTML

20 Ogólne informacje o budowie znaczników - instrukcja HTML (tzw. „tag”, „znacznik”) - koniec obszaru działania instrukcji. Mogą występować tagi bez zakończonego obszaru działania, np.., Znaczniki, które nie musza być zakończone można pisać, np. Przykłady: –... (obszar nagłówka) –.... (obszar ciała) –... (obszar pisania tytułu) –... (obszar nagłówka) – - oznacza komentarz (nie wyświetlany)

21 Znaczniki - parametry znaczników Znaczniki mogą mieć parametry, np..: –..... – – Wartości parametrów często ujmuje się w cudzysłowy, – Zwłaszcza wtedy, gdy nazwy są wieloczłonowe.

22 Nagłówki Nagłówki służą do podziału tekstu na części, są elementami ogólnego planu strony, mogą składać się wielu linii tekstu, zazwyczaj nagłówki umieszcza się na górze strony, w HTML zostało zdefiniowanych sześć poziomów nagłówka (od H1- najbardziej się wyróżnia do H6 - najmniej się wyróżnia), Różnią się między sobą wielkością i atrybutami czcionki (pogrubienie, podkreślenie, itd.), Przykład: Opis języka HTML

23 Formatowanie paragrafów Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występuje zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami,... - tagi paragrafu, Parametry „taga” P: –... - do lewej, –... - do prawej, –... - centrowanie, –... - do lewej i do prawej, – - nowy wiersz bez przerywania paragrafu –... - wyświetl tekst bez załamania wiersza – - punkt łamania linii (zwykle między ) –... - centrowanie tekstu

24 Przykład dla paragrafów Paragrafy Bez paragrafów: Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, Z paragrafami Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami,

25 Listy Listy służą do wyróżniania poszczególnych grup informacji, strukturalizują tekst dokumentu, Listy wypunktowane (są zaznaczane kropkami lub innymi symbolami), tag... Listy mogą być zagnieżdżone, Parametry:, gdzie atrybut może być równy: – „disc” - kółko lub kropka, – „square” - mały kwadrat, – „circle” - wypełnione (większość przeglądarek) kółko,

26 Listy - cd. Lista numerowane, są oznaczane kolejnymi liczbami (arabskimi, rzymskimi), tag... Atrybuty: – Type=”1” - standardowa numeracja, – Type= ”a” - numeracja za pomocą kolejnych małych liter alfabetu, – Type= ”A” - numeracja za pomocą kolejnych małych liter alfabetu, – Type= ”i” - numeracja za pomocą kolejnych małych liczb rzymskich, – Type=” I” - numeracja za pomocą kolejnych dużych liczb rzymskich, – START=wartość, np.. START=”C” – VALUE - rozpoczyna numerację listy od początku, – COMPACT - oznacza, że lista powinna zajmować jak najmniej miejsca na ekranie

27 Przykład dla list Paragrafy A1 A2 B1 B2

28 Listy - cd. Lista definicyjna - każdy element składa się dwóch części: pojęcie definiowane DT (ang. definition term) i definicji pojęcia DD (ang. definition definition), np. – – pojęcie definicja – Listy definicyjne mówią, że pojęcie i jego definicja będą zazwyczaj w osobnych wierszach, oraz linia DD jest przesunięta w prawo. Np. – – Programowanie Zapisywanie algorytmu w języku programowania –

29 Listy - cd. Listy katalogów i menu – są bardzo podobne do paragrafów, mogą być formatowane inaczej, niż zwykłe akapity – są to zazwyczaj bardzo krótkie teksty, – nie są zbyt często wykorzystywane w praktyce (przeglądarki nie rozróżniają tych list).

30 Przykład w lewo w prawo w dół w górę Spożywcze Przemysłowe Rozrywka

31 Tekst preformatowany Tekst preformatowany jest używany wtedy, gdy chcemy zachować wszystkie znaki odstępu, tabulacji, puste linie i rozmieszczenie tekstu. Czcionka jest nieproporcjonalna (litera i i m zajmują tyle samo miejsca). Używamy go do np. prezentacji tekstu programu. Np. – – Tekst preformatowany jest – Tak wyświetlany, jak został napisany –

32 Style fizyczne... - wyróżnienie,... - wyróżnienie mocniejsze,... - oznacza fragment kodu,... - oznacza tekst przykładowy,... - oznacza tekst, który ma być wpisany przez użytkownika... - oznacza nazwę zmiennej lub innego elementu oznacza definicję... - oznaczamy cytaty... - pogrubienie,... - kursywa,... - czcionka większa od reszty tekstu,... - czcionka mniejsza od reszty tekstu,... - indeks dolny,... - indeks górny.

33 Przykład dla styli fizycznych Tekst preformatowany zwykły tekst Wyróżniony tekst Mocniejsze wyróżnienie oznacza fragment kodu oznacza tekst przykładowy oznacza tekst, który ma być wpisany przez użytkownika oznacza nazwę zmiennej lub innego elementu oznacza definicję oznaczamy cytaty

34 przykład Tekst preformatowany zwykły tekst pogrubienie kursywa czcionka maszynowa podkreślony przekreślenie czcionka większa od reszty tekstu czcionka mniejsza od reszty tekstu a indeks dolny b indeks górny

35 Linie poziome Służą do wizualizacji poszczególnych fragmentów strony - znacznik HR. Atrybuty HR: – SIZE - grubość linii w pikselach, – WIDTH - długość linii w pikselach albo w procentach, – ALIGN - sposób umieszczenia linii, – NOSHADE - linia jest rysowana bez cienia Przykład: –

36 Znaki specjalne Służą do wstawiania znaków, które przez przeglądarkę mogą być zinterpretowane jako znaki formatujące, poprzedzamy je znakiem & (ampersand) Znaki specjalne - przykłady: – < - <, – > - > – &#n - znak o kodzie n Przykład – – < Tekst1> –

37 Inne znaczniki Pozwala na lepszą semantykę HTML poprzez zdefiniowanie pojemnika który zawiera spójny zbiór elementów, niezależny od innych treści. Ułatwia to publikację kilku artykułów o różnej tematyce na jednej stronie. Pozwala na zdefiniowanie pojemnika który nieznacznie jest powiązany z treścią. Może służyć do oddzielenia reklam, tekstu od głównego tekstu. Pozwala na umieszczenie muzyki na stronie bez dodatkowych wtyczek. Pozwala na odseparowanie tekstu który jest formatowany w innym kierunku niż pozostała część tekstu.Przydatne podczas pisania tekstów np: w języku arabskim. Pozwala na dynamiczne renderowanie kształtów i obrazów bitmapowych. Grafika jest tworzona za pomocą Javasciptu. Możliwe jest generowanie elementów 2d oraz 3d.

38 Inne znaczniki Pozwala na wpisanie własnych wartości do autouzupełniania.Zastępuje znacznik. Pozwala na zdefiniowanie dodatkowych detali które użytkownik może zobaczyć lub ukryć. Może być użyte do długiej listy(np: aktorów)która po kliknięciu się rozwija lub zwija. Pozwala na wskazanie dialogu pomiędzy ludźmi lub numerami. Przykładowy dialog może zawierać rozmowy ze spotkań, czatu. Pozwala na umieszczenie na stronie aplikacji lub treści interaktywnych nie będących w formacie HTML. Najczęściej są to aplikacje do których niezbędne jest doinstalowanie dodatkowych wtyczkę np : Adobe Flash Pozwala na podpisanie załącznika, zbioru elementów. Często wykorzystywany w publikacjach naukowych do podpisania zbioru rysunków.

39 Inne znaczniki Pozwala na oznaczanie danych multimedialnych, które są istotne dla danego artykułu (sekcji), lecz mogą także być prezentowane samodzielnie. Stopka zastępuje używany w HTML4 Nagłówek zastępuje używany w HTML4 Pozwala na wygenerowanie klucza RSA lub innego dla użytkownika. Wygenerowane zostaną 2 klucze z czego pierwszy zostanie u użytkownika a drugi zostanie wysłany do serwera. Pozwala na wyróżnienie tekstu tak by zwrócić uwagę użytkownika. Podkreśla tekst przy użyciu żółtego “mazaka”.

40 Inne znaczniki Pozwala na statyczne pokazanie postępu. Jest to statyczny odpowiednik znacznika.Nadaje się do pokazania np: pozostałego miejsca na hostingu. Pozwala na wydzielenie sekcji strony która zawiera odnośniki do strony lun innych stron. Służy głównie do nawigacji po stronie ( menu strony). Pozwala na wyświetlenie wyników obliczenia wykonanego przez Javascript. Pozwala na pokazanie paska postępu. Nadaje się do pokazania np: postępu wgrywania plików na serwer.

41 Pozwala na wprowadzenie adnotacji nad fragmentem tekstu. Stosowany do pokazania wymowy znaku lub wyrazu. W znaczniku należy umieścić objaśniany tekst. Pozwala na wprowadzenie wymowy słowa umieszczonego w znaczniku Pozwala na wprowadzenie adnotacji w przeglądarce która nie obsługuje znacznika Reprezentuje sekcję dokumentu która zawiera nagłówek. Sekcjami może być np: rozdział ksiązki lub grupowane tematycznie treści na stronie. Pozwala na określenie kilku źródeł pliku dla elementu oraz.Jeżeli przeglądarka nie obsługuje pierwszego formatu próbuje odtworzyć alternatywny format wideo podany jako druga ścieżka(source).

42 Inne znaczniki Pozwala na zmianę nazwy, legendy dla znacznika. Pozwala na oznaczenie daty jakiegoś zdarzenia. Data jest podana według kalendarza gregoriańskiego lub w formacie 24h.Jest to czas przeznaczony dla aplikacji lub robotów sieciowych. Pozwala na określenie ścieżki tekstowej dla elementu.Przy jego użyciu można dołączyć np: napisy do filmu lub rozdziały pomagające w nawigacji. Pozwala na umieszczenie video na stronie bez dodatkowych wtyczek. Pozwala na opcjonalne łamanie wiersza. Wiersz jest łamany tylko w razie gdy nie mieści się w divie.

43 Połączenia Połączenia służą do tworzenia hiperpołączeń (połączeń z innymi plikami) oraz do tworzenia specjalnych miejsc wewnątrz stron, do których prowadzą inne połączenia. Do tworzenia połączeń służy tag A z atrybutem HREF – tekst podświetlony, gdzie nazwa_pliku ma postać adres URL/specyfikacja, – przykłady: HREF=”users/moje/dane/list01” HREF=”../users/moje/dane/list01” HREF=”/users/moje/dane/list01” HREF=”d:\users\moje\dane\list01” HREF=”http://www.wp.pl/users/mojehobby/start.html HREF=”http://www.serwer/moje%20dokumenty/jan%2f.html” - oznacza nazwę pliku moje dokumenty/jan/f - jan/f jest nazwą pliku.

44 Połączenia Odnośniki - odnośniki służą do wskazywania miejsc w dokumencie, Tworzymy je za pomocą atrybutu NAME w tagu A: – opis_odnośnika przejście do nazwanego miejsca: – opis

45 Przykład Pierwszy plik o nazwie plik: Wybierz okno Wybierz nadrzędne okno Otwiera Ładuje nowy tekst do pierwsze pierwsze_okno

46 Przykład działania TARGET - cd Drugi plik o nazwie plik1.htm: Pierwsze okno Pierwsze okno Trzeci plik o nazwie plik2.htm: Pierwsze okno Pierwsze okno Z nowym tekstem

47 Działanie Działanie: wczytujemy plik o nazwie plik.htm do przeglądarki, Po kliknięciu napisu „Otwiera” otwierane jest nowe okno o nazwie pierwsze_okno po kliknięciu napisu „ładuje nowy tekst do okna o nazwie pierwsze_okno” zastępuje zawartość „Pierwsze okno” zawartością „Pierwsze okno z nowym tekstem”.

48 Uwaga Znacznik BASE: – zamiast dodawać znacznik TARGET do każdego znacznika A można za pomocą taga BASE wskazać, że wszystkie połączenia na stronie będą skierowane do tego samego okna, – składnia:

49 Inny przykład wykorzystania znacznika target Witryny, z których korzystam Onet Wirtualna Polska interia zajecia z HTML

50 Obrazy Obrazy mogą być: – wewnętrzne (pojawiają się na stronie razem z tekstem i połączeniami) – zewnętrzne (są przechowywane poza stroną WWW) – muszą być zapisane w odpowiednim formacie: GIF, JPEG lub BMP – do obsługi obrazów graficznych służy znacznik IMG, – sposób użycia:

51 Przykład To jest kwiatek Koniec kwiatka

52 Obrazy - cd. Atrybuty IMG - położenie obrazka: – ALIGN=TOP - na górze, – ALIGN=MIDDLE -na środku strony, – ALIGN=BOTTON - na dole strony, – ALIGN=TEXTTOP - obrazek ma górną krawędź taką jaką litery, – ALIGN=ABSMIDDLE -leży pośrodku największego elementu, – ALIGN=BASELINE - środek obrazka znajduje się w środku tekstu, – ALIGN=BASELINE - wyrównuje dolną krawędź względem dolnej krawędzi tekstu, – ALIGN=ABSBOTTON - wyrównuje dolną krawędź obrazka względem dolnej krawędzi największego elementu

53 Przykład To jest kwiatek Koniec kwiatka

54 Obrazy cd. Otaczanie tekstem obrazu: – ALIGN=LEFT - obraz położony przy lewym marginesie, – ALIGN=RIGHT - obraz położony przy prawym, – HSPACE=n - określa odległość w pikselach obrazu od tekstu w poziomie, – VSPACE=n - określa odległość w pikselach obrazu od tekstu w pionie,

55 Przyklad To jest kwiatek Koniec kwiatka

56 Przykład To jest kwiatek Koniec kwiatka

57 Obrazy cd. Skalowanie obrazów: – WIDTH - szerokość obrazu,, – HEIGHT- wysokość obrazu,, – BORDER=n - określa grubość ramki otaczającej obraz,.

58 Przykład To jest kwiatek Koniec kwiatka

59 Przykład Tekst preformatowany to jest obrazek to jest obrazek to jest obrazek

60 Kolory Kolory pomagają „ożywić” stronę, wyróżnić ważniejsze elementy. Kolory możemy zapisywać za pomocą: – liczby szesnastkowej (np. #ABB000 - są to trzy liczby szesnastkowe połączone razem, AB - red, B0 - green, 00 - blue), – predefiniowanej nazwy (np. white, black, purple). Do ustawiania koloru tła służy tag BGCOLOR –

61 Kolory cd. Pozostałe atrybuty: – TEXT - określa kolor tekstu, – LINK - określa kolor połączeń, które nie zostały wybrane, – VLINK - określa kolor połączeń, które zostały wybrane, – ALINK - określa kolor połączeń, które zostały wybrane i jeszcze na nich jest naciśnięty przycisk myszy, – FONT COLOR – określa niezależnie od ogólnych ustawień kolor liter dla fragmentu tekstu zielony - kolor liter zielony

62 Czcionki: rozmiary, kolory - przykład Tekst preformatowany To jest tekst kolor liter zielony kolor liter czerwony

63 Tabele Tabele poprawiają czytelność tekstu, umożliwiają prezentację danych w formie tabelarycznej. Jest to znacznik, który umożliwia rozmieszczanie tekstu, obrazów i innych elementów w wierszach i kolumnach otoczonych obramowaniem (lub bez obramowania).

64 Tabele - elementy składowe Podpis (opis tabeli) - informuj o zawartości tabeli, Nagłówek tabeli - to etykiety wierszy i kolumn (zazwyczaj wyświetlamy czcionką większą), są opcjonalne, Dane tabeli - to wartości wpisane w tabelę, Komórki tabeli - to najmniejsze elementy tabeli.

65 Tabele - znacznik TABLE Do tworzenia tabeli służy: – zawartość tabeli Atrybut BORDER: – BORDER =n - oznacza obramowanie. – Jeśli n=0, to obramowania nie ma, n oznacza grubość obramowania w pikselach, – np.

66 Tabele - wstawianie wierszy Do wstawiania wierszy służy znacznik: – zawartość wiersza Do wstawiania komórek w wierszu służy znacznik: – zawartość komórki nagłówka dla nagłówka – zawartość komórki danych dla komórek danych

67 Tabele - prosty przykład Tabela zawierająca wiersz nagłówka na górze i dwa wiersze oraz dwie kolumny: Przykład tabeli Nazwisko Adres Abacki Siedlce Babacki Warszawa Nie ustawiamy szerokości komórek, przeglądarka sama dostosuje się.

68 Wynik

69 Tabele - przykład 2 Tabela zawierająca wiersz nagłówka z boku i dwa wiersze oraz dwie kolumny: Przykład tabeli 2 Dana 1 Abacki Siedlce ul. Sienkiewicza Dana 2 Babacki Warszawa ul. Marszałkowska

70 Wynik

71 Tabele - podpisy Podpisy informują czytelnika czego dotyczy tabela, Tworzymy je za pomocą znacznika – Atrybut ALIGN=TOP|BOTTOM umożliwia nagłówka, TOP na górze, BOTTOM na dole tabeli, – Atrybut VALIGN=LEFT|CENTER|RIGHT - określa wyrównywanie w poziomie

72 Tabele - wyrównywanie tabeli względem marginesów i zawartości komórek względem komórek Atrybut ALIGN w znaczniku TABLE - działa tak samo jak dla CAPTION, w wierszu (po znaczniku ) ALIGN określa sposób wyrównania tekstu w komórce względem pionowych ścian, a VALIGN względem poziomych ścian

73 Przykład Przykład tabeli 3 - rozmieszczanie tekstu Przykłady rozmieszczenia elementów w komórkach tabeli lewo środek prawo Góra * lewo i góra prawo i góra środek i góra Środek * lewo i środek prawo i środek środek i środek Dół * lewo i dół prawo i dół środek i dół

74 Efekt poprzedniego przykładu

75 Tabele - komórki rozpięte na kilka kolumn lub wierszy, szerokość tabeli, komórek Aby utworzyć komórki rozpięte na kilku wierszach lub kolumnach stosujemy atrybut: – ROWSPAN=n- dla łączenia n wierszy, – COLSPAN=n- dla łączenia n kolumn, Szerokość określamy za pomocą atrybutu WIDTH w znaczniku TABLE (dla szerokości tabeli, TH lub TD dla szerokości kolumn Odstępy między komórkami: atrybut CELLSPACING=n w znaczniku TABLE, gdzie n oznacza odległość w pikselach, Odstępy między zawartością komórki a jej obramowaniem: atrybut CELLPADDING=n, gdzie n oznacza odległość w pikselach,

76 Przykład Przykład tabeli 4 -operacje na komórkach Przykłady manipulowania komórkami Płeć Mężczyzna Kobieta 10% 20%

77 Wynik

78 Tabele - kolory Kolory można dodawać do znaczników: – TABLE, – Kolory dodajemy za pomocą atrybutu BGCOLOR=kolor, gdzie kolor=#nnmmll lub kolor=nazwa_koloru

79 Tabele - przykład Przykład tabeli 4 -operacje na komórkach Przykłady manipulowania komórkami Płeć Mężczyzna Kobieta 10% 20%

80 Przykład

81 Ramki lokalne Ramki lokalne: obsługiwane za pomocą znacznika umożliwia wstawianie dokumentów w dowolnym miejscu innego dokumentu Atrybuty znacznika IFRAME: – WIDTH - szerokość ramki w pikselach, – HEIGHT - wysokość ramki w pikselach, – SRC - adres – NAME - nazwa ramki, – FRAMEBORDER - czy ma być wyświetlane obramowanie, – BORDER - szerokość obramowania, – BORDERCOLOR - kolor obramowania – FRAMESPACING - odstep między krawędziami ramek, – MARGINWIDTH - szerokość marginesu, – MARGINHEIGHT - wysokość marginesu, – NORESIZE - bez zmiany możliwości rozmiaru ramki, – SCROLLING - czy mają być wyświetlane paski przewijania, – VSPACE - wysokość marginesu – HSPACE - szerokość marginesu – ALIGN - umiejscowienie ramki względem tekstu,

82 Przykład Złożony podział ekranu To jest ramka lokalna

83 Wynik

84 Formularze Często korzysta się nie tylko ze statycznych stron WWW, ale także z dynamicznych – obsługiwanych przez program Mechanizmy poznane do tej pory pozwalały na bierne oglądanie stron, formularze zmieniają to, formularze umożliwiają współpracę witryny z użytkownikiem, Aby uzyskać pożądane informacje z dynamicznej strony, trzeba przekazać jej parametry Przekazanie parametrów do programu może nastąpić przy pomocy „formatki”

85 Czym są formularze? są grupą znaczników, są elementem standardu HTML, do formularza potrzebny jest: – program skryptowy działający po stronie serwera, – układ formularza w dokumencie HTML, – Postać formularza:... gdzie METHOD określa sposób przesłania danych do skryptu, ACTION zawiera adres URL skryptu, Uwaga: programem skryptowym może być także program napisany w języku Java Script – to jest pełnoprawny język programowania.

86 Ogólna struktura formatki Instrukcje przekazywania parametrów Instrukcje wysyłania parametrów do programu

87 Formularze Wprowadzanie danych: Atrybuty INPUT: – TYPE=”typ”, gdzie typ=text (dla tekstu), radio (dla przycisków radialnych), checkbox (dla przycisków wyboru), „RESET” przywraca domyślne ustawienia przycisków, – NAME=nazwa elementu, wykorzystywana przez skrypt CGI – SUBMIT - tworzy przycisk wysyłający dane – VALUE - wartość początkowa, – CHECKED - pole wybrane początkowo – SIZE =”n” rozmiar tekstu w znakach, n znaków można wprowadzić, – TYPE=”HIDDEN” - pole jest ukryte

88 Przykład Nazwisko= Imię= Płeć= Kobieta mężczyzna Zainteresowania: Informatyka Programowanie HTML

89 Wynik

90 Opcje wyboru Znacznik SELECT umożliwia użytkownikowi witryny wybór z listy opcja1... opcjan

91 Przykład biały czerwony zielony niebieski

92 Pola tekstowe Umożliwiają wprowadzenie przez użytkownika pewnego tekstu – Tekst w okienku Argumenty: – WRAP=OFF nie zawija, chyba że użytkownik naciśnie Enter, – WRAP=ON - tekst jest zawijany

93 Przykład Twoja wypowiedź

94 Pliki „stylowe” Cascading Style Sheets (CSS oddziela formatowanie od zawartości stron WWW Pozwala na globalne zmiany wielu stron WWW poprzez zmianę tylko jednego pliku Pozwala też zaoszczędzić na wielkości stron WWW przez usunięcie wielu instrukcji formatujących Są przydatne (bardzo przydatne), gdy tworzymy dużą witrynę – takie witryny mogą liczyć kilka tysięcy plików.

95 Co styl reguluje Kroje czcionek, ich rodzaje, kolory i wielkości Obramowania tekstu Pozycjonowanie tekstu Rodzaje kursora

96 Wstawianie „instrukcji stylowych” Wewnątrz strony WWW (raczej niewiele nam daje, rzadko spotykane, ale można korzystać dla niewielkich witryn): – w części : definicje stylu W oddzielnym pliku mojstyl.css (podstawa, obowiązkowo dla dużych witryn): – W części lub trzeba włączyć instrukcję:

97 Prosta definicja stylu: Zmiana koloru w elementach 'H1‘ na zielony W pliku CSS podać H1 { color: green } Pełną listę atrybutów elementów HTML, które można zmienić, można znaleźć pod adresem:http://www.w3.org/TR/REC- CSS1

98 Przykład H1 { color: green } Tekst

99 Klasy Definicja klasy w CSS - przykład.czerwtekst{ FONT-SIZE: 12px; COLOR: red } Wykorzystanie tej klasy w HTML: Tekst czerwony to samo Albo w ten sposób: Ten tekst będzie czerwony, 12- punktow. Można zgadnąć, że to samo

100 Przyklad.czerwtekst{ FONT-SIZE: 12px; COLOR: red } Tekst

101 Przykład – definicja stylu w innym pliku

102 Inny przykład

103 Dalsze przykłady linki { FONT-SIZE: 11px; COLOR: #003399; FONT-FAMILY: Arial; TEXT-DECORATION: none } A:hover { COLOR: #cc3333; TEXT-DECORATION: underline } h1 { font-family: Verdana; font-size: 16px; color: #CC0000; font-weight: bold} h2 { font-family: Arial; font-size: 13px; font-weight: bold; color: #000099} p { font-family: Arial; font-size: 12px; color: #333333} pre { font-size: 12px} H3, H4, H5 { COLOR: #CC0000 }

104 Co można ustawiać OL.wazne {FONT-FAMILY: "Times New Roman CE", "Times New Roman", Times, "New York", serif; FONT-SIZE: 80%; MARGIN: 2px 1em 2px 5.5em}

105 Co można ustawiać BODY { BACKGROUND: white; FONT-FAMILY: Verdana, "Arial CE", Arial, Helvetica, sans-serif} body { f ont-family:Verdana, sans-serif; background-color:#ffffcc; font-size:10pt; background-image:url(bg.gif); background-repeat:repeat-y; padding:0px 40px 0px 90px;} H1 {FONT-FAMILY: Verdana, "Arial CE", Arial, Helvetica, sans-serif; FONT-WEIGHT: bold; MARGIN-BOTTOM: 2px; MARGIN-RIGHT: 1em; MARGIN-TOP: 6px; TEXT-ALIGN: left} H1 {COLOR: black; FONT-SIZE: 140%; MARGIN-LEFT: 0.5em}

106 Obramowanie akapitu Akapit z górnym obramowaniem Akapit z prawym obramowaniem Akapit z dolnym obramowaniem Akapit z lewym obramowaniem Akapit

107 Kolor obramowania Akapit z dolnym, grubym czerwonym obramowaniem Akapit z górnym, cienkim czerwonym obramowaniem Akapit z lewym, średnim czerwonym obramowaniem

108 Styl obramowania Border-style przybiera wartości: none, dotted (nie realizowane), dashed (nie realizowane), solid, double, groove, ridge, inset, outset. Akapit Zamiast border-width: thick; border-style: double; border-color: red możemy wpisać po prostu border: thick double red

109 Style kursora cursor:styl_kursora. (IE) – PRZYKŁAD – Cały plik: – – PRZYKŁAD – Tekst – – Działanie – najedziemy kursorem myszki na tekst i zmienia się ona na „rączkę” Inne przykłady: cursor:crosshair cursor:hand cursor:move cursor:text cursor:wait cursor:help cursor:default cursor:auto

110 Znaczniki Tu znajduje się przegląd wszystkich znaczników dostepnych w poszczególnych wersjach HTML – Pozwala na lepszą semantykę HTML poprzez zdefiniowanie pojemnika który zawiera spójny zbiór elementów, niezależny od innych treści. Ułatwia to publikację kilku artykułów o różnej tematyce na jednej stronie. Pozwala na zdefiniowanie pojemnika który nieznacznie jest powiązany z treścią. Może służyć do oddzielenia reklam, tekstu od głównego tekstu. Pozwala na umieszczenie muzyki na stronie bez dodatkowych wtyczek. Pozwala na odseparowanie tekstu który jest formatowany w innym kierunku niż pozostała część tekstu.Przydatne podczas pisania tekstów np: w języku arabskim.

111 Znaczniki Pozwala na dynamiczne renderowanie kształtów i obrazów bitmapowych. Grafika jest tworzona za pomocą Javasciptu. Możliwe jest generowanie elementów 2d oraz 3d. Pozwala na wpisanie własnych wartości do autouzupełniania. Zastępuje znacznik. Pozwala na zdefiniowanie dodatkowych detali które użytkownik może zobaczyć lub ukryć. Może być użyte do długiej listy(np: aktorów)która po kliknięciu się rozwija lub zwija. Pozwala na wskazanie dialogu pomiędzy ludźmi lub numerami. Przykładowy dialog może zawierać rozmowy ze spotkań, czatu. Pozwala na umieszczenie na stronie aplikacji lub treści interaktywnych nie będących w formacie HTML. Najczęściej są to aplikacje do których niezbędne jest doinstalowanie dodatkowych wtyczkę np : Adobe Flash

112 Znaczniki Pozwala na podpisanie załącznika, zbioru elementów. Często wykorzystywany w publikacjach naukowych do podpisania zbioru rysunków. Pozwala na oznaczanie danych multimedialnych, które są istotne dla danego artykułu (sekcji), lecz mogą także być prezentowane samodzielnie. Stopka zastępuje używany w HTML4 Nagłówek zastępuje używany w HTML4 Pozwala na wygenerowanie klucza RSA lub innego dla użytkownika. Wygenerowane zostaną 2 klucze z czego pierwszy zostanie u użytkownika a drugi zostanie wysłany do serwera. Pozwala na wyróżnienie tekstu tak by zwrócić uwagę użytkownika. Podkreśla tekst przy użyciu żółtego “mazaka”.

113 Znaczniki Pozwala na statyczne pokazanie postępu. Jest to statyczny odpowiednik znacznika. Nadaje się do pokazania np: pozostałego miejsca na hostingu. Pozwala na wydzielenie sekcji strony która zawiera odnośniki do strony lun innych stron. Służy głównie do nawigacji po stronie ( menu strony). Pozwala na wyświetlenie wyników obliczenia wykonanego przez Javascript. Pozwala na pokazanie paska postępu. Nadaje się do pokazania np: postępu wgrywania plików na serwer. Pozwala na wprowadzenie adnotacji nad fragmentem tekstu. Stosowany do pokazania wymowy znaku lub wyrazu. W znaczniku należy umieścić objaśniany tekst.

114 Znaczniki Pozwala na wprowadzenie wymowy słowa umieszczonego w znaczniku Pozwala na wprowadzenie adnotacji w przeglądarce która nie obsługuje znacznika Reprezentuje sekcję dokumentu która zawiera nagłówek. Sekcjami może być np: rozdział ksiązki lub grupowane tematycznie treści na stronie. Pozwala na określenie kilku źródeł pliku dla elementu oraz.Jeżeli przeglądarka nie obsługuje pierwszego formatu próbuje odtworzyć alternatywny format wideo podany jako druga ścieżka(source).

115 Znaczniki Pozwala na zmianę nazwy, legendy dla znacznika. Pozwala na oznaczenie daty jakiegoś zdarzenia. Data jest podana według kalendarza gregoriańskiego lub w formacie 24h.Jest to czas przeznaczony dla aplikacji lub robotów sieciowych. Pozwala na określenie ścieżki tekstowej dla elementu.Przy jego użyciu można dołączyć np: napisy do filmu lub rozdziały pomagające w nawigacji. Pozwala na umieszczenie video na stronie bez dodatkowych wtyczek. Pozwala na opcjonalne łamanie wiersza. Wiersz jest łamany tylko w razie gdy nie mieści się w divie.


Pobierz ppt "Język HTML. Podstawowe problemy w przetwarzaniu informacji Jak zapisywać informację w sieci Internet, Jak ją przetwarzać, Jak wprowadzać dane, Odpowiedź."

Podobne prezentacje


Reklamy Google