TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r. i r.) 1) Podstawowa struktura dokumentu hipertekstowego HTML - przypomnienie

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 25.10.2017 r. i 8.11.2017 r.) 1) Podstawowa struktura dokumentu hipertekstowego HTML - przypomnienie <!DOCTYPE html> <html lang="pl"> <head> <title>witamy w HTML 5</title> <meta charset="utf-8" /> <style rel="stylesheet"> article, aside, nav {display: block;} article, aside {float: left;} article {width: 500px;} nav {width: 200px;} </style> </head> <body>  <article> <header> <img alt="html 5" src="logo-small.gif" width="200" height="40" /> <h1>witamy w HTML 5</h1> </header> <p style="font-family: Arial;"> <span class="html">html 5</span> oferuje wiele nowych możliwości. Jednak minie trochę czasu, zanim możliwości te będą w pełni dostępne. </p> <footer> <small> Projekt HTML 5</small> </footer> </article> <aside> <h2>polecane linki</h2> <nav> <ul> <li><a href="#">strona główna</a></li> <li><a href="#">o witrynie</a></li> <li><a href="#">projekt</a></li> <li><a href="#">wiadomości</a></li> <li><a href="#">kontakt</a></li> </ul> </nav> </aside> </body> </html>

2) Formatowanie tekstu: Typy czcionek: font-family: serif, Arial, Helvetica, etc Rozmiary czcionek: font-size: xx-small x-small small medium large x-large xx-large larger smaller n_pt n_px Przykład: font-size: 50px; Parametry formatowania tekstu i bloków dopuszczalne w arkuszach stylów Charakterystyka font-family font-size font-weight font-style font-variant color background-attachment Znacze nie Rodzina czcionek Wielkoś ć czcionki Grubość czcionki Styl czcionki Odmian a czcionki Kolor czcionki. Połącze nie z tłem Opis i możliwe wartości Kroje czcionek dostępne w przeglądarkach. Jeśli dany krój nie występuje, używana jest czcionka domyślna. Dowolna wartość w punktach [pt], calach [in], centymetrach [cm] albo w pikselach [px]. Dodatkowo dopuszczalne są wartości: larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large. Dopuszczalna jest również wartość procentowa względem rozmiaru czcionki macierzystej [%]. Dopuszczalne wartości: normal, bold, bolder, lighter. Dopuszczalne wartości: normal, italic (kursywa), oblique (skośna). Dopuszczalne wartości: normal, small-caps. Jeden z predefiniowanych kolorów lub kod heksadecymalny RGB. Obraz przewija się razem z zawartością: scroll; obraz tła pozostaje nieruchomy: fixed. background-color Kolor tła Przezroczyste tło: tranparent; jeden z predefiniowanych kolorów lub kod heksadecymalny RGB. background-image Obrazek tła Żaden obrazek: none; adres URL obrazka. 1

background-repeat border-color border-style border-bottom-width border-left-width border-right-width bottom-top-width float padding-bottom padding-left padding-right Powtarz anie tła Kolor Styl Szeroko ść dolnej Szeroko ść lewej Szeroko ść prawej Szeroko ść górnej Przesuni ęcie Odstęp od dolnej Odstęp od lewej Odstęp od Powtarzanie tła tylko w kierunku poziomym: repeat-x; powtarzanie tła tylko w kierunku pionowym: repeat-y; powtarzanie tła w obu kierunkach: repeat; nie powtarza tła: no-repeat. Jeden z predefiniowanych kolorów lub kod heksadecymalny RGB. żadna krawędź: none; linia przerywana: dashed; linia kropkowana: dotted; linia ciągła: solid; linia podwójna: double; wyżłobione: groove; wypukłość: ridge; wkładka: insert; wypustka: outset. Cienka: thin; średnia: medium; dowolna liczba punktów [pt], cali [px]. Cienka: thin; średnia: medium; dowolna liczba punktów [pt], cali [px]. Cienka: thin; średnia: medium; dowolna liczba punktów [pt], cali [px]. Cienka: thin; średnia: medium; dowolna liczba punktów [pt], cali [px]. Przesuwa ustawianą zawartość do w lewo: left, w prawo: right albo nie przesuwa: none. Dowolna liczba punktów [pt], cali [px]; procent szerokości elementu nadrzędnego [%]. Dowolna liczba punktów [pt], cali [px]; procent szerokości elementu nadrzędnego [%]. Dowolna liczba punktów [pt], cali 2

