06
  • Introduction

    It is possible to create web pages without any knowledge of HTML using WISIWIG editors such as Front Page and Dreamweaver.

    However, a basic knowledge of HTML is necessary for a proper understanding of how web pages work.

    It also allows you to examine web pages on other web sites to see how they work; and, of course, those taking this course may not have access to such programs.

    The introduction to HTML that forms part of this course will enable you to write basic web pages by using HTML 5 and CSS so far, even if your only editor is Notepad++.

    This course is aimed at those who have a basic competence using a HTML and CSS and familiarity with the use of a web browser, such as Internet Explorer.

    It is intended to introduce you to the basics of creating web pages (using HTML) and some understanding about the setting up of a web site.

    💡 Download PDF Version of Lecture
  • General benefits to be gained

    A knowledge of how to produce Web pages using HTML;
    An awareness of good HTML5 & CSS in terms of authoring professional pages.
    An ability to expand upon basic IT skills and so enhance career
    development plans and prospects.
    An awareness of general trends in the development of IT with specific relation to the World Wide Web.
    An awareness of the further facilities available for more advanced Web presentation.

    Objectives

    At the end week 6 of the course, you should be able to:
    Demonstrate elementary competence in composing Web pages using HTML5 and CSS;
    Design and plan a sequence of related Web pages;
    Prepare suitable graphics for incorporation in a Web page;
    Upload files to a web server to make your website live;
    Understand some of the skills involved in good design for Web pages.

    So far, we have learned

    Understand the basics of HTML5;
    Create a basic web page using a simple editor (Notepad ++);
    Adding formatting to the text on a web page;
    Understand how to link to other webpage using hypertext tags;
    Understand how to use relative links to organise your web pages;
    Know how to edit and make corrections to your HTML documents;
    Add images to your web pages;
    Upload the pages to the live web site and view;
    Good layout for web pages;
    Lists and tables for better layout and presentation of information;
    Use of Cascading Style Sheets (CSS) to impose standard formatting on a web site; How to vary the standard style;

    Design steps

    Follow 4 steps for website design process:
    Step 1: Plan
    Step 2: Design
    Step 3: Develop
    Step 4: validate
    Step 5: Audit your website, knowledge transfer and release

    A basic web site

    A basic web site will consist of:

    a) An index.html page plus at least two more pages.
    b) The index.html and your other pages should be linked
    c) One page should contain a link to an external web site
    d) Your site pages should contain examples of: an image, a table, a list
    e) A CSS StyleSheet file which you have edited
    f) Your pages should be uploaded to the live site where your tutor can view them.

    If there are any problems in completing the last item (upload) email your web page files to your tutor.
  • Step 1: Plan

    Collect all possible information (requirements) regarding your website
    Analysis the information (requirements)
    defining goal(s) and objectives in order to achieve your goal (s).

    Plan how your web pages are to be laid out and how that person on the other side of the world looking at your pages is to find specific information.
    Make sure the text is easy to read and do not use too many images on one page as this can severely slow downloading.
    A bulky amount of material can be broken down into several separate, linked, web pages.

    Useful links:
    http://www.webstyleguide.com/wsg3/index.html; http://usableweb.com/
    http://webdesign.about.com/od/webdesign/Web_Design.htm

    What is requirement?

    Requirements define the expected services of the system (service statements) and constraints that the system must obey (constraint statements). It is a condition or capability to which the system must conform.
    Service statements are also called functional requirements which include the necessary business functions and the required data structure etc.
    Functional requirements are which the system has to have them.

    Constraint statements are also called non-functional requirements or supplementary requirements. It can be grouped into different categories of restriction imposed on the system such as supportability, reliability, security or usability etc.

    Need to know what this project about and how IT (Information Technology) can help?

    Where does a project come from?
    A project is initiated to meet a business needs, whether it results from competition, cut costs or expansion etc.
    For example:
    Competition: need to develop a website to reach more customers
    Cut costs: develop a online check-in system for hotel to cut hiring staff costs.
    Expansion: A exist fashion company is going to set up a new range of the fashion product on line and needs IT to help their business

    How to gather right requirements from stakeholders/end users?

    Marketing survey (online or paper base)
    Interview
    Brainstorm
    Focus group
    Ethnography is an observational technique which is useful in identifying essential cooperation in work processes.

    Requirements Management Is Not always Easy to Manage Because…

    Requirements:
    Are not always clear.
    Come from many stakeholders.
    May not always be easy to express clearly in words.
    Relate to one another and to other deliverables of the software development process. It can be very complicated such as system of system
    Requirements may keep Changing in order to meet the business needs.
    Are difficult to control in large numbers.
  • Step 2: Design

    How to structure of a Web Site
    When you plan your web pages, you should first list all the information (as headings) you wish to put on them.
    Bring all the headings that belong together into related groups: each group will require a separate page, or group of related pages, which will be individual parts of your web site.
    If there are to be a lot of web pages, it is advisable to have each group of pages kept in a separate folder.
    Remember that any individual pages, which contain a lot of data, should be broken down into smaller pages, linked together. This break down should be logical so as not to interrupt the flow of reading.

    Useful link for design tip:
    Web Design Tips

    It’s impossible to make webpages that will look the same in all browsers;
    which browser versions you support
    aware your webpages look different than on different web browsers, in this case, we use Firefox web browser to test your webpages
    aware of webpage font restrictions or recommendations and web page download considerations
    Specify which Resolution / Screen Size the Webpages should be designed to
    Specify a fixed width or fluid layout

    Useful link:
    http://webstyleguide.com/wsg2/interface/user-centered.html

    Always consider that you will not want to put everything you wish to add to your site onto one web page.

    People who access your web site do not want to scroll through lots of text – and if you have images as well, then it will take a long time to download which will affect your webpages’ performance. You need to organise the information on your website, spreading it over several pages that are organised and linked via an initial “home/index page”.

    Content should be supplied by the client in a form easily used
    Who is supplying the text?
    Who is supplying the images?
    Get the client to supply all text, photographs and content in electronic format
    Make sure text supplied, if formatted, is in a web-ready format
    The client should supply an example site-plan, in a bulleted list
    The client needs to specify any specific functionality required at the outset

    Presentation v.s. Content
    mainly concerned with how to use HTML to design and format your web pages.
    The purpose is when you have information you wish to reach a lot of people. This content is vital and must be well written, brief and clear. You must get your message across. So the first thing you must always do is work out what your content will be and how to structure it to make it easy for the user to find the particular information they require. After this, you consider presentation – design – and this must always be done carefully so that it enhances access to content and does not obscure it.

    Useful links:
    http://www.webpagesthatsuck.com/
    http://www.w3.org/TR/WCAG10/
    http://www.e2solutions.net/articles/content-vs-designing.html

    A Winning Website Is never ‘Finished’!
    The client should keep his site up-to-date with news if he has a Content management system(CMS)

    “A web content management system (WCM or WCMS) is a CMS designed to support the management of the content of Web pages. Most popular CMSs are also WCMSs. Web content includes text and embedded graphics, photos, video, audio, maps, and program code (e.g., for applications) that displays content or interacts with the user.”

    data source: https://en.wikipedia.org/wiki/Content_management_system accessed 08/02/2017

    A website is subject to Laws of The Land and the client should investigate this Website Accessibility Recommendations
  • Step 3: Develop webpages

    Now, it is time to create your website.
    Writing all the code that brings the content to life and makes the site a reality.
    For most commercial websites, plain HTML and CSS alone can not deliver all the functionality the site requires.
    From week 7, we are going to move to JavaScript and PHP topics which help you to manage your webpages and make your webpages more interactive and dynamic such as handling forms, manage customer booking (synchronising data to and from a database. You will learn how to integrate client-side behaviours with JavaScript

    Useful URL link regarding the developing web pages
    www.coffeecup.com/

    Linking pages

    What gives web pages their real effectiveness are the reference tags that involve hypertext links - that is, links to other web sites - and to other pages on your own web site that you have created yourself. Thus your home web page can become the front end of a large number of interlinked pages – and also a link to many other web sites with related interests.

    Example of an absolute hypertext link to another Web site:

    <a href="http://www.gcu.ac.uk">
    

    Example of an relative link. <a href=”social.html”>Go to my social page</a> or it can be in another folder on that page.

    A link from this page back to the home page (index.html) would be <a href=“../index.html”>Home Page</a>

    Email links: You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is:

    <a href="mailto:email_address@mailserver">Email Address</a>
    
  • Step 4: test

    Functional requirement tests:
    Test for – all the hyperlinks in your web pages, tables and images used for displaying information, such as:
    Check all the links:
    Test all your external hyperlinks from all the pages to specific domain under test.
    Test all your internal hyperlinks if it works.
    Test links jumping on the same pages.
    Test to check if there are any pages without a hyperlink.
    Finally hyperlinks checking includes, check for broken hyperlinks in all above-mentioned hyperlinks.

    Non-functional requirement tests:
    Usability testing:
    Compatibility testing
    Performance testing

    Non-functional requirement tests:
    Usability testing:
    Test for navigation:
    Navigation means how an user surfs the web pages, different controls like buttons, boxes or how the user uses the links on the pages to surf different pages.

    Usability testing includes the following:
    Website should be easy to use.
    Instructions provided should be very clear.
    Check if the instructions provided are perfect to satisfy its purpose.
    Main menu should be provided on each page.
    It should be consistent enough.

    Content should be logical and easy to understand. Check for spelling errors. Usage of dark colours annoys the users and should not be used in the site theme. You can follow some standard colours that are used for web page and content building.

    Non-functional requirement tests:
    Usability testing:
    Content should be logical and easy to understand. Check for spelling errors. Usage of dark colours annoys the users such as any annoying colours, fonts, frames and should not be used in the site theme. You can follow some standard colours that are used for web page and content building.
    Useful link: http://www.w3schools.com/colors/colors_names.asp
    Other user information for user help:
    Like sitemap or useful links etc. Sitemap should be present with all the links in websites with proper tree view of navigation. Check for all links on the sitemap.

    Non-functional requirement tests:
    Compatibility testing
    compatibility test to be executed:
    Browser compatibility: Test web application on different browsers like Internet explorer (IE), google chrome, Firefox, Safari, Opera browsers with different versions.
    Operating system compatibility: Some functionality in your web application is that it may not be compatible with all operating systems. All new technologies used in web development like graphic designs may not be available in all Operating Systems. So test your web application on different operating systems like Windows, Unix, MAC, Linux and Android and OS.
    Mobile browsing: Test your web pages on mobile browsers.

    Non-functional requirement tests:
    Performance testing

    Test application performance on different internet connection speed.

    Webpages upload testing:
    Test if many users are accessing or requesting the same page.
    Can your system sustain in peak-load time?
    Website should handle many simultaneous user requests, heavy load on specific pages etc.
  • Validation your HTML and CSS

    Mainly validate the site for HTML syntax errors.
    For CSS:
    https://jigsaw.w3.org/css-validator
    http://www.css-validator.org/

    For html:
    https://validator.w3.org

    Audit your website

    1.Duplicate Page Titles –
    Every Page on your site should have a unique page title and a unique meta description. Avoid having a large numbers of pages with little content on each page.

    2. Duplicate Meta Descriptions – Every Page on your site should have a unique meta description –it is best to add meta description yourself. Don’t auto-generate it unless you are sure you know what you are doing.

    Tip, if you can’t be bothered putting a meta description in yourself, leave it out. Don’t auto-generate stuff like this, unless you know what you are doing to make each meta-description unique. Meta descriptions are for humans, not Google, IMO.

    3.Duplicate Content – Duplicate content is problematic – ensure every page is necessary and only primary content is crawled (that is, not the PDF or text only version of a page)

    4.Building A Navigation System Google Cant Follow
    Should do: Make sure Google can read your navigation system and so your content
    Should not do: lash websites for instance can cause big problems in Google, even today.

    5.Building A Site Structure That Does Not Emphasise Important Content – Create a site structure for your website eg Home/ Categories/ Subcategory / Products Google can spider – Don’t make a linear navigation route to content that means you have to click 6 times to get to a product page

    6.Sloppy Interlinking causing canonical issues – Google can screw up your website if you are giving it canonical woes and even have went as far to support a canonical tag to help

    7.Building a site with a lot of fancy CSS, the result being a lot of what Google will determine ‘Hidden Content’ and actually penalise un-trusted sites

    Colours

    There are only a small number of “named” colours: if you wish to select from a wider range, use hexadecimal colour codes. #E6E6FA

    You could have different colours for different pages, as a sort of “colour coding”; but this is really only suitable for large sites with lots of different topics.

    Fonts

    Text Fonts
    Setting background colour in the body tag lets you produce some nice effects, but there is a limitation. Whatever you set here applies to the whole of the page. Also, you will have noticed that the page always displays the same type of font.
    http://www.angelfire.com/al4/rcollins/style/fonts.html
    Font sizes can be absolute or relative; that is you may specify a specific size or a size relative to the default font size: e.g. font-size: 12px (in pixels) or font-size: 12pt (in points). Relative font sizes are set using attributes such as smaller, bigger. See this web page for the syntax:
    http://webdesign.about.com/od/styleproperties/p/blspfontsize.htm

    Useful Link
    Fonts
  • Summary

    should understand basic tags in HTML,

    understand reasons for separating presentation from content,

    have some understanding of good style, web site organisation and

    know how to learn more as necessary.

    Work out what you want to put up first – identify your stakeholder(s) first and contact them to see what requirements they want from the website.
  • List of useful URLs

    For Web page design.
    HTML Guides
    http://www.w3schools.com/html/default.asp
    http://www.w3schools.com/css/
    http://www.w3schools.com/cssref/
    http://www.w3.org/Provider/Style/Overview.html
    http://htmlgoodies.earthweb.com/primers/basics.html

    For graphics:
    http://www.freeimages.co.uk/
    http://www.istockphoto.com/index.php

    Good website Design
    http://www.washington.edu/doit/Resources/web-design.html
    http://www.webpagesthatsuck.com/
    http://www.newmediastudies.com/diy-des.htm
    http://www.shire.net/learnwebdesign/design.htm
    http://www.ratz.com/featuresbad.html

    Useful websites:
    https://developer.mozilla.org/en/Web_Development
    http://www.bbc.co.uk/history/interactive
    http://historicalpodcasts.googlepages.com
  • Suggested Reading materials

    Foundation HTML5with CSS3
    Chapter 10 page 331-338