M4j1

1
Piotr Gorzelańczyk
Moduł:
Moduł 351203.M4 Tworzenie baz danych i aplikacji
internetowych
Jednostka modułowa:
351203.M4.J1 Tworzenie stron internetowych
Pakiet edukacyjny dla ucznia
Piła 2014

3
Spis treści
1. WPROWADZENIE ....................................................................................... 4
2. WYMAGANIA WSTĘPNE........................................................................... 5
3. CELE KSZTAŁCENIA.................................................................................. 6
4. MATERIAŁ NAUCZANIA........................................................................... 7
4.1. Wprowadzenie do języka HTML ............................................................. 7
4.1.1. Materiał nauczania............................................................................. 7
4.1.2. Pytania sprawdzające....................................................................... 13
4.1.3. Ćwiczenia ........................................................................................ 13
4.1.4. Sprawdzian postępów ...................................................................... 15
4.2. Kaskadowe arkusze stylów (CSS).......................................................... 16
4.2.1. Materiał nauczania........................................................................... 16
4.2.3. Ćwiczenia ........................................................................................ 20
4.3. Edytor stron WWW ............................................................................... 22
4.3.3. Ćwiczenia ........................................................................................ 28
4.4. Grafika i animacje komputerowe ........................................................... 31
4.4.3. Ćwiczenia ........................................................................................ 36
4.5. Obróbka dźwięku i video ....................................................................... 38
4.5.3. Ćwiczenia ........................................................................................ 41
5. SPRAWDZIAN OSIĄGNIĘĆ...................................................................... 43
6. LITERATURA............................................................................................. 46

4
1. WPROWADZENIE
Poradnik będzie Cię wspomagać w przyswajaniu nowej wiedzy
i kształtowaniu umiejętności z zakresu tworzenia stron internetowych.
Zamieszczony materiał nauczania zawiera najważniejsze informacje dotyczące
wymienionych zagadnień i wskazuje tematykę, z jaką powinieneś zapoznać się
poprzez wyszukanie odpowiednich informacji we wskazanej literaturze.
Poradnik nie poprowadzi Cię; za rękę, zawiera jedynie kompendium wiedzy na
temat najważniejszych elementów danej jednostki modułowej. Biorąc pod
uwagę, że z niektórymi omawianymi treściami spotkałeś się już na zajęciach
informatyki w gimnazjum i w szkole ponadgimnazjalnej, zawarte treści w
materiale nauczania traktować powinieneś jako powtórzenie. Należy jednak
pamiętać, że technologia informatyczna rozwija się w zawrotnym tempie, a
zawarte w pakiecie informacje mogą ulec szybkiemu zdezaktualizowaniu.
Istnieje więc konieczność, abyś ukształtował w sobie potrzebę stałego
uzupełniania wiedzy i umiejętności w tym zakresie.
W poradniku będziesz mógł znaleźć następujące informacje ogólne:
• wymagania wstępne określające umiejętności, jakie powinieneś posiadać,
abyś mógł bez problemów rozpocząć pracę z poradnikiem,
• cele kształcenia czyli wykaz umiejętności, jakie opanujesz w wyniku
kształcenia w ramach tej jednostki modułowej,
• materiał nauczania, czyli wiadomości teoretyczne konieczne do
opanowania treści jednostki modułowej,
• zestaw pytań sprawdzających czy opanowałeś już podane treści,
• sprawdzian osiągnięć opracowany w postaci testu, który umożliwi Ci
sprawdzenie Twoich wiadomości i umiejętności opanowanych podczas
realizacji programu danej jednostki modułowej,
• literaturę związaną z programem jednostki modułowej, umożliwiającą
pogłębienie Twojej wiedzy z zakresu programu tej jednostki.

5
2. WYMAGANIA WSTĘPNE
Przystępując do realizacji programu nauczania jednostki modułowej
powinieneś umieć:
• posługiwać się podstawowymi pojęciami z zakresu informatyki,
• obsługiwać system operacyjny komputera na poziomie zaawansowanym,
• wyszukiwać informacje w sieci Internet,
• korzystać z różnych źródeł informacji,
• selekcjonować, dokumentować, porządkować i przechowywać
informacje,
• posługiwać się podstawowymi pojęciami z zakresu dokumentacji
technicznej, a także bezpieczeństwa i higieny pracy,
• posługiwać się językiem angielskim w stopniu podstawowym.

6
3. CELE KSZTAŁCENIA
W wyniku realizacji omawianej jednostki modułowej powinieneś nauczyć
się:
• dobierać oprogramowanie użytkowe do realizacji określonych zadań,
• charakteryzować rodzaje oprogramowania użytkowego,
• korzystać z publikacji elektronicznych,
• przestrzegać zasad zarządzania projektem w trakcie organizacji
i planowania pracy,
• stosować programy komputerowe wspomagające wykonywanie zadań,
• tworzyć strony internetowe za pomocą hipertekstowych języków
znaczników,
• tworzyć i wykorzystywać kaskadowe arkusze stylów (CSS) do opisu
formy prezentacji strony internetowej,
• rozpoznawać funkcje edytorów spełniających założenia WYSIWYG,
• tworzyć strony internetowe za pomocą edytorów spełniających założenia
WYSIWYG,
• projektować strukturę witryny internetowej,
• wykonywać strony internetowe zgodnie z projektami,
• stosować reguły walidacji stron internetowych,
• testować i publikować witryny internetowe,
• stosować różne modele barw,
• przestrzegać zasad cyfrowego zapisu obrazu,
• wykonywać projekt graficzny witryny internetowej,
• tworzyć grafikę statyczną i animacje jako elementy stron internetowych,
• zmieniać atrybuty obiektów graficznych i modyfikować obiekty
graficzne,
• przetwarzać i przygotowywać elementy graficzne, obraz i dźwięk do
publikacji w Internecie,
• przestrzegać zasad komputerowego przetwarzania obrazu i dźwięku.

7
4. MATERIAŁ NAUCZANIA
4.1. Wprowadzenie do języka HTML
4.1.1. Materiał nauczania
Dominującym językiem do tworzenia stron WWW jest HTML (HyperText
Markup Language - język znaczników hipertekstu). Język ten pozwala na
opisanie struktury informacji zawartych w dokumencie nadając znaczenie
poszczególnym fragmentom tekstu (formując linki, nagłówki, akapity, listy, itp.)
oraz osadzenie w tekście dodatkowych obiektów, jak np. statyczne grafiki,
interaktywne formularze czy też dynamiczne animacje. W HTML-u
wykorzystuje się znaczniki opatrzone z obu stron nawiasami ostrokątnymi.
Ponadto język ten umożliwia formatowanie tekstu, kreślenie linii, dołączanie
grafiki, dźwięków i filmów video oraz umożliwia wykorzystanie następujących
plików:
• filmy Quick Time (*.qt, *.mov),
• video (*.avi, *.mpg),
• audio (*.au, *.snd, *.wav),
• skrypty i aplety Java (*.jav, *.js),
• tekstowe (*.txt, *.tex),
• obrazy skompresowane (*.gif, *.jpg),
• skompresowane (*.zip, *.gz).
Programami służącymi do przeglądania stron internetowych są przeglądarki
internetowe. Do najbardziej znanych przeglądarek możemy zaliczyć:
• Internet Explorer.
• Chrome.
• Mozilla Firefox.
• Opera.
Ważnym elementem w języku HTML jest edytor stron internetowych.
Chociaż programować możemy w dowolnym edytorze tekstu, np. Word, to
pisanie kodu jest w nim uciążliwe. Dla naszej wygody oraz szybkości pracy
powstały specjalne edytory języka HTML. Do takich edytorów możemy
zaliczyć m.in.:
• EdHTML.
• FrontPage.
• Pajączek.
• RJ TextEd.
• KED.
• Notepad++.
• ezHTML.

