Polskie programy do tworzenia stron internetowych: 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.
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.
<b> i </ b> 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. <br> znaczniki HTML zazwyczaj występują w parach, np. <b> i </ b> 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. <h1>Moja strona</h1> zamiast <H1>Moja strona</H1>
HTML – polecenie należy domykać zawsze znaczniki - dotyczy to ogromnej większości znaczników, poza bardzo nielicznymi, jak: <img>, <hr> , <br> , np. <p> To jest akapit </p> nie należy mieszać znaczników, tzn. nie należy tworzyć z nich "przekładańca". Nie należy pisać więc: <strong> <i> Jakaś tam treść</strong></i> lecz <strong> <i> Jakaś tam treść</i></strong>
<p> To jest akapit. </ p> 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. : <p> To jest akapit. </ p> znacznik element HTML znacznik końca początku
Standardowa osnowa dokumentu HTML: <!doctype html> HTML 5 prolog (typ dokumentu i wersja HTML, definiuje rodzaj języka użytego do opracowania dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 (wersja I) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 (wersja II) <html> ramy całego dokumentu <head> ramy informacji nagłówkowych <title> Tytuł strony </title> treść w pasku tytułowym przeglądarki <meta charset=”UTF-8”> (HTML 5) <meta http-equiv = ”content-type” content = ”text/html; charset=ISO- 8859-2”> (HTML 4.01) </head> informacje o stronie kodowej – standard kodowania polskich liter (Pol. Norma) <body> Właściwa treść (ciało) dokumentu </body> </html>
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
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 <meta>. można umieścić polecenia dotyczące np. : strony kodowej, opisu strony, <meta name ="description" content = "jakaś tam treść"> 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
HTML – znacznik META Informacje o znaczniku META cd: wyrazów kluczowych, <meta name ="keywords" content= "jakieś wyrazy kluczowe"> 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. autora strony, <meta name="author" content ="imię i nazwisko"> daty utworzenia <meta http-equiv="creation-date" content="Tue, 04 Dec 2013 21:29:02 GMT"> i
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żą: Firefox Fundacji Mozilla, Opera firmy Opera Software, Safari firmy Apple, Chrome firmy Google Internet Explorer firmy Microsoft. i
HTML – spis poleceń POLECENIE OPIS <a> kotwica <abbr> skrót <acronym> akronim <address> adres <area> obszar <article> artykuł <aside> treść poboczna, powiązana z treścią artykułu <audio> kontener pliku dźwiękowego <b> pogrubienie czcionki <base> adres bazowy <basefont> czcionka bazowa <bdo> kierunek tekstu <big> zwiększenie czcionki <blockquote> cytat blokowy <body> ciało dokumentu <br> przełamanie wiersza <button> przycisk <canvas> kontener do renderowania grafiki <caption> podpis tabeli <center> środkowanie <cite> cytat <code> czcionka kodu i
HTML – spis poleceń POLECENIE OPIS <col> kolumna <colgroup> grupa kolumn <command> polecenie wywoływane przez użytkownika <datalist> lista danych w funkcji autouzupełniania <dd> treść definicji <del> usunięty tekst <details> pełna treść elementu <dfn> definicja <div> wycinek <dl> lista definicji <dt> hasło definicji <em> emfaza czcionki <embed> interfejs osadzonego zasobu zewnętrznego <fieldset> grupa elementów formularza <figcaption> podpis dla grupy elementów <figure> grupa treści multimedialnych z podpisem <font> czcionka <footer> stopka strony lub fragmentu dokumentu i
HTML – spis poleceń POLECENIE OPIS <form> formularz <frame> ramka <frameset> układ ramek <h1-h6> śródtytuły <head> nagłówek dokumentu <header> nagłówek strony lub fragmentu dokumentu <hgroup> nagłówek sekcji zawierającej wiele śródtytułów <hr> pozioma linia <html> szkielet dokumentu <i> pochylenie czcionki <iframe> pływająca ramka <img> - ilustracja <input> pole formularza <ins> wstawiony tekst <kbd> czcionka z klawiatury <label> etykieta kontrolki formularza <legend> tytuł grupy elementów formularza <li> element wykazu i
HTML – spis poleceń POLECENIE OPIS <link> powiązanie dokumentu <map> mapa graficzna <mark> wyróżnienie ciągu znaków <menu> menu <meta> własności dokumentu <meter> kontener określający wartość w przedziale <nav> sekcja dokumentu zawierająca nawigację <noframes> alternatywa ramek <noscript> alternatywa skryptu <object> obiekt multimedialny <ol> wykaz uporządkowany <optgroup> grupowanie opcji w formularzu <option> opcja w formularzu <output> definicja postępu zadania <p> akapit <param> parametr obiektu i
HTML – spis poleceń POLECENIE OPIS <pre> blok preformatowany <progress> reprezentacja postępu zadania <q> cytat w wierszu <ruby> element anotacji Ruby <rp> <rt> <s> czcionka przekreślona <samp> czcionka przykładu <script> definicja skryptu <section> sekcja grupująca treść <select> rozwijane pole formularza <small> zmniejszenie czcionki <source> źródło zasobów multimedialnych <span> blok liniowy <strike> <strong> silne wyróżnienie czcionki i
HTML – spis poleceń POLECENIE OPIS <style> styl <sub> indeks dolny czcionki <summary> podsumowanie widocznego fragmentu treści details <sup> indeks górny czcionki <table> tabela <tbody> ciało tabeli <td> komórka tabeli <textarea> - pole tekstowe formularza <tfoot> stopka tabeli <th> nagłówek kolumny tabeli <thead> nagłówek tabeli <time> data/czas <title> tytuł dokumentu <tr> wiersz tabeli <track> ścieżka tekstowa w wideo <tt> czcionka "maszynowa" i
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. POLECENIE OPIS <u> podkreślenie czcionki <ul> wykaz nieuporządkowany <var> nazwa zmiennej <video> kontener treści wideo <wbr> przełamanie wyrazu <!DOCTYPE> standard języka dokumentu i
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: <img src= "fotka.jpg" alt = "fotka z wakacji"> <a href = "http://www.fem.put.poznan.pl">Link do strony WiZ PP</a> <p style = "color: blue" > Tekst w kolorze niebieskim.</p>
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS A abbr TD, TH skrócony opis zawartości komórki accept FORM, 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 IINPUT, LABEL, TEXTAREA przypisuje klawisz szybkiego dostępu do elementu formularza action rodzaj akcji podejmowanej po naciśnięciu przycisku Submit
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS 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 alink BODY kolor aktywnego odsyłacza alt AREA, 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
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS autofocus BUTTON, INPUT, KEYGEN, SELECT, TEXTAREA określa, czy dany obiekt powinien uzyskać fokus zaraz po załadowaniu strony; wartość autofocus lub autofocus= "autofocus". autoplay AUDIO, VIDEO atrybut powoduje odtwarzanie pliku zaraz po uruchomieniu strony axis TD, TH nazwa grupy, kategorii, do której przypisywana jest komórka, o jednym typie danych B background BODY obraz jako tło strony bgcolor BODY, TABLE, TD, TH, TR Kolor tła border IMG, TABLE szerokość obramowania
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS C cellpadding TABLE odległość między zawartością komórki a jej obramowaniem, w pikselach cellspacing cellspacing - odległość między komórkami w pikselach challenge KEYGEN 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 pozycja znaku wyrównania, określonego przez char, w linii tekstu, wyrażona w pikselach charset A, LINK, META, SCRIPT określa kodowanie znaków zasobu docelowego
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS checked COMMAND, INPUT ustala początkowe zaznaczenie pola, np. radio lub checkbox cite BLOCKQUOTE, DEL, INS, Q adres źródła cytatu clear BR wymusza zrzucenie w dół sąsiadującego elementu, wartości: none, left, right, all color BASEFONT, FONT kolor czcionki cols FRAMESET, TEXTAREA podział na ramki w pionie (wartości: piksele, procenty ; szerokość pola liczona liczbą kolumn znaków colspan TD, TH liczba kolumn, na które rozciąga się komórka
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS compact DL, OL zwięzły rendering listy content META ustala konkretną wartość atrybutu własności dokumentu controls AUDIO, VIDEO atrybut powoduje wyświetlenie interfejsu coords A, AREA określa współrzędne obszaru w mapie odsyłaczy po stronie klienta (niewymagany); wartości: x,y,z
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS D datetime DEL, 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="2006-09-07T12:45:00PST default TRACK atrybut mówi, że powinna zostać uruchomiona dana ścieżka, o ile użytkownik nie określi inaczej swoich preferencji. defer SCRIPT informuje, że skrypt niczego nie wyświetla ; wartość: defer lub defer="defer"
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS dir BDO 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 enctype FORM sposób kodowania wysyłanych informacji, np. enctype= "text/plain" F face BASEFONT, FONT krój czcionki for LABEL, OUTPUT kojarzy etykietę z elementem, którego atrybut ID równa się wartości atrybutu FOR dla danej etykiety
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS 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 formenctype określa, jak dane z formularza powinny byc kodowane w chwili przesyłania; dotyczy tylko typu submit. formmethod (HTML 5) określa, jakiej metody HTTP użyć, tylko dla typu submit. Wartości get i post
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS formnovalidate BUTTON, INPUT decyduje, że dane formularza nie powinny być walidowane przy przesyłaniu, tylko dla typu submit. Wartość: formnovalidate lub formnovalidate ="formnovalidate" formtarget (HTML 5) określa, gdzie wyświetlić odpowiedź po przesłaniu danych, tylko dla typu submit. Wartości: _blank, _self, _top, _parent, nazwa_okna frame TABLE określa, które fragmenty obramowania mają być rysowane (niewymagany), wartości: void, above, below, hsides, vsides, lhs, rhs, box, border frameborder FRAME, IFRAME włączenie lub wyłączenie obramowania ramki
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS H headers TD, 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 high METER 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. href A, AREA, BASE, LINK odsyłacz do dokumentu ; adres bazowy hreflang (HTML 5) AREA, LINK określa język docelowego adresu, np. hreflang="fr" hspace IMG poziomy odstęp wokół obrazu
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS http-equiv META ustala nazwę i rodzaj informacji, łacząc zawartość content z polem nagłówka http (niewymagany); wartości: content-type, default-style, refresh I icon COMMAND ismap IMG informuje o podziale obrazu na fragmenty będące odyłaczami - kliknięcia są przesyłane na serwer do przetwarzania K keytype KEYGEN
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS kind TRACK 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
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS language BDO, SCIPT język tekstu (niewymagany, zaniechany w XHTML 1.1); wartości: kody językowe, np. language="fr" link BODY kolor odsyłacza List (HTML 5) INPUT odwołuje się do elementu datalist, który zawiera predefiniowane opcje dla elementu input. Wartość datalist_ID longdesc FRAME, IFRAME, IMG adres URL dokumentu opisujący szerzej ramkę loop AUDIO, VIDEO atrybut powoduje odtwarzanie pliku w pętli
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS low METER 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. marginheight FRAME, IFRAME górny i dolny margines ramki w pikselach marginwidth lewi i prawy margines ramki w pikselach max INPUT, METER, PROGRESS określa maksymalną wartość dla elementu input. Wartości: liczba lub data
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS maxlength INPUT, 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 method FORM metoda wysyłania danych na serwer wartości: get, post
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS min (HTML 5) INPUT, METER określa minimalną wartość dla elementu input. Wartości: liczba lub data multiple INPUT, SELECT pozwala wprowadzić w polu input więcej niż jedną wartość. Wartości: multiple lub multiple="multiple" muted VIDEO 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..
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS nohref AREA wyklucza obszar z adresu noresize FRAME zablokowanie rozmiarów ramki noshade HR usunięcie cienia linii, novalidate (HTML 5) FORM określa, czy formularz ma być walidowany przy wysyłaniu, czy nie; wartość novalidate lub novalidate ="novalidate" nowrap TD, TH zakaz łamania wiersza O optimum METER atrybut wyznaczający wartość uznaną za optymalną
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS P pattern (HTML 5) INPUT wprowadza wyrażenie regularne, które sprawdza wartość wprowadzoną w polu input placeholder INPUT, TEXT wprowadza wskazówkę dla użytkownika, opisującą oczekiwaną w polu wartość poster VIDEO atrybut podaje adres statycznego pliku graficznego (np. jpg), który będzie wyświetlany w interfejsie klipu do momentu kliknięcia przycisku odtwarzania. preload AUDIO, VIDEO atrybut powoduje wstępne załadowanie plików dźwiękowych, zanim czytelnik zechce uruchomić odtwarzanie
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS R radiogroup COMMAND readonly INPUT, TEXTAREA blokuje możliwość zmieniania zawartości pola rel A, 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) IINPUT, TEXTAREA określa, czy wypełnienie pola jest wymagane. Wartość required lub required ="required". rev A, 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
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS reversed (HTML 5) OL wprowadza odwrócony porządek, np. 3,2,1. Wartość: reversed lub reversed ="reversed" rows FRAMESET, TEXTAREA podział na ramki w poziomie), wartości: piksele, procenty; wysokość pola w wierszach (wymagany) rowspan TD, TH liczba wierszy, na które rozciąga się komórka rules TABLE określa sposób obramowania grup komórek (niewymagany), wartości: none, groups, rows, cols, all
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS S sandbox IFRAME 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
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS scheme META określa schemat interpretacji informacji (niewymagany); scope TD, TH przedział komórek objęty tą samą definicją nagłówka (niewymagany), wartości: row, col, rowgroup, colgroup scoped STYLE określa, że styl odnosi się jedynie do elementu nadrzędnego dla danego elementu, oraz elementów-dzieci tamtego elementu nadrzędnego; wartość: scoped. scrolling FRAME, IFRAME określenie, czy ramka może być, wartości: yes, no, auto seamless IFRAME wymusza "wtopienie" ramki w dokument; wartość seamless lub seamless ="seamless".
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS selected OPTION wstępnie zaznacza opcję shape A, 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 sizes LINK określa wielkość w pikselach (np. "16x16" lub "16x16 32x32" lub any) linkowanego zasobu, tylko dla rel ="icon" span COL, COLGROUP liczba kolumn na które rozciągają się ustawienia danej kolumny, domyślnie 1
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS 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 srclang TRACK atrybut określa język ścieżki tekstowej (wymagany, gdy kind="subtitles"); wartość: kod języka, np. en, fr lub pl. start OL początkowa wartość pierwszej pozycji, wyrażona liczbą step INPUT "krok", określa odstępy liczbowe między wartościami pola
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS summary TABLE opisuje tabelę; docelowo dla syntezatorów mowy T tabindex SELECT, 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 text BODY kolor tekstu w dokumencie title LINK pomocniczy, informacyjny tytuł dowiązanego dokumentu
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS 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
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS U usemap IMG 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
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS 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 valuetype PARAM określa typ wartości wartości: data, ref, object vlink BODY kolor odwiedzonego odsyłacza
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS vspace IMG pionowy 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
SPIS ATRYBUTÓW ATRYBUT POLECENIA OPIS 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).
Kaskadowe arkusze stylów-CSS 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
Kaskadowe arkusze stylów-CSS 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.
Kaskadowe arkusze stylów-CSS BUDOWA STYLU: Przykłady, ilustrujące użycie stylów definiowanych w części nagłówkowej dokumentu lub w zewnętrznym arkuszu stylów 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.
Kaskadowe arkusze stylów-CSS 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}
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML Znaczniki w przeglądarce www nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają formatować tekst. UWAGI! Należy domykać zawsze znaczniki - dotyczy to ogromnej większości znaczników, poza bardzo nielicznymi, jak <img>, <hr> czy <br>, np. <p>Wczoraj byliśmy w lesie i było bardzo przyjemnie.</p> 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. <img src="fotka.jpg" alt="fotka z wakacji"> <a href="http://www.onet.pl" >Portal Onet.pl</a> <p style="color: blue; ">Tekst w kolorze niebieskim.</p>
Tytuł stopnia pierwszego ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. <hn> Tytuł stopnia n </hn> n=1…6 <h1> Tytuł stopnia pierwszego </h1> … <h6> Tytuł stopnia szóstego </h6> 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
<p> </p> (p=paragraph) ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Akapit <p> </p> (p=paragraph) Znacznik ten wstawia interlinie (znaki końca akapitu) między poszczególne fragmenty tekstu. <p> Treść pierwszego akapitu </p> <p> Treść drugiego akapitu </p> 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.
To jest pierwszy wiersz <br> To jest drugi wiersz <br> ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wiersz <br> Znacznik ten przenosi tekst o jeden wiersz w dół, nie wprowadzając dodatkowej interlinii (znaku końca akapitu). To jest pierwszy wiersz <br> To jest drugi wiersz <br> Napisanie kilku kolejnych <br> pozwala poszerzyć pionowy odstęp między fragmentami tekstu. Pozioma linia <hr> (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
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Lista wypunktowana (wykaz nieuporządkowany) <ul> </ul> (ang. unordered list) W ramach szkieletu listy wypunktowanej, poszczególne punkty wykazu wprowadzane są za pomocą znaczników: <li> </li>. <p> Zainteresowania: </p> <ul> <li> sport </li> <li> muzyka </li> <li> fotografowanie </li> <li> film </li> </ul> W efekcie uzyskamy: Zainteresowania: sport muzyka fotografowanie film
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Lista numerowana (wykaz uporządkowany) <ol> </ol> (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 <li> </li>. <p> Zainteresowania: </p> <ol> <li> sport </li> <li> muzyka </li> <li> fotografowanie </li> <li> film </li> </ol> W efekcie uzyskamy: Zainteresowania: sport muzyka fotografowanie film
list-style-type: wartość 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 <ul style="list-style-type: disc"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów punktor w kształcie okręgu <ul style="list-style-type: circle "> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt punktor w kształcie kwadratu list-style-type: square
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów numerowanie liczbami arabskimi <ul style="list-style-type: decimal"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt numerowanie małymi liczbami rzymskimi list-style-type: lower-roman
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów numerowanie wielkimi liczbami rzymskimi <ul style="list-style-type: upper-roman"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt numerowanie małymi literami alfabetu łacińskiego list-style-type: lower-alpha
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wykazy przy użyciu arkuszy stylów numerowanie wielkimi literami alfabetu łacińskiego <ul style="list-style-type: upper-alpha"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt wykaz bez numerowania list-style-type: none
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 <strong>To jest tekst pogrubiony </strong> <em>To jest tekst pochylony</em> Efekt działania tych poleceń: To jest tekst pogrubiony To jest tekst pochylony
Odsyłacze ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. (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.
Politechnika Poznańska ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do innej strony internetowej <a href =”adres .strony. internetowej”> Jakaś nazwa tej strony</a> <a href=” http://www.put.poznan.pl”>Politechnika Poznańska</a> 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 <a href=”…”> i </a>. 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
odsyłacz do adresu poczty elektronicznej ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do adresu poczty elektronicznej <a href =”mailto:autor@jego.adres">Imię i nazwisko</a> <a href =”mailto:KowalskiJ@poczta.onet.pl”>Jan Kowalski</a> 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.
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: <a href="mailto: KowalskiJ@wp.pl?subject= Termin spotkania"> adres odbiorcy, do którego idzie kopia listu: <a href="mailto: nowak@o2.pl?cc= Jan.Kowalski@firma.pl "> tzw. ślepa lub ukryta kopia(żaden inny odbiorca listu nie zobaczy tego adresu): <a href="mailto: nowak@o2.pl?bcc= Jan.Kowalski@firma.pl "> fragment ciała listu, a więc już bezpośrednio w oknie edycji: <a href="mailto: nowak@o2.pl?body=Panie Nowak, Chciałbym umówić się na spotkanie w sprawie..."> list adresowany do kilku osób jednocześnie. Adresy trzeba rozdzielić po prostu średnikami: <a href="mailto: nowak@o2.pl;Jan.Kowalski@firma.pl">
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 &. <a href="mailto: nowak@o2.pl?cc= Jan.Kowalski@firma.pl & bcc= jozef.kwiatek@firma.pl&subject=Bardzo ważny list& body=Witajcie Panowie">Wyślij pocztę</a>
<a name="nazwa_etykiety"> </a> 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: <a name="nazwa_etykiety"> </a> 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.
np. "to_jest_zakładka_dla_pewnego_tematu". 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.
odsyłacz do etykiety (zakładki) ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. odsyłacz do etykiety (zakładki) <a href="strona.htm#nazwa_etykiety">Tekst</a> 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: <a href="#nazwa_etykiety">Tekst, na który należy kliknąć</a> np. <a name =”zdjecia”>moje zdjęcia</a> <a href =”#zdjecia”>moje zdjęcia </a>
Przykłady odsyłaczy do innych plików ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Przykłady odsyłaczy do innych plików Odsyłacz do pliku tekstowego TXT <a href="plik_tekstowy.txt">Plik tekstowy TXT</a> Plik tekstowy TXT Odsyłacz do pliku graficznego GIF <a href="plik_graficzny.gif">Plik graficzny GIF</a> Plik graficzny GIF Odsyłacz do pliku dźwiękowego <a href="pinkpant.mid">Plik dźwiękowy</a> Plik dźwiękowy Odsyłacz do pliku PDF <a href="licence.pdf">dokument PDF</a>
font-family: czcionka 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ć <p style="font-family: 'Times New Roman'">Treść akapitu</p> 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
<p style="font-family: serif">Treść akapitu</p> 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: <p style="font-family: Times, Georgia">Treść akapitu</p> 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. <p style="font-family: serif">Treść akapitu</p> To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki szeryfowej.
Wlasności czcionki Style czcionek font-style : wartość 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. <p style="font-style: normal">Treść akapitu</p> Treść akapitu wyświetlana w stylu normal <p style="font-style: italic">Treść akapitu</p> Treść akapitu wyświetlana w stylu italic <h3 style="font-style: oblique">Treść akapitu</h3> Treść śródtytułu wyświetlana w stylu oblique
font-variant : wartość 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. <p style="font-variant: normal">Treść akapitu</p> Treść akapitu wyświetlana w wariancie normal <p style="font-variant: small-caps">Treść akapitu</p> Treść akapitu wyświetlana w wariancie small-caps <h3 style=" font-variant: small-caps ">Treść akapitu</h3> Treść śródtytułu wyświetlana w wariancie small-caps
Wlasności czcionki Waga czcionek font-weight : wartość normal 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 100 200 … 800 900
<p style="font-weight: normal">Treść akapitu</p> ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Waga czcionek <p style="font-weight: normal">Treść akapitu</p> 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
<p style="font-size: wielkość absolutna">Treść akapitu</p> 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: imiennych wielkości absolutnych, wielkości relatywnych, wysokości w jednostkach miary wysokości w procentach. a. Imienne wielkości absolutne <p style="font-size: wielkość absolutna">Treść akapitu</p>
Imienne wielkości absolutne: xx-small (bardzo bardzo mała) 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)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki
b. Imienne wielkości relatywne (w stosunku do domyślnej): ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki b. Imienne wielkości relatywne (w stosunku do domyślnej): <p style="font-size: wielkość relatywna">Treść akapitu</p> smaller (mniejsza -1) larger (większa +1)
c. Wielkość w jednostkach miary: 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 <p style="font-size: 14px">Treść akapitu</p> <p style="font-size: 1cm">Treść akapitu</p> <p style="font-size: 1.5em">Treść akapitu</p>
c. Wielkość w jednostkach miary: ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki c. Wielkość w jednostkach miary:
d. Wielkość w procentach: 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: <h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1>
d. Wielkość w procentach: ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wielkość czcionki d. Wielkość w procentach:
Kolory czcionki Do określania koloru stosuje się obecnie style. ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolory czcionki Do określania koloru stosuje się obecnie style. <p style="color: blue; ">Tekst w kolorze niebieskim.</p> Tekst w kolorze niebieskim. Poniżej przedstawiona jest lista 16 podstawowych barw (nazwy imienne) stosowanych w dokumentach internetowych:
Kolory czcionki ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tekst próbny-white Tekst próbny-yellow
Odstępy między wyrazami 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) <p style="word-spacing: 1cm; ">1-centymetrowe odstępy między wyrazami.</p>
Odstępy między wyrazami ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między wyrazami <p style="word-spacing: 2pt; ">2-punktowe odstępy między wyrazami.</p> <p style="word-spacing: 0.5em; ">W tym akapicie odstępy między wyrazami wynoszą 0.5 wysokości czcionki (em).</p> <p style="word-spacing: 5px; ">5-pikselowe odstępy między wyrazami.</p>
Odstępy między literami 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) <p style=”letter-spacing: 1m;">1-milimetrowe odstępy między literami.</p>
Odstępy między literami ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między literami <p style=”letter-spacing: 2pt; ">2-punktowe odstępy między literami.</p> <p style=”letter-spacing: 0.5em; ">W tym akapicie odstępy między literami wynoszą 0.5 wysokości czcionki (em).</p> <p style="letter-spacing: 5px;">5-pikselowe odstępy między literami.</p>
Odstępy między wierszami 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ę.
Odstępy między wierszami ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Odstępy między wierszami <p style=”line-height:1cm;">To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm</p> <p style=”line-height: 80%;">To jest akapit, w którym odstęp między wierszami wynosi 80 proc. normalnego</p>
underline (podkreślenie) overline (nadkreślenie) 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)
To jest odsyłacz do firmy Corel ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Dekoracja tekstu <a style="text-decoration: none; " href="http://www.corel.com">To jest odsyłacz do firmy Corel.</a> 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. <p style="text-decoration:underline; ">To jest podkreślenie tekstu.</p>
Własności tekstu Dekoracja tekstu ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Dekoracja tekstu <p style="text-decoration: overline; ">To jest nadkreślenie tekstu.</p> <p style="text-decoration: line-through; ">To jest przekreślenie tekstu.</p> <p style="text-decoration: blink; ">To jest migotanie tekstu.</p> To jest migotanie tekstu.
capitalize (zamiana pierwszych liter wyrazów na wielkie) 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)
To jest jakiś przykładowy akapit. Poddamy go transformacjom. ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Transformacja tekstu <p style="text-transform: none">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p> To jest jakiś przykładowy akapit. Poddamy go transformacjom. <p style="text-transform: capitalize">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p> To Jest Jakiś Przykładowy Akapit. Poddamy Go Transformacjom. <p style="text-transform: uppercase">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p> TO JEST JAKIŚ PRZYKŁADOWY AKAPIT. PODDAMY GO TRANSFORMACJOM.
to jest jakiś przykładowy akapit. poddamy go transformacjom. ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Transformacja tekstu <p style="text-transform: lowercase">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p> to jest jakiś przykładowy akapit. poddamy go transformacjom.
Poziome wyrównanie tekstu 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)
Poziome wyrównanie tekstu ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Poziome wyrównanie tekstu <p style="text-align: left">To jest przykładowy akapit wyrównany do lewego marginesu.</p> <p style="text-align: right">To jest przykładowy akapit wyrównany do prawego marginesu.</p>
Poziome wyrównanie tekstu ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Poziome wyrównanie tekstu <p style="text-align: center">To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów.</p> <p style="text-align: justify">To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów </p>
Własności tekstu Wcięcie tekstu 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
Własności tekstu Wcięcie tekstu ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Własności tekstu Wcięcie tekstu <p style="text-indent: 10%">To jest akapit, w którym pierwszy wiersz…</p> <h2 style="text-indent: 1in">Tytuł rozpoczynający się w odległości 1 cala...</h2>
Czerwony tytuł drugiego stopnia 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: <h2 style="color: #FF0000; ">Czerwony tytuł drugiego stopnia</h2> Czerwony tytuł drugiego stopnia <p style="color: #FF00FF; ">Akapit w kolorze Fuchsia</p> Akapit w kolorze Fuchsia
Numerowany wykaz w kolorze niebieskim ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor <table border> <tr> <td style="color: #808000; ">Komórka tabeli z oliwkowym tekstem</td> </tr> </table> Numerowany wykaz w kolorze niebieskim <ol style="color: blue; "> <li>punkt pierwszy <li>punkt drugi <li>punkt trzeci </ol>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Kolor
Wiele elementów może mieć przypisany kolor tła. Przykłady: 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: <h2 style="background-color: yellow">Tytuł stopnia drugiego na żółtym tle</h2> <p style="background-color: blue">Akapit na tle Aqua</p>
<p style="color:background">, 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. <body style="background-color: orange“></body> 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 <p style="color:background">, a więc za pomocą koloru pulpitu Windows. Każdy czytelnik widzi więc ten kolor, który ma na swoim własnym pulpicie.
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: <h1 style="background-image: url('canvas2.gif')">Tytuł stopnia pierwszego na tle płótna</h1>
body {background: url(nazwa_obrazka)} ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika jako tło <table border> <tr> <td style="height:100px; background-image: url('/grafika/greendot.gif')>Komórka tabeli z zieloną kropką jako tłem</td> </tr> </table> Jeśli obraz miałby stanowić tło całej strony, można użyć selektora BODY . <body style="background-image: url('obrazki/obrazek.gif') “></body> body {background: url(nazwa_obrazka)}
Powtarzanie tła Wartości: 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)
Powtarzanie tła Przykłady: 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: <style type="text/css"> <!-- body { background: #c0c0c0; url(greendot.gif); background-repeat: no-repeat } --> </style>
Powtarzanie tła Przykłady: 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: <style type="text/css"> <!-- body { background: #c0c0c0; url(greendot.gif); background-repeat: repeat-x } --> </style>
Powtarzanie tła Przykłady: ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Powtarzanie tła Przykłady: <table border width="400px"> <tr> <td style="background-image: url(/grafika/greendot.gif); background-repeat:repeat-y;">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 </td> </tr> </table>
Powtarzanie tła Przykłady: 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: <style type="text/css"> <!-- body { background: #c0c0c0; url(greendot.gif); background-repeat: repeat } --> </style>
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.
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;"
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;"
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:
Pozycja tła Określanie pozycji tła w poziomie: 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;"
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:
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;"
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;"
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy i odstępy Model pojemnika W specyfikacji kaskadowych arkuszy stylów występuje tzw. model pojemnika, zwanego czasem potocznie pudełkiem (ang. box model), który ilustruje, jakie są fizyczne, wizualne elementy danego elementu, oraz jakie jest położenie danego elementu, np. akapitu, śródtytułu czy ilustracji w stosunku do innych elementów. Poniższa ilustracja pokazuje, jak rozumieć model pojemnika (czyli marginesu, obramowania, odstępu i zawartości elementu). W kolorze żółtym jest pokazany zewnętrzny margines, który oddziela dany element od innych elementów, np. akapit od akapitu.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. 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.
Marginesy i odstępy Model pojemnika ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy i odstępy Model pojemnika
Marginesy cząstkowe Wartości: 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
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. <p style="margin-top: 1cm">To jest treść akapitu</p> 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. <p style="margin-right: 2cm">To jest treść akapitu</p>
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. <p style="margin-bottom: 1cm">To jest treść akapitu</p> 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. <p style="margin-left: 10%">To jest treść akapitu</p>
Marginesy mieszane Wartości: 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:
Marginesy mieszane Przykłady: ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy mieszane Przykłady:
Odstępy cząstkowe Wartości: padding-left : wartości (odstęp lewy) 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:
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.
W analogiczny sposób tworzymy dolny odstęp. 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 <p style="padding-left: 5em">Akapit oddzielony od od innego elementu dodatkowym odstępem o wielkości 5em z lewej strony.</p>
Odstępy mieszane Wartości: 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. <p style="padding: 20px">Akapit oddzielony od obramowania dodatkowymi odstępami o wartości 20px z każdej strony.</p>
Odstępy mieszane ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. <p style="padding: 40px 80px">Akapit oddzielony od swojego naturalnego obramowania dodatkowymi odstępami o wartości 40px górny/dolny i 80px lewy/prawy.</p> <p style="">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.</p>
border-style: wartość 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
OBRAMOWANIA: Styl obramowania 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
OBRAMOWANIA: Styl obramowania ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Styl obramowania Przykłady:
border-width: wartość 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.
Grubość obramowania ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Przykłady różnych grubości: <p style="border-style: solid; border-width: 1px">Treść akapitu</p> <p style="border-style: solid; border-width: thin">Treść akapitu</p> <p style="border-style: solid; border-width: medium">Treść akapitu</p> <p style="border-style: solid; border-width: thick">Treść akapitu</p>
border-color: wartość 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 .
Tabela kolorów (fragment): ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):
Tabela kolorów (fragment): ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):
Tabela kolorów (fragment): ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):
OBRAMOWANIA: Kolor obramowania Przykłady kolorów obramowania: ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Kolor obramowania Przykłady kolorów obramowania: <p style="border-style: solid; border-width: 2px; border-color: red; ">Czerwone obramowanie (red)</p> <p style="border-style: solid; border-width: 2px; border-color: green; ">Zielone obramowanie (green)</p>
Obramowanie cząstkowe 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
Obramowanie cząstkowe 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. PRZYKŁADY: <p style="border-left-style: solid; border-left-width: 5px; border-left-color: black;">Treść akapitu</p> " <p style="border-bottom-style: groove; border-bottom-width: 10px; border-bottom-color: olive; border-top-style: groove; border-top-width: 10px; border-top-color: olive; ">Treść akapitu</p> "
Wartości atrybutów dla obramowań cząstkowych lub całego obramowania 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
Obramowanie mieszane ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. 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. <p style="border: solid 3px red">Treść akapitu</p> 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. <p style="border-left: solid 5px red; border-top: solid 3px green; ">Treść akapitu</p>
Grafika na stronie ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. 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.
Wstawianie grafiki do dokumentu ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wstawianie grafiki do dokumentu Grafikę można wprowadzić na stronie za pomocą polecenia: <img src="/sciezka/plik_graficzny" alt="nazwa alternatywna"> 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:
Wstawianie grafiki do dokumentu 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. <img src="/grafika/sufinka.jpg" width="342" height="353" alt="Sufi w tulipanach">
Grafika – obramowania i odstępy 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” <img src="/grafika/sufinka.jpg" width="171" height="177" alt="Sufi w tulipanach" style="border: 5px red solid; "> <img src="/grafika/sufinka.jpg" width="171" height="177" alt="Sufi w tulipanach" style="outline: 5px green double; ">
Grafika – obramowania i odstępy 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) <img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="margin-left: 50px; margin-right: 50px; ">
Grafika – obramowania i odstępy ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – obramowania i odstępy <img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="margin-top: 50px; margin-bottom: 50px; ">
Grafika – pozycjonowanie poziome 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ę
Grafika – pozycjonowanie poziome 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; ". <img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="float: right; "> I rezultat:
Grafika – pozycjonowanie poziome 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; ". <img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w tulipanach" style="float: left; "> I rezultat:
Grafika – pozycjonowanie pionowe 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: <img src="/grafika/sufinka.jpg" width="85" height="88" alt="Sufi w tulipanach" style="vertical-align: top; ">
Grafika – pozycjonowanie pionowe ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – pozycjonowanie pionowe Przykłady z użyciem grafiki i akapitu: <img src="/grafika/sufinka.jpg" width="85" height="88" alt="Sufi w tulipanach" style="vertical-align: middle; "> <img src="/grafika/sufinka.jpg" width="85" height="88" alt="Sufi w tulipanach" style="vertical-align: bottom; ">
TABELE Ogólne ramy tabeli <table> </table> Wiersz tabeli ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. TABELE Ogólne ramy tabeli <table> </table> 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 <tr> </tr> Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <table> </table> można umieścić wiele kolejnych definicji wierszy,np. <table> </table>
<td> </td> ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Komórka w wierszu <td> </td> 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. <table> <tr> <td> </td> <td> </td> <td> </td></tr> </table> 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 a1 a2 a3 b1 b2 b3 c1 c2 c3 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.
<table border> </table> 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ść. <table border> </table> Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, np. <table border=”10”> </table> 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.: <table border cellspacing=”8”> </table>
Odstępy w komórkach ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. 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). <table border cellspacing=”8” cellpadding=”15”> </table> 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ą.
Szerokość tabeli ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. 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. <table border width=”600”> </table> 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)
Szerokość tabeli Wysokość tabeli ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Szerokość tabeli <table border width=”50%”> </table> 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. <table border style="height: 200px; width: 60%; ">
Wysokość tabeli ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wartość podana w procentach będzie interpretowana jedynie wtedy, gdy tabela będzie umieszczona w pojemniku wyższego rzędu o podanej wysokości. <div style="height: 200px; "> <table border style="height: 50%; width: 60%; ">
Szerokość komórki ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Szerokość komórki jest określana za pomocą stylów, a konkretnie szerokości <td style ="width: 150px; ">zawartość komórki</td> Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu. <td style ="width: 50%; ">zawartość komórki</td>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wyrównanie tabeli Do definiowania wyrównania tabeli stosuje się style CSS., np. <table style="float:right; "></table> W efekcie tabela zostanie przesunięta w prawo i oblana z lewej strony tekstem oraz pod spodem.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Wyrównanie tabeli Do definiowania wyrównania tabeli stosuje się style CSS., np. <table style="float:left; "></table> W efekcie tabela zostanie przesunięta w lewo i oblana z prawej strony tekstem oraz pod spodem.
<td style="text-align: left; "> </td> ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Poziome wyrównanie danych w komórkach <td style="text-align: left; "> </td> <td style="text-align: center; "> </td> <td style="text-align: right; "> </td>
Pionowe wyrównanie danych w komórkach 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 - <td valign=top></td> do górnego brzegu <td valign=middle></td> do środka <td valign=bottom></td> do dolnego brzegu
Kolor tła tabeli ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. <table style="background-color: red"> <tr style="background-color: beige"> <td style="background-color: green"> Przykład zdefiniowania odrębnych kolorów w każdej z komórek:
Obrazek jako tło tabeli 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 <table style="background-image: url(adres_obrazka)"> Przykład: <table style="background-image: url(/images/grafika/canvas2.gif)">
Kolor obramowania tabeli 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. <table border cellspacing="1" cellpadding="5" style="border: 15px outset #D2691E; ">
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: <table border style= "width: 300px; "> <caption>Tytuł tabeli</caption> Za pomocą stylów CSS można zdefiniować położenie tytułu nad lub pod tabelą: <caption style="caption-side: bottom; ">Tytuł tabeli</caption>
<th> </th> 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 pozycjonowane na środku. Przykład nagłówków kolumn: Nagłówek jest definiowany za pomocą znaczników: <th> </th>
Nagłówek wiersza i kolumny tabeli ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Nagłówek wiersza i kolumny tabeli Powyższa, przykładowa tabela ma więc kod: <table border cellpadding="10" width="400"> <caption>Wzrost produkcji w latach 1991-1995 (w mln USD)</caption> <tr> <th>1991</th> <th>1992</th><th>1993</th> <th>1994</th> <th>1995</th> </tr> <tr style="text-align:center"> <td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td> </tr> </table> Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn (kolejne lata). W drugim znajdują się dane liczbowe.
Nagłówek wiersza i kolumny tabeli 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. <table border cellpadding="10" width="500"> <caption>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</caption> <tr><td></td><th>1991</th> <th>1992</th> <th>1993</th> <th>1994</th> <th>1995</th> </tr> <tr style="text-align: center; "><th>Masło</th> <td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</td></tr> <tr style="text-align: center; "><th>Margaryna</th> <td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td></tr> </table>
Nagłówek wiersza i kolumny tabeli 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.