Computer Science (New) - For Class IX - UNIT. 6. Web Development - Short and Descriptive Questions Answers

GO TO INDEX

Chapter No.6. Web Development
Descriptive Questions Answers

Q.1: What is web development?
Ans: Web Development:
Development of web sites and online applications is called web development.
This is done by coding in different languages and by using several web development tools and frameworks.
A complete web application may consist of a:

• User Interface
• Back-End Server Codes and
• a Database.

Q.2:Define the following terms?
(i) World Wide Web (WWW), (ii) Web Page, (iii) Website, (iv) Web Browser, (v) Uniform Resource Locator (URL), (vi) Search Engine, (vii) Home Page, (viii) Web Hosting, (ix) Web Server
Ans: Definition of Terms:
(i) World Wide Web (WWW):

• The word world wide web (www) is commonly known as the web.
• The Web is a collection of computers connected through a network to provide publicly accessible information.

(ii) Web Page:

• A webpage is a document commonly written in HTML that is accessible through internet by using internet browser.

(iii) Website:

• A website is a collection of web pages containing text, images, and all types of multimedia related to a specific set of information.
• A website can be accessed through a Uniform Resource Locator (URL).

(iv) Web Browser:

• A web browser is a software application for accessing websites on the world wide web.
• Example:
  Most common web browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Safari.

v) Uniform Resource Locator (URL):

