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

Client-server model

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.

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

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

Basic concepts HTTP HyperText Transfer Protocol Networking protocol that is used to transfer the web pages from server to client

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

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

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

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

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

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

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

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

Web Addresses (1) The initial part of a web address consists of the protocol and the server’s name (e.g. The following parts of the address reveal the site’s hierarchial structure (e.g. Have a look at file structure at

Web Addresses (2) The web applications might generate complex addresses like d8c/03cc4567f8fa7869c22570b5003eb77b?OpenDocument In principle the protocol definition ( is a part of web address The part of address that declares the actual file (e.g. index.htm) is called a relative address

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

Web Addresses (4) ess.html ess.html

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…

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

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.