padding-top text-align text-decoration text-indent text-transform line-height letter-spacing word-spacing margin-left margin-right margin-top prawej Odstęp od górnej Wyrówn anie tekstu Efekty dodatko we Wcięcie tekstu Przekszt ałcenie tekstu Wysoko ść wiersza Rozstaw liter Odstępy miedzy wyraza mi Lewy margine s Prawy margine s Górny margine [px]; procent szerokości elementu nadrzędnego [%]. Dowolna liczba punktów [pt], cali [px]; procent szerokości elementu nadrzędnego [%]. Lewostronny: left; wyśrodkowany: center; prawostronny: right; wyjustowany: justify. Żadne: none; podkreślenie: underline; linia nad tekstem: overline; przekreślenie: line-through; miganie: blink. Dowolna liczba punktów [pt], cali [px]; procent szerokości elementu nadrzędnego [%]. Kapitaliki: capitalize; duże litery: uppercase; małe litery: lowercase; żadne: none. Normalna: normal; dowolna liczba punktów [pt], cali [in], centymetrów [cm] albo pikseli [px]; procent wartości rozmiarów czcionki [%]. Normalny: normal; dowolna liczba punktów [pt], cali [in], centymetrów [cm] albo pikseli [px]. Normalny: normal; dowolna liczba punktów [pt], cali [in], centymetrów [cm] albo pikseli [px]. Automatyczny: auto; dowolna liczba punktów [pt], cali [in], centymetrów [cm] albo pikseli [px]; procent wartości z szerokości elementu nadrzędnego [%]. Automatyczny: auto; dowolna liczba punktów [pt], cali [in], centymetrów [cm] albo pikseli [px]; procent wartości z szerokości elementu nadrzędnego [%]. Automatyczny: auto; dowolna liczba punktów [pt], cali [in], 3

margin-bottom vertical-align s Dolny margine s Wyrówn anie w pionie centymetrów [cm] albo pikseli [px]; procent wartości z wysokości elementu nadrzędnego [%]. Automatyczny: auto; dowolna liczba punktów [pt], cali [in], centymetrów [cm] albo pikseli [px]; procent wartości z wysokości elementu nadrzędnego [%]. Do linii bazowej: baseline; do góry: top; do góry tekstu: text-top; do środka: middle; do dołu tekstu: text-bottom; procentowa wartość bieżącej szerokości wiersza [%]; do wysokości indeksu dolnego: sub; do wysokości indeksu górnego: super. 3) Tworzenie menu za pomocą listy uporządkowanej. Aby stworzyć menu można do tego celu wykorzystać listę uporządkowaną <ul> wraz z zastosowaniem odnośników - hiperłączy <a>. Najprostsza konstrukcja: <ul id="menu"> <li><a href="http://www.onet.pl"> Hiperłącze do Onet.pl </a></li> <li><a href="http://www.wp.pl"> Hiperłącze do Wp.pl </a></li> <li><a href="http://www.gazeta.pl"> Hiperłącze do Gazeta.pl </a></li> </ul> W ten prosty sposób powstaje najprostsze menu z odnośnikami do innych stron. Aby lepiej wyglądało można go stylizować za pomocą CSS. Aby stylizować musimy stylizować element <ul>, <li> oraz <a> które składają się na najprostsze menu. Tu o marginesach na stronie - model pudełkowy: - margines zewnętrzny: margin u b l r; margin-left: 10px; - obramowanie: ramka: border: width style color; border-style: solid; border-color: #XXXXXX; border-width: 10px; border-top-style: dashed; border-bottom-color: #XXXXXX; border-left-width: 2px; - margines wewnętrzny: padding: u b l r; padding-right: 2px; Ważniejsze cechy: list-style: none; -> zmiana puntorów na liście <li> display: block; -> jak przeglądarka ma wyświetlać elementu: blok tekstu, linia tekstu, element listy. Możliwe wartości: block, inline, none (w tym kontekście visibility:hidden;). text-decoration: none; - brak podkreślenia odnośnika. Podobnie tworzymy menu poziome: z tą różnicą że elementom <li> musimy nadać własność float:left; (right, none). To powoduje że elementy z tą cechą będą dryfować w zdefiniowaną stronę. 4

