2. MATERIAŁ NAUCZANIA

Transkrypt

1 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów oraz wstawiania plików multimedialnych. 2. MATERIAŁ NAUCZANIA 2.1. Wstawianie obrazów Obrazy na stronie umieszczamy używając elementu HTML <img>. Jest to element pusty, tzn. nie posiada znacznika zamykającego. W elemencie <img> należy określić następujące wartości: - src atryut informuje, gdzie można znaleźć plik obrazu, zazwyczaj jest to względny adres URL, - alt atrybut zawiera tekst alternatywny stanowiący opis obrazu, który zostanie wyświetlony na stronie gdy obraz nie będzie widoczny. W celu określenia wymiarów obrazu należy wykorzystać atrybuty width - szerokość obrazu wyrażana w pikselach, heigth- wysokość obrazu wyrażana w pikselach. Wymiary obrazu można podać w CSS i rozwiązanie to stanowi coraz bardziej popularną praktykę. Zasady tworzenia/wstawiania obrazów: - obrazy należy zapisać w odpowiednim formacie: zazwyczaj w witrynach WWW używa się formatów JPEG, GIF i PNG, - przy zapisywaniu obrazów przeznaczonych do użycia na stronie WWW należy zadbać, by ich wymiary odpowiadały szerokości i wysokości danego obrazu wyświetlonego na stronie; jeśli rzeczywiste wymiary obrazu będą mniejsze od tych używanych na stronie, zostanie on rozciągnięty i zniekształcony, z kolei jeśli obraz będzie większy, niż podano, przyczyni się to do wydłużenia czasu wyświetlania strony. - przy tworzenie obrazów należy używać odpowiedniej rozdzielczości, utworzenie obrazów o wyższej rozdzielczości niż rozdzielczość ekranu sprawi, że będą one niepotrzebnie duże, co wydłuży czas wyświetlania strony Pudełka w CSS i ich właściwości W HTML wyróżniamy dwie grupy elementów: elementy blokowe (np. <h1> - <h6>, <p>, <div>) wyglądające tak, jakby rozpoczynały się od nowego wiersza oraz elementy wewnątrzwierszowe (np. <b>, <i>, <img>, <em>, <span>) rozmieszczone jeden za drugim. Każdy element HTML umieszczony jest w niewidocznym pudełku (rys. 2.1). Używając CSS możemy dodawać obramowania do poszczególnych pudełek, określać ich wymiary, dodawać kolor tła, czy też zmieniać wygląd tekstu wyświetlanego wewnątrz pudełka elementu. Rys.2.1. Wydzielone obszary elementów HTML w dokumencie [1]

2 Wymiary pudełka właściwości width, height Domyślnie pudełko elementu jest na tyle duże, aby pomieścić jego zawartość, W celu zmiany jego wymiarów należy użyć właściwości <width> oraz <height>.wartości podajemy w pikselach, wartościach procentowych (wielkość elementu jest obliczana względem wymiarów okna przeglądarki lub gdy element znajduje się wewnątrz innego to względem tego elementu, w którym się znajduje) lub jednostkach em (wielkość elementu jest określana na podstawie wielkości umieszczonego w nim tekstu). Przykład 2.1. Otwórz plik przyklad2_1.html. Obejrzyj w przeglądarce, a następnie dodaj podane poniżej reguły CSS. W celu zapewnienia należytej czytelności witryn, które dostosowują swoją wielkość do okna przeglądarki należy zastosować właściwości min-width (określa minimalną szerokość, jaką może przyjąć pudełko wyświetlone na wąskim ekranie) oraz max-width (określa maksymalną szerokość jaką może przyjąć pudełko na ekranie szerokim). W przypadku gdy chcemy ograniczyć wysokość pudełka należy wykorzystać właściwość minheight lub max-height. W przypadku gdy pudełko elementu jest zbyt małe, by pomieścić całą jego zawartość i zostaje ona wyświetlona poza jego obszarem, to w na stronie w takim przypadku może powstać bałagan. Aby temu zapobiec można użyć właściwości overflow, która określa co przeglądarka ma zrobić, jeśli zawartość elementu nie mieści się w obszarze jego pudełka. Właściwość ta może przyjąć dwie wartości: hidden powoduje ukrycie wszystkich treści, które nie mieszczą się w pudełku lub scroll przeglądarka wyświetli wewnątrz elementu paski przewijania pozwalające wyświetlić początkowo niewidoczną zawartość. Przykład 2.2. Otwórz plik przyklad2_2.html. Dodaj podane reguły CSS. W pierwszej kolejności dodaj reguły podane w punkcie a, obejrzyj zmiany w przeglądarce. Następnie dodaj reguły podane w punkcie b. a) b)

