Internet Applications Development. Ali Alomari

Internet Applications Development Ali Alomari

The goal prepare the student for the essential skills to be able to create a web page

Books and references Robert Sebesta, Programming the World Wide Web, 2011, ISBN-10: 0132130815 Stepp,Miller,Kirst. Web Programming Step by Step.( 1st Edition, 2009) Companion Website: http://www.webstepbook.com/ http://www.w3schools.com/html/default.asp

Grading Grade will be based on homework projects (60%), a midterm (20%), and a final exam (20%).

Introduction to the internet & the web

The Internet Developed beginning in the 1960s, sponsored by ARPA (Dept. of Defense Advanced Research Projects Agency). Protocol for communication between computers is called TCP/IP: Transmission Control Protocol / Internet Protocol. Information is transmitted by packet switching: data is broken up into packets, which are then passed from one computer to the next until they reach their destination. This is in contrast to the phone system, which creates a temporary direct link between communicating parties. Packet switching is robust since it can route around disabled nodes and use multiple paths. But there is no guarantee packets will be delivered within any given time.

Before the web Internet was already existing Resources on the internet were found using command line tools like ftp Example: Run ftp program Enter C host (connects to a server) Enter username Enter password Ls (lists files) Get file Cd (change directory) There were no links You had to know where the information was

The invention 1989 Tim Berners Lee proposes at CERN a way to organise information using hyperlinks 1990 he develops the first browser World Wide Web 1991 first web server 1993 Date on the declaration by CERN's directors that WWW technology would be freely usable by anyone, with no fees being payable to CERN. A milestone document.

