PROGRAMOWANIE STRON INTERNETOWYCH JĘZYK (X)HTML. Agenda wykładu. Zaliczenie przedmiotu Kolokwium z wykładu na ostatnich zajęciach!!!

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

Download "PROGRAMOWANIE STRON INTERNETOWYCH JĘZYK (X)HTML. Agenda wykładu. Zaliczenie przedmiotu 2012-01-09. Kolokwium z wykładu na ostatnich zajęciach!!!"

Transkrypt

1 Programowanie Stron Internetowych 2 PROGRAMOWANIE STRON INTERNETOWYCH dr inż. Łukasz Bartczuk Katedra Inżynierii Komputerowej Politechnika Częstochowska p. 517 Agenda wykładu Język (X)HTML Podstawy Obsługa formularzy Kaskadowe arkusze styli Podstawy Model pudełkowy Język JavaScript Podstawy Programowanie obiektowe w JavaScript Dom obiektowy model dokumentu Biblioteki JavaScript JQuery Ajax po stronie przeglądarki Optymalizacja stron internetowych Optymalizacja rozmiaru strony SEO Search Engine Optimization Programowanie Stron Internetowych 3 Zaliczenie przedmiotu Kolokwium z wykładu na ostatnich zajęciach!!! Ocena końcowa będzie średnią arytmetyczną ocen: z laboratorium z kolokwium z wykładu wykładu JĘZYK (X)HTML Podstawy 1

2 Programowanie Stron Internetowych 6 Programowanie Stron Internetowych 7 Przeglądarki internetowe Internet Explorer - Windows Mozilla Firefox Windows, Linux/Unix, Mac Przeglądarki internetowe wrzesień-2011 wrzesień % 2% 4% 2% 23% Internet Explorer 31% 18% 31% Firefox Chrome 40% Safari 45% Opera Internet Explorer Firefox Chrome Safari Opera Opera Windows, Linux/Unix, Mac wrzesień-2009 wrzesień-2008 Google Chrome Windows, Linux/Unix, Mac Safari Windows, Mac 47% 4% 2% 7% 40% Internet Explorer Firefox Chrome Safari Opera 43% 3% 3% 2% 49% Internet Explorer Firefox Chrome Safari Opera Programowanie Stron Internetowych 8 Programowanie Stron Internetowych 9 Składowe strony internetowej Struktura strony internetowej Wygląd (CSS) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> Struktura (XHTML) Dokument Funkcjonalność (JavaScript) <html xmlns="http://www.w3.org/1999/xhtml/"> <head> <title>tytuł strony</title> </head> <body> Zawartość strony... </body> </html> 2

3 Programowanie Stron Internetowych 10 Programowanie Stron Internetowych 11 Deklaracja DOCTYPE Tryby renderowania w przeglądarkach <!DOCTYPE html PUBLIC Nazwa elementu głównego PUBLIC / SYSTEM "-//W3C//DTD XHTML 1.0 Transitional//EN" Identyfikator publiczny (Public Identifier) "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> 1. Standard 2. Almost standard 3. Quirks Mode Adres URL dokumentu DTD (System Identifier) Programowanie Stron Internetowych 12 Programowanie Stron Internetowych 13 Tryb standard Tryb almost standard <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/1999/rec-html /loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 3

4 Programowanie Stron Internetowych 14 Programowanie Stron Internetowych 15 Tryb Quirks Mode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN" "http://www.w3.org/tr/html/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> Blok <head> 1. meta 2. title 3. link 4. script 5. style Brak deklaracji DOCTYPE Programowanie Stron Internetowych 16 Programowanie Stron Internetowych 17 Blok <head> <meta name="department" content="katedra Inżynierii Komputerowej /> <meta name="author" content="jan Kowalski" /> <meta name="robots" content="noindex, follow" /> <meta name="description" content="opis strony" /> <meta name="keywords" content="xhtml,css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="refresh" content="300" /> Znaczniki HTML Podstawowe Struktura Formatowania Formularze <!DOCTYPE>,<html>,<body>, <!-- --> <h1>-<h6>,<p>,<div>,<span>, <br />,<hr/> <acronym>,<abbr>,<address>,<b>, <bdo>,<big>,<blockquote>,<code>, <del>,<dfn>,<em>,<i>,<ins>,<kbd>, <pre>,<q>,<samp>,<small>,<strong>, <sub>,<sup>,<tt>,<u>,<var> <form>,<input>,<textarea>,<button>, <select>,<optgroup>,<option>, <label>,<fieldset>,<legend> Tabele <table>,<caption>,<th>,<tr>,<td>, <thead>,<tbody>,<tfoot>,<col />, <colgroup> 4

5 Programowanie Stron Internetowych 18 Programowanie Stron Internetowych 19 Znaczniki HTML Podstawowe formatowanie tekstu Listy <ul>,<ol>,<li>,<dl>,<dt>,<dd> Styl czcionki: Moduły tekstu: Programowanie <script>,<noscript>,<object>,<param /> pogrubienie <b></b> wyróżnienie <em></em> Obrazy Metadane <img />,<map>,<area /> <head>,<title>,<meta>,<base /> kursywa <i></i> podkreślenie <u></u> przekreślenie <s></s> cytowanie <cite></cite> kod maszynowy <code></code> z klawiatury <kbd></kbd> Style <style> krój maszynowy <tt></tt> przykład <samp></samp> wzmocniony <strong></strong> Linki <a>, <link /> zmienna <var></var> Programowanie Stron Internetowych 20 Programowanie Stron Internetowych 21 Elementy blokowe i liniowe Elementy blokowe są to elementy, które umieszczane są jeden pod drugim. Elementy liniowe są to elementy, które umieszczane są jeden obok drugiego. Rysunki Znacznik <img /> <img src="rys.jpg" /> <img src="rys.jpg" alt="rysunek"/> 5

6 Programowanie Stron Internetowych 22 Programowanie Stron Internetowych 23 Tabele - 1 <table border="1"> <caption>podpis</caption> <tr><th>nagłówek 1</th> <th>nagłówek 2</th> <th>nagłówek 3</th> </tr> <tr><td>11</td> <td>12</td> <td>13</td> </tr> <tr><td>21</td> <td>22</td> <td>23</td> </tr> <tr><td>31</td> <td>32</td> <td>33</td> </tr> </table> Tabele 2 (łączenie komórek) W pionie atrybut rowspan <table border="1"> <tr><td rowspan="2">11</td> <td>12</td> <td>13</td> </tr> <tr><td>22</td> <td>23</td> </tr> <tr><td>31</td> <td>32</td> <td>33</td> </tr> </table> Programowanie Stron Internetowych 24 Programowanie Stron Internetowych 25 Tabele 3 (łączenie komórek) W poziomie atrybut colspan <table border="1"> <tr><td colspan="2">11</td> <td>13</td> </tr> <tr><td>21</td> <td>22</td> <td>23</td> </tr> <tr><td>31</td> <td>32</td> <td>33</td> </tr> </table> Tabele 4 Atrybuty znacznika table: border określa grubość ramki zewnętrznej cellpadding określa obszar pomiędzy ramką i zawartością komórki cellspacing określa przestrzeń wewnątrz ramki <table border="5" cellpadding="10" cellspacing="5"> </table> 6

7 Programowanie Stron Internetowych 26 Linki zewnętrzne <a href="adres_strony.html">link</a> wewnętrzne <a href="#nazwa">link</a> do określonego miejsca na stronie FORMULARZE HTML <a href="adres_strony.html#nazwa">link</a> Programowanie Stron Internetowych 28 Programowanie Stron Internetowych 29 Składowe formularzy Znacznik <form> Elementy formularza pole tekstowe pole hasła obszar tekstowy pole wyboru pole opcji lista rozwijana pole wyboru pliku pole ukryte przyciski etykiety grupy Znacznik form Wyznacza ramy formularza Może zawierać następujące atrybuty: action najczęściej określa adres, pod który ma być wysłany formularz (pole obowiązkowe) method wyznacza metodę przesłania formularza enctype wyznacza sposób kodowania danych <form action="zatwierdz.php" method="get"> </form> 7

8 Programowanie Stron Internetowych 30 Programowanie Stron Internetowych 31 Znacznik input Odpowiada za wygenerowanie na stronie większości pól formularza. Może zawierać następujące atrybuty: type określa rodzaj pola name określa nazwę pola disabled określa aktywność pola (disabled = "disabled") Pole może zawierać również inne atrybuty w zależności od wartości atrybutu type Znacznik input type="text" Wstawia do formularza pole pozwalające na wprowadzenie jednej linii tekstu. Może zawierać następujące atrybuty: value pozwala na ustawienie domyślnej wartości pola size pozwala na określenie ile znaków będzie jednocześnie widocznych w polu maxlength pozwala na określenie ile znaków można wprowadzić do pola readonly pozwala na określenie czy pole ma być tylko do odczytu readonly="readonly" Programowanie Stron Internetowych 32 Programowanie Stron Internetowych 33 Znacznik input type="text" <form action="zapisz.php" method="post"> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" id="imie" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" id="nazwisko" maxlength="20" /> </div> </form> Znacznik input type="password" Wstawia do formularza pole pozwalające na wprowadzenie jednej linii tekstu, który będzie widoczny jako "*". Może zawierać takie same atrybuty jak pole <input type="text" /> z wyjątkiem atrybutu value. 8