4) Podstawowe szablony: W kontekście modelu pudełkowego oraz używania szablonu strony można posłużyć się podstawowym szablonem dostępnym pod adresem: - Przykład stworzenia menu wraz z arkuszem stylów: http://koza.if.uj.edu.pl/~marcin/twww1718/e/index1.html - Przykład szablonu kompletnej strony: http://koza.if.uj.edu.pl/~marcin/twww1718/e/index2.html 5) Model pudełkowy / przykład strony z nagłówkiem, sidebarem i stopką. Mamy już menu teraz można zrobić szkielet strony w oparciu o <div>. Zwykle do budowy stron używamy elementów blokowych <div>. <div style="clear:both;"></div> Aby uniknąć tego efektu pływania z opcji float należy jakiemuś elementowi za elementem z float nadać właściwość clear powoduje ona ponowne złączenie float z biegiem dokumentu. left dany element będzie przesunięty poniżej wszystkich z float:left, ale pozwoli na opływanie go z prawej. right element będzie przesunięty poniżej wszystkich z float:right, ale pozwoli na opływanie go z lewej. both element będzie przesunięty poniżej wszystkich poprzedzających go floatów none Domyślna wartość oznaczająca brak wpływu na floaty (wyłącza działanie clear ). 6) Jeszcze na temat selektorów i reguł w CSS: a) selektor uniwersalny: * {cecha: wartość;} * { color:red; } Stosuje się często do resetowania np paddingów i marginesów na początku dokumentu: * { margin:0 ; padding: 0; } b) selektor potomka: zadziała tylko jeśli <span> jest potomkiem <div>. Potomek znaczy znajduje się w tym selektorze na dowolnym poziomie zagnieżdżenia (potomek w dowolnym pokoleniu). div span { color:red; 5

} <div> <span> tttt </span> </div> <div> <p> <span> ttt </span> </p> </div> <p> <span> tekst 3 </span></p> c) selektor dziecka: zadziała tylko dla pierwszego zagnieżdżania: div > span { color: green; } Może być zbudowany z większej ilości selektorów: div > p > span {} d) Selektor brata: obejmuje swoim działaniem jeden selektor znajdujący się bezpośrednio za danym selektorem: div + span { color: blue; } <div> </div> <span> text </span> Można również składać selektor braci: div + p + span { color: red;} <div> </div> <p> </p> <span> xxxx </span> e) selektor braci: zadziała dla wszystkich elementów danego typu za danym selektorem: div ~ span { color: red;} <div> </div> <span> czerwony </span> <span> czerwony</span> <span>czerwony</span> <div> <span> czarny </span></div> <span> czerwony </span> <div> <p> <span> czarny </span></p> </div> --------------------------- Selektory atrybutów: 6

