Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML – dokument Dokument HTML : zwykły plik tekstowy, zawierający znaczniki (polecenia) HTML i zwykły tekst. nazywane są również stronami internetowymi.

Podobne prezentacje


Prezentacja na temat: "HTML – dokument Dokument HTML : zwykły plik tekstowy, zawierający znaczniki (polecenia) HTML i zwykły tekst. nazywane są również stronami internetowymi."— Zapis prezentacji:

1 HTML – dokument Dokument HTML : zwykły plik tekstowy, zawierający znaczniki (polecenia) HTML i zwykły tekst. nazywane są również stronami internetowymi można go utworzyć za pomocą najprostszego edytora tekstów (np. Notatnika w Windows), ręcznie wpisując znaczniki (metoda skuteczna, lecz zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy komercyjne, aczkolwiek można znaleźć też sporo programów całkowicie bezpłatnych (freeware). Polskie programy do tworzenia stron internetowych: Lepiej używać edytorów tekstowych, a nie graficznych, gdyż można uzyskać lepszą kontrolę nad tworzonym dokumentem.

2 HTML – edytory W środowisku Windows 95/98/ME/NT/2000/XP/Vista/7 do najpopularniejszych edytorów należą m.in. : Pajączek NxG - program komercyjny w wersji profesjonalnej i standardową. CoreEditor - polski, komercyjny edytor, porównywalny z Pajączkiem, obsługujący także XHTML. kED - polski, darmowy edytor, obsługujący XHTML Zajączek - darmowy edytor HateML Pro- polski, darmowy edytor z obsługą (X)HTML.

3 HTML – polecenie HTML (Hyper Text M arkup Language ) : jest językiem do opisywania stron internetowych. POLECENIE (ZNACZNIK, TAG) HTML : specjalny ciąg znaków, objęty nawiasami ostrymi np. znaczniki HTML zazwyczaj występują w parach, np. i Znacznik otwierający (początku) znacznik zamykający (końca) Znaczniki opisują zawartość dokumentu Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami interpretowane są w ten sam sposób. w HTML zalecane jest jednak stosowanie małych znaczników, gdyż w XHTML, który jest kontynuacją języka HTML, małe znaczniki są już obowiązkowe, np. Moja strona zamiast Moja strona

4 HTML – polecenie należy domykać zawsze znaczniki - dotyczy to ogromnej większości znaczników, poza bardzo nielicznymi, jak:,, np. To jest akapit nie należy mieszać znaczników, tzn. nie należy tworzyć z nich "przekładańca". Nie należy pisać więc: Jakaś tam treść lecz Jakaś tam treść

5 HTML – elementy ELEMENTY HTML : Znaczniki HTML i elementów HTML są często używane do opisania tego samego. Ale ściśle mówiąc, elementem HTML określamy wszystko co znajduje się między znacznikiem początkowym i końcowym, w tym również znaczniki, np. : To jest akapit. znacznik element HTML znacznik końca początku

6 Standardowa osnowa dokumentu HTML: HTML 5 prolog (typ dokumentu i wersja HTML, definiuje rodzaj języka użytego do opracowania dokumentu HTML 4.01 (wersja I) HTML 4.01 (wersja II) ramy całego dokumentu ramy informacji nagłówkowych Tytuł strony treść w pasku tytułowym przeglądarki (HTML 5) (HTML 4.01) informacje o stronie kodowej – standard kodowania polskich liter (Pol. Norma) Właściwa treść (ciało) dokumentu

7 HTML – znacznik TITLE i META Informacje o znaczniku TITLE: Zaleca się zwykle nieprzekraczanie 40 znaków Tytułu nie należy mylić z pierwszym nagłówkiem strony Nie należy używać w tytułach samych WIELKICH LITER, a także adresów internetowych gdyż wiele wyszukiwarek zignoruje stronę. warto w nim podać istotne, konkretne informacje, np. nie Moja strona, lecz podać konkretnie czyja to jest strona. To, co umieszczone jest w ramach TITLE, zostanie wyświetlone jako tytuł znalezionej strony tytuł strony jest widoczny w zakładkach przeglądarki (Ulubione). Informacje o znaczniku META: 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 sieciowe. Zawiera ono trzy atrybuty: HTTP-EQUIV (definiuje zmienne systemowe) NAME ( definiuje zmienne użytkownika) CONTENT w kombinacji pierwszy z trzecim lub drugi z trzecim

8 HTML – znacznik META Informacje o znaczniku META cd: jest poleceniem zalecanym (choć niewymaganym), gdyż usprawnia funkcjonowanie witryny w Sieci. jest użytecznym instrumentem współpracującym z przeglądarkami internetowymi i sieciowymi wyszukiwarkami. w obrębie. można umieścić polecenia dotyczące np. : 1.strony kodowej, 2.opisu strony, ◦ opisuje zawartość strony ◦ ułatwia pracę osobom korzystającym z wyszukiwarki ◦ zawartość Description zostanie wyświetlona pod tytułem, jako opis strony ◦ gdy nie jest użyte Description, wyszukiwarka wyświetli kilka pierwszych wierszy dokumentu, które mogą być zupełnie przypadkowe

9 HTML – znacznik META Informacje o znaczniku META cd: 3.wyrazów kluczowych, ◦ informuje o wyrazach kluczowych dokumentu ◦ wyrazy kluczowe ułatwiają pracę sieciowym programom indeksująco- wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. 4.autora strony, 5.daty utworzenia

10 HTML – przeglądarki PRZEGLĄDARKI INTERNETOWE: są wyspecjalizowanymi programami, które interpretują znaczniki i "przetwarzają" je na właściwą postać graficzną. nie wyświetla tagów HTML, ale wykorzystuje znaczniki do określenia, w jaki sposób treść strony HTML należy przedstawić i wyświetlić użytkownikowi. różnią się zaawansowaniem technicznym do najlepszych należą: 1. Firefox Fundacji Mozilla, 2.Opera firmy Opera Software, 3.Safari firmy Apple, 4.Chrome firmy Google 5.Internet Explorer firmy Microsoft.

11 HTML – spis poleceń POLECENIEOPISPOLECENIEOPIS kotwica skrót akronim adres obszar artykuł treść poboczna, powiązana z treścią artykułu kontener pliku dźwiękowego pogrubienie czcionki adres bazowy czcionka bazowa kierunek tekstu zwiększenie czcionki cytat blokowy ciało dokumentu przełamanie wiersza przycisk kontener do renderowania grafiki podpis tabeli środkowanie cytat czcionka kodu

12 HTML – spis poleceń POLECENIEOPISPOLECENIEOPIS kolumna grupa kolumn polecenie wywoływane przez użytkownika lista danych w funkcji autouzupełniania treść definicji usunięty tekst pełna treść elementu definicja wycinek lista definicji hasło definicji emfaza czcionki interfejs osadzonego zasobu zewnętrznego grupa elementów formularza podpis dla grupy elementów grupa treści multimedialnych z podpisem czcionka stopka strony lub fragmentu dokumentu

13 HTML – spis poleceń POLECENIEOPISPOLECENIEOPIS formularz ramka układ ramek śródtytuły nagłówek dokumentu nagłówek strony lub fragmentu dokumentu nagłówek sekcji zawierającej wiele śródtytułów pozioma linia szkielet dokumentu pochylenie czcionki pływająca ramka - ilustracja pole formularza wstawiony tekst czcionka z klawiatury etykieta kontrolki formularza tytuł grupy elementów formularza element wykazu

14 HTML – spis poleceń POLECENIEOPISPOLECENIEOPIS powiązanie dokumentu mapa graficzna wyróżnienie ciągu znaków menu własności dokumentu kontener określający wartość w przedziale sekcja dokumentu zawierająca nawigację alternatywa ramek alternatywa skryptu obiekt multimedialny wykaz uporządkowany grupowanie opcji w formularzu opcja w formularzu definicja postępu zadania akapit parametr obiektu

15 HTML – spis poleceń POLECENIEOPISPOLECENIEOPIS blok preformatowany reprezentacja postępu zadania cytat w wierszu element anotacji Ruby element anotacji Ruby element anotacji Ruby czcionka przekreślona czcionka przykładu definicja skryptu sekcja grupująca treść rozwijane pole formularza zmniejszenie czcionki źródło zasobów multimedialnych blok liniowy czcionka przekreślona silne wyróżnienie czcionki

16 HTML – spis poleceń POLECENIEOPISPOLECENIEOPIS styl indeks dolny czcionki podsumowanie widocznego fragmentu treści details indeks górny czcionki tabela ciało tabeli komórka tabeli - pole tekstowe formularza stopka tabeli nagłówek kolumny tabeli nagłówek tabeli data/czas tytuł dokumentu wiersz tabeli ścieżka tekstowa w wideo czcionka "maszynowa"

17 HTML – spis poleceń ATRYBUTY ZNACZNIKÓW dostarczają dodatkowych informacji o elemencie są zawsze określone w znaczniku otwierającym występują jako para nazwa – wartość : nazwa = ”wartość” nazwy atrybutów i ich wartości należy pisać małymi literami. POLECENIEOPISPOLECENIEOPIS podkreślenie czcionki wykaz nieuporządkowany nazwa zmiennej kontener treści wideo przełamanie wyrazu standard języka dokumentu

18 ATRYBUTY ZNACZNIKÓW Należy zwrócić uwagę na używanie cudzysłowów przy podawaniu konkretnych wartości poleceń i atrybutów, co jest wymagane we współczesnych standardach, choć nie było egzekwowane w starszych, np. Przykłady atrybutów: Link do strony WiZ PP Tekst w kolorze niebieskim.

19 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS A abbrTD, TH skrócony opis zawartości komórki acceptFORM, INPUT typy zawartości MIME akceptowane przez serwer - lista rozdzielana przecinkami accept- charset FORM zestaw znaków akceptowanych przez serwer - lista charsetów rozdzielanych spacjami lub przecinkami accesskey IIINPUT, LABEL, TEXTAREA przypisuje klawisz szybkiego dostępu do elementu formularza actionFORM rodzaj akcji podejmowanej po naciśnięciu przycisku Submit

20 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS align CAPTION, COL, COLGROUP, DIV, H, HR, IFRAME, IMG, INPUT, LEGEND, P, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR Wyrównanie w poziomie, wartości: top, bottom, left, right, center, justify alinkBODY kolor aktywnego odsyłacza altAREA, IMG, INPUT tekst alternatywny, opis tekstowy async (HTML 5)SCRIPT wskazuje, ze skrypt ma być wykonywany asynchronicznie (tylko dla zewnętrznych skryptów); wartość: async lub async= "async". autocomplete (HTML 5)FORM, INPUT określa, czy formularz ma mieć włączone autouzupełnianie; wartość on (domyślna) lub off

21 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS autofocus BUTTON, INPUT, KEYGEN, SELECT, TEXTAREA określa, czy dany obiekt powinien uzyskać fokus zaraz po załadowaniu strony; wartość autofocus lub autofocus= "autofocus". autoplayAUDIO, VIDEO atrybut powoduje odtwarzanie pliku zaraz po uruchomieniu strony axisTD, TH nazwa grupy, kategorii, do której przypisywana jest komórka, o jednym typie danych B backgroundBODY obraz jako tło strony bgcolor BODY, TABLE, TD, TH, TR Kolor tła borderIMG, TABLE szerokość obramowania

22 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS C cellpaddingTABLE odległość między zawartością komórki a jej obramowaniem, w pikselach cellspacingTABLE cellspacing - odległość między komórkami w pikselach challengeKEYGEN char COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR znak, według którego wyrównywane są znaki, np. kolumny liczb (niewymagany), wartości: przecinek, kropka, itd., np. char="."; charoff COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR pozycja znaku wyrównania, określonego przez char, w linii tekstu, wyrażona w pikselach charsetA, LINK, META, SCRIPT określa kodowanie znaków zasobu docelowego

23 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS checkedCOMMAND, INPUT ustala początkowe zaznaczenie pola, np. radio lub checkbox cite BLOCKQUOTE, DEL, INS, Q adres źródła cytatu clearBR wymusza zrzucenie w dół sąsiadującego elementu, wartości: none, left, right, all colorBASEFONT, FONT kolor czcionki colsFRAMESET, TEXTAREA podział na ramki w pionie (wartości: piksele, procenty ; szerokość pola liczona liczbą kolumn znaków colspanTD, TH liczba kolumn, na które rozciąga się komórka

24 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS compactDL, OLzwięzły rendering listy contentMETA ustala konkretną wartość atrybutu własności dokumentu controlsAUDIO, VIDEO atrybut powoduje wyświetlenie interfejsu coordsA, AREA określa współrzędne obszaru w mapie odsyłaczy po stronie klienta (niewymagany); wartości: x,y,z

25 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS D datetimeDEL, INS, TIME data zmiany wartość: YYYY-MM- DDThh:mm:ssTZD, gdzie YYYY - rok, MM - miesiąc, DD - dzień, hh - godzina, mm - minuta, ss - sekunda, TZD=Time zone designator - desygnator strefy czasowej, np. datetime=" T12:45:00PST defaultTRACK atrybut mówi, że powinna zostać uruchomiona dana ścieżka, o ile użytkownik nie określi inaczej swoich preferencji. deferSCRIPT informuje, że skrypt niczego nie wyświetla ; wartość: defer lub defer="defer"

26 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS dirBDO kierunek tekstu ; wartości: rtl, ltr, np. dir = "rtl" disabled BUTTON, COMMAND, FIELDSET, INPUT, KEYGEN, OPTGROUP, OPTION, SELECT, TEXTAREA wyłączenie danego typu obiektu E enctypeFORM sposób kodowania wysyłanych informacji, np. enctype= "text/plain" F faceBASEFONT, FONT krój czcionki forLABEL, OUTPUT kojarzy etykietę z elementem, którego atrybut ID równa się wartości atrybutu FOR dla danej etykiety

27 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS form (HTML 5) BUTTON, FIELDSET, INPUT, KEYGEN, LABEL, METER, OUTPUT, SELECT, TEXTAREA wskazuje jeden lub więcej formularzy, do których należy przycisk; wartość form_ID formaction (HTML 5)BUTTON, INPUT określa adres, na który wysyłane są dane z formularza, gdy formularz jest przesyłany; dotyczy tylko typu submit formenctypeBUTTON, INPUT określa, jak dane z formularza powinny byc kodowane w chwili przesyłania; dotyczy tylko typu submit. formmethod (HTML 5)BUTTON, INPUT określa, jakiej metody HTTP użyć, tylko dla typu submit. Wartości get i post

28 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS formnovalidateBUTTON, INPUT decyduje, że dane formularza nie powinny być walidowane przy przesyłaniu, tylko dla typu submit. Wartość: formnovalidate lub formnovalidate ="formnovalidate" formtarget (HTML 5)BUTTON, INPUT określa, gdzie wyświetlić odpowiedź po przesłaniu danych, tylko dla typu submit. Wartości: _blank, _self, _top, _parent, nazwa_okna frameTABLE określa, które fragmenty obramowania mają być rysowane (niewymagany), wartości: void, above, below, hsides, vsides, lhs, rhs, box, border frameborderFRAME, IFRAME włączenie lub wyłączenie obramowania ramki

29 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS H headersTD, TH lista identyfikatorów komórek nagłówkowych, rozdzielanych spacjami height CANVAS, EMBED, IFRAME, IMG, INPUT, TD, TH, VIDEO określa w pikselach wysokość danego obiektu highMETER atrybut określa liczbę, który jest uważana za wysoką na danej skali, np. 7 (w przedziale 0-10), powyżej której wskaźnik przybiera żółty kolor. hrefA, AREA, BASE, LINK odsyłacz do dokumentu ; adres bazowy hreflang (HTML 5)AREA, LINK określa język docelowego adresu, np. hreflang="fr" hspaceIMG poziomy odstęp wokół obrazu

30 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS http-equivMETA ustala nazwę i rodzaj informacji, łacząc zawartość content z polem nagłówka http (niewymagany); wartości: content-type, default- style, refresh I iconCOMMAND ismapIMG informuje o podziale obrazu na fragmenty będące odyłaczami - kliknięcia są przesyłane na serwer do przetwarzania K keytypeKEYGEN

31 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS kindTRACK atrybut określa rodzaj ścieżki tekstowej; wartości: captions (tłumaczenie dialogów i efektów dźwiękowych, przydatne dla głuchych), chapters (tytuły rozdziałów, przydatne dla nawigacji), descriptions (tekstowy opis zawartości wideo, przydatny dla niewidomych), metadata (informacje o zawartości używane przez skrypty, niewidoczne dla użytkownika), subtitles (napisy w wideo). L label COMMAND, MENU, OPTGROUP, OPTION, TRACK określa nazwę grupy opcji

32 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS languageBDO, SCIPT język tekstu (niewymagany, zaniechany w XHTML 1.1); wartości: kody językowe, np. language="fr" linkBODYkolor odsyłacza List (HTML 5)INPUT odwołuje się do elementu datalist, który zawiera predefiniowane opcje dla elementu input. Wartość datalist_ID longdescFRAME, IFRAME, IMG adres URL dokumentu opisujący szerzej ramkę loopAUDIO, VIDEO atrybut powoduje odtwarzanie pliku w pętli

33 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS lowMETER atrybut określa liczbę, który jest uważana za niską na danej skali, np. 3 (w przedziale 0-10), poniżej której wskaźnik przybiera żółty kolor. M Manifest (HTML 5)HTML podaje adres cache'a dokumentu do przeglądania offline. marginheightFRAME, IFRAME górny i dolny margines ramki w pikselach marginwidthFRAME, IFRAME lewi i prawy margines ramki w pikselach max INPUT, METER, PROGRESS określa maksymalną wartość dla elementu input. Wartości: liczba lub data

34 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS maxlengthINPUT, TEXTAREA (dla type="file", type="password", type="readonly", type="text") - ustala maksymalną długość tekstu, który można wprowadzić w polu opisującym nazwę przesyłanego pliku, polu hasła czy polu z tekstem; gdy tekst jest dłuższy niż szerokość pola wyznaczona przez atrybut size, pole jest przewijane (niewymagany). media A, AREA, LINK, SOURCE, STYLE określa, dla jakich mediów/urządzeń dokument jest optymalizowany; określa typ docelowego medium methodFORM metoda wysyłania danych na serwer wartości: get, post

35 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS min (HTML 5)INPUT, METER określa minimalną wartość dla elementu input. Wartości: liczba lub data multipleINPUT, SELECT pozwala wprowadzić w polu input więcej niż jedną wartość. Wartości: multiple lub multiple="multiple" mutedVIDEO określa, czy ścieżka audio klipu powinna być wyciszona w trakcie ładowania strony; wartość muted lub muted="muted". N name A, BUTTON, FIELDSET, FORM, FRAME, IFRAME, IMG, INPUT, KEYGEN, MAP, META, OUTPUT, PARAM, SELECT, TEXTAREA Nazwa obiektu, np. etykiety, przycisku, ramki, obrazka itd..

36 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS nohrefAREAwyklucza obszar z adresu noresizeFRAME zablokowanie rozmiarów ramki noshadeHRusunięcie cienia linii, novalidate (HTML 5)FORM określa, czy formularz ma być walidowany przy wysyłaniu, czy nie; wartość novalidate lub novalidate ="novalidate" nowrapTD, THzakaz łamania wiersza O optimumMETER atrybut wyznaczający wartość uznaną za optymalną

37 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS P pattern (HTML 5)INPUT wprowadza wyrażenie regularne, które sprawdza wartość wprowadzoną w polu input placeholderINPUT, TEXT wprowadza wskazówkę dla użytkownika, opisującą oczekiwaną w polu wartość posterVIDEO atrybut podaje adres statycznego pliku graficznego (np. jpg), który będzie wyświetlany w interfejsie klipu do momentu kliknięcia przycisku odtwarzania. preloadAUDIO, VIDEO atrybut powoduje wstępne załadowanie plików dźwiękowych, zanim czytelnik zechce uruchomić odtwarzanie

38 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS R radiogroupCOMMAND readonlyINPUT, TEXTAREA blokuje możliwość zmieniania zawartości pola relA, AREA, LINK określa relację między bieżącym dokumentem a kotwicą opisaną przez href lub relację między bieżącym a docelowym dokumentem required (HTML 5)IIINPUT, TEXTAREA określa, czy wypełnienie pola jest wymagane. Wartość required lub required ="required". revA, LINK określa relację odwrotną w stosunku do rel; określa relację między kotwicą opisaną przez href a bieżącym dokumentem ; mówi, czym jest dany dokument dla wskazanego przez href

39 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS reversed (HTML 5)OL wprowadza odwrócony porządek, np. 3,2,1. Wartość: reversed lub reversed ="reversed" rowsFRAMESET, TEXTAREA podział na ramki w poziomie), wartości: piksele, procenty; wysokość pola w wierszach (wymagany) rowspanTD, TH liczba wierszy, na które rozciąga się komórka rulesTABLE określa sposób obramowania grup komórek (niewymagany), wartości: none, groups, rows, cols, all

40 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS S sandboxIFRAME nakłada zbiór ograniczeń na zawartość ramki; allow-forms - zezwala na działanie formularzy na osadzonej stronie, allow-scripts - zezwala na wykonanie skryptów na osadzonej stronie, za wyjątkiem skryptu otwierającego nowe strony allow-top-navigation - zezwala na kontrolę rodzica z poziomu ramki. allow-same-origin - umożliwia traktowanie treści wyświetlanej w osadzonej ramce jako elementu o tym samym pochodzeniu

41 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS schemeMETA określa schemat interpretacji informacji (niewymagany); scopeTD, TH przedział komórek objęty tą samą definicją nagłówka (niewymagany), wartości: row, col, rowgroup, colgroup scopedSTYLE określa, że styl odnosi się jedynie do elementu nadrzędnego dla danego elementu, oraz elementów- dzieci tamtego elementu nadrzędnego; wartość: scoped. scrollingFRAME, IFRAME określenie, czy ramka może być, wartości: yes, no, auto seamlessIFRAME wymusza "wtopienie" ramki w dokument; wartość seamless lub seamless ="seamless".

42 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS selectedOPTIONwstępnie zaznacza opcję shapeA, AREA określa kształt obszaru w mapie odsyłaczy po stronie klienta (niewymagany); wartości: default, rect, circle, poly size BASEFONT, FONT, HR, INPUT, SELECTED wielkość czcionki ; wysokość linii, wartości: piksele, np. size="3"; określa szerokość wyświetlanego pola sizesLINK określa wielkość w pikselach (np. "16x16" lub "16x16 32x32" lub any) linkowanego zasobu, tylko dla rel ="icon" spanCOL, COLGROUP liczba kolumn na które rozciągają się ustawienia danej kolumny, domyślnie 1

43 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS src AUDIO, EMBED, FRAME, IFRAME, IMG, INPUT, SCRIPT, SOURCE, TRACK, VIDEO adres URL zewnętrznego zasobu (pliku, dokumentu) np. dźwiękowego, graficznego srcdoc (HTML 5)IFRAME źródło strony wstawianej do ramki, zalecany razem z sandbox w przypadku potencjalnie szkodliwej treści srclangTRACK atrybut określa język ścieżki tekstowej (wymagany, gdy kind="subtitles"); wartość: kod języka, np. en, fr lub pl. startOL początkowa wartość pierwszej pozycji, wyrażona liczbą stepINPUT "krok", określa odstępy liczbowe między wartościami pola

44 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS summaryTABLE opisuje tabelę; docelowo dla syntezatorów mowy T tabindexSELECT, TEXTAREA określa pozycję elementu w trakcie nawigowania za pomocą tabulatora target A, AREA, BASE, FORM, LINK określa miejsce otwarcia przywoływanego dokumentu ; nazwa ramki, do której jest kierowany dokument, np. target="_top; nazwa okna, do którego będą domyślnie ładowane odwołania textBODYkolor tekstu w dokumencie titleLINK pomocniczy, informacyjny tytuł dowiązanego dokumentu

45 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS type (HTML 5) A, AREA, BUTTON, COMMAND, EMBED, INPUT, LI, LINK, MENU, OL, PARAM, SCRIPT, SOURCE, STYLE określa typ MIME linkowanego dokumentu; typ przycisku wartości: submit, reset, button; określa rodzaj pola (wymagany), wartości: button, checkbox, file, hidden, image, password, radio, reset, submit, text; określa znaczek przy pozycji wykazu, np. kwadrat, koło, okrąg i pusty kwadrat (niewymagany, przestarzały, zaniechany w XHTML 1.1) ; wartości: 1, A, a, I, i dla ol, disc, square, circle, round dla ul

46 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS U usemapIMG określa adres URL mapy odsyłaczy nałożonej na obraz V valign COL, COLGROUP, TBODY, TD, TFOOTH, TH, THEAD, TR pionowe wyrównanie zawartości komórek (niewymagany), wartości: top, middle, bottom, baseline ; określa pionowe wyrównanie elementu (niewymagany), wartości: top, bottom, middle, baseline

47 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS value BUTTON, INPUT, LI, METER, OPTION, PARAM, PROGRESS przypisanie przyciskowi określonej wartości ; określa początkową, domyślną wartość danego pola; numer pozycji wykazu numerowanego, który może przerywać naturalną numerację punktów np. value="5". wstępnie określona wartość, przy jej braku pobierana jest zawartość elementu podaje konkretną wartość elementu określa aktualny postęp operacji valuetypePARAM określa typ wartości wartości: data, ref, object vlinkBODYkolor odwiedzonego odsyłacza

48 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS vspaceIMGpionowy odstęp wokół obrazu W width CANVAS, COL, COLGROUP, EMBED, HR, IFRAME, IMG, INPUT, PRE, TABLE, TD, TH, VIDEO atrybut określa w pikselach szerokość obszaru Canvas szerokość kolumny wyrażona w pikselach lub procentach szerokości tabeli, np. width="20%" określa w pikselach szerokość interfejsu, w którym wyświetlany jest zasób szerokość linii, wartości: piksele, procenty, np. width="80%"; szerokość ramki w pikselach szerokość obrazu określa w pikselach szerokość elementu input, tylko dla typu image określa szerokość preformatowanego tekstu w znakach

49 SPIS ATRYBUTÓW ATRYBUTPOLECENIAOPIS width CANVAS, COL, COLGROUP, EMBED, HR, IFRAME, IMG, INPUT, PRE, TABLE, TD, TH, VIDEO szerokość tabeli w pikselach lub procentach szerokości nadrzędnego pojemnika szerokość komórki tabeli określa w pikselach szerokość interfejsu wideo wrap (HTML 5)TEXTAREA określa sposób zawijania tekstu w polu; wartość: soft lub hard (tylko wtedy, gdy użyto atrybutu cols).

50 Do zalet stosowania CSS można zaliczyć: oddzielenie struktury witryny od jej prezentacji, co ułatwia jej tworzenie i utrzymywanie dużo większe możliwości formatowania za pomocą stylów niż za pomocą znaczników i ich atrybutów znaczące zmniejszenie ilości kodu użytego do wizualizacji łatwość manipulowania całymi kompleksami stron łatwość ujednolicenia wyglądu dokumentów opartych na tym samym arkuszu stylów

51 BUDOWA STYLU: Ogólne polecenie stylu ma postać: selektor { cecha: wartość }- w jęz. ang.selector { property: value}. Selektorem jest po prostu polecenie języka, np. p, li, td, body itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki. Zawartość nawiasów klamrowych, czyli cechę i wartość, określamy także łącznie mianem deklaracji stylu.

52 BUDOWA STYLU: Przykłady, ilustrujące użycie stylów definiowanych w części nagłówkowej dokumentu lub w zewnętrznym arkuszu stylówczęści nagłówkowejzewnętrznym arkuszu Przykład 1 p {font-family: Times New Roman} Selektorem jest p, cechą - rodzina czcionek, wartością - Times New Roman. Przykład 2 h1 {font-size: 30pt} Selektorem jest h1, cechą - wielkość czcionki, wartością - 30 punktów.

53 BUDOWA STYLU: Przykład 3 ul {font-weight: bold} Selektorem jest ul, cechą - waga czcionki, wartością - pogrubienie. Przykład 4 Możemy oczywiście łączyć ze sobą różne cechy i wartości, zgodnie ze schematem: Selektor { cecha1: wartość1; cecha2: wartość2 } Należy zwrócić uwagę na średnik rozdzielający pary cech:wartości. h3 {font-variant: small-caps; font-size: 15pt; color: green; font-family: Courier}

54 Znaczniki w przeglądarce www nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają formatować tekst. UWAGI! 1.Należy domykać zawsze znaczniki - dotyczy to ogromnej większości znaczników, poza bardzo nielicznymi, jak, czy, np. Wczoraj byliśmy w lesie i było bardzo przyjemnie. 2.Należy zwrócić uwagę na używanie cudzysłowów przy podawaniu konkretnych wartości poleceń i atrybutów, co jest wymagane we współczesnych standardach, choć nie było egzekwowane w starszych, np. Portal Onet.pl Tekst w kolorze niebieskim.

55 Tytuł stopnia n n=1…6 Tytuł stopnia pierwszego … Tytuł stopnia szóstego h oznacza heading, natomiast cyfra n to stopień tytułu (jest ich 6). Stopnie tytułów różnią się wielkością znaków. Wielkość znaków maleje wraz ze wzrostem stopnia tytułu. Tytuł stopnia pierwszego Tytuł stopnia drugiego Tytuł stopnia trzeciego Tytuł stopnia czwartego Tytuł stopnia piątego Tytuł stopnia szóstego ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.

56 Akapit (p=paragraph) Znacznik ten wstawia interlinie (znaki końca akapitu) między poszczególne fragmenty tekstu. Treść pierwszego akapitu Treść drugiego akapitu Jeżeli tekst nie jest objęty powyższymi znacznikami, jest interpretowany jako „masa tekstowa”. Klawisz ENTER, użyty jako znak końca akapitów, zostanie przez przeglądarkę zignorowany i zostanie wyświetlony jednolity blok tekstu.

57 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wiersz Znacznik ten przenosi tekst o jeden wiersz w dół, nie wprowadzając dodatkowej interlinii (znaku końca akapitu). To jest pierwszy wiersz To jest drugi wiersz Napisanie kilku kolejnych pozwala poszerzyć pionowy odstęp między fragmentami tekstu. Pozioma linia (ang. horizontal rule) Wyświetla w dokumencie poziomą linię na całej szerokości strony. Można rozdzielać nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta

58 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Lista wypunktowana (wykaz nieuporządkowany) (ang. unordered list) W ramach szkieletu listy wypunktowanej, poszczególne punkty wykazu wprowadzane są za pomocą znaczników:. Zainteresowania: sport muzyka fotografowanie film W efekcie uzyskamy: Zainteresowania: sport muzyka fotografowanie film

59 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Lista numerowana (wykaz uporządkowany) (ang. ordered list) Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich. W ramach szkieletu listy numerowanej, poszczególne punkty wykazu wprowadzane są za pomocą znaczników. Zainteresowania: sport muzyka fotografowanie film W efekcie uzyskamy: Zainteresowania: 1.sport 2.muzyka 3.fotografowanie 4.film

60 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów Aby zdefiniować typ stylu wykazu, należy wpisać w definicji stylu list-style-type: wartość Punkty wykazu mogą być na wiele sposobów wyróżniane markerami (punktorami): punktor w kształcie kropki pierwszy punkt drugi punkt trzeci punkt pierwszy punkt drugi punkt trzeci punkt

61 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów o punktor w kształcie okręgu pierwszy punkt drugi punkt trzeci punkt o pierwszy punkt o drugi punkt o trzeci punkt  punktor w kształcie kwadratu list-style-type: square  pierwszy punkt  drugi punkt  trzeci punkt

62 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów numerowanie liczbami arabskimi pierwszy punkt drugi punkt trzeci punkt 1.pierwszy punkt 2.drugi punkt 3.trzeci punkt  numerowanie małymi liczbami rzymskimi list-style-type: lower-roman i.pierwszy punkt ii.drugi punkt iii.trzeci punkt

63 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów numerowanie wielkimi liczbami rzymskimi pierwszy punkt drugi punkt trzeci punkt I.pierwszy punkt II.drugi punkt III.trzeci punkt  numerowanie małymi literami alfabetu łacińskiego list-style-type: lower-alpha a.pierwszy punkt b.drugi punkt c.trzeci punkt

64 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów numerowanie wielkimi literami alfabetu łacińskiego pierwszy punkt drugi punkt trzeci punkt A.pierwszy punkt B.drugi punkt C.trzeci punkt  wykaz bez numerowania list-style-type: none pierwszy punkt drugi punkt trzeci punkt

65 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Atrybuty czcionki Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki-wyróżnienie (pogrubienie) i emfazę (pochylenie). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą mocnego pogrubienia: To jest tekst normalny To jest tekst pogrubiony To jest tekst pochylony Efekt działania tych poleceń: To jest tekst normalny To jest tekst pogrubiony To jest tekst pochylony

66 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) są chyba najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokumentami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony. Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata. Użytkownik nie musi nawet w gruncie rzeczy wiedzieć, że powiązane ze sobą tematycznie informacje znajdują się w miejscach oddalonych od siebie nawet o tysiące kilometrów. Najważniejsze jest ich tematyczne powiązanie, a nie lokalizacja.

67 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do innej strony internetowej Jakaś nazwa tej strony Politechnika Poznańska Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html lub index.htm (zależy od typu serwera WWW). Stosuje się także nazwy default.html lub default.htm. Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami i. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem. Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy..Kliknięcie na nim spowoduje skok do strony. Politechnika Poznańska

68 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do adresu poczty elektronicznej Imię i nazwisko Jan Kowalski Umieszczanie odsyłacza do adresu poczty elektronicznej jest dobrym obyczajem, który daje użytkownikowi strony łatwy kontakt z jej autorem. Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. Navigator wywoła swój własny moduł pocztowy Mail, Internet Explorer zaś skorzysta z Outlook Express (albo z Ms Outlook, jeśli on jest domyślnym programem pocztowym). Przesunięcie kursora myszki nad tekst „autora strony” wyświetli w pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł zredagować list do autora.

69 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do adresu poczty elektronicznej z predefiniowanymi informacjami domyślna treść w polu tematu listu: adres odbiorcy, do którego idzie kopia listu: tzw. ślepa lub ukryta kopia(żaden inny odbiorca listu nie zobaczy tego adresu): fragment ciała listu, a więc już bezpośrednio w oknie edycji: list adresowany do kilku osób jednocześnie. Adresy trzeba rozdzielić po prostu średnikami:

70 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do adresu poczty elektronicznej z predefiniowanymi informacjami umieszczenie w/w informacji jednocześnie (można je połączyć stosując jako łącznik ciąg &. Wyślij pocztę

71 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do etykiety (zakładki) Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest znakiem, swoistą elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś miejsce w tekście. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu. Konstrukcja etykiety jest następująca: Można utworzyć w dokumencie dowolną liczbę etykiet, które będą służyć jako punkty docelowe dla różnych odsyłaczy. Jest to szczególnie wygodne w przypadku dużych objętościowo stron, wymagających podzielenia na pewne logiczne fragmenty, aby były łatwiejsze w czytaniu. Spis zagadnień z wykorzystaniem odsyłaczy do etykiet-zakładek jest bardzo często stosowany w Internecie.

72 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do etykiety (zakładki) Konieczne jest stosowanie cudzysłowu obejmującego etykiety, podobnie jak i adresów w odsyłaczach. Gdy etykieta zawiera kilka wyrazów, ich użycie jest wręcz niezbędne, aby definicja była poprawna. Wyrazy te wchodzące w skład nazwy etykiety należy połączyć znakiem podkreślenia, np. "to_jest_zakładka_dla_pewnego_tematu". Należy też zwracać uwagę na wielkość liter, gdyż są one na ogół rozróżniane. Należy zalecać używanie małych liter zarówno w etykietach, jak i odsyłaczach do nich.

73 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do etykiety (zakładki) Tekst Należy zwrócić uwagę na znak # oddzielający nazwę strony od nazwy etykiety. Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyli: Tekst, na który należy kliknąć np. moje zdjęcia moje zdjęcia

74 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Przykłady odsyłaczy do innych plików Odsyłacz do pliku tekstowego TXT Plik tekstowy TXT Odsyłacz do pliku graficznego GIF Plik graficzny GIF Odsyłacz do pliku dźwiękowego Plik dźwiękowy Odsyłacz do pliku PDF dokument PDF

75 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wlasności czcionki Nazwy czcionek, rodziny czcionek Aby zdefiniować rodzinę czcionek, należy wpisać w definicji stylu font-family: czcionka Jeżeli akapit ma być wyświetlany za pomocą czcionki Times New Roman, można napisać Treść akapitu Efekt będzie następujący: To jest akapit napisany za pomocą czcionki Times New Roman Analogicznie, można podać czcionkę Courier: To jest akapit napisany za pomocą czcionki Courier

76 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Nazwy czcionek, rodziny czcionek Ponieważ nie wiadomo dokładnie, jakimi czcionkami dysponuje czytelnik strony, można zabezpieczyć się, podając kilka kolejnych czcionek, np: Treść akapitu To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki. Jeżeli podajemy kilka czcionek, rozdzielamy je przecinkami i spacją. Gdy czcionka ma kilka wyrazów w nazwie, ujmujemy je w apostrof ', podczas gdy cała definicja jest objęta cudzysłowem. Można także poslużyć się nazwą rodzajową, np. serif, cursive co jeszcze bardziej zwiększa szansę, że akapit zostanie wyświetlony np. czcionką szeryfową, gdyby zabrakło w systemie czytelnika czcionek Times, Times New Roman itd. Treść akapitu To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki szeryfowej.

77 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wlasności czcionki Style czcionek Aby zdefiniować styl czcionki, należy wpisać w definicji stylu font-style : wartość Do dyspozycji są trzy style czcionki: normal (normalny) Italic (pochylony) oblique (pochylony+pogrubiony) Dwa ostatnie są wyświetlane w podobny sposób, zatem to w dużej mierze kwestia indywidualnego wyboru użytkownika. Treść akapitu Treść akapitu wyświetlana w stylu normal Treść akapitu Treść akapitu wyświetlana w stylu italic Treść akapitu Treść śródtytułu wyświetlana w stylu oblique

78 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wlasności czcionki Warianty czcionek Aby zdefiniować wariant czcionki, należy wpisać w definicji stylu font-variant : wartość W kaskadowych arkuszach stylów rozróżniane są dwa warianty czcionek: normal (normalny) small-caps (czyli tzw. małe kapitaliki) Można je stosować nie tylko do akapitów, ale i np. śródtytułów. Treść akapitu Treść akapitu wyświetlana w wariancie normal Treść akapitu T REŚĆ AKAPITU WYŚWIETLANA W WARIANCIE SMALL - CAPS Treść akapitu T REŚĆ ŚRÓDTYTUŁU WYŚWIETLANA W WARIANCIE SMALL - CAPS

79 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wlasności czcionki Waga czcionek Aby zdefiniować wagę czcionki, należy wpisać w definicji stylu font-weight : wartość W kaskadowych arkuszach stylów do dyspozycji jest aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno je jest niekiedy rozróżnić na ekranie): normal bold bolder lighter …

80 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Waga czcionek Treść akapitu Treść akapitu wyświetlana za pomocą wagi normal Treść akapitu wyświetlana za pomocą wagi bold Treść akapitu wyświetlana za pomocą wagi bolder Treść akapitu wyświetlana za pomocą wagi lighter Treść akapitu wyświetlana za pomocą wagi 100 Treść akapitu wyświetlana za pomocą wagi 200 Treść akapitu wyświetlana za pomocą wagi 300 Treść akapitu wyświetlana za pomocą wagi 400 Treść akapitu wyświetlana za pomocą wagi 500 Treść akapitu wyświetlana za pomocą wagi 600 Treść akapitu wyświetlana za pomocą wagi 700 Treść akapitu wyświetlana za pomocą wagi 800 Treść akapitu wyświetlana za pomocą wagi 900

81 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki Aby zdefiniować wielkość czcionki, należy wpisać w definicji stylu font-size: wielkość Wielkość czcionki możemy regulować za pomocą czterech metod: 1.imiennych wielkości absolutnych, 2.wielkości relatywnych, 3.wysokości w jednostkach miary 4.wysokości w procentach. a. Imienne wielkości absolutne Treść akapitu

82 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki Imienne wielkości absolutne: xx-small (bardzo bardzo mała) x-small (bardzo mała) small (mała) medium (średnia) large (duża) x-large (bardzo duża) xx-large (bardzo bardzo duża)

83 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki

84 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki b. Imienne wielkości relatywne (w stosunku do domyślnej): Treść akapitu smaller (mniejsza -1) larger (większa +1)

85 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki c. Wielkość w jednostkach miary: W dokumencie można użyć szeregu jednostek miary: piksele (px), punkty (pt), 1pt = 1/72 in centymetry (cm), cale (in) 1in = 2.54 cm milimetry (mm) pica (pc). 1pc = 12 pt 1em - krotność wielkości domyślnego pisma Treść akapitu

86 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki c. Wielkość w jednostkach miary:

87 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki d. Wielkość w procentach: Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np. akapitu, tytułu itp. Wszystkie trzy przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu, choć akapit jest wyświetlany poprawnie. Na przykład: To jest tytuł stopnia pierwszego 125%

88 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki d. Wielkość w procentach:

89 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolory czcionki Do określania koloru stosuje się obecnie style. Tekst w kolorze niebieskim. Poniżej przedstawiona jest lista 16 podstawowych barw (nazwy imienne) stosowanych w dokumentach internetowych:

90 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolory czcionki Tekst próbny-white Tekst próbny-yellow

91 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między wyrazami Aby zdefiniować odstęp między wyrazami, należy wpisać w definicji stylu word-spacing : wartość WARTOŚCI: normal wartości w jednostkach absolutnych (in, cm, mm, pc, pt) wartości w jednostkach relatywnych (em, ex, px) 1-centymetrowe odstępy między wyrazami.

92 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między wyrazami 2-punktowe odstępy między wyrazami. W tym akapicie odstępy między wyrazami wynoszą 0.5 wysokości czcionki (em). 5-pikselowe odstępy między wyrazami.

93 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między literami Aby zdefiniować odstęp między wyrazami, należy wpisać w definicji stylu letter-spacing : wartość WARTOŚCI: normal wartości w jednostkach absolutnych (in, cm, mm, pc, pt) wartości w jednostkach relatywnych (em, ex, px) 1-milimetrowe odstępy między literami.

94 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między literami 2-punktowe odstępy między literami. W tym akapicie odstępy między literami wynoszą 0.5 wysokości czcionki (em). 5-pikselowe odstępy między literami.

95 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między wierszami Aby zdefiniować odstęp między wierszami, należy wpisać w definicji stylu line-height: wartość WARTOŚCI: normal, wielokrotność wysokości czcionki, procent wysokości czcionki Style pozwalają regulować odstępy między liniami bazowymi elementów, np wierszy akapitu. Można podać wielkość absolutną, np. w centymetrach, albo względną, w procentach. 200% oznacza podwojenie odstępu, 50% - zmniejszenie o połowę.

96 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między wierszami To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm To jest akapit, w którym odstęp między wierszami wynosi 80 proc. normalnego

97 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Dekoracja tekstu Aby zdefiniować dekorację czcionki, należy wpisać w definicji stylu text-decoration: wartość WARTOŚCI: none (brak dekoracji) underline (podkreślenie) overline (nadkreślenie) line-through (przekreślenie) blink (migotanie)

98 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Dekoracja tekstu To jest odsyłacz do firmy Corel. To jest odsyłacz do firmy Corel Jak widać, za pomocą tego polecenia można się w ten sposób pozbyć domyślnego podkreślenia w odsyłaczu, które wygląda na ogół niezbyt estetycznie. To jest podkreślenie tekstu.

99 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Dekoracja tekstu To jest nadkreślenie tekstu. To jest przekreślenie tekstu. To jest migotanie tekstu.

100 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Transformacja tekstu Aby zdefiniować transformację tekstu, należy wpisać w definicji stylu text-transform: wartość WARTOŚCI: capitalize (zamiana pierwszych liter wyrazów na wielkie) uppercase (zamiana wszystkich liter na wielkie ) lowercase (zamiana wszystkich liter na małe) none (pozostawienie bez zmiany)

101 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Transformacja tekstu To jest jakiś przykładowy akapit. Poddamy go transformacjom. To Jest Jakiś Przykładowy Akapit. Poddamy Go Transformacjom. To jest jakiś przykładowy akapit. Poddamy go transformacjom. TO JEST JAKIŚ PRZYKŁADOWY AKAPIT. PODDAMY GO TRANSFORMACJOM.

102 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Transformacja tekstu To jest jakiś przykładowy akapit. Poddamy go transformacjom. to jest jakiś przykładowy akapit. poddamy go transformacjom.

103 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Poziome wyrównanie tekstu Aby zdefiniować poziome wyrównanie tekstu, należy wpisać w definicji stylu text-align: wartość WARTOŚCI: left (wyrównanie do lewego marginesu) right (wyrównanie do prawego marginesu) center (wyrównanie do środka) justify (wyrównanie do obu marginesów)

104 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Poziome wyrównanie tekstu To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu.

105 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Poziome wyrównanie tekstu To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów

106 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Wcięcie tekstu Aby zdefiniować wcięcie tekstu, należy wpisać w definicji stylu text-indent: wartość Wcięcie tekstu odnosi się do bloków tekstu i oznacza odstęp pierwszego wiersza bloku od lewego marginesu strony. WARTOŚCI: długość w jednostkach długość w procentach

107 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Wcięcie tekstu To jest akapit, w którym pierwszy wiersz… Tytuł rozpoczynający się w odległości 1 cala...

108 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor Aby zdefiniować kolor tekstu, należy wpisać w definicji stylu color: wartość Kolor możemy przypisywać dowolnym tekstowym elementom strony, jak nagłówki, akapity, wykazy, tabele (tekstom w komórkach) itd. Przykłady: Czerwony tytuł drugiego stopnia Akapit w kolorze Fuchsia

109 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor Komórka tabeli z oliwkowym tekstem Numerowany wykaz w kolorze niebieskim punkt pierwszy punkt drugi punkt trzeci

110 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor

111 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor tła Aby zdefiniować kolor tła, należy wpisać w definicji stylu background-color: wartość Wiele elementów może mieć przypisany kolor tła. Przykłady: Tytuł stopnia drugiego na żółtym tle Akapit na tle Aqua

112 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor tła Jeśli definiowany kolor tła ma odnosić się do całej strony, można użyć selektora BODY lub HTML. Specyfikacja CSS2 wprowadza 28 kolorów systemowych (pochodzących z systemu operacyjnego), które integrują się z kolorami środowiska użytkownika. Ich rolę widać np. wyraźnie po zmianie schematu odpowiedzialnego za wyświetlanie środowiska Windows. Akapit wyświetlany przy użyciu stylu, a więc za pomocą koloru pulpitu Windows. Każdy czytelnik widzi więc ten kolor, który ma na swoim własnym pulpicie.

113 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika jako tło Aby zdefiniować obraz tła, należy wpisać w definicji stylu background-image: adres obrazka Rozmaitym elementom dokumentu, jak akapity, komórki tabel, śródtytuły w tekście, listy elementów czy inne, możemy przypisywać grafikę jako tło. Przykłady: Tytuł stopnia pierwszego na tle płótna

114 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika jako tło Komórka tabeli z zieloną kropką jako tłem Jeśli obraz miałby stanowić tło całej strony, można użyć selektora BODY. body {background: url(nazwa_obrazka)}

115 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Powtarzanie tła Aby zdefiniować powtarzanie ilustracji jako tła elementu, należy wpisać w definicji stylu background-repeat: wartość Wartości: Repeat (powtarzanie tła w obu kierunkach) Repeat-x (powtarzanie tła tylko w poziomie) Repeat-y (powtarzanie tła tylko w pionie) No-repeat (brak powtarzania tła)

116 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Powtarzanie tła Przykłady: Definiując np. w stylach ciało dokumentu (body), można podać następujące, przykładowe polecenie:

117 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Powtarzanie tła Przykłady: Definiując np. w stylach ciało dokumentu (body), można podać następujące, przykładowe polecenie:

118 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Powtarzanie tła Przykłady: Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem Komórka tabeli z zieloną kropką jako tłem

119 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Powtarzanie tła Przykłady: Definiując np. w stylach ciało dokumentu (body), można podać następujące, przykładowe polecenie:

120 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Aby zdefiniować pozycję tła, należy wpisać w definicji stylu background-position: wartość Wartości: x, y x%,y% (% długości, %szerokości) left/ center/ right (w poziomie: do lewej/ do środka/ do prawej) top/ center/ bottom (w pionie: do górnego brzegu/ do środka/ do dolnego brzegu) Tło może mieć różną pozycję. Typowym przykładem jest tło strony, którym jest obrazek.

121 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Przykłady: W przykładowej tabeli (z jedną komórką) można wstawić grafikę jako tło, bez definiowania pozycji. td style="background-image: url(/images/grafika/pcq.gif); background-repeat: no-repeat; height:150px;"

122 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Przykłady: Można jednak określić pozycję tła w pionie: td style="background-image: url(/grafika/pcq.gif); background- position: top; background-repeat: no-repeat; height:150px;" td style="background-image: url(/grafika/pcq.gif); background-position: center; background-repeat: no- repeat; height:150px;"

123 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Przykłady: Można jednak określić pozycję tła w pionie: td style="background-image: url(/grafika/pcq.gif); background- position: bottom; background-repeat: no-repeat; height:150px;" W powyższych przykładach grafika ustawiała się domyślnie na środku, jeśli chodzi o położenie poziome. Można jednak definiować także jawnie wartości dla położenia poziomego:

124 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Przykłady: Określanie pozycji tła w poziomie: td style="background-image: url(/grafika/pcq.gif); background- position: left; background-repeat: no-repeat; height:150px;" td style="background-image: url(/grafika/pcq.gif); background- position: center; background-repeat: no-repeat; height:150px;"

125 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Przykłady: Określanie pozycji tła w poziomie: td style="background-image: url(/grafika/pcq.gif); background- position: right; background-repeat: no-repeat; height:150px;" Należy zauważyć, że parametr center daje ten sam wynik w pionie i poziomie. Można mieszać wartości pozycji pionowej i poziomej, na przykład top left czy bottom right:

126 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Przykłady: td style="background-image: url(/grafika/pcq.gif); background- position: top right; background-repeat: no-repeat; height:150px;" td style="background-image: url(/grafika/pcq.gif); background- position: bottom left; background-repeat: no-repeat; height:150px;"

127 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pozycja tła Przykłady: Możliwe jest wreszcie podanie wartości liczbowych, np. background-position: 1cm 2cm, czyli 1 centymetr od lewego brzegu i 2cm od górnego. td style="background-image: url(/grafika/pcq.gif); background- position: 1 cm 2 cm; background-repeat: no-repeat; height:150px;" td style="background-image: url(/grafika/pcq.gif); background- position: 20% 80%; background-repeat: no-repeat; height:150px;"

128 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.

129 Marginesy i odstępy Model pojemnika Zewnętrzne marginesy można stosować do odsuwania od siebie elementów w pionie. W kolorze brązowym jest pokazane hipotetyczne obramowanie elementu - gdybyśmy jawnie wstawili obramowanie, to znajdowałoby się ono właśnie między zewnętrznym marginesem a wewnętrznym odstępem. W kolorze zielonym pokazany jest wewnętrzny odstęp, czyli przestrzeń między hipotetycznym obramowaniem a właściwą treścią elementu. Na czerwonym tle jest pokazana właściwa treść elementu, np. zwykły akapit.

130 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy i odstępy Model pojemnika

131 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy cząstkowe Aby zdefiniować margines cząstkowy, należy wpisać w definicji stylu: margin-left: wartość (margines lewy) margin-right: wartość (margines prawy) margin-top: wartość (margines górny) margin-bottom: wartość (margines dolny) Wartości: wielkość w jednostkach wielkość w procentach auto

132 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy cząstkowe Polecenie margin-top: xxx pozwala wprowadzić górny margines dla danego elementu, a więc dodatkowy odstęp między nim a poprzedzającym go elementem. To jest treść akapitu Polecenie margin-right: xxx pozwala wprowadzić prawy margines dla danego elementu, a więc dodatkowy odstęp między nim a prawym brzegiem strony czy następującym po nim elementem. To jest treść akapitu

133 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy cząstkowe Polecenie margin-bottom: xxx pozwala wprowadzić dolny margines dla danego elementu, a więc dodatkowy odstęp między nim a następującym po nim elementem. To jest treść akapitu Polecenie margin-left: xxx pozwala wprowadzić lewy margines dla danego elementu, a więc dodatkowy odstęp między nim a lewym brzegiem strony czy poprzedzającym go elementem. To jest treść akapitu

134 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy mieszane Aby zdefiniować margines mieszany, należy wpisać w definicji stylu: margin: wartości Wartości: wartości marginesów cząstkowych Przykłady:

135 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy mieszane Przykłady:

136 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Odstępy cząstkowe Aby zdefiniować odstęp cząstkowy, należy wpisać w definicji stylu: padding-left : wartości (odstęp lewy) padding-top: wartości (odstęp górny) padding-right : wartości (odstęp prawy) padding-bottom : wartości (odstęp dolny) Wartości: Wielkość w jednostkach Wielkość w % auto Przykłady:

137 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Odstępy cząstkowe Zawartość elementu można oddzielać od jego obramowania, definiując dodatkowy wewnętrzny odstęp, poszerzający "naturalny" odstęp.

138 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Odstępy cząstkowe W analogiczny sposób tworzymy dolny odstęp. Tworzenie lewego odstępu Akapit oddzielony od od innego elementu dodatkowym odstępem o wielkości 5em z lewej strony.

139 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Odstępy mieszane Aby zdefiniować margines mieszany, należy wpisać w definicji stylu: padding: wartości Wartości: wartości odstępów cząstkowych Przykłady: Można ustalić wszystkie odstępy jednocześnie, wprowadzając kolejne wartości odstępów cząstkowych. Akapit oddzielony od obramowania dodatkowymi odstępami o wartości 20px z każdej strony.

140 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Odstępy mieszane Akapit oddzielony od swojego naturalnego obramowania dodatkowymi odstępami o wartości 40px górny/dolny i 80px lewy/prawy. Akapit oddzielony od swojego naturalnego obrampadding: 20px 30px 40px 50pxowania dodatkowymi odstępami o wartości 20px górny, 30px prawy, 40px dolny i 50px lewy.

141 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Styl obramowania Aby zdefiniować styl obramowania, należy wpisać w definicji stylu: border-style: wartość Wartości: none (brak obramowania) dotted (linia kropkowana) dashed (linia przerywana) solid double (linia podwójna) groove ridge inset outset

142 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Styl obramowania Elementom można nadawać obramowanie - z jednej lub kilku stron. Konieczne jest podanie stylu i grubości obramowania, a dodatkowo można podać kolor obramowania. Przykłady: border-style: none

143 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Styl obramowania Przykłady:

144 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Grubość obramowania Aby zdefiniować grubość obramowania, należy wpisać w definicji stylu: border-width: wartość Wartości: thin (cienkie), medium (średnie), thick (grube), wartość w jednostkach Grubość obramowania jest obok stylu koniecznym elementem jego definicji, zarówno w obramowaniach cząstkowych, jak i mieszanych.

145 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grubość obramowania Przykłady różnych grubości: Treść akapitu

146 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Kolor obramowania Aby zdefiniować kolor obramowania, należy wpisać w definicji stylu: border-color: wartość Wartości: wartość koloru Kolor obramowania jest opcjonalnym elementem definicji obramowania, w przeciwieństwie do obowiązkowych atrybutów stylu i grubości.

147 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):

