1. Basic Properties of a Web Page Teppo Räisänen LIIKE/OAMK

2. Client-server model

3. Basic concepts The Web World Wide Web, WWW A system of interlinked hypertext documents accessed via the Internet Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence. Apart from running text, hypertext may contain tables, images and other presentational devices.

4. Basic concepts HTML HyperText Markup Language HTML is used to represent the content (text, images) and the links in the Web

5. Basic concepts HTML can be used to create HTML- documents Document name ends with.htm or.html One HTML-document contains one Web page

6. Basic concepts HTTP HyperText Transfer Protocol Networking protocol that is used to transfer the web pages from server to client http://www.oamk.fi/

7. Basic concepts Web pages can be static or dynamic Static web page The content of the page does not change Dynamic web page The content of the page can change as it is created based on some criteria

8. Web Server (1) The development work of static web pages can be implemented using a local workstation Dynamic pages often require server end some more testing At the publishing stage the pages must be transferred to a public server File transfer

9. Web Server (2) The instructions of file transfers are usually provided by the Internet Service Provider (ISP) Web server space can be obtained e.g. from: ISP (Baana, Elisa, Saunalahti…) Work/Study organization Web hotel service

10. File Transfers The file transfers can be committed using: A FTP client (CoreFTP, WSFTP, SSH Client) A Web Editor (Dreamweaver, FrontPage) FTP functionalities of a browser (restricted) Browser based application provided by the ISP

11. Web Material (1) Besides HTML-pages browsers know how to work with Image files Sound files Text files (e.g..pdf) Have a look at http://www.oamk.fi/~teraisan/K1047BI/

12. Web Material (1) Many formats of files can nowadays be embedded within a web page Flash, Java, Silverlight, … The content needs plug-ins to work If the plug-in is not installed an error message is displayed

13. Web Material (2) It is still to be remembered that Not all file formats are supported by the browsers Not all browsers support same kinds of file formats Depending of the browser type the same kind of material (e.g. sound files) may be presented in a different manner

14. Web Material (3) Companies providing free server space may restrict the use of some file formats: Mp3.zip,.rar

15. Web Addresses (1) The initial part of a web address consists of the protocol and the server’s name (e.g. http://www.oamk.fi) The following parts of the address reveal the site’s hierarchial structure (e.g. http://www.oamk.fi/english/intra/) http://www.oamk.fi/english/intra/ Have a look at file structure at http://www.oamk.fi/~teraisan/K1047BI/

16. Web Addresses (2) The web applications might generate complex addresses like http://pan.kaha.oamk.fi/intra/harjoitt.nsf/0bbcbb05402f06c242256958 00354d8c/03cc4567f8fa7869c22570b5003eb77b?OpenDocument In principle the protocol definition (http://) is a part of web address The part of address that declares the actual file (e.g. index.htm) is called a relative address

17. Web Addresses (3) The names of the relative addresses should be kept simple: myhobbies.htm vs. abcsd1789234.htm One might have to pronounce the addresses during phone conversations Relative addresses belonging to the same group may be named logically letter11012006.htm, letter 11012006…

18. Web Addresses (4) http://www.googleguide.com/web_addr ess.html http://www.googleguide.com/web_addr ess.html

19. Media Types The server will send information of a requested files media type The browser will use the information about the media type to decide, how to present the file (Open MediaPlayer, open Acrobat Reader etc.) Sometimes the browser doesn’t know how to treat a file, so a mp3 file might be displayed in a browser window…

20. File and Media types TypeFile ExtensionMedia Type HTML-page.htm/.htmlText/html Plain Text.txtText/plain PDF-document.pdfApplication/pdf Gif-image.gifImage/gif Mpeg-video.mpgVideo/mpeg

21. File Types Even with faster connections, the large file sizes are still problematic It is usually more sensible to provide a link to a large file instead of embedding the file into a HTML page For large images, sounds, and videos one might want to provide thumbnails and preview opportunities.