PODSTAWY TWORZENIA STRON WWW W HTML’u

PODSTAWY PODSTAWY TWORZENIA STRON TWORZENIA STRON

WWW W HTML’uWWW W HTML’u

Opracowała: Opracowała:

mgr inż. Grażyna Gołąbek-mgr inż. Grażyna Gołąbek-TomasTomas

SCHEMAT STRONYSCHEMAT STRONY

• Strukturę dokumentu w HTML określa się za pomocą znaczników. Znaczniki są Strukturę dokumentu w HTML określa się za pomocą znaczników. Znaczniki są następnie odpowiednio interpretowane i wyświetlane przez przeglądarkę.następnie odpowiednio interpretowane i wyświetlane przez przeglądarkę.

• Zapisuje się je WIELKIMI literami w nawiasach kątowych < >. Ich składnia jest Zapisuje się je WIELKIMI literami w nawiasach kątowych < >. Ich składnia jest następująca:następująca:

<ZNACZNIK>Moja pierwsza strona</ZNACZNIK><ZNACZNIK>Moja pierwsza strona</ZNACZNIK>

Znaczniki wymagają czasem zamknięcia - do tego celu wykorzystujemy prawy Znaczniki wymagają czasem zamknięcia - do tego celu wykorzystujemy prawy ukośnik "/" tzw. "slash". Każdy dokument napisany w HTML rozpoczyna się ukośnik "/" tzw. "slash". Każdy dokument napisany w HTML rozpoczyna się znacznikiem <HTML>, zaś kończy </HTML>. Pomiędzy tymi znacznikami znacznikiem <HTML>, zaś kończy </HTML>. Pomiędzy tymi znacznikami znajduje się treść dokumentu. Ta z kolei podzielona jest na dwie części 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 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 wykorzystywany jest jako opis pliku, zaś w części głównej dokumentu umieszcza się właściwą zawartość strony. Zatem otwierając pusty plik umieszcza się właściwą zawartość strony. Zatem otwierając pusty plik w edytorze umieszczamy w nim zapis o następującej składni:w edytorze umieszczamy w nim zapis o następującej składni:

<HTML><HTML><HEAD><HEAD>

......</HEAD></HEAD><BODY><BODY>

......</BODY></BODY></HTML> </HTML>

cd.SCHEMAT STRONYcd.SCHEMAT STRONY

• Każda strona WWW powinna zawierać tytuł, który będzie wyświetlany na 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 górnym niebieskim pasku okna przeglądarki (pasku tytułowym). Dzięki niemu użytkownik będzie wiedział, na jakiej stronie aktualnie się niemu użytkownik będzie wiedział, na jakiej stronie aktualnie się znajduje.Zwartość tytułu jest ponadto wykorzystywana do poszukiwania znajduje.Zwartość tytułu jest ponadto wykorzystywana do poszukiwania dokumentów w sieci przez wyszukiwarki. Tytuł dokumentu umieszczamy w dokumentów w sieci przez wyszukiwarki. Tytuł dokumentu umieszczamy w nagłówku strony pomiędzy znacznikami <HEAD> i </HEAD>. Do tego celu nagłówku strony pomiędzy znacznikami <HEAD> i </HEAD>. Do tego celu wykorzystamy nowy, bardzo łatwy do zapamiętania znacznik: <TITLE>wykorzystamy nowy, bardzo łatwy do zapamiętania znacznik: <TITLE>

• <TITLE>Moja pierwsza strona</TITLE><TITLE>Moja pierwsza strona</TITLE> • Tak więc schemat naszej strony wygląda następująco:Tak więc schemat naszej strony wygląda następująco:

<HTML><HTML><HEAD><HEAD>

<TITE> MOJA STRONA </TITLE><TITE> MOJA STRONA </TITLE></HEAD></HEAD><BODY><BODY>

......</BODY></BODY></HTML> </HTML>

FORMATOWANIEFORMATOWANIE TEKSTUTEKSTU