9 Programowanie Stron Internetowych 34 Programowanie Stron Internetowych 35 Znacznik input type="password" <form action="zapisz.php" method="post"> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" maxlength="20" /> </div> <div> <label for="haslo">hasło:</label> <input type="text" name="haslo" size="10" maxlength="20" /> </div> </form> Znacznik input type="checkbox" Wstawia do formularza pole pozwalające na wybranie zero lub więcej z n opcji. Może zawierać następujące atrybuty: value pozwala na rozróżnienie poszczególnych opcji checked pozwala na określenie czy pole ma być domyślnie zaznaczone name pola logicznie ze sobą połączone powinny mieć tę samą nazwę Programowanie Stron Internetowych 36 Programowanie Stron Internetowych 37 Znacznik input type="checkbox" Znacznik input type="radio" <form action="zapisz.php" method="post"> <div> Ulubiony sport:<br /> <input type="checkbox" name="sport" value="koszykówka" /> Koszykówka <input type="checkbox" name="sport" value="paralotnie" /> Paralotnie <input type="checkbox" name="sport" value="snowboard" /> Snowboard </div> </form> Wstawia do formularza pole pozwalające na wybranie jednej i tylko jednej z n opcji. Może zawierać następujące atrybuty: value pozwala na rozróżnienie poszczególnych opcji checked pozwala na określenie czy pole ma być domyślnie zaznaczone name pola logicznie ze sobą połączone powinny mieć tę samą nazwę 9

10 Programowanie Stron Internetowych 38 Programowanie Stron Internetowych 39 Znacznik input type="radio" <form action="zapisz.php" method="post"> <div> Ulubiony sport:<br /> <input type="radio" name="sport" value="koszykówka" /> Koszykówka <input type="radio" name="sport" value="paralotnie" /> Paralotnie <input type="radio" name="sport" value="snowboard" /> Snowboard </div> </form> Znacznik input type="file" Wstawia do formularza pole pozwalające na wybranie pliku i przesłanie go na serwer. Może zawierać następujące atrybuty: size pozwala na określenie ile znaków będzie jednocześnie widocznych w polu accept pozwala na określenie jakie pliki mogą być akceptowane przez pole (Uwaga! należy podać typ MIME) Programowanie Stron Internetowych 40 Programowanie Stron Internetowych 41 Najpopularniejsze typy MIME Rozszerzenie MIME Nazwa *.css text/css Cascading Style Sheets *.csv text/csv Comma Separated Values *.doc application/msword MS Word Document *.gif image/gif Graphic Interchange Format *.htm, *.html text/html HyperText Markup Language *.jpe,*.jpeg,*.jpg image/jpeg JPEG *.js text/javascript, application/javascript JavaScript *.json application/json JavaScript Object Notation *.mp3 audio/mpeg MPEG Audio Stream, Layer III *.mpeg, *.mpg video/mpeg MPEG Video Stream, Layer II *.pdf application/pdf Portable Document Format *.png image/png Portable Network Graphics *.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow *.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation *.rtf application/rtf, text/rtf Rich Text Format *.tif, *.tiff image/tiff Tagged Image Format File *.txt text/plain Plain Text *.xls application/vnd.ms-excel MS Excel Spreadsheet *.zip aplication/zip Compressed Archive Znacznik input type="file" <form action="zapisz.php" method="post" enctype="multipart/form-data"> <div> Wybierz zdjęcie: <input type="file" name="zdjecie" accept="image/jpg,image/gif,image/png"/> </div> </form> 10

11 Programowanie Stron Internetowych 42 Programowanie Stron Internetowych 43 Znacznik input type="file" Znacznik input type="hidden" Wstawia do formularza pole ukryte. Może zawierać następujące atrybuty: value pozwala na określenie wartości przechowywanej w polu. <form action="zapisz.php" method="post"> <input type="hidden" value="12" name="id"/> </form> Programowanie Stron Internetowych 44 Programowanie Stron Internetowych 45 Znacznik textarea Wstawia do formularza pole pozwalające na wprowadzenie tekstu zawierającego wiele linii Może zawierać następujące atrybuty: Znacznik textarea <form action="zapisz.php" method="post"> <div> Podaj treść wiadomości:<br /> <textarea name="tresc" rows="10" cols="40" ></textarea> </div> </form> cols liczba kolumn, które mogą zmieścić się w polu bez przewijania rows liczba wierszy, które mogą zmieścić się w polu bez przewijania 11

12 Programowanie Stron Internetowych 46 Programowanie Stron Internetowych 47 Znacznik select Znacznik select Wstawia do formularza pole pozwalające na wybranie jednej lub wielu opcji z dostępnej listy Może zawierać następujące atrybuty: multiple określa czy możliwy jest wybór jednej czy wielu opcji (multiple="multiple") size liczba opcji widocznych bez przewijania Poszczególne opcje wprowadzamy za pomocą znacznika <option>. Opcje domyślne oznaczamy atrybutem selected="selected". Każdej opcji można przypisać inną wartość atrybutem value Istnieje możliwość grupowania opcji. Realizuje się to przez znacznik <optgroup>, który może przyjmować jeden atrybut label, określający nazwę grupy. Programowanie Stron Internetowych 48 Programowanie Stron Internetowych 49 Znacznik select Znacznik select <form action="zapisz.php" method="post"> <div>wybierz rok:<br /> <select name="rok"> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011" selected="selected">2011</option> </select> </div> </form> <form action="zapisz.php" method="post"> <div>wybierz rok:<br /> <select name="rok" multiple="multiple"> <option value="2009">2009</option> <option value="2010" selected="selected">2010</option> <option value="2011" selected="selected">2011</option> </select> </div> </form> 12

13 Programowanie Stron Internetowych 50 Programowanie Stron Internetowych 51 Przyciski Przyciski Do generowania przycisków można wykorzystać dwa znaczniki: <input> - w tym przypadku atrybut type należy ustawić wartość: submit, reset, button. Atrybut wartość ustawia w tym przypadku tekst na przycisku. <button> - rodzaj przycisku określa atrybut type. Zawartość przycisku podajemy pomiędzy znacznikami otwierającym i zamykającym. <form action="zapisz.php" method="post"> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" maxlength="20" /> </div> <input type="submit" value="zatwierdź" /> <button type="reset">wyczyść</button> </form> Programowanie Stron Internetowych 52 Programowanie Stron Internetowych 53 Grupowanie Grupowanie <form action="zapisz.php" method="post"> <fieldset> <legend>formularz do wypełnienia</legend> <div> <label for="imie">imię:</label> <input type="text" name="imie" size="10" maxlength="20" /> </div> <div> <label for="nazwisko">nazwisko:</label> <input type="text" name="nazwisko" size="10" maxlength="20" /> </div> <input type="submit" value="zatwierdź" /> <button type="reset">wyczyść</button> </fieldset> </form> 13

14 Programowanie Stron Internetowych 55 PODSTAWY CSS Programowanie Stron Internetowych 56 Programowanie Stron Internetowych 57 Podstawowa reguła CSS Łączenie reguł selektor właściwość : wartość; właściwość : wartość; właściwość : wartość; sel1,sel2, właściwość : wartość; właściwość : wartość; właściwość : wartość; h1,h2,h3 color:blue; text-decoration:underline; h1 color:blue; text-decoration:underline; 14

15 Programowanie Stron Internetowych 58 Programowanie Stron Internetowych 59 Selektory Selektory HTML Selektory HTML Klasy ID h1 color:blue; text-decoration:underline; p color:black; text-style:italic; zależne niezależne Programowanie Stron Internetowych 60 Programowanie Stron Internetowych 61 Selektory klasy niezależne.news color:blue; text-decoration:underline; <h1 class="news">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> Selektory klasy zależne h1.news color:blue; text-decoration:underline; p.news color:black; text-style:italic; <h1 class="news">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> 15

16 Programowanie Stron Internetowych 62 Programowanie Stron Internetowych 63 Selektory klasy h1.news color:blue; text-decoration:underline; h1.newsdnia border:1px solid red p.news color:black; text-style:italic; <h1 class="news newsdnia">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> Selektory ID #newssuperwazny color:blue; text-decoration:underline; #news color:black; text-decoration:underline; <h1 id="newssuperwazny">jakiś tytuł 1</h1> <p id="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p> Programowanie Stron Internetowych 64 Programowanie Stron Internetowych 65 Selektory - atrybutów Są dopasowywane do elementów posiadających określone atrybuty lub ich wartości Selektory - atrybutów input[readonly] color:blue; <input type="text" readonly="readonly" /> [atrybut] reguła jest dopasowana, gdy element ma przypisaną wartość dla atrybutu "atrybut" [atrybut=wartość] reguła jest dopasowywana, gdy atrybut "atrybut" ma dokładnie wartość "wartość". [atrybut~=wartość] reguła jest dopasowana, gdy atrybut "atrybut" ma przypisaną listę wartości oddzielonych spacjami, z których jedna jest równa "wartość" [atrybut =wartość] reguła jest dopasowana, gdy atrybut ma wartość "wartość" lub, gdy rozpoczyna się od wartości "wartość" po której występuje znak "-". a[href="http://onet.pl"] color:blue; <a href="http://onet.pl">onet.pl</a> img[alt~="opis"] border:1px solid red; <img alt="jakiś opis" /> 16

17 Programowanie Stron Internetowych 66 Programowanie Stron Internetowych 67 Selektory - kontekst kontekst Strona jako drzewo <html> <head> <title>przykładowa strona internetowa</title> </head> element pochodny dzieci rodzeństwo <body> <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> </body> </html> Programowanie Stron Internetowych 68 Programowanie Stron Internetowych 69 Strona jako drzewo Kontekst element pochodny p span color:orange; p span text-decoration:underline; <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> 17

