Znaczniki HTML. Struktura dokumentu. Nagłówek strony

Wielkość: px
Rozpocząć pokaz od strony:

Download "Znaczniki HTML. Struktura dokumentu. Nagłówek strony"

Transkrypt

1 Znaczniki HTML HTML (HyperText Markup Language), po polsku język hipertekstowy. Podstawą budowy każdej strony internetowej jest język znaczników HTML. Składa się on z kilkudziesięciu komend, tzw. tagów. Poniżej znajdują się przykłady tagów. <b>tekst pogrubiony</b> tekst pogrubiony <hr> Polecenia te to właśnie tagi. Dzielimy je na dwa rodzaje: podwójne (pierwszy przykład) - polecenie odnosi się do informacji zawartych pomiędzy tagiem otwierającym (<b>) i zamykającym (</b>); otwarte, pojedyncze (drugi przykład) - polecenie nie potrzebuje zamknięcia, ponieważ wstawia jakiś element; Zasadą jest, że poszczególne tagi nawzajem się oblewają, np.: <b><i>jakiś tekst <u>teraz podkreślony</u></i></b> Pierwsze dwa wyrazy zostaną napisane pogrubioną kursywą, a ostatnie dwa dodatkowo zostaną podkreślone. jakiś tekst teraz podkreślony Większość tagów zawiera również dodatkowe parametry, np.: <img src="jakisplik.jpg"> Tag ten wstawia grafikę, parametr src="jakisplik.jpg" określa źródło pliku (w tym przypadku jakisplik.jpg). Dokument HTML ma następującą strukturę: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>... </head> <body>... </body> </html> Struktura dokumentu Dzięki tagom <html> </html> dokument zostanie zdefiniowany jako plik HTML, a więc przeznaczony do publikacji w Internecie. Pomiędzy <head> </head> są ustalone właściwości strony. To, co widzimy w oknie przeglądarki, zawarte jest pomiędzy <body> </body>. Pierwszy znacznik <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, informuje przeglądarkę o typie dokumentu - zgodnym ze specyfikacją HTML 4.0. Wielu webmasterów o nim zapomina, jest on jednak czasami bardzo ważny. W nagłówku strony definiujemy jej właściwości. Oto one: tytuł strony: <title>jakiś tytuł</title> tytuł strony pojawi się na samej górze okna przeglądarki: Nagłówek strony Strona 1

2 standart kodowania: <meta http-equiv="content-type" content="text/html; charset=iso "> dzięki niemu przeglądarka nie będzie miała problemu np. z polskimi literami; jednak jeśli tworzysz stronę pod notatnikiem musisz użyć innego standardu: <meta http-equiv="content-type" content="text/html; charset=windows-1250"> przy wysyłaniu strony na serwer powinna mieć ona ustalony pierwszy standard (ISO ); do zamiany strony kodowania służy konwerter, np.: Ogonki; data utworzenia dokumentu (opcjonalnie): <meta http-equiv="creation-date" content="tue, 24 Dec :29:02 GMT"> adres autora strony: <meta http-equiv="reply-to" słowa kluczowe: <meta name="keywords" content="słowo1, słowo2, słowo3"> dzięki nim wyszukiwarka internetowa znajdzie naszą stronę; opis strony: <meta name="description" content="moja pierwsza, wspaniała strona!"> opis strony, który również pokaże się w oknie wyszukiwarki; informacja o autorze: <meta name="author" content="adam Słodowy"> w tym miejscu zaleca się, aby wpisywać prawdziwe imię i nazwisko, a nie pseudonimy; język: <meta name="language" content="pl"> tylko niektóre przeglądarki używają tego polecenia; inne skróty: język angielski: en, amerykańsko angielsko: en-us, niemiecki: de, francuski: fr; edytor HTML-a (opcjonalnie): <meta name="generator" content="notepad"> jeśli robisz stronę w edytorze HTML, niemalże zawsze jest to opcja automatyczna. odświeżanie strony (opcjonalnie): <meta name="refresh" content="5"> strona po (przykładowo) 5 sekundach sama się odświeży; używanie tej opcji jest zalecane tylko w skrajnych przypadkach; znacznie bardziej przydatna bywa to polecenie: <meta name="refresh" content="5; url=http://www.adres.pl/strona.html"> po (przykładowo) 5 sekundach strona zmieni adres na Strona 2