148 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):

149 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):

150 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Kolor obramowania Przykłady kolorów obramowania: Czerwone obramowanie (red) Zielone obramowanie (green)

151 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Obramowanie cząstkowe Aby zdefiniować cząstkowe obramowanie, należy wpisać w definicji stylu: border-left: wartości border-right: wartości border-top: wartości border-bottom: wartości Wartości: Wartości poszczególnych atrybutów stylu Wartości poszczególnych grubości Wartości poszczególnych kolorów

152 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Obramowanie cząstkowe Obramowanie cząstkowe to obramowanie definiowane dla pojedynczych brzegów obramowania, np. dla lewego lub prawego. Podajemy w nim przynajmniej styl i grubość obramowania, a dodatkowo możemy także zdefiniować jego kolor.kolor PRZYKŁADY: Treść akapitu "

153 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Obramowanie mieszane Aby zdefiniować mieszane obramowanie, należy wpisać w definicji stylu: border: wartości border-left: wartości border-right: wartości border-top: wartości border-bottom: wartości Wartości: Wartości atrybutów dla obramowań cząstkowych lub całego obramowania

154 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Obramowanie mieszane Obramowanie mieszane jest obramowaniem, w którym łączymy wartości obramowań cząstkowych do postaci ujednoliconej definicji lub łączymy w jednej definicji różne atrybuty obramowania cząstkowego. Zamiast pisać po kolei border-left: atrybuty; border-right: atrybuty itd., można napisać po prostu border: atrybuty, gdyż w ten sposób definiujemy od razu atrybuty dla całego obramowania. Treść akapitu Zamiast pisać po kolei border-left-style: solid; border-left-width: 3px; border-left-color: red;, można prościej napisać border-left: solid 3px red, gdyż w ten sposób definiujemy łącznie atrybuty dla danego obramowania cząstkowego, np. z lewej czy prawej strony. Treść akapitu