18 Programowanie Stron Internetowych 70 Programowanie Stron Internetowych 71 Kontekst dzieci Kontekst dzieci p span color:orange; p>span color:red; <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> Programowanie Stron Internetowych 72 Programowanie Stron Internetowych 73 Kontekst rodzeństwo Kontekst rodzeństwo span color:orange; span+span color:red; <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p> 18

19 Programowanie Stron Internetowych 74 Programowanie Stron Internetowych 75 Pseudo-klasy i pseudo-elementy Pseudo-klasy połączeń Pseudo - a:link color:blue; a:visited color:orange; a:hover color:red; a:active color:green; Klasy połączeń Klasy dynamiczne Elementy <a href="http://onet.pl/">onet.pl</a> Programowanie Stron Internetowych 76 Programowanie Stron Internetowych 77 Pseudo-klasy elementów input:hover color:blue; input:active color:orange; input:focus color:red; <input type="text" /> Pseudo-elementy p:first-letter font-size:50px; color:red; float:left; margin-right:10px; p:first-line color:yellow; <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim nulla eget neque pellentesque ut vehicula massa blandit. Donec mattis condimentum pharetra. Donec nec enim sit amet arcu pretium congue eget eu neque. Donec metus enim, dignissim aliquet tempus ac, rhoncus at elit. Vivamus in felis libero, et semper elit. Quisque non orci ut sapien ultrices consectetur non nec arcu. </p> 19

20 Programowanie Stron Internetowych 78 Programowanie Stron Internetowych 79 Pseudo-elementy Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS w tagu HTML w części HEAD w osobnym pliku Programowanie Stron Internetowych 80 Programowanie Stron Internetowych 81 Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS w tagu HTML w części HEAD w osobnym pliku w tagu HTML w części HEAD w osobnym pliku <p style="color:blue;">...</p> <p style="color:blue;">...</p> <head> <style type="text/css"> p color: blue; </style> </head> 20

21 Programowanie Stron Internetowych 82 Programowanie Stron Internetowych 83 Gdzie umieszczać reguły CSS miejsce umieszczenia reguł CSS w tagu HTML w części HEAD w osobnym pliku <link rel="stylesheet" type="text/css" href="/css/style.css" /> all braille embossed handheld print projection screen speech tty tv Programowanie Stron Internetowych 84 Programowanie Stron Internetowych 85 Style alternatywne Style alternatywne <link rel="stylesheet" type="text/css" href="/css/glowny.css" media="all"> <link rel="alternate stylesheet" type="text/css" href="/css/uklad1.css" media="all" title="zestaw1"> <link rel="alternate stylesheet" type="text/css" href="/css/wyglad1.css" media="all" title="zestaw1"> <link rel="alternate stylesheet" type="text/css" href="/css/uklad2.css" media="all" title="zestaw2"> <link rel="alternate stylesheet" type="text/css" href="/css/wzglad2.css" media="all" title="zestaw2"> 21

22 Programowanie Stron Internetowych 86 Programowanie Stron Internetowych 87 Rodzaje wartości akceptowanych przez CSS Rodzaje wartości akceptowanych przez CSS Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL np. bold, center, itp. text-align: center; text-align: "center"; Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL względne em ex px bezwzględne mm cm in pt pc Programowanie Stron Internetowych 88 Programowanie Stron Internetowych 89 Rodzaje wartości akceptowanych przez CSS Rodzaje wartości akceptowanych przez CSS Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL 22

23 Programowanie Stron Internetowych 90 Programowanie Stron Internetowych 91 Rodzaje wartości akceptowanych przez CSS Komentarze Słowa kluczowe Długości i jednostki Procentowe Kolory Liczby Łańcuchy znaków adresy URL notacja heksadecymalna: color: #808000; notacja dziesiętna: color: rgb(128,128,0); słowa kluczowe: olive CSS dopuszcza komentarze w formie: /*... */ Inne formy komentarzy np: //..., <!-- --> nie są akceptowane Programowanie Stron Internetowych 93 Dziedziczenie Dziedziczenie - proces, w którym właściwości są przekazywane z elementu rodzica do elementu pochodnego div.artykul font-size: 12px; KASKADOWOŚĆ CSS <div class="artykul"> <h1>tytuł artykułu</h1> <p>lorem <b>ipsum</b> dolor sit amet,...</p> <a href="/artykul.html">pokaż cały tekst</a> </div> 23

24 Programowanie Stron Internetowych 94 Programowanie Stron Internetowych 95 Dziedziczenie Dziedziczenie - proces, w którym właściwości są przekazywane z elementu rodzica do elementu pochodnego div.artykul font-size: 120%; <div class="artykul"> <h1>tytuł artykułu</h1> <p>lorem <b>ipsum</b> dolor sit amet,...</p> <a href="/artykul.html">pokaż cały tekst</a> </div> Dziedziczenie - inherit Dziedziczenie - proces, w którym właściwości są przekazywane z elementu rodzica do elementu pochodnego div color: black; div a color: inherit; <div class="artykul"> <h1>tytuł artykułu</h1> <p>lorem <b>ipsum</b> dolor sit amet,...</p> <a href="/artykul.html">pokaż cały tekst</a> </div> p background: white inherit left top; Programowanie Stron Internetowych 96 Programowanie Stron Internetowych 97 Kolejność występowania "Ostatnie wystąpienie danej reguły zostanie zastosowane na stronie" Szczegółowość "Im bardziej szczegółowo zostanie określony selektor reguły tym większe prawdopodobieństwo jej zastosowania." div.artykul font-size: 12px; color:red div.artykul font-size: 50px; div.artykul font-size: 12px;.artykul font-size: 50px; 24

25 Programowanie Stron Internetowych 98 Programowanie Stron Internetowych 99 Szczegółowość - algorytm Szczegółowość - algorytm 1. Deklaracja atrybutu style w tagu HTML ma najwyższy stopień szczegółowości. Jeżeli nie ma takich deklaracji przejdź do kroku Oblicz liczbę selektorów ID. Reguła z największą sumą ma najwyższy priorytet. Jeżeli dwie lub więcej reguł posiada taką samą liczbę selektorów ID, przejdź do kroku Oblicz liczbę selektorów klas i pseudo-klas. Reguła z największą sumą ma najwyższy priorytet. Jeżeli dwie lub więcej reguł posiada taką samą liczbę selektorów klas i pseudo-klas przejdź do kroku Oblicz liczbę selektorów HTML i pseudo-elementów. Deklaracja z największą sumą ma najwyższy priorytet. #domowa div.artykul h2.naglowek font-size:12px; #domowa div.artykul h2 font-size:12px; w tagu HTML selektory ID selektory klas selektory HTML Programowanie Stron Internetowych 100 Programowanie Stron Internetowych 101 Szczegółowość -!important "deklaracja!important jest wykorzystywana w celu dodania dodatkowej wagi do reguły CSS." p font-size: 20px!important; color: red; Kaskadowość styli HTML Wysoki!important media kolejność w tagu HTML szczegółowość domyślny styl przeglądarki dziedziczenie Niski.zaznaczenie margin: 10px 10px 10px 10px!important 25

26 Ustawienia czcionek krój czcionki PODSTAWOWE WŁAŚCIWOŚCI CSS font-family font-family:arial,"times new roman",verdana; font-family:serif, sans-serif, monospace, handwritten, fantasy; Ustawienia czcionek krój czcionki Ustawienia czcionek rozmiar czcionki Rdzenne czcionki sieciowe Bezpieczne czcionki sieciowe font-size długość [px/em] % rozmiaru czcionki rodzica smaller larger small x-small xx-small medium large x-large xx-large font-size:12px; font-size:1.2em; font-size:x-large 26

27 Ustawienia czcionek grubość czcionki font-weight normal bold bolder lighter font-weight:bold; Ustawienia czcionek kształt czcionki font-style font-style:italic; normal italic oblique Ustawienia czcionek wariant czcionki Ustawienia czcionek font-variant font-variant:small-caps; font: <font-weight> <font-style> <font-variant> <font-size>/<line-height> <font-family> normal small-caps p font: italic normal 2em/1.5em times,serif; 27

28 Ustawienia czcionek kolor czcionki color Ustawienia tekstu wyrównanie tekstu w poziomie text-align notacja heksadecymalna color: #808000; notacja dziesiętna color: rgb(128,128,0); słowa kluczowe color: olive; left center right justify text-align:left; Ustawienia tekstu wyrównanie tekstu w pionie Ustawienia tekstu wysokość linii vertical-align line-height baseline sub super top text-top middle bottom text-bottom % wysokości linii długość vertical-align:top; normal liczba długość % rozmiaru czcionki line-height:1.2; 28

29 Ustawienia tekstu dekoracja tekstu (dodatkowy styl) Ustawienia tekstu wcięcie pierwszej linii tekstu text-decoration none line-through underline overline blink text-decoration:underline; text-indent długość % szerokości text-indent:12px; Ustawienia tekstu transformacja tekstu Ustawienia tekstu odstęp pomiędzy znakami text-transform lowercase capitalize uppercase none text-transform:lowercase; letter-spacing długość % rozmiaru czcionki letter-spacing:12px; 29

30 Ustawienia tekstu odstęp pomiędzy wyrazami word-spacing normal długość word-spacing:12px; MODEL PUDEŁKOWY Programowanie Stron Internetowych 120 Rodzaje pudełek Elementy blokowe Rodzaje pudełek Elementy blokowe generowane są jeden pod drugim i domyślnie zajmują całą szerokość pudełka "zawierającego" (np. okna przeglądarki). Blokowe Liniowe Typowe elementy blokowe to: h1-h6 p ul, ol, li div 30

