Website Security

Website Security

Learning Outcomes:

Compulsory E. Social Implications

d. Threats and Security on the Internet (extract)

• Explain authentication and authorization as a means to control access of information on the Internet.
• Be aware of the latest developments in security measures.

Authentication

• Authentication means identification of users.
• One of the methods is to use biometrics. Biometrics is a known and documented attributes of a user.
• The attributes can be fingerprint identification, voice recognition, retina scan, iris scan, face recognition, etc.

Security measures for login process

• Limit the number of login attempts
• Two-factor authentication
• Prevent keystroke logging – randomized numeric keypad, partial password
• CAPTCHA – protect against bots. Accessibility is tackled by permitting users to opt for audio or sound CAPTCHA

References:

https://www.alliancetechpartners.com/common-authentication-methods-used-network-security/

https://swoopnow.com/modern-password/

http://www.captcha.net/

Dynamic and interactive web pages

Dynamic and interactive web pages

Learning Outcomes:

• Understand the difference between server-side and client-side technologies.
• Describe the characteristics of client-side scripting.
• Create interactive menus upon user selection.
• Students should be able to create interactive user selection, such as the 2-level interdependent select list, pull down menu and click-to-expand menu.
• Validate and manipulate input data.
• Students should be able to check text data, numeric data, required input, length of input, manipulate radio buttons and check boxes and valid values for all input data. They should also be able to perform simple computations to create quizzes and simple mathematics games.
• Retrieve and save client information.
• For example, the use of Cookies for collection of user information.

Server-side scripting

• Server-side scripting is essentially programs that run on the server. In the context of dynamic web pages, the server receives data from the client and process the data with the programs on the server.
• Example of server-side scripting: PHP
• Example of its use: 
• Validate the password provided by client
• Counter (number of visitors - use server-side scripting or external service provider)
• Features (compared with client-side scripting):
• codes hidden from client (program security)
• increase loading to server (potentially slower server response)

Client-side scripting

• Client-side scripting means the client runs the scripts provided by the server. The browser is responsible for running the scripts.
• Example of client-side scripting: JavaScript
• Example of its use: check whether the inputted data is number
• Features (compared with server-side scripting):
• Codes is visble to client
• Reduced loading to server (the loading is shifted to client)

Further reading:

https://www.ionos.com/digitalguide/websites/web-development/server-side-and-client-side-scripting-the-differences/

Interactive menus – JavaScript required

• 2-level interdependent select list as an example.
• When the first list is selected, the corresponding second list will be shown. The data in the corresponding second list could already by stored in the html document or retrieved from the server, as stated in the html document. This could potentially reduce server loading as only partial list is downloaded from the server.

Retrieve and save client information - cookies

• Cookies is a text file stored on the computer when you visit some websites.
• Examples of its uses:
• Identify users
• Personalize the web site with your preference
• Shopping cart function – save your selected item so that you can pay for all the items once you completed your shopping, or to pay it next time.

Further reading:

https://www.allaboutcookies.org/cookies/

https://www.scientificamerican.com/page/use-of-cookies/

Presenting information on the Internet

Presenting information on the Internet

Learning Outcomes:

• Outline and discuss the various factors to be considered in the construction of web pages.
• By demonstrating some web sites, students should discuss successful design factors such as the web site structure, audience awareness, content purpose, site map, use of the workspace available on each page, arrangement of elements on screen, appropriateness of embedded graphics/sound/animations, use of frames and meaningful contextual links, grouping related information into tables/lists, providing channels for feedback, providing details in downloadable files, and structuring contents for easy printing.
• Students should also discuss the hardware constraint and platform compatibility factors such as computer processing power, bandwidth limitation, browser and plug-in compatibility, viewing environment, and language and colour compatibility.
• They should analyse and judge the use of the right resolution and file format for images and photos in order to keep download time low.
• Know that there are guidelines to cater for web accessibility by people with special needs.
• For example, providing an additional text only version, and including brief descriptions and text links in existing websites to make the web pages more accessible to the visually impaired.

Construction of web pages

Successful design factors

Content related:

• audience awareness
• content purpose
• web site structure
• site map
• Advantages of site map:
• Help developer to understand the web site structure
• Help user to navigate
• Help search engine to index the web site
• grouping related information into tables/lists
• providing details in downloadable files
• structuring contents for easy printing
• Create printable version using CSS
• Avoid page break for certain contents

