Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Język HTML podstawy programowania. Wstęp Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Dokument HTML jest zwykłym.

Podobne prezentacje


Prezentacja na temat: "Język HTML podstawy programowania. Wstęp Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Dokument HTML jest zwykłym."— Zapis prezentacji:

1 Język HTML podstawy programowania

2 Wstęp Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. 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). 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 dokumentu 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 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. 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 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. 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. 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. informacje nagłówkowe jak np. autor, nazwa itp. właściwa treść (ciało) dokumentu właściwa treść (ciało) dokumentu

5 Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji Między znacznikami i powinno się znaleźć polecenie. Między znacznikami i powinno się znaleźć polecenie. Przykład: Przykład: Tytuł strony Tytuł strony

6 Zawarta między znacznikami TITLE treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Zawarta między znacznikami TITLE treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład: Na przykład: Kurs języka HTML Kurs języka HTML

7 Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu Zaleca 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: Zaleca 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 HTML Pierwszą czynnością, którą należy wykonać jest uruchomienie programu notatnik Pierwszą 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): Tytuł strony To jest moja pierwsza strona internetowa Gdy już mamy uruchomiony notatnik umieszczamy w nim metodą kopiuj – wklej poniższy tekst (lub przepisujemy): Tytuł strony To jest moja pierwsza strona internetowa

10

11 Tak przygotowaną stronę należy zapisać: Tak przygotowaną stronę należy zapisać:

12 Proponowanym 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ę 3W KOLOR TŁA KOLOR 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: 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. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. 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ć BGCOLOR=green"> Tytuł strony To jest moja pierwsza strona internetowa

16 Tytuły W dokumentach często wprowadzamy tytuły. Służy do tego polecenie. 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 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). W dokumentach często wprowadzamy tytuły. Służy do tego polecenie. 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 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 Przykłady użycia polecenia 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. 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 pierwszy akapit To jest drugi 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. 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 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. 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: 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 normalny To jest tekst pogrubiony (bold) To jest tekst pogrubiony (bold) To jest tekst pochylony (italic, kursywa) To jest tekst pochylony (italic, kursywa) To jest tekst podkreślony (underlined) To jest tekst podkreślony (underlined)

22 Superskrypt (indeks górny) Superskrypt (indeks górny) Składnia: Składnia: Przykład Przykład To jest trzy do potegi drugiej: 3 2 To jest trzy do potegi drugiej: 3 2 Subskrypt (indeks dolny) Subskrypt (indeks dolny) Składnia: Składnia: Przykład Przykład To jest trzy element a o numerze 11: a 11 To jest trzy element a o numerze 11: a 11

23 Duża czcionka (+1 punkt) Duża czcionka (+1 punkt) Składnia: Składnia: Przykład: Przykład: To jest czcionka. To jest czcionka o jeden znak większa To jest czcionka. To jest czcionka o jeden znak większa Mała czcionka (-1 punkt) Mała czcionka (-1 punkt) Składnia: Składnia: Przykład: Przykład: To jest czcionka. To jest czcionka o jeden znak mniejsza 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. Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Składnia: Składnia: Niektóre z dostępnych kolorów: Niektóre z dostępnych kolorów: Black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white Black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white Przykład: Przykład: To jest czcionka czerwona To jest czcionka czerwona

25 Wielkość czcionki Wielkość czcionki Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników.. Na przykład: Na przykład: TO JEST TEKST 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. 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ść. 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: Na przykład: To jest standardowa wielkość. A to o jeden większa To jest standardowa wielkość. A to o jeden większa

27 Zmiana kroju czcionki Zmiana kroju czcionki Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie.. Pozwala ono zmienić krój czcionki dla danego dokumentu Pozwala ono zmienić krój czcionki dla danego dokumentu Przykład: Przykład: To jest czcionka Arial a to courier 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. 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: Odsyłacz do innej strony jest tworzony za pomocą polecenia: Jakaś nazwa tej strony Jakaś nazwa tej strony

30 Przykład Odsyłacz do strony Wirtualnej Polski Odsyłacz do strony Wirtualnej Polski Odsyłacz do strony index.html w katalogu WWW na dysku C: 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. 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: 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 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: 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../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../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ó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. 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. 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: Stosujemy tutaj na przykład następujące polecenie: Imię i nazwisko Imię i nazwisko Przykład: Przykład: Redaktor strony Redaktor strony

32 Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: Podstawowa konstrukcja ma następującą postać: Przykład: Przykład: Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład: Na przykład:

33 Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka: 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. Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu. Konstrukcja ma postać: 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.:. 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 wyśrodkowany tekst To jest tekst wyrównany od lewej To jest tekst wyrównany od lewej To jest tekst wyrównany od prawej 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: Składnia: 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. 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.

36 Wiersz tabeli Składnia: 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 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: Przykład:

37 Komórka w wierszu Składnia: Składnia: 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: 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:

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ść. 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: Składnia: Należy zwrócić uwagę iż BORDER nie występuje osobno ale wraz ze znacznikiem TABLE 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.: 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). 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: 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. 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: 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: 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: Tytuł tabeli umieszczony u góry Tytuł tabeli umieszczony u góry Spowoduje umieszczenie tytułu tabeli Spowoduje umieszczenie tytułu tabeli

43 Natomiast: Podpis tabeli umieszczony u dołu Podpis tabeli umieszczony u dołu Spowoduje umieszczenie podpisu tabeli

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 Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji parametru gdzie x oznacza ilość wierszy przez które ma się rozciągać tabela.

45 Ramki Twoja przeglądarka nie akceptuje pływających ramek! Twoja przeglądarka nie akceptuje pływających ramek! Gdybyśmy chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję: Gdybyśmy chcieli się pozbyć obramowania ramki, moglibyśmy podać definicję: Twoja przeglądarka nie akceptuje pływających ramek Twoja przeglądarka nie akceptuje pływających ramek Należy zwrócić uwagę na parametr FRAMEBORDER. Należy zwrócić uwagę na parametr FRAMEBORDER. Jeśli podamy w definicji parametr SCROLLING=NO, ramka zostanie pozbawiona suwaka 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. 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 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. 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). 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 wszystko. Należy im jeszcze przypisać jakieś dokumenty 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: 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ć: 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 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): Strona podstawowa (dowolna nazwa): Przykładowa strona Przykładowa strona

53 Strona1.html: Strona1.html: Strona 1 Strona 1 To jest strona 1 To jest strona 1

54 Strona2.html: Strona2.html: Mailer Mailer To jest strona 2 To jest strona 2


Pobierz ppt "Język HTML podstawy programowania. Wstęp Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Dokument HTML jest zwykłym."

Podobne prezentacje


Reklamy Google