31 Programowanie Stron Internetowych 123 Elementy liniowe Elementy liniowe generowane są jeden obok drugiego. Jeżeli element liniowy nie mieści się w szerokości pudełka "zawierającego" jest przenoszony do nowej linii. Ramka (border) Linia zewnętrzna (outline) Typowe elementy liniowe to: b, i, a img span Zawartość Margines (margin) Dopełnienie (padding) Programowanie Stron Internetowych 124 Programowanie Stron Internetowych 125 Model pudełkowy - właściwości Zawartość W3C bottom, clear, display, float, height, left, margin, max-height, max-width, min-hegiht, max-height, outline, overflow, padding, position, right, top, visibility, width, z-index, IE 31

32 Właściwości pudełek w CSS display inline, block, list-item, inline-block, none display:block; Właściwości pudełek w CSS width height max-width min-width max-height min-height height:10px; width:50%; compact, run-in, marker, table-header-group, table-footer-group, table, inline-table, table-caption, table-cell, table-row, table-row-group, table-column, table-column-group długość % szerokości pudełka zawierającego Właściwości pudełek w CSS overflow hidden visible scroll auto Właściwości pudełek w CSS padding długość % szerokości pudełka padding-top padding-right padding-bottom padding-left padding:10px; padding:10px 5px; padding:10px 5px 10px 5px; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; 32

33 Właściwości pudełek w CSS Właściwości pudełek w CSS margin długość % szerokości pudełka zawierającego margin-top margin-right margin-bottom margin-left margin:10px; margin:10px 5px; margin:10px 5px 10px 5px; margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; border-width Długość [px em], thin, medium, thick border-color kolor, transparent border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset Właściwości pudełek w CSS border <border-width> <border-style> <border-color> border-top border-right border-bottom border-left Właściwości pudełek w CSS background-color kolor, transparent background-image url(<adres>), none background-attachment scroll, fixed background-repeat repeat, no-repeat, repeat-x, repeat-y background-position długość, %(szer.+dop.), top, bottom, left, right, center 33

34 Właściwości pudełek w CSS background <background-color> <background-image> <background-repeat> <background-attachment> <background-position> background: yellow url(tlo.jpg) repeat-x fixed 0 left; Łączenie marginesów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> h1 margin:10px 5px 40px 5px; p margin: 50px 5px 10px 5px; </style> </head> <body> <h1>artykuł 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero. </p> </body> </html/> Łączenie marginesów Łączenie marginesów 34

35 Łączenie marginesów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> h1 margin:10px 5px 40px 5px; p margin: 50px 5px 10px 5px; div border-top:1px solid black; </style> </head> <body> <h1>artykuł 1</h1> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero. </p> </div> </body> </html/> Łączenie marginesów <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> div.pojemnik margin:10px;.p11 background-color:yellow; </head> <body> <div class="pojemnik p11"> <div class="pojemnik p12"> <div class="pojemnik p13"> <div class="pojemnik p14"> <div class="pojemnik p15"> Lorem ipsum dolor sit amet,... </div> </div> </div> </div> </div> </body> </html/> Łączenie marginesów 35

36 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> div.pojemnik margin:9px; padding:1px;.p11 background-color:yellow; </head> <body> <div class="pojemnik p11"> <div class="pojemnik p12"> <div class="pojemnik p13"> <div class="pojemnik p14"> <div class="pojemnik p15"> Lorem ipsum dolor sit amet,... </div> </div> </div> </div> </div> </body> </html/> Łączenie marginesów Właściwości pudełek w CSS float left, right, none clear left, right, both, none <body> <div id="pierwszy"> <img src="duffy.png"/> <span>lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero.</span> Aliquam erat volutpat. </div> <div id="drugi"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ante, laoreet porttitor varius ac, tempus vitae libero. Aliquam erat volutpat. Ut ornare, augue sed mollis aliquam, sem tortor semper nisi, quis egestas sem... </div> </body> 36

37 "Pływaki" "Pływaki" <img src="duffy.png" style="float:left"/> "Pływaki" "Pływaki" <div style="clear:both"/> 37

38 Właściwości pudełek w CSS position, top, left, bottom, right position static, relative, absolute, fixed top right bottom left auto, długość, % szerokości pudełka zawierającego position, top, left, bottom, right position, top, left, bottom, right 38

39 position, top, left, bottom, right Właściwości pudełek w CSS z-index auto, liczba z-index z-index https://developer.mozilla.org/en/understanding_css_z-index https://developer.mozilla.org/en/understanding_css_z-index 39

40 Programowanie Stron Internetowych 159 Stworzenie przykładowego układu Stworzenie przykładowego układu Stworzenie przykładowego układu Nagłówek Stworzenie przykładowego układu #naglowekstrony width:800px; height:50px; margin:auto; padding:10px 0px 10px 30px; background-color:rgb(255,250,166); position:relative; Kolumna lewa Kolumna prawa Kolumna lewa Kolumna prawa #naglowekstronylogo font-family:verdana; font-size:30px; Stopka ul position:absolute; right:20px; bottom:-8px; li display : inline; font-size:12px; font-family:verdana; 40

41 Stworzenie przykładowego układu Stworzenie przykładowego układu #zawartoscstrony width:800px; margin:auto; #lewakolumna width:470px; float:left; #prawakolumna width:329px; float:left; Stworzenie przykładowego układu Stworzenie przykładowego układu h2.naglowek font-family:verdana; font-size:18px; div.info font-family:verdana; font-size:11px; font-style:italic; color:rgb(150,150,150); img.fotoartykul float:left; margin:0px 10px 5px 0px; p font-family:verdana; font-size:12px; text-align:justify; padding:10px 30px 10px 10px; 41

42 Stworzenie przykładowego układu Stworzenie przykładowego układu div.zdjecia margin-bottom:10px; h2.zdjecianaglowek font-family:verdana; font-size:16px; div.zdjecie float:left; width:100px; border:1px solid gray; margin-right:5px; margin-bottom:5px; text-align:center; Stworzenie przykładowego układu Stworzenie przykładowego układu div.pusty clear:both; 42

43 Stworzenie przykładowego układu Stworzenie przykładowego układu #stopkastrony width:800px; margin:auto; font-size:10px; font-family:verdana; background-color:rgb(255,250,166); padding:10px 30px; Stworzenie przykładowego układu Mechanizm CSS Sprite 43

44 Mechanizm CSS Sprite Mechanizm CSS Sprite div.przycisk width : 50px; height : 50px; float : left; background image : url (ikony.jpg); margin left : 5px; border: 1px solid rgb (200, 200, 200); #nowy background position : 65px 7px; #zapisz background position : 9px 7px; #pogrubienie background position : 234px 225px; #kursywa background position : 290px 225px; #podkreslenie background position : 345px 225px; Programowanie Stron Internetowych 177 Historia JavaScript PODSTAWY JAVASCRIPT pierwsza połowa lat 90 - Netscape tworzy język LiveScript; 1995r. - pojawia się nazwa JavaScript; marzec 1996 r. - Netscape 2.0 z pierwszą oficjalną wersją języka; sierpień 1996 r. - IE 3.0 z językiem JScript; czerwiec 1997r. - organizacja ECMA (European Computer Manufacturers Association) zaakceptowała dokumentację Netscape i rozpoczeła proces standaryzacji. Wersja języka zgodna ze standardem nazywana jest ECMAScript v.1; czerwiec 1998 r. - poprawiona edycja standardu ECMAScript v.2; grudzień 1999 r. - nowa wersja standardu ECMAScript v.3; ECMAScript v.4 - została zarzucona; ECMAScript v.5 - prace trwają; 44

45 Programowanie Stron Internetowych 178 Programowanie Stron Internetowych 179 Zastosowania JavaScript Czego nie zrobimy w JavaScript? tworzenie rozbudowanego, webowego interfejsu użytkownika; walidacja danych wprowadzonych przez użytkownika; dynamiczne generowanie treści strony oraz obsługa efektów graficznych i animacji; otwieranie i zamykanie okien; komunikacja z obiektami Silverlight, Flash i Java; obsługa komunikacji z serwerem; pobieranie nowych obiektów na stronę internetową, bez konieczności przeładowywania całej strony (AJAX). Manipulować plikami w systemie plików; komunikować się bezpośrednio ze sprzętem; bezpośrednio operować na pamięci; komunikować się poprzez sieć (poza protokołem HTTP); otwierać okna o zbyt małym rozmiarze; ustawiać wartości pola <input type="file"/>; uzyskać dostępu do multimediów bez dodatkowych pluginów. Programowanie Stron Internetowych 180 Programowanie Stron Internetowych 181 Cechy JavaScript 1. Język interpretowany, a nie kompilowany 2. programy JavaScript najczęściej wykonywane są po stronie przeglądarki, aczkolwiek istnieje również możliwość ich stosowania po stronie serwera; a także do automatyzacji pracy w środowisku Windows. 3. Język posiada cechy następujących paradygmatów programowania: imperatywnego obiektowego funkcyjnego 4. jest to język o dynamicznym systemie typów 5. składnia podobna do języków C++, C#, Java Kod JavaScript w dokumencie HTML wewnątrz dokumentu HTML Miejsce umieszczenia kodu JavaScript W osobnym pliku 45

