1 / 25

PODSTAWY TWORZENIA STRON WWW W HTML’u

PODSTAWY TWORZENIA STRON WWW W HTML’u. Opracowała: mgr inż. Grażyna Gołąbek-Tomas. 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ę.

mindy
Télécharger la présentation

PODSTAWY TWORZENIA STRON WWW W HTML’u

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PODSTAWY TWORZENIA STRON WWW W HTML’u 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ę. • Zapisuje się je WIELKIMI literami w nawiasach kątowych < >. Ich składnia jest następująca:<ZNACZNIK>Moja pierwsza strona</ZNACZNIK>Znaczniki wymagają czasem zamknięcia - do tego celu wykorzystujemy prawy ukośnik "/" tzw. "slash". Każdy dokument napisany w HTML rozpoczyna się znacznikiem <HTML>, zaś kończy </HTML>. Pomiędzy tymi znacznikami znajduje się treść dokumentu. Ta z kolei podzielona jest na dwie części nagłówek <HEAD> i część główną, tzw. ciało <BODY>. 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: <HTML><HEAD>...</HEAD><BODY>...</BODY></HTML>

  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 <HEAD> i </HEAD>. Do tego celu wykorzystamy nowy, bardzo łatwy do zapamiętania znacznik: <TITLE> • <TITLE>Moja pierwsza strona</TITLE> • Tak więc schemat naszej strony wygląda następująco: <HTML><HEAD><TITE> MOJA STRONA </TITLE></HEAD><BODY>...</BODY></HTML>

  4. FORMATOWANIETEKSTU • 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 <P>. • Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <BR>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia. • Do pogrubienia tekstu na stronie służą znaczniki <B> tekst pogrubiony </B> • Do podkreślenia tekstu na stronie służą znaczniki <U> tekst podkreślony </U> • Do pochylenia tekstu służą znaczniki <I> kursywa </I> • Do przekreślenia tekstu służą znaczniki <STRIKE> … </STRIKE> • tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania) umieszczamy w znacznikach <TT> … </TT>

  5. NAGŁÓWKINA STRONIE WWW • W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> </Hn>. 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 <H1> i zamykającego </H1>. <H1> to wielkość największa, a <H6> to wielkość najmniejsza. • <H1> NAGŁÓWEK STOPNIA 1 </H1> • <H2> NAGŁÓWEK STOPNIA 2 </H2> • <H3> NAGŁÓWEK STOPNIA 3 </H3> • <H4> NAGŁÓWEK STOPNIA 4 </H4> • <H5> NAGŁÓWEK STOPNIA 5 </H5> • <H6> NAGŁÓWEK STOPNIA 6 </H6>

  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ę <BODY> i posłużyć się następującym poleceniem: • <BODY BGCOLOR="angielskanazwakoloru"> • 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: • <FONT COLOR="angielskanazwakoloru">Tekst objęty poleceniem</FONT> • Należy zwrócić uwagę, iż znacznik <FONT> 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: • <FONT COLOR="rrggbb">Tekst objęty poleceniem</FONT> • 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.

  7. LISTA SZESNASTU PODSTAWOWYCH BARW • black    #000000fuchsia    #FF00FFsilver    #C0C0C0 • green    #008000gray    #808080lime    #00FF00     • white    #FFFFFF    olive    #808000 maroon    #800000     • yellow    #FFFF00 red    #FF0000  navy    #000080   • purple    #800080  blue    #0000FF teal    #008080

  8. WIELKOŚĆ CZCIONKI • Chcąc zmienić wielkość czcionki używamy znacznika:<FONT SIZE="x"> TEKST</FONT>. 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. • Chcąc zmienić kolor czcionki używamy znacznika:<FONT COLOR="#rrggbb"> TEKST </FONT> • <FONT FACE="nazwa czcionki"> Przykładowy tekst </FONT> 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 <SUB> </SUB> (subscript). • H<SUB>2</SUB>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 <SUP> </SUP> (superscript). • 2<SUP>10</SUP>

  9. LISTY NUMEROWANE Przykładkodu źródłowego: <OL><LI>Poniedziałek<LI>Wtorek<LI>Środa<LI>Czwartek<LI>Piątek<LI>Sobota<LI>Niedziela</OL> i jego efekt działania • 1. Poniedziałek • 2. Wtorek • 3. Środa • 4. Czwartek • 5. Piątek • 6. Sobota • 7. Niedziela

  10. LISTY WYPUNKTOWANE Przykładkodu źródłowego: • <UL><LI>Poniedziałek<LI>Wtorek<LI>Środa<LI>Czwartek<LI>Piątek<LI>Sobota<LI>Niedziela</UL> • i jego efekt działania • Poniedziałek • Wtorek • Środa • Czwartek • Piątek • Sobota • 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. • Do definicji tabeli służy znacznik <TABLE> </TABLE>. Tabela składa się z wierszy oznaczanych znacznikami <TR> </TR>. Poszczególne wiersze składają się z komórek <TD>. Szczególnym przypadkiem komórki jest nagłówek kolumny oznaczony jako <TH>. Jest on wyświetlany pogrubioną czcionką. • Najprostszy przykład reprezentujący tabelę bez obramowania wygląda następująco:<TABLE><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE>

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

  13. FORMATOWANIE TABELI • Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: • <TABLE BORDER=5><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE> • 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ć atrybutuCELLPADDING (domyślnie wynosi on 1). • <TABLE BORDER=5 CELLPADDING=10><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE>

  14. FORMATOWANIE TABELI • Szerokość tabeli: • Atrybut WIDTHdaje nam możliwość samodzielnego zdefiniowania szerokości tabeli. • <TABLE BORDER=5 WIDTH=600 CELLPADDING=10><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE> • Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki. • <TABLE BORDER=5 WIDTH="50%" CELLPADDING=10><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE>

  15. FORMATOWANIE TABELI • Atrybut WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki • <TABLE BORDER=5 CELLPADDING=10><TR><TH WIDTH=250>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE> • 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: • <TD ALIGN="center"><TD ALIGN="left"><TD ALIGN="right"> • AtrybutVALIGN(vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do&nbspdolnego brzegu. Używamy wówczas następującego zapisu:

  16. FORMATOWANIE TABELI • <TD VALIGN="top"> <TD VALIGN="middle"> <TD VALIGN="bottom"> • W celu ustawienia koloru tła tabeli należy w definicji tabeli dodać atrybut BGCOLOR="barwa", np. • <TABLE BORDER HEIGHT=200 BGCOLOR="#FAF5DC"> • W celu ustawienia koloru obramowania tabeli należy wstawić atrybut BORDERCOLOR="barwa", np. • <TABLE BORDER=5 BORDERCOLOR="#996600"> • Komórki danych i nagłówków można ze sobą łączyć. • w poziomie: • <TABLE BORDER=5 CELLPADDING=10 WIDTH=200><TR><TD COLSPAN=2>Klasy</TR><TR><TD>Ia<TD>Ib</TR><TR><TD>IIa<TD>IIb</TR></TABLE> • w pionie: • <TABLE BORDER=5 CELLPADDING=10 WIDTH=200><TR><TD>Grupa<TD>Klasa</TR><TR><TD ROWSPAN=2>Chłopcy<TD>Ia</TR><TR><TD>IIa</TR></TABLE>

  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 <IMG>. Jego najważniejszym atrybutem jest SRC, który wskazuje adres pliku. • <IMG SRC="nazwa.gif"> • Wielkość obrazka możemy regulować za pomocą atrybutów HEIGHT (wysokość) i WIDTH (szerokość). • <IMG SRC="nazwa.gif” HEIGHT=‘’40%” WIDTH=‘’50%”> • atrybut BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli • <IMG SRC="nazwa.gif” HEIGHT=‘’40%” WIDTH=‘’50%” BORDER=6> • Obrazek można również umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD> </TD> 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ć: • <MARQUEE>Tekst animacji</MARQUEE> • Dodatkowe atrybuty są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE Atrybut="wartość">. Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD> • 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="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. • 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").

  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&nbspstosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. • Plik dźwiękowy WAV (styl Netscape) • <EMBED SRC="plik.wav" BORDER="0" WIDTH="x" HEIGHT="y"> • Plik dźwiękowy WAV (styl Microsoft) • <BGSOUND SRC="plik.wav" LOOP="infinite"> • Plik dźwiękowy MIDI (styl Netscape) • <EMBED SRC="plik.wav" BORDER="0"> • Plik dźwiękowy MIDI (styl Microsoft) • <BGSOUND SRC="plik.mid" LOOP="1"> • Plik wideo AVI (styl Netscape) • <EMBED SRC="plik.avi" BORDER="0"> • Plik wideo AVI (styl Microsoft) • <IMG BORDER="0" ALT="opis elementu" DYNSRC="plik.avi" LOOP="infinite" START="fileopen">

  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łaczem do etykiety nazywamy odnośnik (odsyłacz) do elementu znajdującego na tej samej stronie. Jego konstrukcja jest następująca: • <A NAME="nazwa_etykiety"></A> (nazwa 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: • <A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A> • odsyłacze do stron WWW • <A HREF="http://www.wp.pl"> Wirtualna Polska </A> • Odsyłacze do poczty elektronicznej • <A HREF="mailto:imie_nazwisko@adres">Tutaj kliknij</A>

  21. ZASADY TWORZENIA STRON WWW • Publikowanie w Sieci • Pisz jasno i bądź zwięzły. • Testuj strony w wielu przeglądarkach. • 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. • 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). • Sprawdzaj ortografię i składnię.

  22. PROJEKTOWANIE STRONY • Projektowanie i układ strony • Stosuj nagłówki (znacznik Hn) jako nagłówki. • Grupuj informacje wiążące się ze sobą. • 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ń • Dbaj o to, by tekst prezentacyjny połączeń zawartych w menu był opisowy. • Umieszczaj połączenia w tekście. • 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.

  23. OBRAZY • Obrazy • Nie przesadzaj z liczbą obrazów. • Stosuj tekst alternatywny (dla przeglądarek tekstowych). • atrybut ALT znacznika <IMG> 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 • 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ń • 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 • Umieszczaj połączenia do strony głównej. • Nie rozdzielaj tematu między strony. • Wyważ właściwie liczbę stron. • Podpisuj swoje strony. • Twórz tekstowe wersje dokumentów hipertekstowych.

  25. LITERATURA 1) ” Podstawy projektowania w języku HTML” A. Mazur www.KOMPUTERSWIAT.PL www.kurshtml.boo.pl „Indeks znaczników HTML” zasoby KISS Zasoby Internetu

More Related