1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów strony oraz podstawami formatowania strony za pomocą kaskadowych arkuszy stylów CSS. Uwaga! Ćwiczenia (przykłady oraz zadania do samodzielnego wykonania) należy wykonać wykorzystując prosty edytor tekstowy (np. Notatnik) oraz dowolną przeglądarkę stron WWW (Firefox, Opera,...). Pliki tworzone podczas ćwiczeń należy zapisywać katalogu D://Projektowanie_aplikacji_internetowych/ Nazwisko_Imie. 2. MATERIAŁ NAUCZANIA 2.1. Identyfikacja i grupowanie elementów Elementy globalne atrybuty id oraz class Atrybuty globalne mogą być stosowane w dowolnych elementach HTML. Atrybut id najczęściej używany jest jako wskaźnik do przypisania unikalnych stylów dla elementu za pomocą wewnętrznych i zewnętrznych kaskadowych arkuszy stylów CSS, lub do manipulowania elementem za pomocą skryptów np. JavaScript. Wartość elementu id powinna zaczynać się od litery lub znaku podkreślinka. Wartość atrybutów id nie mogą się powtarzać w żadnych elementach strony. Może się zdarzyć, że zamiast identyfikować jeden unikalny element na stronie, będziemy chcieli wskazać kilka jej elementów, które mają być traktowane inaczej od pozostałych, np. gdy niektóre akapity będą ważniejsze od pozostałych. Wówczas można skorzystać z atrybutu class. Jego wartość powinna określać klasę, do jakiej należy element. Atrybuty class różnych elementów strony mogą mieć tą samą wartość. <p id= _przykładowy_identyfikator > To jest akapit</p> <p class= klasa1 >Akapit z przypisaną klasą klasa1.</p> <p class= klasa1 >Akapit z przypisaną klasą klasa1.</p> <p class= klasa1 klasa2 >Akapit z przypisanymi klasami klasa1 oraz klasa2 </p> Kolejność wpisywania nazw klas w wartości atrybutu class= nie ma znaczenia na ostateczny sposób formatowania elementu. Jeżeli kilka przypisanych klas odnosi się do tej samej własności, o wyniku decyduje zasada kaskadowości (patrz punkt 2.2) Grupowanie tekstu i elementów elementy <div> oraz <span> Elementy <span> i <div> są używane do grupowania i strukturyzowania dokumentu. Są ściśle związane z regułami CSS. Zazwyczaj występują z atrybutami id oraz class (w celu określenia przeznaczania danego elementu oraz umożliwienia tworzenia stylów CSS i stosowania ich w elementach posiadających konkretne wartości tych atrybutów. Elementy <div> pozwalają grupować dowolne inne elementy poprzez umieszczanie ich wewnątrz jednego bloku. Przeglądarki wyświetlają zawartość elementów <div> od nowego wiersza, poza tym nie mają one wpływu na prezentację strony. Element <span> jest wewnątrzwierszowym odpowiednikiem elementu <div>. Może być stosowany w celu: - umieszczenia wewnątrz niego fragmentu tekstu, gdy nie ma żadnych innych elementów nadających się di odróżnienia go od pozostałej treści; - grupowania elementów wewnątrzwierszowych.
Najczęstszym powodem stosowania <span> jest chęć kontrolowania wyglądu ich zawartości poprzez użycie CSS. 2.2. Definiowanie kaskadowych arkuszy stylów CSS Kaskadowe arkusze stylów (CSS) pozwalają tworzyć reguły określające wygląd zawartości elementów. Działanie CSS polega na kojarzeniu reguł z elementami HTML. Reguły CSS określają sposób, w jaki ma być wyświetlana zawartość konkretnych elementów. Składają się z dwóch części: selektora i deklaracji. Selektory określają, do jakich elementów odnosi się dana reguła. Deklaracje wskazują, w jaki sposób należy wyświetlać element określony w selektorze. Każda deklaracja składa się z dwóch części: właściwości i wartości (rys.2.1). Definicję stylów możemy dołączyć do dokumentu na dwa sposoby: Rys.2.1. Podstawowe elementy reguł CSS. [1] jako style wewnętrzne reguły CSS umieszczane są w dokumencie HTML poprzez wykorzystanie elementu <style>, jako style zewnętrzne zapisujemy je w oddzielnym pliku z rozszerzeniem.css; tak zdefiniowane style dołączamy do dokumentu HTML stosując element <link> W obydwu przypadkach, informację o stylach umieszczamy w nagłówku strony WWW (Przykład 2.1). 2.3. Formatowanie tekstu W CSS-ie właściwości pozwalające na kontrolę wyglądu tekstu można podzielić na dwie grupy: Właściwości mające wpływ na czcionkę oraz jej wygląd(czyli określające jej krój, czy jest ona pogrubiona, pochylona, czy normlana oraz jej wielkość), Właściwości, które wywierałyby ten sam wpływ na postać tekstu niezależnie od użytej czcionki (do nich można zaliczyć kolor tekstu oraz odległości pomiędzy wyrazami i literami). [1] Tabela 2.1. Właściwości CSS pozwalające na kontrolę wyglądu tekstu Właściwość font-family wybór kroju czcionki Wartości selektor { font-family: rodzaj 1, rodzaj 2, rodzaj 3 } Jako "rodzaj1, rodzaj2, rodzaj3,..." należy podać rodzaje czcionek (jeśli nie będzie dostępny pierwszy, to zostanie wybrany następny). Jeżeli nazwa czcionki składa się z kilku wyrazów, należy ją objąć w znaki cudzysłowu (np. Times New Roman ). Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej: serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"), np.: Times New Roman, Georgia, Garamond, Bodoni, sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial, Verdana, Trebuchet MS, Helvetica, Univers, Futura, monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie), np.: Courier, Courier New, cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie), np. Comic Sans fantasy - czcionka fantazyjna (dekoracyjna), np. Impact Ostatnia (najbardziej zaawansowana) możliwość ustalania kroju czcionki to czcionki osadzone, pozwalająca używać na stronie WWW dowolne czcionki, bez obawy o
font-size określenie wielkości czcionki font-weight - pogrubienie font-style - kursywa font-variant - kapitaliki font zbiera wszystkie właściwości powiązane w jedną regułę niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Możemy do tego celu wykorzystać np. Google Web Fonts, darmową platformę, udostępniającą katalog czcionek ze szczególnym przeznaczeniem do osadzania na stronach internetowych. Wszystkie fonty można używać całkowicie bezpłatnie - nawet na stronach komercyjnych. Aby skorzystać z dowolnej czcionki, dostępnej w katalogu Google Web Fonts, nie trzeba nawet umieszczać na swoim serwerze żadnych plików. Mogą być one pobierane wprost z serwerów Google. Rozmiar tekstu można określić na kilka sposobów: podając konkretną wartość z wykorzystaniem jednej z miar używanych w CSS-ie, np. 1.5em, podając wartość procentową, zmniejszającą lub zwiększającą domyślny lub odziedziczony rozmiar elementu, np. 150% (1.5em = 150%), wykorzystując jedno z bezwzględnych słów kluczowych (xx-small najmniejsza, x-small bardzo mała, small mała, medium średnia, large duża, x-large bardzo duża, xx-large największa) wykorzystując względne słowo kluczowe (larger większa, smaller mniejsza) w celu wyświetlenia tekstu jako większy lub mniejszy od otaczającego go, Pomimo istnienia wszystkich tych opcji jedynymi akceptowalnymi wartościami dla właściwości font-size w nowoczesnym projektowaniu stron internetowych są wielkości podane w em lub w wartościach procentowych (albo ich kombinacje). Obydwie te wartości są miarami względnymi, co oznacza, że bazują na wartościach wielkości czcionki odziedziczonych z właściwościami font-size elementu nadrzędnego. Wartości absolutne: normal - czcionka normalna (podstawowa) bold - czcionka pogrubiona 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji Wartości względne: lighter - czcionka mniej wytłuszczona od odziedziczonej lub przypisanej do znacznika (np. typowo znaczniki <b>...</b> oraz <strong>...</strong> mają przypisaną domyślną wagę "bold"), bolder - czcionka bardziej wytłuszczona Wartości: normal - czcionka normalna (podstawowa), italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique) oblique - również czcionka pochylona (podobna jak poprzednio) Wartości: normal - czcionka normalna (podstawowa) small-caps - kapitaliki Wartość właściwości font to rozdzielona spacjami lista wartości dla wszystkich właściwości dotyczących czcionek, jakie właśnie zostały omówione. W tej właściwości kolejność wartości jest istotna: { font: font-style font-weight font-variant font-size/line-height font-family } Przykład: h1 { font: oblique bold small-caps 1.5em/1.8em Veranda, sansserif; }
Wysokość wiersza tekstu zmienia się za pomocą atrybutu line-height. Definiuje on minimalną odległość pomiędzy bazowymi liniami tekstu. Jego wartością jest jednostka długości, np.: p { line-height: 32px; } lub wielkość względna. W przykładach poniżej wysokość wiersza jest dwa razy większa od wysokości czcionki: p { line-height: 2; } p { line-height: 2em; } p { line-height: 200%; } W celu wyrównania tekstu w poziomie należy zastosować atrybut tekst-align, który przyjmuje wartości: left, right, center, justify. Jeżeli chcemy umieścić linię pod tekstem, nad nim lub linię biegnącą przez środek tekstu, bądź chcemy wyłączyć podkreślenie odnośnika, możemy skorzystać z atrybutu text-decoration, który przyjmuje wartości: underline, overline, line-trough, blink (migający tekst). Gdy do elementu zastosujemy atrybut text-transform zmieniana jest wielkość jego liter, kiedy jest on wyświetlany w przeglądarce. Przyjmowane wartości: none test wyświetlany jak w źródle dokumentu, capitalize zmiana pierwszej litery każdego słowa na wielką, lowercase zmiana wszystkich liter na małe, uppercase zmiana wszystkich liter na wielkie. Zmianę odstępów pomiędzy literami umożliwia atrybut letter-spacing (wartości: miara długości lub normal), natomiast zmiana odstępów pomiędzy wyrazami możliwa jest dzięki zastosowaniu atrybutu word-spacing (wartości: miara długości lub normal). Atrybut text-shadow pozwala na generowanie cienia. Wartość właściwości text-shadow składa się z trzech miar: przesunięcie w poziomie, przesunięcie w pionie oraz opcjonalny promień rozmycia i definicji koloru: h1 {color: darkgreen; text-shadow:.2em,.2em, silver; } Przykład 2.1. Otwórz plik opowiadanie.html i dodaj do dokumentu podane poniżej reguły CSS. Zapisz pod nazwą opowiadanie_wewnetrzne.html, w przypadku dodania wewnętrznych CSS oraz opowiadanie_zewnetrzne.html i zewnetrzne.css w przypadku dołączenie styli zewnętrznych. Wykonaj obydwie opcje. Style wewnętrzne <head> ( ) <style type="text/css"> /*reguły CSS*/ </style> </head> Style zewnętrzne <head> ( ) <link href="zewnetrzne.css" type="text/css" rel="stylesheet"> </head>
2.4. Formatowanie koloru Kolor tekstu zmienia się za pomocą właściwości color. Wartością jest nazwa koloru lub wartość liczbowa opisująca określony kolor RGB. Dla koloru szarego zapis może być następujący: /*nazwa koloru*/ p { color: Gray; } /*kod szesnastkowy*/ p { color: #808080; } /*wartość RGB*/ p { color: rgb(128,128,128; } Wszystkie elementy HTML są traktowane przez CSS, jak gdyby w pudełku. Właściwość backgroundcolor określa kolor jego tła. Wybrany kolor tła można określić identycznie jak w przypadku koloru tekstu. Narzędzia do wyboru kolorów dostępne są w programach do edycji obrazów (np. GIMP, Paint). Wartości RGB są wyświetlane obok przycisków opcji o nazwach R, G i B. Odpowiadająca im wartość szesnastkowa wyświetlana jest w polu tekstowym poprzedzonym znakiem #. Dostępne jest również doskonałe narzędzie do wybierania kolorów znajdujące się na stronie colorschemedesigner.com [1]. W CSS3 została wprowadzona nowa właściwość hsl, jako alternatywny sposób określania kolorów: body{ background-color: hsl(0, 0%, 78%)} Wartości w nawiasie określają wartości: Odcienia odcień wyrażany jest jako miara kąta (0 360 ) Nasycenia nasycenie określa ilość szarości w tle, wyrażane jako wartość procentowa (100% to pełne nasycenie, natomiast 0% odpowiada odcieniowi szarości). Jasności wyrażana jako wartość procentowa (0% oznacza kolor biały, 50% to normalny, 100% oznacza kolor czarny) Właściwość hsla również umożliwia określenie koloru poprzez podanie jego odcienia, nasycenia oraz jasności, dodaje się dodatkowo czwartą wartość reprezentującą nieprzezroczystość wartość Alfa. Wartość Alfa należy do przedziału <0, 1>, wartość 0,5 oznacza 50% nieprzezroczystości, a 0,75 78% nieprzezroczystości. body{ background-color: hsl(0, 0%, 78%, 0,5)} Dostępne jest narzędzie do wybierania kolorów HSLA znajdujące się na stronie hslpicker.com Przykład 2.2. Otwórz plik ph.html i dodaj do dokumentu podane poniżej reguły CSS. Obejrzyj rezultat w przeglądarce, a następnie korzystając z dowolnych narzędzi wymienionych w materiale nauczania dobierz pozostałe odcienie kolorów do skali ph. Zapisz pod nazwą ph.html. [1] body { background-color:silver; color:white; font-family: Arial, Verdana, sans-serif;} h1 { background-color: #ffffff; color:#64645a;} p{ margin:0px;} p.zero { background-color: rgb(238,62,128);} p.jeden { background-color: rgb(244,90,139);} p.siedem { background-color: rgb(0,187,1136);}
p.trzynascie { background-color: rgb(0,149,226);} p.czternascie { background-color: rgb(0,136,221);} 2.5. Selektory CSS Istnieje wiele typów selektorów CSS, które pozwalają na precyzyjne określenie, do jakich elementów odnoszą się poszczególne reguły CSS. Najczęściej stosowane selektory przedstawia tabela 2.2. Tabela 2.2. Wybrane selektory CSS [1] Selektor Znaczenie Przykład Selektor uniwersalny Odnosi się do wszystkich elementów strony *{} Selektor typu Odnosi się do elementów o konkretnej nazwie h1, h2, h3 {} Selektor klasy Selektor identyfikatora Selektor elementu dziecka Selektor elementu potomnego Selektor elementów sąsiadujących bezpośrednio Ogólny selektor elementów sąsiadujących Odnosi się do elementów, których wartość atrybutu class odpowiada wartości podanej za znakiem kropki Odnosi się do elementów, których wartość atrybutu id odpowiada wartości podanej za znakiem # Odnosi się do elementów, które są dziećmi innego, określonego elementu Odnosi się do elementów będących elementami potomnymi innego, określonego elementu Odnosi się do elementu bezpośrednio sąsiadującego z innymi, określonymi elementami Odnosi się do elementu sąsiadującego z innym elementem, choć niekoniecznie bezpośrednio.abc {} Odnosi się do wszystkich elementów, których atrybut class ma wartość abc p.abc{} Odnosi się do elementów <p>, których atrybut class ma wartość abc #xyz {} Odnosi się do elementu, którego atrybut id ma wartość xyz li > a {} Odnosi się do wszystkich elementów <a> umieszczonych bezpośrednio w elementach <li> (lecz nie do innych elementów <a> na stronie) p a {} Odnosi się do dowolnego elementu <a> umieszczonego wewnątrz elementu <p>, nawet jeśli znajduje się on wewnątrz jakiś innych elementów h1 + p {} Odnosi się do pierwszego elementu <p> umieszczonego za elementem <h1> (lecz nie do kolejnych elementów <p>) h1 - p {} Jeśli na stronie są dwa elementy <p> sąsiadujące z elementem <h1>, to reguła odnosi się do obydwu z nich W przypadku gdy w arkuszu znajduje się kilka reguł odnoszących się do tego samego elementu to obowiązują następujące zasady powstawania kaskady reguł: jeśli dwa selektory są identyczne, to pierwszeństwo ma drugi z nich,
jeśli pewien selektor bardziej precyzyjnie niż inne określa elementy, to taka precyzyjniejsza reguła będzie miała pierwszeństwo przed regułami bardziej ogólnymi, za wartością każdej właściwości można umieścić wyrażenie!importnat w celu zaznaczenia, że powinna ona być ważniejsza od innych reguł odnoszących się do tego samego elementu Przykład 2.3. Otwórz plik selektory.html Dodaj podane poniżej reguły CSS. Dodawaj po kolei style do każdego selektora i sprawdzaj w przeglądarce obserwuj zmiany pojawiające się na stronie. * { font-family: Arial, Verdana, sans-serif;} h1{ font-family:"courier New", monospace;} i{ color:green;} i{ color:red;} b{ color:pink} p b{ color:blue!important;} p#intro{ font-size:100%;} p{ font-size: 75%} 2.6. Dziedziczenie właściwości CSS Element HTML może dziedziczyć cechy wyglądu od swoich przodków, rodzica i przekazywać je dalej swoim dzieciom, potomkom. Hierarchię przodek - rodzic - dziecko - potomek ustalamy na podstawie miejsca, w którym znajduje się dany element w kodzie HTML. Dokumenty HTML mają pewną hierarchię (rys. 2.3). Drzewo dokumentu staję się też drzewem genealogicznym, jeśli chodzi o określania związków pomiędzy elementami. Rys. 2.3. Struktura drzewa dokumentu dla przykładowej strony WWW. [3] Wszystkie elementy znajdujące się wewnątrz danego elementu są jego potomkami Element zawarty bezpośrednio wewnątrz innego elementu jest określany mianem dziecka tego elementu. I odwrotnie: element go zawierający jest rodzicem. Wszystkie elementy znajdujące się w hierarchii wyżej od określonego elementu są jego przodkami. Dwa elementy mające tego samego rodzica są rodzeństwem. <body> <div> <p>pierwszy element - p <span>to jest element - span</span></p> </div> <p>drugi element - p</p> </body>
W podanym poniżej listingu wszystkie elementy umieszczone w elemencie <body> są jego potomkami. Element <p> umieszczony w elemencie <div> posiada dwóch przodków, są to elementy <div> oraz <body>. Natomiast element <span> posiada trzech przodków, są to elementy: <p>, <div> oraz <body>. Przykład 2.4. Utwórz dokument HTML zawierający kod podany w ostatnim listingu, a następnie dodaj do niego podane poniżej reguły CSS. Zapisz pod nazwą dziedziczenie.html. Otwórz dokument w przeglądarce i zaobserwuj zmiany jakie zaszły po dodaniu reguł CSS. body { color:red; border:1px solid black;} Element <body> zawiera w sobie właściwość color:red; oraz właściwość border:1px solid black; Właściwość color może być "automatycznie" dziedziczona przez potomków elementu body, czyli przez wszystkie elementy, które znajdują się w nim. Natomiast właściwość border nie może być "automatycznie" dziedziczona. Dlatego od tej pory wszystkie elementy HTML umieszczone w elemencie <body> posiadają czerwony kolor tekstu, natomiast właściwość border, odpowiadająca za obramowanie elementu HTML, została dodana tylko do elementu <body>. Należy pamiętać, że pewne właściwości arkusza stylów są dziedziczone, podczas gdy inne nie. Uogólniając, właściwości związane ze stylizacją tekstu np. rozmiar czcionki, jej kolor czy styl są przekazywane do elementów potomnych. Natomiast właściwości takie jak marginesy, obramowanie, tło i itp., wpływające na zamknięty obszar znajdujący się wokół elementu, zazwyczaj nie są przekazywane. Nadając wartość inherit, możemy "wymusić" dziedziczenie (lecz owe "wymuszenie" zadziała tylko na "dzieciach" danego elementu "rodzica"). Przykład 2.5. Zmień kod HTML z przykładu 2.4 według wzoru podanego poniżej, a następnie uzupełnij o podane poniżej kodu HTML reguły CSS. Zapisz pod nazwą dziedziczenie_nowe.html. Otwórz dokument w przeglądarce i zaobserwuj zmiany jakie zaszły w dokumencie. <body> <div> <p class="dziedzicz">pierwszy element - p <span>to jest element - span</span></p> </div> <p class="dziedzicz">drugi element - p</p> </body> body { color:red; border:1px solid black;}.dziedzicz { border:inherit; margin:15px;} Drugi element <p> posiada obramowanie, które jest takie samo jak obramowanie jego rodzica, czyli elementu <body>, ponieważ do wspomnianego elementu <p> została dodana reguła CSS, za pomocą selektora.dziedzicz, w której to regule CSS użyliśmy wartość inherit wraz z właściwością, która ma zostać odziedziczona przez dany element od elementu rodzica. W naszym wypadku tą właściwością jest właściwość border. Do pierwszego elementu <p> również została dodana wspomniana reguła CSS, za pomocą selektora.dziedzicz, jednak element ten nie odziedziczył właściwości border od swojego rodzica, ponieważ dla rodzica pierwszego elementu <p>, czyli elementu <div>, nie została określona żadna reguła CSS, która zawierałaby w sobie właściwość border.
W momencie gdy dodamy atrybut class wraz z wartością.dziedzicz, do elementu <div>, w naszym przykładzie, to zarówno pierwszy element <p>, jak i jego rodzic, czyli element <div>, odziedziczą taki sam styl obramowanie od elementu <body>. 3. LITERATURA 1. Duckett J., HTML i CSS. Zaprojektuj i zbuduj witrynę www., Helion, Gliwice, 2014 2. Gajda W., HTML5 i CSS3. Praktyczne projekty, Helion, Gliwice, 2013 3. Freeman E., Freeman E., Head First HTML with CSS & XHTML, Helion, Gliwice, 2007 4. Robbins J., Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wydanie IV, Helion, Gliwice, 2013 5. http://www.kurshtml.edu.pl/