8
Podczas tworzenia stron WWW należy przestrzegać następujących zasad:
• stosować się do istniejących standardów,
• nie nasycać stron zbyt wielką ilością grafiki,
• ostrożnie wykorzystywać cudzą grafikę,
• podawać datę aktualizacji strony,
• nie być anonimowym,
• wstawiać licznik odwiedzin,
• informować innych o swojej stronie.
Tworzenie strony WWW w języku HTML zaczynamy od określenia
znaczników. Na początku i na końcu strony umieszczamy znacznik <HTML>
</HTML>. Pomiędzy nimi wstawiamy znaczniki nagłówkowe: <head>
</head>. Pomiędzy tymi znacznikami umieszczamy znaczniki <title> </title>,
w których wstawiamy tytuł strony. Pozostałe informacje na naszej stronie
zapisujemy w znacznikach <body> </body>. Wygląda to następująco:
<HTML>
<head>
<title> tytuł strony </title>
</head>
<body> treść strony </body>
</HTML>
W języku HTML, szczególnie dla młodych programistów, zalecane jest
również korzystanie z komentarzy. Deklarujemy go w postaci: <!– dowolny
tekst->. Poniżej zostaną przedstawione najważniejsze polecenie języka HTML
wersji 4.
Ważnym elementem na naszej stronie jest informacja o stronie kodowej.
W języku HMTL zalecane jest stosowanie strony kodowej ISO-8859-2 (czyli
ISO Latin 2). Jest to międzynarodowy standard, a także Polska Norma. Strony
powinniśmy właśnie tworzyć w tym standardzie oraz opatrywać je informacją
typu META. Jest ona umieszczana w znaczniku head i wygląda następująco:
<meta http-equiv="content-type" content="text/HTML; charset=iso-8859-2">
Podczas tworzenia stron WWW istnieje możliwość korzystania ze standardu
kodowania Windows-1250, jednakże nie jest to zalecane. W takim dokumencie
należy umieścić następujący zapis:
<meta http-equiv="content-type" content="text/HTML; charset=windows-
1250">

9
Do podstawowych poleceń języka HTML, możemy zaliczyć:
• <I> – kursywa tekstu,
• <B> – pogrubienie tekstu,
• <U> – podkreślenie tekstu,
• <SUB> - indeks dolny,
• <SUP> - indeks górny,
• <CENTER> – wyśrodkowanie tekstu,
• <RIGHT> – wyrównanie tekstu do prawej,
• <LEFT> – wyrównanie tekstu do lewej,
• <JUSTIFY> – wyjustowanie tekstu,
• <BR> – znacznik końca wiersza – powoduje przeniesienie treści do
następnego wiersza bez kończenia akapitu,
• <HR> - wstawianie linii ciągnącej się przez całą szerokość okna,
• <strike> – przekreślony tekst.
Zakończenie powyższych poleceń odbywa się za pomocą: </nazwa_polecenia>
Podstawowymi poleceniami języka HTML związanymi z edycją tekstu są:
• zmiana rozmiaru tekstu: <font size=”rozmiar”>, gdzie dostępnych jest
7 rozmiarów czcionki (1-najmniejsza, 7-największa),
• zmiana kroju czcionki: <font face=”nazwa czcionki”> (domyślną
czcionką jest Times New Roman),
• zmiana koloru: <font color=”nazwa_koloru”>.
Kończenie powyższych poleceń odbywa się za pomocą </font>.
Tytuły w języku HTML, zwane też nagłówkami, umieszczamy za pomocą
polecenia <hx> tytuł </hx>. Znak h oznacza heading, natomiast x to stopień
tytułu (tych stopni jest 6).
Akapit jest podstawowym elementem zawierającym tekst na stronach WWW
i służy on do wydzielania fragmentów zawierających jakąś zwartą myśl.
Akapity wstawiamy przy pomocy polecenia: <p> tekst </p>.
Blokiem preformatowanym nazywamy blok tekstu, w którym uwzględniane
są białe znaki znajdujące się w kodzie źródłowym, np. dodatkowe spacje,
punkty tabulacji, znaki końca akapitu itp., a które są pomijane w innych
poleceniach, np. w akapicie. Blok ten jest wywoływany poleceniem: <pre> tekst
</pre>.
Blok cytowany używany jest podczas powoływania się na jakieś źródło.
Cytat jest wyświetlany z uwzględnieniem tabulacji, zaś tekst należy umieścić
w elemencie blokowym, np. w akapicie: <blockquote> tekst </blockquote>.
Adres – polecenie to (wyświetlane za pomocą kursywy) służy do
wyświetlania bloku tekstu zawierającego m.in. imię i nazwisko, adres pocztowy,
adres poczty elektronicznej. Składnia polecenia jest następująca:
<address> tekst </address>.

10
Ważnym poleceniem w HTML jest polecenie <div>. Odgrywa ono kluczową
rolę w grupowaniu wielu elementów oraz pozycjonowaniu większych
fragmentów dokumentu. Przy pomocy bloków tworzy się układy stron, tzw.
layouty. Polecenie to pozwala wydzielić większy blok w dokumencie, a
następnie nadać mu określony rodzaj formatowania. Polecenie to jest
deklarowane w następujący sposób: <div> tekst </div>.
Kolejnym omawianym poleceniem jest polecenie <span>. Służy ono do
definiowania zakresu tekstu. Wydziela fragment dokumentu, ale
w przeciwieństwie do polecenia <div>, pełni tę rolę jako element liniowy, np.
pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów określone
formatowanie.
Nasza strona nie może istnieć bez odsyłaczy, inaczej zwanych hiperłączami.
Bez ich zastosowania nie moglibyśmy przejść m.in. do innej strony
internetowej. Odsyłacz możemy krótko scharakteryzować jako wskazanie
jakiegoś innego miejsca. Możemy wyróżnić dwa rodzaje odsyłaczy: do etykiet
oraz do stron.
Etykietą nazywamy znak, który oznacza określone miejsce w tekście. Po
użyciu etykiet, będziemy mogli odwoływać się do konkretnego miejsca na
stronie. Etykiety definiujemy następująco: <a name="nazwa_etykiety"> </a>.
Jeśli tworzymy hiperłącze do etykiety, należy wpisać nazwę strony oraz
etykiety, w postaci: <a href="strona.HTML#nazwa_etykiety">Tekst</a>.
Za pomocą odsyłaczy możemy również przenieść się do wybranej strony
w Internecie. W tym celu wykorzystamy polecenie:
<a href="miejsce_docelowe">Tekst, na którym należy kliknąć </a>.
Istnieje także odsyłacz do poczty elektronicznej. W tym celu wykorzystamy
polecenie: <a href="mailto:imie_nazwisko@adres">Tutaj kliknij</a>.
Bardzo często dla uporządkowania tekstu na stronie stosujemy wykazy,
zwane listami. Służą one do sporządzania usystematyzowanych zestawień
informacji, prezentowanych w punktach. Wyróżniamy dwa rodzaje wykazów:
• nieuporządkowany – wykorzystywany do sporządzenia wykazu
nienumerowanego. Układ wykazu jest następujący:
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul>
• uporządkowany – służący do sporządzenia wykazu numerowanego,
w którym istotna jest dla nas kolejność elementów. W tym przypadku
układ jest następujący:
<ol>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>