155 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika na stronie Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w Sieci. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a realiami technicznymi z drugiej strony. Należy zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Wiele ciekawych efektów graficznych można dziś osiągnąć za pomocą stylów, bez udziału samej grafiki.

156 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wstawianie grafiki do dokumentu Grafikę można wprowadzić na stronie za pomocą polecenia: img jest skrótem od image (obraz), src jest skrótem od Source (źródło) alt jest nazwą alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki. Efekt zastosowania konstrukcji jest następujący:

157 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wstawianie grafiki do dokumentu Gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Na stronach WWW są stosowane 2 podstawowe formaty bitowych plików graficznych- GIF i JPG, które są z założenia skompresowane, a więc zajmują znacznie mniej miejsca niż grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej. Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Można jednak użyć szeregu atrybutów, które zmienią położenie, wielkość i inne cechy obrazka. Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane, np.

158 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – obramowania i odstępy Aby zdefiniować obramowanie grafiki, należy wpisać w definicji stylu: style=”border: wartości” Aby zdefiniować obrys grafiki, należy wpisać w definicji stylu: style=”outline: wartości”

159 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – obramowania i odstępy Aby utworzyć dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami, należy zdefiniować styl CSS – margines globalny (margin) lub cząstkowy (margin-top, margin- bottom, margin-left, margin-right)