Layout related:

• use of the workspace available on each page
• arrangement of elements on screen
• appropriateness of embedded graphics/sound/animations
• use of frames and meaningful contextual links  
• Advantages of frames (Disadvantages without frames):
• Some contents remain visible all the time e.g. navigation menu
• Advantages without frames (Disadvantages of frames):
• Suitable for small screen size
• printer friendly
• more easy to be indexed

Providing channels for feedback

Hardware constraint and platform compatibility factors

Hardware constraint:

• computer processing power
• bandwidth limitation

Platform compatibility:

• browser and plug-in compatibility
• viewing environment
• Mobile platform characteristics:
• Smaller screen display
• Limited data transfer rate
• For mobile platform:     
• Simplify layout
• Reduce file size: compress audio, reduce image resolution, remove unnecessary multimedia elements
• Build text only version
• Make font adjustable        
• language and colour compatibility.

Use of the right resolution and file format for images and photos in order to keep download time low.

Further reading:

https://feedbackguru.com/articles/design-principles-for-web/

https://theblog.adobe.com/a-comprehensive-guide-to-web-design/

Web Accessibility

• Websites are designed in the way that people with disabilities can use them.
• Different types of disabilities require different web designs to facilitate web accessibility

Examples of disabilities	Solutions
Visual impairment	Screen reader software Refreshable Braille display
Hearing impairment	Text-only version Transcript of videos/audios Videos with sign language
Upper limb disability	Allow sufficient time for filling in interactive forms

Further reading:

https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibility/promulgating_resources/handbook/

https://www.web-accessibility.hk/en/

https://www.w3.org/WAI/fundamentals/accessibility-intro/#:~:text=Web%20accessibility%20means%20that%20websites,contribute%20to%20the%20Web

HTML 4

Hypertext Markup Language (HTML) 4

Learning Outcomes:

Elective C. b. Web Site Development

• Create and manipulate browser windows.
• Students should be able to create pop-up windows, manipulate window location, and window size, and allow scrollbars to appear when necessary. They should also be able to embed messages in browser window’s status bar such as displaying the current date, time, URL and its description.
• Perform special effects.
• Students should be able to create special effects such as scrolling messages, rotating image banners, mouse over effect, blinking text and changing colours.
• Publish web site.
• Students should know the basics of getting a domain name and web hosting. They should also be able to transfer web pages onto web sites on the Internet.

Scrolling messages <marquee>

The <marquee> tag is removed in HTML5. Using CSS to create scrolling message is recommended.

Old method:

<marquee direction=”right’> your scrolling message </marquee>

Blinking text <blink>

The <blink> tag is removed in HTML5. Using CSS to create blinking effect is recommended.

Old method:

<blink> your blinking text </blink>

These functions require JavaScript

• Create pop-up windows
• Manipulate window location, window size
• Allow scrollbars to appear
• Embed messages in browser window’s status bar
• Rotating image banners
• Mouse over effect
• Changing colours

Considerations in publishing a web site

• Web hosting – server containing the web site
• Having your own server
• Server of a web hosting service provider (free or commercial)
• Advantages of using their service: low starting cost, additional services e.g. back up, hardware maintenance
• Having a domain name – so that people can link to your web site
• Obtain one from domain name registrar
• Use the subdomain of the web hosting service provider
• Uploading the web site to the server
• Web browsers
• FTP program – upload multiple files at the same time
• Tools provided by web hosting service provider

               

Reference:

https://websitesetup.org/register-domain-name/

HTML3

Hypertext Markup Language (HTML) 3

Learning Outcomes:

Elective C. b. Web Site Development

• Construct simple web pages.
• Students should be able to use different features (e.g. links, anchors, lists, tables, frames, Mailto and Fill-out Forms) in constructing the web page. They should also be able to embed multimedia elements in the web page and apply a consistent look and style across a set of web pages.

Lists <ol> <ul> <li>

Ordered list:

<ol>

<li>first item</li>

<li>second item</li>

</ol>

• Attribute: type (e.g. 1, a), start (starting number), reversed (reverse the order)

Unordered list:

<ul>

<li>first item</li>

<li>second item</li>

</ul>

Fill-out forms <form> <input> <textarea> <select> <option>

<form>

Single line text input <input type=”text” name=”…”>

Checkbox <input type=”checkbox” value=”…”>

Radio button <input type=”radio” name=”…” value=”…”>

Multi-line text input <textarea name=”…” cols=”40” rows=”2”></textarea>

List

<select name=”…” size=”3” multiple>

                <option value=”first”> first value </option>

                <option value=”second”> second value </option>

                <option value=”third”> third value </option>

</select>

Drop down list/menu (no multiple attribute used)

<select name=”…”>

                <option value=”first”> first value </option>

                <option value=”second”> second value </option>

</select>

Submit button <input type=”submit” value=”Submit”>

Reset button <input type=”reset” value=”reset”>

Advantage of using reset button: reduce time for reloading

</form>

Mailto

There are numerous ways to submit the inputted data in the form.

One of these is to send the data via email.

<form action=”mailto:abc@abc.com” method=”post” enctype=”text/plain”>

• The use of mailto will launch the user’s email client.
• method=”get”: the data will be incorporated into the end of a URL. Good for simple form and data security is not a concern.
• method=”post”: the data included in the HTTP request body.
• enctype=”text/plain”: organize the data in a more readable format.

Cascading Style Sheets (CSS)

3 ways to use CSS.

Inline: use style attribute in <body> section – apply to certain part or sentence

                <p style=”color:red;”> Hello World! </p>

Internal: use <style> within <head> section – apply to whole web page

                <head>

                <style>

                p

                {

    color: red;

    }

    </style>

                </head>

External: use <link> to link to external CSS file (.css)  – apply to multiple web pages of the website

Advantages of using CSS: 

• consistency in web pages design/formatting
• reusable (.css)
• easy maintenance
• follow current standards

HTML2

Hypertext Markup Language (HTML) 2

Learning Outcomes:

Compulsory C. c. Elementary Web Authoring

• Design and construct web pages for an intended audience and upload them onto the World Wide Web.
• The organisation of information includes ease of navigation, appropriate placement of links, tables, frames and multimedia elements, colour combinations, background design, font size and style, for an intended audience.
• Students are not required to memorise HTML codes. (you still need to memorise them for elective part)

Hyperlink <a href=”…”>

<a> defines a hyperlink

Attributes: href (destination address), target (where to open the linked document)

<a href=”http://...”> Full web address is used, this is known as absolute URL </a>

<a href=”local.html”> Relative URL is used for own web site. </a>

How relative URL works: https://kb.iu.edu/d/abwp

Bookmark/Anchor <a name=”…”> <… id=”…”>

2 HTML ways to create bookmark:

• <a name=”youranchor”></a>: name can only be used with <a>
• <p id=”youranchor”></p>: id can be used with any tag

Jump to the bookmark:

• <a href=”#youranchor”>: same page
• <a href=”URL.html#youranchor”>: different web page

Table <table> <tr> <th> <td>

<table>..</table> defines a table

<tr>..</tr> defines a row

<th>..</th> and <td>..</td> defines a cell, with <th> representing heading, specifically the content is bold and centered.

Visually, this is how it works,

<table>

<tr>	<th>..</th>	<th>..</th>	</tr>
<tr>	<td>..</td>	<td>..</td>	</tr>

</table>

Attributes: colspan (merge column), rowspan (merge row)

Some table attributes such as border, width, cellpadding, cellspacing, bgcolor, background and bordercolor are removed in HTML5. Using CSS to edit them is recommended.

Frames

<frame> and <frameset> tags are removed in HTML5. Using <iframe> is recommended.

• Old method:
  <frameset> defines the layout of the whole web page.
  <frame> loads web pages into each frame defined in <frameset>.
  
  Example:

<frameset cols=”30%,70%”>                                   <frame src=”link to your left side web page”>             <frame src=” link to your right side web page”> </frameset>

Created a frameset with 2 columns First frame Second frame

Manipulating frames

To open web page in certain frame / new browser. Compatible with <iframe>

(<frame> and <frameset> tags are removed in HTML5)

<a href=”new.html” target=”_blank”>                 Open in new window

<a href=”new.html” target=”_self”>                    Open in same frame

<a href=”new.html” target=”_parent”>                Open in parent frame (When frameset nested in frameset, it opens in the inner frameset)

<a href=”new.html” target=”_top”>                     Open in full browser window

<a href=”new.html” target=”(frame name)”>      Open in a named frame

Embed multimedia elements <embed> <img> <video> <audio>

<embed src=”…jpg”>

Attributes: src (source link), type (plug-in to initiate), width, height

<img src=”…jpg”>

Attributes: src (source link), alt (text description), width, height and many more

<video>

<audio>

Image with multiple links

• 3 different methods
• Image map: links at different part of the image
  https://www.w3schools.com/html/html_images_imagemap.asp
• Table: break down the image into smaller ones and rebuild by putting into table
• Use CSS to create links on the image

Color combinations

Color can be represented using different formats in HTML5/CSS.

Black color can be represented by

• the name black
• Hex code #000000
• RGB (0,0,0)
• HSLa (0, 0%, 0%, 1)

Hex code #000000:

• the first 00 represents the amount of red color. #FF0000 is red. (FF=255)
• the second 00 represents the amount of green color. #00FF00 is green.
• the last 00 represents the amount of blue color. #0000FF is blue.
• #FFFFFF is white.

Background design

The attributes bgcolor and background are removed in HTML5. Using CSS to edit background design is recommended.

•  Old method:
  <body bgcolor=”red”> </body>
  <body background=”….jpg”></body> this image will be displayed as tiles by default.

HTML 1

Hypertext Markup Language (HTML) 1

Learning Outcomes:

Compulsory C. c. Elementary Web Authoring

• Recognise the basic constructs of Hypertext Markup Language (HTML) which is a means to address cross-platform issues.
• Design and construct web pages for an intended audience and upload them onto the World Wide Web.
• The organisation of information includes ease of navigation, appropriate placement of links, tables, frames and multimedia elements, colour combinations, background design, font size and style, for an intended audience.
• Students are not required to memorise HTML codes. (you still need to memorise them for elective part)

HTML

• Stands for Hypertext Markup Language
• Markup Language: a computer language using symbols/tags in a text document to control its layout and format. E.g. html, xml
• Function: create web pages
• Current version: HTML5
• Reason to use current version: follow new standards, support new functions, avoid deprecated(outdated) element/attribute
• Possibly not supported by some old browsers

Basic structure of HTML document

<html>

<head>

<title> THIS IS TITLE </title>

<!--SOME OTHER ELEMENTS ARE ALSO PLACED IN THE HEAD SECTION-->

</head>

<body>

THIS IS WITHIN WORKSPACE OF THE BROWSER, ENCLOSED BY THE BODY TAGS

</body>

</html>

• Tags: Building blocks of a HTML document. Most tags work in pairs. E.g. <html> </html>.
• Attributes: For example, when using <font size=”1”>, size=”1” is known as attribute. It provides additional information about the <font> tag. Different attributes are available to different tags.

HTML tags:

Font size and style <font>

The <font> tag is removed in HTML5. To format font size, font-family and color, Cascading Style Sheets (CSS) is recommended.

• Old method: <font size=”1” face=”arial” color=”green”> YOUR TEXT </font>

Text formatting <b> <i> <u> <del> <sub> <sup>

<b> bold </b>

<i> italic </i>

<u> underlined </u>

<del> deleted </del>

_subscript

^superscript

Text alignment

The <center> tag and align attribute are removed in HTML5. Using CSS to edit text alignment is recommended.

• Old method:
  <center> This is center alignment </center>
  <p align=”left”> This paragraph is left aligned. </p>

Heading <h1> to <h6>

<h1> This is largest. </h1>

<h6> This is smallest. </h6>

Paragraphs <p> <br> <pre>

<p> Text within the tag forms a paragraph </p>

<p> This is another paragraph. <br> br stands for line break. <br> No new paragraph is formed. </p>

<pre> Pre stands for preformatted text.

It preserves the line breaks and spaces as you typed in the HTML document. </pre>

Character entities/Escape characters

Tags used the reserved characters < and >. To properly displace it in the web page, we use character entities/escape characters.

<: &lt;

>: &gt;

Multiple consecutive space in a HTML document will automatically be reduced to a single space.

To displace multiple space, use <pre> or escape character known as,

non-breaking space: &nbsp;

Comments

If you want to include comments in the HTML document, you can enclose the message with <!-- and -->. The message will not be displayed in the web page.

Reference:
https://www.w3schools.com/html/default.asp