11
<li>Trzeci punkt</li>
</ol>
Na naszej stronie, poza tekstem, powinny również znaleźć się elementy
graficzne. Trzeba pamiętać, aby grafikę zmniejszyć przed umieszczeniem jej na
stronie WWW. Pliki graficzne wstawiamy wg wzoru:
<img src="plik_graficzny">. W miejscu plik_graficzny podajemy nazwę
naszego rysunku wraz z rozszerzeniem. Istnieje możliwość określenia
rozmiarów rysunku, np.: <img src="zdjecie.jpg" width="342" height="353">.
Aby wstawić miniaturkę obrazka użyjemy polecenia:
<a href="adres.duzego.obrazka"><img src="adres.miniaturki" style="border:
0;"></a>.
Obok plików graficznych na naszej stronie możemy również zamieścić
animacje. W tym celu użyjemy polecenia: <marquee>Tu wpisz
tekst</marquee>. Możemy w nim określić typ animacji używając polecenia:
<marquee behavior="typ">Tu wpisz tekst</marquee>
gdzie jako "typ" należy wpisać:
• "scroll" - tekst przesuwa się od prawej do lewej; jest to wartość domyślna,
• "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija
się" i powraca,
• "slide" - tekst przesunie się od prawej do lewej tylko raz, a później
zatrzyma się i pozostanie nieruchomy.
Możemy także określić kierunek animacji wykorzystując polecenie:
<marquee direction="kierunek">Tu wpisz tekst</marquee>
gdzie jako „kierunek" należy wpisać:
• "left" - tekst będzie przesuwał się w lewo; jest to wartość domyślna,
• "right" - tekst będzie przesuwał się w prawo,
• "up" - przesuwanie w górę,
• "down" - przesuwanie w dół.
Kolejnym z omawianych elementów naszej strony są tabele. Tworzymy je
w znacznikach: <table> </table>. Wiersze wstawiamy wykorzystując polecenie
<tr> </tr>, natomiast kolumny <td> </td>. Tabele 3x3 wstawiamy
w następujący sposób:
<table>
<tr> <td> </td><td> </td><td> </td></tr>
</table>
Do obramowania tabeli wykorzystamy polecenie: order. Odległości
pomiędzy komórkami w pikselach zdefiniujemy za pomocą polecenia:

12
cellspacing, natomiast odległość akapitu od krawędzi komórki za pomocą
polecenia: Cellpadding. Przykład zastosowania powyższych poleceń jest
następujący:
<table border cellspacing="5" cellpadding="15"> </table>.
Bardzo często na stronach WWW pojawiają się formularze. Służą one do
otrzymywania i wysyłania informacji od gości odwiedzających naszą stronę.
Formularz jest tworzony w ramach: <form> </form>. Przykładowy formularz
do wysyłania informacji jest następujący:
<form action="mailto:adres e-mail?subject=temat" method="post">
(Tutaj umieszcza się pola formularza)
</form>
Na formularzu bardzo często definiujemy pole tekstowe, według poniższego
wzoru:
<form action="...">
<input name="nazwa" />
</form>
gdzie w miejscu „nazwa” wpisujemy krótką nazwę danego pola (np. skróconą
treść pytania). Zostanie ona później wysłana wraz z formularzem. Występujący
atrybut name="..." powinien być unikatowy w obrębie formularza. W polu
tekstowym możemy ustawić domyślną treść danej odpowiedzi (type="text"
name="nazwa" value="odpowiedź domyślna"), określić długość pola (<input
type="text" name="nazwa" size="k" />) oraz liczbę znaków do wpisania (<input
type="text" name="nazwa" maxlength="n" />).
Obok formularzy na stronach WWW możemy wykorzystać ramki. Głównym
ich zadaniem jest podział naszego dokumentu HTML na kilka części pionowych
i poziomych. Główną rolę w "ramkowym" dokumencie pełni specjalna strona,
na której definiujemy liczbę, wielkość, pozycję ramek oraz zachowanie się
innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Jest ona
kontenerem dla ramek. Pozostałe strony, wchodzące w skład całego,
wielostronicowego układu są stronami podrzędnymi. Definiujemy je w ramach:
<frameset> </frameset>. Poza podziałem na ramki należy również przypisać im
jakieś dokumenty, zazwyczaj w formacie HTML. Możemy do tego wykorzystać
polecenie:
<frame src="nazwa_pliku.htm" ...>. W ramce możemy również włączyć pasek
przewijania za pomocą polecenia: <frame scrolling="yes" ...>. Jeśli chcemy go
wyłączyć w miejsce „yes” wpisujemy „no”. Ponadto możemy nazwać naszą
ramkę: <frame name="nazwa_ramki" ...>
Naszą stronę możemy również wyposażyć w dźwięki za pomocą polecenia:
<bgsound src="ścieżka dostępu do pliku dźwiękowego" />.
Za pomocą tego polecenia, po otwarciu dokumentu nastąpi odtworzenie
dźwięku w tle, jako podkładu muzycznego. Możemy w tym miejscu określić
także ilość powtórzeń:

13
<bgsound src="ścieżka dostępu do pliku dźwiękowego" loop="n" />
oraz określić poziom głośności:
<bgsound src="ścieżka dostępu do pliku dźwiękowego" volume="v" />
gdzie: "v" oznacza poziom głośności (od "-10000" do "0").
4.1.2. Pytania sprawdzające
Odpowiadając na pytania sprawdzisz, czy jesteś przygotowany do wykonania
ćwiczeń.
1. Co to jest HTML i do czego jest wykorzystywany?
2. Wymień edytory HTML?
3. Opisz zasady występujące podczas tworzenia stron WWW.
4.1.3. Ćwiczenia
Ćwiczenie 1
Przy wykorzystaniu języka HTML zaprojektuj stronę internetową swojej klasy.
Sposób wykonania ćwiczenia
Aby wykonać ćwiczenie, powinieneś:
1. uruchomić komputer,
2. uruchomić program Notatnik,
3. utworzyć stronę internetową za pomocą kodu.
Wyposażenie stanowiska pracy:
• Komputer z zainstalowanym systemem operacyjnym.
Ćwiczenie 2
Przy wykorzystaniu języka HTML zaprojektuj stronę internetową składającą się
z następujących tabel:
a1 a2 a3 a4
b1 b2 b3 b4
c1 c2 c3 c4

14
a1 a2 a3 a4
b1 b2 b3 b4
c1 c2 c3 c4
Tytuł tabeli
a1 a2 a3 a4
b1 b2 b3 b4
c1 c2 c3 c4
1 2 3
1 2 3
1 2 3
Wzrost produkcji masła i margaryny w latach 1991-1995
(w mln USD)
1991 1992 1993 1994 1995
Masło 1150 1240 1380 1420 1550
Margaryna 800 900 980 1150 1320
Wzrost produkcji masła i margaryny w latach 1991-1995
(w mln USD)
1991 1992 1993 1994 1995
Masło 1380 1420 1550
Margaryna
1950 2120
800 900 980

15
1 2 3
1 2 3
1 2 3
Aby wykonać ćwiczenie powinieneś:
3. utworzyć tabelę przy wykorzystaniu języka HTML.
Ćwiczenie 3
Przy wykorzystaniu języka HTML stwórz animację następującego tekstu:
„Zapraszam do współpracy”. Animacja powinna przesunąć się od prawej do
lewej strony tylko raz, a później zatrzymać się i pozostać nieruchoma. Powinna
być w kolorze żółtym, o szerokości 50 i wysokości 100 pikseli.
3. utworzyć animację za pomocą kodu.
4.1.4. Sprawdzian postępów
Czy potrafisz: TAK NIE
1) zaprojektować stronę przy wykorzystaniu polecenia
<div>?
2) utworzyć stronę zawierającą formularze?
3) utworzyć stronę zawierającą ramki?

