Programowanie w Internecie

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Programowanie w Internecie"

Jan Maj
9 lat temu
Przeglądów:

1 Programowanie w Internecie Paweł Kasprowski pawel@kasprowski.pl

2 Aplikacja internetowa Definicja: Aplikacja uruchamiana na serwerze WWW komunikująca się z użytkownikiem za pomocą przeglądarki internetowej

3 Zalety aplikacji internetowej brak konieczności instalacji dodatkowego oprogramowania na komputerach klientów a co za tym idzie mniejsze wymagania co do jakości tych komputerów łatwość aktualizacji aplikacji w przypadku zmiany wersji nie trzeba aktualizować plików na każdym komputerze a wystarczy aktualizacja na serwerze potencjalna możliwość zdalnego korzystania z aplikacji

łatwość aktualizacji aplikacji w przypadku zmiany wersji nie trzeba aktualizować plików na

4 Wady aplikacji internetowej uboższy interfejs użytkownika (nie wszystko da się zrobić w przeglądarce) większy nakład pracy projektowej, a co za tym idzie nieco większy koszt wykonania większe obciążenie serwera (kosztem mniejszego obciążenia komputerów użytkowników)

projektowej, a co za tym idzie nieco większy koszt wykonania

5 Plan wykładu Podstawy: HTML, CSS Tworzenie aplikacji: JSP Rozbudowa strony klienta: JavaScript, CSS

6 Historia WWW 1989 Tim Berners-Lee CERN Wymiana informacji pomiędzy fizykami HTML: HyperText Markup Language HTTP: HyperText Transfer Protocol WWW: World Wide Web

7 Historia WWW - cd 1993 Mosaic pierwsza przeglądarka WWW 1994 powstaje W3C World Wide Web Consortium 1994 powstaje firma Netscape Communications Corp pojawia się Microsoft IE

8 Zasada działania Serwer WWW Przeglądarka internetowa Adres internetowy (DNS, IP) Przeglądarka wysyła żądanie do serwera, serwer zwraca stronę dokument HTML, wraz z dodatkowymi plikami (obrazki, flash e, aplety)

żądanie do serwera, serwer zwraca stronę dokument

9 Język HTML Tekst + znaczniki (tagi) Tag: owieranie i zamykanie: <tag>...</tag> Tag: atrybuty <tag atrybut1= wartość atrybut2= w2 > Tagi pojedyncze: <br>, ale lepiej <br />

10 Najprostsza strona HTML <html> <head> <title>tytuł</title> </head> <body> Treść dokumentu </body> </html>

11 Formatowanie tekstu Adam<br>Ewa Adam <br> Ewa Oba kody dają ten sam rezultat: Adam Ewa

12 Znacznik <p> Tworzy paragraf tekstu <body> <p>programowanie w Internecie</p> <p> Programowanie w Internecie </p> </body>

13 Inne użyteczne tagi - style <b> - pogrubienie <i> - pochylenie <hx> - nagłowek <strong>, <em> - style logiczne domyślnie <strong> = <b> <em> = <i>

14 Listy Lista nienumerowana <ul> <li>html</li> <li>jsp</li> <li>css</li> </ul> Lista numerowana <ol> <li>html</li> <li>jsp</li> <li>css</li> </ol> HTML JSP CSS 1. HTML 2. JSP 3. CSS

15 Komentarze Tekst przesyłany do przeglądarki ale nie wyświetlany <h1>plan wykładu</h1> <ul> <!- teraz zaczyna się lista -> <li>html</li> <li>jsp</li> <li>css</li> </ul>

16 Znaki specjalne Znaki <, > czy & muszą być specjalnie oznaczone, aby pojawiły się na stronie Zapis: Użycie znacznika <br> w dokumentach Daje na stronie rezultat: Użycie znacznika <br> w dokumentach

17 Odnośniki - linki Linki do innych stron <a href= >Zobacz stronę</a> Linki względne <a href= info.html >Zobacz stronę</a> Linki wewnątrzstronicowe <a href= #wstep >Przejdź do wstępu</a> <a name= wstep >Wstęp</a> Linki mailowe <a href= mailto:pawel@kasprowski.pl >Napisz do mnie</a>

html >Zobacz stronę</a> Linki wewnątrzstronicowe <a href= #wstep >Przejdź

18 Znacznik <img> <img src= obraz.gif /> Formaty GIF, JPG, PNG Atrybuty: height, width, alt

19 Tabele <table> <tr> <td rowspan= 2 >w1k1</td> <td>w1k2</td> <td>w1k3</td> </tr> <tr> <td colspan= 2 >w2k1-2</td> </tr> </table>

20 Table - właściwości border, width, height, align, cellpadding, cellspacing, colspan, rowspan, th

21 Wygląd strony Pierwsze specyfikacje HTMLa pozostawiały wygląd strony użytkownikowi a zajmowały się tylko strukturą dokumentu Producenci przeglądarek wymusili zmiany wprowadzając atrybuty związane z wyglądem

22 Definiowanie wyglądu Atrybuty html a <body bgcolor= #ff00de > Atrybut style <body style= background: #ff00de > Można zapisywać style w osobnym pliku CSS cascading style sheet

23 Kaskada styli <h1>plan wykładu</h1> <ul style="list-style-type: square; color: #009900"> <li>html</li> <li>jsp</li> <li style="list-style-type: disc; color: #ff0000">???</li> <li>egzamin</li> </ul>

24 Style dla paragrafów <p> To jest pierwszy paragraf tekstu, który zostanie wyświetlony jako czerwony na żółtym tle. </p> <p> To jest drugi paragraf tekstu, który zostanie wyświetlony jako zielony na niebieskim tle. </p>

