docHTML (ang. Hyper Text Markup Language, pl. hipertekstowy język
download 
Reklamacja Transkrypt
HTML (ang. Hyper Text Markup Language, pl. hipertekstowy język
HTML HTML (ang. Hyper Text Markup Language, pl. hipertekstowy język znaczników), to język składający się ze znaczników (ang. tags) oraz reguł ich poprawnego stosowania (gramatyki, syntaktyki), stosowany do pisania stron WWW. EDYTOR Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że 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). Struktura dokumentu Dokument HTML jest zwykłym dokumentem tekstowym o ustalonym kodowaniu znaków składającym się z elementów /tagów/ znaczników. Element zwykle składa się z trzech części: a) znacznika początkowego (w formie <znacznik>) , b) zawartości elementu (tekst lub inne elementy) , c) znacznika końcowego (w formie </znacznik>) , przy czym niektóre elementy nie wymagają znaczników końcowych (np. <p> odpowiadający za nowy akapit) lub ich nie mają (<img> wstawiający obrazek lub <br> łamiący linię). Elementy mogą też mieć przypisane atrybuty precyzujące znaczenie danego elementu. Atrybuty wraz z ich wartościami wpisuje się wewnątrz znacznika początkowego : <znacznik atrybut="wartość" atrybut2="wartość2" ... atrybutN="wartośćN"> OSNOWA DOKUMENTU 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 odradzamy taką praktykę, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami. OSNOWA DOKUMENTU 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>. OSNOWA DOKUMENTU Wygląda to następująco: <HTML> <HEAD>informacje nagłówkowe</HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> POLECENIE <TITLE> Tak spreparowany szkielet jest już "bezpieczny" i nie niesie ze sobą ryzyka jakichś niespodzianek. 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>. POLECENIE <TITLE> <HEAD> <TITLE>Tytuł strony</TITLE> </HEAD> TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład: <HEAD> <TITLE>Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</TITLE> </HEAD> ZADANIE 1 Skopiuj poniższy tekst do notatnika i zapisz go pod nazwą zadanie1.html w folderze kurs HTML (folder utwórz na swoim dysku i zapisuj w nim wszystkie zadania, które będziesz wykonywał w czasie fakultetu) Otwórz plik przy pomocy Internet Explorer lub FireFox i zaobserwuj gdzie pojawił się tekst „Podstawy języka HTML - poradnik webmastera: HTML dla bardzo początkujących". <HEAD> <TITLE>Podstawy języka HTML - poradnik webmastera: HTML dla bardzo początkujących</TITLE> </HEAD> ZADANIE 1 Edytuj przy pomocy notatnika plik zadanie1.html i usuń polecenie <TITLE>Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</TITLE>. Zmodyfikowany plik zapisz zadanie1a.html. Zaobserwuj co pojawiło się na pasku tytułowym przeglądarki. pod nazwą INFORMACJA META 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 "przy okazji" także Polska Norma. Zapis informacji wygląda następująco: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Można też stosować zapis: <meta http-equiv="Content-Language" content="pl" /> INFORMACJA META Ostatecznie więc, stosuj na początku standardową osnowę: <HTML> <HEAD> <meta http-equiv="Content-Language" content="pl" /> <TITLE>Tytuł strony</TITLE> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> ZADANIE 2 Skopiuj osnowę z poprzedniego slajdu do notatnika i zapisz pod nazwą zadanie2.html. W treści strony wprowadź polskie znaki diakrytyczne i sprawdź jak są wyświetlane w przeglądarce. Następnie zmodyfikuj polecenie <META> o zapis: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Sprawdź czy tekst jest wyświetlany prawidłowo. Usuń całkowicie polecenie <META> i zobacz efekt. KOLOR TŁA DOKUMENTU 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"> przy czym "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. Sugerujemy używanie wartości heksadecymalnych, jako bardziej uniwersalnych – (tabela kolorów) ZADANIE 3 Otwórz plik zadanie2.html i zapisz go pod nazwą zadanie3.html. Pomiędzy znacznikami <BODY> </BODY> zdefiniuj kolor żółty tła strony i obejrzyj efekt w przeglądarce. Następnie zdefiniuj dowolne dwa inne kolory – najpierw za pomocą nazwy barwy, a następnie za pomocą kodu RGB. Skorzystaj z tabeli kolorów.
