IT230-Assignment 1 Solved.pdf

College of Computing and Informatics
Assignment 1
Deadline: Sunday 01/01/2023 @ 23:59
[Total Mark for this Assignment is 8]
Student Details:
Name: ###
CRN: ###
ID: ###
Instructions:
• You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on
Blackboard via the allocated folder. These files must not be in compressed format.
• It is your responsibility to check and make sure that you have uploaded both the correct files.
• Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between
words, hide characters, use different character sets, convert text into image or languages other than English
or any kind of manipulation).
• Email submission will not be accepted.
• You are advised to make your work clear and well-presented. This includes filling your information on the cover
page.
• You must use this template, failing which will result in zero mark.
• You MUST show all your work, and text must not be converted into an image, unless specified otherwise by
the question.
• Late submission will result in ZERO mark.
• The work should be your own, copying from students or other resources will result in ZERO mark.
• Use Times New Roman font for all your answers.

Pg. 01 Question One
Question One
1. What were some of the main goals and motives for the HTML5 specification?
and List some of the key new features in HTML5?
Notes: You should write the answer in your own words.
The most important goals of HTML5 are to simplify the reading of HTML code
and to maintain compatibility with the most recent versions of multimedia file formats. It
also seeks to specify the mechanisms for dealing with syntax mistakes, with the goal of
ensuring that all web browsers would handle erroneous code in the same manner.
HTML5 offers several new tags, such as:
• <video>
• <audio>
• <canvas>
• <section>
• <article>
• <nav> (A website’s navigation)
• <footer> (The footer of a web page)
• <audio> and <video> (A replacement for the <object> tag).
Learning
Outcome(s):
Create web pages
using HTML5 and
CSS3.
2 Marks

Pg. 02 Question One
‫النترنت‬‫ا‬ ‫قع‬‫موا‬ ‫من‬ ‫ة‬‫صحيح‬ ‫خرى‬‫ا‬ ‫بة‬‫جا‬‫ا‬
What were some of the main goals and motives for the HTML5
specification?
• Deliver the rich contents without the need of any additional plugins.
• content must be structured within a set of paragraphs, a list of
bulleted points, or usig any images and data tables.
• Provide a strict parser for error handling.
List some of the key new features in HTML5?
• Placeholders
• Figure and figcaption.
• Preload Videos.
• Webfonts.
• Controlling the display.

Pg. 03 Question One
‫النترنت‬‫ا‬ ‫قع‬‫موا‬ ‫من‬ ‫ة‬‫صحيح‬ ‫خرى‬‫ا‬ ‫بة‬‫جا‬‫ا‬
The main goal of HTML 5 is as follows
1- Making the HTML code easier to read and write.
2- Have updated knowledge of the new types of applications used on the web
server.
3- Have an updated knowledge of new multimedia applications used on HTML.
4 -Ability to handle errors all by himself.
5 - Ability to work on various platforms and code should be easier to write on all
systems.
some of the new features of HTML5 are.
• It does offer new tags including video, audio, canvas, and section.
• It does also take the support of a new plugin to perform various task.
• It does also have a few other tags that are helpful in positioning.
• The API is also added in such a way that it can be useful for the feature
of many options such as drag-and-drop geolocation section information.

Pg. 04 Question Two
Question Two
Using HTML5 code, create cart_checkout.html as shown in the below given
picture. Fill the checkout form with all necessary details and add a screenshot
to your answer.
Notes:
1. You must copy and paste the “HTML script” as your answer for this
question. DON’T take screenshots for your HTML script. It must be editable
script.
2. Take a screenshot for your filled form and paste it as a part of your answer.
The name field, email field, and address field should be matched with your
name, email, and branch.
3. The CVV should be obscured so that it cannot be read.
Learning
Outcome(s):
Create web pages
using HTML5 and
CSS3.
2 Marks

