Język HTML podstawy programowania
Wstęp Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie bezpłatnych (freeware).
2. Zaczynamy … Osnowa dokumentu Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</H1>. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami. Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które szkieletu nie zawierają (czasem tylko jego część), ale nie należy stosować tej metody, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami. Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>.
Przykład: <HTML> <HEAD> informacje nagłówkowe jak np. autor, nazwa itp. </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML>
Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE>. Przykład: <HEAD> <TITLE>Tytuł strony</TITLE> </HEAD>
Zawarta między znacznikami TITLE treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład: <HEAD> <TITLE>Kurs języka HTML</TITLE> </HEAD>
Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu Zaleca się stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to międzynarodowy standard, a także Polska Norma. Należy sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach znaczników HEAD i wygląda następująco: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
Tworzymy pierwszą stronę 3W w języku HTML Pierwszą czynnością, którą należy wykonać jest uruchomienie programu notatnik
Gdy już mamy uruchomiony notatnik umieszczamy w nim metodą „kopiuj – wklej” poniższy tekst (lub przepisujemy): <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <TITLE>Tytuł strony</TITLE> </HEAD> <BODY> To jest moja pierwsza strona internetowa </BODY> </HTML>
Tak przygotowaną stronę należy zapisać:
Proponowanym katalogiem na strony jest katalog C:\WWW Proponowanym katalogiem na strony jest katalog C:\WWW. (jeśli katalog ten nie istnieje należy go wcześniej utworzyć)
Jeśli wszystko przebiegło prawidłowo oglądamy naszą stronę klikając na niej dwukrotnie lewym przyciskiem myszy. Powinniśmy ujrzeć:
Rozbudowujemy naszą stronę 3W KOLOR TŁA Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>, możemy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary). Możemy wstawić polecenie: <BODY BGCOLOR="kolor">
„Kolor" może być podany imiennie (np „Kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Poniższy przykład należy przekopiować metodą jak wyżej i przetestować <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <TITLE>Tytuł strony</TITLE> </HEAD> <BODY BGCOLOR=„green"> To jest moja pierwsza strona internetowa </BODY> </HTML>
Tytuły W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <H1> i zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające jedynie znacznik otwierający. Niektóre polecenia można używać w obu postaciach, choć coraz powszechniejsze używanie stylów wymusza ostatnio bardziej rygorystyczne stosowanie znaczników zamykających (np. akapit).
Przykłady użycia polecenia <Hn> <H1>To jest tytuł </H1> <H2>To jest tytuł </H2> <H3>To jest tytuł </H3> <H4>To jest tytuł </H4>
Akapit i wiersz Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <P> (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego </P>.
Przykład <P>To jest pierwszy akapit</P> <P>To jest drugi akapit</P>
Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyńcze polecenie <BR>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. To jest pierwszy wiersz<BR> To jest drugi wiersz<BR> To jest trzeci wiersz<BR> To jest czwarty wiersz<BR> Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami.
Atrybuty czcionki Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - pogrubienie (bold), pochylenie (italic) i podkreślenie (underlined). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia: To jest tekst normalny <B>To jest tekst pogrubiony (bold)</B> <I>To jest tekst pochylony (italic, kursywa)</I> <U>To jest tekst podkreślony (underlined)</U>
Superskrypt (indeks górny) Składnia: <SUP></SUP> Przykład To jest trzy do potegi drugiej: 3<SUP>2</SUP> Subskrypt (indeks dolny) Składnia: <SUB> </SUB> To jest trzy element „a” o numerze 11: a<SUB>11</SUB>
Duża czcionka (+1 punkt) Składnia: <BIG></BIG> Przykład: To jest czcionka.<BIG>To jest czcionka o jeden znak większa</BIG> Mała czcionka (-1 punkt) Składnia: <SMALL> </SMALL> To jest czcionka.<SMALL>To jest czcionka o jeden znak mniejsza</SMALL>
Kolor czcionki Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Składnia: <FONT COLOR="nazwa_koloru"></FONT> Niektóre z dostępnych kolorów: Black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white Przykład: <FONT COLOR=„red">To jest czcionka czerwona</FONT>
Wielkość czcionki Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników <FONT SIZE="xx"> </FONT>. Na przykład: <FONT SIZE=„2”>TO JEST TEKST</FONT> Czcionka normalna ma przypisaną wartość 3 (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.
<FONT SIZE="+x"> </FONT> Gdy redagujemy tekst, możemy w dowolnej chwili zmienić wielkość czcionki, przypisując jej wartość bezwzględną z przedziału 1-7, posługując się podanym wyżej parametrem. Możemy jednak także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość. <FONT SIZE="+x"> </FONT> Na przykład: To jest standardowa wielkość.<FONT SIZE=„+1”>A to o jeden większa</FONT>
Zmiana kroju czcionki Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie <FONT FACE="nazwa_kroju"> </FONT>. Pozwala ono zmienić krój czcionki dla danego dokumentu Przykład: <FONT FACE=„Arial”>To jest czcionka Arial</FONT><FONT FACE=„courier”> a to courier</FONT>
Odsyłacze Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp.
Odsyłacz do innej strony jest tworzony za pomocą polecenia: <A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>
Przykład <A HREF=„http://www.wp.pl”>Odsyłacz do strony Wirtualnej Polski</A> <A HREF=„C:\WWW\index.html”>Odsyłacz do strony index.html w katalogu WWW na dysku C:</A> W powyższym przykładzie użyto tzw. „ścieżki bezwzględnej” o czym mówi zapis C:\WWW\index.html. Należy unikać tego typu zapisu jeśli planujemy umieścić naszą stronę w sieci Internet. Zaleca się stosować tzw. „ścieżki względne” jak w poniższym przykładzie: <A HREF=„./index.html”>Odsyłacz do strony index.html w katalogu umieszczonej w bieżącym katalogu</A> Zapis „ ./ „ oznacza tyle iż strona o nazwie index.html znajduje się w tym samym katalogu co strona na której umieściliśmy do niej odsyłacz. Inne przykłady: ../index.html – strona o nazwie index.html znajduje się o jeden katalog wyżej niż strona w której umieściliśmy do niej odsyłacz ./Katalog/index.html - strona o nazwie index.html znajduje się w katalogu „Katalog” znajdującym się w katalogu w którym umieszczona jest strona zawierająca odsyłacz.
Istotną kwestią jest też wielkość znaków Istotną kwestią jest też wielkość znaków. System Windows nie rozróżnia wielkich i małych znaków. Często zdarza się jednak iż wysyłając stronę do sieci Internet korzystamy konta na serwerze opartym na systemie UNIX, gdzie wielkość znaków jest bardzo istotna. Należy zatem w miarę możliwości stosować wyłącznie małe znaki a zamiast spacji znak podkreślenia. Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron, którzy dysponują zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika. Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z autorem. Stosujemy tutaj na przykład następujące polecenie: <A HREF="mailto:autor@jego.adres">Imię i nazwisko</A> Przykład: <A HREF="mailto:ala@poczta.wp.pl.">Redaktor strony</A>
Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny"> Przykład: <img src="ala.jpg"> Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład: <IMG SRC=„ala.jpg" HEIGHT=150>
Konstrukcja ma postać: Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka: <IMG SRC= "ala.jpg" WIDTH=200 HEIGHT=50> Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu. Konstrukcja ma postać: <IMG SRC="obrazek" ALIGN=abc>. Parametr abc może przyjmować wartości: left, right, top, bootom, middle. Znacznik ALIGN może być powszechnie stosowany także w stosunku do pozycjonowaniu tekstu np.:
<P ALIGN=„CENTER”>To jest wyśrodkowany tekst</P> <P ALIGN=„LEFT”>To jest tekst wyrównany od lewej</P> <P ALIGN=„RIGHT”>To jest tekst wyrównany od prawej</P> Należy dodać iż znacznik ALIGN nie występuje osobno ale z innymi (najczęsciej z <P>).
Tabele Składnia: <TABLE> </TABLE> Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.
Wiersz tabeli Składnia: <TR> </TR> Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR> Przykład: <TABLE> <TR></TR> </TABLE>
Komórka w wierszu Składnia: <TD> </TD> Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład: <TABLE> <TR> <TD> </TD><TD> </TD><TD> </TD></TR> </TABLE>
Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. Składnia: <TABLE BORDER=„xx”> </TABLE> Należy zwrócić uwagę iż BORDER nie występuje osobno ale wraz ze znacznikiem TABLE
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ć parametru CELLPADDING (domyślnie wynosi on 1). Np.: <TABLE BORDER CELLPADDING=2></TABLE>
Obramowanie komórek Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami). Np: <TABLE BORDER CELLSPACING=8></TABLE>
Szerokość tabeli Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki. Parametr WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany parametr jest "silniejszy" od innych parametrów, które wpływają na szerokość tabeli na ekranie. Przykład: <TABLE BORDER WIDTH=600></TABLE>
Podpis/tytuł tabeli Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólną definicją tabeli. Na przykład: <TABLE BORDER WIDTH=300> <CAPTION ALIGN=top> Tytuł tabeli umieszczony u góry</CAPTION> Spowoduje umieszczenie tytułu tabeli
Natomiast: <TABLE BORDER WIDTH=300> <CAPTION ALIGN=bootom> Podpis tabeli umieszczony u dołu</CAPTION> Spowoduje umieszczenie podpisu tabeli
Łączenie komórek Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji parametru <TD ROWSPAN=x> gdzie x oznacza ilość wierszy przez które ma się rozciągać tabela.
Ramki <IFRAME WIDTH=liczba punktów HEIGHT=szerokość SRC="dokument">Twoja przeglądarka nie akceptuje pływających ramek!</IFRAME> Gdybyśmy chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję: <IFRAME WIDTH=300 HEIGHT=200 FRAMEBORDER=0 SRC=„strona.html">Twoja przeglądarka nie akceptuje pływających ramek</IFRAME> Należy zwrócić uwagę na parametr FRAMEBORDER. Jeśli podamy w definicji parametr SCROLLING=NO, ramka zostanie pozbawiona suwaka
Ramki c.d. Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi.
Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie NOFRAMES
Przykład: <FRAMESET COLS="25%,*%"> <FRAME SCROLLING="auto" NAME="lista edytorów" SRC="edyt.htm"> <FRAME SCROLLING="yes" NAME="edytory" SRC="edyt.htm"> </FRAMESET> <NOFRAMES> <BODY> </BODY> </NOFRAMES>
Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy).
Sam podział na ramki to nie wszystko Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć konstrukcji: <FRAME SRC="nazwa_pliku.htm"> Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć parametru, który wyświetli ramkę razem z suwakami. Stosowny parametr ma postać: <FRAME SCROLLING=yes>
Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru <FRAME NORESIZE>
Przykład: Strona podstawowa (dowolna nazwa): <html> <head> <title>Przykładowa strona</title> </head> <frameset cols="18%,82%"> <FRAME SRC="strona1.html"> <FRAME SRC="strona2.html"> </FRAMESET> </html>
Strona1.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HEAD> <title>Strona 1</title> <meta name="description" content="Strona 1"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body bgcolor="green"> <HR> <H1>To jest strona 1</H1> </body> </html>
Strona2.html: <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <title>Mailer</title> <meta name="description„ content="Formularze"> </HEAD> <body bgcolor="silver"> <HR> <H1>To jest strona 2</H1> <HR></body></html>