25 Style dla paragrafów <p style="color: red; background: yellow"> To jest pierwszy paragraf tekstu, który zostanie wyświetlony jako czerwony na żółtym tle. </p> <p style="color: green; background: blue"> To jest drugi paragraf tekstu, który zostanie wyświetlony jako zielony na niebieskim tle. </p>

26 Globalne definiowanie styli W nagłówku pliku działa dla każdego tagu <p> w dokumencie <head>... <style> p {color: #008000; background: #ffff00} </style>... </head>

27 Definiowanie styli globalnych Dla każdego elementu danej klasy <style> p.nagl {color: #008000; background: #ffff00} p.tekst {color: #ff0000; background: #ffffff} </style>... <p class= nagl >Tu jest nagłówek</p> <p class= tekst >Tu jest jakiś zwykły tekst </p>

28 Style dla czcionek font-family: czcionka, np.: Arial, Verdana, serif, sansserif font-size: 12pt (1/72 cala), 12px (pixele), 150% (względem aktualnego), larger, smaller font-styling: bold, italic, normal text-decoration: underline, overline, none

29 Style dla czcionek Ustawienie czcionek: p { } font-family: Arial ; font-size: 12px; font-style: italic lub: p { } font: 12px Arial italic;

30 Klasy uniwersalne (generic) Definiowany styl bez przypisywania do konkretnego znacznika <style>.important {color: #ff0000; background: #00ff00} </style>

31 Znacznik <SPAN> <SPAN> - rodzaj nawiasu, który można wstawić dowolnie w tekście <style>.important {color: #ff0000; background: #00ff00} </style>... <p> Znajomość języka HTML jest <span>bardzo użyteczna</span> nawet dla ludzi, którzy nie mają wykształcenia informatycznego. </p>

32 Znacznik <SPAN> Po przypisaniu stylu jest on stosowany dla tekstu wewnątrz <style>.important {color: #ff0000; background: #00ff00} </style>... <p> Znajomość języka HTML jest <span class=important>bardzo użyteczna</span> nawet dla ludzi, którzy nie mają Wykształcenia informatycznego. </p>

33 Pliki CSS Plik CSS zawiera definicje wielu różnych styli dla elementów dokumentu Plik może być używany w wielu dokumentach <head>... <link rel="stylesheet" href="/my_style1.css" type="text/css">... </head>

34 Dynamiczna generacja stron CGI Common Gateway Interface Wejście: adres, parametry Wyjście: tekst strony html Problem: jak przekazać parametry?

35 Formularze Możliwość wysyłania danych do serwera Proste pola edycyjne Pola bardziej zaawansowane radio, checkbox, select ACTION gdzie wysłać wprowadzone dane

36 Tworzenie formularzy Najprostszy formularz: <form action= >... Imię: <input type= text name= imie ><br>... <input type= submit value= Wyślij > </form>

37 Znaczniki <input type= text > <input type= submit > <input type= image > <input type= password > <input type= radio > <input type= checkbox > <input type= file > <input type= hidden >

38 Radiobutton Wybór jednej z opcji <form> <input type="radio" name="sex" value="m">mężczyzna<br> <input type="radio" name="sex" value="k">kobieta </form>

39 Checkbox Wybór wielu opcji <form> Lubię:<br> <input type="checkbox" name="banany">banany<br> <input type="checkbox" name="ananasy">ananasy </form>

40 Właściwości pola INPUT <INPUT TYPE=text password checkbox radio submit reset file hi dden image, NAME= string, VALUE=string, CHECKED, SIZE=n, MAXLENGTH=n, ALIGN=top middle bottom left right >

41 Pole select Wybór jednej z wielu opcji drop-down <form> <select name="samochody"> <option value="volvo">volvo <option value="saab">saab <option value="fiat">fiat <option value="audi">audi </select> </form>

42 Pole textarea Edycja większego tekstu <form> <textarea rows="10" cols="40"> Ten tekst można edytować </textarea> </form>

43 Metody wysyłania danych Metoda GET Odpowiednik: Metoda POST Parametry wewnątrz wysyłanego pakietu brak ograniczeń na wielkość parametrów

44 Aplikacja CGI Konieczność generacji całej strony Program drukujący tekst na standardowym wyjściu Niewygodne (zwłaszcza, gdy elementy dynamiczne zajmują niewielką część strony) Wygodniej stworzyć stronę HTML i tylko wstawić elementy generowane dynamicznie

45 Dynamiczne wstawki do tekstu html Trzy najważniejsze rozwiązania: PHP najpopularniejsze, własny język oparty początkowo na języku Perl ASP propozycja Microsoft, wstawki w VisualBasic u JSP wstawki w języku Java

46 Odczytywanie danych Obiekt request, metoda getparameter( nazwa ) <h1>witaj <%=request.getparameter( imie )%></h1> <p> <% String imie = (String)request.getParameter( imie ); if(imie.equals( Paweł )) out.print( Ja też mam na imię Paweł! ); %> </p>

47 Możliwości JSP Mieszanie kodu i html a <TABLE BORDER=2> <% for ( int i = 0; i < 10; i++ ) { %> <TR> <TD>Numer</TD> <TD><%= i+1%></td> </TR> <% } %> </TABLE>

48 Możliwości JSP Mieszanie kodu i html a <TABLE BORDER=2> <% for ( int i = 0; i < 10; i++ ) { %> <TR> <TD>Numer</TD> <TD><%= i+1%></td> </TR> <% } %> </TABLE>

49 Dziękuję za uwagę! Materiały:

Podobne dokumenty

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