• Przeglądarka internetowa całkowicie ignoruje wstawiane znaki tabulacji, Przeglądarka internetowa całkowicie ignoruje wstawiane znaki tabulacji, wielokrotne spacje czy też znaki końca akapitu. Chcąc rozdzielić akapity, wielokrotne spacje czy też znaki końca akapitu. Chcąc rozdzielić akapity, należy posłużyć się znacznikiem należy posłużyć się znacznikiem <P>.<P>.

• Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <BR>,<BR>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. Ponadto polecenie <BR> ma jeszcze jedną zaletę. dodatkowej interlinii. Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia.elementami. Znacznik ten nie wymaga zamknięcia.

• Do pogrubienia tekstu na stronie służą znaczniki Do pogrubienia tekstu na stronie służą znaczniki <B> tekst pogrubiony <B> tekst pogrubiony </B></B>

• Do podkreślenia tekstu na stronie służą znaczniki Do podkreślenia tekstu na stronie służą znaczniki <U> tekst podkreślony <U> tekst podkreślony </U></U>

• Do pochylenia tekstu służą znaczniki Do pochylenia tekstu służą znaczniki <I> kursywa </I><I> kursywa </I>

• Do przekreślenia tekstu służą znaczniki Do przekreślenia tekstu służą znaczniki <STRIKE> … </STRIKE><STRIKE> … </STRIKE>

• tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania) tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania) umieszczamy w znacznikach umieszczamy w znacznikach <TT> … </TT><TT> … </TT>

NAGŁÓWKINAGŁÓWKI NA STRONIE NA STRONIE WWWWWW• W dokumentach często wprowadzamy tytuły. Służy do tego polecenie W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> <Hn>

