Transcript html - 292KB
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ę.
Zapisuje się je WIELKIMI literami w nawiasach kątowych < >. Ich składnia jest następująca:
...
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:
MOJA STRONA ...
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
.
Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie zamknięcia.
, 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 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 … tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania) umieszczamy w znacznikach …
NAGŁÓWKI NA STRONIE WWW
• • • • • • •
W dokumentach często wprowadzamy tytuły. Służy do tego polecenie
Znak H oznacza header, natomiast cyfra
to wielkość najmniejsza.
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
NAGŁÓWEK STOPNIA 1
NAGŁÓWEK STOPNIA 2
NAGŁÓWEK STOPNIA 3
NAGŁÓWEK STOPNIA 4
NAGŁÓWEK STOPNIA 5
NAGŁÓWEK STOPNIA 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: 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: 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: Tekst objęty poleceniem 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.
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
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.
Chcąc zmienić kolor czcionki używamy znacznika: TEKST 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).
H2O 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).
210
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
LISTY WYPUNKTOWANE
• • • • • • • • •
Przykład kodu źródłowego:
i jego efekt działania Poniedziałek Wtorek Środa Czwartek Piątek Sobota 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
.
Tabela składa się z wierszy oznaczanych znacznikami .
komórek
Poszczególne wiersze składają się z 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:
... ... ... ... ... ...
TABELE Z OBRAMOWANIEM
•
Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję znacznika 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: (domyślnie wynosi • • • Szerokość tabeli: Atrybut WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. • • • • • 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 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: • • • • • • • • • • w poziomie: • • Podstawowymi elementami graficznymi stron WWW są pliki typu JPG Photographic Expert Group) , GIF (Graphics Interchange Format) (Joint lub PNG (Portable Network Graphics) . Osadzenie takiego "obrazka" dokonuje się za pomocą znacznika • • Wielkość obrazka możemy regulować za pomocą atrybutów WIDTH (szerokość). • Obrazek można również umieścić w komórce tabeli, wstawiając między znacznikami komórki • • • • • • • • • 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ć: Dodatkowe atrybuty są wstawiane w ramach otwierającego znacznika, tj. 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" porusza się napis. Kolor można podać w postaci heksadecymalnej ("#RRGGBB") lub słownej ("red"). - pozwala określić kolor tła dla pola, po której • • • • • • • • • • • • • 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) • • • • • • • • • • 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) 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: Tekst, na którym należy kliknąć odsyłacze do stron WWW Wirtualna Polska Odsyłacze do poczty elektronicznej Tutaj kliknij • • • • • • • 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ę. • • • • • • • • • 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. 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. • • • • • Nie przesadzaj z liczbą obrazów. Stosuj tekst alternatywny (dla przeglądarek tekstowych). – atrybut ALT znacznika 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. • • • • • • 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. 1) ” Podstawy projektowania w języku HTML” A. Mazur 2) www.KOMPUTERSWIAT.PL 3) 4) 5) www.kurshtml.boo.pl „Indeks znaczników HTML” zasoby KISS Zasoby Internetu o atrybut BORDER .
... ... ... ... ... ... FORMATOWANIE TABELI
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 on 1).... ... ... ... ... ... CELLPADDING
... ... ... ... ... ... FORMATOWANIE TABELI
Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki.... ... ... ... ... ...
... ... ... ... ... ... FORMATOWANIE TABELI
... ... ... ... ... ...
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.
Komórki danych i nagłówków można ze sobą łączyć.
w pionie:Klasy Ia Ib IIa IIb
Grupa Klasa Chłopcy Ia IIa GRAFIKA NA STRONIE
. Jego najważniejszym atrybutem jest SRC, który wskazuje adres pliku.
 i </b></p>
<p>• •</p>
<p><b>atrybut BORDER=x pikseli pozwala wyświetlić wokół obrazka ramkę o grubości równej x <IMG SRC=)
definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań,
ANIMACJE
MULTIMEDIA
ODSYŁACZE
ZASADY TWORZENIA STRON WWW
Publikowanie w Sieci
PROJEKTOWANIE STRONY
Projektowanie i układ strony
Stosowanie połączeń
OBRAZY
Obrazy
spowoduje, iż w przeglądarkach tekstowych
DOBRE RADY
Inne dobre zwyczaje i podpowiedzi
LITERATURA