3 Obramowanie, margines oraz wypełnienie pudełka Każde pudełko elementu ma trzy właściwości, które można modyfikować w celu określenia jego wyglądu: obramowanie, margines oraz wypełnienie. obramowanie Element wyglądu Właściwość Opis Szerokość obramowania Styl obramowania Kolor obramowania Zapis skrótowy border-width border-style border-color border - wartość wyrażona w pikselach lub podana przez podanie jednej z predefiniowanych wartości: thin, medium, thick, - poszczególne krawędzie obramowania: border-top-width border-right-width border-bottom-width border-left-width - można określić odrębne szerokości dla poszczególnych krawędzi (wartości są podawane w kolejności zgodnej z ruchem wskazówek zegara, począwszy od krawędzi górnej): border-width:2px 1px 1px 2px - właściwość może przyjmować wartości: solid pojedyncza linia ciągła, dotted seria kwadratowych punktów, dashed seria krótkich kresek, double - podwójna linia ciągła, groove obramowanie wydaje się wklęsłe, ridge obramowanie wydaje się wypukłe, inset sprawia wrażenia jakby element był zagłębiony w stronie, outset sprawia wrażenie jakby element był wypukły, hidden/none obramowanie nie jest widoczne - style poszczególnych krawędzi: border-top-style i itp. - określa się używając wartości RGB, kodów szesnastkowych lub predefiniowanych, - kolory poszczególnych krawędzi: border-top-color i itp. - pozwala określać szerokość, styl oraz kolor obramowania w jednym miejscu (wartości powinny być podawane w wymienionej kolejności)

4 wypełnienie Odstęp pomiędzy obramowaniem pudełka, a jego zawartością padding - pozwala określić wielkość obszaru pomiędzy zawartością elementu, a jego obramowaniem - wartość jest podawana zazwyczaj w pikselach (można także podać w procentach lub w jednostkach em), margines Obszar na zewnątrz obramowania elementu margin Wyśrodkowanie zawartości - określa wielkość odstępu pomiędzy pudełkami elementów. - najczęściej określana w pikselach (można także podać w procentach lub w jednostkach em), - jeśli pudełko jednego elementu znajduje się powyżej pudełka innego, to oba marginesy są zastępowane jednym większym z nich, - istnieje możliwość określania wielkości marginesu osobno dla każdej krawędzi: margin-top i itp., - można użyć zapisu skrótowego (marginesy podawane w kolejności: górny, prawy, dolny, lewy): margin: 1px 2px3 px 3px W celu wyśrodkowania pudełka elementu na stronie (lub wewnątrz innego elementu, w którym jest on umieszczony) należy właściwościom margin-left oraz margin-righht przypisać wartość auto. Aby wyśrodkować pudełko na stronie, trzeba określić jego szerokość poprzez podanie wartości właściwości width (w przeciwnym razie element zajmie całą dostępną szerokość strony) Zmiany elementów wewnątrzwierszowych na blokowe i odwrotnie Właściwość display pozwala zmieniać elementy wewnątrzwierszowe na blokowe i na odwrót. Można jej także używać do ukrywania elementów stron. Właściwość może przyjmować wartości: - inline element blokowy zostanie potraktowany przez przeglądarkę jako element wewnątrzwierszowy, - block element wewnątrzwierszowy zostanie wyświetlony przez przeglądarkę jako element blokowy, - inline-block element blokowy zostanie rozmieszczony na stronie w sposób charakterystyczny dla elementów wewnątrzwierszowych i zachowa przy tym pozostałe cechy charakterystyczne dla elementów blokowych, - none ukrycie elementu na stronie. Przykład 2.3. Przepisz podany kod HTML, pobierz obrazy logo2.gif oraz ksiazka.jpg i zapisz w tym samym katalogu co plik HTML. Dokument zapisz pod nazwą moja_ksiegarnia.html w swoim katalogu. Obejrzyj w przeglądarce. Następnie dodawaj sukcesywnie podane reguły CSS. Możesz zastosować style wewnętrzne lub zewnętrzne. [1]

