IS Training manual

Web development:

UCL information services divisioninformation systemsIntroduction to HTML and CSS28HostingUCL Information SystemsDocument No. IS-xxxContents

1Internet and WWW11.1What is the Internet?11.2What is the WWW?11.3How web sites work12Web design 10132.1Purpose and target audience32.2Structure32.3Content and visual design42.4Accessibility considerations53Introduction to HTML73.1What is HTML73.2Structure of a HTML document73.3Suitable Scripting tools84HTML: Tags and their usage94.1Adding and formatting text94.1.1Defining colour and font styles104.2Inserting images & multimedia124.3Developing a navigation system154.4Using anchors174.5Layout tools194.5.1Using Tables204.5.2Using Div215Cascading Style Sheets (CSS)225.1What is a CSS?225.2Defining a CSS225.3Deploying a CSS226Interactive elements256.1What is Java Script?256.2Creating roll-overs using Java Script257Hosting277.1Hosting Options277.2FTP Connection and uploading277.2.1To open WinSCP and connect via FTP:277.2.2To add files to html.pub:297.2.3 To remove files from html.pub307.2.4To back-up html.pub files308Maintenance318.1Accuracy of content318.2Backing up your web site319Further information329.1Internet sources329.1.1Standards:329.1.2Cascading style sheets:329.1.3Online tutorials329.2Recommended books32

IntroductionPlease note that training files are not provided for this course. It is expected that you will develop our own HTML and CSS documents in addition to sourcing additional content such as images.This manual complies with the HTML5 and CSS3 standards, in some cases commonly used legacy tags have been included/identified as you may need to support or further develop web pages using these. This guide can be used as a reference or tutorial document. To assist your learning, a series of practical tasks are available in a separate document. Both of these documents can be downloaded from the Moodle course ISD IT Training.

We also offer a range of IT training for both staff and students including scheduled courses, one-to-one support and a wide range of self-study materials online. Please visit www.ucl.ac.uk/is/training/ for more details.Document No. IS-xxxSeptember 2013Internet and WWWWhat is the Internet?The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies.What is the WWW?The World Wide Web (abbreviated as WWW or W3, commonly known as the Web), is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks.How web sites workDesign & create pagesMaintain pagesUpload pages to serverRequest sent to view pagePage returned

Documents that form the WWW are accessed via their Uniform Resource Locator (URL), this forms the request to view the page (file).URLs are constructed as below:http://www.ucl.ac.uk/isd/common/resources/web_development

1. defining protocol used for sharing data2. domain name (the pre-face www is not always required)3. nested folders4. file nameWhere a file name is not explicitly stated a browser will look for and open an index.html file.The time taken for a page (file) to be returned (or downloaded) is dependent on the size of the file and the amount of bandwidth available at that time. In general files that contain many images and multimedia content will take longer to download than files that predominantly contain text.

