Assignment Brief – 1 of 2

Unit 20: Client Side Customization of Web Pages

Assignment front sheet

Qualification Unit number and title

BTEC Level 3 90-credit Diploma in IT 20 Client-side Customization of Web Pages

Learner name Assessor name

Hnine Pyae Wai Yan MS. Yamin Aye

Date issued Hand in deadline Submitted on

3.2.2020 2.3.2020 2.3.2020

Assignment title HTML, CSS and Scripting Basics

Perform the Tasks mentioned in the Project Brief and provide evidence against the following
assessment criteria:

Criteria To achieve the criteria the evidence must show

reference that the learner is able to:

P1 Explain how HTML files access CSS

P2 Explain the features of the box model for CSS

M1 Assess different implementation styles of CSS

P3 Explain the fundamentals of a scripting language

Learner declaration

I certify that the work submitted for this assignment is my own. I have clearly referenced any
sources used in the work. I understand that false declaration is a form of malpractice.

Learner signature: Wai Date: 2.3.2020

Task 1
P1: Explain how HTML files access CSS

Web Page
The web page may be a document usually written in HTML (Hypertext Markup
Language) which is accessible via the web or other networks of Internet browsers. Through
entering a URL address, an Internet page can be accessed and will include text, graphics, and
website links and files.

Web Site
The website is the central location of linked and accessed web pages by accessing 
the website's home page using a browser. For example, the Steam website address URL 
(Uniform Resource Locator) is https://store.steampowered.com/. There are two main types of
website basically-static and dynamic.

Static website
A static website contains fixed-content Web pages. Each page is coded in HTML,
and each visitor displays the same information. Static sites are the website's most basic
form, and are the simplest to build. Like dynamic websites, no Web programming or database
design is needed. A static site can be created by simply creating and posting a few HTML
pages to a Web server.

Dynamic website
Dynamic websites contain real-time generated Web pages. These pages contain code
 for Web scripting, for example PHP or ASP. When a dynamic page is accessed, the Web server
 parses the code inside the file, and the resulting HTML is sent to the Web browser of the client.
HTML (Hypertext Markup Language)
HTML is a programming language designed to help websites develop. This
allows the user to build and organize Web pages and applications sections, articles, headings,
links and block quotes.

CSS (Cascading style sheets) 
Web page layouts are formatted using cascading style sheets. These can be used to
describe text types, table sizes, and other features of web sites that could be specified in a
page's HTML only previously.

Different three ways to access web page by using CSS

For this task I was asked to compare different CSS implementation styles. CSS can be
implemented in three ways: inline, internal and external styles.

Inline Style

Inline styles refer to a specific HTML tag, using a style attribute to style a particular

page item with a CSS code. These are useful for fast, permanent changes, but are less versatile

than external and internal stylesheets, as each inline style that create must be modified

separately if we decide to make a design change. Some inline Style are: HTML e-mail,

Older sites, etc. We add a CSS inline to the class < p > and < h1 >. paragraph tags (< p >) and

heading tags (<h1>) had to be red.

 No. Line Code Description
No.
1 14 <h1 style="color: This is the color changes to black and font size of the
black; font-size:  first heading "h1" to 40px
40px;"> welcome </h>

2 15 <hr color ="white"> Set margin and its color.

3 16 <p style="color: red; This is the style feature in the < p > tag to change the

font-size: 20px"> Web  color to pink, and the font size in the < p > tag to 20px.
Design Concept </p>

Internal Styles
Internal CSS requires the inclusion of a < style > attribute in the HTML document
section < head>. This CSS-style is an effective one-page styling tool. However, using this design
for multiple sites takes time, since you need to put CSS rules on every page of the website.
Using internal CSS style sheets:
 Open HTML tab, and locate the open tag < head >
 Place code immediately after the tag < head >
 Within a new line add CSS rules
 Form tag (</style >) to close.
 No. Line Code Description
No.

1 5 <style> This is the start of element style to change heading
 style and paragraph.

2 8 p{ The code in line number 6 represents the color, font family,

color: green; font size and padding of
font-family: sans-  the paragraph that is modified to the element < style >
serif;
font-size: 40px;
padding: 60px;

}
3 17 </style> This is the style end element stand for.

