Contents one to use?. 7 Task 3 –

 

 

Contents
Task 1 –
CSS. 2
Inline Vs Internal Vs External CSS. 5
What is CSS?. 5
Types of CSS?. 5
Which one to use?. 7
Task 3 –
Plan and Documentation. 12
Task 4 –
Website Creation. 13
Task 5 –
Evaluative Report. 14
Page 1. 14
Page 2. 14
Page 3. 14
Page 4. 15
 

 

 

Task 1 – CSS

We Will Write a Custom Essay Specifically
For You For Only $13.90/page!


order now

 

Css

CSS Stands for cascading style
sheets which is a type of web language, which is used used for the layout of a
website.  It is used for describing the
look and formatting of a document presentation, such as layout colours and
fonts.

 Every single element on a web page is a box.
The word box model used when talking about the design and layout of a website
the css box model is a box that wraps around the html elements.

 

ADVANTAGES

 

Inline CSS

There are many advantages to using inline CSS,
these are some examples:

 

When web developers test code, it is effective for using inline CSS
as there are debuggers for webpages compared to other style methods that
are irresponsive within webpages.
In the event of a quick fix needed to be made of 1 or 2 webpages,
inline CSS is recommended compared to other styling methods.
Webpages load at faster rates as the requirement for CSS files to
be downloaded is not needed.
Unique tag attributes can be added, e.g. font, size and colour can
be added to a

 

The files are repeatedly downloaded by the
programmer on every request. Instead, effective use of external style
sheets would be more effective. WHY?

To modify an attribute in a large website with
20 webpages, the developer would be required to alter each STYLE
ATTRIBUTES The files are repeatedly downloaded by the programmer on every
request. Instead, effective use of external style sheets would be more
effective. WHY?
To modify an attribute in a large website with
20 webpages, the developer would be required to alter each attribute in
all the code. This does consume time for the developer for example, to
change the

External CSS

An external style sheet is
ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page
must link to the style sheet using the tag. The tag
goes inside the head section:

css"
href="mystyle.css" />

An external style sheet can be
written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet
file is shown below:

hr.
{color: sienna ;}

p
{margin-left:20px;}

Body
{background-image: url("images/back40.gif");}

Which one to use?

The major question is which
CSS would be used. After going through many web sites and articles, I am here
writing my views.

Inline CSS

Advantages:

Inline CSS can be used for
many purposes, some of which include:

Testing:
 Many web designers use
Inline CSS when they begin working on new projects, this is because its
easier to scroll up in the source, rather than change the source
file. Some also using it to debug their pages, if they encounter a
problem which is not so easily fixed. This can be done in combination with
the important rule of CSS.
Quick-fixes: There are times where
you would just apply a direct fix in your HTML source, using the style
attribute, but you would usually move the fix to the relevant files when
you are either able, or got the time.
Smaller
Websites: The website such as Blogs
where there are only limited number of pages, using of Inline CSS helps
users and service provider.
Lower
the HTTP Requests: The
major benefit of using Inline CSS is lower HTTP Requests which means
the website loads faster than External CSS.

Disadvantages

Inline CSS some of the
disadvantages of which includes:

Overriding: Because they are
the most specific in the cascade, they can over-ride things you didn't
intend them to.
Every
Element: Inline styles must be
applied to every element you want them on. So if you want all your
paragraphs to have the font family "Arial" you have to add an inline style
to each

 tag in your document. This adds both maintenance
work for the designer and download time for the reader.
Pseudo-elements: It's impossible to
style pseudo-elements and classes with inline styles. For example, with
external and internal style sheets, you can style the visited, hover,
active, and link color of an anchor tag. But with an inline style all you
can style is the link itself, because that's what the style attribute is
attached to.

Internal CSS

Advantages

Since the Internal CSS have
more preference over Inline CSS. There are numerous advantages
of which some of important are an under:

Cache
Problem: Internal styles will be
read by all browsers unless they are hacked to hide from certain ones.
This removes the ability to use media=all or @import to hide styles from
old, crotchety browsers like IE4 and NN4.
Pseudo-elements: It's impossible to
style pseudo-elements and classes with inline styles. With Internal style
sheets, you can style the visited, hover, active, and link color of an
anchor tag.
One
style of same element: Internal styles need not be applied to every element. So if
you want all your paragraphs to have the font family "Arial" you have to
add an Inline style

 tag in Internal Style document.
No
additional downloads: No additional downloads necessary to receive style
information or we have less HTTP Request

Disadvantages

Multiple
Documents: This method can't be
used, if you want to use it on multiple web pages.
Slow
Page Loading: As there are less HTTP
Request but by using the Internal CSS the page load slow
as compared to Inline and External CSS.
Large
File Size: While using
the Internal CSS the page size increases but it helps only to Designers
while working offline but when the website goes online it consumers much
time as compared to offline.

External CSS

Advantages

There are many advantages for
using external CSS and some of are:

Full Control of page structure: CSS allows you to
display your web page according to W3C HTML standards without making any
compromise with the actual look of the page. Google is the leading search
Engine and major source of traffic. Google gives very little value to the
web pages that are well-organized, since the value is little thus many
Designers ignore it. But by taking small value may drive much traffic to
the website.
Reduced file-size: By including the styling of the text in a separate file, you can
dramatically decrease the file-size of your pages. Also, the
content-to-code ratio is far greater than with simple HTML pages, thus
making the page structure easier to read for both the programmer and the
spiders. With CSS you can define the visual effect that you want to apply
to images, instead of using images per say. The space you gain this way
can be used for text that is relevant for spiders (i.e. keywords), and
you will also lower the file-size of the page.
Less load time: Today, when Google has included the Loading time in his algorithm,
it's become more important to look into the page loading time and another
benefit of having low file-size pages translates into reduced bandwidth
costs. CSS can help you save some money by offering you. I done a small
experiment to check the page load time. I am using the Mobile Internet
Connection for testing and for that first I cleared the web cache of the
website and visitedhttp/law mirror for first time after clearing cache.
The total time taken to load the website is 16 seconds. Now I hit the F5
button and the time taken to load the website is 8 seconds. Using
external CSS has reduced the page load timing. It me explain it how it
reduces the time, when you first visited the website, it has downloaded
all the contents + external CSS and while downloading external CSS, it
has marked the CSS with the time stamp with the time stamp of the web
server. Now when you hit F5, it again starts working but this time the
browser compare the time stamps of downloaded CSS with Web Server CSS and
due to same time stamp, it doesn't downloaded the CSS external file from
server and using the already downloaded time, which make the Web Page
Loading time faster as com paired to first time. If you check under
Firebug or Chrome tools it will tell 304 Not Modified, meaning the file
is not modified since last downloaded file, and thus ignoring to download
the external CSS file.

 

 

Task 2 – JavaScript 

Produce
a report which includes the following:

 

Explain how
JavaScript can be used to improve website functionality.  

Java script is a interpreted programming or script language, it is
often abbreviaviated as is is a high level dynamic, weekly typed porotype base,
multi paradigm, and interpreted programming language

Java
script has quickly become an important language used in many aspects of website
development. Although it may look very simple and straightforward to new
programme, it has several features that may leave, you wondering why your code
does not work. Just because your programme contains functions does not
necessary mean that you are doing functionality programmes.

 

 

Explain the main features
of JavaScript. (Including its characteristics, examples of its uses and the way
it is constructed. Use screenshots where possible to evidence your
understanding).

 

Java script programs is
considered to be easy as writing basic programs java script has the following
uses. Java script characteristics. The java script document object model some
objects can share the same properties, Java script language concepts. Features of java script

JavaScript
is a object-based scripting language.
Giving
the user more control over the browser.
It
Handling dates and time.
It
Detecting the user's browser and OS,
It is
light weighted.
JavaScript
is a scripting language and it is not java.
JavaScript
is interpreter based scripting language

 

 

 

 

Explore how web pages using
scripts are implemented in two different browsers. (You will need to research
this and provide appropriate evidence e.g. screenshots.)

