1 BLOK DOKUMENTU Polecenie div (blok, sekcja) odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach pozycjonowanych i formatowanych za pomocą kaskadowych arkuszy stylów oparte są nowoczesne układy stron (ang. LAYOUTY). Ćwiczenie 1.1. Rozpakuj archiwum wskazane przez prowadzącego div-strona-cwiczenia i wykonaj na nim następujące polecenia: a. Przeanalizuj zawartość kodu źródłowego pliku index.html b. Dołącz do pliku index.html plik ze stylem (style.css), znajdujący się w rozpakowanym katalogu <link rel= stylesheet " type= "text/css" href= "style.css /> c. Analiza pliku style.css pod kątem zmiany wyświetlania w przeglądarce pliku index.html Identyfikator - polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (id), czyli występuje tylko raz w drzewie dokumentu selektor#identyfikator { cecha: wartość id przypisany do selektora, np. div#naglowek #identyfikator { cecha: wartość identyfikator uniwersalny,. żeby na stronie odwołać się do identyfikatora należy obok selektora [czyli wewnątrz tagu] wpisać wg schematu: <div id="naglowek"></div> <div id="stopka"></div> d. Skopiuj do pliku style.css poniższy fragment kodu. Analiza skopiowanego kodu pod kątem zmian w wyświetlaniu pliku index.html ul {list-style: none; margin: 0; padding: 0; border: none; font-size:16px li {border-bottom: 1px solid #123456; margin: 0; li a {display: block; padding: 10px 10px 5px 25px; font-weight : normal; color: #123456; text-decoration: none; li a:hover {border-right: 5px solid #3D021C; border-left: 5px solid #3D021C; color: #fff; font-weight:bold; background:#123456 Selektor połączony (czasami nazywany selektorem kontekstowym) składa się z dwóch lub więcej rozdzielonych selektorów prostych. Poniżej mamy prosty przykład selektora połączonego: div p { font-weight:bold;
Powyższa reguła znajdzie zastosowanie do wszystkich elementów p które są potomkami elementu div. 2 SEKCJE DOKUMENTU HTML5 W HTML 5 polecenie div utraciło jednak część swoich funkcji, gdyż autorzy specyfikacji postanowili wydzielić specjalną grupę poleceń - header, footer, nav, section, article, hgroup, aside, które tworzą szkielet strony, natomiast poleceniu div pozostawili uzupełniające zadanie tworzenia pozostałych bloków elementów. Większy tekst, jak artykuł (article), można podzielić na fragmenty, wyróżniając nagłówek header, w którym umieszczamy ogólne informacje, jak tytuł, nazwisko autora, wyszukiwarkę itp. Blok nav zawiera z kolei elementy nawigacyjne strony. Główną część tekstu możemy umiescić w jednej czy kilku (nawet wielu) blokach section. Blok aside zawiera poboczne, uzupełniające informacje (o charakterze przypisu do głównej części). Blok footer mieści w sobie informacje umieszczane zwykle w stopce, jak adres, kontakt itp. W HTML 4 stosowano często zastępcze oznaczenia o charakterze semantycznym, nadając blokom div identyfikatory precyzujące ich rolę, np. id=header. W HTML 5 mamy już do dyspozycji dedykowane bloki, a rola div ogranicza się do tworzenia wyizolowanych bloków z treścią. 3 POZYCJONOWANIE ELEMENTÓW Gdy już poznaliśmy ogólne zasady budowy elementów, możemy skupić się na sposobach ich rozmieszczania na stronie. 3.1 RODZAJE ELEMENTÓW Elementy z punktu widzenia CSS 2.1 dzielą się na blokowe i liniowe. Ich rodzaje określane są słowami kluczowymi wartości DISPLAY.
Elementy blokowe są domyślnie formatowane jako prostokątny obszar, umieszczony w linii jako jedyny inne elementy mogą znajdować się poniżej lub powyżej niego. W celu zdefiniowania elementu blokowego należy w arkuszu stylów umieścić deklarację postaci display: block Element liniowy jest z kolei formatowany na podobieństwo tekstu, co oznacza, że może sąsiadować z innymi elementami oraz może być przenoszony do kolejnej linii poziomej. Elementy liniowe mają atrybut display: inline 3.2 RODZAJE POZYCJONOWANIA Gdy określimy typ elementu, powinniśmy zdefiniować jego pozycję w stosunku do innych obiektów. W tym celu stosujemy właściwości top, right, bottom i left wraz z określonymi jednostkami (np. top: 100px). Należy jednak przy tym pamiętać, że w CSS 2.1 stosuje się dwie ogólne reguły pozycjonowania bloków: pozycjonowanie bezwzględne i względne. Pozycjonowanie bezwzględne (absolutne) określa pozycję bloku w stosunku do jego elementu nadrzędnego (wstępnego), niezależnie od pozycji innych elementów mu towarzyszących. W celu użycia takiego sposobu formatowania po właściwości position umieszcza się jako wartość słowo kluczowe absolute. Dzięki temu deklaracja div {position: absolute, left:20px umieści blok w odległości 20 pikseli od lewej krawędzi jego bloku-rodzica, i to niezależnie od pozycji ewentualnych innych bloków na tym samym poziomie zagnieżdżenia. Pozycjonowanie względne (relative) tutaj podana odległość będzie się odnosiła do elementów otaczających dany blok w strukturze dokumentu. Oznacza to, że deklaracja div {position: relative, left:20px umieści blok w odległości 20 px od krawędzi elementu poprzedzającego go w obrębie dokumentu (np. innego bloku). Pozycjonowanie ustalone - deklaracja position: fixed pozwala na określenie pozycji elementu w oknie przeglądarki z pominięciem danych dotyczących pozycji innych bloków. Taki element będzie znajdował się w stałym, z góry określonym miejscu, także podczas przewijania zawartości strony. 3.3 OPŁYWANIE Niezwykle przydatną w konstruowaniu wyglądu strony właściwością arkusza stylów jest tzw. opływanie. Pozwala ono zdefiniować sposób, w jaki mają zachowywać się sąsiadujące ze sobą elementy. Stosując właściwość FLOAT (wraz ze słowami kluczowymi LEFT lub RIGHT), możemy spowodować, że element "wyłamie się" z tradycyjnej struktury dokumentu (X)HTML i "popłynie" do lewej lub prawej jego krawędzi. Pozostałe elementy dokumentu będą go zaś otaczały wzdłuż jego krawędzi. Nawet w wypadku elementu blokowego, który zgodnie z zasadami powinien rezerwować dla siebie całą linię, będziemy mieli do czynienia z "opływaniem go" przez inne elementy. Ta właściwość CSS jest szczególnie przydatna do umieszczania ilustracji w tekście oraz rozmieszczania zawartości złożonej z kilku kolumn. Jeśli chcemy w pewnym momencie zrezygnować z opływania, np. spowodować, żeby ilustrację otaczał tylko pierwszy w kolejności akapit tekstu, lecz już nie następne, powinniśmy użyć deklaracji clear: left, clear: right bądź clear: both. Określa ona, która strona elementu powinna pozostać "czysta", a więc wyłącza dla niej opływanie. Na zakończenie należy wspomnieć, że jako wartości właściwości float i clear możemy także użyć słowa kluczowego none, które w pierwszym wypadku wyłącza opływanie dla elementu, w drugim zaś likwiduje przenoszenie kolejnego elementu do następnej linii. 3.4 SORTOWANIE STOSU Jeśli w wyniku użycia określonych parametrów pozycjonowania elementy nachodzą na siebie, dla regulowania kolejności tak powstałego "stosu" możemy użyć właściwości Z-INDEX wraz z określoną wartością liczbową. Im wyższa wartość, tym w wyższej warstwie będzie wyświetlony element. I tak dla trzech obrazków, z których pierwszy będzie miał definicję Z-INDEX: 2, drugi Z-INDEX: 1, a trzeci Z-INDEX: 3, kolejność ich wyświetlenia będzie wyglądała następująco: trzeci będzie nakładał się na pierwszy, który z kolei przykryje drugi.
3.5 NADMIAR TREŚCI Może się zdarzyć, że treść zawarta w elemencie będzie przekraczała jego ustalone wymiary. W takim przypadku, jeśli nie została określona wysokość elementu, zostanie on "rozciągnięty", by zawrzeć w sobie całą nadmiarową treść. Jeżeli jednak będzie to niemożliwe, możemy określić, jak ma się zachować element nadrzędny. Służy do tego właściwość overflow wraz z określającymi ją słowami kluczowymi: VISIBLE, hidden, scroll i auto. W przypadku zastosowania deklaracji overflow: visible zawartość elementu "wypłynie" poza jego ustalone wymiary, zależnie od przeglądarki nakładając się lub nie na inne obiekty. Deklaracja overflow: hidden spowoduje przycięcie zawartości elementu do jego wymiarów jej reszta będzie po prostu niewidoczna dla użytkownika. Dla atrybutu overflow:scroll przeglądarka utworzy domyślne paski przewijania, dzięki którym będzie można obejrzeć całość zawartości elementu, słowo kluczowe auto w większości przypadków spowoduje zaś utworzenie paska przewijania, ale tylko jeśli rzeczywiście zbyt duża ilość zawartości będzie tego wymagała. 3.6 PRZYCINANIE W przypadku elementów pozycjonowanych bezwzględnie ( position: absolute) możemy przyciąć zawartość elementu do określonych wymiarów przy użyciu właściwości clip. Pozwala ona, poprzez umieszczenie w charakterze wartości słowa kluczowego rect i odległości od kolejno góry, prawej strony, dołu i lewej strony elementu, zdefiniować wymiary prostokątnej "ramki kadru", poza którą zawartość elementu będzie niewidoczna. Zatem np. deklaracja img {position: absolute; top: 0px; left: 0px; clip: rect(20px, 20px, 20px, 20px) spowoduje umieszczenie obrazu w lewym górnym krańcu elementu nadrzędnego i przycięcie go z każdej strony o 20 pikseli. 3.7 WIDOCZNOŚĆ Należy jeszcze wspomnieć o możliwości kontroli widzialności elementów, jaką dają twórcy arkuszy stylów. Przy użyciu właściwości visibility z wartościami visible lub hidden można element ukryć lub uczynić widocznym. Inaczej niż w przypadku omówionej już deklaracji display: none, element z właściwością visibility: hidden będzie wciąż wpływał na układ dokumentu. Oznacza to, że jego miejsce zajmie pusty obszar, podczas gdy wyłączenie wyświetlania (właśnie display: none) spowoduje zawsze reorganizację innych elementów, tak jakby rzeczywiście obiekt nie występował w strukturze dokumentu. 4 GALERIA OBRAZÓW http://visuallightbox.com/pl/ Ćwiczenie 5 FORMULARZE Podstawowe ramy formularza wyznacza znacznik <form>. Znacznik ten posiada kilka atrybutów których można użyć. Jednym z nich jest atrybut action - to atrybut obowiązkowy, który określa gdzie mają zostać wysłane dane z formularza. Jego wartością może być dowolny adres URL. Zazwyczaj wstawia się tu adres rozpoczynający się od http:// lub https://, wymaga to jednak posiadania skryptu który uruchomi się na serwerze i przetworzy przesłane dane (np. skrypt napisany w PHP). Jeżeli nie masz możliwości skorzystania z takiego skryptu, możesz skorzystać z możliwości wysłania zawartości formularza na adres email, podając swój adres email w formacie mailto:ktos@gdzies.com.pl.
Drugim atrybutem który warto zawsze ustawiać, jest method - może on przyjąć dwie wartości: get albo post. W przypadku gdy chcesz wysłać dane z formularza na swój adres email, użyj post (get nie działa poprawnie w takim wypadku - w emailu nic nie będzie). Jeżeli natomiast dane chcesz wysłać do skryptu na serwerze, możesz użyć dowolnej z tych dwóch wartości. Zazwyczaj jednak stosuje się też post. Sposób kodowania danych z formularza można określić za pomocą dodatkowego atrybutu enctype. Aby zawartość wysyłanego maila była czytelna, należy mu przypisać wartość text/plain, co w wolnym tłumaczeniu oznacza "czysty tekst". Po jego dodaniu, szkielet formularza będzie wyglądał następująco: <form action="ktos@gdzies.com.pl" method="post" enctype="text/plain"> <div> Tutaj będzie zawartość formularza </div> </form> 5.1 KONTROLKI FORMULARZA Pole tekstowe text <input type="text" name="imie"> <input type="text" name="imie" value="daniel"> <input type="text" name="kod_pocztowy" maxlength="6"> Wielowierszowe pole tekstowe - textarea <textarea name="tresc" rows="5" cols="50">fragment tekstu</textarea> Pole do wpisywania hasła - password <input type="password" name="haslo" value="tajnehaslo"> Pole jednokrotnego wyboru - radio <input type="radio" name="odpowiedz" value="tak">tak<br> <input type="radio" name="odpowiedz" value="nie">nie<br> <input type="radio" name="odpowiedz" value="niewiem">nie wiem Czasami możesz chcieć aby jeden z przycisków był domyślnie zaznaczony - do tego służy atrybut checked: <input type="radio" name="odpowiedz" value="tak" checked>tak<br> <input type="radio" name="odpowiedz" value="nie">nie<br> <input type="radio" name="odpowiedz" value="niewiem">nie wiem Pole wielokrotnego wyboru - checkbox <input type="checkbox" name="zainteresowania" value="sport">sport<br> <input type="checkbox" name="zainteresowania" value="ksiazki">książki<br> <input type="checkbox" name="zainteresowania" value="komputery" checked>komputery Pole listy i listy rozwijalnej - select <select name="jezyk" size="1">
<option>polski</option> <option>angielski</option> <option>niemiecki</option> <option>francuski</option> Na liście rozwijalnej (combo) domyślnie wybrany jest pierwszy element. Jeżeli chcesz aby domyślnie nic nie było wybrane, dodaj tam na początku pusty element. <select name="jezyk" size="3"> <option>polski</option> <option>angielski</option> <option>niemiecki</option> <option>francuski</option> <select name="jezyk" size="3"> <option value="pl">polski</option> <option value="en">angielski</option> <option value="de">niemiecki</option> <option value="fr">francuski</option> W polu listy (listbox) można domyślnie zaznaczyć tylko jeden element. Możesz to zmienić poprzez dodanie do znacznika <select> atrybutu multiple. Atrybut ten nie wymaga podania żadnej wartości. Po jego użyciu, będzie możliwe zaznaczenie większej ilości elementów poprzez klikanie na nich z naciśniętym klawiszem Control na klawiaturze. <select name="jezyk" size="3" multiple> <option>polski</option> <option>angielski</option> <option>niemiecki</option> <option>francuski</option> Przycisk wysłania formularza - submit <input type="submit" name="wyslij" value="wyślij"> Przycisk czyszczenia formularza - reset <input type="reset" value="wyczyść formularz"> Oprócz wymienionych powyżej znaczników, jest jeszcze kilka innych które przydają się podczas konstrukcji formularzy. Pierwszym z nich jest znacznik <fieldset>, który wraz ze znacznikiem <legend> pozwala tworzyć ramki z tytułem (znaczniki te były opisywane w lekcji opisującej Formatowanie bloków tekstu). <fieldset><legend>wybierz odpowiedź</legend><br> <input type="radio" name="odpowiedz" value="tak">tak<br> <input type="radio" name="odpowiedz" value="nie">nie<br> <input type="radio" name="odpowiedz" value="niewiem">nie wiem </fieldset>
5.2 NOWE TYPY PÓL W html5 udostępniono nam aż 13 nowych rodzajów pól. 1. type= search pole służące do wyszukiwania treści, 2. type= number pole akceptujące jedynie wartości liczbowe, 3. type= range suwak rangi, 4. type= color pole służące do pobierania koloru, 5. type= tel pole służące do wprowadzania telefonu, 6. type= url pole do wprowadzania adresu url, 7. type= email pole służące do wprowadzania emaila, 8. type= date pole do wprowadzania/wybierania daty, 9. type= month pole do wprowadzania/wybierania miesiąca, 10. type= week pole do wprowadzania/wybierania miesiąca, 11. type= time poel do wprowadzania/wybierania czasu, 12. type= datetime pole do wprowadzania/wybierania daty i czasu, 13. type= datetime-local pole do wprowadzania czasu lokalnego