blok liniowy silne wyróżnienie czcionki i { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/2887611/10/images/15/HTML+%E2%80%93+spis+polece%C5%84+POLECENIE+OPIS+%3Cpre%3E+blok+preformatowany.jpg", "name": "HTML – spis poleceń POLECENIE OPIS blok preformatowany", "description": " reprezentacja postępu zadania. cytat w wierszu. 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. silne wyróżnienie czcionki. i.", "width": "800" } 16 HTML – spis poleceń POLECENIE OPIS 117 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:
118 Powtarzanie tła Przykłady: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 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:
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 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;"
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.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.
129 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.
130 Marginesy i odstępy Model pojemnikaZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy i odstępy Model pojemnika
131 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
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 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:
135 Marginesy mieszane Przykłady:ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Marginesy mieszane Przykłady:
136 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:
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 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 Akapit oddzielony od od innego elementu dodatkowym odstępem o wielkości 5em z lewej strony.
139 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. Akapit oddzielony od obramowania dodatkowymi odstępami o wartości 20px z każdej strony.
140 Odstępy mieszane ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.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 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
142 OBRAMOWANIA: Styl obramowaniaZNACZNIKI 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 OBRAMOWANIA: Styl obramowaniaZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. OBRAMOWANIA: Styl obramowania Przykłady:
144 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.
145 Grubość obramowania ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.Przykłady różnych grubości: Treść akapitu
Treść akapitu
Treść akapitu
Treść akapitu
146 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 .
147 Tabela kolorów (fragment):ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):
148 Tabela kolorów (fragment):ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):
149 Tabela kolorów (fragment):ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Tabela kolorów (fragment):
150 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: Czerwone obramowanie (red)
Zielone obramowanie (green)
151 Obramowanie cząstkoweZNACZNIKI 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 Obramowanie cząstkoweZNACZNIKI 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: Treść akapitu
" Treść akapitu
"
153 Wartości atrybutów dla obramowań cząstkowych lub całego obramowaniaZNACZNIKI 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 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. 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 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.
156 Wstawianie grafiki do dokumentuZNACZNIKI 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 Wstawianie grafiki do dokumentuZNACZNIKI 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. ![Sufi w tulipanach](/grafika/sufinka.jpg)
158 Grafika – obramowania i odstępyZNACZNIKI 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”
![Sufi w tulipanach](/grafika/sufinka.jpg)
159 Grafika – obramowania i odstępyZNACZNIKI 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) ![Sufi w tulipanach](/grafika/sufinka.jpg)
160 Grafika – obramowania i odstępyZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – obramowania i odstępy ![Sufi w tulipanach](/grafika/sufinka.jpg)
161 Grafika – pozycjonowanie poziomeZNACZNIKI 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 Grafika – pozycjonowanie poziomeZNACZNIKI 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 Grafika – pozycjonowanie poziomeZNACZNIKI 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 Grafika – pozycjonowanie pionoweZNACZNIKI 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: ![Sufi w tulipanach](/grafika/sufinka.jpg)
165 Grafika – pozycjonowanie pionoweZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d. Grafika – pozycjonowanie pionowe Przykłady z użyciem grafiki i akapitu:
![Sufi w tulipanach](/grafika/sufinka.jpg)
166 TABELE Ogólne ramy tabeli
Wiersz tabeliZNACZNIKI 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