a) selektor atrybutu: selektor[atrybut] {cecha: wartość;} div[title] {color:red;} <div title="www"> czerwony </div> <p title="www"> czarny </p> lub [atrybut] {cecha: wartosc;} [title] {color:red;} <div title="www"> czerwony </div> <p title="www"> czerwony </p> b) selektor atrybutu z wartością: selektor[atrybut= wartość ] {cecha: wartosc;} [atrybut= wartość ] {cecha: wartosc;} [title="www"] { color: red; } <div title="www"> tttttt </div> <p title="qqq"> kkk </p> c) selektor dla atrybutu zawierającego dany wyraz: selektor[atrybut~= wartość ] {cecha: wartosc;} [atrybut~= wartość ] {cecha: wartość;} [title~="www"] { color: red;} <div title="www"> tttttt </div> <p title="www qqq"> kkk </p> d) selektor atrybutu z wyrazem z myślnikiem (łącznikiem): selektor[atrybut = wartość ] {cecha: wartosc;} [atrybut = wartość ] {cecha: wartość;} [title ="www"] { color: red; } <div title="www-kkkkkkk"> tttttt </div> 7

<p title="www-qqq"> kkk </p> <p title="www-ddd qqq"> kkk </p> e) selektor atrybutu zawierający dany ciąg znaków: selektor[atrybut*= wartość ] {cecha: wartość;} [atrybut*= wartość ] {cecha: wartość;} [title*="www"] { color: red; } <div title="ww-kkkkkkk"> tttttt </div> <p title="www-qqq"> kkk </p> <p title="kkkkkk kkkww-ddddddqqq"> kkk </p> f) selektor atrybutu którego wartość zaczyna się od konkretnego ciągu znaków: selektor[atrybut^= wartość ] {cecha: wartosc;} [atrybut^= wartość ] {cecha: wartość;} [title^="www"] { color: red; } <div title="www-kkkkkkk"> tttttt </div> <p title="www-qqq"> kkk </p> <p title="kkkkkk kkkww-ddddddqqq"> kkk </p> g) selektor atrybutu którego wartość kończy się na dany ciąg znaków: selektor[atrybut$= wartość ] {cecha: wartosc;} [atrybut$= wartość ] {cecha: wartosc;} [title$="www"] { color: red; } <div title="www-kkkkkkkwww"> tttttt </div> <p title="www-qqq www"> kkk </p> <p title="kkkkkk kkkww-ddddddqqq"> kkk </p> i) łączenie ze sobą warunków na kilka atrybutów dla bardziej precyzyjnego wyboru treści której chcemy nadać odpowiednie wartości: selektor[atrybut][atrybut] {cecha: wartość;} [atrybut][atrybut] {cecha: wartość;} [title$="www"][lang="pl"] { color: red; 8

} <div title="www-kkkkkkkwww" lang="pl"> tttttt </div> <div title="www-kkkkkkkwww" lang="en"> tttttt </div> <p title="www-qqq www"> kkk </p> --------------------------------- Selektory pseudoelementów: Czasem zachodzi potrzeba dostępu do określonych elementów na każdej stronie ale do których nie da się bezpośrednio odnieść: np. pierwsza litera, pierwsza linijka etc. Możnaby by za każdym razem kiedy chcemy stylizować pierwsza linijke np obejmować ją elementem span i stylizować ten element ale jest to czasochłonne. Można je również wykorzystać do dodawania konkretnej treści. Ale aby rozwiązać ten problem można użyć tzw. pseudo-elementów: a) zacznijmy od pierwszej linii: first-line selektor:first-line { color: red; } :first-line { color: red; } Można z jednym dwukropkiem też zadziałą ale dla odróżnienie od pseudo-klas lepiej pisać z dwoma dwukropkami. b) podobnie można zastosować: first-letter selektor:first-letter{ color: red; } :first-letter { color: red; } c) pseudo element: before - dodaje tekst do każdego elementu określonym selektorem: div:before {content:" --Dodaj ten tekst --"; color: red; } d) podobny efekt możemy osiągnąć za pomocą: after div:after {content:" --Dodaj ten tekst --"; color: red; } e) zaznaczenie (nie działa we wszystkich przeglądarkach np. dopiero w IE9): div::selection { color:red; } wtedy zaznaczające tekst myszką powinien być on podświetlony na czerwono. 9

