Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

PODSTAWY TWORZENIA STRON WWW W HTMLu Opracowała: mgr inż. Grażyna Gołąbek-Tomas.

Podobne prezentacje


Prezentacja na temat: "PODSTAWY TWORZENIA STRON WWW W HTMLu Opracowała: mgr inż. Grażyna Gołąbek-Tomas."— Zapis prezentacji:

1 PODSTAWY TWORZENIA STRON WWW W HTMLu Opracowała: mgr inż. Grażyna Gołąbek-Tomas

2 SCHEMAT STRONY Strukturę dokumentu w HTML określa się za pomocą znaczników. Znaczniki są następnie odpowiednio interpretowane i wyświetlane przez przeglądarkę. Strukturę dokumentu w HTML określa się za pomocą znaczników. Znaczniki są następnie odpowiednio interpretowane i wyświetlane przez przeglądarkę. Zapisuje się je WIELKIMI literami w nawiasach kątowych. Ich składnia jest następująca: Moja pierwsza strona Znaczniki wymagają czasem zamknięcia - do tego celu wykorzystujemy prawy ukośnik "/" tzw. "slash". Każdy dokument napisany w HTML rozpoczyna się znacznikiem, zaś kończy. Pomiędzy tymi znacznikami znajduje się treść dokumentu. Ta z kolei podzielona jest na dwie części nagłówek i część główną, tzw. ciało. Nagłówek wykorzystywany jest jako opis pliku, zaś w części głównej dokumentu umieszcza się właściwą zawartość strony. Zatem otwierając pusty plik w edytorze umieszczamy w nim zapis o następującej składni: Zapisuje się je WIELKIMI literami w nawiasach kątowych. Ich składnia jest następująca: Moja pierwsza strona Znaczniki wymagają czasem zamknięcia - do tego celu wykorzystujemy prawy ukośnik "/" tzw. "slash". Każdy dokument napisany w HTML rozpoczyna się znacznikiem, zaś kończy. Pomiędzy tymi znacznikami znajduje się treść dokumentu. Ta z kolei podzielona jest na dwie części nagłówek i część główną, tzw. ciało. Nagłówek wykorzystywany jest jako opis pliku, zaś w części głównej dokumentu umieszcza się właściwą zawartość strony. Zatem otwierając pusty plik w edytorze umieszczamy w nim zapis o następującej składni:

3 cd.SCHEMAT STRONY Każda strona WWW powinna zawierać tytuł, który będzie wyświetlany na górnym niebieskim pasku okna przeglądarki (pasku tytułowym). Dzięki niemu użytkownik będzie wiedział, na jakiej stronie aktualnie się znajduje.Zwartość tytułu jest ponadto wykorzystywana do poszukiwania dokumentów w sieci przez wyszukiwarki. Tytuł dokumentu umieszczamy w nagłówku strony pomiędzy znacznikami i. Do tego celu wykorzystamy nowy, bardzo łatwy do zapamiętania znacznik: Każda strona WWW powinna zawierać tytuł, który będzie wyświetlany na górnym niebieskim pasku okna przeglądarki (pasku tytułowym). Dzięki niemu użytkownik będzie wiedział, na jakiej stronie aktualnie się znajduje.Zwartość tytułu jest ponadto wykorzystywana do poszukiwania dokumentów w sieci przez wyszukiwarki. Tytuł dokumentu umieszczamy w nagłówku strony pomiędzy znacznikami i. Do tego celu wykorzystamy nowy, bardzo łatwy do zapamiętania znacznik: Moja pierwsza strona Moja pierwsza strona Tak więc schemat naszej strony wygląda następująco: Tak więc schemat naszej strony wygląda następująco: MOJA STRONA... MOJA STRONA...