Web design 101Purpose and target audienceOne of the most crucial parts of the development of any web site is understanding who your target audience is and what you are trying to achieve (purpose of the web site).When identifying your target audience you will need to at least consider the following factors: Gender Age Nationality Location Level of schooling / literacy levels 16% of the UK adult population are functionally illiterate[footnoteRef:1]. [1: Functional illiteracy is defined as having literacy levels at or below those expected of an 11-year-old. Functionally illiterate adlts can understand short straightforward texts on familiar topics accurately and independently, and obtain information from everyday sources, but reading information from unfamiliar sources, or on unfamiliar topics, could cause problems. (http://www.literacytrust.org.uk/adult_literacy/illiterate_adults_in_england)]

Both of these will have an enormous impact on the visual design of your web site and the nature and style of content and assets used.This is illustrated by the two images of web pages below, both have the same core purpose: to inform, but the target audiences are different.

StructureHaving a good structure to your web site is crucial. If a web site is not useable, people will not use it.A web site with a good structure should have a clear navigation system and not require the user to guess where to find the information they need.The structure of web sites is typically represented graphically using hierarchy diagrams as illustrated below:

Although you should know how to navigate between all pages this does not need to be represented on the structure diagram.If you have a large or complicated web site you may wish to include a site map page in your web site. This typically takes the form of a hyperlinked list of topics organised in a structure akin to that of the web site. A good example is: http://www.next.co.uk/sitemap.aspContent and visual designWhen designing a web site, you not only need to identify the content you would like to present but how it is presented. This should reflect the purpose of your web site and your target audience. As stated by Epictetus: Know, first, who you are; and then adorn yourself accordingly.You will need to consider the following questions: What information do you need to include? How should this information be presented? Text Will the use of language be Formal / In-Formal? Will technical language or laymans terms be used? Images Photographs Illustrations Cartoons Multimedia What tone do you want to convey? Professional Friendly Relaxed Are there any constraints? Is there a house style or corporate image that you should conform to? Does some of the data need to be protected? Do you want to gain information from your users? How do you want to capture this?

Once you have identified the contents of your web site you will need to determine page layouts. Wireframes are a good non-graphical method for representing a web page layout. A wire frame should include labelled wire frame containers to illustrate the position of key items on the page(s).

Here is an example from the University of Texas[footnoteRef:2]: [2: Image taken from: http://www.utexas.edu/learn/designprocess/structure.html]

Choice of colours and fonts can have a large impact on the tone and perception of web sites. When it comes to web design, less is definitely more. A good web site should be like a good suit: simple, elegant & understated.Although there have been a lot of advances in browser technologies it is still advisable that when specifying colour schemes for your web site you stick to web safe colours (http://www.w3schools.com/html/html_colors.asp).Additionally, when using content that you have not created or have the Copyright for you must comply with Copyright legislation. Failure to do so could result in legal proceedings. (http://www.copyrightservice.co.uk/protect/p11_web_design_copyright).

Accessibility considerationsWhen developing a web site you need to be aware that some of your users may not be able to access the content as readily as others. As you add your content and develop your visual design you will need to build in accessibility.This is a very broad but important topic, it is recommended that you make yourself aware of the legal perspective and good practice guidelines, these links will help you:The Legal Perspectivehttp://www.rnib.org.uk/professionals/webaccessibility/lawsandstandards/Pages/uk_law.aspxGood practice guidancehttp://www.w3.org/standards/webdesign/accessibility

Introduction to HTMLWhat is HTMLHyper Text Mark-up Language (HTML) is a language used to define the mark-up (formatting) of hypertext documents. HTML utilises tags to signify what and how text should be marked up. Tags are predominantly defined in pairs to signify the start and end of the specified mark-ups.Web browsers interpret the html documents and display the text and/or contents as specified. It is important that HTML tags are structured correctly as otherwise they will not be interpreted correctly. This could result in unexpected behaviour, tag text appearing in the content text and/or the tag being ignored.HTML is an agreed international standard and as the nature of the internet and WWW has evolved as has HTML. The most recent HTML standard is HTML 5[footnoteRef:3]. If a web site has been developed in a legacy standard it may not be supported by newer browsers such as Google Chrome and fail to function properly. Similarly, if a web site uses HTML 5 and is accessed through an old version of Internet Explorer or Firefox it is unlikely it will function as intended. [3: See http://www.w3.org/standards/webdesign/htmlcss.html for more information.]

As the internet has evolved it has become commonplace to separate the definition of the document from the details of the visual design e.g. in html document a text string would be identified as being a heading. The formatting specifics of the heading (font style, point size, colour and any emphasise) would be defined in a separate Cascading Style Sheet (CSS) file. CSS files will be introduced in Section 5 of this document.HTML defines static elements in a document, in Section 6 you will be introduced to some basic JavaScript. The JavaScript included will demonstrate how to create some interactive elements such as roll-overs and image maps. Structure of a HTML documentHTML files start and end with the tags and , these specify to the web browser that this is a HTML document and where the start and end points are. It is also good practice to include a document type definition before the tags, this informs the browser of the version of the mark-up language being used thus enabling correct interpretation of all elements.Within the and tags the document is structured in two parts: the HEAD ( and ) and the BODY ( and ).The HEAD section of the document defines data about the document such as the TITLE and any attached or embedded scripts.The content definition is contained within the BODY. All content that is to be displayed on the page should be defined in this section.Here is an example of a simple HTML document:Figure 1: HTML definitionFigure 2: HTML representation in browser

Suitable Scripting toolsThere are a range of different tools available for the development of HTML documents and other web scripts such as CSS and java script, some of these are freeware and others require the purchase of a user license.The tools available to you at UCL are: Notepad/Wordpad This is a plain text editor. It is very simple to use but has limited functionality, can be difficult to differentiate between tags and content. Notepad++ This an enhanced plain text editor. Enables specification of language being scripted. Will colour code elements of the text to enable differentiation between tags and content. The document in Figure 1 is a Notepad++ file. Dreamweaver CS6 This is a WYSIWYG tool but can also be used for manual coding or combined visual and manual coding. It is available to students as part of the desktop but staff will have limited access. It is part of the Abobe Creative Suite and can be used in conjunction with other Adobe Creative Suite products such as Fireworks and Flash.An increasingly common tool for developing web pages are Content Management Systems (CMS). Different CMSs offer differently levels of functionality and edit ability. The benefits of using a CSS are that limited technical knowledge is required and through the use templates a common house style or corporate image can be more easily enforced. The CMS used by UCL for the production of its web presence is SILVA and it is administered by the ISD Web Communications team. If the web page(s) you are creating are part of UCLs web presence these should be created through the CMS, see the SILVA web pages for more information (http://www.ucl.ac.uk/isd/staff/websites/silvaCMS/). HTML: Tags and their usageAdding and formatting textTo add text content to a HTML document it simply needs to be entered between the BODY tags of the document, but as you can see below, this is displayed as plain text:

Figure 3: HTML definition in Notepad++

Figure 4: HTML document viewed in web browser

Although the text appears formatted in the text editor, as tags have not been used this has not been reflected in the web browser interpretation.The core tags for text formatting are:
Defines a line break.

Defines the start and end of a paragraph.

Defines heading 1 text

Defines heading 2 text

Defines heading 3 text

Defines heading 4 text

Defines heading 5 text

Defines heading 6 text

Defines bold text

Defines emphasized text

Defines a part of text in an alternate voice or mood

Defines smaller text

Defines important text

Defines subscripted text

The example below shows how some of these tags could be used to improve the appearance of the previous example.Figure 5: HTML document with formatting tags

Figure 6: Formatted HTML document viewed in web browser

In addition to organising text in terms of lines and paragraphs, we can also define ordered and unordered lists, both have been used in the example below:Figure 7: HTML document defining lists

Figure 8: Lists definition HTML document viewed in web browser

Defining colour and font stylesIn addition to formatting the text, tags can also be used to define its appearance. The FONT tag can be used to define the typeface, size and colour of font for our document. The typeface and colour specified are only applied to content entered between the opening and closing tags.This is demonstrated in the example html document below:Figure 9: HTML document utilising font tag

Note how there is low contrast between the yellow and orange text and the background.This is an example of poor design.

Figure 10: Utilised font tag html document viewed in web browser

Additionally, we can define the overall appearance an html document, these are defined within the opening BODY tag. The example below illustrates how the BODY tag can be used to define background and text colour:

Figure 11: HTML document utilising body attributes With the background colour change, the orange now more visible but the yellow and pink are less visible.This is another example of poor design.

Figure 12: Utilised body attributes HTML document viewed in web browser

Please note, these tags are supported by all major browsers but have been removed from HTML 5.0 and replaced by use of CSS, see Section 5 for more information.Inserting images & multimediaIt is exceptionally rare for a modern web site to contain just textual content. Images are not inserted into an html document as they are in word processing or presentation tools but are referenced via link and rendered in the document along with any text by the web browser. It is therefore important that the file name and location specified in the html document matches how and where the file has been saved.In the example below the html document and the image file are saved in the same location.If you were using xhtml you would also need to include otherwise the image will not be included.Note the use of alt, this is to aide accessibility as will be utilised by tools such as page reading software.

Figure 13: HTML document utilising image tag

Figure 14: Utilised image tag HTML document viewed in web browser

In pre-HTML 5.0 standards you were able to specify the alignment of the image and the image size, these attributes are no longer supported.In addition to static images we can also define the inclusion of video and audio files. As with images they are referenced via a link and rendered in the document along with any text by the web browser. Again, it is important that the file name and location specified in the html document matches how and where the file has been saved.In this example I have used the VIDEO tag defined in the HTML 5.0 standards, please be aware that this may not function as intended in some older browsers and only supports a limited range of file formats.Width & height specify the size the video will appear on the page.Adding the text controls in the opening video tag adds play control tools.The plain text is an error message that is displayed if browser is not compatible.

Figure 15: HTML document utilising video tags

Figure 16: Utilising video tags HTML document viewed in web browser

The AUDIO tag should be used for the inclusion of sound files (supports Ogg, mp3 and wav). The tag was introduced in HTML 5.0 and as like the video tag it may not be supported by older browsers.Adding the text controls in the opening audio tag adds play control tools.The plain text is an error message that is displayed if browser is not compatible.

Figure 17: HTML document utilising audio tags

Figure 18: Utilisation of audio tags HTML document viewed in web browser

Where images and multimedia files are stored in a different location to the html files you will need to identify the location in the URL. Ideally all links should be relative and not absolute as this will reduce problems when uploading.Example absolute URL: C:\Users\Samantha Athern\Documents\manual files\media\crocodile.jpgExample relative URL: \media\crocodile.jpgMore information is available here: http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htmDeveloping a navigation systemA navigation system for a web site can be implemented in a number of ways, these can include: Importing a ready built navigation bar created in a program such as Fireworks This is best done in a program such as Dreamweaver (Insert -> Image Objects -> Fireworks html) Built using a combination of image files and hyperlinks, java script can also be used to create buttons Using text hyperlinksIn this document we will demonstrate how to make text links and links on images, in Section 6 we will introduce some simple Java Script events for creating roll-over graphics and buttons.To create a hyperlink within a document we use the A tag in conjunction with the attribute href.The tag signifies we are creating a hyperlink, href is used to define the destination URL, e.g.:UCL Home Page This tag can be used to create both internal and external links as demonstrated below:

Figure 19:HTML document utilising tag and href attribute

Figure 20: Utilisation of and href attribute HTML document viewed in web browser

Links can be added to images in a similar manner, see the example below. When making an image a link you need to consider accessibility.

Figure 21: HTML document combing and tags

Figure 22: Utilisation of combined and tags html document in web browser Figure 23: Destination of image link

Using anchorsWhereas the tag and href attribute are utilised to create links between pages (files), anchors are used to create links within a page (file). Anchors are attributes of an individual page and cannot be accessed by other pages.Anchors in combination with the tag can be used to create tables of contents for individual pages, this can be helpful when pages contain large volumes of information as illustrated here: http://en.wikipedia.org/wiki/University_College_LondonDefinitions of anchorsAnchors are defined in situ then referenced using href

Figure 24: HTML document utilising anchors

Figure 25: Utilisaton of anchors HTML document viewed in web browser

Figure 26: Jump to point from Dreamland link Layout toolsSpecifying the position of objects in an HTML document can be quite difficult. In the early days of the WWW frames were commonly used but were troublesome as not supported by all browsers. Frames no longer appear in the HTML standards, increasingly Layers are becoming the choice du jour for web developers but Tables are also extremely useful. The use of Tables and Layers is discussed in the following sections.Using TablesTables are a simple but effective method for defining the layout and/or presentation of data in an HTML document. Tables are quite flexible in that cells can be split and merged, please be aware that cell size is not absolute. If an item larger than the cell size is inserted it will enlarge that cell but squeeze or stretch others.Setting border to 0 will stop a border from being displayed.The columns in a row are identified by the tag.The use of colspan in merges cells horizontally.The use of rowspan in merges cells vertically.

Figure 27: Use of in a HTML document

Figure 28: Table with merged and split cells with border = 1

Figure 29: Auto resized table with border = 1

Using DivDiv tags are a more flexible alternative to Tables as they are independent of each other and be placed anywhere in the body of an HTML document including layered upon each other. Divs are rectangular in shape but can be of any dimensions. The example below shows how Div tags can be used to separate an HTML page into sections. enables the grouping of elements in a document.Encapsulated elements are defined between the opening and closing tags.Appearance of the DIV is defined in the opening tag.

Figure 30: HTML file defining DIVs

Figure 31: HTML file defining DIVs, displayed in web browser Cascading Style Sheets (CSS)What is a CSS?A cascading style sheet (CSS) is a document that can be used to define the style and layout of web pages. CSS files are attached to or defined within HTML documents, they are extremely powerful as they can completely change the appearance of web pages this is illustrated on the web site: http://www.csszengarden.com/. Most modern web sites separate the content (defined in the HTML document) from the design (defined in the CSS document) and were introduced in HTML 4.0.Defining a CSSA CSS file is a series of rules for describing the presentation of specified elements. A CSS rule consists of two parts: a selector and one or more declarations. All standalone CSS files end in .cssThe selector is usually the HTML element that you want to define e.g. H1.The declaration(s) consists of one or more properties and values e.g.{ color:red; font-size:12px;}Each declaration always ends with a semicolon (;) and are encapsulated in curly brackets ({}).To make rules more readable each declaration can appear on a separate line e.g.:H1{ color:red; font-size: 12px;}A comment can be added to a CSS file by using /* and */ e.g.: /* this is a comment */.For further information about CSS rules please see: http://www.w3schools.com/css/default.asp Deploying a CSSCSS styles can either be defined in a standalone file or defined in the head of an HTML document. The benefits of using a standalone file are that you only need to change one CSS document to change the appearance of all HTML documents, styles can be included with a single line in the HTML documents and the content and style information are separated. To define CSS styles within an HTML document the tag needs to be used, as shown in the example below:

Figure 32: style definition within an HTML document

Figure 33: Header included styles HTML document displayed in web browser

To attach an external CSS file to an HTML file the link tag should be used, e.g.:

Please be aware that the stylesheet will be superseded by any style information defined within the HTML tags as shown in the example below:

Figure 34: HTML document incorporating CSS stylesheet and tag defined styles

Figure 35: HTML document from Figure 34 as viewed in a web browser

Interactive elementsWhat is Java Script?Java script is a scripting language that can be used to add functionality and validate input in an HTML document, and to communicate with web servers.Java Script is not Java per se but does share some syntax. In this document you will be introduced to some very simple commands.More detailed information and tutorials can be found on the W3 schools website: http://www.w3schools.com/js/default.asp

Creating roll-overs using Java ScriptJava script is particularly useful for adding simple interactive elements to an HTML document such as image swap, on-click and roll-over behaviours. In this section you will see how Java Script events can be used to create a roll-over image. To add Java Script to an HTML document, the Java Script functions need to be defined within the of the document and the scripting language identified:

As we are creating a roll-over image we want the image to change when the mouse rolls over the image and when it rolls off the image, this corresponds to the events onMouseOver and onMouseOut which will trigger Java Script functions. In this example we have saved the image files to be used in the same location as the HTML document. The next step is to define the functions:

Once this has been done, the functions can be called from within the body of the HTML document from the events:

The initial image will always be displayed, until the mouse is placed over it, as below: Figure 36: HTML document in browser showing original image

Figure 37: HTML document in browser when mouse is placed over image

This is a very simple example of what can be done using Java Script, other more useful applications of this technique can include adding text descriptions to elements of an image.Hosting Hosting OptionsFor a web pages(s) to be available on the internet it will need to be uploaded to a server. Storing a web page(s) on a server is known as hosting.Dependent on the purpose of your web page(s) and your level of IT skills there are a number of different hosting options available to you. If your page(s) are not forming part of a pre-existing web site you will need to obtain a domain name. The domain name will form the address of your web page(s) and forms part of your online identity.Domain names are sold for a particular domain e.g. .net, .com or .co.uk. It is possible to have different web sites with the same main name but in a different domain, dependent on your purpose you may wish to purchase multiple domains. Please be aware that domain names are not eternal and will need to be repurchased after a set time period, you will be informed of this at time of purchase.If you have strong technical IT skills it is possible to set up your own server for hosting your page(s), but in most cases this is done on an organisations servers or on those provided by a 3rd party. If your page(s) are for your work or study at UCL these will be usually hosted on the UCL servers, all UCL staff and students are allocated server space for their own web page(s), the following section will describe how to upload files to this area.If you opt for 3rd party hosting different options are available including free hosting, unmanaged hosting and managed hosting. Most free hosting solutions provide limited space and require use of the organisations domain name. Your own domain name and extra storage and facilities such as a mail box are available at an extra charge. Unmanaged hosting is when you are paying to purely store your files on someone elses server, you are responsible for ensuring all files are backed up and for the security of your data. Managed hosting solutions are very popular and there are many different options available depending on your budget, your purpose and how many visitors you expect to attract. Managed hosting can provide mailboxes, e-stores, the ability to produce online portfolios for media portfolios and content management systems (CMSs) to help generate or manage your content. The majority of the UCL web pages are produced using the CMS SILVA. For more information about SILVA please see: http://www.ucl.ac.uk/isd/staff/websites/silvaCMS

FTP Connection and uploadingEvery student and staff member at UCL has web space allocated to them for the creation of a personal web page(s).The URL for your personal page(s) is: http://www.ucl.ac.uk/~your_ucl_useridIn order to add, edit or remove content from your web space you will need to be able to connect to the server, to do this we will use the utility WinSCP and the protocol FTP. The following instructions are designed for those working in a cluster room or via the remote desktop.To open WinSCP and connect via FTP:1. Click on Start2. Click on All Programs3. Click on the folder: Applications T-Z4. Click on the folder: WinSCP 5.1.35. Click on: WinSCP

When WinSCP opens the following dialog box will appear:

1. From the File protocol: drop-down list select FTP2. In the Host name: box, type: ftp.ucl.ac.uk3. In the User name: and Password: boxes type your UCL UserID and password.4. Click on LoginA window like the one below will appear, the exact contents will differ depending on what you have on your drives:Files on your N: drive are displayed in the left hand pane.Files that are stored on the server are displayed in the right hand pane.

Web page(s) and associated content need to be stored in the server side folder html.pub, any files not stored in this folder will not be published on the WWW.Example contents of an html.pub folder are:index.html is the homepage of my web site and will always be displayed.The remainder of my content is organised into folders, e.g.:

To end the FTP/WinSCP session:1. Click on the Session drop-down menu2. Click on Disconnect

To add files to html.pub:1. In the right hand pane, open the html.pub folder

2. In the left hand pane, browse to the location of your web site file(s)

3. In the left hand pane, select the file(s)/folder(s) to be moved to html.pub

4. Drag and drop the selected files from the left hand pane, to the right hand pane. The Copy dialog box, below, will be displayed:

5. To copy all selected files click on Copy button, else to only copy new or updated files check the New and updated file(s) only checkbox then click the Copy button.The selected files will now appear in the html.pub folder.

To remove files from html.pub1. In the right hand pane, open the html.pub folder2. Browse to the location of the file(s) you wish to remove3. Select the file(s) to be removed4. Press the Delete key on our keyboard (on a Mac )5. A dialog box will appear asking you to confirm if you want to delete the file6. Click on OK To back-up html.pub filesIt is important that a back-up of your web page(s) is kept just in case there is an error with the server.Back-ups should be stored in a separate location to the original files.To copy files from html.pub:1. In the right hand pane, open the html.pub folder2. Browse to the location of the file(s) you wish to remove3. Select the file(s) to be copied4. In the left hand pane, browse to where you wish to store the copied files5. Click on Files|Copy6. The Copy dialog box will re-appear, check the Copy to: location, if this is incorrect, click on Browse to find the correct location

7. Click on Copy

MaintenanceAccuracy of contentWeb sites are only as good as the data on them. If the data on a web site is not accurate or up-to-date it is an unreliable source of information and will be viewed poorly by users. It is therefore important that you routinely update the data on your web page ensuring that it is accurate and current.Additionally, if there is a change of staff the responsibility for the maintenance of the web site needs to be considered. When your web site is no longer active you should consider either removing it or adding a notice to the pages so that users are aware.

Backing up your web siteAs with all files it is important to make back-ups of your web site in case of damage or loss. Depending on the volume of the data being processed through or added to your web site depends on how often you will back up your web site.It is important that back-ups are scheduled and that a protocol is defined. The back-up copy of the web site should always be stored separately from the actual web site. This could be in the cloud, on a separate server or on removable media. It is also advisable to retain back-ups for a designated period of time in case of queries or a need to roll-back[footnoteRef:4]. [4: Restore the web site to a previous version.]

Depending on how you have hosted your website the exact procedure for backing up your files will vary. Information will be available from your hosting provider.Further informationInternet sources Standards:http://www.w3.org/standards/http://www.w3schools.com/http://html-color-codes.info/

Cascading style sheets:http://www.csszengarden.com/

Online tutorialshttp://webdesign.tutsplus.com/category/tutorials/http://www.vtc.com/internet.htmhttp://www.entheosweb.com/

Recommended booksHow to Design Websites (Portfolio Skills) by Alan Pipes (17 Oct 2011)The Principles of Beautiful Web Design 2nd Edition by Jason Beaird (30 Nov 2010)Web Design in a Nutshell (A Desktop Quick Reference) by Jennifer Niederst, Aaron Gustafson, Tantek elik and Derek Featherstone (28 Feb 2006)Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Richard Clark, Oli Studholme and Divya Manian (19 Dec 2012)HTML5 Pocket Reference (Pocket Reference (O'Reilly)) by Jennifer Niederst Robbins (8 Aug 2013)PHP, MySQL, JavaScript & HTML5 All-in-one For Dummies (For Dummies (Computers)) by Steve Suehring and Janet Valade (9 Apr 2013)HTML5: Up and Running by Mark Pilgrim (24 Aug 2010)CSS3 Foundations (Treehouse Book Series) by Ian Lunn (7 Dec 2012)CSS3: Visual QuickStart Guide (Visual QuickStart Guides) by Jason Cranford Teague (23 Sep 2010)JavaScript: The Definitive Guide (Definitive Guides) by David Flanagan (10 May 2011)Professional JavaScript for Web Developers by Nicholas C. Zakas (27 Jan 2012)

29UCL Information SystemsHosting