3 Ciało dokumentu Pomiędzy znacznikami <body> </body> zawarte jest to, co nam się pokaże w oknie przeglądarki. Część opcji możemu ustalić bezpośrednio pod tym tagiem: kolor tła strony: <body bgcolor="white"></body> obraz tła strony: <body background="plik.jpg"></body> kolor linków: <body color="blue"></body> kolor odwiedzonych linków: <body color="purpure"></body> kolor aktywnych linków: <body color="yellow"></body> górny margines (w pikselach): <body topmargin="5"></body> lewy margines (w pikselach): <body leftmargin="5"></body> Wszystkie podane wartości (oprócz drugiej) są domyślnie ustawione w przeglądarce. Należy pamiętać, że umieszczmy je w jednym znaczniku, np.: <body bgcolor="white" text="black" link="blue" alink="red" vlink="purpure"> Kolory możemy podawać na trzy sposoby: słownie - używamy angielskich nazw kolorów, np.: black, red, green; za pomocą trypletu szesnastkowego, np. #000000, #FF0000, #008000; systemem Red-Green-Blue, np. rgb(0,0,0), rgb(255,0,0), rgb(0,128,0); Kilka istotnych uwag Podczas pracy z edytorem tekstowym po kliknięciu klawisza ENTER rozpoczynamy nowy wiersz w dokumencie. W HTML sprawa ma się trochę inaczej. Wszelkie wielokrotne spacje i entery przeglądarka potraktuje jako jedną spację i zawinie w miejscu, które uzna za odpowiednie. Dlatego w takich sytuacjach stosujemy znaczniki akapitów: <p> </p>. Możemy je wyrównywać za pomocą parametru align="wyrównanie": <p align="left">po lewej</p> po lewej <p align="center">na środku</p> na środku <p align="right">po prawej</p> po prawej Poszczególne akapity zostaną oddzielone tzw. interlinią: pierwsza linijka druga linijka Strona 3

4 trzecia linijka Pamiętaj o strukturze znaczników. Są one ułożone wg zasady: Dobrze <b> <i> <u> </u> </i> </b> Źle <b> <i> <u> </b> </i> </u> Następna uwaga dotyczy wywoływania plików. Jeżeli znajduje się w tym samy katalogu, w parametrze wywołującym plik wpisujemy po prostu nazwę pliku, np.: src="plik.html". Jeśli jest on w katalogu podrzędnym, piszemy pełną ścieżkę dostępu: src="katalog/plik.html". Jeśli jednak plik znajduje się w katalogu nadrzędnym, stosujemy../. Pliki zapisuj z nazwą *.html. Dopuszczalne jest również rozszerzenie *.htm. Część formatowania uzyskujemy poprzez uzupełnienie znacznika <font> parametrami: wielkośc czcionki (od 1 do 7); size="3" krój czcionki; face="times New Roman" Formatowanie tekstu </font> trzema kolor czcionki (można pominąć, jeśli parametr ten jest zdefiniowany w tagu <body></body>); color="black" Oto przykład: <font face="times New Roman" size="4" color="green">być albo nie być...</font><br> <font face="comic Sans MS" size="5" color="blue">...oto jest pytanie</font><br> Być albo nie być......oto jest pytanie Polecenie <font> </font> nie jest zalecane, lepiej używać stylów (CSS). Inne tagi służące do formatowania tekstu: wytłuszczenie; <b> </b> podkreślenie; <u> </u> kursywa; <i> </i> przekreślenie; <strike> </strike> indeks górny; <sup> </sup> Strona 4

5 indeks dolny; <sub> </sub> Nagłówki Mamy sześć stopni nagłówków: <h1>nagłówek stopnia pierwszego</h1> nagłówek stopnia pierwszego <h2>nagłówek stopnia drugiego</h2> nagłówek stopnia drugiego <h3>nagłówek stopnia trzeciego</h3> nagłówek stopnia trzeciego <h4>nagłówek stopnia czwartego</h4> nagłówek stopnia czwartego <h5>nagłówek stopnia piątego</h5> nagłówek stopnia piątego <h6>nagłówek stopnia szóstego</h6> nagłówek stopnia szóstego Za pomocą parametru align="wyrównanie" możemy dowolnie wyrównać nagłówek. Pozioma linia Poziomą linię wstawiamy za pomocą tagu <hr>. Bez żadnego formatowania wygląda ona tak: Ale zawsze możemy dodać różne parametry: szerokośc linii, wartość można podawać w procentach i w pikselach; width="50%" wielkość (grubość) linii; size="5" wyrównanie linii; align="wyrównanie" kolor linii (zaleca się zarzucenie tego parametru na rzecz stylów); color="green" brak cienia linii; noshade Strona 5

6 Tekst preformatowany Tekst preformatowany wstawiamy przy pomocy tagów <pre> </pre>. W takim tekście wszystkie znaki mają taką samą wielkość (w tym szerokość), najczęściej jest to czcionka Courier New. To jest tekst preformatowany. Można wstawiać wielokrotne \ \ " / \ u / Obramowanie tekstu wstawiamy za pomocą tagów <fieldset> </fieldset>: Obramowanie Opcja ta nabiera większego sensu z połączeniem z tagami <legend> </legend>: <fieldset><legend>spis treści</legend> - rozdział pierwszy<br> - rozdział drugi<br> - rozdział trzeci<br> </fieldset> Opcja ta jest na razie interpretowana tylko przez MS Internet Explorer 4.0 w górę. Komentarze Znaczniki komentarza pozwalają wprowadzić tekst, który zostanie zignorowany przez przeglądarkę. Są one też używane podczas pisania skryptów. Taki znacznik wygląda tak: <!--coś, czego nie zobaczymy w oknie przeglądarki--> lub <!-- tego zresztą też nie //--> Najprostszy tag wstawiający grafikę ma postać: <img src="skrzynka.gif"> A oto efekt: Grafiki, multimedia Strona 6