External Styles
External style is a separate document connected to the web page of HTML.
Property CSS written in separate.css-extension file and connected to the HTML document
by using the linking tag. This kind of CSS is the more efficient process, particularly for
styling a huge one web page. Editing the.css file allows the whole site to be updated at once.

Using external CSS style sheets:

 Build a new.css file and apply the style rules with the text editor.
No. Line Code Description
No.

1 1.2.3 body This is representative of the background color change

background-color:
lightgrey;
}
h1
2 4.5.6. h1 { This is the color changes to navy, and 20px to left of the 
7 color: navy; first title.
margin-left:20px;
}
3 8.9.10 div { This is stand for the background color of the border,
.11.12 background-color: light the width of the border, the weight of border line
.13.14 grey; and style of border line and the distant between
width: 300px; browser and border.
padding: 25px;
border: 25px double
navy;
margin: 25px;
}
  Add a reference to your external.css file in the < head > portion of your HTML sheet
right after < title > tag

No. Line Code Description

No.

1 4 <link This is the style of the link to CSS file. “rel” stands for the
rel="stylesheet" name of the CSS file and “type” represents to the type of file
type="text/css"href or text. “href” is used to represent the address of CSS file.
="mystyle.css">
Task 2
P2: Explain the purpose of Operating System

The features of the box model for CSS

Every function is a box on a Web page. The word "box template" used when designing
and laying a website. The CSS box model is a box which wraps around HTML elements. This
includes the list: Margins, Borders, Padding and their contents.

Diagram of box model

Width and Height

The width and height of the property determine the width and height of the content
area of an object. Padding, borders, or margins are not included in this height and width. It only
places the area within the padding, borders, and margins of an element.
Example,

Margin
 The margin removes outside of the boundary the area (element). Because this is
transparent, it means it has no background color. The position of the margins (top, bottom,
left, right) can be modified by using CSS to adjust the different margin sides precisely.

Example,

Padding
The padding protects the border area's interior. The key difference between padding
and margin is that, although the margin is still clear, padding is determined by the background
color of the item. Padding on both sides can be modified separately.
Example,

Border
The border properties allow you to adjust the style, e.g. dotted border, color as well
as border thickness. Several of the main terms for border design are including: Dotted-this
creates a marked boundary, Solid-this creates a sold boundary and Double-this creates two
boundaries together.
Example:

Content Area
The contents form the core of the layout of the box. It is where the full text and
photos are kept on the website. It is essentially your website's central part; with all the
information you need.
Inline and Block
Compared to the display: inline, the main difference is that The inline-block allows
the element width and height to be set. Also, with the display: inline-block, the upper and
lower margins / padding are respected, but with the display: they are not inline.
Similar to the display: the key difference is block, that the display: inline-block does not
include a line-break after the element, so the element can sit next to other elements.

Selector
CSS selectors can be used for selecting the content you want to style. Selectors are a
part of the CSS rule collection. CSS selectors selects Id, class, type, attribute and so on for
the HTML elements.

CSS includes a number of different selector styles. They are

 Element Selector
 Id Selector
 Class Selector
 Universal Selector
  Group Selector