16
4.2. Kaskadowe arkusze stylów (CSS)
Projektując stronę bardzo często korzystamy z kaskadowych arkuszy stylów,
zwanych w skrócie CSS. CSS nazywamy specjalny język opisu wyglądu
i częściowo zachowań strony internetowej. Został on stworzony w odniesieniu
do języka HTML i tylko z nim współpracuje. Został on wprowadzony ze
względu na rozdzielenie struktury i prezentacji dokumentu. Formatowanie za
pomocą CSS wykorzystuje cechy definiujące wygląd każdego elementu (obiektu
w drzewie dokumentu). Składnia CSS pozwala szczegółowo wybrać element lub
grupę elementów, a następnie szczegółowo definiować wartości cech dla tych
obiektów. Charakterystyczną cechą omawianego systemu jest dziedzicznie cech.
Ustawienie cech dla przodka powoduje zdefiniowane cech dla „potomka”.
Wprowadzenie stylów CSS powoduje, że wszystkie polecenia związane
z formatowaniem możemy umieścić w jednym miejscu (tzw. arkuszu),
a następnie powiązać je z konkretnymi elementami, występującymi w HTML-u.
Takie założenie sprawia, że modyfikacja wyglądu stron może przebiegać dużo
sprawniej.
Aktualnie zakłada się, że strona internetowa składa się z treści (*.HTML)
oraz arkusza definiującego sposób prezentacji (*.CSS).
Atrybuty kaskadowych arkuszy stylów można pogrupować w następujących
kategoriach:
• wygląd czcionki oraz styl,
• tło - kolor i obrazy,
• wyrównywanie tekstu,
• odstępy,
• wygląd obramowań,
• inne (np. skalowanie, zawijanie tekstu i listy).
Pierwszym z omawianych zagadnień jest wygląd i styl czcionki. CSS
udostępnia wiele atrybutów definiujących wygląd czcionki. Przy ich pomocy,
autorzy stron korzystający z arkuszy stylów mają zdecydowanie większą
kontrolę nad wyglądem czcionki, w porównaniu ze stosowaniem znacznika
<FONT>. Atrybuty stylów występujących w czcionkach są następujące:
• font-family - określa krój pisma. Wartością jest nazwa czcionki (np.
Times New Roman) lub nazwa jednej z pięciu rodzin ogólnych:
SERIF(times), SANS-SERIF(helvetica), CURSIVE(zaph chancery),
FANTASY(western), MONOSPACE(courier),
• font-size - określa wielkość czcionki,
• font-style - określa styl czcionki: normal, italic oraz oblique,
• font-weight - określa grubość czcionki: normal, bold, bolder oraz lighter,
• font-variant - narzuca sposób wyświetlania czcionek w postaci
kapitalików: normal oraz small-caps,

17
• font - umożliwia jednoczesne dokonanie ustawień wg kolejności: font-
style, font-variant, font-weight, font-size, line-height oraz font-family,
• color - definiuje kolor elementu tekstu i jest określany za pomocą jednego
z szesnastu słów kluczowych: black, maroon lub kodem hexadec,
• text-decoration - umożliwia wprowadzenie dodatkowych ozdobników:
podkreślenie, przekreślenie i miganie. Wartościami są: none, overline,
line-through oraz blink.
Kolejnym z omawianych elementów jest Tło - kolor i obrazy. Za pomocą
kaskadowych arkuszy stylów możemy rozszerzyć kontrolę nad tłem.
Wykorzystując CSS możemy zastosować arkusze stylów do poszczególnych
elementów strony. Atrybuty stylów występujących w tłach są następujące:
• background-color - określa tło elementu. Wartością jest angielska
nazwa koloru,
• background-image - definiuje obraz jako element tła. Wartością jest
adres URL obrazka lub słowo none,
• background-repeat - składa tło z identycznych obrazów. Wartością
jest: repeat, repeat-x oraz repeat-y,
• background-attachment - określa czy obraz powiązany jest z pierwszo-
planowym tekstem - scroll, czy też zakotwiczony jest do tła
podstawowego (efekt znaku wodnego) – fixe,
• background-position - podaje położenie punktu początkowego
określającego położenie obrazu – tła,
• background – umożliwia jednoczesne definiowanie szeregu wartości
atrybutów tła wg kolejności: background-color, background-image,
backgroung-repeat, background-attachment, background-position.
Wyrównanie tekstu to kolejny element stylów. W tym przypadku kaskadowe
arkusze stylów umożliwiają wyrównywanie tekstu na wiele sposobów.
Zaliczamy do nich:
• vertical-align - określa absolutną pozycję tekstu w pionie lub jego pozycję
względem elementu nadrzędnego,
• text-align - umożliwia wyrównanie tekstu w poziomie. Wartościami są:
left, right, center, justify,
• text-ident – umożliwia wcięcie pierwszego wiersza; wartość tę możemy
podać, np. w procentach.
Dla lepszej czytelności strony stosujemy odstępy. Za pomocą odstępów
możemy kontrolować m.in. odległości między wierszami, wyrazami i literami
w wyrazie. Do omawianych stylów możemy zaliczyć m.in.:
• word-spacing - umożliwia zwiększenie domyślnych odstępów pomiędzy
wyrazami,

18
• letter-spacing - umożliwia zwiększenie domyślnych odstępów pomiędzy
literami,
• margin-top – ustawia górny margines pomiędzy elementem a jego
sąsiadami,
• margin-right – ustawia prawy margines pomiędzy elementem a jego
sąsiadami,
• margin-bottom – ustawia dolny margines pomiędzy elementem a jego
sąsiadami,
• margin-left – ustawia lewy margines pomiędzy elementem a jego
sąsiadami.
Kolejnym z omawianych stylów jest wygląd obramowań. Za pomocą tego
stylu, określamy obramowanie elementów na stronie. Do najważniejszych ich
parametrów możemy zaliczyć:
• border-top-width – ustawia szerokość górnego obramowania,
• border-right-width – ustawia szerokość prawego obramowania,
• border-bottom-width – ustawia szerokość dolnego obramowania,
• border-left-width – ustawia szerokość lewego obramowania,
• border-color - określa kolor obramowania,
• border-top-style - określa styl górnego obramowania. Wartości: none,
dotted, dashed, solid, double, groove, ridge, inset, outset,
• border-right-style - określa styl prawego obramowania. Wartości: none,
• border-bottom-style - określa styl dolnego obramowania. Wartości: none,
• border-left-style - określa styl lewego obramowania. Wartości: none,
dotted, dashed, solid, double, groove, ridge, inset, outset.
Przykładowy CSS, który został umieszczony w sekcji body jest następujący:
Deklaracja:
<style type="text/css">
h1 {font: 12pt/20pt „Times New Roman”}
h2 {font: 14pt/16pt; margin-left: 1.3cm; color: red}
h6 {color: red}
</style>
Wywołanie:
<h1>To jest tekst 1</h1>

