PODSTAWY TWORZENIA STRON WWW W HTML’u

1 PODSTAWY TWORZENIA STRON WWW W HTML’u ...
Author: Natasza Drzymała
0 downloads 0 Views

1 PODSTAWY TWORZENIA STRON WWW W HTML’u

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: Moja pierwsza strona Znaczniki wymagają czasem zamknięcia - do tego celu wykorzystujemy prawy ukośnik "/" tzw. "slash".

3 SCHEMAT STRONY Każdy dokument napisany w HTML rozpoczyna się znacznikiem , zaś kończy . Pomiędzy tymi znacznikami znajduje się treść dokumentu. Treść podzielona jest na dwie części: nagłówek, głowę wykorzystywany jest jako opis pliku część główną, tzw. ciało , w której umieszcza się właściwą zawartość strony

4 SCHEMAT STRONY Zatem otwierając pusty plik w edytorze umieszczamy w nim zapis o następującej składni: tu umieszczamy opis pliku tu umieszczamy właściwą część strony

5 Tytuł stronyHEAD 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 i . Do tego celu wykorzystamy znacznik </span> <span class='tr'><TITLE> Tytuł strony

6 HEAD kodowanie język nazwa programu w którym powstała strona tytuł strony umieszczany na pasku tytułu

7 BODY

8 FORMATOWANIE AKAPITÓWPrzeglą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

treść akapitu

. 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ół. Ponadto polecenie
napisanie kilka razy pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia.

9 FORMATOWANIE AKAPITÓWPrzeglą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

treść akapitu

. 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ół. Ponadto polecenie
napisanie kilka razy pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia.

10 FORMATOWANIE AKAPITÓW

akapit po lewej stronie

akapit po prawej stronie

akapit wyśrodkowany

akapit wyjustowany

11 FORMATOWANIE TEKSTU Do pogrubienia tekstu na stronie służą znaczniki tekst pogrubiony Do podkreślenia tekstu na stronie służą znaczniki tekst podkreślony Do pochylenia tekstu służą znaczniki kursywa Do przekreślenia tekstu służą znaczniki Do wprowadzania indeksu górnego służą znaczniki Do wprowadzania indeksu dolnego służą znaczniki

12 WSTAWIAMY KOLORY Kolor możemy określić w formacie RRGGBB lub za pomocą jego angielskiej nazwy. Kolor czcionki zmieniamy za pomocą polecenia: Tekst Należy zwrócić uwagę, iż znacznik musi zostać zamknięty. Tekst Używanie wartości heksadecymalnych jest bardziej uniwersalne, należy pamiętać o umieszczeniu znaku # (hash).

13 WIELKOŚĆ 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.

14 NAGŁÓWKI NA STRONIE WWWDo wprowadzania tytułów w dokumentach służy polecenie . 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 2

NAGŁÓWEK STOPNIA 3

NAGŁÓWEK STOPNIA 4

NAGŁÓWEK STOPNIA 5
NAGŁÓWEK STOPNIA 6

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

16 LISTY NUMEROWANE Przykład kodu źródłowego: i jego efekt działania

  1. Poniedziałek
  2. Wtorek
  3. Środa
  4. Czwartek
  5. Piątek
  6. Sobota
  7. Niedziela 1. Poniedziałek 2. Wtorek 3. Środa 4. Czwartek 5. Piątek 6. Sobota
7. Niedziela

17 LISTY WYPUNKTOWANE i jego efekt działaniaPrzykład kodu źródłowego: i jego efekt działania

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

18 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

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

19 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ść.
......
......
......
Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład:
......
......
......

20 FORMATOWANIE TABELI Szerokość 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.
......
......
......

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

22 FORMATOWANIE TABELI 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.

23 GRAFIKA NA STRONIE 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ść).

24 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ć: Tekst animacji 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").

25 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: (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: Tekst, na którym należy kliknąć odsyłacze do stron WWW Wirtualna Polska