TWORENIE STRON WWW, PODSTAWY JĘZYKA HTML
|    |
| | | Przedmiot: Informatyka | dodano: 2006-09-28 | |
Strony WWW (World Wide Web), można pisać w każdym programie, który umożliwia zapisanie plików w formacie HTML. Format HTML nie jest czymś skomplikowanym, są to zwykłe pliki tekstowe, zawierające pewne znaczki formatujące, które opisują, jak ma wyglądać wprowadzony tekst czy element na stronie. HTML- to skrót od „HypreTekst Markup Language.” To standardowy język hipertekstowy do przygotowania stron WWW tj. World Wide Web. Pliki te można więc tworzyć w dowolnym edytorze tekstowym - na przykład w Notatniku Windows czy edytorze programu Norton Commander.
Pisanie w tak prostych edytorach tekstu, jak Notatnik czy Norton Commander jest dość kłopotliwe, gdyż trzeba ręcznie wpisywać wszystkie znaki formatujące i bardzo uważać, aby się nie pomylić. Aby ułatwić to zadanie, powstało wiele programów edytorów tekstów HTML, które same wstawiają wszystkie potrzebne znaczki, a My musimy się skupić na treści i wyglądzie strony. Edytory stron możemy podzielić na tekstowe i graficzne. Edytory tekstowe wyświetlają wszystkie znaczki formatujące pliku HTML oraz wprowadzony tekst, umożliwiają automatyczne wprowadzenie elementów strony, takich jak odwołania do innych stron, rysunki, tabele. Aby zobaczyć jak będzie wyglądała strona w rzeczywistości, trzeba ją otworzyć w przeglądarce WWW. Zwykle jest ikonka, która to umożliwia. Do takich edytorów należą polski edytor Pajączek i HodDogPro. Drugą grupę stanowią edytory graficzne, które wyświetlają zawartość strony tak, jak ona wygląda w przeglądarce. Należą do nich Netscape Composer, MS Front Page, można też do tej grupy zaliczyć większość nowych pakietów office MS, Corel i Lotus. Wszystkie one potrafią zapisywać pliki w formacie HYML i wstawiać elementy stron WWW. Do napisania własnej strony wystarczy więc MS Word, dobrze jednak znać podstawy języka HTML i pewne mechanizmy stron WWW. Nie wystarczy jednak napisać stronę, trzeba jeszcze ją pokazać światu i nie jest to wcale takie trudne, ale wymaga kilku czynności, które mogą sprawić mały kłopot. Stronę lub strony WWW naszego pierwszego serwisu internetowego stanowi jeden bądź kilka plików *.html lub *.htm oraz elementy graficzne w plikach *.gif lub *.jpg. Pierwszy plik powinien nazywać się index.html i w nim powinny znajdować się odwołania do pozostałych. Wszystkie pliki trzeba przekopiować do odpowiedniego katalogu na serwerze WWW. Jeżeli mamy konto na serwerze umożliwiającym posiadanie strony WWW, możemy sobie taką stronę założyć. Obecnie wiele serwerów internetowych umożliwia oprócz darmowej poczty umieszczenie własnych stron WWW, należą do nich np.: friko.onet.pl oraz free.polbox.pl- na stronach tych serwerów znajdziemy informacje na temat zasad i sposobu umieszczenia własnej strony.
PODSTAWY JĘZYKA HTML;
Kod źródłowy strony WWW, to szereg poleceń języka HTML. Strona WWW jest plikiem tekstowym, ale pod przeglądarką WWW wygląda na coś zupełnie innego. Dokument HTML zawiera tekst, który ma być umieszczony na stronie, i polecenia zwane znacznikami, które stanowią informację dla przeglądarki, jak ten dokument ma być wyświetlany na ekranie. Polecenia, dla odróżnienia od zwykłego tekstu, umieszcza się w nawiasach kątowych < >. Prawie każde polecenie języka HTML składa się z dwóch części – otwierającej < > i zamykającej . Różnią się one tym, że część zamykająca jest poprzedzona znakiem /. Polecenia informują przeglądarkę, co ma zrobić z tekstem, a ich parametry, jak ma to zrobić. Polecenia i ich parametry można pisać zarówno wielkimi, jak i małymi literami. Duża część poleceń odnosi się tylko do fragmentu strony. Na przykład komenda B, która pogrubia tekst:
Tekst zwykły;
tekst pogrubiony;
Jak widać na tym przykładzie, komenda B jest zakończona przez komendę , i tak jest z wszystkimi komendami.
Dokument HTML zamyka się pomiędzy znaczkami i , podzielony jest na dwie główne części: nagłówek i treść pierwsza oznaczona jest , a druga . W części nagłówkowej zawarte są informacje na temat pliku- takim elementem jest , tytuł pliku, który pojawi się w górnym pasku okna przeglądarki. W tej części wpisane są również informacje na temat języka HTML, tła dokumentu.
Dane, które trafiły do Twojej przeglądarki, są zakodowane w specjalny sposób – są zapisane w języku HTML. Przeglądarce to nie przeszkadza – potrafi ona interpretować ten kod, więc wyświetla pobraną stronę na Twoim ekranie. Język HTML informuje przeglądarkę jak ma obsłużyć pobrane dane.
Tak więc sam widzisz, jak ważny jest język HTML. Dotrzemy teraz do jego istoty – zajmiemy się znacznikami HTML.
NAJWAŻNIESZE POLECENIA.
Najważniejsze polecenie to oczywiście polecenie HTML. Musi ono rozpoczynać każdy dokument, i musi być zamknięte jako ostatnie. Kolejną, co do ważności jest komenda BODY. Po zamknięciu BODY można już tylko zamknąć polecenie HTML. Cały tekst objęty komendą BODY z wyjątkiem innych komend zostanie wyświetlony. To wystarczy już do napisana najprostszej strony WWW:
<HTML>
<HEAD>
<!- -
TEKSY OBJĘTY ZNACZNIKAMI
<!- - I - - > TO KOMENTARZ
TUTAJ USTAWIA SIĘ PARĘ WAŻNYCH RZECZ
- ->
</HEAD>
<BODY>
Moja pierwsza strona
</BODY>
</HTML>
Większość komend można wywołać z parametrami. Tak jest np. przy ustawieniu koloru tła dla strony:
<BODY BGCOLOR=RED>
Kolor można określić na dwa sposoby:
- wpisując nazwę koloru
- podając jego numer
Pierwszy sposób jest łatwiejszy. Mogę obejrzeć tabelę zawierającą próbki kolorów mających nazwy. Drugi sposób jest trudniejszy i wygląda to na przykład tak:
<BODY BGCOLOR=12A24B>
Kolejne dwucyfrowe liczby tego numeru w systemie szesnastkowym oznaczają ilość składnika czerwonego, zielonego i niebieskiego- barwy podstawowe. W ten sposób trudniej jest ustalić kolor, ale można ich uzyskać więcej. Polecenie BODY ma wiele parametrów. Pokazany wyżej BGCOLOR zmienia kolor tła. TEXT zmienia kolor liter, LINK zmienia kolor odnośników, VLINK zmienia kolor odnośników, które były już odwiedzane. Parametry LINK i VLINK mają domyślne wartości:
LINK=BLUE
VLINK= PURPLE
Parametr BACKGRUND pozwala ustawić obrazek jako tło, np.:
<BODY BACKGRUND=TŁO>GIF>
CO MOŻNA ZROBIĆ Z TEKSTEM
Gdyby tekst był pisany cały czas taką samą czcionką, nie byłoby szans na napisanie przejrzystej strony dłuższej niż 10 linijek. Dlatego też jest wiele komend wpływających na wygląd tekstu, np:
-B- pogrubia tekst
-I- pochyla tekst (kursywa)
- U- podkreśla tekst
- STRIKE- przekreśla tekst
-BIG- powiększa tekst
-SMALL- pomniejsza tekst
-SUB- tekst pisany niżej ( indeks dolny)
-SUP- tekst pisany wyżej (indeks górny)
<H1> To jest nagłówek pierwszego poziomu </H1>
Znaczniki nagłówka powiększają tekst i dodają do niego pogrubienie. Masz do dyspozycji sześć rozmiarów nagłówka Polecałabym korzystanie nagłówków drugiego poziomu,<H2 > </H2>. Jeśli chcemy, aby nagłówek był nieco mniejszy, należy użyć pary <H3> </H3>. Nagłówki naprawdę ogromne uzyskamy stosując <H1> </H1>, ale większość projektantów stron ich unika ze względu na dysproporcję wielkości w stosunku do zwykłego tekstu. Nagłówki <H4>, <H5> i <H6> także są rzadko wykorzystywane, ponieważ ich rozmiar jest bliski rozmiarowi tekstu, a w przypadku nagłówka <H6> nawet mniejszy
Tekst we wszystkich przeglądarkach jest domyślnie wyrównywany do lewej, ale można też wyrównać do prawej
lub wyśrodkować.
Do uzyskania takich efektów używana jest komenda DIV z parametrem LONGIN. Może on mieć trzy wartości:
-LEFT- tekst wyrównany do lewej
-RIGHT- tekst wyrównany do prawej
-CENTER- tekst wyśrodkowany.
Można zauważyć, że znaki na końcu linii w pliku .htm są przez przeglądarkę ignorowane. W każdej linii jest wyświetlane tyle tekstu ile się zmieści. Jeżeli koniecznie chcemy zacząć coś od nowej linii, lub uzyskać odstęp między dwoma fragmentami tekstu, trzeba użyć komendy BR- •nie ma ona żadnych parametrów. Po prostu kończy linię i przechodzi do następnej.
ODNOŚNIKI
WWW nie byłoby tym czym jest bez odnośników, należy więc wiedzieć, jak umieszczać je na stronach. Służy do tego komenda A z parametrem HREF, który zawiera adres strony, do której ma być odsyłać, np.:
<A HREF=strona.htm>Tekst odnośnika</A>
Po kliknięciu napisu Tekst odnośnika zostanie załadowany dokument o nazwie strona,htm. Parametr HREF może też zawierać pełny adres strony, lub lokalizację strony względem strony bieżącej, np.:
<A HREF-ww.nic.pl/strona.htm>
<A HREF=katalog/strona.htm>
Odnośniki mogą również przenosić między różnymi miejscami na tej samej stronie. Jest to jednak bardziej skomplikowane.
OBRAZKI
Jak powszechnie wiadomo do stron WWW można wstawić obrazek za pomocą polecenia IMG. Ma ono parametr SRC zawierający nazwę lub adres i nazwę obrazka (koniecznie w formacie GIF lub JPG), który ma zostać umieszczony w stronie. Obrazki nie mogą być zbyt duże ze względu na małą szybkość modemów. Obrazki w formacie GIF mogą mieć przeźroczyste tło, można też zapisać animację, a służą do tego osobne programy takie jak Gif Construction Set (gifcon), lub Animation Shop. Oczywiście na położenie obrazków wpływa komenda DIV, a położenie tekstu względem obrazka ustawia się parametrem ALGIN. Może on mieć wartości: left, right, top, center, bottom, middle.
Może się zdarzyć, że obrazek ma inną wielkość niż potrzeba na stronie, wtedy używa się parametrów HEIGHT i WIDTH, w których podaje się żądane wymiary w pikselach lub procentach wielkości okna.
TABELE
Często używanym elementem języka HTML są tabele. Używa się ich nie tylko do tworzenia tabel jako takich, ale także do układania elementów stron. Każda tabela jest rozpoczynana poleceniem TABELE, ma on parametr BORDER określający grubość ramki tej tabeli. Jeżeli nie nadamy Parametrowi BRODER wartości, to tabela nie będzie miała ramek.
Gdy rozpoczniemy tabelę można używać poleceń TD i TR- pierwszy przechodzi do następnej komórki, a drugi do następnego wiersza komórek, np.:
<TABLE BORDER=5>
<TD>pierwsza komórka<TD>druga komórka<td>trzecia komórka
<TR><TD>A to już następny wiersz<TD>komórka po prawej jest pusta--->
</TABLE>
A tak wygląda to w praktyce:
Pierwsza komórka Druga komórka Trzecia komórka
A to już następny wiersz Komórka po prawej jest pusta --- >
Jeżeli na jakimś tle tabela jest słabo widoczna można używać parametrów BORDERCOLORLIGHT i BORDERCOLORDARK, za pomocą których można zmienić kolory ramek (jasny i ciemny).Tabele są bardzo często używane do ułożenia tekstu i obrazków na stronie. Może mieć inne tło niż pozostała część strony. Do jego ustawienia służą parametry BGCOLOR i BACKGRUND podawane w poleceniu TD ( w zależności, czy tło ma mieć jednolity kolor, czy tłem ma być obrazek). Polecenia TABELE itd. Mają również parametr WIDTH, który określa szerokość danej komórki w przypadku polecenia TD lub tabeli w przypadku polecenia TABELA. A oto przykład łączący to wszystko:
<TABELE width=60%>
<TR>
<TD WIDTH=23%BGCOLOR=RED>czerwone
<TD WIDTH=*BGCOLOR=WHITE>białe
<TD BGCOLOR=LIGHTBLUE WIDTH=23%>jasnoniebieske
<TR>
<TD WIDTH=23%>przeźroczyste
<TD WIDTH=*BGCOLOR=GREEN>zielone
<TD WIDTH=23%>przeźroczyste
<TR>
<TD WIDTH=23%BGCOLOR=PINK>różowe
<TD WIDTH=*BGCOLOR=WHITE>białe
<TD BGCOLOR=YELLOW WIDTH=23%>żółte
</TABLE>
To samo w praktyce:
Czerwone białe Jasnoniebieskie
przeźroczyste zielone przeźroczyste
różowe białe Żółte
ZNACZNIKI HTML
Znaczniki informują przeglądarkę, jak wyświetlić stronę na ekranie i
działają w podobny sposób jak atrybuty czcionek w edytorze tekstów.
Dane, które trafiły do Twojej przeglądarki, są zakodowane w specjalny sposób – są zapisane w języku HTML. Przeglądarce to nie przeszkadza – potrafi ona interpretować ten kod, więc wyświetla pobraną stronę na Twoim ekranie. Język HTML informuje przeglądarkę jak ma obsłużyć pobrane dane.
Tak więc sam widzisz, jak ważny jest język HTML. Dotrzemy teraz do jego istoty – zajmiemy się znacznikami HTML.
<B> </B> -czcionka pogrubiona (bold)
<I > </I >- czcionka pochyła (italic)- kursywa
<EM> </EM> - tekst wyróżniony ( najczęściej kursywą)
<BKINK> </BLINK>- czcionka migająca
<U> </U> - czcionka podkreślona (underline)
<TT> </TT> - czcionka o stałej szerokości znaku (fixed width=teletype)
<SRRIKE > </STRIKE > - <S> </S> - czcionka przekreślona
II- <SUP> </SUP> - indeks górny (subskrypt)
II- <SUPER> </SUPER>
<SUB> </SUB> - indeks dolny
I - <BIG> </BIG > - zwiększenie rozmiaru czcionki o 1
II - <FONT SIZE=+1> </FONT>
I - <SMALL > </SMALL> - zmniejszenie rozmiaru czcionki o 1
II - <FONT SIZE =-1> </FONT>
<STRONG > </STRONG > - czcionka mocno wyróżniona (strong)
<EM> </EM> -czcionka wyróżniona (emfaza)
<CODE > </CODE > - kod (tekst programu)
<KBD> </KBD > - czcionka wprowadzana z klawiatury
<VAR> </VAR > - zmienna -słowo kluczowe języka (variable)
<BODY> </BODY> - definiowanie głównej części opisu HTML
<HEAD> </HEAD> - definiowanie nagłówka HTML
<TITLE> - definiowanie tytułu strony HTML
- centrowanie tekstu
Parę znaczników (lub znacznik pojedynczy, jeśli nie ma on znacznika zamykającego) nazywa się także elementem. Element pozbawiony znacznika zamykającego nazywa się pustym. Aby lepiej zrozumieć funkcjonowanie języka HTML, spróbujmy potraktować znaczniki HTML jako przymiotniki. Kolor obiektu, na przykład piłki, można opisać korzystając z takich przymiotników jak niebieska, czerwona czy żółta. Relację względem innego obiektu można z kolei wyrazić za pomocą słów takich jak: z lewej, z prawej, w centrum. Podobnie HTML pomaga opisać wygląd i ulokowanie tekstu, obrazów i innych obiektów na Twojej stronie WWW.
HTML pozwala:
Publikować dokumenty zawierające nagłówki, tekst, tabele, listy, zdjęcia, formularze, itp.
Pobierać za pośrednictwem „połączeń hipertekstowych” informacje z Internetu (mówiąc w skrócie polega to na klikaniu „połączeń”, co uaktywnia pobieranie danych).
Projektować formularze pozwalające na korzystanie ze zdalnych usług, takich jak na przykład wyszukiwanie informacji, dokonywanie rezerwacji oraz zamawianie produktów.
Umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne aplikacje.
Przeglądając niektóre strony WWW wydaje się, że trzeba nie byle jakich umiejętności, aby napisać taką stronę. Napisanie prostej strony nie jest trudne, wymaga tylko trochę czasu, cierpliwości i minimum elastycznego umysłu.
Trzeba jednak pamiętać, że po umieszczeniu strony na serwerze będzie ją mógł zobaczyć każdy użytkownik internetu i to z dowolnego miejsca na ziemi. Może on używać dowolnego systemu operacyjnego i dowolnej przeglądarki, sposób formatowania takiego dokumentu musi być więc standardowy i jasno zdefiniowany. Taki jest właśnie język HTML
|
| Komentarz/uwagi/znalezione błędy: |
|
MegaStats |
|
Odsłony: | | 563913 razy |
Ocena: | 4.12/10 |
Głosy: | 27 |
Oceń: |
|
|
|
|
