1 / 54

Język HTML podstawy programowania

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

vanna
Download Presentation

Język HTML podstawy programowania

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 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>.

  4. Przykład: • <HTML> • <HEAD> • informacje nagłówkowe jak np. autor, nazwa itp. • </HEAD> • <BODY> • właściwa treść (ciało) dokumentu • </BODY> • </HTML>

  5. 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>

  6. 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>

  7. 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">

  8. Tworzymy pierwszą stronę 3W w języku HTML • 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):<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>

  10. Tak przygotowaną stronę należy zapisać:

  11. Proponowanym katalogiem na strony jest katalog C:\WWW.(jeśli katalog ten nie istnieje należy go wcześniej utworzyć)

  12. Jeśli wszystko przebiegło prawidłowo oglądamy naszą stronę klikając na niej dwukrotnie lewym przyciskiem myszy. Powinniśmy ujrzeć:

  13. 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">

  14. „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><BODYBGCOLOR=„green">To jest moja pierwsza strona internetowa</BODY></HTML>

  15. 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).

  16. 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>

  17. 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>.

  18. Przykład • <P>To jest pierwszy akapit</P> • <P>To jest drugi akapit</P>

  19. 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.

  20. 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>

  21. 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> • Przykład • To jest trzy element „a” o numerze 11: a<SUB>11</SUB>

  22. 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> • Przykład: • To jest czcionka.<SMALL>To jest czcionka o jeden znak mniejsza</SMALL>

  23. 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>

  24. 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.

  25. 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>

  26. 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>

  27. 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.

  28. Odsyłacz do innej strony jest tworzony za pomocą polecenia: • <A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>

  29. 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.

  30. 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>

  31. 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>

  32. 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.:

  33. <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>).

  34. 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.

  35. 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> • <TR></TR> • <TR></TR> • </TABLE>

  36. 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> • <TR> <TD> </TD><TD> </TD><TD> </TD></TR> • <TR> <TD> </TD><TD> </TD><TD> </TD></TR> • </TABLE>

  37. 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

  38. 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>

  39. 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>

  40. 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>

  41. 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

  42. Natomiast: • <TABLE BORDER WIDTH=300><CAPTION ALIGN=bootom> • Podpis tabeli umieszczony u dołu</CAPTION> Spowoduje umieszczenie podpisu tabeli

  43. Łą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.

  44. Ramki • <IFRAME WIDTH=liczba punktów HEIGHT=szerokość SRC="dokument">Twoja przeglądarka nie akceptuje pływającychramek!</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

  45. 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.

  46. 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

  47. 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>

  48. 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).

  49. 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>

More Related