19
Stworzona strona może pobierać arkusze stylu z zewnętrznego arkusza
stylów, w którym zdefiniowane są własności różnych elementów. Przykładem
jest wykonanie strony internetowej pobierającej ustawienia stylów
z zewnętrznego arkusza (pliku) o rozszerzeniu .css, który musi być umieszczony
na serwerze obok plików .HTML. Przykładowe pliki tego typu przedstawiono
poniżej:
Plik twojstyl.css
<HTML>
<STYLE TYPE="text/css">
<!—
BODY {text-align: justify; margin-left: 2cm; margin-right: 2cm; margin-top:
2cm}
P {font-family: "Arial CE", Arial, Helvetica; font-size: 20pt; font-weight:
normal; text-indent: 3 em}
A {text-decoration: blink; color: blue}
H1 {font-size: 24pt}
H1, H2, H3 {font-family: "Arial CE", Arial, Helvetica; font-weight: bold; color:
#808000}
TD {font-family: "Arial CE", Arial, Helvetica; font-size: 20pt; font-weight:
normal}
LI {font-family: "Arial CE", Arial, Helvetica; font-size: 20pt; font-weight:
normal}
-->
</STYLE>
</HTML>
Plik test.HTML
<head>
<title>Tytuł strony</title>
<meta http-equiv="content-type" content="text/HTML; charset=iso-8859-2">
<LINK REL=stylesheet HREF="twojstyl.css" TYPE="text/css">
</head>
Odwołanie do pliku zewnętrznego z arkuszem stylów (twojstyl.css)
umieszczamy w części nagłówkowej. Posiada ono ściśle określoną składnię.
Parametr HREF wskazuje ścieżkę do katalogu, w którym umieszczony jest
arkusz. Wszystkie style zdefiniowane w zewnętrznym pliku są automatycznie
przyjmowane przez elementy danej strony.
Główną zaletą stosowania zewnętrznego arkusza stylów jest brak potrzeby
wprowadzania stylów na tworzonej stronie, zmniejszanie objętości plików,

20
oszczędność czasu poprzez zmianę jednego parametru w arkuszu stylów,
prowadzi do zmiany wyglądu wszystkich stron, które odwołują się do tego
arkusza.
ćwiczeń.
1. Co to jest CSS?
2. Wymień atrybuty kaskadowych arkuszy stylów?
3. Określ zalety stosowania kaskadowych arkuszy stylów w zewnętrznym
pliku?
4.2.3. Ćwiczenia
Ćwiczenie 1
Przy wykorzystaniu kaskadowych arkuszy stylów (CSS) stwórz następujący
wykaz:
• Punkt 1
• Punkt 2
o Podpunkt 2.1
o Podpunkt 2.2
Podpunkt 2.2.1
Podpunkt 2.2.2
• Punkt 3
o Podpunkt 3.1
Podpunkt 3.1.1
Podpunkt 3.1.2
o Podpunkt 3.2
Podpunkt 3.2.1
Podpunkt 3.2.1.1
Podpunkt 3.2.1.2
Podpunkt 3.2.1.3
Podpunkt 3.2.2
• Punkt 4
o Podpunkt 4.1
o Podpunkt 4.2
• Punkt 5
3. utworzyć wykaz.

21
Ćwiczenie 2
Przy wykorzystaniu kaskadowych arkuszy stylów (CSS) wykonaj odsyłacze do:
• tekstu znajdującego się na dole strony,
• tekstu znajdującego się na dole strony o nazwie test.HTML; tekst musi
być wcześniej napisany,
• strony www.wp.pl,
• poczty elektronicznej: jan.kowalski@wp.pl,
• poczty elektronicznej: krzysztof.nowak@wp.pl z tytułem wiadomości:
„Moja wiadomość”,
• dwóch adresatów poczty elektronicznej: janusz@wp.pl oraz zosia@wp.pl,
• dwóch adresatów poczty elektronicznej: andrzej@wp.pl oraz
kamila@wp.pl gdzie drugi adres jest adresem ukrytym, a w temacie
powinno być napisane „Mój list”, natomiast w treści listu „To jest
odpowiedź ze strony internetowej”.
3. utworzyć odsyłacze.
Ćwiczenie 3
Przy wykorzystaniu kaskadowych arkuszy stylów (CSS) zaprojektuj własną
stronę WWW posiadającą 10 zdjęć, 10 wykazów, 5 różnych animacji, 5 tabel,
2 formularze oraz 10 podstron. Strony powinny być połączone ze sobą
hiperłączami. Wykonaną stronę należy umieścić na serwerze WWW.
3. utworzyć stronę internetową według treści zadania.

22
1) zastosować kaskadowe arkusze stylów do zmiany
czcionki dokumentu?
2) zastosować kaskadowe arkusze stylów do zmiany tła
dokumentu?
3) zdefiniować kaskadowe arkusze stylów
w zewnętrznym pliku oraz odwołać się do niego
w dokumencie HTML?
4.3. Edytor stron WWW
W Internecie możemy znaleźć wiele edytorów wspomagających pracę
podczas tworzenia stron WWW. Głównym zadaniem edytora jest tworzenie oraz
edycja stron WWW. Jednym z takich edytorów działających w wizualnym
trybie tzw. WYSIWIG (What You See Is What You Get) oznaczającym, że
docelowa strona będzie wyglądać tak samo jak ta, którą edytujemy w edytorze,
jest program Microsoft FrontPage. Dzięki jego zastosowaniu tworzenie oraz
edycja stron WWW jest wyjątkowo prosta i intuicyjna, a także nie wymaga
znajomości kodu HTML.
Program Microsoft FrontPage 2003 należy do rodziny pakietu Microsoft
Office, z tego też powodu jego obsługa, dla osób znających podstawy programu
Microsoft Word nie będzie skomplikowana. Należy on do jednego z najczęściej
używanych narzędzi webmasterskich na rynku, zwłaszcza w firmach i biurach,
w środowisku Windows. A po uruchomieniu programu pojawia się następujące
okno:

23
Rys. 1. Okno programu FrontPage
Jego układ jest podobny do innych programów z rodziny MS Office.
Wpisywanie tekstu odbywa się w zakładce Projekt. A jego edycja jest taka sama
jak w Wordzie, w którym należy zaznaczyć tekst, a później skorzystać z paska
Formatowanie, gdzie możemy m.in. zmienić czcionkę, pogrubić, podkreślić
tekst oraz dokonać jego wyrównania.
W odróżnieniu od programu Word, w programie FrontPage możemy
umieszczać element (np. tekst) na innym elemencie. Służą do tego warstwy.
W tym celu wybieramy z menu Wstaw Warstwa. Pojawi się nowe okienko o
nazwie layer, w którym możemy m.in. wpisać tekst, wstawić element graficzny
oraz edytować i przesuwać warstwę w dowolne miejsce na stronie internetowej.
Przykład strony internetowej z użyciem dwóch warstw przedstawia poniższy
rysunek:

24
Rys. 2. Zastosowanie warstw
W celu wstawienia obrazu wybieramy z menu: Wstaw Obraz Z pliku.
Przed wstawieniem obrazka, należy go zmniejszyć np. za pomocą programu
Microsoft Office Picture Manager oraz umieścić w folderze, w którym znajdują
się strony WWW przed ich umieszczeniem na serwerze.
Tabele we FrontPage wstawiamy za pomocą polecenie Tabela Wstaw
Tabela. Konfiguracja tabel odbywa się w sposób identyczny, jak ma to miejsce
w Wordzie.

25
Na stronach internetowych często występują hiperłącza. Najczęściej służą
one do przejścia na inną stronę. Aby wstawić hiperłącze na zaznaczonym tekście
lub obrazku, klikamy prawym klawiszem myszki i wybieramy Hiperłącze. W
nowym oknie podajemy adres strony, która ma być otwarta po zaznaczeniu
obiektu. Przykład tworzenia hiperłącza przedstawia poniższy rysunek:

26
W omawianym programie możemy także tworzyć strony WWW przy
wykorzystaniu języka HTML. W tym celu przechodzimy na zakładkę Kod.

27
Rys. 5. Okno programu FrontPage
W każdej chwili, możemy zobaczyć jak tworzona strona będzie wygląda po
zamieszczeniu jej na serwerze. W tym celu wybieramy zakładkę Podgląd. Ze
względu na fakt, iż program FrontPage jest bardzo zbliżony w obsłudze do
programu MS Word, w punkcie tym opisane zostały tylko najważniejsze jego
usługi. W celu poszerzenia wiedzy na ten temat polecam literaturę z punktu
6 poradnika.
ćwiczeń.
1. Co to jest FrontPage?
2. Co oznacza tryb WYSIWIG?
3. Porównaj program MS FrontPage z programem MS Word.

28
4.3.3. Ćwiczenia
Ćwiczenie 1
Przy wykorzystaniu edytora stron zaprojektuj własną stronę WWW.
2. uruchomić edytor stron WWW,
3. utworzyć stronę internetową.
• Komputer z zainstalowanym edytorem stron WWW.
Ćwiczenie 2
Przy wykorzystaniu edytora stron WWW wykonaj strony internetowe
zawierające następujące elementy:
1. Dwa dowolne rysunki.
2. Rysunek z tekstem alternatywnym: „Tu znajduje się rysunek”.
3. Rysunek o wysokości 200 i szerokości 100
4. Rysunek z czerwoną ramką
5.
6.
7.

29
8.
3. utworzyć stronę internetową.
Ćwiczenie 3
Przy wykorzystaniu edytora stron WWW wykonaj następujący formularz:
Podaj swoje imię
Podaj swoje nazwisko
Podaj swoją płeć:
Kobieta Mężczyzna
Ile masz lat?
mniej niż 15
15-19
20-29
30-39

