Client Side Customisation

Client Side Customisation of Web Pages
In this task I will investigate clientside customisation of web pages, which will
include the three assignments in which I will be creating informative documentation
of the features of cascading style sheets, I will also create informative
documentation on the feature of scripting languages, and finally plan and design a
website on a scenario set by my tutor.
Features of CSS
In this assignment I will be explaining, the features of CSS, why we use it, and
different ways it can be used. CSS is an acronym for Cascading Style Sheets. CSS is
a stylesheet language which describes the presentation of documentation which
can be in HTML or XML formats. It describes how web elements can be rendered on
screen. CSS was first released in 1996, as a product of the W3C; Which is the source
of all web design and the standards used globally. Since the original CSS1 was
published there have been two more updates provided by W3C, CSS2 which was
released in 1998 and CSS3 released in 1999. CSS is commonly used more than
other languages as it allows you to choose specific styles for visual web elements.
Unlike HTML, CSS offers unique advantages in making a website look more
professional and better. There are 3 Stylesheets which are used in CSS; External,
Internal and Inline/Embedded. They are explained below. Other than this different
selectors, and the box model are also explain.
External Stylesheet
The external stylesheet is a .css format file which you are able to link your file to. Whatever you
write in your stylesheet will affect every page in your website. The external stylesheet is used
when all pages need to be the same colour, or all font needs to be the same colour on separate
pages, instead of making code changes on each page. An example of how External CSS is
used is shown below.
<head>
<link rel=stylesheet type=text/css
href=mystyle.css>
</head>
The page must link to the stylesheet using the <link> tag
body {
background-color:grey;
}
h1 {
color:navy;
margin-left:20px;
}
Some advantages of External Stylesheets include you can control the look of
multiple documents at once, rather than flipping through it to make small changes
such as font size and colour. You can also group styles, which provides more control
and flexibility.
Internal Stylesheet
This stylesheet holds the CSS code for the web page in the head section of the code, which
then makes it a lot easier to apply styles. In internal the code is easily reusable. An example of
how Internal CSS is used is shown below.
<head>
hr {color:black;}
p {margin-left:20px;}
body {background-color:lightblue;}
</style>
</head>
The advantages of using internal CSS, are that it is useful for small style definitions which are
for a single document, thus making it simpler as you don't need to worry about styles applied to
wrong pages. Another advantage is that if you design a large system, you can use the internal
stylesheet as a testing perspective, you can also include the CSS code in the head section and
test it on a trial and error basis.
Inline Stylesheet
The inline stylesheet uses the HTML style attribute to style a specific tag, to use the attribute
you can contain any CSS properties. An example of how Inline CSS is used is shown below.
<p style =color:red;margin-left:20px> This is a paragraph.</p>
is shown as This is a paragraph.
Advantages of Inline Stylesheets are that they can be applied quickly, there isn't an addition file
which needs to be created, therefore you can manage styles within a single document.
The CSS Box Model
The box model consists of 4 parts.
- The content
- The padding
- The border
- The margin
The content of the box is where the text and images are placed, whilst the padding is the
transparent area around the content of the box, the border is the part which goes around the
padding and content, the margin is the other transparent area which is around the border. The
code which would be used to make a box model is shown below.
<style>
div {
background-color: grey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<h2>The Box Model</h2>
<p>The Box Model consists of 4 parts</p>
<div>My name is Uzair Siddiqui</div>
</body>
This would be shown as:
Selectors
Type Selector
type selector selects the type of element which matches the selector, e.g.
em {color: blue; }
will select all em elements and change their color to blue
ID Selector
ID selectors use an element based on the ID attribute to select a specific element, e.g.
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
Will be shown as;

Hello World!
This paragraph is not affected by the style.
Class Selector
The selector selects all elements with the class attribute, e.g.
.center {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1 class="center">Green and center-aligned heading</h1>
<p class="center">Green and center-aligned paragraph.</p>
Will be shown as
Green and center-aligned heading

Green and center-aligned paragraph.
Descendant Selector
A descendant selector is a selector with a spaces between two selectors, without a combinator,
an example of this is;
ul li {}
the following means any listed items are descendants of an unordered list.
Universal
The asterisk marks the universal selector, which matches a single element of any type. For
example;
* {color: blue; }
The following will colour all HTML elements on a page, blue.
Conclusion
To conclude in this assignment I have explained the features of CSS, with various examples of
why we use it and the different ways it can be used. I have described the 3 style sheets that are
used; the external, internal, and inline/embedded, which are explained in full detail throughout
this assignment. Finally, I have also mentioned the box model, which consists of 4 selectors;
Type selector, ID selector, Class selector, and Descendant selector.
Using Scripting
In this report, I will be explaining what scripting languages are, how it works in a
webpage, which types of scripting languages are available; The main features of
that particular scripting language, and three of the typical uses of the specific
scripting language. Last but not least, without a scripting language how a HTML
would look; and finally, how websites that use scripts would be implemented by two
different browsers.
Scripting Languages
Scripting languages are a type of programming language which is interpreted rather

than being compiled.
With javascript, browsers have a built in translator or interpreter. Thus the clientside
does all the work work which the PC needs doing; but for other languages for
example CGI, PHP, etc. Serverside does all the processing, where the server
translates the code and builds the webpage, after this the page is sent to the site
where the markup and javascript are interpreted and rendered.
There are 6 main scripting languages, the first out of these is Perl.
1. Perl stands for Practical Extraction and Report Language; which is a
string processing language commonly used for web maintainers and other
small script, the most of the web development is done through Perl.
2. The second main scripting language is Lingo; Lingo is a scripting
language used to develop high performing multimedia apps and content for
the web.
3. The third main scripting language I will be explaining is Hypertalk;
which is simply the scripting language for an application program and
programming tool for the Macintosh and IIGS computers.
4. The fourth scripting language is the widely and commonly used
JavaScript; JavaScript code can run on any platform which has the JavaScript
interpreter.
5. The fifth scripting language is AppleScript; which from the name you
can tell it is a language used for the Macintosh.
6. The last scripting language I will explain is VBScript, which is a
language that enhances the features of Internet explorer's web pages.
All scripting languages have different and unique features suited to specific needs.
However I will be describing the main features of PHP. PHP is one of the most
common and popular ServerSide scripting language running till today. Due to its
dynamic creativity for webpages, it interacts with user offering customizable
information. PHP offers several advantages, it is easily accessible, easy to use, free
(open source), stable, secure and fast. Because of its simplicity of PHP it is very
easy to learn and understand especially for those with experience in C, HTML and
JavaScript. The language is very similar to Perl and C, therefore anyone with
experience in the following, will feel comfortable understand PHP. PHP runs all
platforms such as UNIX, Macintosh, Windows, etc. Another main feature of PHP is its
connective abilities; It uses a modular extension system which can interface with a
range of XML, graphics, encryption, etc. in its library. Programmers can then
extended PHP by creating their own executables and load them with PHPs dynamic
loading mechanisms or compile them into the executable. For malicious attacks,
PHP has many levels of security to make viruses as preventable as possible. The
levels can also be adjusted in the .ini format file.
JavaScript
JavaScript can be used in many different ways, I will describe of the features which
are available with JavaScript, which wont be available with others. One of the
features I will be reviewing the hover feature; if you hover over an element
whether it be a paragraph, a heading, or a different element, you can hover over it
with the cursor, and can program it to change colour/dim/change the image, etc. To
hover over an element and for everything else to be dimmed, you would add this
code:
$('.link').hover(function(){
$('.dim').fadeIn(200);
},function(){
$('.dim').fadeOut(200);
});
This feature is clearly shown in this website: http://mikekus.com/
Another feature I will be explaining is the animation feature, unlike other scripting
languages with JavaScript you can add animations, a framework usually handles
the animation, the animation is implemented as changing of the Document Object
Model (DOM) styles or objects. The process is split into segments, and each
segment is timed, due to the interval being very short, the animation gives the
illusion of repeatedly playing. The pseudo code is:
var id = setInterval (function()
/* show the current frame */
if (/* finished */) clearInterval (id)
}, 10)
The feature is clearly shown in the website: http://multeor.com/

The last interaction which is used through JavaScript is the droppable interaction.
Meaning you can drag an object and drop it on another object. You enable the DOM
element to be a droppable, which is a target for draggable items or elements. The
code you use to enable this and add it as a feature:
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px
10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin:
10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
The best websites are best due to the type of scripting language they use. If there is
no scripting language the functionality of the website would be very bad, a typical
website has 3 clicks to get from the homepage to the homepage the user needs to
get to, an example of this is the JD Sports website (Home>Mens Shoes>The shoe
you need).
Without JavaScript on a website the website would be testing the limits of HTML,
and wouldnt be very static.
A great example of this is http://tyrocleaners.co.uk/. If only HTML wasnt used, and
JavaScript was added the features of the website could increase drastically. The
home page could have animated icons, videos, animations, etc. The images on the
header could be re-sized, or better yet changed. The font could also be changed,
through google fonts, the navigation bar could also be a lot more static. My
conclusion is that without JavaScript the website would not be very well presented,
and would look very cheap.
References:
Unknown. (Unknown). CSS How to. Available: http://www.w3schools.com/css/css_howto.asp.
Last accessed 3rd Oct 2015.
Unknown. (Unknown). HTML Styles. Available:
http://www.peoi.org/Courses/Coursesen/html/html16.html. Last accessed 3rd Oct 2015.
Raad. (2013). Explain the features of the box model for CSS.Available: http://raadassignment2.blogspot.co.uk/2013/06/unit-20-p2-explain-features-of-box.html. Last accessed
3rd Oct 2015.
Jai Pearce. (Unknown). Features. Available: http://ictjaicss.weebly.com/p2---css-boxmodel.html. Last accessed 3rd Oct 2015.
Dave Child. (2004). The Box Model for Beginners. Available:

https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/. Last
accessed 3rd Oct 2015.
Jindal Saha. (Unknown). What are the advantages and disadvantages of Internal
stylesheets?. Available:
http://www.interviewmantra.com/post/2012/10/15/What-is-the-Advantages-andDisadvantages-of-Internal-Style-Sheets. Last accessed 5th Oct 2015.
Unknown. (Unknown). CSS Internal Style. Available: http://www.c4learn.com/css/css-internalstyle/. Last accessed 5th Oct 2015.
Jennifer Cyrin. (Unknown). External Stylesheet. Available:
http://webdesign.about.com/od/css101classes/a/bl_cssclass2_4a.htm. Last accessed 5th Oct
2015.
Unknown. (Unknown). The advantage of using External CSS. Available:
http://www.basictips.com/tips/article_92.shtml. Last accessed 5th Oct 2015.
HTML Basic Tutor. (Unknown). Benefits of using External Stylesheet vs Inline Stylesheet.
Available: http://www.v7n.com/forums/coding-forum/174009-benefits-using-external-stylesheets-vs-inline-css.html. Last accessed 5th Oct 2015.
University of Illinois. (2003). Advantages and Disadvantages of CSS Techniques. Available:
http://cita.disability.uiuc.edu/courses/2003-02-REHAB711NC/review2/slide13.html. Last
accessed 5th Oct 2015.
Unknown. (Unknown). Universal Selectors. Available:
http://css.maxdesign.com.au/selectutorial/selectors_type.htm. Last accessed 21st Oct 2015.
Unknown. (Unknown). CSS Selectors. Available:
http://www.w3schools.com/css/css_selectors.asp. Last accessed 21st Oct 2015.
Multiple Authors. (2015). ID Selectors. Available:
https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors. Last accessed 21st Oct

2015.
Sara Cope. (2015). Descendant. Available:

https://css-tricks.com/almanac/selectors/d/descendant/. Last accessed 21st Oct 2015.
Lauren Hockenson. (2013). CSS for Dummies. Available: mashable.com/2012/10/24/css-fordummies/#5c1fmS6SkOqF. Last accessed 8th Nov 2015.
Unknown. (2009). History of CSS. Available:
http://www.cssneuse.net/the-history-of-css.php. Last accessed 8th Nov 2015.
Unknown. (2015). Why should I use CSS?. Available:
http://www.freeservers.com/WebHosting101/WhyShouldIUseCSS.html. Last accessed 8th Nov
2015.
Margaret Rouse. (2007). What is scripting language?. Available:
http://searchwindevelopment.techtarget.com/definition/scripting-language. Last accessed
6th Dec 2015.
Steve Goldberg. (1999). Scripting Languages. Available:
http://www.techrepublic.com/article/scripting-languages/. Last accessed 6th Dec 2015.
Cameron Lai. (2003). Scripting Language for an Application. Available: http://computerprogramming-forum.com/56-python/62856d82d5bea193.htm. Last accessed 7th Dec 2015.
Patrick Herrin. (1999). Application scripting language for Win32?.Available: http://computerprogramming-forum.com/26-programming-language/b530834feabafc9f.htm.Last accessed
7th Dec 2015.
Amanda Annan. (2011). The Advantages of PHP. Available:
http://www.designersplayground.com/pr/the-advantages-of-php/. Last accessed 7th Dec
2015.
Dave Bell. (2003). PHP. Available:
https://en.wikipedia.org/wiki/PHP. Last accessed 7th Dec 2015.
Derek Duncan. (2013). Dim rest screen; hover menu. Available:
http://stackoverflow.com/questions/15840999/dim-rest-screen-on-hover-of-menu. Last
accessed 8th Dec 2015.
Ilya Kantor. (2011). Animation | Javascript Tutorial. Available:
http://javascript.info/tutorial/animation. Last accessed 10th Dec 2015.
jQuery foundation . (2015). Droppable. Available:
https://jqueryui.com/droppable/. Last accessed 14th Dec 2015.

Client Side Customisation

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Client Side Customisation

Uploaded by

Copyright:

Available Formats

Client Side Customisation of Web Pages

Will be shown as;

Green and center-aligned heading

Scripting languages are a type of programming language which is interpreted rather

The feature is clearly shown in the website: http://multeor.com/

Dave Child. (2004). The Box Model for Beginners. Available:

https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors. Last accessed 21st Oct

Sara Cope. (2015). Descendant. Available:

https://jqueryui.com/droppable/. Last accessed 14th Dec 2015.

You might also like