BSC (Hons) in Cse, Part Iv, Eight Semester Examination, 2012 CSE-421 (Web Engineering) Examination Code: 618 Time: 3 Hours, Full Marks: 80

BSc (HONS) IN CSE, PART IV, EIGHT SEMESTER EXAMINATION, 2012
CSE-421 (Web Engineering)

Examination Code: 618
Time: 3 hours, Full marks: 80
Solved by Moderated by
13th batch Khandaker Akash
Dept. of CSE Dept. of CSE
Dhaka City College Dhaka City College
Approved by
Md. Mustafa Kamal
BSc (Hons.) in Computer Science
MSc Engineering in ICT, BUET (Thesis Cont.)
Assistant Professor, Dept. of Computer Science and Engineering
Dhaka City College, Dhaka
1. (a) Explain the document tree of the webpage. - - - 4
Answer:
Explain the document tree of the webpage:
A web page could be considered as a document tree that can contain
any number of branches. There are rules as to what items each branch can
contain (these are detailed in each elements reference in the contains and
contained by sections). To understand the concept of document tree, its
useful to consider a simple web page with typical content features alongside
its tree view.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Kh Akash">
<title>Document tree of the webpage</title>
</head>
<body>
<h1>This my first webpage</h1>
<p>
It has lots of content. It has some
<em>emphasized text</em>
and look at this, a blockquote:
</p>
<blockquote>
<p>This is blockquote.</p>
</blockquote>
<h2>And here's a subheading</h2>
<p>That about covers it, I think.</p>
<hr>
</body>
</html>
Output:
If we look at this comparison, we can see that the html element in fact
contains two elements: head and body. Head has two sub branches- a meta
element and a title. The body element contains a number of headings,
paragraphs and a blockquote.
Note that theres some symmetry in the way the tags are opened and
closed. For example, the paragraph that reads, It has lots of content
contains three text nodes, the second of which is wrapped in an em element
(for emphasis). The paragraph is closed after the content has ended and
before the next element in the tree begins (in this case, its a blockquote),
placing the closing </p> after the blockquote would break the trees structure.
1. (b) Discuss paragraph, heading and lists tag with example. - - - 3

Answer:
Paragraph tag:
The <p> tag defines a paragraph. The paragraph element begins with
the HTML <p> tag and ends with the HTML </p> tag. Browsers automatically
add some space (margin) before and after each <p> element. The margins
can be modified with CSS (with the margin properties).
Example of paragraph tag,
<p>
This is a simple HTML paragraph element.
</p>
Heading tag:
Headings are defined with the <h1> to <h6> tags. <h1> defines the
most important heading. <h6> defines the least important heading.
Search engines use our headings to index the structure and content of
our web pages.
Users skim our pages by its headings. It is important to use headings
to show the document structure.
h1 headings should be main headings, followed by h2 headings, then
the less important h3, and so on.
Example of heading tag,
<!DOCTYPE html>
<html>
<head>
<title>Document tree of the webpage</title>
</head>
<body>
<h1>This is heading 1</h1>