Pg. 05 Question Two
Answer
<!DOCTYPE html>
<html>
<head>
<title>cart checkout</title>
</head>
<body style="background-color: #f4f4f4;">
<form action="" style="margin-left: 15em;margin-top: 2em;">
<div>
<h2>Billing Address</h2>
<div style="margin-top: 35px;">
<img src="img/username.png" alt="username" width="12"
height="15">
<label for="fname">Full Name</label>
</div>
<br>
<input type="text" id="fname" name="fname" style="width:30em;
height: 27px;margin-top: -10px;">
<br>
<img src="img/email.png" alt="email" width="15" height="15">
<label for="email">Email</label>
</div>
<br>
<input type="text" id="email" name="email" style="width:30em;
<br>
<img src="img/Address.png" alt="Address" width="20"
height="17">
<label for="address">Address</label>
</div>
<br>
<input type="text" id="address" name="address" style="width:30em;
<br>
<img src="img/city.png" alt="city" width="outo" height="15">

Pg. 06 Question Two
<label for="city">City</label>
</div>
<br>
<input type="text" id="city" name="city" style="width:30em;
<br>
</div>
<div style="margin-top: -441px;margin-left: 30em;">
<h2>Payment</h2>
<label>Accepted cards</label>
<br>
<img src="img/visa.png" alt="username" width="40"
height="25">
<img src="img/american.png" alt="username"
width="40" height="25">
<img src="img/master.png" alt="username"
<img src="img/dicover.png" alt="username"
</div>
<br>
<label for="cardname">Name on Card</label>
</div>
<br>
<input type="text" id="cardname" name="cardname"
style="width:30em; height: 27px;margin-top: -10px;">
<br>
<label for="creditnumber">Credit Card Number</label>
</div>
<br>
<input type="text" id="creditnumber" name="creditnumber"
<br>
<label for="expmonth">Exp month</label>
</div>
<br>
<input type="text" id="expmonth" name="expmonth"
<br>
</div>
<div>
<label for="state">State</label>
<br>

Pg. 07 Question Two
<input type="text" id="state" name="state"
style="width:14em; height: 27px;margin-top: 10px;">
</div>
<div style="margin-top: -61px;margin-left: 13.25em;">
<label for="zip">Zip</label>
<br>
<input type="text" id="zip" name="zip" style="width:14em;
height: 27px;margin-top: 10px;margin-left: 5px;">
</div>
</div>
<div style="margin-top: -61px;margin-left: 30em;">
<div>
<label for="expyear">Exp Year</label>
<br>
<input type="text" id="expyear" name="expyear"
style="width:14em; height: 27px;margin-top: 10px;">
</div>
<div style="margin-top: -61px;margin-left: 13.25em;">
<label for="cvv">CVV</label>
<br>
<input type="password" id="cvv" name="cvv"
style="width:14em; height: 27px;margin-top: 10px;margin-left: 5px;">
</div>
</div>
<br>
<input type="checkbox" id="check">
<label for="check">Shipping Address same as billing</label><br><br>
<input type="submit" value="Continue to checkout" style="border:
none;
color: white;
background-color: #000000cc;
width: 894px;
height: 50px;">
</form>
</body>
</html>

Pg. 08 Question Two
Screen shot