30
40-60
więcej niż 60
Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?
Rock
Heavy Metal
Pop
Techno
Muzyka poważna
Inna (podaj jaka):
Jakiej przeglądarki internetowej najczęściej używasz?
Internet Explorer
Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz
Ctrl)?
Dos
Window s
Linux
Podaj swój komentarz:
Wyślij formularz Wyczyść dane
Aby wykonać ćwiczenie powinieneś:
3. utworzyć formularz.
1) utworzyć stronę WWW?
2) zmniejszyć zdjęcia przed umieszczeniem ich na stronie
internetowej?
3) umieścić stworzoną stronę w Internecie?

31
4.4. Grafika i animacje komputerowe
W grafice komputerowej możemy spotkać się z modelami barw. Określają
one techniki uzyskiwania barw obrazu. Modele kolorów są odmienne dla obrazu
wyświetlanego na ekranie monitora i obrazu drukowanego. Z tego powodu
techniki uzyskiwania barw można podzielić na następujące grupy:
• CMYK – którego podstawą są cztery kolory: Cyjan (niebieskozielony),
Magenta (purpurowy), Yellow (żółty) i Black (czarny). W wyniku
mieszania tych kolorów uzyskuje się dowolne barwy na powierzchni
wydruku. W przypadku zmieszania trzech pierwszych kolorów uzyskuje
się kolor czarny. Standard ten został opracowany dla potrzeb
wykonywania wydruków.
Rys. 6. Model kolorów CMYK
• RGB - składa się z trzech podstawowych kolorów: Red (czerwony),
Green (zielony), Blue (niebieski). Ich zmieszanie w różnym stopniu
intensywności tworzy całą paletę barw. Został on opracowany na potrzeby
obrazu wyświetlanego na ekranie monitora.

32
Rys. 7. Model kolorów RGB
• HSB – składa się z trzech parametrów: odcień (Hue), nasycenie
(Saturation) oraz jasność (Brightness). W tym przypadku, kolor zawiera
się w widzialnym przez człowieka spektrum kolorów zmieniających się
od czerwonego przez zielony, niebieski z powrotem do czerwonego
i mierzy się w skali od 0 do 360.
Rys. 8. Model kolorów HSB
Do najpopularniejszych formatów zapisu plików graficznych należą:
• bmp - charakterystyczne rozszerzenie nazwy plików zawierających mapę
bitową, wykorzystywane przez system Windows oraz wiele aplikacji. Jest
to format zapisu obrazu bez kompresji,
• gif - rozszerzenie plików graficznych ograniczonych do 256 kolorów,
dzięki czemu zajmują mało miejsca. Format reprezentuje zapis obrazu

33
z kompresją bez utraty jakości. Jest on wykorzystywany do prostych
animacji,
• tif - format pliku opracowany z myślą o aplikacjach służących do składu
publikacji; jest obsługiwany przez wszystkie programy do edycji grafiki.
Pliki tego typu są wysokiej jakości i duże objętościowo,
• jpeg (jpg) - jeden z najpopularniejszych obecnie formatów map bitowych
przechowujący obraz w postaci skompresowanej. Od stopnia
skompresowania zależy jakość grafiki – im większa kompresja, tym
gorsza jakość,
• png - popularny format grafiki bitowej cechujący się dużym stopniem
kompresji z jednoczesnym zachowaniem dobrej jakości ilustracji.
Obrazy graficzne możemy tworzyć w bardzo wielu programach. Najbardziej
znanym programem jest Paint. Jest on instalowany łącznie z systemem
operacyjnym Windows. Posiada on, pasek narzędziowy z podstawowymi
narzędziami. Możemy do nich zaliczyć m.in.:
• zaznaczanie dowolnego kształtu,
• zaznaczanie nieregularnego kształtu,
• gumka,
• wypełnienie kolorem,
• kolor,
• lupa,
• ołówek,
• pędzel,
• aerograf,
• tekst,
• linia,
• krzywa,
• prostokąt,
• wielokąt,
• elipsa,
• prostokąt zaokrąglony.
Przykładowy ekran programu przedstawia rysunek 9. Do tworzenia obrazów
graficznych możemy również wykorzystać bardziej profesjonalne programy
graficzne, do których zaliczamy: Corel Draw, Adobe Photoshop czy też Adobe
Ilustrator. Oczywiście programów jest bardzo wiele, a każdy z nich ma swoje
wady i zalety.

34
Rys.9. Program Paint
Do modyfikacji obrazów możemy wykorzystać m.in. wyżej wymienione
programy. Wartym uwagi jest program Microsoft Office Picture Manager.
Program ten wchodzi w skład pakietu MS Office. Za jego pomocą można
wykonać następujące operacje na obrazach:
• autokorektę,
• modyfikację jasności oraz kontrastu,
• zmianę koloru,
• przycięcie,
• obracanie,
• redukcję czerwonych oczu,
• zmianę rozmiaru,
• kompresję zdjęć.
Program jest prosty w obsłudze. Wystarczy wybrać odpowiednią opcję
z menu Narzędzia, a następnie z prawej strony dokonać modyfikacji
odpowiednich parametrów. Po wykonaniu operacji na obrazie należy pamiętać o
jego zapisaniu. Podczas tworzenia stron WWW, najbardziej przydatną dla nas
funkcją będzie „zmień rozmiar”. Za pomocą tej funkcji zmniejszymy rysunek
czyli jego wielkość na dysku, co w konsekwencji doprowadzi do szybszego jego
ładowania na stronie WWW.

35
Rys.10. Program Microsoft Office Picture Manager
Animacją nazywamy ciąg obrazów zmieniających się w czasie. Znajdują one
szerokie zastosowanie. Mogą też wchodzić w skład filmu lub być atrakcyjnym
dopełnieniem prezentacji multimedialnej. Jednakże najczęściej możemy je
spotkać na stronach internetowych, przeważnie w formie reklam. Nie muszą
odnosić się tylko do reklam. Często całe strony internetowe tworzone są jako
interaktywne animacje. Wyświetlają informacje, a także pomagają nam
nawigować na stronie. Animacje możemy tworzyć w wielu programach.
Bezpłatnym programem tego typu jest FotoMorph.
Praca w programie FotoMorph odbywa się poprzez zakładki, za pomocą
których możemy dodać do projektu obrazy, a następnie nanosić na nich efekty,
m.in. morfing czyli tworzenie animacji, w których jeden z obrazów płynnie
zmienia się w inny, a także opcje powiększania oraz zniekształcania obrazów.
Podczas tworzenia animacji możemy również zmienić podstawowe właściwości
grafiki (np. światło czy natężenie kolorów), nałożyć na nie proste efekty oraz
dodać tekst i ramki. Do jego głównych zalet możemy także zaliczyć funkcję
nakładania na obrazy za pomocą siatki, punktów, które poprawiają jakość
tworzonej animacji. Gotową animację możemy zapisać w postaci pliku SWF,
GIF, AVI oraz sekwencji statycznych obrazów. Wykonane w takiej postaci
animacje możemy bez problemu umieścić na stronie internetowej.

36
Rys. 11. Program FotoMorph
ćwiczeń.
1. Co to jest model barw?
2. Do czego wykorzystujemy program Microsoft Office Picture Manager?
3. Scharakteryzuj znane Ci formaty zapisu plików graficznych.
4.4.3. Ćwiczenia
Ćwiczenie 1
Zaprojektuj kartkę imieninową dla koleżanki/kolegi z klasy.
2. uruchomić program umożliwiający wykonywanie rysunków,
3. utworzyć kartkę imieninową.
• Komputer z zainstalowanym programem graficznym.