7 Parametr src="" określa źródło. Tag ten ma również inne parametry: szerokość grafiki; width="100" wysokość grafiki; height="100" tekst alternatywny, wyświetlany jest kiedy przeglądarka jest ustawiona w trybie tekstowym; parametr ten jest równy parametrowi title="tekst"; alt="tekst alternatywny"; grubość obramowania grafiki w pikselach; border="0" wyrównanie grafiki względem tekstu; align="left" odległość od tekstu w poziomie; hspace="0" odległość od tekstu w pionie; vspace="0" Należy pamiętać, że im większa grafika, tym gorsza jakość podczas zmiany wielksci: <img src="skrzynka.gif" alt="grafika" width="200" height="200"> W podobny sposób możemy wstawić filmy typu *.avi lub *.mpeg (zwróć uwagę na inny parametr źródła): <img dynsrc="szukaj.avi" border="0"> Można również wstawić parametr informujący przeglądarkę o rozpoczęciu odtwarzania filmu: odtwarzanie filmu zostanie rozpoczęte po wgraniu strony; start="onload" odtwarzanie filmu zostanie rozpoczęte po najechaniu kursorem na film; start="mouseover" Strona 7

8 Należy pamiętać, aby nie umieszczać zbyt dużej ilości grafik na stronie. Może to bowiem spowodować znaczne wydłużenie czasu wgrywania strony. Ramki Ramki są przydatnym elementem przy tworzeniu stron www. Polegają one na podzieleniu okna przeglądarki na kilka części i załadowaniu w nich kilku plików HTML. Ułatwiają w ten sposób webmasterowi pracę. Obecnie ramki straciły nieco na popularności na rzecz metody SSI, jednak ta metoda wymaga znajomości języka skryptowego PHP. Okno dzielimy za pomocą znaczników <frameset> </frameset>, a właściwości poszczególnych ramek ustalamy za pomocą <frame>: <frameset rows="150,*"> <frame name="gorna" src="gora.html"> <frame name="lewa" src="lewa.html"> </frameset> Okno podzieli się tak: Stało się tak dzięki parametrowi rows="150,*". Górna ramka zajmie 150 pikseli, druga resztę wolnej przestrzeni. Dzielenie okna w pionie odbywa się przy użyciu parametru cols="150,*": Ramki można ze sobą łączyć: <frameset cols="150,*"> <frame src="menu.html"> <frameset rows="50,*"> <frame src="banner.html"> <frame src="homepage.html"> </frameset> </frameset> Część opcji definiujemy pod <frameset> </frameset>: grubość obramowania ramek; Strona 8

9 frameborder="0" grubość linii dzielącej ramki; border="0" kolor linii dzielącej ramki; bordercolor="gray" Ale najważniejsze rzeczy definiujemy pod <frame>: źródło pliku; src="plik.html" nazwa ramki; name="nazwa" zablokowanie możliwości zmiany rozmiaru ramki; noresize ustalenie widoczności paska przewijania: yes - widoczny cały czas, auto - widoczny tylko w razie potrzeby, no - ukryty cały czas; scrollling="yes" Pamiętaj, że jeżeli są ramki, dokument ma następującą budowę: <html> <head> </head> <frameset> </frameset> <noframes> </noframes> </html> Znaczniki <noframes></noframes> wczytane zostaną jeśli przeglądarka nie posiada obsługi ramek. Oto przykładowa strona ustalająca nam ramki: <html> <head> <title>przykład z ramkami</title> </head> <frameset rows="15%,*" frameborder="0" border="0"> <frame name="gorna" src="prgora.html" noresize scrolling="no"> <frameset cols="25%,*" frameborder="0" border="0"> <frame name="lewa" src="prlewa.html"> <frame name="prawa" src="prprawa.html" scrolling="auto"> </frameset> </frameset> <noframes>niestety, twoja przeglądarka nie obsługuje ramek. </noframes> </html> Odsyłacze Odsyłacze (linki) służą do łączenia poszczególnych stron ze sobą. Kiedy klikniesz odsyłaczu wczytana zostanie jakaś strona lub wysłana poczta. Miejsca aktywne służą również do obsługi skryptów JavaScript. Domyślnie linki będą podkreślone i przyjmą taki kolor, jaki został ustalony w znaczniku <body> </body>. Formatowanie łączy można zmieniać za pomocą stylów. Strona 9