7) Wstęp do Mediaqueries i Bootstrap W standardzie CSS3 dostępne są selektory pozwalające nie tylko na wybór konkretnych elementów ze struktury strony, ale również na wybór własności fizycznych na których dana strona będzie wyświetlana. Pozwala to na tworzenie serwisów graficznie dostosowanych do szerokości ekranów na których dana strona ma zostać wyświetlona. Podstawowy przykład użycia selektora mediaqueries wygląda następująco: @media media-type { selector { cecha: wartość; } } Czyli w hierarchii struktury CSS normalny selektor CSS jest dodatkowo otoczony selektorem mediaqueries. W podanym selektorze media-type oznacza typ urządzenia/urządzeń dla których ma obowiązywać dany selektor: all aural braille embossed handheld print projection screen tty tv Dla wszystkich urządzeń. Dla syntezatorów mowy i dźwięku. Dla urządzeń którymi posługują się niewidomi w celu przeglądania stron internetowych. Dla drukarki breilla. Dla urządzeń ręcznych bezprzewodowych. Dla drukarek / materiałów drukowanych. Dla projektorów ściennych. Dla komputerów z ekranem. Dla terminali z ograniczonymi możliwościami wyświetlania. Dla telewizorów. Przykładowo możemy spróbować stworzyć selektor który będzie zmieniał kolor tła dla konkretnego urządzenia: <style> @media screen { div { background-color:red; } } </style> Można również przygotować osobne pliki CSS dla każdego typu urządzenia i linkować je do głównej strony posługując się atrybutem media w znaczniku <link>: 10

crossorigin="anonymous"> Potrzebne są również biblioteki JavaScript samego Bootstrapa oraz biblioteki jquery: <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> Druga wersja pozwala na przyspieszenie ładowania strony ponieważ obciążamy nasz własny serwer, a po drugie możliwe że już odwiedzaliśmy stronę która korzysta z biblioteki Bootstrap i odpowiednie pliki mamy już w pamięci cache naszej przeglądarki. Przykładowy szablon strony wygląda następująco: <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap 101 Template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> </head> <body> <h1>hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> </body> </html> b) Struktura siatki w Bootstrap: Biblioteka Bootstrap ma ułatwiać tworzenia responsywnych ale stron internetowych, które będą wyświetlać się na dowolnym urządzeniu (PC, smartphone, tv etc). Dla realizacji tego celu Bootstrap wprowadza system tzw. Gridu (siatki) która dzieli obszar okna przeglądarki na 12 kolumn i dowolną ilość wierszy. Dzięki temu jest możliwe stworzenie czterech niezależnych widoków na najpopularniejsze szerokości ekranu. Do tego celu wykorzystywana jest klasa podstawowa container. Ma ona cztery możliwości dopasowania się do urządzenia: - Dla szerokości ekranu poniżej 768px, klasa container ustawia automatyczną szerokość dla elementu blokowego. - Dla szerokości powyżej 768px, klasa container ustawia 750px dla elementu blokowego. 12