History of the web 1992-93 web sites of public and organizing entities worldbank.org, whitehouse.gov, ripe.net (manages ip s) 1994 Yahoo! 1994 the netscape browser 1994 - World Wide Web Consortium (W3C) the organization concerned with standards on the Web 1995 altavista, e-bay, javascript, HTML (http://en.wikipedia.org/wiki/html ), PHP 1996 - ASP 1997 flash player 2 now on 99% on the computers on the web

History of the web 1998 google 1999 microsoft passport (way to login with a single identity on multiple web sites) 1999 rss rich site summary get live updates from your favourite sites 1999 blogs first appeared 2000 XHTML appears 2001 wikipedia now the world s largest encyclopedia 2004 - facebook

Conclusions World wide web was first a way to link text documents It evolved into Providing different kinds of content (images, video) providing services for people (games, answers, news) Providing means for people to create content (wikis, forums, social networking applications, blogs) Providing services for computers The content was first static text pages that were rarely changed and only by the owner Content became dynamic updated from the server s database Content became updated real time (without refreshing the page using asynchronous technologies) Content comes from different sources and it s aggregated on a page

What is HTML? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content

HTML Example A small HTML document: <!DOCTYPE html> <html> <head> <title>page Title</title> </head> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html>

Example Explained The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes paragraph Using this description, a web browser can display a document with a heading and a paragraph.

HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname> HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a slash before the tag name Note:The start tag is often called the opening tag. The end tag is often called the closing tag.

Web Browsers The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure Note:Only the <body> area (the white area) is displayed by the browser.

The <!DOCTYPE> Declaration The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are different document types on the web. To display a document correctly, the browser must know both type and version. The doctype declaration is not case sensitive. All cases are acceptable: <!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>

Common Declarations HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

Common Declarations Extensible Hypertext Markup Language (XHTML) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which Web pages are formulated. While HTML, prior to HTML5, was defined as an application of Standard Generalized Markup Language (SGML), a flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. XHTML documents are well-formed and may therefore be parsed using standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser.

HTML Versions Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2012

The world wide web week2

Learning outcomes Explain in general terms how web documents are transferred across the Internet and What processes are triggered when you click on hyperlink Code web pages using HTML and XHTML using style sheets. Explain why it is advisable to use XHTML rather than HTML Describe some technologies available for dynamic web pages

How the web works The client-server model Client and server operate on machines which are able to communicate through a network The server waits for requests from a clients Server receives a requests from a client Performs a the requested work Or lookup the requested data And send a response to the client Servers: file servers, web servers, name servers Clients: browsers, email clients

url format url :uniform resource locator <scheme>://<server-domain-name>/<pathmane> <scheme> which protocol to use http: Hypertext Transfer Protocol file: which tells the client document is in a local machine ftp: file transfer protocol <server-domain-name> identifies the server system i.e. uquweb.uqu.edu.sa <pathname> tells the server where to find the file http://uquweb.uqu.edu.sa/~username/index.html

Web browsers and servers A browser: is a program that can retrieve files from the world wide web and render text, images, or sounds encoded in the files. i.e. IE, Google, FireFox A web server: is an application which waits for client requests, fetches requested documents from disk and transmits them the client. i.e Apache

What happened when you click on hyperlink? Determine URL and extract domaine name. Use the name server to get Internet Protocol (IP)address Domain Name System(DNS) Make a Transmission Control Protocol (TCP) connect to port 80 And send a request for a web page once the server has accepted to connection. The server send the file and releases the TCP connection The client displays the document.

Other possibilities The steps in the previous slide are for displaying a static web page from a remote machine. Other possibilities are: Page is loaded from a local system no tcp connection url begin with file://... The page is dynamically generated by a client-side script No tcp connection The page is dynamically generated by a server-side script: The server may carry out other functions Secure server Check user s identity if they are authorised to access a particular resources

Stateless connection Both client and server release TCP connection after a page has been transferred. HTTP1.0 is stateless Connections are not persistent There is no indication to the server whether new transactions involve the same client HTTP 1.1 is persistent By keeping track of the client IP addresses However, there is no way of identifying a repeated visits to the site by the same user. Furthermore, Internet Service Provider (ISP)s reallocate IP addresses to dial-up customers as new user dial in.

Cookies Request the browser to store a small data file (cookie) on the users hard disk. Which can serve to identify users only. For instance it could contain a key into a database on the server machine. Most browsers nowadays allow you to decide whether or not you want cookies on your machine.

W3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. http://www.w3.org/consortium/

Introduction to HTML

What is an HTML File? HTML stands for HyperText Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor

Internet - Services Email & MIME (Multipurpose Internet Mail Extensions) text (text/html), image, video, etc. Telnet & ssh FTP File Transfer Protocol Gopher IRC Internet Relay Chat Newsgroups WWW World Wide Web HTTP (Hypertext transfer protocol) uses a Question- Answer-Scheme, i.e. a browser sends a request and gets a response from a server. Note the server does not send out anything without a request.

Markup languages Suppose we have a document containing only plain text We tag certain parts of the document to indicate what they are and how they should be formatted This procedure is called marking-up the document Tags are usually paired: e.g. <title>my Memoirs</title> A pair of tags plus their content constitute an element Un-paired tags are called empty tags

Markup languages Physical vs Semantic markup physical refers to appearance (style) on the page semantic refers to structure and meaning HTML is the HyperText Markup Language HTML is based on SGML (Standard Generalised Markup Language) which is more complex HTML has a fixed set of tags but is constantly evolving, but newer versions are downward compatible

Markup languages HTML places primary emphasis on structure paragraphs, headings, lists, images, links,. ( CSS ) HTML places secondary emphasis on style fonts, colours,. HTML does not label the meaning of the text ( XML )

A basic document <!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN > There are three required elements, defined by the tags <html>, <head> and <body> Every document should start with the following line <html> <head> <title>my Home Page</title> </head> <body> <h1>welcome</h1> </body> </html>

Elements HTML elements are written with a start tag, with an end tag, with the content in between: <tagname>content</tagname> The HTML element is everything from the start tag to the end tag: <p>my first HTML paragraph.</p> Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> <br> Some HTML elements do not have an end tag. HTML Tip: Use Lowercase Tags

Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Attribute alt disabled href id src style title value Description HTML Tip: Use Lowercase Tags Specifies an alternative text for an image Specifies that an input element should be disabled Specifies the URL (web address) for a link Specifies a unique id for an element Specifies the URL (web address) for an image Specifies an inline CSS style for an element Specifies extra information about an element (displayed as a tool tip) Specifies the value (text content) for an input element. A complete list, of all legal attributes for each HTML element, is listed in our: HTML Tag Reference.

Basic structure elements first and last tags The HEAD section must come before the BODY section contains generic information about the document Elements specified in the HEAD section can include title, link, script, style The BODY section contains the content of the document (text, images etc) this content is structured by other tags

Block elements Block elements define sections of text, usually preceded by a blank line <p></p> - paragraph <h1></h1>...<h6></h6> - headings <pre></pre> - preserve (original format) Not supported in HTML5 <blockquote></blockquote> - indented text <div></div> - division used to identify a section of the document that may be subject to special formatting (for example, using stylesheets).

Paragraphs Paragraphs: <p>...</p> force a break between the enclosed text and the text surrounding it the tagged region of text may be subject to special formatting <p align="center">here is another paragraph</p> align is an attribute of the paragraph tag center is the value of the align attribute <p>here is a piece of text that has been placed inside a paragraph</p> <p align="center">here is another paragraph</p>

Headings Six levels of importance <h1>...<h6> Use headings to divide document into sections <html> <head> <title>headings</title> </head> <body> <h2>chapter 1</h2> <h3>1. Introduction</h3> This is the introduction <h3>2. Next section</h3> This is the next section <h4>2.1 A subsection</h4> This is a subsection </body> </html>

Element relationships The elements marked by tags form a hierarchy The root element is html (marked by (< html>...</html > It usually has two children: head and body each of these are further subdivided There are rules for which elements can contain other elements e.g. headers cannot contain headers see http://www.w3.org/ for a full list of rules Elements must not overlap each other we cannot have: <h1>...<a..>... </h1>...</a> we can have: <h1>...<a..>... </a>...</h1>

Inline descriptive elements Descriptive elements affect the appearance of text depending on how the text is described <em></em> emphasis, usually with italics <strong></strong> strong, usually with bold <cite></cite> citation, usually in italics <code></code> usually results in monotype spacing <body> A <em>fascinating</em> subject that I <strong>must</strong> understand </body>

Inline explicit style elements <boldface></boldface> <big></big> bigger font than surrounding text <small></small> smaller font than surrounding text <i></i> italics <s></s> strikethrough <sub></sub> subscripts <sup></sup> superscripts <span></span> delimits text for stylesheet control <div></div> delimits blocks of text for stylesheet control

Inline explicit style elements <font> attributes ( installed face - name of font (must be "arial", "times", "verdana", "helvetica" size - absolute size (1-7), or relative to previous text "2", "5", "7", "+1", "-2"... color - hexadecimal RGB, or a named color #3399dd", "blue", "red" weight - boldness from 100, 200,..., 900 "100", "300", "900" e.g. <font face="arial" size="+1" color="pink" weight="300">

Unordered lists Unordered lists <ul>...</ul> <li>...</li> for the list elements each item has a bullet some normal text <ul> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ul>

Ordered lists Ordered lists <ol>...</ol> <li>...</li> for the list elements each item has a number some normal text <ol> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ol>

Definition lists <dl></dl> The enclosing tags <dt></dt> The definition term <dd></dd> The definition <dl> <dt>mime</dt> <dd> Multipurpose... </dd> <dt>ftp</dt> <dd> File transfer... </dd> <dt>tcp</dt> <dd> Transmission... </dd> </dl>

Nested lists A list may contain another list The inner list is nested inside the outer list <body> <ol> <li>apples</li> <ul> <li>red</li> <li>green</li> </ul> <li>oranges</li> <li>pears</li> <li>bananas</li> </ol> </body>

Comments Comments are delimited by  <! this is a comment --> Comments may span multiple lines <body>  </body>

Horizontal lines To insert a horizontal line to divide up parts of a document we use the empty tag <hr> Attributes: align, size (in pixels), width (in pixels or percentage), noshade <body> <h1>chapter 1</h1> <hr align="center" size="3" width="50%" noshade> <h2>introduction</h2> </body>

Special characters Some characters such as <, >, " and & have special meanings. To prevent them being interpreted as HTML code, they must be written as follows: < = < > = > = " & =& Blank space is normally ignored in HTML. To include a space in your document use: <body> A <em> < fascinating > </em> subject that I <strong>m u s t</strong> understand </body>

Links The link (anchor) element <a>...</a> provides hypertext links between ( URL 1. different documents (using a 2. different parts of an individual document User selection of the link (hot spot) results in 1. retrieval and display of the designated document 2. movement to relevant part of same document

Example: Link with URL The href attribute gives the URL of the target page The text between the tags is highlighted selecting it activates the link <body> The Department of <a href= https://uqu.edu.sa/computer-sciences-information"> Computer Science</a> is a very... </body>

Relative addressing The previous example gave the full path name, known as the absolute address <a href="research.html">research</a> <a href=./pub.html">publications</a> <a href="../../index.html">computer Science home</a> The root directory for the link is assumed to be the directory containing the parent page of the link

Images Images are included using the empty tag <img> Example: <img src="mypicture.gif" alt="my picture"> The src attribute specifies the file containing the image absolute or relative path names can be used (see ( http://www.w3schools.com/tags/tag_img.asp The alt attribute specifies the text to be displayed if the image is not viewed some users choose not to display images (for ( download faster also used for compatibility with older browsers

Image attributes Attribute Value Description Attributes = New in HTML5. align top bottom middle left right Not supported in HTML5. Specifies the alignment of an image according to surrounding elements alt text Specifies an alternate text for an image border pixels Not supported in HTML5. Specifies the width of the border around an image crossorigin anonymous use-credentials Allow images from third-party sites that allow cross-origin access to be used with canvas height pixels Specifies the height of an image hspace pixels Not supported in HTML5. Specifies the whitespace on left and right side of an image ismap ismap Specifies an image as a server-side image-map longdesc URL Not supported in HTML5. Specifies the URL to a document that contains a long description of an image src URL Specifies the URL of an image usemap #mapname Specifies an image as a client-side image-map vspace pixels Not supported in HTML5. Specifies the whitespace on top and bottom of an image width pixels Specifies the width of an image

Links with images <body> Enter my world of cats <a href="cats.html"><img src="cat.gif" height="60" width="60" align="middle" alt="cat"></a> </body> A link element can include an image instead of text both images and text can be included if required

Colour Colours are specified with hexadecimal numbers for the red, green and blue primary colours, preceded by a #. To set the background colour of a web page <body bgcolor="#994422">

Colour RGB Model #ff0000 (red), ( green ) #00ff00 ( blue ) #0000ff ( yellow ) #ffff00... ( blue #3395ab (a pastel

Colour <body text="#994422"> In the body element, the colour of link text can be controlled with the following attributes: link for an un-visited link vlink for a visited link alink for a link that is currently selected by the mouse Example To set the colour of all text on a page <body text="#000000" link="#0000ff">

Colour To set the colour of an individual piece of text use the font element (or preferably stylesheets see later) <body bgcolor="#3395ab"> Text in quotes <font color="#ff0000">"such as this"</font> has a different colour </body>

Colour names Netscape and Internet Explorer allow textual names for colours instead of hexadecimal This is OK provided the page is not looked at by a browser that does not support colour names For example <body bgcolor="gray" text="black" link="blue">

Background patterns Rather than a uniform color You can give the background of web page a pattern as follow: <body background="tileimage.gif">