4 FORMATOWANIE TEKSTU Przeglądarka internetowa całkowicie ignoruje wstawiane znaki tabulacji, wielokrotne spacje czy też znaki końca akapitu. Chcąc rozdzielić akapity, należy posłużyć się znacznikiem. Przeglądarka internetowa całkowicie ignoruje wstawiane znaki tabulacji, wielokrotne spacje czy też znaki końca akapitu. Chcąc rozdzielić akapity, należy posłużyć się znacznikiem. Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. Ponadto polecenie ma jeszcze jedną zaletę. Napisanie kilku kolejnych pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia. Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. Ponadto polecenie ma jeszcze jedną zaletę. Napisanie kilku kolejnych pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia. Do pogrubienia tekstu na stronie służą znaczniki tekst pogrubiony Do pogrubienia tekstu na stronie służą znaczniki tekst pogrubiony Do podkreślenia tekstu na stronie służą znaczniki tekst podkreślony Do podkreślenia tekstu na stronie służą znaczniki tekst podkreślony Do pochylenia tekstu służą znaczniki kursywa Do pochylenia tekstu służą znaczniki kursywa Do przekreślenia tekstu służą znaczniki … Do przekreślenia tekstu służą znaczniki … tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania) umieszczamy w znacznikach … tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania) umieszczamy w znacznikach …

5 NAGŁÓWKI NA STRONIE WWW W dokumentach często wprowadzamy tytuły. Służy do tego polecenie. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego i zamykającego. to wielkość największa, a to wielkość najmniejsza. W dokumentach często wprowadzamy tytuły. Służy do tego polecenie. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego i zamykającego. to wielkość największa, a to wielkość najmniejsza. NAGŁÓWEK STOPNIA 1 NAGŁÓWEK STOPNIA 1 NAGŁÓWEK STOPNIA 2 NAGŁÓWEK STOPNIA 2 NAGŁÓWEK STOPNIA 3 NAGŁÓWEK STOPNIA 3 NAGŁÓWEK STOPNIA 4 NAGŁÓWEK STOPNIA 4 NAGŁÓWEK STOPNIA 5 NAGŁÓWEK STOPNIA 5 NAGŁÓWEK STOPNIA 6 NAGŁÓWEK STOPNIA 6

6 WSTAWIAMY KOLORY tło ma taki kolor, jaki został domyślnie przyjęty przez przeglądarkę WWW. Chcąc je zmienić musimy zmodyfikować sekcję i posłużyć się następującym poleceniem: tło ma taki kolor, jaki został domyślnie przyjęty przez przeglądarkę WWW. Chcąc je zmienić musimy zmodyfikować sekcję i posłużyć się następującym poleceniem: Kolor możemy określić w formacie RRGGBB lub za pomocą jego angielskiej nazwy. Kolor możemy określić w formacie RRGGBB lub za pomocą jego angielskiej nazwy. W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się wówczas poleceniem: W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się wówczas poleceniem: Tekst objęty poleceniem Tekst objęty poleceniem Należy zwrócić uwagę, iż znacznik musi zostać zamknięty. W przeciwnym razie cały tekst od tego miejsca będzie takiego koloru jaki zdefiniujemy. w przypadku określania koloru tła dla strony oraz tekstu możemy używać wartości heksadecymalnych: Należy zwrócić uwagę, iż znacznik musi zostać zamknięty. W przeciwnym razie cały tekst od tego miejsca będzie takiego koloru jaki zdefiniujemy. w przypadku określania koloru tła dla strony oraz tekstu możemy używać wartości heksadecymalnych: Tekst objęty poleceniem Tekst objęty poleceniem Używanie wartości heksadecymalnych jest bardziej uniwersalne, należy pamiętać o umieszczeniu znaku # (hash). Używanie wartości heksadecymalnych jest bardziej uniwersalne, należy pamiętać o umieszczeniu znaku # (hash). Dobieramy kolory tak, aby adresat Twojej strony nie zniechęcił się już na wstępie. Żółty tekst na białym tle nie świadczy zbyt dobrze o jego autorze. Dobieramy kolory tak, aby adresat Twojej strony nie zniechęcił się już na wstępie. Żółty tekst na białym tle nie świadczy zbyt dobrze o jego autorze.

