Znaczniki HTML. Struktura dokumentu. Nagłówek strony
|
|
- Stanisław Lisowski
- 8 lat temu
- Przeglądów:
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" content="webmaster@serwer.pl"> 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= 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=" Świętokrzyska</a> W podobny sposób można wysłać pocztę. Oto przykład: <a href="mailto:webmaster@serwer.pl">napisz do mnie</a> Wybranie takiego linku spowoduje uruchomienie domyślnego klienta poczty. Poczta zostanie wysłana na adres: webmaster@serwer.pl. Możemy także zdefiniować: temat listu; webmaster@serwer.pl?subject=temat_listu kopia jawna listu; webmaster@serwer.pl?cc=ktos@gdzies.pl kopia ukryta listu (kopie można wysłać na kilka adresów , wtedy adresy oddzielamy średnikami); webmaster@serwer.pl?bcc=inny_ktos@gdzies.pl część treści listu; webmaster@serwer.pl?body=poczatek_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
CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między
Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania,
Bardziej szczegółowoHTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Bardziej szczegółowoDzię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ółowoProgramowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Bardziej szczegółowoKró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ółowoKaskadowe 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ółowop { 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ółowoLABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image
Bardziej szczegółowoPrzedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
Bardziej szczegółowoKASKADOWE 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ółowoOdsył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ółowoHTML. 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ółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoCzcionki. 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ółowoCSS. 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ółowoHTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Bardziej szczegółowoOczywiś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ółowoza 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ółowoZnaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
Bardziej szczegółowoprzygotował: 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ółowoCel 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ółowoHTML 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ółowowww.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ółowoMoż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ółowoZa 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ółowoI. 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ółowoWitryna internetowa. Należy unikać w nazwach plików używania polskich znaków.
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ółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
Bardziej szczegółowoYoung Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Bardziej szczegółowoEdukacja 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ółowozmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
Bardziej szczegółowoCSS - 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ółowoTworzenie 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ółowoMoż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ółowoJę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ółowoPodstawy 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ółowoJustyna 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ółowoTworzenie 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ółowoPodstawowe 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ółowoWprowadzenie 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ółowoTutorial. 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ółowoPodstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
Bardziej szczegółowoużywane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
Bardziej szczegółowoHyper 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ółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH PODSTAWY JĘZYKA HTML (HyperText Markup Language) 1. STRUKTURA DOKUMENTU HTML Dokument HTML jest zwykłym nie skonwertowanym tekstem, z tak zwanymi znacznikami
Bardziej szczegółowoKaskadowe 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ółowoTworzenie 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ółowoSTRONY 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ółowoTworzenie 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ółowoCSS - style kaskadowe. Cascadind Style Sheets
CSS - style kaskadowe Cascadind Style Sheets Znaczenie CSS Arkusze stylów pozwalają nam na ścisłą kontrolę wyglądu strony. Możemy zdefiniować np. odpowiednie czcionki dla danych elementów oraz zachowywanie
Bardziej szczegółowoStrony 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ółowoZdefiniowane 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ółowoWprowadzenie 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ółowoHTML 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ółowoTabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Bardziej szczegółowoStruktura 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ółowoLaboratorium 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ółowoCSS 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ółowoDanuta 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ółowoKrok 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ółowoEdytor 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ółowoWykład 1: HTML (XHTML) Michał Drabik
Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający
Bardziej szczegółowoWitryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoWybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
Bardziej szczegółowoKATEGORIA OBSZAR WIEDZY
Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z
Bardziej szczegółowoBlok 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ółowoProjektowanie 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ółowoWykł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ółowoSpecyfikacja 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ółowoSterBox. 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ółowoI. 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ółowoElementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Bardziej szczegółowoABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Bardziej szczegółowoHTML. 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ółowoPierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Bardziej szczegółowoPrzy 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ółowoZaawansowana 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ółowoSylabus 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ółowoModel blokowy. Model blokowy w CSS
Model blokowy Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania
Bardziej szczegółowoJę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ółowoPo zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych
rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz
Bardziej szczegółowoUwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.
* HTML + Wstęp do HTML Dokument HTML jest plikiem tekstowym, który zawiera znaczniki, zwane inaczej tagami, i stanowią język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle
Bardziej szczegółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoTworzenie 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ółowoBox 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ółowoStudia 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ółowoModuł 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ółowoCo 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Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość
Bardziej szczegółowoDokument 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ółowoCSS (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ółowoZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW
HTML i inne Struktura dokumentu standard języka użytego do budowy strony nagłówek strony zawartość strony ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW Strona kodowa Opis strony Słowa
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Bardziej szczegółowoWprowadzenie 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ółowoMATERIAŁ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ółowoTWORZENIE STRON WWW. Zasady opisu stron w języku HTML:
TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis
Bardziej szczegółowoHTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.
HTML HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. Dokument HTML to plik tekstowy, z ewentualnymi załącznikami, w którym znajduje się tekstowa treść przeplatana z rozkazami
Bardziej szczegółowoPrzepis. 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