160 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – obramowania i odstępy

161 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – pozycjonowanie poziome Grafikę często umieszcza się w ramach akapitu, a wtedy ujawnia swój naturalny charakter, czyli ukazuje się w jednym wierszu z treścią akapitu. Przykład: Oczywiście takie rozwiązanie jest rażące z estetycznego punktu widzenia. Stosuje się zatem pozycjonowanie grafiki przy prawym lub lewym marginesie strony, natomiast treść akapitu oblewa ilustrację

162 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – pozycjonowanie poziome Przykład: Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ". I rezultat:

163 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – pozycjonowanie poziome Przykład: Aby umieścić ilustrację przy lewym marginesie, należy jej nadać styl style="float: left; ". I rezultat:

164 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – pozycjonowanie pionowe Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie stylów vertical-align, Przykłady z użyciem grafiki i akapitu:

165 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – pozycjonowanie pionowe Przykłady z użyciem grafiki i akapitu:

166 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. TABELE Ogólne ramy tabeli Definicja tabeli musi być umieszczona między tymi dwoma znacznikami. W ich ramach umieszczane są definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. Wiersz tabeli Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach można umieścić wiele kolejnych definicji wierszy,np.

167 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Komórka w wierszu Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu (wiersza),np. Uwaga! Dla przejrzystości obrazu dokumentu w edytorze HTML warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co oczywiście nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza. Przykład a1a2a3 b1b2b3 c1c2c3 W powyższym przykładzie tabela zawiera 3 wiersze, w każdym po 3 komórki, zaś w konkretnych komórkach zostały umieszczone dane od a1 do c3.