37
Ćwiczenie 2
Zmniejsz zdjęcie wykonanie aparatem cyfrowym w celu zamieszczenia go na
stronie internetowej.
1. zrobić zdjęcie aparatem cyfrowym,
3. skopiować zdjęcie wykonane aparatem cyfrowym do komputera,
4. otworzyć je w programie umożliwiającym zmniejszanie zdjęć, np.
Microsoft Office Picture Manager,
5. wybrać z menu obraz zmniejsz rozmiar oraz określić rozmiar zdjęcia.
• Komputer z zainstalowanym programem do edytowania plików
graficznych, np. Microsoft Office Picture Manager,
• Aparat cyfrowy.
Ćwiczenie 3
Wykonaj animację zdjęć (wykonanych aparatem cyfrowym) w celu
umieszczenia jej na stronie internetowej.
1. zrobić zdjęcia aparatem cyfrowym,
3. skopiować zdjęcia wykonane aparatem cyfrowym do komputera,
4. uruchomić program umożliwiający wykonanie animacji, np. FotoMorph,
5. wykonać animację i zapisać ją w formacie SWF.
• komputer z zainstalowanym programem umożliwiającym wykonanie
animacji np. FotoMorph,
• aparat cyfrowy.
1) utworzyć rysunek?
2) zmniejszyć rysunek?
3) utworzyć animacje?

38
4.5. Obróbka dźwięku i video
Do nagrywania dźwięku możemy wykorzystać wbudowany w systemie
Windows Rejestrator dźwięku. Za jego pomocą możemy nagrywać dźwięki
poprzez mikrofon podłączony do komputera. Omawiany program posiada prosty
interfejs. Program ten daje możliwość zapisania dźwięku tylko w formacie wav.
Do odtwarzania zapisanych plików multimedialnych w różnych formatach może
posłużyć m.in. Windows Media Player. Do najważniejszych formatów plików
dźwiękowych możemy zaliczyć:
• MP3 – jest to format kompresji plików audio przy niewielkiej utracie
jakości odtwarzanego dźwięku. Z tego też powodu format ten jest bardzo
popularny wśród zasobów sieci Internet.
• WAV (skrót od wave) – jest to format plików dźwiękowych opracowany
przez firmę Microsoft i używany przez system operacyjny Windows.
Zaletą tego formatu jest bardzo wierna jakość dźwięku. Do wad możemy
zaliczyć dużą pojemność.
• MIDI (Musical Instrument Digital Interface) – kod, w którym zapisane są
polecenia określające rodzaj granej nuty, instrumentu, głośności
i długości. Dźwięki te odtwarzane są przez syntezator karty dźwiękowej.
• QuickTime AIF – format ten został opracowany przez firmę Apple.
Dźwięki w tym formacie można odtwarzać również w systemie Windows.
• Macromedia SWA – Shockwave Audio – format ten charakteryzuje się
dużą kompresją dźwięku, wykorzystywaną głównie przez aplikacje firmy
Macromedia.
Po nagraniu dźwięku często zdarza się, że otrzymany dźwięk musimy
zmodyfikować. Zmiany, które możemy wykonać, obejmują szereg opcji, np.
redukcję szumów, zmniejszenie lub zwiększenie głośności dźwięku. Istnieje
wiele programów służących do edycji dźwięku. Jednym z nich jest bezpłatny
program Audacity. Jego głównym zadaniem jest nagrywanie i odtwarzanie
dźwięków, importowanie i eksportowanie plików m.in. do formatów: MP3,
WAV, AIFF, Ogg Vorbis. Program ten umożliwia także edycję ścieżek
dźwiękowych poprzez wycinanie, kopiowanie i wklejanie fragmentów
muzycznych. Za jego pomocą możemy również miksować ścieżki oraz dodawać
efekty takie, jak: echo czy normalizacja. Umożliwia on także korzystanie z
wtyczek efektownych VST i LADSPA. W programie tym możemy także
znaleźć wbudowany edytor amplitudy, regulowany moduł do wyświetlania
spektrogramów oraz analizy częstotliwościowej dla programów do analizy
audio. Do jego głównych zalet możemy zaliczyć łatwość w obsłudze oraz duże
możliwości. Przykładowe okno tego programu przedstawia poniższy rysunek.

39
Rys. 12. Program Audacity
Obok plików dźwiękowych na pewno każdy z nas spotkał się z plikiem
wideo. Plikiem wideo nazywamy plik, zawierający obraz i dźwięk. Do
najbardziej znanych programów do odtwarzania wideo zaliczamy Windows
Media Player. W celu odtworzenia pliku wideo niezbędne jest zainstalowanie w
komputerze kodeków. Ich zadaniem jest dekompresja i analiza algorytmu
odtwarzania filmu dla określonego formatu pliku. Przykładem popularnych
kodeków wideo są np. Sorenson, Cinepak, Intel Indeo, DivX itp. Do najbardziej
popularnych formatów wideo możemy zaliczyć:
1. MPEG1 – umożliwia on zapisanie filmu z rozdzielczością 352x240
pikseli i odtwarzanie z prędkością 30 klatek na sekundę.
2. MPEG2 – umożliwia on zapisanie filmu z rozdzielczością 720x480
pikseli i odtwarzanie z prędkością 30 klatek na sekundę. Filmy
skompresowane tą metodą mogą być odtwarzane w odtwarzaczach DVD.
3. MPEG3 – algorytm kompresji dźwięku dla wideo opartego na MPEG1
(znany jest także jako MP3).
4. MPEG4 – najczęściej wykorzystywany w sieci Internet.
5. AVI (Audio Video Interleaved) – jest to plik zawierający ruchomy obraz
wraz z dźwiękiem. Jest on bardzo popularny w środowisku Windows.
Pojemność tego pliku zależy od użytego algorytmu kompresji.
6. QuickTime – jest to standard opracowany przez firmę Apple; odtwarza
takie pliki, jak MOV, QT, AVI, WAV i AIF. Po zainstalowaniu

40
odtwarzacza QuickTime w systemie Windows możemy odtwarzać przy
pomocy programu Windows Media Player pliki, dla których zastosowano
kompresję specyficzną dla produktów Apple.
Abyśmy mogli przetwarzać pliki wideo, musimy je najpierw otrzymać, (np.
pobrać z Internetu), nagrać kamerą cyfrową, aparatem bądź nawet telefonem
komórkowym, a następnie skopiować do komputera. Istnieje także możliwość
nagrywania naszej pracy na komputerze. Do tego celu możemy wykorzystać
bezpłatny program CamStudio, który daje możliwość zapisu pliku do formatu
AVI lub SWF. Otrzymany film w większości przypadków należy przetworzyć.
Istnieje wiele programów do edycji plików video. Jednym z nich jest bezpłatny
program o nazwie Avidemux.
Avidemux jest jednym z najpopularniejszych programów do obróbki
i kompresji plików wideo. Umożliwia on wykonanie obróbki filmów wideo
zapisanych w następujących formatach: AVI, MPEG, MP4 i ASF. Bardzo
często wykorzystuje się go do konwertowania filmów do formatów zgodnych
z odtwarzaczami DVD. Oferuje on także, poza wbudowanymi narzędziami,
możliwość rozszerzenia o zewnętrzne komponenty.
Poza konwertowaniem video, w programie tym możemy wykonywać m.in.
następujące operacje: proste operacje na klatkach takie, jak: wklejanie,
wycinanie, zamienianie oraz nakładanie na nie filtrów, a także przycinanie
obrazu, zmiana rozdzielczości, obrót o zadany kąt, nakładanie napisów,
wyostrzanie obrazu. Omawiany program posiada także wbudowany kalkulator,
za pomocą którego możemy ustawić wielkość pliku po konwersji.
W programie tym występuje mechanizm projektu. Program ponadto
obsługuje skrypty, co pozwala zautomatyzować proces obróbki. Posiada on
wiele możliwości, jednak jego obsługa nie powinna stanowić problemu.
Przetworzony film możemy umieścić na stronie internetowej. Przykładowe okno
tego programu przedstawia poniższy rysunek.

41
Rys. 13. Program Avidemux
ćwiczeń.
1. Scharakteryzuj znane Ci formaty zapisu plików dźwiękowych.
2. Scharakteryzuj znane Ci formaty plików video.
3. W jaki sposób można otrzymać plik video w komputerze?
4.5.3. Ćwiczenia
Ćwiczenie 1
Przy wykorzystaniu programu rejestrującego dźwięk, znajdującego się
w systemie Windows, dokonaj zapisu dźwięku (rozmowy z kolegą), a następnie
zapisz go na dysku w formacie MP3.
1. dokonać wyboru programu służącego do rejestracji dźwięku znajdującego
się w systemie Windows,
2. zapisać rozmowę z kolegą do formatu wav,
3. dokonać konwersji do formatu MP3,
4. zapisać plik na dysku twardym komputera.

42
• Komputer wraz z mikrofonem oraz zainstalowanym system operacyjnym
Windows.
Ćwiczenie 2
Dokonaj zwiększenia głośności dźwięku w pliku muzycznym.
2. uruchomić program do edycji plików dźwiękowych np. Audacity,
3. dokonać edycji pliku muzycznego poprzez zwiększenie jego głośności,
4. zapisać plik.
• Komputer z zainstalowanym programem umożliwiającym edycję plików
dźwiękowych, np. Audacity.
Ćwiczenie 3
Dołącz napisy do pliku video.
2. uruchomić program do edycji plików video, np. Avidemux,
3. dokonać edycji pliku video poprzez nałożenie na niego napisów,
4. zapisać plik.
• Komputer z zainstalowanym programem umożliwiającym edycję plików
video, np. Avidemux.
1) przetworzyć plik dźwiękowy?
2) przetworzyć plik video?
3) skopiować plik z kamery video?

43
5. SPRAWDZIAN OSIĄGNIĘĆ
Test jednokrotnego wyboru składający się z 10 pytań z jednostki modułowej
„Tworzenie stron internetowych”.
Punktacja zadań: 0 lub 1 punkt
Za każdą prawidłową odpowiedź otrzymujesz 1 punkt. Za złą odpowiedź lub jej
brak otrzymujesz 0 punktów.
Instrukcja dla ucznia
1. Zapoznaj się z instrukcją.
2. W wyznaczonym miejscu wpisz imię i nazwisko oraz datę.
3. Sprawdź czy wszystkie pytania są zrozumiałe.
4. Test zawiera 10 pytań.
5. W każdym pytaniu możliwe są 4 odpowiedzi.
6. Tylko jedna odpowiedź jest prawidłowa.
7. Udzielaj odpowiedzi tylko na załączonej karcie odpowiedzi, stawiając
w odpowiedniej rubryce znak X. W przypadku pomyłki, błędną
odpowiedź należy zaznaczyć kółkiem, podpisać parafką, a następnie
ponownie zakreślić odpowiedź prawidłową.
8. Pracuj samodzielnie.
9. Czas na rozwiązanie testu to 10 min.
Zestaw pytań testowych
1. Język HTML wykorzystujemy do:
a. tworzenia stron WWW,
b. edycji dźwięku,
c. tworzenia animacji,
d. nagrywania filmów.
2. Przeglądarką Internetową nie jest:
a. Internet Explorer.
b. Chrome.
c. Adobe Reader,
d. Mozilla Firefox.
3. Na początku strony WWW umieszczamy znacznik:
a. head,
b. HTML,
c. body,
d. begin.
4. Do pogrubienia tekstu w języku HTML wykorzystujemy polecenie:
a. B.
b. I.
c. BOLD.
d. C.

44
5. Co oznacza skrót WYSIWIG?
a. What You See Is What You Get.
b. What You Saw Is What You Get.
c. What You See Is What Get.
d. What You Saw What Get.
6. Do tworzenia stron WWW możesz wykorzystać następujący program:
a. Audiocity.
b. MS FrontPage.
c. Corel Draw.
d. Autodesk AutoCAD.
7. Jakie rozszerzenie może mieć plik dźwiękowy:
a. mp3,
b. cdr,
c. jpg,
d. avi.
8. Który z programów nie służy do przetwarzania filmów?
a. Windows Movie Maker.
b. Adobe Premiere.
c. Microsoft FrontPage.
d. AnvSoft Movie DVD Maker.
9. Podstawowymi kolorami modelu CMYK są:
a. czerwony, zielony, niebieski, czarny,
b. czerwony, biały, niebieski,
c. niebieskozielony, purpurowy, żółty, czarny,
d. czarny, zielony, biały.
10.Do obróbki plików video możesz wykorzystać program:
a. MS FrontPage.
b. Audacity.
c. Avidemux.
d. Inventor.

45
KARTA ODPOWIEDZI
Imię i nazwisko ................................................................................................
Data ……………………
Nr
pytania
A B C D Punkty
1
2
3
4
5
6
7
8
9
10
Suma punktów:

46
6. LITERATURA
1. Aaland M.: Photoshop 5.5. Zastosowanie w Internecie. Helion, Gliwice
2002.
2. Bain S.: Corel Draw 10. Vademecum profesjonalisty. Helion. Gliwice
2002.
3. Beach A.: Kompresja dźwięku i obrazu wideo Real World. Wydawnictwo
Helion 2009
4. Flynn D.: Tworzenie cyfrowego wideo. Helion. Gliwice 2002.
5. Foster D. Coburg III, McCormick P.: Arkana Corel Draw 9. Wydawnictwo
RM, 2000.
6. Gajda W.: HTML, XHTML i CSS. Praktyczne projekty. Wydawnictwo
Helion 2011.
7. Georges G.: Techniki obróbki zdjęć cyfrowych. Praktyczne projekty.
Helion. Gliwice 2001.
8. Gorzelańczyk P: Stosowanie technik graficznych i multimedialnych.
Wydawnictwo CDN Piła 2012.
9. Hester N.: Po prostu FrontPage 2003 PL. Wydawnictwo Helion 2004.
10. http://WWW.kursHTML.edu.pl/
11. http://pure.pl
12. http://WWW.sp4zgierz.internetdsl.pl/
13. Korbecki M.: Komputerowe przetwarzanie dźwięku. MIKOM, Warszawa
1999.
14. Margulis D.: Photoshop 6. Korekcja i separacja. Vademecum
profesjonalisty. Helion, Gliwice 2003.
15. Meloni J.C.: PHP, MySQL i Apacze dla każdego. Wydawnictwo Helion
2007.
16. Miller D.: CorelDRAW 9. Zaawansowane techniki. Biblia. Helion, Gliwice
2001.
17. Oberlan Ł.: Photoshop 6. Ćwiczenia praktyczne. Helion, Gliwice 2002.
18. Ogórek B.: Corel PHOTOPAINT 10. Ćwiczenia praktyczne. Helion.
Gliwice 2002.
19. Owczarz-Dadan A.: Photoshop CS5 PL. Pierwsza pomoc. Wydawnictwo
Helion 2011.
20. Reinhardt R., Dowd S.: Adobe Flash CS4/CS4 PL Professional. Biblia.
Wydawnictwo Helion 2010.
21. Ross J.: PHP i HTML. Tworzenie dynamicznych stron WWW.
22. Rudny T.: Multimedia i grafika komputerowa. Wydawnictwo Helion 2010.
23. Schafer S.M.: HTML, XHTML i CSS. Biblia. Wydawnictwo Helion 2010.
24. Scott Kelby.: Fotografia cyfrowa. Edycja zdjęć. Wydawnictwo Helion
2010.
25. Sokół M., Sokół R.: XHTML, CSS i JavaScript. Pierwsza pomoc.

47
26. Sokół M.: ABC języka HTML i XHTML. Wydawnictwo Helion 2007.
27. Webster S.: Flash i PHP. Podstawy. Wydawnictwo Helion 2004.
28. York R.: CSS. Gotowe rozwiązania. Wydawnictwo Helion 2006.
29. Zakrzewski P.: Adobe Flash CS6 i ActionScript 3.0. Interaktywne projekty
od podstaw. Wydawnictwo Helion 2013.
30. Zimek R.: ABC CorelDRAW X5 PL. Wydawnictwo Helion 2011.

M4j1

Recommended

Recommended

More Related Content

Similar to M4j1

Similar to M4j1 (20)

More from Emotka

More from Emotka (20)

M4j1