</Hn>.</Hn>. Znak H oznacza header, natomiast cyfra Znak H oznacza header, natomiast cyfra nn to stopień tytułu (mamy to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <H1> i zamykającego </H1>. <H1> to wielkość znacznika otwierającego <H1> i zamykającego </H1>. <H1> to wielkość największa, a <H6> to wielkość najmniejszanajwiększa, a <H6> to wielkość najmniejsza..

• <H1> NAGŁÓWEK STOPNIA 1 <H1> NAGŁÓWEK STOPNIA 1 </H1></H1>

• <H2> NAGŁÓWEK STOPNIA 2 </H2><H2> NAGŁÓWEK STOPNIA 2 </H2>• <H3> NAGŁÓWEK STOPNIA 3 </H3><H3> NAGŁÓWEK STOPNIA 3 </H3>• <H4> NAGŁÓWEK STOPNIA 4 </H4><H4> NAGŁÓWEK STOPNIA 4 </H4>• <H5> NAGŁÓWEK STOPNIA 5 </H5><H5> NAGŁÓWEK STOPNIA 5 </H5>• <H6> NAGŁÓWEK STOPNIA 6 </H6><H6> NAGŁÓWEK STOPNIA 6 </H6>

WSTAWIAMYWSTAWIAMY KOLORY KOLORY

• tło ma taki kolor, jaki został domyślnie przyjęty przez przeglądarkę WWW. 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ę Chcąc je zmienić musimy zmodyfikować sekcję <BODY> i posłużyć się następującym poleceniem:następującym poleceniem:

• <BODY BGCOLOR="angielskanazwakoloru"><BODY BGCOLOR="angielskanazwakoloru">• Kolor możemy określić w formacie RRGGBB lub za pomocą jego angielskiej Kolor możemy określić w formacie RRGGBB lub za pomocą jego angielskiej

nazwy. nazwy. • W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się

wówczas poleceniem:wówczas poleceniem:• <FONT COLOR="angielskanazwakoloru">Tekst objęty poleceniem</FONT><FONT COLOR="angielskanazwakoloru">Tekst objęty poleceniem</FONT>• Należy zwrócić uwagę, iż znacznik <FONT> musi zostać zamknięty. W 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 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 zdefiniujemy. w przypadku określania koloru tła dla strony oraz tekstu możemy używać wartości heksadecymalnych:możemy używać wartości heksadecymalnych:

• <FONT COLOR="rrggbb">Tekst objęty poleceniem</FONT><FONT COLOR="rrggbb">Tekst objęty poleceniem</FONT> • Używanie wartości heksadecymalnych jest bardziej uniwersalne, należy Używanie wartości heksadecymalnych jest bardziej uniwersalne, należy

pamiętać o umieszczeniu znaku # (hash). pamiętać o umieszczeniu znaku # (hash). • Dobieramy kolory tak, aby adresat Twojej strony nie zniechęcił się już na 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. wstępie. Żółty tekst na białym tle nie świadczy zbyt dobrze o jego autorze.

LISTA SZESNASTU LISTA SZESNASTU PODSTAWOWYCH BARWPODSTAWOWYCH BARW

• black #000000black #000000 fuchsia #FF00FFfuchsia #FF00FF silver #C0C0C0silver #C0C0C0

• green #008000green #008000 gray #808080gray #808080 lime #00FF00 lime #00FF00

• white #FFFFFF white #FFFFFF olive #808000 olive #808000 maroon #800000 maroon #800000

• yellow #FFFF00yellow #FFFF00 red #FF0000 red #FF0000 navy #000080 navy #000080

• purple #800080 purple #800080 blue #0000FFblue #0000FF teal #008080 teal #008080

WIELKOŚĆ CZCIONKIWIELKOŚĆ CZCIONKI

• Chcąc zmienić wielkość czcionki używamy znacznika:Chcąc zmienić wielkość czcionki używamy znacznika:<FONT SIZE="x"> TEKST</FONT>. <FONT SIZE="x"> TEKST</FONT>. gdzie:gdzie:x - jest bezwzględną wartością czcionki. x - jest bezwzględną wartością czcionki.

• Czcionka standardowa ma przypisaną wartość 3 (nie należy mylić jej ze 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.stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.

• Chcąc zmienić kolor czcionki używamy znacznika:Chcąc zmienić kolor czcionki używamy znacznika:<FONT COLOR="#rrggbb"> TEKST </FONT><FONT COLOR="#rrggbb"> TEKST </FONT>

• <FONT FACE="nazwa czcionki"> Przykładowy tekst </FONT> <FONT FACE="nazwa czcionki"> Przykładowy tekst </FONT> Pozwala ono zmienić krój czcionki dla danego dokumentuPozwala ono zmienić krój czcionki dla danego dokumentu

• Przykładem Przykładem indeksu dolnegoindeksu dolnego jest cyfra 2 we wzorze H2O. Tekst jest cyfra 2 we wzorze H2O. Tekst wpisany mniejszymi i niżej położonymi literami można wpisany mniejszymi i niżej położonymi literami można sformatować za pomocą znacznika <SUB> </SUB> (subscript).sformatować za pomocą znacznika <SUB> </SUB> (subscript).

• H<SUB>2</SUB>OH<SUB>2</SUB>O• Przykładem Przykładem indeksu górnegoindeksu górnego jest liczba 10 w wyrażeniu 210. Tekst wpisany jest liczba 10 w wyrażeniu 210. Tekst wpisany

mniejszymi i wyżej położonymi literami można sformatować za pomocą mniejszymi i wyżej położonymi literami można sformatować za pomocą znacznika <SUP> </SUP> (superscript).znacznika <SUP> </SUP> (superscript).

• 2<SUP>10</SUP>2<SUP>10</SUP>

LISTY NUMEROWANELISTY NUMEROWANE

PrzykładPrzykład kodu źródłowego:kodu źródłowego: <OL><OL>

<LI>Poniedziałek<LI>Poniedziałek<LI>Wtorek<LI>Wtorek<LI>Środa<LI>Środa<LI>Czwartek<LI>Czwartek<LI>Piątek<LI>Piątek<LI>Sobota<LI>Sobota<LI>Niedziela<LI>Niedziela</OL></OL>

i jego efekt działaniai 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

LISTY WYPUNKTOWANELISTY WYPUNKTOWANE

PrzykładPrzykład kodu źródłowego:kodu ź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łaniai jego efekt działania

• Poniedziałek Poniedziałek • Wtorek Wtorek • Środa Środa • Czwartek Czwartek • Piątek Piątek • Sobota Sobota • Niedziela Niedziela

TABELE NA STRONIE WWWTABELE NA STRONIE WWW

• Jednym z podstawowych elementów służących do formatowania tekstu są Jednym z podstawowych elementów służących do formatowania tekstu są tabele. Mają one dwojakie zastosowanie. Po pierwsze umożliwiają tworzenie tabele. Mają one dwojakie zastosowanie. Po pierwsze umożliwiają tworzenie obszarów składających się z wierszy i kolumn. Drugim zastosowaniem tabel jest 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.organizacja wyglądu strony m.in. w połączeniu z obrazkami i formularzami.

• Do definicji tabeli służy znacznik Do definicji tabeli służy znacznik <TABLE> </TABLE>.<TABLE> </TABLE>. Tabela składa się z Tabela składa się z wierszy oznaczanych znacznikami wierszy oznaczanych znacznikami <TR> </TR>.<TR> </TR>. Poszczególne wiersze składają Poszczególne wiersze składają się z komórek się z komórek <TD>.<TD>. Szczególnym przypadkiem komórki jest nagłówek kolumny Szczególnym przypadkiem komórki jest nagłówek kolumny oznaczony jako oznaczony jako <TH>.<TH>. Jest on wyświetlany pogrubioną czcionką. Jest on wyświetlany pogrubioną czcionką.

• Najprostszy przykład reprezentujący Najprostszy przykład reprezentujący tabelę bez obramowaniatabelę bez obramowania wygląda wygląda następująco:następująco:

<TABLE><TABLE><TR><TH>...<TH>...</TR><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE></TABLE>

TABELE Z OBRAMOWANIEMTABELE Z OBRAMOWANIEM

• Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję znacznika definicję znacznika <TABLE><TABLE> o atrybut o atrybut BORDERBORDER.. Jeśli nie podamy Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.szerokości obramowania, przyjmowana jest jej domyślna wartość.

• <TABLE BORDER><TABLE BORDER><TR><TH>...<TH>...</TR><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE></TABLE>

FORMATOWANIE TABELIFORMATOWANIE TABELI• Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona

odpowiednio zinterpretowana przez przeglądarkę, na przykład:odpowiednio zinterpretowana przez przeglądarkę, na przykład:• <TABLE BORDER=5><TABLE BORDER=5>

<TR><TH>...<TH>...</TR><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE></TABLE>

• Marginesy dla komórek:Marginesy dla komórek:

• Jeśli uznamy, że odstęp między zawartością komórki a jej Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć atrybutuobramowaniem jest zbyt mały, możemy użyć atrybutu CELLPADDINGCELLPADDING (domyślnie wynosi on 1). (domyślnie wynosi on 1).

• <TABLE BORDER=5 CELLPADDING=10><TABLE BORDER=5 CELLPADDING=10><TR><TH>...<TH>...</TR><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE></TABLE>

FORMATOWANIE TABELIFORMATOWANIE TABELI

• Szerokość tabeli:Szerokość tabeli:

• Atrybut Atrybut WIDTHWIDTH daje nam możliwość samodzielnego zdefiniowania daje nam możliwość samodzielnego zdefiniowania szerokości tabeliszerokości tabeli. .

• <TABLE BORDER=5 WIDTH=600 CELLPADDING=10><TABLE BORDER=5 WIDTH=600 CELLPADDING=10><TR><TH>...<TH>...</TR><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE></TABLE>

• Zamiast wartości absolutnej w pikselach możemy także użyć wartości Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki.procentowej, np. pół szerokości ekranu przeglądarki.

• <TABLE BORDER=5 WIDTH="50%" CELLPADDING=10><TABLE BORDER=5 WIDTH="50%" CELLPADDING=10><TR><TH>...<TH>...</TR><TR><TH>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE> </TABLE>

FORMATOWANIE TABELIFORMATOWANIE TABELI

• Atrybut Atrybut WIDTHWIDTH możemy wykorzystać także de zdefiniowania szerokości możemy wykorzystać także de zdefiniowania szerokości komórkikomórki

• <TABLE BORDER=5 CELLPADDING=10><TABLE BORDER=5 CELLPADDING=10><TR><TH WIDTH=250>...<TH>...</TR><TR><TH WIDTH=250>...<TH>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR><TR><TD>...<TD>...</TR></TABLE></TABLE>

• Atrybut Atrybut ALIGNALIGN możemy także wykorzystać do poziomego wyrównania możemy także wykorzystać do poziomego wyrównania zawartości komórki - wyśrodkowania, wyrównania do lewej i wyrównania do zawartości komórki - wyśrodkowania, wyrównania do lewej i wyrównania do prawej. Używamy wówczas następującego zapisu:prawej. Używamy wówczas następującego zapisu:

• <TD ALIGN="center"><TD ALIGN="center"><TD ALIGN="left"><TD ALIGN="left"><TD ALIGN="right"> <TD ALIGN="right">

• AtrybutAtrybut VALIGNVALIGN (vertical) służy do pionowego wyrównania zawartości (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do&nbspdolnego brzegu. komórki - do górnego brzegu, do środka i do&nbspdolnego brzegu. Używamy wówczas następującego zapisu:Używamy wówczas następującego zapisu:

FORMATOWANIE TABELIFORMATOWANIE TABELI• <TD VALIGN="top"> <TD VALIGN="middle"> <TD VALIGN="bottom"><TD VALIGN="top"> <TD VALIGN="middle"> <TD VALIGN="bottom">

• W celu ustawienia koloru tła tabeli należy w definicji tabeli dodać atrybut W celu ustawienia koloru tła tabeli należy w definicji tabeli dodać atrybut BGCOLORBGCOLOR="barwa", np. ="barwa", np.

• <TABLE BORDER HEIGHT=200 BGCOLOR="#FAF5DC"> <TABLE BORDER HEIGHT=200 BGCOLOR="#FAF5DC">

• W celu ustawienia koloru obramowania tabeli należy wstawić atrybutW celu ustawienia koloru obramowania tabeli należy wstawić atrybut BORDERCOLORBORDERCOLOR="barwa", np.="barwa", np.

• <TABLE BORDER=5 BORDERCOLOR="#996600"> <TABLE BORDER=5 BORDERCOLOR="#996600">

• 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:

• <TABLE BORDER=5 CELLPADDING=10 WIDTH=200><TABLE BORDER=5 CELLPADDING=10 WIDTH=200><TR><TD COLSPAN=2>Klasy</TR><TR><TD COLSPAN=2>Klasy</TR><TR><TD>Ia<TD>Ib</TR><TR><TD>Ia<TD>Ib</TR><TR><TD>IIa<TD>IIb</TR><TR><TD>IIa<TD>IIb</TR></TABLE> </TABLE>

• w pionie:w pionie:

• <TABLE BORDER=5 CELLPADDING=10 WIDTH=200><TABLE BORDER=5 CELLPADDING=10 WIDTH=200><TR><TD>Grupa<TD>Klasa</TR><TR><TD>Grupa<TD>Klasa</TR><TR><TD ROWSPAN=2>Chłopcy<TD>Ia</TR><TR><TD ROWSPAN=2>Chłopcy<TD>Ia</TR><TR><TD>IIa</TR><TR><TD>IIa</TR></TABLE> </TABLE>

GRAFIKA NA STRONIEGRAFIKA NA STRONIE

• Podstawowymi elementami graficznymi stron WWW są pliki typu Podstawowymi elementami graficznymi stron WWW są pliki typu JPG JPG (Joint (Joint Photographic Expert Group)Photographic Expert Group), , GIF GIF (Graphics Interchange Format)(Graphics Interchange Format) lub lub PNG PNG (Portable Network Graphics)(Portable Network Graphics). Osadzenie takiego "obrazka" dokonuje się za . Osadzenie takiego "obrazka" dokonuje się za pomocą znacznika <IMG>. Jego najważniejszym atrybutem jest SRC, który pomocą znacznika <IMG>. Jego najważniejszym atrybutem jest SRC, który wskazuje adres pliku. wskazuje adres pliku.

• <IMG SRC="nazwa.gif"> <IMG SRC="nazwa.gif">

• Wielkość obrazka możemy regulować za pomocą atrybutówWielkość obrazka możemy regulować za pomocą atrybutów HEIGHT HEIGHT (wysokość) i (wysokość) i WIDTHWIDTH (szerokość). (szerokość).

• <IMG SRC="nazwa.gif” HEIGHT=‘’40%” WIDTH=‘’50%”><IMG SRC="nazwa.gif” HEIGHT=‘’40%” WIDTH=‘’50%”>

• atrybut atrybut BORDER=xBORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli równej x pikseli

• <IMG SRC="nazwa.gif” HEIGHT=‘’40%” WIDTH=‘’50%” BORDER=6><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 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ć znacznikami komórki <TD> </TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań, do tworzenia efektownie wyglądających obramowań,

ANIMACJEANIMACJE

• Efektownym elementem graficznym jest animacja Efektownym elementem graficznym jest animacja MarqueeMarquee. Jest to . Jest to "pływający" w poprzek ekranu napis. Animacji można przypisać wiele "pływający" w poprzek ekranu napis. Animacji można przypisać wiele atrybutów, które bardzo urozmaicają zachowanie napisu. Minimalna definicja atrybutów, które bardzo urozmaicają zachowanie napisu. Minimalna definicja Marquee ma postać: Marquee ma postać:

• <MARQUEE>Tekst animacji</MARQUEE> <MARQUEE>Tekst animacji</MARQUEE> • Dodatkowe atrybuty są wstawiane w ramach otwierającego znacznika, tj. Dodatkowe atrybuty są wstawiane w ramach otwierającego znacznika, tj.

<MARQUEE Atrybut="wartość">. Animację można wstawiać także do komórki <MARQUEE Atrybut="wartość">. Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD> tabeli, między znaczniki <TD> </TD>

• Tekst może się poruszać na trzy sposoby:Tekst może się poruszać na trzy sposoby:• BEHAVIOR="scroll"BEHAVIOR="scroll" - powoduje, że tekst porusza się od jednego brzegu - powoduje, że tekst porusza się od jednego brzegu

strony w kierunku drugiego, znika za nim i wypływa ponownie zza strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu.pierwszego brzegu.

• BEHAVIOR="slide"BEHAVIOR="slide" - powoduje, że tekst wyrusza od pierwszego brzegu, - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.dociera do drugiego i zatrzymuje się.

• BEHAVIOR="alternate"BEHAVIOR="alternate" - powoduje, że tekst wyrusza od pierwszego brzegu, - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.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"BGCOLOR="angielskanazwakoloru" - pozwala określić kolor tła dla pola, po - pozwala określić kolor tła dla pola, po

której porusza się napis. Kolor można podać w postaci heksadecymalnej której porusza się napis. Kolor można podać w postaci heksadecymalnej ("#RRGGBB") lub słownej ("red"). ("#RRGGBB") lub słownej ("red").

MULTIMEDIAMULTIMEDIA• Elementy multimedialne są jednymi z najbardziej charakterystycznych Elementy multimedialne są jednymi z najbardziej charakterystycznych

elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. sieci, ale także dostarczając sporej dawki informacji. Zazwyczaj&nbspstosuje się dwa typy odsyłaczy - styl Netscape i styl Zazwyczaj&nbspstosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Microsoftu.

• Plik dźwiękowy WAV (styl Netscape)Plik dźwiękowy WAV (styl Netscape)

• <EMBED SRC="plik.wav" BORDER="0" WIDTH="x" HEIGHT="y"><EMBED SRC="plik.wav" BORDER="0" WIDTH="x" HEIGHT="y">

• Plik dźwiękowy WAV (styl Microsoft)Plik dźwiękowy WAV (styl Microsoft)

• <BGSOUND SRC="plik.wav" LOOP="infinite"> <BGSOUND SRC="plik.wav" LOOP="infinite">

• Plik dźwiękowy MIDI (styl Netscape)Plik dźwiękowy MIDI (styl Netscape)

• <EMBED SRC="plik.wav" BORDER="0"> <EMBED SRC="plik.wav" BORDER="0">

• Plik dźwiękowy MIDI (styl Microsoft) Plik dźwiękowy MIDI (styl Microsoft)

• <BGSOUND SRC="plik.mid" LOOP="1"><BGSOUND SRC="plik.mid" LOOP="1">

• Plik wideo AVI (styl Netscape) Plik wideo AVI (styl Netscape)

• <EMBED SRC="plik.avi" BORDER="0"> <EMBED SRC="plik.avi" BORDER="0">

• Plik wideo AVI (styl Microsoft) Plik wideo AVI (styl Microsoft)

• <IMG BORDER="0" ALT="opis elementu" DYNSRC="plik.avi" LOOP="infinite" <IMG BORDER="0" ALT="opis elementu" DYNSRC="plik.avi" LOOP="infinite" START="fileopen"> START="fileopen">

ODSYŁACZEODSYŁACZE

• Odsyłacze umożliwiają powiązanie dokumentów na tym samym serwerze, w 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 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, 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 w której autor odwołuje się do informacji (np. ilustracji) zamieszczonej na jej końcu.jej końcu.

• Odsyłaczem do etykietyOdsyłaczem do etykiety nazywamy odnośnik (odsyłacz) do elementu nazywamy odnośnik (odsyłacz) do elementu znajdującego na tej samej stronie. Jego konstrukcja jest następująca:znajdującego na tej samej stronie. Jego konstrukcja jest następująca:

• <A NAME="nazwa_etykiety"></A> <A NAME="nazwa_etykiety"></A> (nazwa etykiety)(nazwa etykiety)

• Po stworzeniu etykiety należy stworzyć odsyłacz do etykietyPo stworzeniu etykiety należy stworzyć odsyłacz do etykiety

• Odsyłacz jest konstrukcją, która wskazuje pewne miejsce i pozwala skoczyć 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 do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci: obrazowo przedstawić w postaci:

• <A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A><A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A>

• odsyłacze do stron WWW odsyłacze do stron WWW

• <A HREF="http://www.wp.pl"> Wirtualna Polska </A> <A HREF="http://www.wp.pl"> Wirtualna Polska </A>

• Odsyłacze do poczty elektronicznejOdsyłacze do poczty elektronicznej

• <A HREF="mailto:imie_nazwisko@adres">Tutaj kliknij</A> <A HREF="mailto:imie_nazwisko@adres">Tutaj kliknij</A>

ZASADY TWORZENIA ZASADY TWORZENIA STRON WWWSTRON WWW

• Publikowanie w SieciPublikowanie 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, podsumowując temat, korzystaj z nagłówków, – stosuj listy, stosuj listy, – nie zapominaj o menu zawierających połączenia (linki), nie zapominaj o menu zawierających połączenia (linki), – nie ukrywaj ważnych informacji w tekście. 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, niech Twoje tytuły będą opisowe, – jeśli strona wiąże się tematycznie ze stroną poprzedzającą, umieść jeśli strona wiąże się tematycznie ze stroną poprzedzającą, umieść

połączenia nawigacyjne do strony (a także do strony głównej). połączenia nawigacyjne do strony (a także do strony głównej). • Ostrożnie stosuj wyróżnienia - nie nadużywaj atrybutów formatowania Ostrożnie stosuj wyróżnienia - nie nadużywaj atrybutów formatowania

(takich jak pogrubienie, kursywa, wielkie litery, miganie, efekt marquuee). (takich jak pogrubienie, kursywa, wielkie litery, miganie, efekt marquuee). • Sprawdzaj ortografię i składnię. Sprawdzaj ortografię i składnię.

PROJEKTOWANIE STRONY PROJEKTOWANIE STRONY

• Projektowanie i układ stronyProjektowanie 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ę konsekwentnie stosuj elementy strony - jeśli strona rozpoczyna się

nagłówkiem podkreślonym linią, taki sam układ powinien pojawić się na nagłówkiem podkreślonym linią, taki sam układ powinien pojawić się na pozostałych stronach, pozostałych stronach,

– konsekwentnie przestrzegaj form nawigacji - na kolejnych stronach, konsekwentnie przestrzegaj form nawigacji - na kolejnych stronach, umieszczaj menu nawigacyjne zawsze w tym samym miejscu. 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 Połączenia twórz tylko wówczas, gdy są ku temu ważne powody. Unikaj tworzenia połączeń do mało istotnego materiału. tworzenia połączeń do mało istotnego materiału.

OBRAZYOBRAZY

• ObrazyObrazy• 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 <IMG> spowoduje, iż w przeglądarkach tekstowych atrybut ALT znacznika <IMG> spowoduje, iż w przeglądarkach tekstowych grafika zostanie zastąpiona tekstem, grafika zostanie zastąpiona tekstem,

– jeżeli to możliwe stwórz dwie wersje - dla przeglądarek graficznych i dla jeżeli to możliwe stwórz dwie wersje - dla przeglądarek graficznych i dla tekstowych. tekstowych.

• Stosuj małe obrazy Stosuj małe obrazy – cała strona (tekst plus grafika) powinna załadować się w czasie nie 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). dłuższym niż 30 sekund (uprzedzaj o stronach "ważących" powyżej 50 KB). – zapisuj pliki GIF z przeplotem, zapisuj pliki GIF z przeplotem, – przetestuj zapis obrazu w formatach JPEG i GIF, i sprawdź, który z nich daje przetestuj zapis obrazu w formatach JPEG i GIF, i sprawdź, który z nich daje

w efekcie mniejszy plik, w efekcie mniejszy plik, – w przypadku obrazów w formacie GIF, im uboższa paleta kolorów, tym w przypadku obrazów w formacie GIF, im uboższa paleta kolorów, tym

mniejszy plik, mniejszy plik, – wykorzystuj fragmenty obrazu lub zmień jego skalę. 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 zadbaj o to, by kolory pierwszego planu (tekstu) kontrastowały z kolorami

tła, tła, – jeśli stosujesz wzorzyste tło, sprawdź, czy wzór nie pokrywa się z tekstem. jeśli stosujesz wzorzyste tło, sprawdź, czy wzór nie pokrywa się z tekstem.

DOBRE RADYDOBRE RADY• Inne dobre zwyczaje i podpowiedziInne 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.

LITERATURALITERATURA

1) ” Podstawy projektowania w języku HTML” A. Mazur1) ” Podstawy projektowania w języku HTML” A. Mazur

2)2) www.KOMPUTERSWIAT.PLwww.KOMPUTERSWIAT.PL

3)3) www.kurshtml.boo.plwww.kurshtml.boo.pl

4)4) „„Indeks znaczników HTML” zasoby KISSIndeks znaczników HTML” zasoby KISS

5)5) Zasoby InternetuZasoby Internetu

PODSTAWY TWORZENIA STRON WWW W HTML’u

Documents

Transcript of PODSTAWY TWORZENIA STRON WWW W HTML’u