Ncc Education 1st semister L4DC developing and design website website .. la mooj gara haddi haseyo hola result 70 aayo assingment ma ..

1. 1
Contents
Introduction............................................................................................................................................2
Task1 – HTML.......................................................................................................................................2
Task2 –CSS..........................................................................................................................................3
Task3 – Test the Website and Write a Test Report........................................................................... 14
W3C Validation................................................................................................................................ 14
Testing with different browser ......................................................................................................... 16
Problem while developing, testing and solving them......................................................................20
Task4 – Critical Evaluation ................................................................................................................. 20
References:......................................................................................................................................... 23

2. 2
Introduction
I was assigned to develop website for GKC computing located at heart of London, UK. Until
now GKC computer has been selling computer parts within the local community through market
stalls, however now they are looking to expand their business and move to an online presence.
GKC want me to create website, which will allow orders to be received through an online contact
form. Therefore, GKC computing approached me to develop a website for their company, which
fulfill their online presence requirements.
I have used Brackets text editor Release 1.10 build 1.10.0-17483 by Adobe for writing
HTML and CSS code.
Task1 – HTML
Hypertext Markup Language (HTML) is markup language used to develop webpage. Latest
version of HTML is HTML 5. While HTML is used to develop page CSS is used to decorate the
page.
In this project, I have developed a website using Doctype XHTML 1.0 Strict with CSS. I
developed website with the resolution of 1074x768 in mind. Benefits of the creating in 1074x768 is
that it prevents horizontal scroll bar in lower resolution devices, which is considered as bad UI
design. All of the tabs on the website are connected to each other making it easier to navigate.
Doctype screenshot:
Figure 1 Doctype Declaration

3. 3
Task2 –CSS
Cascade Style Sheet (CSS) is a language, which help to decorate the html page. CSS is used for
customization purposes. In this project, I have used external CSS and all websites are linked to
same CSS file. Uses of <style> attribute is not present in this project.
Figure 2 CSS

4. 4
Figure 3 CSS code1

5. 5
Figure 4 CSS code2

6. 6
Figure 5 CSS code3

7. 7
Figure 6 CSS code4

8. 8
Figure 7 CSS code5

9. 9

10. 10
Figure 8 CSS code 6
Figure 9 CSS code 7

11. 11

12. 12
Figure 10 CSS code 8
Figure 11 CSS code 9

13. 13
Figure 12 CSS code 10

14. 14
Task3 – Test the Website and Write a Test Report
W3C Validation
World Wide Web Consortium (W3C) is a society, which create open standards. W3C are
community based and is non-profit organization.
W3C Validation service validates checks the markup validity of web documents. (w3c, 2017)
I have checked all my project files using W3C validator and corrected the error. Screenshots of
validation are as follow.
Figure 13 Validation ofHomepage
Figure 14 Validation of the Group

15. 15
Figure 15 Validation ofProduct and Services
Figure 16 Validation ofCommunity
Figure 17 Validation ofNews and Media

16. 16
Figure 18 Validation ofHelp
Figure 19 Validation ofOder
As shown, above all the pages were successfully validated. Validation pages with source option
ticked is saved as webpage and uploaded in the project folder “Validation”.
Testing with differentbrowser
Since the website was made with 1024x768, resolution in mind so issue should not be
present while testing in 1024x768 resolution.
Google chrome with 1074x768 resolution – Index.html

17. 17
Figure 20 Homepage in chrome
Figure 21 Homepage in chrome

18. 18
Figure 22 Homepage in chrome
Microsoft Edge with 1074x768 resolution – Index.html
Figure 23 Homepage in Edge

19. 19
Figure 24 Homepage in Edge
Figure 25 Homepage in Edge
There were no issue with website on any browser. On every browser, website looked and
functioned as expected.

20. 20
Problem while developing,testing and solving them
While creating and testing webpage, I faced many issues with margin padding and division.
Other problem was about choosing appropriate color so that webpage look clean and text becomes
clear. Other problem was about aligning images in correct order and resolution. While validating
HTML file validator does not allows using <video> tag. In order to create good-looking login and
registration in form I created login and registration form using iframe but validator refused to
validate the webpage.
I fixed margin padding with close inspection and correcting them one by one. Browser
Inspect element option helped a lot for fixing margin, padding and divisions. I search online for
appropriate color to choose while building website and fond some good eye-catching color
combinations. For video issues after searching few forums I found that using <object> was better
option in this case. Instead of using iframe, I used object, which worked, as expected, but older
browser below IE 8 did not support object properly.
Task4 – Critical Evaluation
a. Here are the advantages and disadvantages of various types of multimedia file formats.
(Maestro Solution, 2017)
i. JPEG Advantages
 Supported by every browser and OS
 Size/ quality ratio is ok
 Supported by all printers and cameras
JPEG Disadvantages
 Every time image is edited it loses its quality
 Does not support animation.

21. 21
ii. GIF Advantages
 Support animation
 Support transparency
 Generally small in size
GIF Disadvantages
 Only support 256 colors
 Quality is low
iii. PNG Advantages
 Better transparency then GIF
 No loss in quality
 Allow animations
PNG Disadvantages
 Not widely supported
 Huge file size
b.
Here are the advantages and disadvantages of different types of multimedia elements.
1. Text
Text is most important media used in internet. Text is widely used multimedia among
all other below. Text holds small memory and is easily transferable on network.
Advantage of text is that it is supported in every devices and have no compatible
issue.
Disadvantages of text is that it has to be read which could be difficult or not
understandable.

22. 22
2. Images / Graphics
Graphics / images are image representation of text. Images take much space then
text.
There are many graphics forms for different purposes like BMP, JPEG, GIF, PNG
etc.
Advantage of Graphics / Images is that it is easier to visualize someone thoughts or
view.
Disadvantages of Graphics / Images is that it takes time to load and not all devices
support all types of images.
3. Audio
Audio is an audible form of text. It is widely used in website as multimedia element.
Voice communications, music, songs etc. uses audio.
Advantages of audio is that it is easier to understand someone rather than text.
Disadvantages of audio is that it is larger and consume large amount of traffic.
4. Video
Video is trending form of multimedia these days. Video replaces audio and images.
Videos are widely used in video conference, video calls etc.
Advantages of video is that it provides immerse feel of being there. It is easy to
understand someone and we can video call friends family in real-time.
Disadvantages of Video is that it is huge in size and on slower network, it is
unbearable.
c. Some of the key advantages aspect of my website are as follow:
I. Has easy to navigate menus.
II. It has easy way to Oder products.
III. Works as expected on most of the devices.

23. 23
IV. Easy to view products and information.
Here are some disadvantages aspect of my website:
I. Website is not dynamic and non-responsive.
II. Website is not recommended for lower resolution devices.
III. Colorblind people might have difficult recognizing colors.
IV. Older browser does not support many tags used.
 Improvements and further development
Making website dynamic and responsive is most necessary because of different types of
devices. It is hard for mobile device with small screen to view and navigate on desktop
website.
A better color combination for website would be recommended, as current color
combination might be difficult to recognize for colorblind people.
Total word count – 1,234
References:
Motocms. (2017). Pros and Cons for Each Type of Image Extensions. [Online]
Available at: https://www.motocms.com/blog/en/pros-cons-types-image-extensions/
[Accessed 10 Oct. 2017].