10 Odsyłacze bliskie (miejscowe) przenoszą nas do dokumentu na tym samym serwerze, na którym znajduje się strona z odsyłaczem. Moją one postać: <a href="strona.html">jakiś link</a> Parametr href="strona.html" określa źródło wczytywanego pliku. Link nie musi być do pliku HTML. Pliki o rozszerzeniach *.txt, *.jpg, *.gif i inne graficzne wczytane zostaną w oknie przeglądarki, inne wymagają uruchomienia dodatkowych programów, np. dla pliku MP3 uruchomiony domyślny odtwarzacz plików tego typu. W przypadku plików *.exe, *.zip, *.rar oraz innych spakowanych przeglądarka zapyta się nas, czy chcemy zapisać plik na dysku, czy otworzyć z bierzącej lokalizacji. W linku możemy użyć paramertu target="nazwa_ramki". Spowoduje on wyświetlenie pliku w podanej ramce. Jeśli chcemy, aby była to nowa ramka (okno), ustawiamy target="_blank", target="_top" skasuje nam wszystkie ramki w dokumencie. Dzięki odsyłaczom dalekim przeniesiemy się na stronę umieszczoną na innym serwerze niż nasza strona: <a href="http://www.pu.kielce.pl/">akademia Świętokrzyska</a> W podobny sposób można wysłać pocztę. Oto przykład: <a do mnie</a> Wybranie takiego linku spowoduje uruchomienie domyślnego klienta poczty. Poczta zostanie wysłana na adres: Możemy także zdefiniować: temat listu; kopia jawna listu; kopia ukryta listu (kopie można wysłać na kilka adresów , wtedy adresy oddzielamy średnikami); część treści listu; To wszystko można połączyć w jedno za pomocą znaku anpersant &. Zakładki Innym typem linków są zakładki. Dzięki nim przenosimy się do określonego miejsca w dokumencie. Najpierw oczywiście musimy to miejsce oznaczyć: <a name="miejsce_dokumentu">zaznaczone miejsce w dokumencie</a> Później robimy zwykły link, ale przed wartością href dodajemy hash (#): <a href="#miejsce_dokumentu">link do tekstu: 'Zaznaczone miejsce w dokumencie'</a> Jeśli jako wartość wpiszemy tylko #, przeniesiemy się na górę dokumentu. Można zrobić również link do jakiegoś miejsca w innym dokumencie: <a href="plik.html#miejsce_dokumentu">...</a> Odsyłacze na grafice Opcja ta polega na wydzieleniu obszarów na rysunku, które przejmą rolę odsyłaczy. Poniżej widać rysunek, dla którego została napisany przykład: <map name="mapa"> Strona 10

11 <area shape="rectangle" coords="7, 10, 84, 84" href="1.html"> <area shape="rectangle" coords="107, 15, 145, 65" href="2.html"> <area shape="circle" coords="129, 130, 38" href="3.html"> <area shape="polygon" coords="141, 83, 173, 7, 192, 98" href="4.html"> <area shape="polygon" coords="11, 97, 31, 111, 99, 93, 72, 133, 114, 1 87, 55, 169, 2, 187" href="5.html"> </map> <img src="linki.jpg" border="0" usemap="#mapa"> Pomiędzy tagami <map> </map> zdefiniowane są poszczególne obszary. Później w dodana zostaje informacja o obszarach, które zostaną użyte do grafiki <img usemap="#mapa">. Możemy stosować trzy rodzaje map: kwadrat - podajemy współrzędne przeciwległych rogów; shape="rectangle" okrąg - podajemy współrzędne środka okręgu oraz długość promienia; shape="circle" wielokąt - podajemy współrzędne co najmniej trzech wierzchołków; shape="polygon" Link docelowy może być daleki, bliski jak również może to być zakładka. Mamy dwa typy wykazów: nieuporządkowany (punktory); uporządkowany (numeracja); Wykazy nieuporządkowane tworzymy następująco: <ul> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt Wykazy Znaczniki <ul> </ul> otwierają i zamykają listę, a <li> to poszczególne punkty. Symbolem graficznym wcale nie musi być kropka: Strona 11

12 <ul type="sqare"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> pierwszy punkt drugi punkt trzeci punkt <ul type="circle"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> o pierwszy punkt o drugi punkt o trzeci punkt Wykaz uporządkowany jest wykazem ponumerowanym, a poszczególne punkty zamykamy tagami <ol> : <ol> <li> punkt pierwszy <li> punkt drugi <li> punkt trzeci 1. pierwszy punkt 2. drugi punkt 3. trzeci punkt Dzięki parametrowi start="3" możemy ustalić od jakiej liczby ma zacząć się lista. Ponadto mamy do wyboru jeszcze cztery sposoby numerowania (oprócz powyższego): <ol type="a"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt a. pierwszy punkt b. drugi punkt c. trzeci punkt <ol type="a"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt A. pierwszy punkt B. drugi punkt C. trzeci punkt <ol type="i"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt i. pierwszy punkt ii. drugi punkt iii. trzeci punkt <ol type="i"> Strona 12

13 <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt I. pierwszy punkt II. drugi punkt III. trzeci punkt Wykazy różnego typu możemy ze sobą łączyć, np.: <ol type="i"> <li>część pierwsza <ol type="1"> <li>rozdział pierwszy <ul type="square"> <li>dodatek <li>dodatek </ul> <li>rozdział drugi <li>rozdział trzeci <ul type="square"> <li>dodatek <li>dodatek </ul> <li>rozdział czwarty <li>część druga <ol type="1"> <li>rozdział pierwszy <ol type="a"> <li>podrozdział <li>podrozdział <li>podrozdział <li>rozdział drugi <li>rozdział trzeci <ol type="a"> <li>podrozdział I. Część pierwsza 1. Rozdział pierwszy dodatek dodatek 2. Rozdział drugi 3. Rozdział trzeci dodatek dodatek 4. Rozdział czwarty II. Część druga 1. Rozdział pierwszy a. podrozdział b. podrozdział c. podrozdział 2. Rozdział drugi 3. Rozdział trzeci a. podrozdział Strona 13

14 Tabele Przy tworzeniu tabel będziemy posługiwać się głównie czterema tagami: definicja tabeli; <table> </table> definicja wiersza; definicja komórki; <td> </td> definicja nagłówka; <th> </th> Najprostsza tabela wygląda tak: <table> <th>nagłówek a1</th> <th>nagłówek a2</th> <th>nagłówek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> </table> nagłówek a1 nagłówek a2 nagłówek a3 komórka b1 komórka b2 komórka b3 komórka c1 komórka c2 komórka c3 Jak widać nagłówek od zwykłej komórki różni się tym, że w nagłówku czcionka jest automatycznie pogrubiona. Aby tabela miała obramowanie, w znaczniku rozpoczynającym tabelę dodajemy parametr border="piksele", którego wartością jest grubość obramowania, np.: <table border="5"> <th>nagłówek a1</th> <th>nagłówek a2</th> <th>nagłówek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> Strona 14

15 <td>komórka c3</td> </table> nagłówek a1 nagłówek a2 nagłówek a3 komórka b1 komórka b2 komórka b3 komórka c1 komórka c2 komórka c3 Obramowanie inne niż domyślne mogą mieć również komórki. Ustalamy to za pomocą parametru cellspacing="piksele". Dodatkowo istnieje parametr cellpadding="piksele", dzięki któremu ustalamy marginesy dla komórek, tzn. odległość zawartości komórki od jej obramowania Za pomocą parametru bordercolor="kolor" możemy ustalić kolor obramowania: <table border="5" bordercolor="blue"> <th>nagłowek a1</th> <th>nagłowek a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> </table> nagłowek a1 nagłowek a2 nagłowek a3 komórka b1 komórka b2 komórka b3 komórka c1 komórka c2 komórka c3 Można również zastosować metodę cieniowanego obramowania za pomocą tagów: bordercolorlight="kolor" oraz bordercolordark="kolor". Pierwszy tag odnosi się do jasnego obramowania (górna i lewa krawędź) drugi do ciemnego (dolna i prawa krawędź): <table border="5" bordercolorlight="yellow" bordercolordark="brown"> <th>nagłowek a1</th> <th>nagłowek a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> Strona 15

16 </table> Jak widać w powyższym przykładzie w komórkach kolor obramowania jest odwrotny niż całej tabeli. Ale kolor cieniowanego obramowania można zastosować również do poszczególnego wiersza lub komórki. Wystarczy zastosować odpowiednie parametry do definicji wiersza lub komórki. Za pomocą parametru bgcolor="kolor" możemy ustalić kolor tła tabeli (lub poszczególnych komórek, np.: <table border="5" bgcolor="aqua" bordercolorlight="yellow" bordercolordark="brown"> <th>nagłowek a1</th> <th>nagłowek a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> </table> Szerokość tabeli (lub komórki) podajemy za pomocą parametru width="piksele", a wysokość height="piksele": Zawartość komórek możemy wyrównywać w pionie valign="wyrównanie"; możliwe wartości to: top - do góry, center - do środka, bottom - do dołu i poziomie align="wyrównanie"; możliwe wartości to: left - do lewej, center - do środka, right - do prawej: <table border="2" width="500" bordercolor="brown"> <tr height="50" align="center"> <th width="200" valign="top">nagłowek a1</th> <th valign="center">nagłowek a2</th> <th valign="bottom">nagłowek a3</th> <tr align="left"> <td width="200">komórka b1</td> <td>komórka b2</td> <td>komórka b3</td> <tr align="right"> <td width="200">komórka c1</td> <td>komórka c2</td> <td>komórka c3</td> Strona 16

17 </table> Komórki można łączyć używając parametrów rowspan="ilość_złączonych_komórek_w_pionie" i colspan="ilość_złączonych_komórek_w_poziomie", np.: <table border="2" bgcolor="aqua" bordercolorlight="yellow" bordercolordark="brown"> <th colspan="2">nagłowek a1 i a2</th> <th>nagłowek a3</th> <td>komórka b1</td> <td rowspan="2">komórka b2 i c2</td> <td>komórka b3</td> <td>komórka c1</td> <td>komórka c3</td> </table> Kaskadowe arkusze stylów Kaskadowe Arkusze Stylów (CSS) są stosunkowo nowym narzędziem webmastera, jednak już są bardzo popularne. Dzięki nim możemy dokładniej określić wygląd strony, rezygnując nawet z niektórych znaczników HTML. CSS 2.0 zawiera aż 122 właściwości dotyczące nie tylko tekstu. Definiuje się je wg schematu: selektor1 {właściwość1: wartość1; właściwość2: wartość2} selektor2 {właściwość3: wartość3; właściwość4: wartość4} Selektor to jakiś tag (np. h2 - nagłówek drugiego stopnia), któremu zostaną przypisane jakieś właściwości zamknięte nawiasami klamrowymi {}. Teraz pojawia się pytanie gdzie to umieścić? Są trzy sposoby: styl osadzony - definiujemu w nagłówku dokumentu <head> </head> pomiędzy znacznikami <style> </style> i komentarza, np.: <style type="text/css"> <!-- selektor1 {właściwość1: wartość1; właściwość2: wartość2} //--> </style> Strona 17

18 styl zewnętrzny - styl zdefiniowany jest w oddzielnym pliku, a w nagłówku dokumentu robimy do niego specjalny link: <link href="styl.css" rel="stylesheet" type="text/css">; w pliku styl.css wszystko definiujemy tak jak w stylu osadzonym, np.: <!-- selektor1 {właściwość1: wartość1; właściwość2: wartość2} //--> powyższe dwa sposoby ustalają styl znacznika w całym dokumencie; styl wpisany - styl definiujemy tylko dla jednago znacznika używając parametru style="właściwości_stylu", np.: <p style="selektor1 {właściwość1: wartość1; właściwość2: wartość2 }">... Czasami chcemy, stworzyć wyjątek stylu od jakiegoś znacznika dla jednego elementu. Wtedy z pomocą przychodzą nam klasy. Definiujemy styl dla nagłówków drugiego stopnia: h2 {font-family: Courier New; text-align: center; color: blue} Będą one niebieskie, wyrównane do środka i napisane czcionką kroju Courier New, ale chcemy, aby jeden lub więcej nagłówków było w kolorze czerwonym. W związku z tym definiujemy klasę: wyjatek {color: red} A do tagu dodajemy odpowiedni parametr: <h2 class="wyjatek">. Przy definiowaniu klasy wystarczy podać tylko te właściwości, które różnią klasę od stylu. Należy pamiętać, że nie da się skasować formatowania danego selektora. Np. jeśli selektorowi <b> </b> nadamy styl font-weight: none (waga czcionki żadna tzn. min. brak pogrubienia) to i tak znacznik ten będzie wytłuszczał zaznaczony tekst. Czasami chcemy zdefiniować ten sam styl dla kilku selektorów. Można to zrobić tradycyjnie: h1 {font-family: Times New Roman} h2 {font-family: Times New Roman} h3 {font-family: Times New Roman} albo pogrupować selektory: h1, h2, h3 {font-family: Times New Roman} CSS 2.0 daje nam możliwość zdefiniowania linków w czterech stanach: zwykły link: a:link {formatowanie}; aktywny link: a:active {formatowanie}; odwiedzony link: a:visited {formatowanie}; link w momencie najechania na niego kursorem: a:hover {formatowanie}; Poniżej zebrane są najpopularniejsze (z pominięciem warstw) właściwości kaskadowych arkuszy stylów. Zostały one pogrupowane na kilka grup: właściwości dotyczące tekstu; właściwości dotyczące tła; właściwości dotyczące odstępów i marginesów; właściwości dotyczące obramowania i pasków przewijania; Właściwości dotyczące tekstu Element Opis Możliwe wartości color kolor czcionki wszystkie możliwe kolory font-family krój czcionki wszystkie możliwe kroje czcionek font-size wielkość czcionki w punktach (pt); xx-small, x-small, smaler, small, large, larger, x-large, xx-large font-style styl czcionki normal, italic, oblique font-weight waga (grubość) czcionki lighter, normal, bold, bolder font-variant kapitaliki normal, small_caps Strona 18

19 text-align wyrównanie tekstu left, right, center, justify text-decoration dekoracja tekstu none, underline, line-through text-indent wcięcie pierwszego wiersza akapitu w punktach (pt), procentach lub pikselach (px) text-transform transformacja tekstu none, lowercase, uppercase, capitalize white-space tekst normalny / preformatowany normal, pre, nowrap / 'niełamliwy' wiersz cursor rodzaj kursora e-resize, ne-resize, n-resize, nw-resize, w-resize, swresize, s-resize, se-resize, hand, crosshair, help, move, text, auto, default, wait Właściwości dotyczące tła Element Opis Możliwe wartości background-attachment tło przewijane/znak wodny scroll, fixed background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") background-position pozycja tła w punktach (pt), procentach lub pikselach (px) background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, no-repeat Właściwości dotyczące odstępów i marginesów Element Opis Możliwe wartości margin-top górny margines w punktach (pt), procentach lub pikselach (px) margin-bottom dolny margines w punktach (pt), procentach lub pikselach (px) margin-left lewy margines w punktach (pt), procentach lub pikselach (px) margin-right prawy margines w punktach (pt), procentach lub pikselach (px) word-spacing odstępy pomiędzy wyrazami w punktach (pt), procentach lub pikselach (px) letter-spacing odstępy pomiędzy znakami w punktach (pt), procentach lub pikselach (px) line-height odstępy pomiędzy wierszami w punktach (pt), procentach lub pikselach (px) Właściwości dotyczące obramowania i pasków przewijania Element Opis Możliwe wartości border-width grubość obramowania w punktach (pt), procentach lub pikselach (px) border-style styl obramowania none, solid, double, inset, outset, groove, ridge border-color kolor obramowania wszystkie możliwe kolory scrollbar-face-color wszystkie możliwe kolory scrollbar-highlight-color wszystkie możliwe kolory scrollbar-shadow-color wszystkie możliwe kolory scrollbar-3dlight-color elementy paska przewijania wszystkie możliwe kolory scrollbar-arrow-color wszystkie możliwe kolory scrollbar-track-color wszystkie możliwe kolory scrollbar-darkshadow-color wszystkie możliwe kolory Strona 19

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości

Bardziej szczegółowo

p { color: yellow; font-weight:bold; }

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

Czcionki. Rodzina czcionki [font-family]

Czcionki. Rodzina czcionki [font-family] Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

przygotował: mgr Szymon Szewczyk PODSTAWY

przygotował: mgr Szymon Szewczyk PODSTAWY S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

Wprowadzenie do Internetu zajęcia 3

Wprowadzenie do Internetu zajęcia 3 Wprowadzenie do Internetu zajęcia 3 Zakres tematyczny zajęć CSS arkusz stylów. Formatowanie tekstu CSS w przykładach. CSS arkusz stylów Wprowadzenie Język HTML, XHTML został wzbogacony o potężne narzędzie

Bardziej szczegółowo

CSS - 2. Właściwości tekstu, czcionek

CSS - 2. Właściwości tekstu, czcionek CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Technologie stron www Strony www Statyczne HTML. CSS. Dynamiczne Oparte o bazy danych.

Bardziej szczegółowo

Tworzenie stylów w HTML

Tworzenie stylów w HTML Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

Tutorial. HTML Rozdział: Ramki

Tutorial. HTML Rozdział: Ramki Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Blok dokumentu.

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Wykład 2 CSS. Michał Drabik

Wykład 2 CSS. Michał Drabik Wykład 2 CSS Michał Drabik XHTML CSS Struktura strony internetowej Prezentacja strony internetowej CSS = Cascading Style Sheets Kaskadowe arkusze stylów style umieszczone są według hierarchi, ustalającej

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

HTML. Barbara Kołodziejczak

HTML. Barbara Kołodziejczak 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

Bardziej szczegółowo

SterBox. Przygotowanie Strony Użytkownika

SterBox. Przygotowanie Strony Użytkownika Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia

Bardziej szczegółowo

Język HTML i podstawy CSS

Język HTML i podstawy CSS Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

Bardziej szczegółowo

Co to jest html? I.Struktura strony:

Co to jest html? I.Struktura strony: Co to jest html? Jak tworzyć strony internetowe? Jest ich przecież w Internecie tysiące, a może nawet miliony. Jednak jedne strony bardziej nam się podobają, inne mniej. Z czego to wynika? Atrakcyjność

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

2. Projektowanie stron WWW podstawowe informacje

2. Projektowanie stron WWW podstawowe informacje 1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od

Bardziej szczegółowo

CSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1

CSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1 CSS (kaskadowe arkusze stylów) to narzędzie do formatowania dokumentu. Obecna wersja to CSS 2.1 Wstawianie stylów Przeglądarka wyświetla strony pozbawione stylów autorskich, stosując własne, wbudowane

Bardziej szczegółowo

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka

Bardziej szczegółowo

Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki. (finansowane przez EFS oraz MEiN) JĘZYK HTML

Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki. (finansowane przez EFS oraz MEiN) JĘZYK HTML 1. Zasady nazywania i zapisywania plików: a. Nazwa pliku nie powinna zawierać znaków specjalnych typu: - polskie litery (tzw. ogonki): ĘęÓ󥹌śŁłŻżŹźĆćŃń; - puste znaki (spacja) zastępujemy je innymi znakami

Bardziej szczegółowo

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu.

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Klub Seniora - Podstawy obsługi komputera oraz korzystania z Internetu Str. 1 Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Część 3 Opis programu MS Office

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem

Bardziej szczegółowo

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika. Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty

Bardziej szczegółowo

HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8

HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8 HTML KROK PO KROKU WSTĘP 2 EDYTOWANIE TEKSTU 4 HIPERLINKI 5 TABELE 7 MULTIMEDIA 8 WSTĘP Ten kurs dedykuje zarówno dla osób zupełnie "zielonych, jeśli chodzi, o html'a które chcą tą wiedze zdobyć jak i

Bardziej szczegółowo

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania HTML & CSS 1 Przepis Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista HTML kurs podstawowy Wykład: język znaczników, atrybuty, XML, XHTML, rodzaje znaczników, wybór edytora, struktura dokumentu, head, title, body, kodowanie, utf-8, iso-8859-2, meta, link, akapit, font, color,

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów 1. Uruchamianie edytora tekstu MS Word 2007 Edytor tekstu uruchamiamy jak każdy program w systemie Windows. Można to zrobić

Bardziej szczegółowo

Wrocław dn. 20 kwietnia 2006 roku. Temat lekcji: Style CSS.

Wrocław dn. 20 kwietnia 2006 roku. Temat lekcji: Style CSS. Piotr Chojnacki http://www.piotrchojnacki.pl IV rok, informatyka chemiczna Gimnazjum nr 35 we Wrocławiu Wrocław dn. 20 kwietnia 2006 roku Czas trwania zajęć: 90 minut, przedmiot: informatyka Temat lekcji:

Bardziej szczegółowo

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i

Bardziej szczegółowo

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

Podstawy tworzenia stron internetowych

Podstawy tworzenia stron internetowych Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo

Tworzenie i edycja dokumentów w aplikacji Word.

Tworzenie i edycja dokumentów w aplikacji Word. Tworzenie i edycja dokumentów w aplikacji Word. Polskie litery, czyli ąłóęśźżń, itd. uzyskujemy naciskając prawy klawisz Alt i jednocześnie literę najbardziej zbliżoną wyglądem do szukanej. Np. ł uzyskujemy

Bardziej szczegółowo

Wstęp... 2. Plik index.htm... 2. Plik zaglowce.htm... 6. Plik uprawnienia.htm... 8. Plik bezpieczeństwo.htm... 9. Plik szanty.htm...

Wstęp... 2. Plik index.htm... 2. Plik zaglowce.htm... 6. Plik uprawnienia.htm... 8. Plik bezpieczeństwo.htm... 9. Plik szanty.htm... ZAWARTOŚĆ INSTRUKCJI Wstęp... 2 Plik index.htm... 2 Plik zaglowce.htm... 6 Plik uprawnienia.htm... 8 Plik bezpieczeństwo.htm... 9 Plik szanty.htm... 11 Połączenie podstron w witrynę... 11 Zobacz podgląd

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

e r T i H M r e n L T n

e r T i H M r e n L T n s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny

Bardziej szczegółowo

kaskadowe arkusze stylów

kaskadowe arkusze stylów Autor: Marek Buła bulkas@poczta.onet.pl CSS kaskadowe arkusze stylów CASCADING STYLE SHEETS Validator (X)HTML Validator CSS CSS CSS level 1 (1996, 1999) contains properties for fonts, margins, colors,

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

Bardziej szczegółowo

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów

Bardziej szczegółowo

Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word.

Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word. Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word. 1. Edytor tekstu WORD to program (edytor) do tworzenia dokumentów tekstowych (rozszerzenia:.doc (97-2003),.docx nowszy). 2. Budowa okna edytora

Bardziej szczegółowo

EDYCJA TEKSTU MS WORDPAD

EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

HTML informacje podstawowe

HTML informacje podstawowe HTML informacje podstawowe HTML to język hipertekstowego znakowania (Hypertext Markup Language), który stanowi ustanowioną przez konsorcjum World Wide Web Consortium (W3C) specyfikację nakreślającą postać

Bardziej szczegółowo

Podręcznik edycji tekstu dla inteligentnych

Podręcznik edycji tekstu dla inteligentnych Podręcznik edycji tekstu dla inteligentnych Spis treści Ogólne zasady edycji tekstu...3 Struktura dokumentu tekstowego...3 Strona...3 Akapit...3 Znak...3 Znaki niedrukowane...4 Twarda spacja, miękki i

Bardziej szczegółowo