</body>
</html>
Output should be like as under this figure--
Lists tag:
HTML lists appear in web browsers as bulleted lines of text. There are
actually three different types of HTML lists, including unordered lists (bullets),
ordered lists (numbers) and definition lists. Each list type utilizes its own
unique list tag, which well demonstrate below:
Unordered List with Default Bullets,
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered List with Circle Bullets,

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered list,
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered List with Lowercase Letters,

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
1. (c) Write down the HTML code with CSS for the following
webpage: --- 8
Logo Search box
(Navigational buttons) Main content
Link 1
Link 2
Link 3
200x200
image
Footer
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Simple webpage layout</title>
<style>
.mainStructure{
width:960px;
height:100%;
margin:0 auto;
}
header{
witdth:100%;
height:70px;
border:1px solid #3399ff;
}
.logoSection{
float:left;
width:400px;
height:100%;
}
.logoSection p{
width:150px;
border: 1px solid #3399ff;
padding:5px;
margin-left:40px;
text-align:center;
}
.searchSection{
float:right;
width:550px;
height:100%;
}
.searchSection input{
padding:5px;
margin-top:20px;
float:right;
margin-right:40px;
}
.mainContent{
width:100%;
height:200px;
}
.navBar{
float:left;
width:400px;
height:100%;
}
.navBar button a{
padding:20px;
text-decoration:none;
color:#000000;
font-size:20px;
}
.imageSection{
width:100%;
height:100px;
}
.imagePart{
float:left;
width:400px;
height:100%;
}
.imagePart p{
width:100px;
height:40px;
margin-left:20px;
}
footer{
width:100%;
height:50px;
}
footer p{
text-align:center;
}
</style>
</head>
<body>
<div class="mainStructure">
<header>
<div class="logoSection">
<p>Logo</p>
</div>
<div class="searchSection">
<input type="search"
placeholder="Search box">
</div>
</header>
<div class="mainContent">
<div class="navBar">
<p>(Navigational buttons)</p>
<button type="button"><a href="#">Link
1</a></button><br>
2</a></button><br>
3</a></button>
</div>
<div class="content">
<p>Main content</p>
</div>
</div>
<div class="imageSection">
<div class="imagePart">
<p>
200X200<br>
image
</p>
</div>
<div class="blankPart">
</div>
</div>
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>
Output:
1. (d) Explain how HTTP protocol works with HTTP request and
response. -- 5
Answer:
HTTP protocol works with HTTP request and response:
HTTP stands for Hypertext Transfer Protocol. It's a stateless,
application-layer protocol for communicating between distributed systems,
and is the foundation of the modern web. As a web developer, we all must
have a strong understanding of this protocol.
HTTP allows for communication between a variety of hosts and clients,
and supports a mixture of network configurations.
This makes HTTP a stateless protocol. The communication usually
takes place over TCP/IP, but any reliable transport can be used. The default
port for TCP/IP is 80, but other ports can also be used.
Communication between a host and a client occurs, via
a request/response pair. The client initiates an HTTP request message,
which is serviced through a HTTP response message in return.
URLs
At the heart of web communications is the request message, which are
sent via Uniform Resource Locators (URLs).
Verbs:
URLs reveal the identity of the particular host with which we want to
communicate, but the action that should be performed on the host is
specified via HTTP verbs. Of course, there are several actions that a client
would like the host to perform. HTTP has formalized on a few that capture
the essentials that are universally applicable for all kinds of applications.
These request verbs are:

GET: fetch an existing resource. The URL contains all the necessary
information the server needs to locate and return the resource.
POST: create a new resource. POST requests usually carry a payload
that specifies the data for the new resource.
PUT: update an existing resource. The payload may contain the
updated data for the resource.
DELETE: delete an existing resource.
2. (a) What is advantage of HTML5 over HTML4? Give two tag name
with example that are not present in HTML4 - - - 6
Answer:
Advantage of HTML5 over HTML4:
The most significant advantage of HTML5 and HTML4 is multimedia
features. HTML4 requires external software, like flash, to play videos and
multimedia content. Sometimes this may cause due to incompatibility. But in
case of HTML5, embed video can run on web-pages without using any external
software. HTML5 is user friendly.
Solving continue . . .
Link 2
Link 3
200x200
image
Footer

BSC (Hons) in Cse, Part Iv, Eight Semester Examination, 2012 CSE-421 (Web Engineering) Examination Code: 618 Time: 3 Hours, Full Marks: 80

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

BSC (Hons) in Cse, Part Iv, Eight Semester Examination, 2012 CSE-421 (Web Engineering) Examination Code: 618 Time: 3 Hours, Full Marks: 80

Загружено:

Авторское право:

Доступные форматы

BSc (HONS) IN CSE, PART IV, EIGHT SEMESTER EXAMINATION, 2012

CSE-421 (Web Engineering)

<meta name="author" content="Kh Akash">

<title>Document tree of the webpage</title>

<h1>This my first webpage</h1>

It has lots of content. It has some

and look at this, a blockquote:

<h2>And here's a subheading</h2>

<p>That about covers it, I think.</p>

1. (b) Discuss paragraph, heading and lists tag with example. - - - 3

Example of heading tag,

<meta name="author" content="Kh Akash">

<title>Document tree of the webpage</title>

<h1>This is heading 1</h1>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Output should be like as under this figure--

Unordered List with Circle Bullets,

Ordered List with Lowercase Letters,

Logo Search box

(Navigational buttons) Main content

These request verbs are:

Вам также может понравиться