Chris Seddon seddon-software@keme.co.uk 2000-12 CRS Enterprises Ltd 1
2000-12 CRS Enterprises Ltd 2
Reference Sites W3C W3C w3schools DevGuru Aptana GotAPI Dog http://www.w3.org/ http://www.w3schools.com http://devguru.com/technologies/html/home.asp http://www.aptana.com/reference/html/api/.index.html http://www.gotapi.com/html http://htmldog.com/reference/htmltags/ Copyright 2000-12 CRS Enterprises Ltd 3 2000-12 CRS Enterprises Ltd 3
HTTP Requests and Responses Web browsers and Web servers communicate by using HTTP requests and responses HTTP request HTTP response Web browser Web server The Web browser can request A static resource, such as a fixed page A server-side application, such as Java servlet or JSP Copyright 2000-12 CRS Enterprises Ltd 4 2000-12 CRS Enterprises Ltd 4
Client-Server Interaction Server Server side side processing creates and returns Copyright 2000-12 CRS Enterprises Ltd 5 2000-12 CRS Enterprises Ltd 5
Creating Web Server Applications Java Java Servlets Java Server Pages (JSPs) Typically a combination of both Common Gateway Interface (CGI) CGI scripts in Perl, C, C++, etc. Microsoft technologies Active Server Pages (ASPs), using JScript or VBScript ASP.NET, using any.net language (C#, VB.NET, J#, etc.) Proprietary APIs, targeted at a specific Web server Internet Information Services API (ISAPI) Copyright 2000-12 CRS Enterprises Ltd 6 2000-12 CRS Enterprises Ltd 6
W3C Founded in 1994 World Wide Web Consortium Creates pecifications and guidelines that are intended to promote the web s evolution and ensure that web technologies work well together Specifications for:, CSS, XML, X, DOM, etc Copyright 2000-12 CRS Enterprises Ltd 7 2000-12 CRS Enterprises Ltd 7
Sockets and Ports 192.56.40.2 192.56.40.7 P1 sockets port port P1 machine 1 machine 2 Copyright 2000-12 CRS Enterprises Ltd 8 2000-12 CRS Enterprises Ltd 8
A Basic Web Page <html> <html> <head> <title>hello World</title> </head> <body> Hello, Hello, world! world! </body> </html> home.html Copyright 2000-12 CRS Enterprises Ltd 9 2000-12 CRS Enterprises Ltd 9
Basic X Web Page home.xhtml <!DOCTYPE html html PUBLIC "-//W3C//DTD X 1.0 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/xml;charset=utf-8" /> /> <title>my HOME HOME PAGE</title> </head> <body> Hello, Hello, world! world! </body> </html> Copyright 2000-12 CRS Enterprises Ltd 10 2000-12 CRS Enterprises Ltd 10
Doctypes 3 types to choose from: Transitional (loose) more easy going and flexible. Most people are using this Strict everything must be perfect and there is no flexibility. Frameset allows you to use frames on your page <!DOCTYPE PUBLIC "-//W3C//DTD 4.01 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head>...... Copyright 2000-12 CRS Enterprises Ltd 11 2000-12 CRS Enterprises Ltd 11
Page Structure Elements Head tag contains header information metadata, CSS styles, JavaScript code <html> <head> <title> <body> defines entire page header title title visible content Copyright 2000-12 CRS Enterprises Ltd 12 2000-12 CRS Enterprises Ltd 12
Structural Elements <h1>,<h2> <p> <p> <br> <br> <span> <div> 5 heading levels paragraph line line break grouping fragments grouping blocks span is in-line and usually used for a small in-line div is block-line and used to group larger pieces of code. <div <divid="scissors"> <p>this is is <span <spanclass="paper">crazy</span></p> </div> </div> Copyright 2000-12 CRS Enterprises Ltd 13 2000-12 CRS Enterprises Ltd 13
Lists Ordered lists <ol> <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> </ol> Unordered lists <ul> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> </ul> Copyright 2000-12 CRS Enterprises Ltd 14 2000-12 CRS Enterprises Ltd 14
Tables Tables can be produced using CSS alone opions differ on whether you should use or CSS <table <table border="1"> <tr> <tr> <th>name</th> <th>telephone</th> </tr> </tr> <tr> <tr> <td>john Smith</td> <td>45914</td> </tr> </tr> <tr> <tr> <td>sue Pritchard</td> <td>56321</td> </tr> </tr> </table> Copyright 2000-12 CRS Enterprises Ltd 15 2000-12 CRS Enterprises Ltd 15
Links Links can be used to change pages <a> <a> anchor link link Use name attribute for bookmarks Use # to jump to part of a page <a <ahref="http://www.ibm.com#tips"> Visit Visit the the Useful Useful Tips Tips Section Section </a> </a> Copyright 2000-12 CRS Enterprises Ltd 16 2000-12 CRS Enterprises Ltd 16
Forms Form fields sent to server on submit <form <form action="results.html" method="get"> First First name: name: <input <input type="text" value="john" name="first" /><br /><br/>/> Last Last name: name: <input <inputtype="text" value="smith" name="last" /><br /><br/>/> <input <inputtype="submit" value="click" /> /> </form> Copyright 2000-12 CRS Enterprises Ltd 17 2000-12 CRS Enterprises Ltd 17
Web Graphic Formats GIF Graphic Information Format best for charts, graphics: ads, logos etc. - can contain up to 256 colors support transparency can be animated not good for photographs JPG Joint Photographic Experts Group best for images with many colors - can contain up to 16 million colors scanned artwork and photos can set the compression for each image to reduce the file size PNG - Progressive Network Graphics newest web graphics format - compact and versatile can combine features of GIF & JPG transparent backgrounds & contain millions of colors supported by all modern browsers Copyright 2000-12 CRS Enterprises Ltd 18 2000-12 CRS Enterprises Ltd 18
Images Images should define alternative text for a text only browser Size can be specified <img src="images/kids_hug.jpg" alt="kids hug" height="400" width="400" /> /> Copyright 2000-12 CRS Enterprises Ltd 19 2000-12 CRS Enterprises Ltd 19
Other Components 5 adds further widgets e.g. for multimedia <button> <input> <label> <textarea> buttons text text input boxes text text or or image labels multi-line text text input box box <textarea rows="5" cols="20"> This This is is a multi-line text text input input box box </textarea> Copyright 2000-12 CRS Enterprises Ltd 20 2000-12 CRS Enterprises Ltd 20
Entities To display a special character in a web page use entities < > && non non breaking space less than greater than ampersand copyright trademark < > & Copyright 2000-12 CRS Enterprises Ltd 21 2000-12 CRS Enterprises Ltd 21