46 Programowanie Stron Internetowych 182 Programowanie Stron Internetowych 183 Kod JavaScript w dokumencie HTML Miejsce umieszczenia kodu JavaScript Kod JavaScript w dokumencie HTML Miejsce umieszczenia kodu JavaScript wewnątrz dokumentu HTML W osobnym pliku wewnątrz dokumentu HTML W osobnym pliku <head> <script type="text/javascript">... </script> </head> <script type="text/javasript" src="skrypty/skrypty.js"> </script> Programowanie Stron Internetowych 184 Programowanie Stron Internetowych 185 Znacznik <script> może wystąpić zarówno w nagłówku, jak i ciele strony; strona może zawierać dowolną liczbę bloków <script></script> skrypty będą wykonywane w kolejności pojawiania się na stronie, przy czym bloki skryptów, które zawarte są w nagłówku strony, będą pobrane (jeśli jest taka konieczność) i wykonane przed wygenerowaniem zawartości strony; generowanie strony zostanie wstrzymane do czasu zakończenia wykonywania skryptów. Podstawy składni JavaScript rozróżniana jest wielkość znaków; instrukcja może być zakończona średnikiem, lub znakiem nowej linii instrukcja1; instrukcja2; instrukcja3 instrukcja4 blok instrukcji musi być zawarty pomiędzy nawiasami klamrowymi ; nazwy zmiennych: mogą zawierać litery, cyfry i znak podkreślenia muszą zaczynać się od litery lub znaku podkreślenia nie mogą być słowami kluczowymi języka JavaScript 46

47 Programowanie Stron Internetowych 186 Programowanie Stron Internetowych 187 Podstawowe typy danych JavaScript typy numeryczne: całkowity, zmiennoprzecinkowy łańcuchy znaków logiczny (boolean): wartości true lub false null - wartość pusta undefined - wartość niezdefiniowana funkcje obiektowy operator typeof Typ wartości można w języku JavaScript sprawdzić za pomocą operatora typeof np: var zmienna = 12; if(typeof zmienna == "number") alert("to jest zmienna typu całkowitego"); var nazwatypu = typeof zmienna; alert(typeof nazwatypu); Programowanie Stron Internetowych 188 Programowanie Stron Internetowych 189 Instrukcje warunkowe i wyboru Instrukcja warunkowa: Wyrażenie warunkowe: Instrukcja wyboru: if(warunek) else (warunek)? wyr_tak : wyr_nie switch(wyrazenie) case wart1 : wyrazenie1; break; case wart2 : wyrazenie2; break; default : wyrazeniedom; Instrukcje interacyjne while do while for while(warunek) do while(warunek) for(inicjacja; warunek; ostatnia_inst) 47

48 Programowanie Stron Internetowych 190 Programowanie Stron Internetowych 191 Tablice Tablice Tworzenie tablicy za pomocą operatora [] var tablica = []; var tablicaliczb = [12,13,14]; var tablicaimion = ["Jan","Adam","Ewa"]; var tablicarozne = [12,"Adam",13.4] ; Tworzenie tablicy za pomocą obiektu Array var tablica1 = new Array(); var tablica2 = new Array(10); var tablica3 = new Array("Jan", 10); Dostęp do elementu tablicy za pomocą operatora [] Tablice są numerowane od 0 tablica[0] = 1; tablica[1] = 4; Tablice wielowymiarowe są tworzone jako tablice tablic: var tablicaww = [[1,2,3],[4,5,6],[7,8,9]]; alert(tablicaww[1][2]); Tablice są przekazywane do funkcji zawsze przez referencję. Programowanie Stron Internetowych 192 Programowanie Stron Internetowych 193 Tablice funkcja IE FF Deklaracja concat Array.concat(wart1, wart2,...) every Array.every(funkcja) filter Array.filter(funkcja) foreach Array.forEach(funkcja) join Array.join(ogranicznik) indexof Array.indexOf(wartość, indeks) lastindex Of Array.lastIndexOf(wartość, indeks) map Array.map(funkcja) pop Array.pop() push Array.push(wartość1, wartość2,...) Tablice funkcja IE FF Deklaracja reverse Array.reverse() shift Array.shift() slice Array.slice(poczatek, koniec) some Array.some(funkcja) sort Array.sort(funkcja) splice Array.splice(poczatek, ile, w1, w2,...) tostring Array.toString() unshift Array.unShift(wartość1, wartość2,...) valueof Array.valueOf() 48

49 Programowanie Stron Internetowych 194 Programowanie Stron Internetowych 195 Funkcje Funkcje można definiować na trzy sposoby: 1. za pomocą słowa kluczowego function function NazwaFunkcji(param1, ) 2. za pomocą wyrażenia funkcyjnego function [nazwa] (param1, ) var dodaj = function(a,b) alert(a+b); Funkcje Funkcje można definiować na trzy sposoby: 3. jako obiekt new Function("param1","param2",,"cialoFunkcji") var funkcja = new Function( "x","a,b","alert(x);" ) ; Programowanie Stron Internetowych 196 Programowanie Stron Internetowych 197 Funkcje - argumenty Do argumentów funkcji można odwołać się za pomocą nazw lub za pomocą automatycznie generowanej tablicy arguments function Dodaj(a,b) alert(a+b) function Dodaj() alert(arguments[0]+arguments[1]) Funkcje - argumenty Umożliwia to tworzenie funkcji o zmiennej liczbie argumentów: function Dodaj() var suma = arguments[0]; for(var i=1; i<arguments.length; i++) suma += arguments[i]; alert(suma); Dodaj(1,2,3); Dodaj(1,2,3,4,5,6); Dodaj("Ala", "ma", "kota"); 49

50 Programowanie Stron Internetowych 198 Programowanie Stron Internetowych 199 Funkcje - argumenty Przeciążanie funkcji: function Komunikat(tresc, oknoid) if(arguments.length == 1) alert(tresc); else var okno = document.getelementbyid(oknoid); okno.innertext = tresc; Funkcje - wartość zwracana Rezultat działania funkcji zwraca się za pomocą słowa kluczowego return function Parzysta(liczba) return (liczba%2 == 0)? true : false; Programowanie Stron Internetowych 200 Programowanie Stron Internetowych 201 Funkcje jako wartości pierwszej klasy W Scheme możliwe było: (define Funkcja (lambda (x y) (x y))) (Funkcja (lambda (s) (+ s 3)) 3) Podobny efekt można uzyskać w JavaScript: var Funkcja = function(x, y) return x(y); Funkcja (function (s) return s+3;, 3); Funkcje jako wartości pierwszej klasy function map(tablica, funkcja) for(var i=0; i < tablica.length; i++) funkcja(tablica[i], i); function pokaz(element, indeks) alert(element+" "+indeks); var tablica = [1,2,3,4,5]; map(tablica, pokaz); map(tablica, function(x) alert(x);) ; 50

51 Programowanie Stron Internetowych 202 Programowanie Stron Internetowych 203 Funkcje jako wartości pierwszej klasy function funkcjazewnetrzna() function funkcjawewnetrzna() alert("to jest funkcja wewnętrzna"); alert("to jest funkcja zewnętrzna"); funkcjawewnetrzna(); funkcjazewnetrzna(); funkcjawewnetrzna(); W tym przypadku dostaniemy błąd: "funkcjawewnetrzna is not defined" w linii 12 Domknięcia var zmiennaglobalna = 1; function jakasfunkcja(parametr) var zmiennalokalna = 2; var funkcja = function() alert("jestem");; return function (parametrwewnetrzny) var zmiennalokalnawewnetrzna = 3; funkcja(); return zmiennaglobalna + zmiennalokalna + zmiennalokalnawewnetrzna + parametr + parametrwewnetrzny; var funkcjawynikowa = jakasfunkcja(4); alert(funkcjawynikowa(5)); //"jestem" 15 Programowanie Stron Internetowych 204 Programowanie Stron Internetowych 205 Deklarowanie zmiennych Jako język o dynamicznym systemie typów, zmienne w JavaScript nie posiadają typu przypisanego na stałe. Można je zdefiniować na dwa sposoby: za pomocą słowa kluczowego var bez słowa kluczowego var Zmienne lokalne function Test() var zmienna1 = true; if(zmienna1) var zmienna2 = "ta zmienna " + "będzie widziana poza blokiem"; alert(zmienna2); 51

52 Programowanie Stron Internetowych 208 Obiekty w JavaScript OBIEKTOWA JAVASCRIPT Właściwość 1 : wartość 1 Właściwość 2 : wartość 2 Właściwość 3 : wartość 3 Właściwość 4 : wartość 4 Właściwość n : wartość n proto : null/obiekt Tworzenie obiektów w JavaScript Metoda literalna (notacja JSON) Tworzenie obiektów w JavaScript Za pomocą funkcji i operatora new var trojkat = wysokosc : 12, dlugoscpodstawy : 10, obliczpole : function() return 0.5*this.wysokosc *this.dlugoscpodstawy;, ustawienia : kolortla : "czerwony", kolorramki : "niebieski" ; function Adres() this.nazwa = "Katedra Inżynierii Komputerowej"; this.ulica = "Armii Krajowej"; this.numer = 36; this.pokazadres = function () alert(this.nazwa); var AdresKIK = new Adres(); AdresKIK.pokazAdres(); 52

53 Tworzenie obiektów w JavaScript Za pomocą funkcji i operatora new Tworzenie obiektów w JavaScript Za pomocą obiektu zdefiniowanego przez funkcję function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica; this.numer = numer; this.pokazadres = function () alert(this.nazwa); var AdresKIK = new Adres("KIK","Armii Krajowej",36); AdresKIK.pokazAdres(); function Adres(nazwa, ulica, numer) var obiekt = new Object(); obiekt.nazwa = nazwa; obiekt.ulica = ulica; obiekt.numer = numer; obiekt.pokazadres = function() alert(obiekt.nazwa); return obiekt; var adreskik = Adres("KIK","Armii Krajowej",36); adreskik.pokazadres(); Programowanie Stron Internetowych 214 Programowanie Stron Internetowych 215 Dostęp do właściwości W języku JavaScript do właściwości i metod obiektów można odwoływać się w dwojaki sposób: za pomocą notacji z kropką za pomocą notacji z nawiasami kwadratowymi trojkat.wysokosc = 4; trojkat["dlugoscpodstawy"] = 5; var pole = trojkat.obliczpole(); var pole = trojkat["obliczpole"](); trojkat["ustawienia"].kolortla = "zielony"; Nazwy właściwości obiektów W przeciwieństwie do innych języków programowania nazwy właściwości nie muszą przestrzegać konwencji nazewnictwa zmiennych var trojkat = "wysokosc trojkata"= 12, dlugoscpodstawy = 11; " = 10 "1obliczPole" = function() return 0.5 this["wysokosc trojkata"] this.dlugoscpodstawy ; Nazwę właściwości należy ująć w cudzysłów, gdy: jest to słowo zarezerwowane w języku JavaScript zawiera spacje lub znaki specjalne, rozpoczyna się od cyfry 53

