">

Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Narzędzia internetowe Paweł Rajba

Podobne prezentacje


Prezentacja na temat: "Narzędzia internetowe Paweł Rajba"— Zapis prezentacji:

1 Narzędzia internetowe Paweł Rajba

2 HTML Typy dokumentów HTML

3 HTML Struktura dokumentu

4 HTML Nagłówek, czyli znacznik HEAD TITLE – tytuł dokumentu wyświetlany w pasku przyglądarki META – metainformacje LINK – wzajemne relacje między dokumentami BASE – adres bazowy dla relatywnych odwołań ze strony

5 HTML Nagłówek, META name, content – atrybuty zawierające dodatkowe informacje o dokumencie http-equiv, content – atrybuty zawierające nagłówki serwera protokołu HTTP lang – określa język wartości atrybutu content scheme – określa dodatkowy kontekst, który ułatwia interpretację zawartości content

6 HTML Nagłówek, META, przykłady Ogólna składnia content dla Robots content = "ALL" | "NONE" | directives directives = directive ["," directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW

7 HTML Nagłówek, META, BASE, przykłady

8 HTML Nagłówek, LINK, atrybuty: charset – kodowanie wskazywanego zasobu href – adres zasobu type – typ zawartości rel – typ dokumentu wskazywanego rev – typ dokumentu, z którego jest odwołanie do bieżącego dokumentu

9 HTML Nagłówek, LINK, typy dokumentów (rel) Alternate – alternatywna wersja dokumentu, często stosowana z atrybutem lang StyleSheet – zewnętrzny arkusz styli Start – strona startowa w kolekcji dokumentów Next – następna strona w kolekcji Prev – strona poprzednia w kolekcji Index – index kolekcji dokumentów

10 HTML Nagłówek, LINK, typy dokumentów (rel) c.d. Contents – spis treści (ang. Table of Contents) dokumentów w kolekcji Glosssary – słownik pojęć Copyright – prawa autorskie dla dokumentu Appendix – appendix dla kolecji dokumentów Help – plik z dodatkową pomocą, informacjami linkami itp.

11 HTML Nagłówek, LINK, przykłady Chapter 2...reszta dokumentu...

12 HTML Przykładowy nagłówek: Strona domowa Pawła Rajby

13 HTML Przykładowy nagłówek c.d.:

14 HTML Podstawowy zestaw atrybutów id – identyfikator elementu w dokumencie; w ramach dokumenty identyfikatory muszą być różne class – określa zestaw klas elementu style – definiuje styl elementu

15 HTML BODY, czyli treść dokumentu bgcolor="kolor" – kolor tła background="URI" – obrazek tła text="kolor" – kolor tekstu link="kolor" – kolor linków vlink="kolor" – kolor odwiedzonych linków alink="kolor" – kolor aktywnych linków Wszystkie powyższe atrybuty mają status Deprecated. W ich miejsce należy używać styli.

16 HTML Grupowanie elementów DIV – elementu typu block SPAN – element typu inline Atrybut: align, lang

17 HTML Formatowanie tekstu EM – wyróżnienie STRONG – mocne wyróżnienie DFN – definicja CODE – fragment kodu programu SAMP – wynik działania programu, skryptu,… VAR – zmienna, argument programu ABBR – skróty (np. WWW, HTTP, URI, …)

18 HTML Formatowanie tekstu c.d. TT – czcionka stałej szerokości I – pochylenie B – pogrubienie BIG – "duży" font SMALL – mały font STRIKE lub S – przekreślenie (Deprecated) U – podkreślenie (Deprecated)

19 HTML Formatowanie tekstu c.d. FONT – ustawia czcionkę size – rozmiar, liczba od 1 do 7 lub relatywnie np. +1, -3 color face – lista nazw czcionek Przykład:

20 HTML Cytowania BLOCKQUOTE – typu block Q – typu inline Atrybut: cite="URL" Indeksy SUB – dolny SUP – górny

21 HTML Elementy blokowe H1-H6 – nagłówki tekstu ADRESS – adres P – akapit tekstu PRE – preformatowany fragment tekstu BR – złamanie linii Atrybut: clear="left" | "right" | "both" HR – linia pozioma Atrybuty: align, noshade, size, width

22 HTML Elementy blokowe c.d. INS, DEL – elementy mające za zadanie zaznaczać fragmenty tekstu, które zmieniły się w kolejnej wersji dokumentu Atrybuty cite="URL" – dodatkowa informacja, która ma pomóc wyjaśnić, dlaczego dokument został zmieniony datetime="datetime" – data zmiany dokumentu

23 HTML Listy UL – nienumerowane (Unordered Lists) type="disc" | "circle" | "square" compact – większy stopień upakowania OL – nienumerowane (Ordered Lists) type="1" | "A" | "a" | "i" | "I" compact – większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated.

24 HTML Listy c.d. LI – element listy (List Item) type=odpowiednio do UL lub OL value="30" – numer elementu listy compact – większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated.

25 HTML Listy – przykład Kod: Pierwszy punkt Drugi punkt Trzeci punkt i tutaj value jest 31 Da wynik: E. Pierwszy punkt AD. Drugi punkt 31. Trzeci punkt i tutaj value jest 31

26 HTML Listy – przykład zagnieżdżania Dzień pierwszy Jedzenie Spanie Wszystkie pozostałe dni Jedzenie Spanie

27 HTML Lista definicji DL – definition list DT – definition type DD – definition data

28 HTML Lista definicji - przykład Kod: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne Wynik: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne

29 HTML Tabele – znaczniki TABLE, TR, TH, TD Mały przykład na początek: Nr indeksu Ocena

30 HTML Tabele, TABLE summary="tekst" – opis tabeli width="50%" | "500" – szerokość tabeli border="2" cellpadding="4" cellspacing="1"

31 HTML Tabele, TR – wiersz w tabeli align="left" | "center" | "right" | "justify" valign="top" | "middle" | "bottom" Tabele, TH, TD – komórka w tabeli align, valign - wyrównywanie nowrap – blokuje automatyczne zawijanie wierszy width="40" – szerokość kolumny height="20" – wysokość kolumny Powyższe atrybuty dla TH i TD są Deprecated.

32 HTML Tabele TH, TD c.d. headers="a1 a2" – id komórek, którą są nagłówkiem dla bieżącej komórki scope="row" | "col" | "rowgroup" | "colgroup" – określa, jaki jest zakres komórki nagłówka rowspan="4" – łączy wiersze colspan="2" – łączy kolumny CAPTION – tytuł tabeli

33 HTML Tabela, kolejny przykład

Indeks Ocena Grupa Gr Razem
Inde">

34 HTML Tabela, kolejny przykład c.d.

35 HTML c.d. Tabela, grupowanie wierszy...nagłówek......stopka......pierwszy wiersz pierwszego bloku danych......pierwszy wiersz drugiego bloku danych......drugi wiersz drugiego bloku danych...

36 HTML Tabela, grupowanie wierszy, kilka uwag: każda grupa musi mięć co najmniej 1 wiersz, sekcja TFOOT powinna być przed TBODY, znacznik TBODY jest obowiązkowy, chyba że występuje sam i wtedy można go pominąć, znaczniki zamykające można pominąć.

37 HTML Tabela, grupowanie kolumn COLGROUP – grupuje kolumny span="4" – określa ilość kolumn w grupie, nie stosujemy gdy występuje znacznik COL width="50" – określa domyślną szerokość każdej kolumny w grupie Przykładzik:...

38 HTML Tabela, grupowanie kolumn c.d. COL – umożliwia łączenie kolumn i stosowanie do nich wspólnego formatowania; NIE grupuje kolumn span="4" – określa ilość połączonych kolumn width="50" – określa domyślną szerokość każdej kolumny w zestawie, przykrywa COLGROUP.width.

39 HTML Tabela, grupowanie kolumn, przykład......dalsza część tabelki...

40 HTML Tabela, TABLE frame – określa sposób obramowania tabeli void – z żadnej strony (domyślnie) above, below – na górze, na dole lhs, rhs – z lewej, z prawej hsides – na górze i na dole, vsides – z lewej i z prawej box, border – z każdej strony

41 HTML Tabela, TABLE rules – określa sposób wyświetlania linii wewnętrznych none – żadnych linii all – pomiędzy wierszami i kolumnami groups – pomiędzy grupami wierszy i grupami kolumn row – pomiędzy wierszami cols – pomiędzy kolumnami

42 HTML Tabela, duży przykład na koniec (strona 1/4)

CODE-PAGE SUPPORT IN MICROSOFT WINDOWS

43 HTML Tabela, duży przykład na koniec (strona 2/4) Code-Page ID Name ACP OEMCP Windows NT 3.1 Windows NT 3.51 Windows 95

44 HTML Tabela, duży przykład na koniec (strona 3/4) 1200 Unicode (BMP of ISO/IEC ) X X * 1250 Windows 3.1 Eastern European X X X X 1251 Windows 3.1 Cyrillic X X X X 1252 Windows 3.1 US (ANSI) X X X X 1253 Windows 3.1 Greek X X X X 1254 Windows 3.1 Turkish X X X X 1361 Korean (Johab) X ** X

45 HTML Tabela, duży przykład na koniec (strona 4/4) 437 MS-DOS United States X X X X 708 Arabic (ASMO 708) X X 709 Arabic (ASMO 449+, BCON V4) X X 710 Arabic (Transparent Arabic) X X 720 Arabic (Transparent ASMO) X X

46 HTML Tabela, duży przykład na koniec (efekt)

47 HTML Odnośniki – znacznik A name="nazwa" – nazwa odnośnika href="URI" – adres zasobu hreflang="pl" – określa język zasobu wskazywanego przez href type="content-type" – określa typ zawartości zasoby wskazywanego przez href rel, rev – zależności między dokumentami charset – rodzaj kodowania

48 HTML Odnośniki, A, przykłady W3C Web site Kotwica I wtedy odwołujemy się: dokument.html#kotwica Albo: Kotwica Adres względny i bezwzględny Dok

49 HTML Odnośniki, inne protokoły gopher..., telnet..., newsy..., poczta.... Przykład, wysyłanie poczty Mailnij mnie

50 HTML Obrazki – znacznik IMG src="URI" – źródło obrazka alt="tekst" – krótki opis obrazka longdesc="URI" – link do długiego opisu name="nazwa" – nazwa obrazka height="wys" – wysokość width="szer" – szerokość usemap="URI" – adres mapy

51 HTML MAPY – MAP, AREA MAP name="nazwa" – nazwa mapy AREA – definiuje obszar na mapie shape="(rect|circle|poly|default)" – typ obszaru coords="1,2,3,4" – współrzędne obszaru href="URI" – adres zasobu związanego z obszarem nohref – z tym obszarem nie jest związana żadna czynność alt="tekst" – opis obszaru

52 HTML MAPY – atrybut coords coords – określa współrzędne obszaru rect – lewy-x, góra-y, prawy-x, dół-y circle – środek-x, środek-y, promień poly – x1,y1,x2,y2,...,xN,yN

53 HTML MAPY – przykład Access Guide Search Go Top Ten

54 HTML Ramki – FRAMESET FRAMESET rows, cols – liczba wierszy i kolumn NOFRAMES – alternatywna zawartość Przykłady...cała reszta cała reszta...

55 HTML Ramki, FRAMESET Przykład zagnieżdżenia...zawartość ramki zawartość ramki 2, wiersz zawartość ramki 2, wiersz zawartość ramki 3...

56 HTML Ramki, FRAME longdesc="tekst" – długi opis name="nazwa" – nazwa src="URI" – adres zawartości ramki frameborder="(1|0)" – czy obramowanie marginwidth="pixele" – margines poziomy marginheight="pixele" – margines pionowy scrolling="(yes|no|auto)" – paski przewijania

57 HTML Ramki – przykład (strona 1/2) Przykładowy dokument z ramkami...

58 HTML Ramki – przykład (strona 2/2)... Ten dokument zawiera: Dokument 2

59 HTML Ramki pływające – IFRAME IFRAME name src frameborder marginwidth marginheight scrolling height width align="(left|right|middle|top|bottom)"

60 HTML Ramki pływające – IFRAME Przykład

';
Reklamy Google