Pg. 09 Question Three
Question Three
What's the difference between HTML and HTML5?
Notes:
1. You must write at least four differences for each.
‫الالزمة‬ ‫ت‬‫التغييرا‬ ‫عمل‬ ‫مع‬ ‫فقط‬ ‫نقاط‬ ‫اربعة‬ ‫اخذ‬ ‫يجب‬‫و‬ ‫االنترنت‬ ‫من‬ ‫االجابة‬
Features Html Html5
definition A hypertext markup language (HTML) is
the primary language for developing web
pages.
HTML5 is a new
version of HTML with
new functionalities with
markup language with
Internet technologies.
Multimedia
support
Language in HTML does not have support
for video and audio.
HTML5 supports both
video and audio.
Storage The HTML browser uses cache memory as
temporary storage.
HTML5 has the storage
options like:application
cache, SQL
database, and web
storage.
Browser
compatibility
HTML is compatible with almost all
browsers because it has been present for a
long time, and the browser made
modifications to support all the features.
In HTML5, we have
many new tags,
elements, and some tags
that have
been removed/modified,
so only some browsers
are fully compatible
with HTML5.
Graphics
support
In HTML, vector graphics are possible
with tools LikeSilver light, Adobe Flash,
VML, etc.
In HTML5, vector
graphics are supported
by default.
hreading In HTML, the browser interface and
JavaScript running in the same thread.
The HTML5 has the
JavaScript Web Worker
API, which allows the
browser interface to run
in multiple threads.
Learning
Outcome(s):
Create web pages
using HTML5 and
CSS3.
2 Marks

Pg. 10 Question Three
Storage Uses cookies to store data. Uses local storage
instead of cookies
Vector and
Graphics
Vector graphics are possible with the help
of technologies like VML, Silverlight,
Flash,etc.
Vector graphics is an
integral part of HTML5,
SVG and canvas.
Shapes It is not possible to create shapes
like circles, rectangles, triangles.
We can draw shapes
like circles, rectangles,
triangles.
Doc type Doctype declaration in html is too long
<! DOCTYPE HTML PUBLIC "- // W3C
// DTD HTML 4.01 // EN"
"http://www.w3.org/TR/html4/strict.dtd">
The DOCTYPE
declaration in html5 is
very simple "<!
DOCTYPE html>
Character
Encoding
Character encoding in HTML is too long.
<! DOCTYPE HTML PUBLIC "- // W3C
// DTD HTML 4.0 Transitional // EN">
Character encoding
declaration is simple
<meta charset = "UTF-
8">
Multimedia
support
Audio and video are not the part of
HTML4.
Audio and video are
essential parts of
HTML5,like: <Audio>,
<Video>.
Vector
Graphics
In HTML4, vector graphics are possible
with the help of techniques like VML,
Silver light and Flash.
Vector graphics are an
integral part of HTML5,
SVG, and canvas.
Html5 uses cookies. It supplies local storage
in place of cookies.
Shapes It is not possible to draw shapes like
circles, rectangles, triangles.
Using html5, you can
draw shapes like circles,
rectangles, triangles.
Browser
Support
Works with all older browsers A new browser supports
this.

Pg. 11 Question Four
Question Four
Write a CSS rule that makes all the text 3 times larger than the base font of the
system and colors the text as green and place a background image. The
background image should remain in place when the user scrolls up or down.
Notes:
1. You must copy and paste the “HTML and CSS” as your answer to this
question. DON’T take screenshots for your HTML and CSS code. It must
be editable script.
2. Take a screenshot of your output and paste it as a part of your answer.
Required Rule :
<!DOCTYPE html>
<html>
<title>Q4</title>
<head>
<style>
body {
font-size: 3em;
color: green;
background-image: url('logo.jpg');
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This practice lesson consists of short paragraphs about
interesting subjects. Find fun keyboard typing practice—and learn
something new! Our paragraph practice is great typing practice for
writing essays, reports, emails, and more for school and workThis
practice lesson consists of short paragraphs about interesting
subjects. Find fun keyboard typing practice—and learn something new!
Our paragraph practice is great typing practice for writing essays,
reports, emails, and more for school and workThis practice lesson
consists of short paragraphs about interesting subjects. Find fun
keyboard typing practice—and learn something new! Our paragraph
Learning
Outcome(s):
Create web pages
using HTML5 and
CSS3.
2 Marks

Pg. 12 Question Four
practice is great typing practice for writing essays, reports, emails,
and more for school and work</p>
</body>
</html>

IT230-Assignment 1 Solved.pdf

More Related Content

Similar to IT230-Assignment 1 Solved.pdf (20)

Recently uploaded (20)

IT230-Assignment 1 Solved.pdf