54 Programowanie Stron Internetowych 216 Programowanie Stron Internetowych 217 Dodawanie właściwości i metod Właściwości i metody można dodawać do obiektu w dowolnym momencie Usuwanie właściwości i metod Właściwości i metody można usuwać z obiektu w dowolnym momencie za pomocą operatora delete var trojkat = ; trojkat.wysokosc = 12; trojkat.dlugoscpodstawy = 10; trojkat.obliczpole = function() return 0.5 this.wysokosc this.dlugoscpodstawy; var trojkat = ; trojkat.wysokosc = 12; trojkat.pokaz = function () alert ( this.wysokosc ); ; trojkat.pokaz(); //12 delete trojkat.wysokosc; trojkat.pokaz(); //"undefined" delete trojkat.pokaz; trojkat.pokaz(); //obiekt.pokaz is not a function Programowanie Stron Internetowych 218 Programowanie Stron Internetowych 219 Słowo kluczowe this Służy do odwoływania się do obecnej instancji obiektu function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer; this.pokazdane = function() alert( this.nazwa ); var adreskik = new Adres("KIK", "Armii Krajowej", 36); adreskik.pokazdane(); Słowo kluczowe this function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer;... var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adreskik = Adres("KIK", "Armii Krajowej", 36); adreskik.pokazdane(); Jeżeli wywołamy "funkcję tworzącą" obiekt bez słowa kluczowego new, wtedy this odnosi się do obiektu globalnego window. 54

55 Programowanie Stron Internetowych 220 Programowanie Stron Internetowych 222 Właściwości i metody prywatne Właściwości i metody prywatne w JavaScript można symulować przy wykorzystaniu closures. function Adres(nazwa, ulica, numer) var zmiennaprywatna = 12; this.nazwa = nazwa;... this.pokazdane = function () alert(zmiennaprywatna); alert(this.nazwa); var adreskik = new Adres("KIK", "Armii Krajowej", 36); adreskik.pokazdane(); alert(adreskik.zmiennaprywatna); //undefined Listowanie właściwości W JavaScript jest możliwość przejścia po wszystkich właściwościach obiektu za pomocą specjalnej postaci funkcji for for(var klucz in obiekt) alert(klucz); Nie wszystkie właściwości da się przejrzeć w ten sposób Programowanie Stron Internetowych 223 Programowanie Stron Internetowych 224 Metoda hasownproperty Właściwość constructor Każdy obiekt w JavaScript ma dostęp do właściwości constructor, która wskazuje na funkcję tworzącą tego obiektu Metoda hasownproperty pozwala sprawdzić, czy dana właściwość pochodzi bezpośrednio z obiektu, czy też z jednego z obiektów znajdujących się w łańcuchu obiektów var adreskik = new Adres("KIK", "Armii Krajowej", 36); alert(adreskik.constructor); var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adresicis = new adreskik.constructor( "ICIS", "Dąbrowskiego", 73); adresicis.pokazdane(); 55

56 Programowanie Stron Internetowych 225 Programowanie Stron Internetowych 226 Właściwość prototype Właściwość prototype function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer; this.miasto = "Częstochowa "; this.pokazdane = function() alert ( this.nazwa ); var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adresicis = new Adres("ICIS", "Dąbrowskiego", 73); adreskik.pokazdane(); adresicis.pokazdane(); :adreskik nazwa ulica numer miasto pokazdane :adresicis nazwa ulica numer miasto pokazdane Programowanie Stron Internetowych 227 Programowanie Stron Internetowych 228 Właściwość prototype Właściwość prototype Właściwości i metody mogą być dodawane również do specjalnej właściwości "funkcji tworzącej" prototype function Adres(nazwa, ulica, numer) this.nazwa = nazwa; this.ulica = ulica ; this.numer = numer; Adres.prototype.pokazDane = function() alert (this.nazwa); Adres.prototype.miasto = "Częstochowa"; 56

57 Programowanie Stron Internetowych 229 Programowanie Stron Internetowych 230 Właściwość prototype Właściwość prototype var adreskik = new Adres("KIK", "Armii Krajowej", 36); var adresicis = new Adres("ICIS", "Dąbrowskiego", 73); alert(adreskik.miasto); alert(adresicis.miasto); adreskik.pokazdane(); alert(adreskik.miasto); alert(adresicis.miasto); adreskik.pokazdane(); :adreskik nazwa ulica numer :adresicis nazwa ulica numer :Adres prototype :obiekt miasto pokazdane alert(alertkik.constructor.prototype.miasto); adreskik.constructor.prototype.pokazdane(); Programowanie Stron Internetowych 231 Programowanie Stron Internetowych 232 Właściwość proto Właściwość constructor alert(adreskik.hasownproperty("constructor")); //false :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :obiekt miasto pokazdane alert(adres.prototype.hasownproperty("constructor")); //true :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :obiekt miasto pokazdane constructor 57

58 Programowanie Stron Internetowych 233 Programowanie Stron Internetowych 234 Właściwość hasownproperty alert(adreskik.hasownproperty("constructor")); //false alert(adres.prototype.hasownproperty("constructor")); //true Właściwość proto var adreskik = new Adres("KIK", "Armii Krajowej", 36); Adres.prototype = new String("ALA"); var adresicis = new Adres("ICIS","Dąbrowskiego",73); :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :obiekt miasto pokazdane constructor proto Object hasownproperty :adreskik nazwa ulica numer proto :adresicis nazwa ulica numer proto :Adres prototype :String( Ala ) constructor :obiekt miasto pokazdane constructor proto :String Object hasownproperty Programowanie Stron Internetowych 235 Programowanie Stron Internetowych 236 Dziedziczenie Dziedziczenie :STransportu proto :Samochod proto :Hatchback proto :Toyota proto function SrodekTransportu() this.predkosc_maksymalna = 100; this.paliwo = "benzyna"; this.uruchom = function () alert("działam");; function Samochod() this.liczbakol = 4; this.pojemnoscsilnika = 1.6; function Hatchback() this.liczbadrzwi = 3; this.pokazliczbedrzwi = function() alert("liczbadrzwi : " + pokazliczbadrzwi);; 58

59 Programowanie Stron Internetowych 237 Programowanie Stron Internetowych 238 Dziedziczenie Dziedziczenie var st = new STransportu(); var s = new Samochod(); var h = new Hatchback(); Samochod.prototype = new STransportu(); Hatchback.prototype = new Samochod(); :st proto :Object constructor :STransportu prototype Toyota.prototype = new Hatchback(); :s proto :Object constructor :Samochod prototype :h proto :Object constructor :Hatchback prototype Programowanie Stron Internetowych 239 Programowanie Stron Internetowych 240 Dziedziczenie :tmp proto :s proto :Object var tmp = new Stransportu(); Samochod.prototype = tmp; var s = new Samochod(); constructor :Object constructor :STransportu prototype :Samochod prototype Dziedziczenie :tmp proto constructor :s proto var tmp = new Stransportu(); Samochod.prototype = tmp; Samochod.prototype.constructor = Samochod; var s = new Samochod(); :Object constructor :Object constructor :STransportu prototype :Samochod prototype 59

60 Programowanie Stron Internetowych 241 Właściwości i metody statyczne function Adres(nazwa, ulica, numer) this.nazwa = nazwa;... this.pokazdane = function() alert(this.constructor.zmstatyczna); alert(this.nazwa) ; OBIEKTOWY MODEL STRONY INTERNETOWEJ Adres.zmStatyczna = "jakaś wartość"; Programowanie Stron Internetowych 243 Programowanie Stron Internetowych 244 Model DOM Model DOM DOM (ang. Document Object Model) Model umożliwiający obiektowy opis strony internetowej oraz podstawowe API pozwalające na wykonywanie operacji na strukturze dokumentu W modelu tym strona przedstawiana jest w postaci drzewa, gdzie: Węzłami wewnętrznymi, są zawsze tagi HTML Liśćmi drzewa są tagi HTML, lub elementy tekstowe <html> <head> <title>przyklad</title> <style> h color:red </style> </head> <body> <h1>naglowek</h1> <p>jakis tekst <span>cos</span> <a href="adres"> link </a> </p> </body> </html> title head document style h1 body span p a 60

61 Programowanie Stron Internetowych 245 Programowanie Stron Internetowych 246 Model DOM Model DOM document Atrybuty elementów HTML są również traktowane jako węzły drzewa title head style h1 body p class text text text span a h1 text text text id Programowanie Stron Internetowych 247 Programowanie Stron Internetowych 248 Model DOM wybieranie elementów Do węzłów drzewa DOM można dostać się za pomocą dwóch funkcji: Model DOM wybieranie elementów Każdy węzeł drzewa DOM zawiera dodatkowo zestaw właściwości umożliwiających poruszanie się po drzewie document.getelementbyid(identyfikator) document.getelementbytagname(nazwatagu) Dostęp do elementów drzewa DOM jest możliwy dopiero po całkowitym załadowaniu się dokumentu!!! firstchild lastchild childnodes[] parentnode nextsibling previoussibling title head style document h1 body p p span a img 61

