Fundamental of Web Design Assignment 1

QUESTION 1
a) WHAT IS HTML
Hypertext Markup Language, a standardized system for tagging text files to achieve font,
colour, graphic, and hyperlink effects on World Wide Web pages.
"an HTML file
b) WHAT ARE THE DIFFERENCES BETWEEN HTML AND HTTP
HTML (Hyper Text Markup Language) and HTTP (Hypertext Transfer
Protocol) are two completely distinct technologies. HTTP is an application protocol
that governs how information travels on the World Wide Web, whereas HTML
governs how Web pages are formatted and displayed. HTTP protocol determines how
Web data is moved around the internet, whereas HTML is the language used to create
Web pages. HTML is essentially a description language for how to portray
information transmitted via HTTP.
c) WHAT ARE THE ESSENTIAL OR FUNDAMENTAL HTML TAGS IN A WEB PAGE
HTML stands for HyperText Markup Language. It is an important language to design
web pages or websites. These websites are visible to anyone on the internet. HTML is a
combination of Hypertext and Markup language. Where hypertext is a link between the
webpages, and markup language is used to define the text document within a tag, that
defines the structure of the web pages.
HTML uses predefined tags that tell the browser how to display the content. Tags are
nothing but some instructions that are enclosed in angle braces(i.e., <>). It is divided
into three parts, i.e., opening tag, content(which will display on the browser), and
closing tag, but some tags are special tags that do not contain closing tags like <BR>
tag. When you are working with HTML tags always remember to include closing tags.
If you forget to close the tag, the browser applies the effect of the opening tag until the
end of the page. HTML contains four essential tags that form the basic structure of any
webpage or HTML file:
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
Now let us discuss each tag one by one:
1. <!DOCTYPE html>
It is also known as document type and should be included in an HTML file. It actually
tells the browser that this is an HTML document. It is not a tag or an element but it is
information.
Syntax:
<!DOCTYPE html>
2. <html></html>
This tag marks the beginning and ending of the HTML document and whatever code is
present in between these tags totally gets considered by the browser. Also, it tells the
browser that the document is an HTML document. All the other tags in between these
tags only get considered by the browser.
Syntax:
<html> Content </html>
3. <head></head>
This tag store the data which actually doesn’t appear on the webpage but it gives more
information about the webpage. Or in other words, this tag is used to define the head
part of the document which contains the information related to the webpage. It also
contain tags like, <title>, <meta>, <link>, <style>, etc.
Syntax:
<head> <title> Title of the Webpage </title></head>
4. <title> </title>
This tag stores the title/name of the web page. Whatever title/content is given in this
tag, the content appears on the tab when opened by the browser. It is described in the
head tag.
d) CREATE A WEB PAGE USING FRAMES WHICH CONTAINS TWO
COLUMNS. THE LEFT FRAME CONTAINS FIVE HYPERLINKS NAMELY:
BOOKS, PENS, WATCHES, BAGS, AND SHOES. WHEN THE USER
CLICKS ON A LINK (FOR EXAMPLE BOOKS) IN THE LEFT FRAME, A
WEBPAGE SHOULD LOAD IN THE RIGHT FRAME WHICH CONTAINS
DETAILS ABOUT THE ITEMS LIKE BOOK COVER IMAGE, BOOK
PUBLISHER NAME, BOOK PRICE AND ADD CART BUTTON FOR
BOOKS CATEGORY. INTIALLY, DISPLAY A WELCOME PAGE IN THE
RIGHT FRAME.
e)
Page4of22<html
style="background:
black; color:white ">
<head><title> link
</title>
<h1>CATALOGUE
</h1> <body><br/>
<hr
style="color:white"/
>
<ahref="bags.html"t
arget="main"><imgs
rc="images/bags.jpg
"width ="60"
hight="60"
/><b>Bags</b></a>
<br/> <hr/>
<ahref="shoes.html"t
arget="main"><imgs
rc="images/shoes.jp
g"wid th="60"
hight="60"
/><b>Shoes</b></a
><br/> <hr/>
<ahref="pens.html"t
arget="main"><imgs
rc="images/pens.jpg
"width ="60"
hight="60"
/><b>Pens</b></a>
<br/> <hr/>
<ahref="books.html"
target="main"><img
src="images/books.j
pg"wi dth="100"
hight="250"
/></a><br/> <hr/>
<ahref="watches.ht
ml"target="main"><i
mgsrc="images/watc
hes.jpg "width="60"
hight="60"
/><b>Watches</b><
/a><br/> <hr/>
</body> </html>
Bags
QUESTION 2
a) WHAT IS CSS
CSS stands for Cascading Style Sheets language and is used to
stylize elements written in a markup language such as HTML. It
separates the content from the visual representation of the site. The
relation between HTML and CSS is strongly tied together since
HTML is the very foundation of a site and CSS is all of the
aesthetics of an entire website.
b) WHAT ARE THE DIFFERENCES BETWEEN HTML AND CSS
CSS
CSS stands for Cascading Style Sheets. It is a style sheet language that describes
the look and document's formatting written in the markup language. It helps us
to add new looks to our old HTML documents. By making some changes in the
CSS code, we can easily change the look of the website. It provides an additional
feature to HTML. CSS reduces the work by controlling the layout of multiple web
pages. CSS is easy to maintain and has good community support.
HTML is an acronym of "Hyper Text Markup Language," which is used for