- Dla szerokości powyżej 992px, klasa container ustawia 970px dla elementu blokowego. - Dla szerokości powyżej 1200 px, class container ustawia kontener na 1170px dla elementu blokowego. Podstawowy element na stronie klasy container powinien wyglądać następująco: <div class="container"> Treść strony </div> (Proszę za pomocą narzędzie Developerskiego wbudowanego w przeglądarkę sprawdzić czy faktycznie przedstawione wartości szerokości elementu blokowego są prawdziwe). Wróćmy do siatki Booststrap: system ten składa się z wierszy i kolumn w których umieszczane są poszczególne elementy strony. Wiersz pełni rolę lokalizatora poziomego elementów na stronie i powinien być umieszczony w następujący sposób w kontenerze: <div class="container"> <div class="row"> Treść strony </div> </div> Natomiast jak już wspomniano Bootstrap dzieli dostępną przestrzeń kontenera w ramach jednego wiersza na 12 kolumn. Po przekroczeniu tej liczby na wiersz kolejna kolumna przejdzie do nowej linii. Dzięki już wspomnianym sztywnemu podziałowi na poszczególne dostępne szerokości ekranu Bootstrap udostępnia 4 rodzaje kolumn: - Komputery PC (duże ekrany > 1200 px, dla tego typu urządzeń mamy dostępną klasę: col-l-*, gdzie zamiast gwiazdki możemy wstawić liczbę od 1-12, która oznacza liczbę kolumn. Kolumny te mają zadaną szerokość dla ekranów powyżej 1200 px. Natomiast jeśli szerokość będzie mniejsza to kolumny ustawią się jedna pod drugą. Należy jednak pamiętać, że w żadnym wypadku nie należy przekroczyć w sumie liczby 12. Tzn. że możemy mieć na stronie np. 1 kolumnę o szerokości 6 jednostek oraz 3 kolumny o szerokości 2 jednostki. W sumie jest to 12 jednostek. Przykładowo: <div class="container"> <div class="row"> 13

</div> <div class="row"> <div class="col-lg-6">.col-lg-6</div> <div class="col-lg-2">.col-lg-2</div> <div class="col-lg-2">.col-lg-2</div> <div class="col-lg-2">.col-lg-2</div> </div> </div> - Laptopy powyżej 992px: klasa col-md-* zasada jest ta sama co poprzednio (tutaj plusem jest to że ta klasa będzie działać również na PC). - Tablet powyżej 768px: klasa col-sm-*. - Smartphony poniżej 768px: klasa col-xs-*. Istotnym elementem systemu siatki jest możliwość przesuwania kolumn przez wprowadzenie tzw. Offsetu. Podobnie jak poprzednio dostępna jest klasa która przesuwa daną kolumnę o żądaną jednostkę (w ilości kolumn) dla zadanej szerokości ekranu: col-?-offset-*, gdzie? oznacza wybraną szerokość ekrany (lg, md, sm, xs), a gwiazdka liczbę kolumn o ile ma zostać przesunięta dana kolumna. Przykład: <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 +.col-md-offset-4</div> </div> Przesuwamy druga kolumnę w stosunku do pierwszej o 4 jednostki, pamiętając cały czas że suma nie może przekroczyć 12. Wiersze i kolumny można zagnieżdżać. Należy przy tym pamiętać, że każdy nowy zagnieżdżony wiersz znów ma dostępne 12 kolumn które możemy podzielić i zagnieżdżać. Więcej informacji na temat siatki dostępnej jest w dokumentacji Bootstrap: http://getbootstrap.com/examples/grid/ Zadanie 1. Prosze stworzyć podstawowy szablon strony w Bootsrap i przetestować system siatki na wszystkie rozdzielczości. 14

3) Twitter Bootstrap - przykłady elementów graficznych - Wyrównanie tekstu w paragrafie: <p class="text-left">do lewej.</p> <p class="text-center">do środka.</p> <p class="text-right">do prawej</p> <p class="text-justify">tekst wyjustowany</p> - Przypis w tekście: <p> <abbr title="(zjawisko fotoelektryczne, fotoefekt, fotoemisja)"> Efekt fotoelektryczny </abbr> zjawisko fizyczne polegające na emisji elektronów z powierzchni przedmiotu, zwane również precyzyjniej zjawiskiem fotoelektrycznym zewnętrznym dla odróżnienia od wewnętrznego. </p> - Cytowanie w tekście: <blockquote> <p> </p> Efekt fotoelektryczny - zjawisko fizyczne polegające na emisji elektronów z powierzchni przedmiotu, zwane również precyzyjniej zjawiskiem fotoelektrycznym zewnętrznym dla odróżnienia od wewnętrznego. </blockquote> 15