1 Język HTML podstawy programowania
2 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).
3 2. Zaczynamy … Osnowa dokumentuPolecenie (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 treść tytułu
. 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 . Między nimi powinna zaś się znaleźć para znaczników , która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami .
4 Przykład:
informacje nagłówkowe jak np. autor, nazwa itp. właściwa treść (ciało) dokumentu 5 Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacjiMiędzy znacznikami i powinno się znaleźć polecenie
6 Zawarta między znacznikami TITLE treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie.Na przykład:
7 Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentuZaleca się stosowanie strony kodowej ISO (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:
8 Tworzymy pierwszą stronę 3W w języku HTMLPierwszą czynnością, którą należy wykonać jest uruchomienie programu notatnik
9 Gdy już mamy uruchomiony notatnik umieszczamy w nim metodą „kopiuj – wklej” poniższy tekst (lub przepisujemy):
10
11 Tak przygotowaną stronę należy zapisać:
12 Proponowanym katalogiem na strony jest katalog C:\WWWProponowanym katalogiem na strony jest katalog C:\WWW. (jeśli katalog ten nie istnieje należy go wcześniej utworzyć)
13 Jeśli wszystko przebiegło prawidłowo oglądamy naszą stronę klikając na niej dwukrotnie lewym przyciskiem myszy. Powinniśmy ujrzeć:
14 Rozbudowujemy naszą stronę 3WKOLOR TŁA Gdy w dokumencie znajduje się para znaczników i , 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:
15 „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ć
16 Tytuły W dokumentach często wprowadzamy tytuły. Służy do tego polecenie i zamykającego
. 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).
17 Przykłady użycia polecenia To jest tytuł
To jest tytuł
To jest tytuł
To jest tytuł
18 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 = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego
19 Przykład
To jest pierwszy akapit
To jest drugi akapit
20 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
, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. To jest pierwszy wiersz
To jest drugi wiersz
To jest trzeci wiersz
To jest czwarty wiersz
Ponadto polecenie
ma jeszcze jedną zaletę. Napisanie kilku kolejnych
pozwala poszerzyć pionowy odstęp między elementami.
21 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 To jest tekst pogrubiony (bold) To jest tekst pochylony (italic, kursywa) To jest tekst podkreślony (underlined)
22 Superskrypt (indeks górny) Składnia: Przykład To jest trzy do potegi drugiej: 32 Subskrypt (indeks dolny) Składnia: To jest trzy element „a” o numerze 11: a11
23 Duża czcionka (+1 punkt) Składnia: Przykład: To jest czcionka.To jest czcionka o jeden znak większa Mała czcionka (-1 punkt) Składnia: To jest czcionka.To jest czcionka o jeden znak mniejsza
24 Kolor czcionki Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Składnia: Niektóre z dostępnych kolorów: Black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white Przykład: To jest czcionka czerwona
25 Wielkość czcionki Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników . Na przykład: TO JEST TEKST Czcionka normalna ma przypisaną wartość 3 (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.
26 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ść. Na przykład: To jest standardowa wielkość.A to o jeden większa
27 Zmiana kroju czcionki Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie . Pozwala ono zmienić krój czcionki dla danego dokumentu Przykład: To jest czcionka Arial a to courier
28 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.
29 Odsyłacz do innej strony jest tworzony za pomocą polecenia:Jakaś nazwa tej strony
30 Przykład Odsyłacz do strony Wirtualnej Polski Odsyłacz do strony index.html w katalogu WWW na dysku C: 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: Odsyłacz do strony index.html w katalogu umieszczonej w bieżącym katalogu 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.
31 Istotną kwestią jest też wielkość znakówIstotną 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: Przykład:
32 Wstawianie grafiki do dokumentuPodstawowa konstrukcja ma następującą postać: Przykład:
Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład: ![](„ala.jpg")
33 Konstrukcja ma postać:Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka: Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu. Konstrukcja ma postać: . 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.:
34
To jest wyśrodkowany tekst
To jest tekst wyrównany od lewej
To jest tekst wyrównany od prawej
Należy dodać iż znacznik ALIGN nie występuje osobno ale z innymi (najczęsciej z).
35 Tabele Składnia:
36 Wiersz tabeli Składnia: Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach
można umieścić wiele kolejnych definicji wierszy Przykład:
37 Komórka w wierszu Składnia:
38 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:
Należy zwrócić uwagę iż BORDER nie występuje osobno ale wraz ze znacznikiem TABLE
39 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.:
40 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:
41 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:
42 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: 43 Natomiast: 44 Łączenie komórek Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji parametru 45 Ramki Gdybyśmy chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję: Należy zwrócić uwagę na parametr FRAMEBORDER. Jeśli podamy w definicji parametr SCROLLING=NO, ramka zostanie pozbawiona suwaka 46 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. 47 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 mogą być umieszczane jedynie w obrębie NOFRAMES 48 Przykład: 49 Kluczowe znaczenie ma para znaczników . 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). 50 Sam podział na ramki to nie wszystkoSam 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: 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ć: 51 Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru 52 Przykład: Strona podstawowa (dowolna nazwa): 53 Strona1.html: 54 Strona2.html:
gdzie x oznacza ilość wierszy przez które ma się rozciągać tabela.
To jest strona 1
To jest strona 2