creating web pages and web applications. It is simple to use and has loose
syntax. It is nearly established on every website and supported by every browser.
It is easy to learn and code. It is free to use and doesn't require any license.
HyperText simply means the "Text within Text." A text has a link within it, is a
hypertext. Whenever we click on a link that brings us to a new web page, we click
on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.
A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes the text more
interactive and dynamic. It can turn text into images, tables, links, etc.
CONCLUSION
HTML and CSS are both essential tools for building websites, but they serve different
purposes. HTML provides the structure and content of a webpage, while CSS provides
its presentation and layout. While they are often used together, it’s important to
understand the differences between these two languages to create effective and visually
appealing websites. With a strong understanding of HTML and CSS, web designers can
create websites that are both functional and visually engaging.
c) WHAT ARE THE DIFFERENT WAYS FOR SPECIFYING CSS IN
DEVELOPING WEB PAGES.
Using CSS
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.
The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:
xternal CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each
HTML page: he external style sheet can be written in any text editor. The file
must not contain any HTML code, and must be saved with a .css extension.
d) CREATE A WEB PAGE WHICH CONTAINS A TABLE FOR DISPLAYING YOUR

PERSONAL DETAILS LIKE NAME, AGE, FATHER NAME, MOBILE NO,
ADDRESS, BRANCH, EMAIL AND GENDER. FOLLOW THE BELOW
REQUIREMENTS;
I. DISPLAY YOUR PICTURE IN THE TOP RIGHT CORNER OF THE WEB

PAGE AS A BACKGROUND IMAGE.
II. DISPLAY THE TABLE HEADER BACKGROUND IN RED COLOR AND THE
TEXT IN WHITE COLOR.
III. DISPLAY EMAIL ROW IN BOLD FONT.
IV. TABLE SHOULD HAVE A DASHED, 1PX WIDTH, GREY COLOR BORDER.
USE ONLY EXTERNAL CSS TO SPECIFY THE STYLING INFORMATION IN THE

ABOVE WEBPAGE.
The Code
<!DOCTYPE html>
<html>
<body>

<h3> HTML input form </h3>

<form method="POST">
<h4>Please enter your First Name : </h4>
<input type="text" name="f_name"><br>
<h4>Please enter your Last Name : </h4>
<input type="text" name="l_name"><br><br>
<input type="submit" value="Display" name="submit">
</form>
</body>
</html>
<?php
// When the submit button is clicked
if (isset($_POST['submit'])) {
// Creating variables and
// storing values in it
$f_name = $_POST['f_name'];
$l_name = $_POST['l_name'];
echo "<h1><i> Good Morning, $f_name $l_name </i></h1>";
}
?>
The output is given in the image below
Read more about web development here:
brainly.com/question/25941596
#SPJ1
QUESTION 3
a) WHAT IS JAVASRIPT
JavaScript is a scripting or programming language that allows you to implement
complex features on web pages — every time a web page does more than just sit there
and display static information for you to look at — displaying timely content updates,
interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can
bet that JavaScript is probably involved. It is the third layer of the layer cake of standard
web technologies, two of which (HTML and CSS) we have covered in much more detail
in other parts of the Learning Area.
b) WHAT ARE THE DIFFERENCES BETWEEN HTML AND JAVASRIPT
Both of these are computer languages that help in programming, but there is a major
difference between JavaScript and HTML. While JavaScript (abbreviated as JS) is a
scripting language, HTML is a markup language.
We use HTML to create web pages or web applications. We can also embed JS programs
in the form of scripts in the HTML code. This converts the overall static form of the web
content into a dynamic form, i.e., it modifies the content on the web pages without having
to reload it. Thus, the content would keep changing in real-time, like in those
cryptocurrency websites.
Hence, JavaScript is a very high-level scripting language. It is prototypal inheritance-

based and dynamic in nature, supporting event-driven, object-oriented, and highly
functional programming. You can find the JS programs in almost all new and avant-garde
browsers and websites.
c) s

Fundamental of Web Design Assignment 1

Uploaded by

Copyright:

Available Formats

Fundamental of Web Design Assignment 1

Uploaded by

Document Information

Original Description:

Original Title

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

Fundamental of Web Design Assignment 1

Uploaded by

Copyright:

Available Formats

QUESTION 1

HTML is an acronym of "Hyper Text Markup Language," which is used for

 Inline - by using the style attribute inside HTML elements

An inline CSS uses the style attribute of an HTML element.

An internal CSS is defined in the <head> section of an HTML page, within

d) CREATE A WEB PAGE WHICH CONTAINS A TABLE FOR DISPLAYING YOUR

I. DISPLAY YOUR PICTURE IN THE TOP RIGHT CORNER OF THE WEB

USE ONLY EXTERNAL CSS TO SPECIFY THE STYLING INFORMATION IN THE

b) WHAT ARE THE DIFFERENCES BETWEEN HTML AND JAVASRIPT

Hence, JavaScript is a very high-level scripting language. It is prototypal inheritance-

You might also like