168 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie zostanie podana szerokość obramowania, przyjmowana jest jej domyślna wartość. Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, np. Odległości między komórkami Aby komórki (nie tabela) zawierały inne obramowanie niż domyślne, można użyć parametru CELLSPACING (jest to właściwie odległość między komórkami),np.:

169 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Odstępy w komórkach Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1). Oczywiście należy w rozsądny sposób ustawiać wartości parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzystą i niezbyt estetyczną.

170 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Szerokość tabeli Jeżeli nie definiujemy szerokości tabeli, przyjmuje ona domyślną szerokość na ekranie przeglądarki. Parametr WIDTH daje możliwość samodzielnego zdefiniowania szerokości tabeli. Spowoduje to wyświetlenie tabeli o podanej szerokości w pikselach. Zamiast wartości absolutnej w pikselach, można także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki, pół szerokości nadrzędnego pojemnika, w którym mieści się tabela (w naszym przykładzie połowa szerokości białego obszaru)

171 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Szerokość tabeli Wysokość tabeli Wysokość tabeli jest definiowana za pomocą stylów CSS z użyciem parametru HEIGHT, wyrażonego w pikselach lub procencie widocznej strony,np.stylów CSS

172 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wysokość tabeli Wartość podana w procentach będzie interpretowana jedynie wtedy, gdy tabela będzie umieszczona w pojemniku wyższego rzędu o podanej wysokości.

