Programy kompozytorskie, authoring, strony web Programowanie stron internetowych Piotr Ciechomski 15-17 kwietnia 2011 r
Część I - Historia języka HTML [za Wikipedią] Początki W 1980 fizyk Tim Berners-Lee, pracujący dla ośrodka naukowo-badawczego CERN, stworzył prototyp hipertekstowego systemu informacyjnego ENQUIRE. System wykorzystywano do organizowania i udostępniania dokumentów związanych z badaniami naukowymi. Rewolucyjność pomysłu polegała na tym, Ŝe uŝytkownik, posługując się odnośnikami, mógł z jednej lokalizacji przeglądać dokumenty fizycznie znajdujące się w innych miejscach na świecie. W 1989 Berners-Lee i inŝynier oprogramowania CERN Robert Cailliau przedstawili równolegle dwie propozycje hipertekstowych systemów informacyjnych opartych na sieci Internet. Oba projekty cechowała podobna funkcjonalność. Rok później opracowali wspólną propozycję zaakceptowaną przez CERN projekt WorldWideWeb (W3)[1]. Pierwsza specyfikacja Pierwsza, publicznie dostępna, specyfikacja języka HTML, nazwana HTML Tags (pol. Znaczniki HTML), została zamieszczona w Internecie przez Bernersa-Lee w 1991.[2][3] Zawiera 22 znaczniki, tworzące początkowy, prosty szkielet HTML-a. Trzynaście z tych elementów istnieje do tej pory w specyfikacji HTML 4.[4] HTML został napisany w oparciu o język SGML, jednak nie posiadał formalnej definicji w SGML-u. Sytuacja zmieniła się w połowie 1993, kiedy organizacja IETF opublikowała pierwszą propozycję specyfikacji języka HTML autorstwa Bernersa-Lee i Dana Connolly Hypertext Markup Language (HTML) Internet-Draft (pol. szkic) zawierającą opis gramatyki w postaci SGML Document Type Definition (pol. definicja typu dokumentu)[5]. Opierając się na tym dokumencie twórcy przeglądarek eksperymentowali z HTML-em modyfikując atrybuty istniejących juŝ znaczników oraz dodając całkowicie nowe. Szkic wygasł sześć miesięcy później, ale był znany z obsługiwania specyficznych dla przeglądarki NCSA Mosaic znaczników, słuŝących do wstawiania obrazków. Fakt ten odzwierciedlał filozofię IETF bazowania przyszłych standardów na prototypach, które odniosły sukces[6]. Podobnie Dave Raggett pod koniec 1993 w swoim szkicu HTML+ (Hypertext Markup Format) sugerował standaryzację juŝ zaimplementowanych znaczników np. związanych z tworzeniem tabel i formularzy[7]. Po wygaśnięciu szkiców HTML i HTML+ na początku 1994 organizacja IETF wydzieliła HTML Working Group, która w 1995 stworzyła HTML 2.0 pierwszą oficjalną specyfikację języka HTML, traktowaną jako standard i podstawę przyszłych implementacji kolejnych wersji HTML-a. Specyfikacja HTML 2.0, opublikowana w 1996 jako Request for Comments, zawierała pomysły zarówno ze szkicu HTML jak i HTML+.[8] "HTML 1.0" nigdy nie istniał. Oznaczenie 2.0 zostało nadane w celu odróŝnienia nowej specyfikacji od wcześniejszych szkiców[9]. Dalszy rozwój HTML-a pod pieczą IETF przeciągał się ze względu na konflikt interesów. Od 1996 specyfikacje HTML rozwijane były z udziałem komercyjnych producentów oprogramowania przez organizację World Wide Web Consortium (W3C). W 2000 HTML stał się międzynarodowym standardem (ISO/IEC 15445:2000). Ostatnia specyfikacja języka HTML to opublikowana w 1999 przez W3C HTML 4.01. Jej błędy zostały poprawione przez erratę opublikowaną w 2001 1
Część II - Netykieta WWW Na pewno kaŝdy z Was zastanawia się od czego zacząć tworzenie swojej własnej strony internetowej. Odpowiedzią nie jest poznanie niewiadomo jakich technik, programów czy teŝ języków skryptowych. Na początku polecam skupić się nad usability (uŝytecznością) naszej strony. Nad tym aby zachęcić potencjalnego uŝytkownika do odwiedzenia naszej strony oraz aby nie zrazić go źle zaprojektowaną stroną. Oto kilka rad i wskazówek nad którymi powinniśmy pomyśleć, zanim zabierzemy się za kodowanie naszej pierwszej strony. Waga stron WWW: Strona powinna zajmować na serwerze jak najmniej miejsca. Zawsze powinno brać się pod uwagę tych uŝytkowników, którzy posiadają słabsze łącze internetowe. Strony powinny być rozsądnie zagospodarowane grafiką, poniewaŝ nadmierna długość otwierania zniechęci uŝytkownika i opuści on naszą stronę. Obrazy na stronie powinny mieć jak najniŝszą wielkość dobraną tak, by róŝnica jakości była niezauwaŝalna na monitorze. Poruszanie się po stronie WWW: Poruszanie po naszej stronie WWW powinno być łatwe i intuicyjne. Oznacza to, iŝ uŝytkownik nie moŝe zabrnąć tam, skąd nie będzie powrotu. Na kaŝdej stronie muszą znajdować się odnośniki do podstron. Najlepszym rozwiązaniem jest menu, takie same na kaŝdej z podstron. Grafika na stronie WWW: Najlepszym rozwiązaniem, na np. galerię na naszej stronie, jest umieszczenie miniaturek, które po kliknięciu odwołają się do zdjęcia poprawnej rozdzielczości. TakŜe elementy w technologii flash powinny mieć swoje odpowiedniki w HTML, co jest waŝne, gdy dany uŝytkownik nie ma zainstalowanego Flasha na swoim komputerze. Tło i banery na stronie WWW: NaleŜy postarać się, aby tło na naszej stronie było raczej spokojne niŝ pstrokate i kolorowe. Błędem jest teŝ, iŝ niektóre strony posiadają tło, które zlewa się z tekstem, przez co nie sposób przeczytać np. waŝnego numeru telefonu lub adresu, maila itp. Banery na stronie muszą być równieŝ stonowane, nie pstrokate, migające, poniewaŝ takie banery tylko irytują uŝytkownika strony. Polskie znaki na stronie WWW: NaleŜy pamiętać, Ŝe polskie strony kodujemy w standardzie ISO-8859-2, w innym przypadku nie będą wyświetlane polskie znaki (ogonki). Sprawdzaj wygląd strony: Aby nasza strona była przyjazna uŝytkownikom, naleŝy przetestować jej wygląd na co najmniej trzech przeglądarkach internetowych (Internet Explorer, Opera, Firefox). Niestety to co na jednej przeglądarce moŝe wyglądać dobrze, na innych moŝe wyglądać zupełnie inaczej. 2
Szanuj prawa autorskie: NaleŜy pamiętać, Ŝe na umieszczanie cudzych utworów muzycznych, fotografii, filmów, naleŝy mieć pozwolenie twórcy, w innym przypadku jest to kradzieŝ. Twórz strony kodem: Niewskazane jest tworzenie strony w programach takich jak Microsoft Word i podobne, poniewaŝ takie programy dodają do stron bardzo duŝo niepotrzebnego kodu, przez co strona ładuje się nadzwyczaj wolno. Uaktualniaj swoją stronę: Nie pozwól aby strona tkwiła w stanie początkowym na wieki. Myślę Ŝe tych kilka WAśNYCH wskazówek da pogląd na to, jak naleŝy zaprojektować naszą stronę oraz czego naleŝy się wystrzegać przy tworzeniu stron WWW. 3
Część III Wprowadzenie do HTML. Stronę WWW moŝna tworzyć w róŝnych edytorach, w najgorszym wypadku moŝe być to nawet notatnik jednak ta metoda nie jest polecana bo notatnik nie ma wbudowanej funkcji sprawdzania składni co często skutkuje literówkami w kodzie wynikowym. Z powodzeniem za to moŝna kodować naszą stronę za pomocą darmowych programików (polecam PSPAD). Na początku najlepiej jest utworzyć sobie nowy katalog gdzie trzymane będą wszystkie pliki związane z naszą stroną. Stronę główną, nazywaną równieŝ startową, naleŝy nazwać index.html/index.htm. Następne strony moŝna nazywać juŝ dowolnie, z tym Ŝe lepiej nie uŝywać w nazwie wielkich liter, znaków specjalnych (np. / \ : ; *), spacji, polskich liter (ą, ś, ć... itd). Najlepiej zacząć od wpisania ramy. Ramy dokumentu HTML. KaŜda strona WWW powinna posiadać takowe ramy. Legenda ramy: <html></html> - początek dokumentu html <head></head> - nagłówek dokumentu html, w nim trzymane są informacje o kodowaniu, informacje dla wyszukiwarek, tytuł itp... <title></title> - tytuł naszej strony wyświetlany w pasku górnym przeglądarki <body></body> cała treść strony, tzw. ciało strony Wpisywanie tekstu: Zwykły tekst wpisujemy bezpośrednio z klawiatury w sekcji <body>. Wszystkie wiersze będą wtedy automatycznie zawinięte, stąd przy wpisanym tekście: Ala ma kota... otrzymamy: Ala ma kota... 4
Znaczniki: Aby móc dowolnie edytować wpisany tekst musimy posłuŝyć się znacznikami. Znacznik to tekst umieszczony w nawiasach ostrych, np. <center>, który jest niewidoczny na stronie, a który jest odpowiedzialny między innymi za wstawianie tła na stronę, zmianę czcionki, itp. Znaczniki wpisujemy zawsze na początku jak i na koniec tekstu,np.: lub: <center> <center>tekst wyśrodkowany</center> Tekst wyśrodkowany </center> KaŜdy otwarty znacznik naleŝy zamknąć, stosując znacznik analogiczny do otwierającego poprzedzając go znakiem slash /. Oczywiście istnieją niektóre wyjątki ale o nich później. Nie ma zasadniczej róŝnicy jakimi literami piszemy znaczniki, lecz ze względu na czytelność i przejrzystość kodu najlepiej pisać je małymi literami. Znacznik końca linii: <br /> Aby napis z przykładu powyŝej napisać tak jak chcieliśmy, czyli jeden pod drugim, naleŝy po kaŝdym wyrazie wstawić znacznik końca linii, np.: otrzymamy: Ala ma kota... Znaczniki końca linii moŝna dowolnie mnoŝyć, wtedy uzyskamy tyle odstępów ile znaczników uŝyjemy, np.: otrzymamy: Ala ma kota... 5
UWAGA! NaleŜy równieŝ zauwaŝyć, iŝ znacznik końca linii jest jednym z wyjątków i nie posiada swojego zakończenia! Tekst pogrubiony: Aby pogrubić wskazany tekst, naleŝy skorzystać ze znacznika <b></b>, np: Tekst pochylony: Aby zastosować kursywę na wskazanym tekście, naleŝy skorzystać ze znacznika <i></i>, np.: Tekst podkreślony: Aby podkreślić wskazany tekst naleŝy skorzystać ze znacznika <u></u>, np.: Właściwości znaczników: Znaczniki które wymienione były powyŝej moŝna dowolnie łączyć, np. <b><i><u>ala ma kota </b></i></u> naleŝy pamiętać, Ŝe przy łączeniu znaczników zamykamy je w kolejności odwrotnej niŝ je otwieraliśmy. Własne obrazki na stronie WWW: Aby poprawnie wstawić obrazek naleŝy wpierw wstawić go fizycznie do katalogu, gdzie znajduje się dokument html. Następnie naleŝy posłuŝyć się znacznikiem: a) gdzie w miejscu ścieŝki wpisujemy nazwę pliku, w przypadku gdy plik znajduje sie W TYM SAMYM miejscu co dokument html : b) gdzie w miejscu scieŝki wpisujemy katalog a następnie nazwe pliku w przypadku gdy obrazek znajduje sie w podkatalogu. 6
Znacznik alt słuŝy do opisania obrazka w przypadku gdy uŝytkownik nie zechce wyświetlaćobrazków na stronie WWW. TudzieŜ gdy obrazek przez przypadek nam się usunie. Na stronie WWW najczęściej stosujemy: GIF- jeśli grafika dotyczy, przycisków, tła, itp. Zalety: zajmuje bardzo mało na serwerze Wady: Kiepska jakość. JPG jeŝeli grafika dotyczy obrazków wstawianych na stronę. Zalety: Dobra jakość Wady: Potrafi zająć bardzo duŝo miejsca na serwerze. PNG łączy zalety GIF I JPG. UWAGA! Nie stosujemy BMP ze względu na nikłą jakość kompresji, przez co strony wczytują się za długo! Odnośniki na stronie WWW: Odsyłacze słuŝą do przemieszczania się pomiędzy wszystkimi stronami. Tak jak poszczególne rozdziały w ksiąŝce tak strony WWW są podzielone na podstrony. KaŜda podstrona jest osobnym plikiem HTML, z tą samą ramą, róŝnić się moŝe jedynie treścią. Kiedy chcemy umoŝliwić przechodzenie z jednej strony na drugą naleŝy stosować odsyłacze, aby umoŝliwić to uŝytkownikowi. Składnia odsyłacza do podstrony wygląda następująco: Zasada wpisywania ścieŝki do podstrony jest taka sama jak w przypadku obrazków. Zaś Jakiś tekst odpowiada za opis, gdzie przeniesiemy się po kliknięciu na dany odsyłacz. WaŜne aby opis odsyłacza był na tyle czytelny dla uŝytkownika, aby ten wiedział gdzie się przemieszcza. WaŜne jest takŝe aby zawsze była moŝliwość powrotu z danej podstrony, aby nie wpędzić uŝytkownika w przysłowiowy kozi róg. Akapit: EFEKTY TEKSTOWE: Akapit stosujemy uŝywając znacznika: Gdy go zastosujemy, tekst automatycznie przejdzie nam do następnej linii i powstanie przerwa. Gdy stosujemy bezpośrednio po sobie teksty róŝnej treści, warto, aby taka przerwa była. MoŜemy do znacznika <p> dodać dodatkowo trzy atrybuty, i tak na przykład: 7
Tekst po lewej stronie (domyślna wartość). Tekst w centralnej części strony. Tekst po prawej stronie. Tytuł: Jeśli chcemy nadać tytuł, uŝywamy wtedy znacznika: UWAGA! w miejsce x wstawiamy wartość. Im większa liczba, tym nasz tytuł będzie mniejszy. Znacznik tytułu moŝe być stosowany wraz z atrybutem align. Tytuł po lewej stronie (domyślna wartość). Tytuł w centralnej części strony. Tytuł po prawej stronie. WyróŜnienie: Istnieją dwa rodzaje wyróŝnienia w tekście: Zwykłe wyróŝnienie Mocne wyróŝnienie Indeks: Będzie nam potrzebny gdy chcemy np. wprowadzić jakieś bardziej złoŝone operacje matematyczne. Dzieli się na dwa indeksy, indeks górny oraz dolny: Indeks górny Indeks dolny 8
Lista wyliczeniowa: UŜywamy jej gdy chcemy wyliczyć lub wypisać elementy w osobnych wierszach. Znacznik wygląda następująco: do znacznika <ul> moŝliwy jest atrybut type określający rodzaj wypunktowania w liście. I tak kolejno: "disc" - (domyślny) koło "circle" okrąg "square" - wypełniony kwadrat Lista wyliczeniowa numerowana: W tym przypadku zmienia się tylko znacznik początkowy: w tym przypadku takŝe moŝliwy jest znacznik type, w tym wypadku określa nam on kolejno: "1" (domyślny) - numeracja według liczb arabskich "I" - według duŝych liczb rzymskich "i" - według małych liczb rzymskich "a" - według małych liter "A" - według duŝych liter 9
Część IV CSS. CSS - Kaskadowe Arkusze Stylów (Cascading Style Sheet). Zostały stworzone po to aby uelastycznić wygląd stron WWW Nie występuje samodzielnie, jest ściśle powiązany z cała witryną WWW Dzięki CSS wszystkie polecenia które dotyczą formatowania moŝna umieścić w jednym arkuszu i powiązać go z daną stroną WWW UWAGA na róŝną interpretację stylów przez róŝne przeglądarki! Legenda: Selektor- jest to zwykły znacznik, taki jak np. <p> lub <b> Cecha- atrybuty formatowania, takie jak np. color Wartość- wartość danego atrybutu, takie jak np. red, left. Wstawianie stylów: Istnieją róŝne sposoby wstawiania stylów, oto niektóre z nich: Styl lokalny: Pozwala na nadanie formatowania pojedynczemu elementowi strony. UŜywamy go w tej samej linii, w której znajduje się element formatowany. Przy uŝyciu więcej niŝjednego atrybutu, rozdzielamy je średnikami. np. Styl obszaru: Pozwala na zawarcie większego fragmentu dokumentu HTML w stylach CSS. SłuŜy do tego znacznik <span>...</span> wydzielający nam dokładnie fragment którego ma dotyczyć dany szablon CSS. np. 10
Styl blokowy: Pozwala na zawarcie bloku dokumentu HTML w stylach CSS. SłuŜy do tego znacznik <div>...</div>. Jest on mocniejszy od znacznika <span>. MoŜe on oprócz cech zawierać inne elementy blokowe <div> oraz <span>. Został on stworzony do tworzenia róŝnego rodzaju struktur. Osobny, wewnętrzny arkusz stylów: Wpisywany w nagłówku strony, dokładniej w sekcji <head>..</head>. Stosowany jest do wielokrotnego formatowania tych samych elementów na stronie. np. wtedy w kaŝdym miejscu, w którym występuje znacznik <p>, będzie on koloru niebieskiego. Osobny, zewnętrzny arkusz stylów: Jest to plik, z rozszerzeniem *.css. Zewnętrzny arkusz stylów jest największą zaletą css ze względu na takie samo formatowanie strony w obrębie całego serwisu. Zmieniając kolor lub rodzaj czcionki, zmiany te wprowadzamy hurtowo do wszystkich dostępnych stron w naszym serwisie zaoszczędzając tym samym mnóstwo czasu oraz kodu. W dokumencie HTML, w sekcji <head >wpisujemy odnośnik do naszego arkusza stylów: 11
Dokument CSS moŝe byc tworzony nawet w najzwyklejszym edytorze tekstowym, który dokument ten zawierać będzie same deklaracje stylów.: Czcionka: Rozmiar: Selektory: Rozmiar czcionki moŝemy określać na 2 sposoby: Jednostki długości, np. 10cm, 4mm Procent danej wielkości, np. 20%, 45% Rodzaj: Rodzaj czcionki piszemy nazywając ją tak jak nazywa się dany krój czcionki. Rozdzielamy przecinkiem jeŝeli jest ich więcej niŝ jedna. JeŜeli dany uŝytkownik nie posiada danej czcionki to zostanie wybrana następna czcionka z listy. JeŜeli czcionka składa się z kilku wyrazów, wtedy uŝywamy apostrofów, np.: Times New Roman Styl: Polecenie pozwala obrać czcionce dany styl, są 3 style do wyboru (wpisujemy jako styl): normal - czcionka normalna (podstawowa) italic - czcionka pochylona (jeŝeli niedostępna, automatycznie wybierany jest styl oblique) oblique - równieŝ czcionka pochylona (podobna jak poprzednio) Waga: 12
Nadaje wagę danej czcionce, do wykorzystania mamy: normal - czcionka normalna (podstawowa) bold - czcionka pogrubiona Tekst: Kolor: Zamiast kolor wpisujemy definicje koloru w języku angielskim lub w kodzie szesnastkowym. Dekoracja tekstu: SłuŜy nam do uwypuklenia danego tekstu poprzez jedną z dostępnych dekoracji: none - bez zmian underline - podkreślenie line-through - przekreślenie overline - nadkreślenie blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7) UWAGA! Dekoracje moŝna łączyć uzyskując w ten sposób ciekawe efekty! Wyrównanie: MoŜemy wyrównywać tekst wpisując jedne z trzech wartości: left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie) Tło kolorowe: Tło: Polecenie to umoŝliwia wstawienie tła w dowolnym kolorze. Zamiast kolor wpisujemy definicje koloru w języku angielskim lub w kodzie szesnastkowym. 13
Tło obrazkowe: Polecenie umoŝliwia wstawienie tła z dowolnym obrazkiem w tle. W ścieŝce dostępu wpisujemy adres grafiki, tak jak w zwykłym HTML. Powtarzalność tła obrazkowego: Pozwala określić powtarzalność tła obrazkowego, zamiast powtarzanie naleŝy wpisać jedno z wartości: repeat - powtarzanie tła w obu kierunkach (domyślnie) repeat-x - powtarzanie tła tylko w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek) Pozycja tła obrazkowego: Określamy pozycje obrazka na podstawie wartości: o o o o o o o o o center - obrazek na środku (w centrum) left - obrazek po lewej right - po prawej top - na górze bottom - na dole left top - lewy-górny róg left bottom - lewy-dolny róg right top - prawy-górny róg right bottom - prawy-dolny róg Klasy: Klasy i pseudoklasy: Dzięki klasom moŝemy przypisywać róŝne właściwości tym samym obiektom i później się do nich tylko odwoływać poprzez unikalną nazwę, co zaoszczędza nam miejsca w kodzie strony. 14
odwołanie: np: przykład: w CSS: w HTML: Pseudoklasy: JeŜeli chcemy aby dany element miał róŝne zachowanie w zaleŝności od swojego połoŝenia, uŝywamy wtedy pseudoklas. Za przykład moŝe posłuŝyć znacznik odnośnika <a>...</a>. Znacznik ten posiada róŝne stany które są wywoływane przez uŝytkownika zaleŝnie od funkcji jaką pełni. I tak mamy 4 stany: active - oznacza Ŝe link był odwiedzany (aktywny) link oznacza link nieaktywny visited oznacza link odwiedzony hover oznacza link gotowy do kliknięcia (kursor nad linkiem) Aby nadać właściwości poszczególnym stanom, uŝywamy właśnie pseudoklas. Robimy to w następujący sposób: 15
Część V Tabele Podstawowa struktura tabeli: Tabele budujemy stosując trzy znaczniki: -znacznik początku i końca tabeli: - znacznik początku i końca wiersza - znacznik początku i końca komórki struktura całej tabelki wygląda zatem następująco: Wiersze i kolumny moŝemy dodawać dowolnie, powielając znaczniki <tr> i <td>. WaŜne jest, Ŝeby liczba wierszy w kaŝdej kolumnie była taka sama. Aby wpisać dowolny znacznik lub znak w kolumnę naleŝy to zrobić pomiędzy znacznikami <td>...</td>. KaŜdy inny zapis będzie nieprawidłowy. Zastosowanie tabeli: Za pomocą tabel moŝemy w dowolny sposób dzielić stronę na elementy. Dzięki temu moŝemy w prosty sposób wydzielić miejsce np. na banner strony, spis treści. Przykładowy kod dzielący stronę na trzy bloki: 16
Obramowanie tabeli: Aby pogrubić obramowanie tabeli (pionowe i poziome linie), stosujemy znacznik: Marginesy: <table style= border-style:solid; border-width:5px; > Aby zastosować margines w zawartości komórki uŝywamy znacznika: <table style= margin:npx; > UWAGA! W miejsce n wpisujemy daną wartość podaną w pikselach. Dzięki nadaniu własnych marginesów zawartość komórki wygląda bardziej estetycznie. Odstęp między komórkami: Gdy chcemy wprowadzić zdefiniowany przez nas odstęp między komórkami uŝywamy następującego znacznika: <table style= padding:npx; > przy czym w miejsce n wpisujemy daną wartość podaną w pikselach. Dzięki temu znacznikowi wprowadzamy odstęp między wszystkimi sąsiadującymi komórkami w tabeli. Nagłówek w tabeli: Jeśli chcemy wyszczególnić komórkę nagłówkową, stosujemy wtedy znacznik: Komórka ta charakteryzuje się pogrubionym tekstem oraz jego wyśrodkowaniem. Tytuł tabeli: JeŜeli chcemy tabeli nadać tytuł, stosujemy wtedy znacznik : UWAGA! Przy czym zamiast center (pozycja środkowa), moŝemy wpisać dowolną inną pozycję tytułu. "top" - tytuł górny "bottom" - tytuł dolny "left" - ustawienie przy lewej krawędzi tabeli "right" - przy prawej krawędzi 17
Wymiary tabeli i komórki: Wymiary tabeli mogą być podawane w dwóch wartościach, procentach oraz pikselach. Aby nadać tabeli lub poszczególnej komórce daną wielkość, naleŝy uŝyć następujących znaczników: lub: w przypadku całej tabeli: w przypadku pojedyńczej komórki: lub: <table style="width: x px; height y px;> <table style="width: x %; height y %;> <td style="width: x px; height y px;> <table style="width: x %; height y %;> UWAGA! Wszędzie gdzie jest n%, wartość podajemy w procentach, a w innym wypadku wartość odnosi się do pikseli. W przypadku gdy tabela ma być taka sama bez względu na wielkość ekranu, wtedy posługujemy się wartością %. JeŜeli chcemy Ŝeby tabela miała stały rozmiar, bez względu na wielkość ekranu, wtedy posługujemy się wartościami podanymi w pikselach. W przypadku gdy ustalimy wysokość lub szerokość dla pojedynczej komórki, wtedy cała kolumna będzie tej wielkości. Łączenie komórek: Jeśli chcemy połączyć komórki np. w celu dzielenia strony na elementy (banner, stopka), uŝywamy znacznika atrybutu colspan(łączenie poziome komórek) oraz rowspan (łączenie pionowe komórek). Kod wygląda następująco: colspan (poziome łączenie komórek): UWAGA! n oznacza liczbę komórek które chcemy połączyć. rowspan (pionowe łączenie komórek): 18
UWAGA! n oznacza liczbę komórek które chcemy połączyć. ZagnieŜdŜanie tabel: Aby móc w pełni kontrolować budowanie strony w oparciu na tabelkach musimy opanować zagnieŝdŝanie tabel. ZagnieŜdŜanie polega na budowaniu tabel jedna w drugiej. Np: Efektem moŝe być strona której szablon widzimy poniŝej. 19
Część VI WWW w Photoshopie Aby w łatwy i przyjemny sposób stworzyć szkielet naszej strony w Photoshopie z gotowego layoutu naleŝy postępować wg. poniŝszej instrukcji: 1. Otwieramy Photoshopa klikając w ikonkę: 2. Otwieramy w Photoshopie nasz wcześniej przygotowany layout poleceniem Plik->Otwórz (File->Open) i wyszukujemy plik na dysku: 3. Przechodzimy do narzędzia Slice Tool (C) i za pomocą tego narzędzia przygotowujemy naszą stronę wg. wcześniej ustalonego schematu (schemat moŝe być robiony nawet na kartce): 4. Po operacji z pkt. 3 nasza strona powinna wyglądać mniej więcej jak poniŝej: 20
5. Następnie zapisujemy efekt naszej pracy wybierając File->Save for web and devices: 6. Po ustaleniu formatu plików graficznych zapisujemy nasz szablon (Save): 7. PokaŜe nam się okienko które trzeba ustawić następująco: 21
8. W wybranej przez nas lokalizacji znajdziemy folder Images (pliki graficzne wykorzystane na naszej stronie) oraz plik wynikowy html gdzie znajdziemy gotowy kod naszej strony (oczywiście do przerobienia wg. naszych potrzeb). Część VII Galeria na Stronie WWW Przykładowa galeria na stronie z wykorzystaniem LIGHTBOX. 1. Wchodzimy na stronę http://www.huddletogether.com/projects/lightbox2 2. Szukamy działu download i pobieramy najnowszą wersję lightboxa 3. Widzimy tu całą zawartość: 4. Następnie w sekcji <head> wpisujemy kod poniŝej, opcjonalnie dodajemy oczywiście dowolny styl: 5. Następnie upewniamy się Ŝe wszystkie obrazki związane z lightboxem znajdują się w odpowiednim folderze. 22
6. Teraz wystarczy juŝ tylko w kodzie html wstawić odpowiedni rel="lightbox". 7. Jeśli chcemy stworzyć całą galerię wystarczy Ŝe dodamy jakiś unikalny wyraz w nawiasach kwadratowych dla całej galerii rel= lightbox[galeria1] 8. Zrobione! Część VIII - Publikacja własnej strony WWW. 1. Zakładamy konto na darmowym hostingu, np. www.cba.pl. 2. Ściągamy darmowy program FileZilla i uruchamiamy go. 3. Klikamy Plik-> MenadŜer Stron..., tworzymy nowy adres i wpisujemy dane które otrzymaliśmy podczas rejestracji. Nastepnie klikamy Połącz. 4. Po udanym połączeniu pojawią nam się dwa okienka, w którym po lewej stronie będziemy mieli zawartość swojego dysku, a po prawej zawartość serwera WWW. NaleŜy teraz plik naszej strony oraz wszystkie obrazki mu towarzyszące przenieść z dysku na serwer za pomocą metody przeciągnij i upuść. 23
5. Po poprawnym przeniesieniu nasze pliki pojawią się po prawej stronie. NaleŜy teraz korzystając z przeglądarki odwiedzić nasza stronę (www.naszastrona.cba.pl). 24