Scribd
Upload
3 views

Web Technologies Unit I Notes

The document provides comprehensive notes on Web Technologies for B. Com II Year IV Semester, covering key concepts such as markup languages, HTML tags, web design principles, formatting tags, forms, hyperlinks, and types of lists in HTML. It includes detailed explanations, syntax, attributes, and examples for various HTML elements and principles of web design. The content is structured into units with questions and answers to facilitate understanding of web technologies.

Uploaded by

bharika511
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Web Technologies Unit I Notes

The document provides comprehensive notes on Web Technologies for B. Com II Year IV Semester, covering key concepts such as markup languages, HTML tags, web design principles, formatting tags, forms, hyperlinks, and types of lists in HTML. It includes detailed explanations, syntax, attributes, and examples for various HTML elements and principles of web design. The content is structured into units with questions and answers to facilitate understanding of web technologies.

Uploaded by

bharika511
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

B.

Com II Year IV Semester


Web Technologies Notes
Unit – I
Question and Answers:
1. What is markup language?
Markup language can be defined as a programming language that defines varied data and
elements with the help of tags. The word “markup” in real sense refers to highlighted
instance of a given aspect i.e., an author can highlight a particular word of the written
document to grab the attention of readers. HTML is one of the best examples of markup
language.
-------------------------------------------------------------------------------------------------------------------
2. What do you mean by <br> and <hr> tag?
<br> is a break tag that is used to show a line break in a HTML page.
Syntax:
<p> statement – 1 <br> statement – 2 </p>
Ex:
<p> Welcome to <br> HTML </p>
<hr> tag is used to define a thematic break in a HTML page.
Syntax:
<p> statement – 1 </p> <hr> <p> statement – 2 </p>
Ex:
<p> Welcome to </p> <hr> <p> HTML </p>
-------------------------------------------------------------------------------------------------------------------
3. How do you insert an image in a web page? (Or) Write short notes on <img> tag along
with its features.
Image tag is used to add an image to the page. This is done by providing suitable image
source in the tag.
Syntax:
<img> ----- </img>
Attributes:
a) src: Specifies the URL of the image.
b) alt: Specifies an alternate name to the image.
c) align: Specifies the alignment of the image on the web page. The values are “top”,
“bottom”, “left”, “right” or “middle”.
d) border: Specifies the width of the border in pixels.
e) height / width: Specifies the height and width of an image in pixels.
f) hspace / vspace: Specifies horizontal space or vertical space between text and images in
pixels.
g) name: Specifies name of the image.
Program:
<html>
<head>
<title> Image Tag </title>
</head>
<body>
<img src = “tulips.jpg” align = “middle” alt = “Tulips” border = “2” width = “150” height=
“150”>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
4. Explain the basic structure of HTML.
The basic structure of HTML is divided into three types or sections.
➔ Document Section
➔ Head Section
➔ Body Section
1. Document Section:
It specifies the version in which HTML document is created. The latest version of HTML is
supported by almost all the web browsers is HTML 5.0.
<! DOCTYPE Html >
2. Head Section:
Head section of a document starts with <head> tag and ends with </head> tag. The head
section consists of two elements i.e., meta element and title element.
Ex:
<head>
<title> HTML </title>
</head>
3. Body Section:
Body section of a document starts with <body> tag and ends with </body> tag. The data
describing the content of the browser is written between open and close tags.
<body> data </body>
Structure:
<! DOCTYPE Html >
<head>
<title> --------- </title>
</head>
<body>
-----------------
-----------------
</body>
Program:
<! DOCTYPE Html >
<html>
<head>
<title> Html </title>
</head>
<body>
Welcome to HTML
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
5. Explain in detail about Web Design Principles.
The various web designing principles are as follows:
1. Understanding the Site Aims:
The site ensures whether user defined the aims of the website clearly. A site may have
several purposes, by asking some questions such as a product or service that the user is
dealing with, what is special about it etc.
A site may be designed to push a product or service or to teach new skills to create a
community etc. Each of these have their own set of questions, but it is important to know
what the site is trying to achieve and what is required to meet those goals.
2. Whom You Except to Visit Our Site:
While creating a web site, each of the page is entered for the target audience of the
site not only for the client. It is important to understand the target audience first.
It is important for a site related to company to provide information that a customer
needs and is interested in. So, we need to be clear with the answers for the questions such
as who will be visiting our site and what for, what might be their motivation etc.
3. Defining Our Sites Content:
After knowing the goals of our site, the aimed visitors and how often the content is to
be changed. Now we decide what will be the actual content of our site. The content should
be what the visitors expect from our site. It should include a detailed description about the
product and services, time taken to complete a service and who will perform it etc.
User need to observe other sites which address the similar topic and look what they
do and don’t do, so that the user can present in different way and stand better. We should
add all the important things from our logo and branding to copyright notice, privacy and
policy etc.
4. Grouping and Categorization:
All the ideas user covered can now be grouped together. If the site is about advertising
several products and services, they all can be grouped and placed together and also can be
placed together and also can be split into subgroups. The information about the company,
its history etc.
There should be six or seven sections and these form primary or global navigation
items of our site. There might be subsections with several pages of their own. They form
secondary or category navigation.
These categories and subcategories are like table of contents and form the basic
navigation of our site. These should take part in main menu. The customers should be able
to easily navigate and understand our products and services.
5. Creating a Site map:
Once you have got the idea about which sections and pages are needed to be added to
your site, then you can start up drawing a site map as you imagined. It should be like a
family tree or folder in windows explorer.
The site should start-up with the homepage with all the required main categories at
the top of the page.
Ex: Department is one of the main categories, then each of the department in this category
will be the sub section and each of them will be displayed in separate pages.
6. Identification of Key Elements for Each page:
The last step that has to be performed before starting to design a page is to identify
what are the key elements that should appear on each page. The elements such as branding
or logos, primary navigation, category navigation, heading, main content, search box and
space for self-promotions advertising other companies, products or services will be
included.
These elements will be reflecting the aim of the site. A site must be less cluttered for
easy navigation.
-------------------------------------------------------------------------------------------------------------------
6. Write about different formatting tags.
Formatting the text or content present in a web page can be done by using formatting tags.
The different formatting tags are
1. Paragraph: The <p> tag allows the text to be written in a paragraph.
<p> …………… </p>
2. Center: The <center> tag allows the text to be written in the center of the page.
<center> ………….. </center>
3. Break: The <br> tag displays the text in a new line.
<br>
4. Bold: The <b> tag displays the text in bold format.
<b> …………… </b>
5. Italic: The <i> tag displays the text in italic format.
<i> …………… </i>
6. Underline: The <u> tag displays the text in underlined format.
<u> …………... </u>
7. Subscript: The <sub> tag display the text in subscript format.
<sub> …………. </sub>
8. Superscript: The <sup> tag displays the text in superscript format.
<sup> ………….. </sup>
9. Strike: The <strike> tag displays the striked through text.
<strike> …………… </strike>
10. Delete: The <delete> tag displays the text that is to be deleted.
<delete> …………… </delete>
11. Insert: The <ins> tag displays the text that is to be inserted.
<ins> ………………. </ins>
12. Small: The <small> tag displays the text in small size.
<small> ………… </small>
13. Big: The <big> tag displays the text in big size.
<big> ………….. </big>
14. Strong: The <strong> tag displays the text same as bold.
<strong> …………….. </strong>
15. Marked: The <mark> tag displays the text by highlighting or marking it.
<mark> ………….. </mark>
Program:
<html>
<head>
<title> Formatting Tags </title>
</head>
<body>
<b> Bold Text </b> <br>
<i> Italic Text </i> <br>
<u> Underline Text </u> <br>
<strike> Strike through Text </strike> <br>
<strong> Strong Text </strong> <br>
<sup> Superscript Text </sup> <br>
<sub> Subscript Text </sub>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
7. Define forms. Explain various form controls or elements in HTML.
Form:
Form is a web page which carries elements like text fields, check boxes, buttons etc. These
web pages look like a normal white sheet of paper consisting significant spaces for
information to be entered by users. Online forms can be used for different purposes in order
to retrieve input from the user.
Ex: Online registration, order entry, subscription form etc.
<form> tag helps in creating HTML form. The code is embedded between the tags <form>
……… </form>.
Attributes:
a) Action:
This attribute carries a URL, where a program that is responsible for managing the data
that belong to current form. Whenever the user clicks the submit button, the current data
gets directed to that program whose path is supplied as URL.
b) Method:
This attribute selects the best possible way of transmitting the data from the current form
to the server. The attributes are “POST” and “GET”.
c) Name:
This attribute is used to specify the name the form. It references the form data after form
submission.
Syntax:
<form action = “URL” method = “POST / GET” name = “form name”>
Statements
</form>
Form Elements:
The different types of form controls are
➔ Text Input controls
➔ Checkboxes controls
➔ Radio box controls
➔ Select box controls
➔ Button controls
Text Input Controls:
Attributes of <input> tag:
1. type: Indicates the type of input control and output control.
2. name: Specifies the name of the control to be sent to the server.
3. value: Specifies the initial value to be displayed inside the control.
4. size: Specifies the width of the text-input control.
5. maxlength: Specifies the maximum number of characters a user can enter into the text
box.
There are three types of text input controls
i) Single – line text input control:
This control is used for items that require only one line of user input, such as search boxes
or names. They are created using <input> tag.
Ex:
<input type = “text” name = “firstname”>
ii) Password input control:
This control marks the characters as soon as a user enters it. They are created using <input>
tag.
Ex:
<input type = “password” name = “Password”>
iii) Multi – line text input control:
This control is used to give details that may be longer than a single line, such as address,
comments, feedback etc. They are created using <textarea> tag.
Attributes:
Rows: Specifies the number of rows in the text area.
Cols: Specifies the number of columns in the text area.
Name: Specifies the name to the control which is sent to the server.
Ex:
<textarea cols = “50” rows = “10” name = “address”>
</textarea>
Program:
<html>
<head>
<title> Input Control </title>
</head>
<body>
<form>
<label> Fisrt Name: </label>
<input type = “text” name = “fname” value = “Enter your first name” size = “20”> <br>
<label> Last Name: </label>
<input type = “text” name = “lname” value = “Enter your last name” size = “20”> <br>
<label> Address: </label>
<textarea rows = “5” cols = “50” name = “address” >
Enter Address
</textarea>
</form>
</body>
</html>
Checkbox Controls:
They are used when more than one option is required to be selected. They are also created
using <input> tag. The type definition is set to checkbox.
Ex:
<input type = “checkbox” name = “cb1”>
Attributes:
Type: Specifies the type of control.
Name: Specifies the name to the checkbox which to be sent to the server.
Value: Specifies the value that if the checkbox is selected.
Checked: Set to checked, if you want to select it by default.
Program:
<html>
<head>
<title> Check Box </title>
</head>
<body>
<form>
<label> Languages known: </label>
<input type = “checkbox” name = “cb1” checked> English <br>
<input type = “checkbox” name = “cb2”> Hindi <br>
<input type = “checkbox” name = “cb3”> Telugu
</form>
</body>
</html>
Radio Box Control:
Radio buttons are used to select only one option from many options. They are used with
<input> tag. They type attribute is set to radio.
Ex:
<input type = “radio” name = “r1”>
Attributes:
Type: Specifies the type of control.
Name: Specifies the name to the radio button which to be sent to the server.
Value: Specifies the value that if the radio button is selected.
Checked: Set to checked, if you want to select it by default.
Program:
<html>
<head>
<title> Radio Button </title>
</head>
<body>
<form>
<label> Gender </label>
<input type = “radio” name = “r1” checked> Male <br>
<input type = “radio” name = “r1”> Female <br>
<input type = “radio” name = “r1”> Others
</form>
</body>
</html>
Select Box Control:
A select box is also known as drop down box which provides option to list down various
option in the form of drop down list. The user can select one or more options also.
Syntax:
<select name = “value”>
<option value = “value” selected> ………… </option>
…………………
…………………
</select>
Attributes of <select> tag:
Name: Specifies the name given to the control to be sent to the server.
Size: It is used to present a scrolling list box.
Multiple: Allows the user to select multiple items from the menu.
Attributes of <option> tag:
Value: Specifies the value used in the select box.
Selected: Specifies that this option should be initially selected.
Label: Specifies an alternative way of labeling options.
Program:
<html>
<head>
<title> Drop Down Box </title>
</head>
<body>
<form>
<select name = “Universities”>
<option> Osmania University </option>
<option> JNTU </option>
<option> Kakatiya University </option>
<option> Mahatma Gandhi University </option>
<option> Palmur University </option>
</select>
</form>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
8. What are hyperlinks? Explain about anchor tag.
Hyperlink:
A hyperlink creates a link. This link directs the user to another HTML page or to any
specific part of a web page or the same web page. A hyperlink allows the user to navigate
between various words, phrases and images. It allows the users to create hyperlinks using
text/images available on web page.
Anchor Tag:
A link is defined using <a> tag, which is known as anchor tag. The code for creating a link
is embedded between <a> ………… </a> tags.
Syntax:
<a href = “URL” attribute list> text </a>
Attributes:
1. href: It defines the destination address. It is known as URL path.
2. text: It embeds text/image or any other HTML element on web page.
3. target: Specifies the location to open a link document. Its values are blank, self, parent
top and target frame.
Program:
<html>
<head>
<title> Hyperlink </title>
</head>
<body>
<p> The link directs to another HTML page </p> <br>
<a href = “http://osmania.ac.in” target = “self”> Osmania University </a>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
9. Explain types of lists in HTML.
List refers to the arrangement of information in a specific format. Examples, list of names
of employees, list of names of places etc.
Types of lists:
HTML supports three types of lists. They are,
1. Unordered List
2. Ordered List
3. Definition List
1. Unordered List:
It is a collection of related items that have no specific order or sequence. The list items are
marked with bullets. It is also known as bulleted list. The unordered list is started with <ul>
tag and the list items with <li> tag.
Syntax:
<ul>
<li> ……… </li>
<li> ……… </li>
</ul>
“Type” attribute specifies the bullets in unordered list. There are 3 values.
1. Circle -
2. Square -
3. Disc –
Program:
<html>
<head>
<title> Unordered List </title>
</head>
<body>
<ul type = “circle”>
<li> B.Com </li>
<li> B.Sc </li>
<li> B.B.A </li>
<li> B.C.A </li>
</ul>
</body>
</html>
2. Ordered List:
In an ordered list all the list items are marked with numbers by default. It is also known as
numbered list. The ordered list starts with <ol> tag and the list items with <li> tags.
Syntax:
<ol>
<li> …………… </li>
<li> …………… </li>
</ol>
“type” attribute specifies the following values for ordered list.
1. Capital Alphabets: A to Z
2. Small Alphabets: a to z
3. Large Roman Numbers: I, II, III, ……………..
4. Small Roman Numbers: i, ii, iii, ……………….
5. Numerals: 1, 2, 3, ……………………
Program:
<html>
<head>
<title> Ordered List </title>
</head>
<body>
<ol type = “I”>
<li> B.Com </li>
<li> B.Sc </li>
<li> B.B.A </li>
<li> B.C.A </li>
</ol>
</body>
</html>
3. Definition List:
It is a special type of list that lists terms and their documents. It is created using <dl> tag.
A term in a definition list is specified using <dt> tag and its definition is specified using <dd>
tag.
Syntax:
<dl>
<dt> ……………. </dt>
<dd> ……………. </dd>
</dl>
Program:
<html>
<head>
<title> Definition List </title>
</head>
<body>
<dl>
<dt> B.Com </dt>
<dd> Bachelor of Commerce </dd>
<dt> B.Sc </dt>
<dd> Bachelor of Science </dd>
<dt> B.B.A </dt>
<dd> Bachelor of Business Administration </dd>
</dl>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
10. What is a Table? Explain the attributes of <table> in HTML.
In HTML, data can also be represented in tabular format. Data is arranged in terms of
rows and columns. The tags and attributes are as follows:
1. <table> ………….. </table>
The entire code of a given table is written within these tags.
Attributes:
i) align: Specifies the alignment of the given table. The values are left / right / center
respectively.
ii) background: Species an image or other graphics as background of the table. It usually
carries a URL path to the given image or graphics.
iii) bgcolor: Sets the colour of the window where the table is displayed.
iv) bordercolor: Sets the color to the border of the table.
v) border: Sets the border of the table.
vi) cols: Specifies the number of columns in a given table
viii) height: Specifies the height of a given table.
ix) width: Specifies the width of a given table.
x) cellspacing: Specifies the space between table cell.
xi) cellpadding: Specifies the space between the cell and the content.
2. <tr> …………. </tr>
It corresponds to a single row of a given table. Data within these tags is displayed in a
particular row of that table. These tags may have <th> and <td> tags within them.
Attributes:
i) align: Specifies the alignment of the text in a given row of a table. The values are left /
right/ center.
ii) bgcolor: Specifies the background colour of the blocks of a table corresponding to a given
row.
iii) bordercolor: It sets the border colour for a given row of the table.
iv) valign: Specifies the vertical placement of data in a given row. The values are top /
bottom / middle.
3. <th> …………. </th>
It is specifically used to set the headings of the available columns. <th> tag is followed by
<tr> tag.
Attributes:
i) align: Specifies the alignment of the text given in the header column of a table. The values
are left / right/ center.
ii) bgcolor: Specifies the background colour for the table headers.
iii) bordercolor: It sets the border colour for a given table headers.
iv) valign: Specifies the vertical alignment of data in the table row.
v) width: Sets the width of the table header.
vi) rowspan: Merges two or more rows into a single row.
vii) colspan: Merges two or more columns into a single column.
4. <td> …………. </td>
It inserts data into each block of the table. It supports the attributes of <th> tag.
5. <caption> …………. </caption>
It specifies title to the table. This tag can be placed at bottom or above the table. The
attributes are align / valign respectively.
Program:
<html>
<head>
<title> Table </title>
</head>
<body>
<table border = “3” cellpadding = “2” cellspacing = “2” >
<caption> Course Details </caption>
<tr>
<th> Courses </th>
<th> Duration </th>
<th> Fee </th>
</tr>
<tr>
<td> C & C++ </td>
<td> 45 Days </td>
<td> Rs.1200 </td>
</tr>
<tr>
<td> Java & J2EE </td>
<td> 3 Months </td>
<td> Rs. 8000 </td>
</tr>
<tr>
<td> . Net </td>
<td> 3 Moths </td>
<td> Rs. 8000 </td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------
11. What is a frame? Explain in detail about frames in HTML with examples.
Frame:
HTML frames are used to divide the browser window into multiple sections where each
section can have a separate HTML document. A collection of frames is known as frameset.
<frameset> tag:
The <frameset> tag is used to define the frameset. It contains one or more frames. It is used
to specify the number of rows and columns. Each element can hold a separate document.
Syntax:
<frameset cols or rows = “pixels|%|*”>
Attributes:
Cols: It is used to create vertical frames in a web browser. It is used to define the no. of
columns and their size inside the frameset tag.
Rows: It is used to create horizontal frames in a web browser. It is used to define the no. of
rows and their size inside the frameset tag.
Border: It defines the width of the border of each frame in pixels.
Frameborder: It specifies whether a 3D border should be displayed or not between the
frames. The values are 0 – no border and 1 – border.
Framespacing: It is used to specify the amount of spacing between frames in the frameset.
<frame> tag:
Frames are used to divide the browser window into multiple sections.
Syntax:
<frame name = “text” src = “URL”>
Attributes:
Name: Specifies the name to a frame.
Src: It is used to define the source file to be loaded in to the frame.
Marginwidth: Specifies the width of the spaces between the border and content.
Marginheight: Specifies the height of the spaces between the border and content.
Scrollbar: It is used to control the appearance of the scrollbar in the frame. The values are
yes, no or auto.
Program:
Frame1.html
<html>
<head>
<title> Frame1 </title>
</head>
<body>
<h1> Frame1 </h1>
</body>
</html>
Frame2. Html
<html>
<head>
<title> Frame2 </title>
</head>
<body>
<h1> Frame2 </h1>
</body>
</html>
Frameset.html
<html>
<head>
<title> Frameset </title>
</head>
<frameset cols = “50%, %50”>
<frame src = “Frame1.html”>
<frame src = “Frame2.html”>
</frameset>
</html>

You might also like