5 Cała strona jest umieszczona w elemencie <div id= strona >. Element ten wyśrodkowano na stronie za pomocą właściwości margin, która wielkość prawego i lewego marginesu określa jako auto. Identycznie wyśrodkowano jest logo i inne treści umieszczone na stronie. Elementy nawigacyjne zostały utworzone za pomocą listy wypunktowanej. W celu wyraźnego wyróżnienia menu nawigacyjnego określono postać górnej i dolnej krawędzi pudełka. W poszczególnych elementach listy podano wartość display, przez co są one wyświetlane jako elementy wewnątrzwierszowe (a nie blokowe). Dzięki temu poszczególne łącza tworzące elementy nawigacyjne są umieszczone obok siebie w poziomie. Odpowiednie odstępy zapewnia użycie właściwości padding. Szerokość elementów na stronie określono przy użyciu właściwości width elementu <ul> wynoszącą 670px, a elementy <p> mają szerokość 710px. W efekcie jednak posiadają identyczną szerokość, gdyż w elemencie <ul> została użyta właściwość padding zapewniająca odstęp pomiędzy obramowaniem, a jego zawartością. wypełnienie, obramowania i marginesy są dodawane do deklarowanej szerokości elementu. Selektor hover określa wygląd każdego podanego typu elementu, na który najedziemy kursorem myszy.

6 2.3. Formatowanie obrazów za pomocą CSS Kontrola rozmiaru oraz wyrównania obrazów za pomocą CSS sprawia, że wszystkie reguły określające postać strony są umieszczone w arkuszu stylów poza kodem HTML. wymiary obrazów właściwości width oraz height; na stronach często prezentowane są zdjęcia w kilku często stosowanych wymiarach: małe w układzie pionowym (220x360) oraz poziomym (330x210), duże zdjęcie do artykułu (620x400); jeśli w witrynie konsekwentnie będą stosowane obrazy w pewnych wymiarach to właśnie wtedy można je podawać w CSS, a nie w kodzie HTML; Przykład 2.4. Utwórz stronę o nazwie obrazy.html i dodaj do niej zdjęcie zaba.jpg. Sformatuj zdjęcie używając CSS dla trzech różnych wymiarów 620x400 (duze), 400x250 (srednie) i 150x100(male). Na stronie mają zostać wyświetlone trzy zdjęcie o różnych wymiarach. Poniżej przykładowy kod HTML oraz CSS: <img src="zaba.jpg" class="duze" alt="żaba"/> img.duze{ width: 640px; heigth: 400px;}