62 Programowanie Stron Internetowych 249 Programowanie Stron Internetowych 250 Model DOM - węzeł Każdy węzeł posiada m. in następujące właściwości i metody Właściwości Metody attributes[] appendchild classname clonechild id createtextnode innerhtml hasattribute / hasattributes nodename getattribute / getattributes nodetype haschildnodes nodevalue insertafter / insertbefore style removeattribute removechild replacechild Model DOM właściwość nodetype Wartość Stała 1 ELEMENT_NODE 2 ATTRIBUTE_NODE 3 TEXT_NODE 4 CDATA_SECTION_NODE 5 ENTITY_REFERENCE_NODE 6 ENTITY_NODE 7 PROCESSING_INSTRUCTION_NODE 8 COMMENT_NODE 9 DOCUMENT_NODE 10 DOCUMENT_TYPE_NODE 11 DOCUMENT_FRAGMENT_NODE 12 NOTATION_NODE Programowanie Stron Internetowych 251 Programowanie Stron Internetowych 252 Model DOM właściwość nodetype <div id="jakisdiv"><b>bla, bla, bla</b></div> <script type="text/javascript"> alert(document.getelementbyid("jakisdiv").nodetype) alert(document.getelementbyid("jakisdiv").firstchild.nodetype) </script> Model DOM właściwość nodetype <div id="jakisdiv"> <b>bla, bla, bla</b></div> <script type="text/javascript"> alert(document.getelementbyid("jakisdiv").nodetype) alert(document.getelementbyid("jakisdiv").firstchild.nodetype) </script> Internet Explorer: Mozilla Firefox / Chrome: Internet Explorer: Mozilla Firefox / Chrome:

63 Programowanie Stron Internetowych 253 Programowanie Stron Internetowych 254 Model DOM - przykład function pobierzelementwgklasy(class) if(document.all) var elementy = document.all; else var elementy = document.getelementsbytagname(" "); var elementyzklasa = new Array(); var wzor = new RegExp("(^ )" + class + "( $)"); for(var i=0; i<elementy.length; i++) if(wzor.test(elementy[i].classname)) elementyzklasa.push(elementy[i]); return elementyzklasa; Modyfikowanie wyglądu elementu Każdy węzeł drzewa DOM, który odpowiada elementowi HTML, posiada atrybut style, za pomocą którego, można dostać się do właściwości CSS przypisanych do tego elementu: var element = document.getelementbyid("naglowek"); element.style.color = "orange"; element.style.fontfamily = "verdana, arial" Programowanie Stron Internetowych 255 Programowanie Stron Internetowych 256 Zmiana klasy function SprawdzKlase(element, klasa) var wzor = new RegExp("(^ )" + klasa + "( $)"); return wzor.test(element.classname); function DodajKlase(element, klasa) if(!sprawdzklase(element, klasa)) if(element.classname == "") element.classname = klasa; else element.classname += " " + klasa; function UsunKlase (elem, klasa) var wzor = new RegExp("(^ )" + klasa + "( $)"); elem.classname = elem.classname.replace(wzor, "$1"); elem.classname = elem.classname.replace(/ $/, ""); Zdarzenia Zdarzenie - umożliwia obiektowi powiadomić inne obiekty o zmianie swego stanu. Procedura obsługi zdarzenia - funkcja, której kod ma się wykonać w momencie wystąpienia danego zdarzenia. Akcja domyślna - działanie, które przeglądarka normalnie wykonuje, w momencie wystąpienia danego zdarzenia. Akcje domyślne przypisane są do takich zdarzeń, jak: naciśnięcie linku przez użytkownika zatwierdzenie formularza przeniesienie "focus" do następnego elementu, gdy użytkownik naciśnie klawisz TAB. 63

64 Programowanie Stron Internetowych 257 Programowanie Stron Internetowych 258 Przypisanie procedury do zdarzenia Procedurę obsługi zdarzenia można przypisać do elementu, bezpośrednio w kodzie HTML: <script type="text/javascript"> function linkonclick() alert("komunikat"); </script> <a id="link" click="linkonclick" href="inna_strona.html">link</a> Przypisanie procedury obsługi zdarzenia element.onzdarzenie = proceduraobslugizdarzenia Przykład: function linkonclick() alert("komunikat"); var link = document.getelementbyid("link"); link.onclick = linkonclick; <a id="link" click="alert( komunikat );" href="inna_strona.html">link</a> Uwaga! Procedury obsługi zdarzeń mogą być przypisane do elementów dopiero, gdy strona zostanie całkowicie załadowana. Programowanie Stron Internetowych 259 Programowanie Stron Internetowych 260 Słowo kluczowe this Do właściwości i metod obiektu, który wywołał dane zdarzenie, można dostać się za pomocą słowa kluczowego this. function onclick() alert(this.firstchild.nodevalue); return false; function Poczatek () var element1 = document.getelementbyid("link1"); var element2 = document.getelementbyid("link2"); element1.onclick = onclick; element2.onclick = onclick; window.onload = Poczatek; <a href="http://onet.pl" id="link1">link do onet.pl</a> <a href="http://wp.pl" id="link2">link do wp.pl</a> Ograniczenia uchwytów zdarzeń Z tradycyjnym modelem obsługi zdarzeń w JavaScript wiąże się kilka problemów: brak możliwości przypisania więcej niż jednej funkcji do danego zdarzenia. w sytuacji, gdy użytkownik kliknie na link w stronie: function kliknieciediv() alert("kliknieciediv"); function kliknieciea() alert("kliknieciea") ; <div onclick="kliknieciediv() "> <a href="strona.html" onclick=" kliknieciea()">link</a> </div> 64

65 Programowanie Stron Internetowych 261 Programowanie Stron Internetowych 262 Event Listeners Za pomocą tzw. "Event listeners" można, do pojedynczego elementu, przypisać wiele procedur obsługi zdarzeń. Model W3C element.addeventlistener("zdarzenie", procobslugi, przechwytuj) Model Internet Explorer element.attachevent("onzdarzenie", procobslugi); Event Listeners rozwiązanie uniwersalne if(typeof element.addeventlistener!= "undefined") element.addeventlistener("zdarzenie", procobslugi, false); else if(typeof event.attachevent!= "undefined") element.attachevent("onzdarznie", procobslugi); else alert("przeglądarka nie obsługuje Event Listeners"); Programowanie Stron Internetowych 263 Programowanie Stron Internetowych 264 Event Listeners odłączenie procedur Model W3C element.removeeventlistener("zdarzenie", procobslugi, przechwytuj) Model Internet Explorer element.detachevent("onzdarzenie", procobslugi); Obiekt event Obiekt event umożliwia dostęp do dodatkowych informacji dotyczących się danego zdarzenia. Model W3C function onzdarzenie(event) Model Internet Explorer function onzdarzenie() window.event; Rozwiązanie wspólne function onzdarzenie ( event ) if(typeof event == "undefined") event = window.event; 65

66 Programowanie Stron Internetowych 265 Programowanie Stron Internetowych 266 Obiekt event metody i właściwości Internet Explorer Obiekt event metody i właściwości Mozilla Firefox Właściwości altkey, ctrlkey, shiftkey button* cancelbubble clientx, clienty keycode returnvalue srcelement type Metody Właściwości altkey, ctrlkey, shiftkey Bubbles button* cancelable charcode clientx, clienty keycode eventphase target Metody preventdefault() stoppropagation() *(1=lewy, 4=środkowy, 2=prawy) type *(0=lewy, 1=środkowy, 2=prawy) Programowanie Stron Internetowych 267 Programowanie Stron Internetowych 268 Blokowanie zdarzeń domyślnych Najprostszą metodą aby zablokować przeglądarce możliwość wykonywania akcji domyślnej jest zwrócenie z przypisanej procedury wartość false function linkonclick() if(confirm("czy chcesz opuścić tę stronę?")) return true; else return false; var link = document.getelementbyid("link"); link.onclick = linkonclick; Blokowanie zdarzeń domyślnych Model W3C klikniecie : function(event) if(!confirm("...?")) event.preventdefault(); Model Internet Explorer klikniecie : function() if(!confirm("...?")) event.returnvalue = false; 66

67 Programowanie Stron Internetowych 269 Programowanie Stron Internetowych 270 Propagowanie zdarzeń Propagowanie zdarzeń Propagowanie zdarzeń polega na przekazywaniu zdarzeń poprzez elementy drzewa DOM. Proces ten składa się z trzech faz: fazy przechwytywania ("capture phase") fazy wywoływania zdarzenia ("target phase") fazy powrotu ("bubbling phase") function kliknieciep() alert("kliknieciep"); function kliknieciea() alert("kliknieciea"); <p onclick="kliknieciep()"> <a href="strona.html" onclick="kliknieciea()">link</a> </p> Programowanie Stron Internetowych 271 Programowanie Stron Internetowych 272 Propagowanie zdarzeń document html Propagowanie zdarzeń Model Netscape przechwytywanie document title head style h1 body p head html body zdarzenie przechwytujące span a title style h1 p zdarzenie span a 67

68 Programowanie Stron Internetowych 273 Programowanie Stron Internetowych 274 Propagowanie zdarzeń Model Internet Explorer bąbelkowanie Propagowanie zdarzeń Model W3C document document head html body zdarzenie powracające head html body title style h1 p title style h1 p span a span a zdarzenie zdarzenie Programowanie Stron Internetowych 276 Asynchronous JavaScript + XML AJAX pozwala na tworzenie aplikacji internetowych w taki sposób aby odczucia użytkownika były jak najbardziej zbliżone do aplikacji desktopowych. AJAX W skład AJAX wchodzą: Standardowa reprezentacja internetowa HTML + CSS Document Object Model XML JavaScript XMLHttpRequest 68

