PODSTAWY TWORZENIA STRON WWW W HTML’u
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".
SCHEMAT STRONY Każdy dokument napisany w HTML rozpoczyna się znacznikiem <HTML>, zaś kończy </HTML>. Pomiędzy tymi znacznikami znajduje się treść dokumentu. Treść podzielona jest na dwie części: nagłówek, głowę <HEAD> wykorzystywany jest jako opis pliku część główną, tzw. ciało <BODY>, w której umieszcza się właściwą zawartość strony
SCHEMAT STRONY Zatem otwierając pusty plik w edytorze umieszczamy w nim zapis o następującej składni: <HTML> <HEAD> tu umieszczamy opis pliku </HEAD> <BODY> tu umieszczamy właściwą część strony </BODY> </HTML>
<TITLE> Tytuł strony</TITLE> HEAD Każda strona WWW powinna zawierać tytuł, który będzie wyświetlany na pasku tytułowym okna przeglądarki. 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 znacznik <TITLE> <TITLE> Tytuł strony</TITLE>
HEAD <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> kodowanie <meta http-equiv="Content-Language" content="pl" /> język <meta name="Author" content= „W tym miejscu umieść nazwę autora strony" /> <meta name="Authoring-tool" content="Pajaczek NxG STD v5.4.0" /> nazwa programu w którym powstała strona <title> tytuł strony umieszczany na pasku tytułu</title>
BODY <body bgcolor="#FFFF33" kolor tła text="#330000” kolor tekstu LINK="kolor1" kolor odsyłacza VLINK="kolor2" kolor użytego odsyłacza ALINK="kolor3” kolor aktywnego odsyłacza leftmargin="10" lewy margines rightmargin="10" prawy margines topmargin="10" górny margines >
FORMATOWANIE AKAPITÓW 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> treść akapitu </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ół. Ponadto polecenie <BR> napisanie kilka razy pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia.
FORMATOWANIE AKAPITÓW 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> treść akapitu </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ół. Ponadto polecenie <BR> napisanie kilka razy pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia.
FORMATOWANIE AKAPITÓW <P ALIGN=LEFT> </P> akapit po lewej stronie <P ALIGN=RIGHT> </P> akapit po prawej stronie <P ALIGN=CENTER> </P> akapit wyśrodkowany <P ALIGN=JUSTIFY> </P> akapit wyjustowany
FORMATOWANIE TEKSTU 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> Do wprowadzania indeksu górnego służą znaczniki <SUP> </SUP> Do wprowadzania indeksu dolnego służą znaczniki <SUB> </SUB>
WSTAWIAMY KOLORY Kolor możemy określić w formacie RRGGBB lub za pomocą jego angielskiej nazwy. Kolor czcionki zmieniamy za pomocą polecenia: <FONT COLOR = "nazwa koloru"> Tekst </FONT> Należy zwrócić uwagę, iż znacznik <FONT> musi zostać zamknięty. <FONT COLOR = ”#rrggbb” > Tekst </FONT> Używanie wartości heksadecymalnych jest bardziej uniwersalne, należy pamiętać o umieszczeniu znaku # (hash).
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.
NAGŁÓWKI NA STRONIE WWW Do wprowadzania tytułów w dokumentach służy polecenie <Hn> </Hn>. 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>
LISTA SZESNASTU PODSTAWOWYCH BARW black #000000 fuchsia #FF00FF silver #C0C0C0 green #008000 gray #808080 lime #00FF00 white #FFFFFF olive #808000 maroon #800000 yellow #FFFF00 red #FF0000 navy #000080 purple #800080 blue #0000FF teal #008080
LISTY NUMEROWANE Przykład kodu źródłowego: i jego efekt działania <OL> <LI>Poniedziałek <LI>Wtorek <LI>Środa <LI>Czwartek <LI>Piątek <LI>Sobota <LI>Niedziela 1. Poniedziałek 2. Wtorek 3. Środa 4. Czwartek 5. Piątek 6. Sobota </OL> 7. Niedziela
LISTY WYPUNKTOWANE i jego efekt działania Przykład kodu źródłowego: i jego efekt działania <UL> <LI>Poniedziałek <LI>Wtorek <LI>Środa <LI>Czwartek <LI>Piątek <LI>Sobota <LI>Niedziela Poniedziałek Wtorek Środa Czwartek Piątek Sobota </UL> Niedziela
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>
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> 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>
FORMATOWANIE TABELI Szerokość tabeli: Atrybut WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. <TABLE BORDER=5 WIDTH=600 > <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%" > <TR><TH>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE>
FORMATOWANIE TABELI 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"> Atrybut VALIGN (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i dolnego brzegu. Używamy wówczas następującego zapisu: <TD VALIGN="top"> <TD VALIGN="middle"> <TD VALIGN="bottom">
FORMATOWANIE TABELI 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">
GRAFIKA NA STRONIE 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>
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> 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").
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) 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>