ID Selector
The I d selector selects the ID attribute of an HTML to pick a specific element
The I d inside the page is always identical so that a single, identical item is chosen.
It is writing with the character hash (#).

Class Selector

The class selector selects elements of HTML with a class-specific attribute.

It can be used for period with a character.  Class name preceded
Task 4
P3: Explain the fundamentals of a scripting language

JavaScript
JavaScript is Web-based programming language. JavaScript is able to update and
alter both HTML and CSS. JavaScript is able to compute, manipulate and validate data.

The history of JavaScript Development

JavaScript was developed during the early days of the internet by the American
technologist Brendan Eich in 1995. He was recruited by Netscape Communication that required
a scripting language for their popular Netscape Navigator web browser. In May 1995 Eich wrote
the entire language in 7 days to defend the idea of JavaScript against competing proposals.

The usage of JavaScript

JavaScript is a language for the client scripting that is used to build web pages. It is a
 standalone language that has been developed in Netscape. It is used to render a web page 
interactive and to add special effects on pages such as rollout, rollover and many forms of 
graphics.

JavaScript Can't Do

JavaScript is a language on the client side; that is, it is built to do the work on the
user, not on the server. Because of mostly for security reasons;
 JavaScript does not allow Client machines to read or write files.
 It does not let files be written on server machines.
 It cannot close a window which it did not open.
 It can not read information from an open Web page from a different server.
Client Side Scripting
Client-side scripting (embedded scripts) is the code which exists within the HTML
page of the client. On the client computer this code will be interpreted and the HTML file will
NOT execute a Post Back to the web-server. Client-side scripting is traditionally used for page
navigation, data validation, and formatting.

Client Side Scripting Language

There are plenty of scripting languages on the client side too.

 JavaScript
 CSS(Designing)
 HTML (Structure)
 JQuery etc.

Server side scripting is useful to configure web pages and to make dynamic changes to
websites.

Client Side Work

Client-side means the JavaScript code is run on the browser's client computer. 
JavaScripton the server side means the application is running on the server that runs the web
pages. Another runs in the client side of the browser, the other runs on the server.

Server Side Scripting

Server-side scripting is a technique of Web development that involves using scripts on

a web server that generate a personalized response to the website request of each user (client).
The alternative is to provide a static Web page for the Web server itself

Server Side Scripting language

There are many languages which can be used for programming on server side:

  PHP
 Java
 JSP
 C++
  Python

Server Side Work

Conversely, server-side programming often involves the set of every material the user
will respond to requests for addresses. A server code performs tasks including validating the
data and requests sent, and processing and extracting data using databases.

Differences between server-side scripting and client-side scripting

Server-side Client-side

Server-side scripting is a method by which Client-side scripting is the code which 

websites on the originating server are exists within the HTML page of the client.
configured to run the operation or user
request.

Server side scripting is used for This code will be executed on the client computer, 

connecting to Web server databases. and there will be no Post Back to the web-server o
n the HTML tab.
Code examples of JavaScript implementation
External JavaScript
Reference
Anonymous (2019), Web page(online), Available at:
https://www.computerhope.com/jargon/w/webpage.htm [ Accessed on 18th on Feb 2020]
Anonymous (2009), Static Website(online), Available at:
https://techterms.com/definition/staticwebsite [ Accessed on 18th on Feb 2020]
Anonymous (2019), Website(online), Available at:
https://www.computerhope.com/jargon/w/website.htm [ Accessed on 18th on Feb 2020]

Anonymous (2009), Dynamic Website(online), Available at:

https://techterms.com/definition/dynamicwebsite [ Accessed on 18th on Feb 2020]
Anonymous (2019), What is HTML? (online), Available at:
https://www.hostinger.com/tutorials/what-is-html [ Accessed on 18th on Feb 2020]
Anonymous, CSS (online), Available at: https://techterms.com/definition/css [ Accessed on 18th
on Feb 2020]
Anonymous, CSS Model box (online), Available at:
https://www.w3schools.com/css/css_boxmodel.asp [ Accessed on 18th on Feb 2020]
Anonymous, Difference Between the 3 Types of CSS Styles: Inline, External and Internal
(online), Available at: https://www.hostinger.com/tutorials/difference-between-inline-external-
and-internal-css#Internal-CSS [ Accessed on 18th on Feb 2020]
Anonymous, CSS Selector (online), Available at: https://www.javatpoint.com/css-selector
[ Accessed on 19th on Feb 2020]
Anonymous, what is JavaScript? (online), Available at:
https://www.w3schools.com/whatis/whatis_js.asp [ Accessed on 19th on Feb 2020]
Anonymous, what is JavaScript Can’t do? (online), Available at:
http://books.gigatux.nl/mirror/javascriptandajax/0321430328/ch01lev1sec5.html [ Accessed
on 19th on Feb 2020]
Anonymous, what is the history of JavaScript? (online), Available at:
https://www.quora.com/What-is-the-history-of-JavaScript [ Accessed on 19th on Feb 2020]
Abhishek jaiswal (2019), Client-Side vs Server-Side Programming Languages (online), Available
at: https://www.c-sharpcorner.com/UploadFile/2072a9/client-side-vs-server-side-
programming-languages/[ Accessed on 19th on Feb 2020]