69 Programowanie Stron Internetowych 277 Programowanie Stron Internetowych 278 Przykłady aplikacji AJAX Przykłady aplikacji AJAX Programowanie Stron Internetowych 279 Programowanie Stron Internetowych 280 Klasyczny model aplikacji webowej KLIENT Interfejs Interakcja synchroniczna KLIENT aktywność użytkownika aktywność użytkownika aktywność użytkownika żądanie HTTP HTML + CSS Serwer HTTP CZAS Systemy dodatkowe przetwarzanie przetwarzanie SERWER SERWER 69

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 3 Formularze Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML

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

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie

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

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

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

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

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 5 Podstawy JavaScript Agenda Czym jest JavaScript? Podstawowe typy danych Zmienne Tablice Funkcje Zakres

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

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

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

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

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

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

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

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

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

TECHNOLOGIE SIECI WEB

TECHNOLOGIE SIECI WEB 1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr

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

Asynchroniczne interfejsy WWW

Asynchroniczne interfejsy WWW Asynchroniczne interfejsy WWW Wprowadzenie do tworzenia aplikacji webowych, dokumentów HTML5 oraz CSS mgr inż. Rafał Grycuk mgr inż. Patryk Najgebauer Strona służbowa: http://iisi.pcz.pl/~rgrycuk/ Kontakt:

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

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

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

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

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

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

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

Języki programowania wysokiego poziomu CSS

Języki programowania wysokiego poziomu CSS Języki programowania wysokiego poziomu CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets) to język służący do formatowania dokumentów WWW, utworzonych w językach HTML oraz XHTML. CSS stworzono

Bardziej szczegółowo

Arkusze stylów CSS Cascading Style Sheets

Arkusze stylów CSS Cascading Style Sheets Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

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

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

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

Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.

Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r. Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.

Bardziej szczegółowo

Bezbolesny wstęp do CSS

Bezbolesny wstęp do CSS CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i

Bardziej szczegółowo

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail. 1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

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

Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia

Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach dr Beata Kuźmińska-Sołśnia CSS Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) specjalny język opracowany tylko

Bardziej szczegółowo

Technologie internetowe

Technologie internetowe Technologie internetowe Cascading Style Sheets Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Zawartość modułu Wprowadzenie Wstawienie arkusza CSS, Reguły CSS Drzewo dokumentu Grupowanie, jednostki

Bardziej szczegółowo

HTML5 i CSS. Deklaracja musi być na początki dokumentu napisanego w HTML5 przed tagiem .

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

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

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript. Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania

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

PROJEKTOWANIE STRON WWW

PROJEKTOWANIE STRON WWW PROJEKTOWANIE STRON WWW Wykład 1 Paweł Woszkowski SWSIM, 2010 PLAN ZAJĘĆ technologie, proces powstawania strony www, podstawowe zasady, xhtml, css, projektowanie, publikacja, hosting, promocja. STRONA

Bardziej szczegółowo

Aplikacje internetowe

Aplikacje internetowe Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

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

Technologie Informacyjne

Technologie Informacyjne Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje

Bardziej szczegółowo

XML extensible Markup Language. część 5

XML extensible Markup Language. część 5 XML extensible Markup Language część 5 JavaScript Co to jest JavaScript? JavaScript był zaprojektowany w celu dodania interaktywności do stron HTML JavaScript jest językiem skryptowym JavaScript jest zwykle

Bardziej szczegółowo

Informatyka MPDI 3 semestr

Informatyka MPDI 3 semestr Informatyka MPDI 3 semestr Wykład 2 CSS JavaScript CSS arkusze stylów opiera się na zasadzie określania cech elementy dzięki atrybutowi style ... Styl może mieć wiele cech,

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

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

Tworzenie Stron Internetowych. odcinek 10

Tworzenie Stron Internetowych. odcinek 10 Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,

Bardziej szczegółowo

2. Prezentacja wizualna

2. Prezentacja wizualna 2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia

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

I. Wstawianie rysunków

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

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

Dokumentacja Skryptu Mapy ver.1.1

Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja Skryptu Mapy ver.1.1 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7 3 Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja skryptu

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

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

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

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów... Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...

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

Ć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

Ź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

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

Szablony. Wersja 7.6

Szablony. Wersja 7.6 Szablony Wersja 7.6 Spis treści 1 WSTĘP... 3 1.1 PRZYKŁADY ZASTOSOWANIA SZABLONÓW:... 4 1.2 PRZYCISKI FUNKCYJNE... 6 2 SZABLONY... 7 2.1 KONFIGURACJA... 8 2.2 PLUGINY... 9 2.2.1 EDYCJA PLUGINU... 10 2.2.2

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 7

Tworzenie Stron Internetowych. odcinek 7 Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie

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

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się

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

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

Języki skryptowe w programie Plans

Języki skryptowe w programie Plans Języki skryptowe w programie Plans Warsztaty uŝytkowników programu PLANS Kościelisko 2010 Zalety skryptów Automatyzacja powtarzających się czynności Rozszerzenie moŝliwości programu Budowa własnych algorytmów

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

Kaskadowe arkusze stylów

Kaskadowe arkusze stylów CSS Kaskadowe arkusze stylów Gabriela Przęczek Co to jest CSS?. Skrót pochodzi z angielskiego Cascading Style Sheets Kaskadowe arkusz stylu to narzędzie dające szerokie możliwości formatowania dokumentów

Bardziej szczegółowo

Prezentacja dokumentów XML

Prezentacja dokumentów XML Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Arkusze stylu Rozdzielenie treści od wygladu Przypisanie stylu do dokumentu CSS

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

Załącznik nr 2 do uchwały Nr XXII/ 141 /2013 Rady Gminy Bojszowy z dnia 13.03.2013r.

Załącznik nr 2 do uchwały Nr XXII/ 141 /2013 Rady Gminy Bojszowy z dnia 13.03.2013r. <?xml version=1.0 encoding=utf-8?> Załącznik nr 2 do uchwały Nr XXII/ 141 /2013 Rady Gminy Bojszowy z dnia 13.03.2013r.

Bardziej szczegółowo

Prezentacja dokumentów XML

Prezentacja dokumentów XML Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Patryk Czarnik (MIMUW) 06 Prezentacja XML 2007/08 1 / 33 Plan 1 Arkusze stylu

Bardziej szczegółowo

CSS. Kaskadowe arkusze stylów CSS

CSS. Kaskadowe arkusze stylów CSS CSS Kaskadowe arkusze stylów CSS 1 CSS CSS (Cascading Style Sheet) język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. Język HTML odpowiada

Bardziej szczegółowo

Rys.2.1. Drzewo modelu DOM [1]

Rys.2.1. Drzewo modelu DOM [1] 1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model

Bardziej szczegółowo

Wprowadzenie do Internetu zajęcia 4

Wprowadzenie do Internetu zajęcia 4 Wprowadzenie do Internetu zajęcia 4 Zakres tematyczny zajęć Rozmieszczanie elementów za pomocą CSS; JavaScript wprowadzenie, zagadnienia podstawowe; Wykorzystanie JavaScript-u do kontroli formularzy. Rozmieszczanie

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

Krótki kurs JavaScript

Krótki kurs JavaScript Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania

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

Bazy Danych i Usługi Sieciowe

Bazy Danych i Usługi Sieciowe Bazy Danych i Usługi Sieciowe Język PHP Paweł Witkowski Wydział Matematyki, Informatyki i Mechaniki Jesień 2011 P. Witkowski (Wydział Matematyki, Informatyki i Mechaniki) BDiUS w. VIII Jesień 2011 1 /

Bardziej szczegółowo

efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11

efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11 efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11 Syriusz sp. z o.o. Rzeszów 2012 EFAKTURA INSTRUKCJA INTEGRACJI KOMPONENTÓW WEBOWYCH str. 2 Spis treści 1. Informacje ogólne...3

Bardziej szczegółowo

Informacje wstępne: Dodatki, które warto doinstalować do przeglądarki:

Informacje wstępne: Dodatki, które warto doinstalować do przeglądarki: Podstawy stylów CSS, komentarze do stylów, zalety... 2 Dołączanie stylów do dokumentów... 3 Budowa stylu i rodzaje selektorów... 4 Dziedziczenie stylów... 5 Selektory specjalne: identyfikatory, klasy...

Bardziej szczegółowo

Wykład 2_1 TINT. Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki. Zofia Kruczkiewicz

Wykład 2_1 TINT. Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki. Zofia Kruczkiewicz Wykład 2_1 TINT Kaskadowe arkusze stylu Wprowadzenie, formatowanie tekstu, czcionki Zofia Kruczkiewicz 1. Wprowdzenie Kaskadowe arkusze stylów CSS element dynamiczny języka HTML (DHTML) Kaskadowe arkusze

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Programowanie w Internecie

Programowanie w Internecie Programowanie w Internecie Paweł Kasprowski pawel@kasprowski.pl Aplikacja internetowa Definicja: Aplikacja uruchamiana na serwerze WWW komunikująca się z użytkownikiem za pomocą przeglądarki internetowej

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

Informatyka 2MPDI. Wykład 4

Informatyka 2MPDI. Wykład 4 Informatyka 2MPDI Wykład 4 Strony WWW (World Wide Web) Mosaic pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari Chrome(Google) HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy

Bardziej szczegółowo