The way certain would always get something looking different.
That is why it is always good to test your coding on every browser to try to
find elements of JavaScript is displayed is not always going to be the same for
every browser, as every different browser would have their own take on how to
run the code which means that when running the code of different browsers you a
close matching on every website to that each user on different browsers will
have nearly the same experience within the browsers.

 

 

Browser Detection

 

The whole point of browser detection is to see certain things
from: what web browser is in use and a number of other things. Because of
browser detection, a web developer will have to use different codes to make
sure that the website is working the way it needs to be in different browsers.
The same goes for when a mobile user tries to use the website which means that
the website itself should have a completely different way it operates to be
better for when they use the site. Things that would need to be changed for
mobiles uses are the layout and size of the website to match the size of the
phones screen. The detection process is to make sure that the right code is
used for the browser in use to allow the website to work at its best.

 

Here are some pictures below that are JavaScript popups which
are shown on three different browsers that are Firefox, Internet Explorer and
Chrome. From looking at all of these three images, it is really clear to see
that the JavaScript doesn't work the same on these browsers
because browser detection is not coded within the site so the browser is not
told how to show what is on the website.

 

 

The reason why the popups are different is due to the fact that
all browsers are programmed differently which means that client side scripts
would be shown to be different on the client's browser. CSS code should all
look the same on all browsers but with JavaScript it is either in the wrong or
right way. This is why it is displayed in any way unless told not to.

Here is an example of the code for the browser detection. This
should detect what web browser is being used to access the website.  When
the browser detection has figured out what the user is using then it would
adjust accordingly.

 

 

 

 

Task 3 – Plan and Documentation

 

Research two existing websites for similar business and detail your
inspirations and motivations. P4/M3

 

 

 

Create a wire frame
storyboard with annotations for your site. P4/M3

 

Design visual mock ups for
your site. P4/M3

 

Task 4 – Website Creation

 

Please
upload a zipped folder that contains your full website.  Please provide screen shot of our site
working in a browser.

 

Task 5 – Evaluative Report

 

You will test your website for functionality. P6

Page 1

Test Number

Item tested

Expected outcome

Actual outcome

Success/ Failure

1.1

Spelling

All spellings are
correct

Spellings correct

S

1.2

Images Load

Images will load
correctly

 

 

1.3

Links work

Links will work correctly

 

 

1.4

Browser
compatibility

There will be no
browser compatibility issues

 

 

 

Page 2 

Test Number

Item tested

Expected outcome

Actual outcome

Success/ Failure

2.1

Spelling

All spellings are
correct

Spellings correct

S

2.2

Images Load

Images will load
correctly

 

 

2.3

Links work

Links will work
correctly

 

 

2.4

Browser
compatibility

There will be no
browser compatibility issues

 

 

 

Page 3

Test Number

Item tested

Expected outcome

Actual outcome

Success/ Failure

4.1

Spelling

All spellings are
correct

Spellings correct

S

4.2

Contact form

Contact form
allows input

 

 

4.3

Links work

Links will work
correctly

 

 

4.4

Browser
compatibility

There will be no
browser compatibility issues

 

 

 

Page 4 

Test Number

Item tested

Expected outcome

Actual outcome

Success/ Failure

3.1

Spelling

All spellings are
correct

Spellings correct

S

3.2

Images Load

Images will load
correctly

 

 

3.3

Links work

Links will work
correctly

 

 

3.4

Browser
compatibility

There will be no
browser compatibility issues

 

 

 

Evaluative Report D2

 

Does your website meet all the client requirements? (Explain how)  What program have you used to create your website and graphics?
Was it easy to use? What/ why / how / would you use it again?

 

Is your website user friendly? (Explain how)

 

Is your website accessible? (Explain how)

 

A record (including screenshots) of any changes you made between
planning and development – ensure these are explained.

 

Good and bad points about your website (Consider feedback).

 

Conclude by suggesting future improvements if you were to
re-design and re- create the site.

 

BACK TO TOP
x

Hi!
I'm Angelica!

Would you like to get a custom essay? How about receiving a customized one?

Check it out