7 wyrównanie obrazów właściwość float; mamy do wybory dwie metody: - właściwość float dodajemy do klasy stworzonej w celu określenia wymiarów obrazu, - tworzone są nowe klasy takich nazwach jak align-left lub elign-right, których zadaniem jest wyrównanie elementu do lewej lub prawej strony. wyśrodkowanie obrazów - domyślnie obrazy są elementami wewnątrzwierszowymi, co oznacza to, że są one rozmieszczone wewnątrz otaczającego je tekstu. W celu wyśrodkowania należy obraz przekształcić w element blokowy za pomocą właściwości display z wartością block. Następnie obraz można wyśrodkować za pomocą jednej z dwóch metod: - w elementach zawierających obraz można zastosować właściwość text-align z wartością center, - w samym elemencie obrazu można użyć właściwości margin, by przypisać prawemu i lewemu marginesowi wartość auto. Można również stworzyć klasę umożlwiającą wyśrodkowanie dowolnego elementu i stosować ją analogicznie jak wcześniej klasy odnoszące się do wymiarów obrazu. Przykład 2.5. Zmodyfikuj stronę obrazy.html, dodając przy każdym z obrazów jednakowy tekst (podany poniżej), a następnie zastosuj style CSS do wyrównania poszczególnych obrazów: duzy wyśrodkowany, sredni wyrównany do lewej, maly wyrównany do prawej. Poniżej przykładowy kod HTML oraz reguły CSS oraz wygląd strony po sformatowaniu. Tekst do strony: Żaba wodna (Rana esculenta). Grzbietowa strona ciała żaby wodnej ma kolor trawiastozielony, środkiem przebiega jasna linia. Brzuszna strona ciała jest biaława, zazwyczaj szaro plamista. Gatunek ten wykazuje typowo dzienną aktywność. W okresie godowym u samców rozwijają się modzele godowe czyli czarne zgrubienia na palcach przednich kończyn oraz parzyste rezonatory - duże, błoniaste, szare worki głosowe. Gody u tego gatunku żaby przypadają na maj i czerwiec. Przy ciepłej pogodzie samce chóralnie "śpiewają", zarówno w dzień, jak i w nocy. <img src="zaba.jpg" class="align-center duze" alt="żaba"/> <img src="zaba.jpg" class="align-left srednie" alt="żaba"/> <img src="zaba.jpg" class=" align-right male" alt="żaba"/> img.align-center{ display: block; margin: 0px auto;} img.align-left{ float:left; margin-right: 10px;} img.align-right{ float: right; margin-left: 10px;}

8 wystawianie obrazu jako tła właściwość background-image pozwala umieścić dowolny obraz w tle dowolnego element HTML; domyślnie obraz jest powtarzany tak aby wypełnił cały obszar pudełka. Przykład 2.6. Utwórz nowy dokument HTML o nazwie tlo.html. Na stornie umieść tekst z przykładu 2.5, a jako tło strony ustaw obraz zaba_tlo.jpg. Tekst: Żaba wodna (Rana esculenta) ustaw jako nagłówek strony. body {background-image: url("zaba_tlo.jpg");} powtarzanie obrazu tła właściwość background-repeat z następującymi wartościami: repeat obraz powtarzany zarówno w pionie, jak i w poziomie, repeat-x obraz powtarzany tylko w poziomie, repeat-y obraz powtarzany tylko w pionie, no-repeat obraz wyświetlony tylko raz. Natomiast właściwość background-attachment określa czy obraz tła powinien zostać w tym samym miejscu, czy ma się przesuwać, gdy użytkownik będzie przewijał stronę i może przyjmować wartości: fixed obraz pozostaje w tym samym położeniu, scroll obraz jest przesuwany podczas przewijania strony; położenie obrazu tła właściwość background-position określa, w którym miejscu okna przeglądarki należy umieścić obraz i może przyjąć kilka wartości: np. left top, left center, left bottom, center top itp. Jeżeli podamy tylko jedną wartość to duga przyjemnie wartość domyślną center. zapis skrótowy background umożliwia podanie wartości wszystkich właściwości związanych z tłem, które muszą zostać podane w następującej kolejności (przy czym dowolne można pominąć): backgroind-color, background-iage, background-repeat, background-attachment, background-position; Przykład 2.7. Zmodyfikuj dokument HTML tlo.html, tak aby obrazek tła wyświetlany był w lewym górnym rogu, pozostały ekran miał kolor o kodzie #fbfbffb. Użyj zapisu skrótowego background. 3. LITERATURA 1. Duckett J., HTML i CSS. Zaprojektuj i zbuduj witrynę Helion, Gliwice, Gajda W., HTML5 i CSS3. Praktyczne projekty, Helion, Gliwice, Freeman E., Freeman E., Head First HTML with CSS & XHTML, Helion, Gliwice, Robbins J., Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wydanie IV, Helion, Gliwice, 2013

9 Źródło obrazów do przykładów: