Materiały do zajęć Projektowanie systemów informacyjnych

Wielkość: px
Rozpocząć pokaz od strony:

Download "Materiały do zajęć Projektowanie systemów informacyjnych"

Transkrypt

1 Projektowanie architektury informacji stron WWW Materiały do zajęć Projektowanie systemów informacyjnych Spis treści I. Wstęp... 6 II. Warsztat webmastera... 6 III. Szablon strony 7 IV. Wybrane znaczniki... 8 V. Odsyłacze (linki)... 8 VI. Wstawianie grafiki i tła... 9 VII. Tabele VIII. Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) IX. Ramki X. Architektura informacji stron 19 DODATEK Opracował Stanisław Skórka Instytut Informacji Naukowej i Bibliotekoznawstwa Uniwersytet Pedagogiczny w Krakowie Rok akad. 2010/11

2 Niniejszy skrypt jest pomocą do zajęć m.in. ze specjalizacji z informacji naukowej oraz projektowania systemów informacyjnych. Powstał w oparciu o zbiór liczne publikacje z tego zagadnienia oraz na bazie doświadczeń autora, który od kilkunastu lat zajmuje się tworzeniem stron WWW. Oprócz tego wykorzystane zostały także pozycje książkowe wymienione w bibliografii. Tylko do własnego użytku w ramach zajęć na specjalizacji Metody pracy w bibliotece: informacja naukowa. Instytut Informacji Naukowej i Bibliotekoznawstwa Akademia Pedagogiczna w Krakowie Materiały edukacyjne. Egzemplarz nie jest przeznaczony do sprzedaży Zebrał i opracował Stanisław Skórka Kraków październik 2010 Zagadnienia ujęte w niniejszych materiałach nie wyczerpują całości problematyki związanej z tworzeniem stron internetowych, zostały opracowane pod kątem ćwiczeń z projektowania stron o charakterze informacyjnym i edukacyjnym. Praca składa się z rozdziałów poświęconych poszczególnym problemom projektowania stron internetowych. Na początku zamieszczony został program zajęć dla studentów, wraz z wyszczególnieniem celów i umiejętności, jakie będą oni nabywać oraz form realizacji zajęć. Na końcu tej części znalazła się wybrana literatura oraz odnośniki do miejsc w Internecie, gdzie znajdują się wiadomości na temat projektowania. W rozdziałach znalazły się wskazówki dotyczące ogólnych wiadomości o szkielecie dokumentu html, odnośnikach, wstawianiu grafiki, tabel, ramek, arkuszy stylów. Opisano także strategię planowania architektury informacji serwisów internetowych. Autor ma nadzieję, iż zebrane tu materiały pomogą studentom w zrozumieniu zasad tworzenia funkcjonalnych stron internetowych, jak również okażą się pomocne w zajęciach i w samodzielnej pracy. Materiały uzupełnione są o przykłady tabel i stylów. Zawartość będzie modyfikowana i aktualizowana sukcesywnie wraz z rozwojem technologii projektowania serwisów WWW. Wszelkie komentarze i uwagi proszę wysyłać na adres: Stanisław Skórka 2

3 Planowany program zajęć 1. Opis celów. Metody pracy w bibliotece: informacja naukowa Projektowanie stron WWW Syllabus 1.1. Posługiwanie się Internetem w działalności informacyjnej i edukacyjnej Zastosowanie metod architektury informacji w planowaniu i projektowaniu stron i serwisów internetowych Poznanie języka HTML (HyperText Markup Language), XHTML, CSS, znajomość podstawowych pojęć (hipertekst, hipermedia, WWW, DHTML, JavaScript, Script, przeglądarka, edytor HTML, gif, jpeg, odsyłacz, znacznik, znaki specjalne, itp.) 1.4. Gromadzenie, opracowywanie i udostępnianie (prezentacja) informacji w Internecie Umiejętność tworzenia stron WWW (World Wide Web), według aktualnych wymagań i standardów (tabele, ramki, style, kolorystyka) Posługiwanie się programami komputerowymi jak np.: edytor HTML, klient FTP, edytor tekstu i in., do projektowania strony WWW Wykorzystywanie grafiki z Internetu 1.8. Znajomość zasad budowy funkcjonalnych i efektywnych w użyciu serwisów WWW 1.9. Samodzielnie wykonanie projektu serwisu internetowego 2. Opis treści 2.1. Wprowadzenie do programowania. Cechy języka HTML, XHML zasady tworzenia dokumentu hipertekstowego. Podstawowe polecenia (znaczniki, ang. tags) charakterystyka języka xhtml i jego wersji, rola W3C w rozwoju języka podstawowe elementy strony WWW (html, head, title, body, meta) sposób kodowania polskich znaków, opis zawartości treściowej strony (słowa kluczowe Keywords, opis Description) etykieta webmastera, czyli zasady, jakimi powinien się kierować projektant stron WWW zaprojektowanie prostej strony w oparciu o ked 2.X edytor stron WWW porównanie sposobu prezentacji tego samego dokumentu w przeglądarkach Mozilla, Opera i Internet Explorer 2.2. Projektowanie strony. Użycie odsyłaczy (odnośników, hiperłączy - ang. links). Wykazy (listy numerowane i nienumerowane). Obsługa edytora stron WWW ked. Zadania: rola odsyłaczy w dokumencie hipertekstowym, rodzaje odnośników: etykieta (kotwica), odsyłacz konstrukcja odnośników: <a name= etykieta ></a>; <a href= adres_strony ></a> postać odnośnika (tekst, ilustracja, animacja). stosowanie wykazów (list uporządkowanych i nieuporządkowanych), 1. Wykonanie strony na wybrany temat 2. Przygotowanie projektu pracy zaliczeniowej 2.3. Elementy Kaskadowych arkuszy stylów, wykorzystanie skryptów języka JavaScript na stronie WWW rodzaje stylów: a\ dołączone do zewnętrznego arkusza (plik.css) b\ zagnieżdżone <style type= text/css ></style> c\ importowane d\ lokalne e\ klasy i identyfikatory class= klasa ; ID= identyfikator ) f\ rozciąganie stylu, bloki <span></span>; <div></div> 3

4 przykłady skryptów i ich rola w dokumencie hipertekstowym 2.4. Wykorzystanie grafiki na stronie WWW. Programy graficzne i Zadanie: podstawy ich obsługi. Formaty plików graficznych:.gif,.jpg. wady i zalety stosowania grafiki w dokumencie HTML, wstawianie grafiki do dokumentu: <img src= nazwa_pliku > poznawanie programów graficznych, Paint Shop Pro, Micrografx, podstawowe operacje przy obróbce ilustracji dla strony hipertekstowej, sposób prezentowania grafiki w sieci, formaty plików i różnice pomiędzy nimi: gif (256 kolorów), jpeg (16 mln kolorów) tło w doku mencie, kolor i grafika jako tło. Projektowanie strony biblioteki/ośrodka informacji (praca zaliczeniowa) Forma realizacji: praca indywidualna studentów 3. Materiały wytworzone przez uczestników zajęć. Podstawowym materiałem wykonanym na ćwiczeniach będzie samodzielnie opracowany i zaprojektowany zbiór stron składający się z kilku dokumentów WWW połączonego hipertekstowo z zastosowaniem wyżej wymienionych elementów języka HTML. Praca ta zostanie przygotowana na dyskietce lub na komputerze w pracowni, a następnie oddana do zaliczenia Ocena serwisu wykonanego przez studenta będzie średnią z trzech ocen według kryteriów zaliczanych do architektury informacji: ocena za system organizacji treści, za system nawigacji i za szatę graficzną (layout) Zaprojektowane strony mogą być powiązane według czterech sposobów: hierarchicznie: Iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii hhhhhhhhhhhhh hhhhhhhhhhhhh hhhhhhhhhhhhh hhh jjjjjjjjjjjjjjjjddd dddddddddddjh hhhhhhhhhhhhhh heeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeee e eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeee yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyyyy yyyyyyyyyy Lllllllllllllllllllll lllllllllllllllllllllllllll lllllllllllllllllllllllllll lllllllllllllllllllllllllll lllllggggggggggg ggggggggggggg ggggggggggggg gg seryjnie: Ggggggggggggg ggggggggggggg gggggggggg hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh hhhhhhhhhhhh ssssssssssssssss sssssssssddddd dddddddddddd dddddddddddd dddddddddddd dddddddddddd ddddddddd : Ffffffffffffffffff fffff333eeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeefffffffff ffffffffffff333 uuuuuuuuuuuuu uuuuuuuuuuuuu uuuuuuffffff FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFF wirtualnie hhhhhhhhhhhhh hhhhhhhhhhhhh hhhhhhhhhhfffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffff eeeeeeeeeeeee eeeeeeeeeeeee eeeeeeeeeeeee eeeeeefffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff fffffffffffffffffff ffffffffffffff FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFFFFFFFF FFFFFYYYYY YYYYYYYY Y sekwencyjnie: Wykonane strony będą dotyczyć konkretnej dziedziny lub zjawiska związanego z pracą dydaktyczną i informacyjną biblioteki. 4. Umiejętności nabyte podczas zajęć. Do podstawowych umiejętności, jakie student powinien opanować należy: 1/ Projektowanie dokumentów hipertekstowych zgodnie z aktualną specyfikacją języka HTML. 2/ Planowanie projektu stron oraz przebiegu pracy 3/ Wykorzystywanie elementów multimedialnych (ilustracja, dźwięk, film i animacja) do wzbogacenia treści strony. 4/ Odnajdywanie informacji w Internecie. 5/ Znajomość podstaw architektury informacji dla stron WWW 6/ Ściąganie i wysyłanie plików za pomocą klienta FTP. 7/ Posługiwanie się witryną WWW w zakresie gromadzenia, przechowywania i prezentowania informacji, oraz wykorzystywanie Internetu w działalności dydaktycznej i informacyjnej biblioteki lub ośrodka informacji. 5. Ocena kursu pkt. ocena dst pkt. ocena + dst pkt. ocena db pkt. ocena + db pkt. ocena bdb wwwwwwwww wwwwwwwww wwwwwwwww wwwwwwwww wwwwwwwww wwwwwwwww www Eeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeeeeeee eeeeeeeee eeeeeeeeee Ooooooooooss sssssssssssoooo oooooos,lmncfj djdjdjdjdjdjdidi dkcicic i i i i ii i i icidisixkxkxixic icickc 4

5 6. Prace studentów - opracowanie planu serwisu internetowego (10) - przygotowanie projektu organizacji serwisu (15) - przygotowanie projektu nawigacji serwisu (15) - zaprojektowanie układu elementów na stronach (layout) (15) - wykonanie serwisu internetowego (min. 5 stron) (30) Na ostateczną liczbę punktów wpływa również poziom przygotowania studenta na zajęciach oraz frekwencja. 7. Literatura zalecana Książki: 1. S. Krug: Nie każ mi myśleć. O życiowym podejściu do funkcjonalności stron internetowych. Gliwice Wyd E. Meyer, CSS wg Ericha Meyera. Gliwice J. Cohen: Serwisy WWW. Projektowanie, tworzenie i zarządzanie. Gliwice J. Nielsen: Projektowanie funkcjonalnych serwisów internetowych. Gliwice L. Rosenfeld, P. Morville: Architektura informacji w serwisach internetowych. Gliwice Wyd R. Williams, Jak składać tekst? Komputer nie jest maszyną do pisania. Gliwice Wyd M. Pearrow: Funkcjonalność stron internetowych. Gliwice B. Danowski, Kaskadowe arkusze stylów. Ćwiczenia praktyczne. Gliwice Z. Płoski, Komputer, Internet. Szkolny słownik. Wrocław R. Płatek, Z. Okoń, Pajączek najlepszy polski edytor stron WWW. Gliwice B. Danowski,, HTML 4. Ćwiczenia praktyczne. Gliwice M. Sokół, Tworzenie stron WWW. Ćwiczenia praktyczne. Gliwice J. Szaniawski: Duży słownik informatyczny. Warszawa P. Wimmer: HTML stare i nowe. Warszawa M. Kasperski, A. Boguska-Torbicz, Projektowanie stron WWW. Użyteczność w praktyce. Gliwice J. Wrycza-Bekier, Webwriting. Profesjonalne tworzenie tekstów dla Internetu. Gliwice Czasopisma: 1. K. Grzenkowicz: Grafika dla webmastera.. W: Magazyn Internet, nr 6-12/98 i 1/99 (8 odc.) 2. Strony WWW bez tajemnic. CHIP Special nr 13 (36), grudzień J. Rafa, Poradnik praktyczny. Część 5. Tworzenie stron WWW. Magazyn Internet nr 6/ Mój serwis WWW. CHIP 2004 nr 2, s S. Skórka, Architekt informacji w bibliotece. Biblioteka w Szkole 2008 nr 1 Strony WWW (Netgrafia): 1. CSS Templates [http://www.ssi-developer.net/main/templates/] 2. Dynamic Drive CSS Library: [http://www.dynamicdrive.com/style/] 3. Eric Meyer on CSS [http://www.ericmeyeroncss.com/dloads/] 4. Kurs języka HTML P. Wimmer: [webmaster.helion.pl] 5. WEBDESIGN w praktyce J.Stychut: [webdesign.art.pl/index.htm] 6. BRAMA - informacje na temat projektowania stron WWW P. Andrusiewicz: [www.wsp.krakow.pl/~andrus/brama.shtml] 7. WEBMASTER czasopismo online dla profesjonalnych twórców stron WWW: [webmaster.pckurier.pl ] 8. WebReporter: [web.reporter.pl/html] 9. Test działania składni HTML: web.reporter.pl/html/testy/ 10. Designing Web Navigation: [www.webreference.com/dlab/9705/index.html] 11. Artykuł: Architektura informacji. Nowy kierunek rozwoju informacji naukowej. [ebib.oss.wroc.pl/2002/40/skorka.php] Opracował dr Stanisław Skórka 5

6 I. Wstęp Strona WWW jest plikiem tekstowym zapisanym najczęściej w formacie html (ale może to być także php, shtml, i inne) aby zaprojektować stronę wystarczy zwykły Notatnik z Windows, by móc oglądać jej zawartość potrzebna jest przeglądarka stron WWW (Internet Explorer, Mozilla, Netscape). Sieć złożona ze stron WWW wzajemnie połączonych za pomocą odsyłaczy hipertekstowych (linków) nazywana jest World Wide Web (globalną pajęczyną) Skrót html oznacza język projektowania: Hypertext Markup Language (język hipertekstowego znakowania dokumentów), aby strona była widoczna w przeglądarce trzeba ją zapisać jako plik.html, np.: index.html, default.html, itp. Aby przygotować własną stronę (witrynę) przede wszystkim należy zaplanować przebieg pracy, można to zrobić opierając się na następujących fazach: 1. Faza analityczno-projektowa analiza wymagań ustalenie zasad pracy plan realizacji projekt podziału treści i szaty graficznej projekt nawigacji i rozmieszczenia elementów na stronie (layout) 2. Realizacja projektu 3. Testowanie i wdrożenie 4. Promocja 5. Zarządzanie i aktualizacja Więcej na ten temat w rozdziale X. Architektura informacji Projektowanie w języku HTML polega na formatowaniu tekstu za pomocą znaczników (tags), są dwa rodzaje znaczników: blokowe (występują parami, np.: <P></P>), oraz elementowe (pojedyncze, np.: <BR>). Działanie znacznika blokowego obejmuje tekst, który jest nim ujęty, np.: <strong>to jest tekst pogrubiony</strong> Znaczniki <B> oznaczają pogrubienie tekstu, który znajdzie się pomiędzy nimi. Znacznik elementowe działają w jednym miejscu w dokumencie, np.: <strong>to jest tekst pogrubiony</strong >,<br> <em>a to jest kursywa</em> <BR> - przejście do następnej linii. Znacznik <EM></EM> formatują tekst na postać kursywy W obrębie znaczników, zarówno blokowych, jak i elementowych znajdować się mogą atrybuty dokładniej charakteryzujące dany element, np. ilustrację <img src="imagi2/bmiecznik.jpg" width="239" height="265" border="0" alt="rozmiar: bajtów"> Atrybuty: src- nazwa pliku graficznego, np.: logo.gif width szerokość obrazka, height wysokość obrazka border grubość ramki wokół obrazka alt tekst zastępczy Więcej na ten temat w rozdziale IV. Wybrane znaczniki Więcej na ten temat w rozdziale VI. Wstawianie grafiki i tła Atrybuty są przydatnym narzędziem dla webmastera ze względu na możliwość sprecyzowania wyglądu danego elementu na ekranie, przy jednoczesnym uniemożliwieniu wstawiania wartości domyślnych przez przeglądarkę. Używanie atrybutów skraca czas ładowania się strony w oknie przeglądarki. Najwięcej możliwości formatowania dają jednak kaskadowe arkusze stylów. Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów II. Warsztat webmastera Do projektowania stron internetowych potrzebne są programy, z których duża cześć jest dostępna za darmo, niestety czasem nie idzie to w parze z jakością. 1. Edytor stron WWW, np.: EzHTML (darmowy), Pajączek, Tiger 98, WebPager, Xpress (darmowy), lub edytor tekstu (Notatnik Windows), 2. Przeglądarki WWW, co najmniej dwie: Netscape Navigator/Communicator 6.x (pol. wersja Mozilla 1.x) i MS Internet Explorer PL 6.x 3. Program do obróbki grafiki rastrowej: Paint Shop Pro 6.x X,, Adobe Photoshop, GIMP (freeware), PaintNET (freeware) 6

7 4. Jeżeli edytor stron WWW nie ma takiej opcji, to należy jeszcze zaopatrzyć się w konwerter z Win-1250 (Latin 1) na stronę kodową ISO (Latin 2) Ogonki 97 Dodatkowo: 5. Program do tworzenia gifów animownych: Jasc Animated Shop 2.02, Gif Dispenser 1.0, Ulead Gif Animator 4.0, Gif Movie Gear Galerię clipartów zbiór adresów do grafik, ilustracji, tekstur i innych przydatnych na stronach WWW obrazków, dostępnych w Internecie pod adresem: III. Szablon strony WWW Podstawowy szablon dokumentu HTML przedstawia Rys. nr 1. Jest to tylko osnowa, aby dokument zawierał treść lub grafikę na ekranie, należy wstawić odpowiednie znaczniki w sekcji <body> </body>. Rys. 1 Szablon dokumentu html <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="creation-date" content=" t21:29:01z" /> <meta http-equiv="content-language" content="pl" /> <meta name="description" content="strona na temat..." /> <meta name="author" content="imię nazwisko" /> <title>strona WWW</title> </head> <body> <h1>tytuł strony</h1> </body> </html> Rys. 2: Budowa hierarchiczna dokumentu HTML Strona WWW zaczyna się i kończy znacznikiem <HTML>, wewnątrz znajdują się dwie oddzielne sekcje <HEAD>, czyli głowa i <BODY> - ciało dokumentu. W sekcji HEAD umieszcza się tzw. metainformację (informację o informacji) o stronie, znaczniki <META>, ich zadaniem jest przechowywanie informacji o treści strony: Description, Keywords, autorze strony Author, stronie kodowej Content-type, języku treści strony Content-language. Informacje te są przydatne między innymi dla zindeksowania strony przez tzw. roboty wyszukiwarek, co pozwala na ich odnalezienie za pomocą wyszukiwarek internetowych (Google, Szukacz, itp.) Hierarchia dokumentu html zawiera: 7

8 Drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; każdy element ma dokładnie jednego rodzica, oprócz elementu najwyższego w hierarchii. Dziecko (child) - element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu. Potomek (descendant) - element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu. Rodzic (parent) - element o jeden szczebel wyżej w drzewie w stosunku do danego elementu. Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu. Brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling). IV. Wybrane znaczniki Znaczniki blokowe <a href=""></a> <a name=""></a> <body></body> <div></div> <em></em> <h1></h1> <h2></h2> <h6></h6> <strong></strong> <ol> <li> </li> <li> </li> </ol> lista numerowana <p></p> <span></span> <sup></sup> <title></title> <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> Znaczniki elementowe <br> <hr> <meta name="" content=""> <img src=""> V. Odsyłacze (linki) wypunktowanie Odsyłacze są podstawowym narzędziem nawigacji, dzięki któremu możliwe jest poruszanie się pomiędzy stronami. Istnieje wiele podziałów hiperłączy, w jednym z nich wyróżnia się odsyłacze semantyczne (OS) i organizacyjne (OO). OS kierują do tekstu lub dokumentu o podobnej tematyce, OO umożliwiają poruszanie się po poziomach i rozdziałach w danej hiperprzestrzeni. Z punktu widzenia webmastera odsyłacze można podzielić wg kryterium zastosowania. I tak, wyróżnia się odsyłacze kierujące do: a) stron WWW (zewnętrzne) b) usług sieciowych ( , ftp, CHAT) c) etykiet (tekstu w obrębie dokumentu - wewnętrzne) d) innych dokumentów, np.: txt, PDF, doc, itp. Ad. a) hiperłącze do stron(y) WWW może mieć dwojaką postać: - względną <a href="strona.html" title="to jest treść dymka">etykieta odsyłacza</a> - bezwzględną 8

9 <a href="http://www.ap.krakow.pl/kbin/html/szablon.html" title="to jest treść dymka">szablon strony www</a> HREF skrót od hypertext reference TITLE opis odsyłacza, informacja, dokąd kieruje Ad. b) odsyłacz uruchamiający klienta poczty elektronicznej <a title="mój e- - uruchamiający sesję FTP: <a href="ftp://sunsite.icm.edu.pl" title="ftp">serwer ftp</a> Ad. c) Składa się z dwóch członów: - odsyłającego (np.: jako fragment spisu treści): <a href="#01">rozdział 1</a> - etykiety umieszczonej gdzieś na stronie <a name="01">rozdział 1</a> Najpopularniejsze zastosowanie to spisy treści i powrót na początek strony: <a href="#top">początek strony</a> W przeglądarce MSIE 6.x nie jest konieczne zastosowanie etykiety <a name= top ></a> Ad. d) kieruje do dokumentu nie będącego stroną WWW, takich jak: txt, doc czy pdf, np.: <a href="teksty/referat.pdf" title="tekst referatu">referat w wersji on-line</a> Adresy stron WWW powinny być pisane małymi literami bez polskich znaków, podobnie nazwy plików html. VI. Wstawianie grafiki i tła Pliki graficzne mogą być udostępniane na stronie WWW w formacie GIF (do 256 kolorów) i JPG (16 mln kolorów). Format GIF nadaje się do napisów, ponieważ potrafi zachować przezroczyste tło, ale ma małą liczbę kolorów. Format JPG jest najlepszy do kolorowej fotografii i obrazów. 1. Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny"> IMG - skrót od słowa image (ilustracja), SRC - skrót od słowa source (źródło) 2. Warianty wyświetlania ilustracji: * wielkość modyfikujemy atrybutami: width (szerokośc) i height (wysokość), jednostką miary są piksele Np. <img src="krajobraz.gif" width= 200 height= 50 alt= Krajobraz górski > - atrybuty te przyspieszają ładowanie się obrazka. obramowanie: parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli: Np. <img src="krajobraz.gif" width=120 height=160 alt= Tekst zamienny style= border: 5px solid black > - gdy ilustracja jest odsyłaczem parametr BORDER: 0px spowoduje, że nie pojawi się ramka wokół ilustracji. * odstępy od tekstu: parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu: Np. <img src="obrazek.gif" width=120 height=160 alt= tekst zamienny hspace= 50 > - ten obrazek jest oddalony 50 pikseli od tekstu w poziomie pozycjonowanie obrazka (CSS): specjalny zespół parametrów, text-align: left/right lub float: left/right steruje pozycją obrazka w stosunku do oblewającego go akapitu. Konstrukcja ma postać Np. <IMG SRC="obrazek" style= text-align: right; > lub <IMG SRC="obrazek" style= float: right > oblewanie tekstu z prawej strony 9

10 Jeśli obrazek ma być na środku strony to należy ująć go pomiędzy znaczniki : <div style= text-align: center > <img src= > </div> Duże ilustracje można pokroić na określoną liczbę kawałków, a następnie wstawić je do tabeli, pozwoli to na szybsze ładowanie się całego obrazka. Więcej na ten temat w rozdziale VII. Tabela pkt. 3. Aby przyspieszyć ładowanie się grafiki można na stronie poprzedzającej wstawić znacznik ilustracji z atrybutami szerokości i wysokości równymi 1, np..: <img src="obrazek.gif" width= 1 height= 1 hspace=0 vspace= 0 > 3. Tło na stronie WWW. Definiując <BODY> możemy wstawić parametr, który zadecyduje o graficznej postaci strony. <body style= background: url(adres_obrazka) > albo kolor Np. <body style= background: #fff"> - wywołanie pliku.jpg z folderu images dodatkowy parametr: bgproperties= fixed spowoduje, że w przeglądarce IE 4.x tło będzie stało w miejscu, a tekst przesuwał. Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów VII. Tabele 1. Podstawy projektowania tabel. Adaptując tabele dla potrzeb WWW kierowano się głównie potrzebą prezentacji danych tabelarycznych w postaci takiej, jaką widzimy w książkach czy prezentacjach multimedialnych. O ile w edytorach tekstów służą one głównie do tego właśnie celu, to w przypadku projektowania dokumentów hipertekstowych pole do zastosowania tabel jest znacznie szersze. Ale zacznijmy od podstaw. Aby zobaczyć jakąkolwiek tabelkę w oknie przeglądarki trzeba wpisać jej ogólne ramy bez atrybutów. <table border= 1 > <tr> <td> zawartość komórki 1</td><td> zawartość komórki 2</td> </tr> <tr> <td> zawartość komórki 3</td><td> zawartość komórki 4</td> </tr> </table> Otrzymamy: Zawartość komórki 1 Zawartość komórki 2 Zawartość komórki 3 Zawartość komórki 4 Definicja tabeli musi być umieszczona między tymi dwoma znacznikami <TABLE>, które stanowią jej ograniczniki. W ich ramach są umieszczane definicje rzędów <TR>, definicje komórek w rzędach <TD>, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn <TH>. Tabela w HTML samodzielnie rozkłada kolumny na stronie, dostosowuje ich szerokość i wysokość a także zawartość. Ćwiczenie: Zaprojektuj tabelkę z trzema kolumnami i pięcioma wierszami (zob. poniżej) Aby tabela zawierała obramowanie, wystarczy rozszerzyć definicję o atrybut BORDER= n, gdzie n - liczba pixeli. Niekiedy wyłącza się obramowania, gdyż dodatkowe linie wpływają ujemnie na jej czytelność. Zamiast obramowania najlepiej jest wyróżnić tekst w komórkach: 10

11 pogrubieniem, kursywą lub inną czcionką itd.. Efekt bez obramowań osiąga się poleceniem: BORDER= 0 2. Odstępy wewnątrz tabeli. Wyrównanie danych w komórkach Kolejnym atrybutem pozwalającym modyfikować wygląd tabeli jest CELLSPACING - odległość między komórkami, czyli grubość obramowania, jeśli jest ono widoczne. Można go użyć wówczas, gdy komórki (nie tabela) mają zawierać inne obramowanie niż domyślne. Innym atrybutem znacznika TABLE jest CELLPADDING - odstęp zawartości komórki od obramowania. Obydwa atrybuty działają na wszystkich czterech ścianach komórki. Np.: <table border= 5 cellpadding= 8 cellspacing= 15 > <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> Zarówno całą tabelę, jaki i zawartość w jej komórkach (celach) można ustawiać w poziomie i pionie. Pierwszy sposób zapewnia atrybut ALIGN, użycie go razem ze znacznikiem TABLE powoduje wyrównanie całej tabeli, wiersza, komórki. W pionie ustawiamy zawartość poprzez atrybut VALIGN Np.: <table border= 5 cellpadding= 8 cellspacing= 15 align= right > Ta tabela będzie znajdowała się przy prawym marginesie (zob. poniżej), inne polecenia: left (lewy) i center (środek) wiersz 1 <tr><td align= left ></td></tr> Dane w tej komórce przesuną się do lewego marginesu, to samo można zaprojektować dla kolumny w obrębie wiersza. Np. <td align= center ></td> Oprócz wyrównania poziomego dane w kolumnach możemy wyrównywać pionowo za pomocą parametru VALIGN, który może przybierać następujące wartości: top (góra). middle (środek), bottom (dół). <td valign= top ></td> <td valign= middle ></td> <td valign= bottom ></td> 3. Szerokość i wysokość tabeli Aby określić szerokość tabeli w obrębie znacznika TABLE umieszcza się atrybut WIDTH. Wartość tego parametru można wyrazić w procentach (wielkość względna) lub pikselach (wielkość bezwzględna) Np. <table border width= 60% > </table> lub <table border width= 600 > </table> Wysokość tabeli oznacza się atrybutem HEIGHT góra środek Wielkości bezwzględne najlepiej jest stosować, gdy w komórkach tabeli znajdują się elementy obrazka, w przeciwnym wypadku pojawią się przerwy pomiędzy kawałkami obrazka. dół wiersz 2 11

12 <td>komórka dolna</td> </tr> Widok: Wiersze połączone Komórka górna Komórka dolna Rys. nr 3 Wielkości względne dopasowują się do okna i rozdzielczości monitora, najlepiej je stosować, gdy w tabeli znajduje się tylko tekst. 4. Atrybuty COLSPAN i ROWSPAN COLSPAN - liczba kolumn, na które rozciąga się komórka (przykład nr 1) ROWSPAN - liczba wierszy, na które rozciąga się komórka (przykład nr 2) Przykład nr 1 <table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td colspan="2">kolumny połączone</td> </tr> <tr> <td width="20%">kolumna lewa</td> <td width="80%">kolumna prawa</td> </tr> </table> Widok: Kolumny połączone Kolumna lewa Przykład nr 2: Kolumna prawa <table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="20%" rowspan="2">wiersze połączone</td> <td width="80%">komórka górna</td> </tr> <tr> 5. Tabele i arkusze stylów Tabelę można zaprojektować także za pomocą stylów, co pozwala na precyzyjniejsze jej dostosowanie do własnych celów. Każdemu elementowi tabeli (komórce, ramce) można nadać inną postać. Poniżej zamieszczono cechy oraz ich wartości przydatne przy projektowaniu tabel. border-bottom-style - styl określa wygląd dolnej ramki border-left-style - styl określa wygląd lewej ramki border-right-style - styl określa wygląd prawej ramki border-top-style - styl określa wygląd górnej ramki Wartości stylu: none - nie ma ramki, wartość domyślna hidden - linia ukryta dotted - linia składająca się z kropek dashed - linia składająca się z kresek solid - linia tradycyjna groove - linia wklęsła przestrzenna ridge - linia wypukła przestrzenna inset - linia wklęsła outset - linia wypukła double - linia podwójna inherit - przejęcie wartości "rodzica", border-left-width - styl określa szerokość lewej ramki -right-width -bottom-width -top-width border-bottom-color - styl określa kolor dolnej ramki -left-color - styl określa kolor lewej ramki -right-color - styl określa kolor prawej ramki -top-color - styl określa kolor górnej ramki 12

13 Przykład 1. Tabela z zastosowaniem stylów <table style="border-style: dotted; border-width: thin; border-color: #86708f; padding: 0px; width: 730; text-align: center; vertical-align: top"> <tr> <td> <p>komórka lewa</p> </td> <td> <p>komórka prawa</p> </td> </tr> </table> Przykład 2 <table style="border-top-style: dotted; background-color: #eeeeee ; width: 70%; height: 20%"> <tr><td> <p>pojedyncza komórka</p> </td></tr></table> Tabelę można konstruować także za pomocą znacznika DIV: <div style="position: absolute; left: 400px; top: 195px; height: 160px; width: 270px; background-color: #E2DDE8; border : 1px black solid; border-color: #000033; padding-right: 1px; padding-left : 2px;"> </div> <p>komórka tabeli</p> Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów NOTATKI 13