173 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Szerokość komórki Szerokość komórki jest określana za pomocą stylów, a konkretnie szerokości zawartość komórki Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu. zawartość komórki

174 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wyrównanie tabeli Do definiowania wyrównania tabeli stosuje się style CSS., np. W efekcie tabela zostanie przesunięta w prawo i oblana z lewej strony tekstem oraz pod spodem.

175 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wyrównanie tabeli Do definiowania wyrównania tabeli stosuje się style CSS., np. W efekcie tabela zostanie przesunięta w lewo i oblana z prawej strony tekstem oraz pod spodem.

176 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Poziome wyrównanie danych w komórkach

177 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Pionowe wyrównanie danych w komórkach Atrybut valign (vertical align) służy do pionowego wyrównania zawartości komórki - do górnego brzegu do środka do dolnego brzegu

178 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor tła tabeli Przykład zdefiniowania odrębnych kolorów w każdej z komórek:

179 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Obrazek jako tło tabeli Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka Przykład:

180 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor obramowania tabeli Możliwość definiowania kolorów obramowania dają nam obecnie style CSS- połączenie stylu, grubości i koloru obramowania.

181 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tytuł tabeli Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólnymi ramami tabeli. Na przykład: Tytuł tabeli Za pomocą stylów CSS można zdefiniować położenie tytułu nad lub pod tabelą: Tytuł tabeli

182 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Nagłówek wiersza i kolumny tabeli Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn, obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej i w przypadku kolumn pozycjonowan e na środku. Przykład nagłówków kolumn: Nagłówek jest definiowany za pomocą znaczników:

183 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Nagłówek wiersza i kolumny tabeli Powyższa, przykładowa tabela ma więc kod: Wzrost produkcji w latach (w mln USD) Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn (kolejne lata). W drugim znajdują się dane liczbowe.

184 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Nagłówek wiersza i kolumny tabeli Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem. Wzrost produkcji masła i margaryny w latach (w mln USD) Masło Margaryna

185 ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Nagłówek wiersza i kolumny tabeli W wierszach z danymi liczbowymi wystarczyło wstawić kody nagłówków (Masło i Margaryna), zaraz za definicją wiersza, a przed pierwszą definicją komórki z danymi. Zauważmy też, że wiersz nagłówków z latami został poprzedzony pustą komórką, dzięki czemu nagłówki zostały we właściwy sposób ułożone w stosunku do kolumn z danymi.


Pobierz ppt "HTML – dokument Dokument HTML : zwykły plik tekstowy, zawierający znaczniki (polecenia) HTML i zwykły tekst. nazywane są również stronami internetowymi."

Podobne prezentacje


Reklamy Google