• It is the address of a resource on the internet.
• e.g. (https://www.google.com).
• Components Of URL:
  It includes the following two components.
  (a) The protocol used to access the resource (https://)
  (b) The location of the server. (www.google.com)

(vi) Search Engine:

• A Search Engine is a web-based tool that enables a user to locate information on the web.
• Example:
  Most popular search engines are Google, Yahoo, and Bing.

(vii) Home Page:

• A home page (also known as landing page) is a web page that serves as the starting point of the website.

(viii) Web Hosting:

• Web Hosting is a service that allows a web developer to make a website publicly accessible through the internet.

(ix) Web Server:

• A web server is the computer that is responsible for serving a website and all of its content including text and media to a user.

Q.3: Describe the different types of website?
Ans: Types Of Website:
There are different types of specialized websites such as Portal, News, Informational, Educational, Personal, Business, Blogs, Forums, Entertainment and Social.

(1) Portal:

• A web portal is a website that provides a single access point of information for all of its users.
• It collects information from different sources like emails, forums, search engines and presents it to the user in a uniform way.
• Example:
  Yahoo and MSN are common examples of web portal.

(2) News:

• A news website is the modern-day alternative for newspapers.
• Such websites contain everyday information related to current affairs, sports, politics, weather, health, technology, entertainment, etc.

(3) Informational:

• Informational websites provide detailed information of any field.
• There are many dedicated informational websites for science, arts, sports, online trainings, research, etc.

(4) Educational:

• Educational websites are purely designed to deliver educational material for both, teachers and students.
• Example:
  sabaq.pk, khan academy.org, etc.

(5) Personal:

• A person can share about his or her biography or achievements in a custom developed website.

(6) Business:

• A business website is the best way for any organization to market their products and services.
• It also tells about the teams, policies and procedures of that business.
• For instance:
  www.psx.com.pk is the website of Pakistan Stock Exchange.

(7) Blogs:

• A blog is a special type of website that is composed of articles and posts.
• These articles are organized into categories and sorted by the time when they were published.
• Eample:
  Wordpress is a popular blog site.

(8) Forums:

• A forum is an online place where different users can discuss about any topic.
• These topics can be categorized so that users can easily locate topics of their interest.

(9) Entertainment:

• An entertainment website serves content like videos or games purely for the purpose of entertainment.
• Example:
  Youtube is widely used for entertainment.

(10) Social:

• Social website is a platform where different people get together and socialize with each other.
• They can also share their ideas, opinions and media.
• Example:
  Facebook and Twitter are instances of social networking websites.

Q.4: Define and explain HTML (Hypertext Markup Language)?
Ans: Hypertext Markup Language (HTML):

• HTML stands for Hypertext Markup Language.
• It is standard markup language for text documents.
• HTML is used to create web pages that are displayed by web browsers mainly on internet.
• HTML consists of a series of elements. These elements tell the browser how to display the content.
• It allows the user to create structured content by adding headings, paragraphs, links, blockquotes and other media.
• It takes advantage of simple code structures called tags and attributes to achieve formatting, graphic and navigation effects on web pages.

Q.5: What are the various steps involved in creating a web page?
Ans: Requirements:
Creating a simple web page using HTML is very easy.
It requires:

1. A text editor
2. A file with .html extension and
3. A web browser to view that page.

Steps Involved In Creating Web Page In HTML
Step 1: Text Editor (e.g. Notepad):

• Start by simply creating a new blank file in a text editor of your choice.
• A simple text editor like notepad can be used to start coding HTML for a web page.

Step 2: Write HTML code in Text Editor
Example:

Example Explained:

• The <html> element is the root element of an HTML page.
• The <head> element contains meta information about the HTML page.
• The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).
• The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Step 3: Save HTML Page:

• Go to File menu and click on Save.
• Make sure to provide .htm or .html extension for the file being saved.
• This will save the document as a web page instead of a plain text file.

Step 4: View HTML Page in Browser:

• Open the saved HTML file in your default web browser.
• The web browser will automatically translate HTML codes to correctly display the web page.

Q.6: Define and explain HTML tags?
Ans: HTML Tags:

• HTML elements are the building blocks of HTML pages.
• These elements are defined by placing HTML tags in our document.
• These tags are placed inside angular brackets (< >). Here (<) is called opening (start) tag and (>) is called closing (end) tag.
• Most of HTML tags always require a closing tag while some HTML tags such as
• are empty tags which means that they don't require a closing tag.
• Some tags also allow further customization by adding attributes to them.

HTML Tag Structure:
An HTML tag has the following structure:

• Simple Tag:
  <tag-name>content</tag-name>
  
  
• Tag with Attribute:
  <tag-name attribute-name= “attribute value”>content</tag-name>

Explanation:
The above syntaxes show:

• the structure of opening a tag,
• defining attribute values,
• placing content inside the element represented by that tag and
• its closing structure.

Q.7: Identify and explain HTML tags used for designing and formatting of the content?
Ans: HTML TAGS FOR DESIGNING AND FORMATTING OF THE CONTENT:

• Some HTML tags introduce content directly into the web page while others enhance the design and format of that content.
• Some most commonly used HTML tags which change the looks of the web page are:

TAG	DESCRIPTION
<!DOCTYPE html>	It specifies the HTML version used so the web browsers can show the web page according to HTML standards.  All HTML documents must start with this tag.
<html>	All HTML documents start with <html> tag and end with </html> tag.
<head>	It is used to define additional information about the web page.  It contains a set of tags such as < title> , < meta> , < style> , < script> , etc .
<body>	The main content of the web page is contained between < body>> and < /body> .

Titles and Footers:

TAG	DESCRIPTION
<title>	It defines the title of a web page.  Titles are very important as they appear on top of the browser window and displayed on search engine result pages.
<footer>	It defines the footer for a web page. e.g. “Copyright 2020. All rights reserved.”

Paragraphs and Line Breaks:

TAG	DESCRIPTION
<p>	It defines a paragraph of text in a webpage.  It always starts from a new line and adds space before and after its text.
<br>	It defines a line break and starts the following content from a new line.  Unlike <p> tag, it does not add space before or after the break.
<hr>	It draws a horizontal line where it is defined.  It is used to differentiate between sections of the page.

Headings:

TAG	DESCRIPTION
<h1> - <h6>	It is used to define six levels of HTML headings (h1, h2, h3, h4, h5 and h6) with <h1> being heaviest heading and <h6> being the lightest heading.

Text Formatting:

TAG	DESCRIPTION
<b> , <i> , <u>	These tags are used to bold, italicize and underline text respectively.
<pre>	It is used to define a preformatted text.  The web browser displays such text with spaces and line breaks as defined in HTML codes.
<font>	It is used to define the font, size and color of its text.  This tag can be composed with three attributes: size, color and face.  This tag is supported till version 4.1 of HTML.
<center>	It is used to align its text to the horizontal center of the web page.  This tag is supported till version 4.1 of HTML.
<sub>	It defines subscript text which is under the baseline of other text and has a smaller size. e.g. H2O
<sup>	It defines superscript text which is slightly above the normal line of other text and has a smaller size. e.g. E=mc2

Example:

Output:

Q.8: Define Html lists? How many types of lists can be created in HTML?
Ans: HTML Lists:

• HTML lists allow web developers to group a set of related items in lists.
• Lists are very useful in displaying point by point information such as:
  to-do list,
  list of ingredients for a recipe,
  list of categories, etc.
  
  

Types Of Lists In HTML:
HTML provides three different types of list elements namely:

1. Unordered Lists
2. Ordered Lists and
3. Description Lists

and there is another list name as:

• Nested List (list inside list)

The web browsers automatically add indents, spaces and markers to HTML lists.

1) Unordered List:

• An unordered list is a list of related items in which the order of items is irrelevant.
• It is defined by <ul> tag and each of its list item is defined by <li> tag.
• The web browser will display these list items as bullet points.

2) Ordered List:

• An ordered list also displays a list of related items.
• It is used where the order of the list is important e.g. names of students in order of their exam ranks.
• It is defined by <ol> tag and each of its list item is defined by <li>.
• The web browser will display these list items with numbers starting from 1 instead of bullet points. Ordered lists can also be defined with two of its attributes: start and reversed.
• Start attribute defines the starting number of first list item.
• Reversed attribute is used to display the list in descending order.
• The list items for ordered list can also be defined with a value attribute which is used to place that item at a specific position or number in the list.

3) Description List:

• Description lists are used to display different terms and their descriptions just like in a dictionary or glossary.
• It is defined by <dl> tag and each of its list items is composed of two elements: term and description.
• Term is defined by <dt> tag and its description is defined by <dd> tag.
• In description lists, a term can have one or more descriptions and a description can have one or more terms.

4) Nested Lists:

• HTML lists can be nested i.e. list inside list. Such lists are called nested lists.
• A very powerful feature of HTML lists is their ability to nest one into another.
• Any of the list type can contain any other list type as its list item.
• It is defined by placing the new list tag inside the <li> tag of previous list.
• Web browsers automatically indent nested lists and assign appropriate marker to those nested list items as well.

Q.9: How are images displayed in an HTML page?
Ans: IMAGE:

• Images give a visual appeal to the websites.
• Sometimes images can present a better understanding than long and uninteresting texts.
• Inserting Images in an HTML Page:
• Images can be inserted in an HTML document by using <img> tag.
• This does not create a copy of image. Instead, it only creates a reference to original image placed somewhere in the computer's storage.
• The <img> tag is an empty tag which means that it does not require a closing </img> tag.
• It contains five attributes out of which two are required and three are optional.

Attributes of Image Tag:

Attribute	Value	Description
src	URL	Defines the source or reference of the image le. Syntax: <img src=“image.jpg”>
alt	text	Defines alternate text for the image. Syntax: < img src=“image.jpg” alt=“Introduction ”>
width	pixels	Defines the display width of the image. Syntax: <img src=“image.jpg” width=“300”>
height	pixels	Defines the display height of the image. Syntax: <img src=“image.jpg” height=“120”>
border	pixels	Defines the width of the border to be displayed around the image. (This attribute is supported till version 4.1 of HTML). Syntax: <img src=“image.jpg” border=“2” >

Q.10: How can be the background colour change in HTML?
Ans: Backgrounds:

• Backgrounds also give a visual appeal to the websites.
• The web browsers display an HTML document with white background by default. However, this can easily be changed to a different color or even an image with the help of bgcolor and background attributes of the <body> tag.
  
  

Background Attributes:

• bgcolor:
  This attribute is used to change the color of the entire web page.
  Its color value can be dened as RGB code, hexadecimal code or by color name.
  For instance, to set the background color of the web page to green we can use any one of these values: rgb(0,255,0) : #00FF00 : green
  e.g. <body bgcolor=“green”>
  
  
• background:
  This attribute is used to display an image as the background of the web page.
  Its value will be the reference or URL of the background image.
  e.g. <body background=“image.jpg”>
  (This attribute is supported till version 4.1 of HTML).

Q.11: Define a hyperlink? How can we create a hyperlink to an external web page or within the same web page in HTML?
Ans: HYPERLINKS

• Hyperlinks allow a user to navigate from one web page to another.
• It also enables users to navigate to different sections within the same web page.
• Hyperlinks convert text or other media into clickable objects.
• Definition:
  A hyperlink in HTML is defined by <a> tag and its href attribute. The value of href is the reference of another web page or a different section within the same page.

Links to external document:

• To send a user to any other web page, use the URL of that page as the value for href attribute.
• e.g. <a href=“http://www.google.com”>Goto Google</a>

Links within the same document:
Setting the link within the same page requires two steps:

1. Use id attribute of any HTML tag to give a name to the section of the page, where a user should reach after clicking on the link.
2. Create a hyperlink and set the above name as href attribute of this link, starting with hash (#) symbol.
   e.g. <p id=“navigate”a>Send user here on click</pa>
   <a href=“#navigate”a>Go to the linked paragraph</aa>

Attributes Of Hyperlink Tag

Attribute	Value	Description
href	URL	Specifies the URL or section id of thepage the link goes to.
name	Section Name	Specifies the name of an anchor. This attribute works till version 4.1 of HTML.
target	_blank: _parent: _self: _top: framename	Specifies where to open the linked document.

Q.12: Define term table and differentiate between rows and columns? Also describe formatting features and attributes of tables?
Ans: TABLES:

• Tables allow displaying the content (like text, image, links) in the form of rows and columns.
• The coordinating place of a row with a column is called a cell.
• These cells contain some content of the webpage.
• In HTML, a table is defined by <table> tag.

ROWS AND COLUMNS:
Rows:

• A row is the collection of all horizontal cells of a table.
• A table can contain any number of rows.
• All the rows in a table have an equal number of cells.
• It is defined by <tr> tag which is placed inside the <table> tag.

Columns:

• A column is the collection of all vertical cells of a table.
• A table can contain any number of columns as well.
• It is defined by <td> tag which is placed inside the <tr> row tag.

FORMATTING FEATURES OF TABLE:
Table Heading:

• HTML table allows defining a header for the columns of our table.
• A header cell is defined by <th> tag and is placed inside a <tr> row tag.
• It is used to differentiate from the content placed inside normal <td> data cells.
• To make the entire header row stand out from rest of the table contents, dened <th> tags for all columns of the first <tr> row tag of any <table> tag.

Table Data:

• The content is placed inside a cell in a table by using <td> table data tag.
• A cell can contain any type of data such as text, image, media, link, etc.

Table Attributes:

Attribute	Value	Description
align	left: center: right	Species the alignment of a table according to surrounding text.
width	pixels: %	Species the width of a table.
border	1 or 0	Enables or disables the border around the table.
cellpadding	pixels	Species the space between the edge of cell and the content inside.
cellspacing	pixels	Species the space between cells.

All the above attributes are supported till version 4.1 of HTML.

Cell Attributes:

Attribute	Value	Description
align	left: center: right	Species the alignment of the content inside the cell.
valign	top: middle: bottom: baseline	Vertically aligns the content in a cell.
colspan	number	Species the number of columns a cell should merge into.
rowspan	number	Sets the number of rows a cell should merge into.

All the above attributes are supported till version 4.1 of HTML.

Note: In example: (.html document will always written as:
<!DOCTYPE html>
<html>
<body>
<h5>Heading here </h5>
<table>Table content here</table>
</body>
</html>

OUTPUT:

Q.13: Define a frame and framesets? Also describe their attributes in HTML?
Ans: FRAMES:

• HTML frames are powerful elements which allow displaying the contents of another HTML document within a web page.
• A web page can be divided into multiple sections and each section can display all contents from a different web page by using frames.
• It is defined by <frame> tag.
• The src attribute is used to provide the reference URL of another web page to be displayed in this frame.

Attribute OF Frame:

Attribute	Value	Description
src	URL	Defines the URL of the page which should be displayed in the frame.
marginheight	pixels	Defines top and bottom spaces of a frame.
marginwidth	pixels	Defines left and right spaces of a frame.
noresize	noresize	Defines if the user can change the frame size or not.
scrolling	yes: no: auto	Defines if the scroll bar should be displayed within the frame or not.

HTML frames and framesets are supported till version 4.1 of HTML.

FRAMESETS:

• Framesets define how a web page is divided into rows and columns to display multiple frames on that web page.
• It is defined by <frameset> tag and contains one or more <frame> tags.

Attribute OF Frameset:

Attribute	Value	Description
cols	pixels: %	Denes the number and the size of frame columns.
rows	pixels: %	Denes the number and the size of frame rows.

Q.14: List out some popular text editor and other different tools which help in designing and development of website?
Ans: WEB DESIGNING TOOLS
Following is the list of some of the tools that help in designing and developing a website:

• Microsoft FrontPage
• Coral Draw
• Adobe Dreamweaver
• Wordpress
• Microsoft Visual Studio
• Wix
• Figma
• CoffeeCup HTML Editor
• Adobe XD