14 VIII. Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) Ogólne polecenie stylu ma postać: selektor { cecha: wartość } lub bardziej rozbudowaną: selektor { cecha1: wartość1; cecha2: wartość2 }. Gdzie selektorem jest po prostu polecenie języka, np. P, LI, TD, BODY itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki. Przykład nr 1 P {font-family: Trebuchet MS } Selektorem jest P, cechą - rodzina czcionek, wartością - Trebuchet MS. Style mogą być umieszczane w dokumencie na kilka sposobów: 1. Kody formatujące są umieszczane na początku strony i oddziałują na cały dokument. NP.: Fragment nagłówka dokumentu z definicją znaczników BODY i P <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>zagnieżdżanie arkusza stylów</title > <meta name="description" content="style"> <style type="text/css"> body {margin-top: 0px; background-color: #ffffff; color: #000000; scrollbar-face-color: #d8c094; scrollbar-highlight-color: #aab0bf; scrollbar-3dlight-color: #271e0e; scrollbar-darkshadow-color: #c0dcc4; scrollbar-shadow-color: #271e0e; scrollbar-arrow-color: #000000; scrollbar-track-color: #425241; } p {font-size: 10pt; font-family: arial, helvetica; font-weight: normal} </style> </head> 2. Kody formatujące są umieszczane w środku tekstu (in-line style) i dotyczą wybranego znacznika dokumentu (styl lokalny). NP.: Właściwości ujęte w cudzysłów dotyczą tylko części dokumentu objętej znacznikami <P></P> <P style="font-size: 12pt; font-weight: bold; font-family: Helvetica">Treść akapitu</p> 3. Klasy, obejmują dowolny fragment dokumentu i nie są związane z wybranymi znacznikami. NP.: Dają dużo możliwości webmasterowi, pozwalają dowolnie manipulować akapitami na stronie WWW. U dołu klasy dla znacznika <P>, rozpoczynają się od kropki. <head> <style type="text/css"> p.normalny {font-family: helvetica; font-size: 10pt}.przypisy {font-family: helvetica; font-size: 8pt}.uwagi {font-family: helvetica; font-size: 10pt; fontweight: bold}.istotne {font-family: georgia, serif; font-size: 12pt; color: red}.ustaw {position: absolute; left: 2px; top: 3px; right: 10px; bottom: 10%} </style> </head> <body> <p class= istotne >Jakiś tekst</p> </body> W głównej części dokumentu klasa zostaje wstawiona w obrębie nawiasów <> 4. Kody formatujące są umieszczane na wzorcowych stronach na serwerze, a w dokumentach wstawiamy odpowiednie odwołania do tych stron, co powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do tzw. stylów zewnętrznych. NP.: Dokument o nazwie mojstyl.css zawiera zdefiniowane różne elementy, takie jak: body, p., a, h1-h3, td, li 14

15 body {background: url(folder/plik.jpg); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed; marginleft: 1cm; margin-right: 1cm; margin-top: 1cm} p {font-family: "arial", verdana, helvetica; font-size: 10pt; font-weight: normal; text-indent: 3 em} a {text-decoration: none; font-weight: bold} a:link {color: #000000} a:active {color: #660000} a:visited {color: #666600} a:hover {color: #0066ff} h1 {font: bold 16pt verdana, arial, helvetica; color: #000000} h1 span {font-size: 14pt; color: navy} h2 {font-size: 14pt; font-family: arial, helvetica; fontweight: bold; color: #181539} h3 {font-family: arial, helvetica; font-weight: bold; color: #181539} table, tr, td {font-family: arial, helvetica; font-size: 10pt; font-weight: normal} li {font-family: "arial", helvetica; font-size: 10pt; fontweight: normal} #center {text-align: center}.maly {font-size: 8pt}.italic {font-style: italic} Dokument ten znajduje się na serwerze pod podaną wyżej nazwą, korzystają z niego wszystkie te strony, które w nagłówku <HEAD> mają następujący zapis: <link rel=stylesheet href="mojstyl.css" type="text/css"> 5. Kody formatujące są importowane z innej strony za pomocą Np.: Podany jest adres bezwzględny do arkusza stylów mojstyl.css url("http://www.polbox.com.pl/style/mojstyl.css"); </style> Przyklad interaktywnego menu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>1</title> <meta http-equiv="content-language" content="pl"> <meta name="author" content="jacek"> <style type="text/css"> #menu {margin: ; width: 200px; border-right: 1px dotted; } #menu ul {list-style-type: none; margin: 0; padding: 0} #menu li a {padding: 3px 3px 3px 5px; display: block; background: #09C; borderbottom: 1px solid #fff; height: 35px; font: 9pt 'Trebuchet MS', 'Lucida Grande', Arial, sans- serif; color: #fff; text-decoration: none; border-right: 5px solid #42D0FF} #menu li a:visited {color: #DBE3F7} #menu li a:hover {background: #F60; color: #000; border-right: 5px solid #fff} </style> </head> <body style="margin: "> <div id="menu"> <ul> <li><a href="" title="">okładka</a></li> <li><a href="" title="">karty tytułowe</a></li> <li><a href="" title="">materiały wprowadzające</a></li> <li><a href="" title="">tekst główny</a></li> <li><a href="" title="">materiały uzupełniające tekst główny</a></li> <li><a href="" title="">materiały informacyjno-pomocnicze</a> </li> </ul> </div> <p><a href="05.html" title="">«poprzednia</a> <a href="01.html" title="">następna &raquo</a></p> </body> </html> 15

16 IX. RAMKI 1. Wstęp Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML, pozwalają na przeglądanie wielu dokumentów równocześnie (tzw. format metadokumentowy). Aby użyć tej nowej formy prezentacji dokumentów WWW trzeba utworzyć zbiór ramek na stronie podstawowej *.html, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia odsyłacza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi. Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nieinterpretujące ramki. Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie NOFRAMES. 2. Ramki w postaci kolumn Każdy z wydzielonych w pliku głównym obszarów jest zajmowany przez określoną stronę. U dołu przykład strony podstawowej, objętej znacznikami FRAMESET zamiast BODY, zawierającej podział na dwie kolumny -parametr COLS dzieli ekran kolumny - pierwsza od lewej o szerokości 25% ekranu, druga o rozmiarach dalszych (75%). Znacznik FRAME i parametr SRC przypisuje określonym częściom ekranu zawartość (czyli strony WWW), atrybut SCROLLING steruje wyświetlaniem pasków przewijania i może zawierać wartość: auto, yes, no. NAME oznacza nazwę dla określonej części ekranu. <HTML> <HEAD> <TITLE>Ramki</TITLE> </HEAD> <FRAMESET COLS="25%,*%"> <FRAME SCROLLING="auto" NAME="lewa_część" SRC="strona.htm"> <FRAME SCROLLING="yes" NAME="prawa_część" SRC="strona2.htm"> </FRAMESET> </HTML> Ćwiczenie 1: Przepisz przykład strony z lewej nadając mu nazwę okno.htm W miejsce nazw strona.htm i strona2.htm wpisz nazwy dwóch stron utworzonych na poprzednich zajęciach. Zobacz w przeglądarce jak wygląda strona okno.htm. Powinny być widoczne dwie poprzednio wprowadzone strony 3. Ramki w postaci wierszy Podobny schemat z wyjątkiem polecenia COLS możemy zastosować dla innego podziału ekranu. Parametr ROWS dzieli ekran na wiersze. Ćwiczenie 2: Przepisz poniższy przykład strony podstawowej dla ramek i nadaj jej nazwę okno2.htm. Dalej postępuj tak jak w ćwiczeniu nr. <HTML> <HEAD> <TITLE>Ramki z wierszami</title> </HEAD> <FRAMESET ROWS="30%,*"> <FRAME SCROLLING="auto" NAME="góra" SRC="strona1.htm"> <FRAME SCROLLING="auto" NAME="dół" SRC="strona2.htm"> </FRAMESET> </HTML> 4. Ramki wielodokumentowe Objaśnienie (do listingu poniżej) W pierwszej linii otwieramy dokument. Konstrukcję ramek rozpoczęto od zadeklarowania w drugiej linii liczby wierszy (trzy). W trzeciej linii od razu wstawiliśmy ramkę z przypisaną jej stroną, gdyż wiersz nie ulega żadnemu podziałowi. 16

17 </HTML> <FRAMESET ROWS=100,*,200> <FRAME SRC=strona1.htm> <FRAMESET COLS=35%,*,35%> <FRAME SRC=strona2.htm> <FRAME SRC=strona3.htm> <FRAME SRC=strona4.htm> </FRAMESET> <FRAME SRC=strona5.htm> </FRAMESET> </FRAMESET> </HTML> W czwartej linii ponawiamy definicję FRAMESET (niższego rzędu), dzieląc drugi wiersz na trzy kolumny. W piątej, szóstej i siódmej linii wstawiamy definicje konkretnych trzech ramek dla drugiego wiersza, przypisując im odpowiednie strony. W ósmej linii musimy zakończyć tę "lokalną" definicję FRAMESET. W dziewiątej linii tworzymy definicję ramki dla trzeciego wiersza, przypisując jej odpowiednią stronę. W dziesiątej linii kończymy "globalną" definicję FRAMESET. W jedenastej cały dokument. Ćwiczenie 3: Przepisz powyższy kod dla ramki wielodokumentowej. Zamiast nazw stronan.htm (N - numer) wpisz nazwy stron, które zostały zaprojektowane, zmodyfikuj wygląd tych stron, tak aby były prawidłowo wyświetlane w ramce (formatowanie tekstu, zmniejszenie czcionki itd.) 5. Odsyłacze Co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce? Jest to podstawowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom. Powróćmy do przykładu przedstawionego wyżej w ćwiczeniu nr 1. Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie strony z opisami. Lewej nadaliśmy nazwę lewa_część, natomiast prawej prawa_część. Należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o nazwie lewa_część. Do ramki tej jest ładowana strona zawarta w pliku o nazwie - strona.htm. Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki o nazwie prawa_część. Można to uczynić za pomocą następującej konstrukcji: <a href="egipt.html" target="prawa_część">egipt</a> itd. Analizując poszczególne człony powyższego zapisu: HREF="nazwa_ładowanej_strony" - dotyczy nazwy pliku, w którym jest zapisana dana strona, TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona. Widać tutaj rolę, jaką pełnią nazwy ramek. Istnieją cztery zastrzeżone nazwy w przypadku atrybutu TARGET: TARGET="_blank" - otwiera się nowe, czyste okno przeglądarki, które pojawia się przed poprzednim TARGET="_self" - odsyłacz ładuje się w swoim własnym okienku TARGET="_parent - odsyłacz ładuje się w pełnym wymiarze okienka, nawet gdy oglądamy je w innej ramce TARGET="_top" - likwiduje wszystkie ramki i przenosi Cię pod wskazany adres URL w czystym okienku przeglądarki, Ćwiczenie 4: Zmodyfikuj plik, który zastąpił w ćwiczeniu 1 plik strona.htm, wpisując odsyłacze kierujące strony do ramki prawej nazwanej prawa_część, a następnie wprowadź jeden odsyłacz kierujący wywołaną stronę do czystego okna przeglądarki. 6. Inne parametry dla ramek Do innych atrybutów przydatnych dla ramek i stosowanych dla znacznika FRAME należą: FRAMEBORDER - wyłączanie/włączanie obramowania trójwymiarowego, np. FRAMEBORDER= 0 (wyłączanie), 17

18 MARGINHEIGHT - odstęp między górną i dolną krawędzią ramki a jej zawartością, MARGINWIDTH - odstęp między prawą i lewą krawędzią a zawartością ramki, NORESIZE - uniemożliwienie zmiany rozmiaru ramki (normalnie można to robić) Niektóre atrybuty w obrębie znacznika FRAMESET: BORDER - dodatkowy odstęp pomiędzy ramkami w pikselach, BORDERCOLOR - kolor obramowania, COLS - podział okna w poziomie (na kolumny), ROWS - podział okna w pionie (na wiersze) NOTATKI 18

19 X. Architektura informacji stron WWW Projektując stronę z myślą o publikowaniu w Internecie, niezależnie od jej przeznaczenia, należy pamiętać o tym, że będą z niej korzystać użytkownicy o różnych umiejętnościach i wiedzy, dlatego na początku projektowania należy wziąć pod uwagę rozmaite kryteria wpływające na jej funkcjonalność. Zespół kryteriów uwzględnianych podczas tworzenia stron internetowych określa się mianem architektury informacji (AI) stron WWW. AI jest procesem organizowania, oznaczania, projektowania nawigacji i systemów wyszukiwawczych, które pomagają użytkownikom w znajdowaniu i zarządzaniu informacją. W Polsce ten termin nie jest jeszcze zbyt popularny, ale w Stanach Zjednoczonych posiada już sporą literaturę i nadal się rozwija. Przykładowy plan tworzenia architektury informacji Projektowanie AI obejmuje cztery główne obszary wymienione w definicji powyżej: 1. Organizowanie informacji 2. Projektowanie systemów nawigacji 3. System oznaczeń 4. System wyszukiwawczy 1. Organizowanie informacji Pierwszym krokiem przy planowaniu serwisu internetowego jest zebranie i zorganizowanie treści, polegające na podzieleniu całości informacji na mniejsze fragmenty, które będą ze sobą powiązane. Jest to szczególnie ważne przy rozbudowanych serwisach tematycznych. Podstawą organizacji treści może być przedmiot, zadanie, użytkownicy, geografia, chronologia czy porządek alfabetyczny. Najczęstszym schematem organizowania jest hierarchia (Rys. nr 4). 1. Wyznaczenie celów 2. Użytkownicy 2.1. określenie odbiorców 2.2. propozycje scenariuszy (przewidywane zachowania wyszukiwawcze użytkowników) Rys. nr 4 3. Zawartość treściowa serwisu 3.1. grupowanie informacji 3.2. organizowanie i oznaczanie treści 4. Struktura serwisu 4.1. zaprojektowanie budowy serwisu 4.2. wykonanie szkicu serwisu 4.3. zaprojektowanie systemów nawigacji globalnej i lokalnej 5. Projektowanie szaty graficznej 5.1. rozmieszczenie elementów na stronach 5.2. szkice projektowe 5.3. wykonanie serwisu na bazie projektów Kryteriami, które powinien uwzględnić architekt informacji podczas tworzenia struktury hierarchicznej dla zbioru stron, są szerokość i głębokość. Szerokość odnosi się do liczby opcji, z których może wybierać użytkownik na danym poziomie w hierarchii, głębokość do liczby tych poziomów w serwisie. Wybór hierarchii powinien być uzależniony m.in. od ilości informacji, przeznaczenia serwisu i preferencji użytkowników. Źle zaprojektowana hierarchia sprawia, że informacje są niedostępne dla użytkowników. Zbyt wąska i głęboka hierarchia zmusza do odwiedzani nadmiernej liczby dokumentów podczas poszukiwań, co może stać się przyczyną zjawiska zagubienia w hiperprzestrzeni. Z kolei zbyt szeroka i wąska stawia użytkownika przed wyborem jednej z bardzo wielu opcji, zjawisko takie nazwano przeładowaniem poznawczym. Dla hierarchii wąsko-głębokiej optymalnym rozwiązaniem jest podział do najwyżej pięciu poziomów. Strona główna (powitalna) dla serwisu opartego na hierarchii szeroko-płytkiej powinna udostępniać wybór opcji (odnośników) w liczbie ok. 7-9, nie więcej niż

20 Przekroczenie tej granicy powoduje wspomniane już zjawisko przeładowania poznawczego. Rys. nr 7 Rys. nr 7 System hipertekstowy Rys. nr 5 Serwisy, w których planowane jest powiększanie zasobów powinny być projektowane z zastosowaniem raczej hierarchii szeroko-płytkiej oraz jednoznacznych oznakowań, tak, aby zminimalizować zabłądzenie w systemie. Rys. nr 6 2. Projektowanie systemów nawigacji System nawigacji jest podstawowym narzędziem przemieszczania się, zarówno po niewielkich zbiorach dokumentów, jak i obszernych serwisach i katalogach stron WWW. Jennifer Fleming scharakteryzowała potrzeby użytkownika nawigującego, które warto wziąć pod uwagę w trakcie projektu. 1. Gdzie jestem? 2. Dokąd mogę iść (przemieścić się)? 3. Jak się tam dostać? 4. Jak wrócę do miejsca gdzie teraz jestem? W zależności od przeznaczenia serwisu, np.: zasoby typu edukacyjnego, pojawiają się szczegółowe potrzeby, takie jak: Skąd powinienem zacząć? Czy potrzebna jest mi specjalna wiedza lub narzędzie? Jak otrzymać odpowiednią dla mnie informację? Co zrobić, jeśli pojawią się pytania? To tylko niektóre z potrzeb szczegółowych. Ta sama autorka podała zasady funkcjonalnego systemu nawigacyjnego: 1. Łatwy do nauczenia 2. Konsekwentny 3. Zgodny z treścią strony (kontekstem) 4. Dostarcza informacji (interaktywny) 5. Oferuje wybór opcji 6. Używa jasnych i zrozumiałych oznaczeń 7. Zgodny z przeznaczeniem serwisu 8. Pomaga w dotarciu do celu Oprócz hierarchicznych schematów organizacyjnych występuje także system hipertekstowym, umożliwiający dowolne przeglądanie zasobów 20

21 Wskazówki projektowania nawigacji dla webmasterów: Rozmieszczaj informacje starannie, tak, aby użytkownik zawsze wiedział w którym miejscu systemu się znajduje Nie zmuszaj użytkownika do przerwania jego pracy przez podawanie odsyłaczy do innych stron, aplikacji lub miejsc Umieszczaj kontrolę nawigacji w systemie Zabezpiecz główny kontekst poszukiwań (interakcji), aby użytkownik nie musiał go sobie odtwarzać Minimalizuj opóźnienia sieci poprzez czytelną i jasną nawigację i zredukuj czas ładowania się Ad. c/ lokalny s.n. stosowany w rozbudowanych serwisach WWW, uzupełnia globalny s.n., wykorzystywany do połączenia podstron w serwisie. Ad. d/ kontekstowy s.n. oparty na odsyłaczach znajdujących się w tekście, widocznych jako wyróżniony tekst. Typy systemów nawigacji a. hierarchiczny b. globalny c. lokalny d. kontekstowy Ad. a/ hierarchiczny s. n. podstawowy s.n. oparty na zasadzie nadrzędności i podrzędności, ze strony nadrzędnej odsyłacze kierują do stron podrzędnych (Rys. nr 8). Więcej w rozdziale 1. Organizowanie informacji Inne podziały systemu nawigacji - poprzeczna (pozioma) obejmuje strony z tego samego poziomu, pozwala przejrzeć treść na określonym poziomie serwisu - pionowa (głęboka) kieruje w głąb hierarchii, zgodna z przedmiotem poszukiwań Rys. nr 8 Ad. b/ globalny s.n. najczęściej uzupełnia hierarchiczną organizację informacji w serwisie. Najprostszy g.s.n. zawiera pasek nawigacyjny u dołu każdej strony serwisu, na podstronach mogą znajdować się dodatkowo odsyłacze powrotne kierujące do strony głównej. Narzędzia nawigacji - paski nawigacyjne - ramki - menu ściągane (pull-down) - mapy odsyłaczy - indeksy stron - okruchy chleba zaznaczanie trasy nawigowania poprzez zmianę koloru odsyłaczy kierujących do odwiedzonych stron 21

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Materiały do kursu Zarządzanie informacją w bibliotecznych serwisach internetowych

Materiały do kursu Zarządzanie informacją w bibliotecznych serwisach internetowych Projektowanie architektury informacji stron WWW Materiały do kursu Zarządzanie informacją w bibliotecznych serwisach internetowych Spis treści I. Wstęp... 6 II. Warsztat webmastera... 6 III. Szablon strony

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

Bardziej szczegółowo

Tutorial. HTML Rozdział: Ramki

Tutorial. HTML Rozdział: Ramki Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

Blok dokumentu.

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

2. Projektowanie stron WWW podstawowe informacje

2. Projektowanie stron WWW podstawowe informacje 1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od

Bardziej szczegółowo

Projekty z Technologii Informacyjnych

Projekty z Technologii Informacyjnych Projekty z Technologii Informacyjnych Zad. 1. Opracuj prezentację w programie PowerPoint lub podobnym na zadany temat. Prezentacja powinna być przeznaczona do prezentowania w czasie ok. 10 minut. Zad.

Bardziej szczegółowo

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie

Bardziej szczegółowo

p { color: yellow; font-weight:bold; }

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Technologie stron www Strony www Statyczne HTML. CSS. Dynamiczne Oparte o bazy danych.

Bardziej szczegółowo

Deklarowanie tytułu związanej z tabelą

Deklarowanie tytułu związanej z tabelą Tabele 1 Deklarowanie tytułu związanej z tabelą Przychody w latach 2007-2010 Położenie pozbawione stylu Treść nagłówka Formatowanie położenia w stylach

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

Arkusze stylów CSS Cascading Style Sheets

Arkusze stylów CSS Cascading Style Sheets Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19 Spis treści Wstęp...z... 5 Rozdział 1. Nowa witryna sieci Web...z... 7 Tworzenie szkieletu witryny...s... 7 Ustawienia witryny...s...s... 8 Hierarchia witryny...s...s... 10 Nazwy i tytuły stron...s...s..

Bardziej szczegółowo

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

Bardziej szczegółowo

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

1.Formatowanie tekstu z użyciem stylów

1.Formatowanie tekstu z użyciem stylów 1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje

Bardziej szczegółowo

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

Bezbolesny wstęp do CSS

Bezbolesny wstęp do CSS CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

przygotował: mgr Szymon Szewczyk PODSTAWY

przygotował: mgr Szymon Szewczyk PODSTAWY S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy

Bardziej szczegółowo

CSS - 2. Właściwości tekstu, czcionek

CSS - 2. Właściwości tekstu, czcionek CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»

Bardziej szczegółowo

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.:
pierwsza treść, zdjęcie, tabele lub cokolwiek

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style=float: left>pierwsza treść, zdjęcie, tabele lub cokolwiek </div> Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie

Bardziej szczegółowo

SterBox. Przygotowanie Strony Użytkownika

SterBox. Przygotowanie Strony Użytkownika Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia

Bardziej szczegółowo

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem

Bardziej szczegółowo

Wstęp... 2. Plik index.htm... 2. Plik zaglowce.htm... 6. Plik uprawnienia.htm... 8. Plik bezpieczeństwo.htm... 9. Plik szanty.htm...

Wstęp... 2. Plik index.htm... 2. Plik zaglowce.htm... 6. Plik uprawnienia.htm... 8. Plik bezpieczeństwo.htm... 9. Plik szanty.htm... ZAWARTOŚĆ INSTRUKCJI Wstęp... 2 Plik index.htm... 2 Plik zaglowce.htm... 6 Plik uprawnienia.htm... 8 Plik bezpieczeństwo.htm... 9 Plik szanty.htm... 11 Połączenie podstron w witrynę... 11 Zobacz podgląd

Bardziej szczegółowo

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE Politechnika Gdańska Wydział Elektrotechniki i Automatyki Katedra Inżynierii Systemów Sterowania SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE Temat: Prosty serwis internetowy oparty o zestaw powiązanych

Bardziej szczegółowo

DODAJEMY TREŚĆ DO STRONY

DODAJEMY TREŚĆ DO STRONY DODAJEMY TREŚĆ DO STRONY SPIS TREŚCI Pasek narzędzi i wyszukiwarka aplikacji... 2 Dodawanie portletów... 3 Widok zawartości stron... 4 Zawartość portletu... 5 Ikonki wybierz oraz dodaj zawartość stron...

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo

[

]
Materiały dydaktyczne 1/5

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5 PODSTAWOWE INFORMACJE HTML (HyperText Mark-up Language) język programowanie, który pozwala na publikowanie treści w sieci WWW. Nie jest to klasyczny język liniowy (w HTML mamy dostęp w każdym miejscu do

Bardziej szczegółowo

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Zad.1 Zapoznaj się z poniŝszymi artykułami dotyczącymi projektowania stron WWW:. http://galeria.muzykaduszy.pl/zasady.php

Bardziej szczegółowo

OLIMPIADA INFORMATYCZNA 2010 ROK ETAP SZKOLNY

OLIMPIADA INFORMATYCZNA 2010 ROK ETAP SZKOLNY KOD UCZNIA OLIMPIADA INFORMATYCZNA 2010 ROK ETAP SZKOLNY * Postaw znak x w okienku obok właściwej odpowiedzi. 1. Przybornik w programie Paint to element programu, w którym znajdują się: kolory przyciski

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

Specyfikacja mailingu GG Network

Specyfikacja mailingu GG Network Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy

Bardziej szczegółowo

Technologie Informacyjne

Technologie Informacyjne Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje

Bardziej szczegółowo

Kurs HTML 4.01 TI 312[01]

Kurs HTML 4.01 TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów

Bardziej szczegółowo

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

Podstawy tworzenia stron internetowych

Podstawy tworzenia stron internetowych Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.

Bardziej szczegółowo