7 LISTA SZESNASTU PODSTAWOWYCH BARW black # fuchsia #FF00FF silver #C0C0C0 black # fuchsia #FF00FF silver #C0C0C0 green # gray # lime #00FF00 green # gray # lime #00FF00 white #FFFFFF olive # maroon # white #FFFFFF olive # maroon # yellow #FFFF00 red #FF0000 navy # yellow #FFFF00 red #FF0000 navy # purple # blue #0000FF teal # purple # blue #0000FF teal #008080

8 WIELKOŚĆ CZCIONKI Chcąc zmienić wielkość czcionki używamy znacznika: TEKST. gdzie: x - jest bezwzględną wartością czcionki. Chcąc zmienić wielkość czcionki używamy znacznika: TEKST. gdzie: x - jest bezwzględną wartością czcionki. Czcionka standardowa ma przypisaną wartość 3 (nie należy mylić jej ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7. Czcionka standardowa ma przypisaną wartość 3 (nie należy mylić jej ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7. Chcąc zmienić kolor czcionki używamy znacznika: TEKST Chcąc zmienić kolor czcionki używamy znacznika: TEKST Przykładowy tekst Pozwala ono zmienić krój czcionki dla danego dokumentu Przykładowy tekst Pozwala ono zmienić krój czcionki dla danego dokumentu Przykładem indeksu dolnego jest cyfra 2 we wzorze H2O. Tekst wpisany mniejszymi i niżej położonymi literami można sformatować za pomocą znacznika (subscript). Przykładem indeksu dolnego jest cyfra 2 we wzorze H2O. Tekst wpisany mniejszymi i niżej położonymi literami można sformatować za pomocą znacznika (subscript). H 2 O H 2 O Przykładem indeksu górnego jest liczba 10 w wyrażeniu 210. Tekst wpisany mniejszymi i wyżej położonymi literami można sformatować za pomocą znacznika (superscript). Przykładem indeksu górnego jest liczba 10 w wyrażeniu 210. Tekst wpisany mniejszymi i wyżej położonymi literami można sformatować za pomocą znacznika (superscript)

9 LISTY NUMEROWANE Przykład kodu źródłowego: Przykład kodu źródłowego: Poniedziałek Wtorek Środa Czwartek Piątek Sobota Niedziela Poniedziałek Wtorek Środa Czwartek Piątek Sobota Niedziela i jego efekt działania 1. Poniedziałek 1. Poniedziałek 2. Wtorek 2. Wtorek 3. Środa 3. Środa 4. Czwartek 4. Czwartek 5. Piątek 5. Piątek 6. Sobota 6. Sobota 7. Niedziela 7. Niedziela

10 LISTY WYPUNKTOWANE Przykład kodu źródłowego: Przykład kodu źródłowego: Poniedziałek Wtorek Środa Czwartek Piątek Sobota Niedziela i jego efekt działania i jego efekt działania Poniedziałek Poniedziałek Wtorek Wtorek Środa Środa Czwartek Czwartek Piątek Piątek Sobota Sobota Niedziela Niedziela

11 TABELE NA STRONIE WWW Jednym z podstawowych elementów służących do formatowania tekstu są tabele. Mają one dwojakie zastosowanie. Po pierwsze umożliwiają tworzenie obszarów składających się z wierszy i kolumn. Drugim zastosowaniem tabel jest organizacja wyglądu strony m.in. w połączeniu z obrazkami i formularzami. Jednym z podstawowych elementów służących do formatowania tekstu są tabele. Mają one dwojakie zastosowanie. Po pierwsze umożliwiają tworzenie obszarów składających się z wierszy i kolumn. Drugim zastosowaniem tabel jest organizacja wyglądu strony m.in. w połączeniu z obrazkami i formularzami. Do definicji tabeli służy znacznik. Tabela składa się z wierszy oznaczanych znacznikami. Poszczególne wiersze składają się z komórek. Szczególnym przypadkiem komórki jest nagłówek kolumny oznaczony jako. Jest on wyświetlany pogrubioną czcionką. Do definicji tabeli służy znacznik. Tabela składa się z wierszy oznaczanych znacznikami. Poszczególne wiersze składają się z komórek. Szczególnym przypadkiem komórki jest nagłówek kolumny oznaczony jako. Jest on wyświetlany pogrubioną czcionką. Najprostszy przykład reprezentujący tabelę bez obramowania wygląda następująco: Najprostszy przykład reprezentujący tabelę bez obramowania wygląda następująco:

12 TABELE Z OBRAMOWANIEM Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję znacznika o atrybut BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję znacznika o atrybut BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość

13 FORMATOWANIE TABELI Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: Marginesy dla komórek: Marginesy dla komórek: Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć atrybutu CELLPADDING (domyślnie wynosi on 1). Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć atrybutu CELLPADDING (domyślnie wynosi on 1)

14 FORMATOWANIE TABELI Szerokość tabeli: Szerokość tabeli: Atrybut WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Atrybut WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki. Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki

15 FORMATOWANIE TABELI Atrybut WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki Atrybut WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki Atrybut ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - wyśrodkowania, wyrównania do lewej i wyrównania do prawej. Używamy wówczas następującego zapisu: Atrybut ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - wyśrodkowania, wyrównania do lewej i wyrównania do prawej. Używamy wówczas następującego zapisu: Atrybut VALIGN (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas następującego zapisu: Atrybut VALIGN (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas następującego zapisu:

16 FORMATOWANIE TABELI W celu ustawienia koloru tła tabeli należy w definicji tabeli dodać atrybut BGCOLOR="barwa", np. W celu ustawienia koloru tła tabeli należy w definicji tabeli dodać atrybut BGCOLOR="barwa", np. W celu ustawienia koloru obramowania tabeli należy wstawić atrybut BORDERCOLOR="barwa", np. W celu ustawienia koloru obramowania tabeli należy wstawić atrybut BORDERCOLOR="barwa", np. Komórki danych i nagłówków można ze sobą łączyć. Komórki danych i nagłówków można ze sobą łączyć. w poziomie: w poziomie: Klasy Ia Ib IIa IIb Klasy Ia Ib IIa IIb w pionie: w pionie: Grupa Klasa Chłopcy Ia IIa Grupa Klasa Chłopcy Ia IIa

17 GRAFIKA NA STRONIE Podstawowymi elementami graficznymi stron WWW są pliki typu JPG (Joint Photographic Expert Group), GIF (Graphics Interchange Format) lub PNG (Portable Network Graphics). Osadzenie takiego "obrazka" dokonuje się za pomocą znacznika. Jego najważniejszym atrybutem jest SRC, który wskazuje adres pliku. Podstawowymi elementami graficznymi stron WWW są pliki typu JPG (Joint Photographic Expert Group), GIF (Graphics Interchange Format) lub PNG (Portable Network Graphics). Osadzenie takiego "obrazka" dokonuje się za pomocą znacznika. Jego najważniejszym atrybutem jest SRC, który wskazuje adres pliku. Wielkość obrazka możemy regulować za pomocą atrybutów HEIGHT (wysokość) i WIDTH (szerokość). Wielkość obrazka możemy regulować za pomocą atrybutów HEIGHT (wysokość) i WIDTH (szerokość). atrybut BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli atrybut BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli Obrazek można również umieścić w komórce tabeli, wstawiając między znacznikami komórki definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań, Obrazek można również umieścić w komórce tabeli, wstawiając między znacznikami komórki definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań,

18 ANIMACJE Efektownym elementem graficznym jest animacja Marquee. Jest to "pływający" w poprzek ekranu napis. Animacji można przypisać wiele atrybutów, które bardzo urozmaicają zachowanie napisu. Minimalna definicja Marquee ma postać: Efektownym elementem graficznym jest animacja Marquee. Jest to "pływający" w poprzek ekranu napis. Animacji można przypisać wiele atrybutów, które bardzo urozmaicają zachowanie napisu. Minimalna definicja Marquee ma postać: Tekst animacji Tekst animacji Dodatkowe atrybuty są wstawiane w ramach otwierającego znacznika, tj.. Animację można wstawiać także do komórki tabeli, między znaczniki Dodatkowe atrybuty są wstawiane w ramach otwierającego znacznika, tj.. Animację można wstawiać także do komórki tabeli, między znaczniki Tekst może się poruszać na trzy sposoby: Tekst może się poruszać na trzy sposoby: BEHAVIOR="scroll" - powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR="scroll" - powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR="slide" - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. BEHAVIOR="slide" - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. BEHAVIOR="alternate" - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. BEHAVIOR="alternate" - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. Tekst może się poruszać na kolorowym tle: Tekst może się poruszać na kolorowym tle: BGCOLOR="angielskanazwakoloru" - pozwala określić kolor tła dla pola, po której porusza się napis. Kolor można podać w postaci heksadecymalnej ("#RRGGBB") lub słownej ("red"). BGCOLOR="angielskanazwakoloru" - pozwala określić kolor tła dla pola, po której porusza się napis. Kolor można podać w postaci heksadecymalnej ("#RRGGBB") lub słownej ("red").

19 MULTIMEDIA Elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Plik dźwiękowy WAV (styl Netscape) Plik dźwiękowy WAV (styl Netscape) Plik dźwiękowy WAV (styl Microsoft) Plik dźwiękowy WAV (styl Microsoft) Plik dźwiękowy MIDI (styl Netscape) Plik dźwiękowy MIDI (styl Netscape) Plik dźwiękowy MIDI (styl Microsoft) Plik dźwiękowy MIDI (styl Microsoft) Plik wideo AVI (styl Netscape) Plik wideo AVI (styl Netscape) Plik wideo AVI (styl Microsoft) Plik wideo AVI (styl Microsoft)

20 ODSYŁACZE Odsyłacze umożliwiają powiązanie dokumentów na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony. Przypomina to trochę czytanie książki, w której autor odwołuje się do informacji (np. ilustracji) zamieszczonej na jej końcu. Odsyłacze umożliwiają powiązanie dokumentów na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony. Przypomina to trochę czytanie książki, w której autor odwołuje się do informacji (np. ilustracji) zamieszczonej na jej końcu. Odsyłaczem do etykiety nazywamy odnośnik (odsyłacz) do elementu znajdującego na tej samej stronie. Jego konstrukcja jest następująca: Odsyłaczem do etykiety nazywamy odnośnik (odsyłacz) do elementu znajdującego na tej samej stronie. Jego konstrukcja jest następująca: (nazwa etykiety) (nazwa etykiety) Po stworzeniu etykiety należy stworzyć odsyłacz do etykiety Po stworzeniu etykiety należy stworzyć odsyłacz do etykiety Odsyłacz jest konstrukcją, która wskazuje pewne miejsce i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci: Odsyłacz jest konstrukcją, która wskazuje pewne miejsce i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci: Tekst, na którym należy kliknąć Tekst, na którym należy kliknąć odsyłacze do stron WWW odsyłacze do stron WWW Wirtualna Polska Wirtualna Polska Odsyłacze do poczty elektronicznej Odsyłacze do poczty elektronicznej Tutaj kliknij Tutaj kliknij

21 ZASADY TWORZENIA STRON WWW Publikowanie w Sieci Publikowanie w Sieci Pisz jasno i bądź zwięzły. Pisz jasno i bądź zwięzły. Testuj strony w wielu przeglądarkach. Testuj strony w wielu przeglądarkach. Organizuj strony w sposób przejrzysty Organizuj strony w sposób przejrzysty –podsumowując temat, korzystaj z nagłówków, –stosuj listy, –nie zapominaj o menu zawierających połączenia (linki), –nie ukrywaj ważnych informacji w tekście. Twórz strony, będące samodzielnymi całościami. Twórz strony, będące samodzielnymi całościami. –niech Twoje tytuły będą opisowe, –jeśli strona wiąże się tematycznie ze stroną poprzedzającą, umieść połączenia nawigacyjne do strony (a także do strony głównej). Ostrożnie stosuj wyróżnienia - nie nadużywaj atrybutów formatowania (takich jak pogrubienie, kursywa, wielkie litery, miganie, efekt marquuee). Ostrożnie stosuj wyróżnienia - nie nadużywaj atrybutów formatowania (takich jak pogrubienie, kursywa, wielkie litery, miganie, efekt marquuee). Sprawdzaj ortografię i składnię. Sprawdzaj ortografię i składnię.

22 PROJEKTOWANIE STRONY Projektowanie i układ strony Projektowanie i układ strony Stosuj nagłówki (znacznik Hn) jako nagłówki. Stosuj nagłówki (znacznik Hn) jako nagłówki. Grupuj informacje wiążące się ze sobą. Grupuj informacje wiążące się ze sobą. Stosuj zwarty układ Stosuj zwarty układ –konsekwentnie stosuj elementy strony - jeśli strona rozpoczyna się nagłówkiem podkreślonym linią, taki sam układ powinien pojawić się na pozostałych stronach, –konsekwentnie przestrzegaj form nawigacji - na kolejnych stronach, umieszczaj menu nawigacyjne zawsze w tym samym miejscu. Stosowanie połączeń Stosowanie połączeń Dbaj o to, by tekst prezentacyjny połączeń zawartych w menu był opisowy. Dbaj o to, by tekst prezentacyjny połączeń zawartych w menu był opisowy. Umieszczaj połączenia w tekście. Umieszczaj połączenia w tekście. Unikaj używania słów "tutaj, kliknij tutaj, naciśnij przycisk Back" itp. Unikaj używania słów "tutaj, kliknij tutaj, naciśnij przycisk Back" itp. Połączenia twórz tylko wówczas, gdy są ku temu ważne powody. Unikaj tworzenia połączeń do mało istotnego materiału. Połączenia twórz tylko wówczas, gdy są ku temu ważne powody. Unikaj tworzenia połączeń do mało istotnego materiału.

23 OBRAZY Obrazy Obrazy Nie przesadzaj z liczbą obrazów. Nie przesadzaj z liczbą obrazów. Stosuj tekst alternatywny (dla przeglądarek tekstowych). Stosuj tekst alternatywny (dla przeglądarek tekstowych). –atrybut ALT znacznika spowoduje, iż w przeglądarkach tekstowych grafika zostanie zastąpiona tekstem, –jeżeli to możliwe stwórz dwie wersje - dla przeglądarek graficznych i dla tekstowych. Stosuj małe obrazy Stosuj małe obrazy –cała strona (tekst plus grafika) powinna załadować się w czasie nie dłuższym niż 30 sekund (uprzedzaj o stronach "ważących" powyżej 50 KB). –zapisuj pliki GIF z przeplotem, –przetestuj zapis obrazu w formatach JPEG i GIF, i sprawdź, który z nich daje w efekcie mniejszy plik, –w przypadku obrazów w formacie GIF, im uboższa paleta kolorów, tym mniejszy plik, –wykorzystuj fragmenty obrazu lub zmień jego skalę. Nie przesadzaj z kolorami tła i połączeń Nie przesadzaj z kolorami tła i połączeń –zadbaj o to, by kolory pierwszego planu (tekstu) kontrastowały z kolorami tła, –jeśli stosujesz wzorzyste tło, sprawdź, czy wzór nie pokrywa się z tekstem.

24 DOBRE RADY Inne dobre zwyczaje i podpowiedzi Inne dobre zwyczaje i podpowiedzi Umieszczaj połączenia do strony głównej. Umieszczaj połączenia do strony głównej. Nie rozdzielaj tematu między strony. Nie rozdzielaj tematu między strony. Wyważ właściwie liczbę stron. Wyważ właściwie liczbę stron. Podpisuj swoje strony. Podpisuj swoje strony. Twórz tekstowe wersje dokumentów hipertekstowych. Twórz tekstowe wersje dokumentów hipertekstowych.

25 LITERATURA 1) Podstawy projektowania w języku HTML A. Mazur 2) 3) 4) Indeks znaczników HTML zasoby KISS 5) Zasoby Internetu


Pobierz ppt "PODSTAWY TWORZENIA STRON WWW W HTMLu Opracowała: mgr inż. Grażyna Gołąbek-Tomas."

Podobne prezentacje


Reklamy Google