Chapter 6 Web Technology I (1) 1

Chapter 6 Web Technology I
Introduction to HTML
HTML stands for Hypertext Markup Language, is the standard markup language for creating web
pages. HTML describes the structure of the web page and consists of series of elements. HTML
element tells the browser how to display the content.
Features of HTML
 It is platform independent.
 It is easy to use and easy to learn.
 It is a markup language.
 Hypertext can be added to text.
 Images, videos and audio can be added to a web page.
 It can display data in a tabular format.
 Create multiple windows in a web page to display information from multiple sources in different
windows.
 Enhance the presentation of the document using HTML elements.
 It can be integrated with other languages like CSS and Javascript.
 It is supported by all browsers.
Types of Tags
HTML is written in the form of tags. A tag is a string in the language enclosed by pair of angular
brackets i.e. <tag_name>. A tag has three sections: name of the tag, attributes of the tag and
attribute value.
Mainly there are two types of tag they are:
Single tag: The types of tag do not have ending tag and it is also known as empty tag. Example: <BR>,
<HR>, <img>, etc have no ending tag.
Pair tag: These tags have both starting and ending tags. An ending tag begins with slash (/). Examples:
<HTML>, <BODY>, <FONT>, <TABLE> etc have both starting and ending tags.
Basic Structure of HTML

Basic structure of HTML consists of head and body. A head consist title general information about the
page and body contains the matter that should be displayed on the web page.
Moreover comment is written anywhere in the html file and the tag  is used for
comments. Comments have no effects in HTML codes.
<! - - Write your comment here - ->

<html>
<head>
<title>First web page</title>
</head>
<body>
…………………………………………….
…………………………………………….
…………………………………………….
</body>
</html>
Attributes of <body>
Attributes Description of the attribute
bgcolor Sets the background color, you can use the color name or color code
background Sets the background picture you can give picture name with extension
alink Color of the hyperlink when it is clicked you can use the color name or color code
link Color of the hyperlink before clicking you can use the color name or color code
text Defines the text color in your web page you can use the color name or color code
topmargin Sets top margin of the page
bottommargin Sets bottom margin of the page
Color code
The format of color code is “#rrggbb” where rr defines the value of red, gg defines the value of green
and bb defines the value or blue. The value for each color ranges from 00 to FF in hexadecimal
number system. Color code 00 has least intensity and ff has highest intensity of color.
Red #ff0000
Green #00ff00
Blue #0000ff
Note: Similarly in this way we can generate more than 16 million different colors.
Background
You can set different format of pictures in html documents but most common formats are: jpg, gif,
bmp, etc.
<body background=”url / image name with extension”>
Meta Tag
The <meta> metadata tag is placed inside head tags. It defines the description of the page, author of
the page, keywords through which search engine can find the page.
<! - - This is an example of meta tag - ->
<html>
<head>
<title>meta tag</title>
<meta name=”author” content=”xyz”>
<meta name=”keywords” content=”html, tag, web, internet, etc”>
</head>
<body>
You can type your text here…..
</body>
</html>
Character Formatting
The text or characters formatting can be performed by using different tags such as general formatting
tags, font, paragraphs, headings, preformatted tags, etc.
General Text Formatting
Tags Examples Description of tags
<b> <b>Bold Text </b> Makes text bold.
<i> <i>Italic Text </i> Makes text italic.
<u> <u>Italic Text </u> Makes text underline.
<s> or <strike> <s>Strike though Text </s> Makes text strike through
<sub> <sub>2</sub> Makes text sub script. H2O
<sup> <sup>2</sup> Makes text super script. Ex: a2
Note: <br> tag is used for line break and it has no ending tag.
Paragraph and Font

The tag <p> defines paragraph and it has one attribute align. The <font> tag is used for applying font
color, font face and font size.
Tags Syntax Attributes of tag
<p> <p align=”left/right/center”> ……. </p> align=”left/right/center”
<font> <font size=”N” color=”color name/code” face=”font Size=1 to 7
name> ………………….. </font> Color=”color name” or ”color
code
Face=”font name”
Headings
There are 6 heading tags in HTML starting from <h1> to <h6>. The size of heading decreases from h1
to h6.
<html>
<head>
<title>headings</title>
</head>
<body>
<p> Examples of Headings. </p>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
</body>
</html>
Horizontal Rule
It produces a line across the page, but it does not have end tag.
Tag Syntax Attributes of tag
<hr> <hr size=”N” width=”N/percentage” Size=N (in pixels)
align=”left/right/center”> Width=N(pixels/percentage)
Align=”left/right/center”
Preformatted Tag
The <pre> formatted tag gives the exact output according to the format that we have given inside the
tags.
<html>
<head>
<title>headings</title>
</head>
<body>
<hr size=”4” width=”80%” align=”center”>
<pre>
To The Principal
Galaxy Secondary School
Dhangadhi 5 Hasanpur
Subject: To whom it may concern
Dear Sir,
……………………………………………………………………………………………..
……………………………………………………………………………………………..
</pre>
</body>
</html>
Marquee
It helps to animate text or picture in different directions with different behaviors.
Tags Syntax Attributes of tag
<marquee> <marquee> Welcome at Galaxy Secondary School direction=left/right/up/down
</marquee> behavior=scroll/slide/alternate
scrollamount=n (in pixels)
width= n (in pixels or percentage)
loop= n times or “infinite”
bgcolor=color or color_code
<html>
<head>
<title>Marquee</title>
</head>
<body>
<marquee direction=”right” behavior=”scroll” scrollamount=”5” loop=”infinite” bgcolor=”yellow”>
<font size=”7” color=”green”>Galaxy Secondary School</font>
</marquee>
</body>
</html>
Create Ordered and Unordered List

Ordered List
An ordered list defines a list of items using number or character. The <ol> tag defines ordered list. The
sub tag <li> is used with <ol> tag to list data items.
Tag Syntax Attribute of the tag
<ol> <ol type=”1/A/a/i”> …… </ol> Type=1/A/a/i
<li> <li> data items </li> Start=N (Number)
<html>
<head>
<title>Order List</title>
</head>
<body>
<h2>Input Devices</h2>
<ol type=1>
<li>Mouse</li>
<li>Keyboard</li>
<li>Trackball</li>
<li>Joystick</li>
</ol>
</body>
</html>
Unordered List
An unordered list makes a bulleted list items. The <ul> tag defines unordered list. The sub tag <li> is
used with <ul> tag to list data items.
Tag Syntax Attribute of the tag
<ul> <ul type=”1/A/a/i”> ….. </ul> Type=disc/square/circle
<li> <li> data items </li>
<html>
<head>
<title>Unorder List</title>
</head>
<body>
<h2>Input Devices</h2>
<ul type=disc>
<li>Mouse</li>
<li>Keyboard</li>
<li>Trackball</li>
<li>Joystick</li>
</ul>
</body>
</html>
Special Characters
The following codes are used to generate the characters given below:
Character Code Description
One space &nbsp One space
& &amp Ampersand
< &lt Less than
> &gt Greater than
© &copy Copyright symbol
® &reg Registered trade mark
µ &micro Greek micro sign
± &plusmn Plus minus symbol
Insert Image
The <img> tag is used to insert image in the web page. It has no ending tag.
The attributes of <img> tag are:
Attributes Description of the attribute
src=”url/picture file name with URL or path of image source file.
path”
height=N Height of image in pixels
width=N Width of image in pixels
border=N Image border in pixels
align=top/bottom/middle/left/right Image alignment
Title Comments on the picture area while mouse over
Alt Display alternate text while error in path of the picture file.
<html>
<head>
<title>Insert Image</title>
</head>
<body>
<img src=”image1.jpg” height=”200” width=”300” border=”10” alt=”Image of flower” title=”Beautiful
flower”>
</body>
</html>
Insert video and audio

HTML <video> Element
The HTML <video> element is used to show video on web page.
Tags Syntax Attributes of the tag
<video> <video height=”Number” width=”Number” Height=N
controls> ………….. </video> Width=N
Controls adds video controls like
play, pause, etc.
<source> <source src=”url of video” type=”video formats”> src=”url”
type=”video formats”
The text between the <video> and </video> tags will only be displayed in browser that do not
support the <video> element.
<html>
<head>
<title>add video on web page</title>
</head>
<body>
<video width=”320” height=”240” controls>
<source src=”movie.mp4” type=”video/mp4”>
Browser does not support the video tag.
</video>
</body>
</html>
HTML <audio> Element

The HTML <video> element is used to show video on web page.
<audio> <audio controls> ………….. </audio> Controls adds video controls like
play, pause, etc.
<source> <source src=”url of audio” type=”audio formats”> src=”url”
type=”audio formats”
The text between the <audio> and </audio> tags will only be displayed in browser that do not
support the <audio> element.
<html>
<head>
<title>add audio on web page</title>
</head>
<body>
<audio controls>
<source src=”music.mp3” type=”audio/mpeg”>
Browser does not support the audio tag.
</audio>
</body>
</html>
Create hyperlink
A hyperlink is a link between two pages. User can navigate different pages through these hyperlinks.
The anchor tab <a> defines the hyperlink. The attribute href (hyperlink reference) takes file name
with path or URL of web page. Mainly, two types of hyperlinks are used in HTML: Internal hyperlink
that helps to create link within a page and the External hyperlink that helps to create link from one
page to another page.

<a> <a href=”filename”>Text or Picture</a> href=file name or URL
<a href=”mailto:xyz@gmail.com”>email to xyz</a>
<a href=”http://www.google.com”>Google</a>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h2>Galaxy Secondary School</h2>
<a href=”index.html”>About Us</a>
<p> For more information please go www.google.com </p>
<a href=”http://www.google.com”>Click for google</a>
<p> For more information please visit our site</p>
<a href=”www.galaxydhangadhi.edu.np”>Visit Our Site</a>
<p> Contact Us</p>
<a href=”xyz@gmail.com”>Email to xyz</a>
<p> Photo Gallery</p>
<a href=”gallery.html”><img src=”image1.jpg” height=”100” width=”100”></a>
</body>
</html>
Create Table
The table is very useful tools to arrange information in a web page. The <table> tag is used for
defining a table. A table has main three sub tags: table row <tr>, table header <th> and table data
<td>.
<caption> tag can be used for providing header for table.
Attribute Description of the attribute
border=N (in pixels) Size of table border
bordercolor=”colorcode/colorname” Border color of table
cellspacing= N Defines distance between cell’s borders in a table
cellpadding= N Distance between cells content and cell border
width= N Defines table width and row width in pixels or N%
height= N Defines height of table or row height in pixels
colspan= N Number of cells to be merged column wise in a row
rowspan= N Number of cells to be merged row wise in a column
bgcolor=”colorcode/colorname” Table or row background color
align=”left/right/center” Defines alignment in a table or row
Example 1
<html>
<head>
<title> Table </title>
</head>
<body>
<table border="2" width="500" height="250">
<caption><h2><u><font color="Purple">Curriculum for +2</font></u></h2></caption>
<tr>
<th colspan="4" bgcolor="grey"><h2>Galaxy Secondary School</h2></th>
</tr>
<tr>
<th colspan="4" bgcolor="blue">Faculty</th>
</tr>
<tr bgcolor="red">
<th colspan="2" >Science</th>
<th colspan="2">Management</th>
</tr>
<tr bgcolor="green">
<th>Class XI</th>
<th>Class XII</th>
<th>Class XI</th>
<th>Class XII</th>
</tr>
<tr bgcolor="yellow">
<td>English</td> Output of example 1
<td>English</td>
<td>English</td>
<td>English</td>
</tr>
<td>Physics</td>
<td>Nepali</td>
<td>Nepali</td>
<td>Accountancy</td>
</tr>
<td>Chemistry</td>
<td>Physics</td>
<td>Economics</td>
</tr>
<td>Maths</td>
<td>Chemistry</td>
<td>Economics</td>
<td>Finance</td>
</tr>
<td>Bio/Comp</td>
<td>Maths/Bio</td>
<td>Finance</td>
<td>B.Maths</td>
</tr>
</table>
</body>
</html>
Example 2 table using CSS:

<html>
<head>
<title> Table </title>
<style>
table, tr,th,td {
border: 2px solid black;
border-collapse:collapse;
}
td{
background-color:yellow;
}
</style>
</head>
<body>
<table width="500" height="250">
<caption><h2><u><font color="Purple">Curriculum for +2</font></u></h2></caption>
<tr>
<th colspan="4" bgcolor="grey"><h2>Galaxy Secondary School</h2></th>
</tr>
<tr>
<th colspan="4" bgcolor="blue">Faculty</th>
</tr>
<tr bgcolor="red">
<th colspan="2" >Science</th>
<th colspan="2">Management</th>
</tr>
<tr bgcolor="green">
<th>Class XI</th>
<th>Class XII</th>
<th>Class XI</th>
<th>Class XII</th>
</tr>
Output of example 2
<tr>
<td>English</td>
<td>English</td>
<td>English</td>
<td>English</td>
</tr>
<tr>
<td>Physics</td>
<td>Nepali</td>
<td>Nepali</td>
</tr>
<tr>
<td>Chemistry</td>
<td>Physics</td>
<td>Economics</td>
</tr>
<tr>
<td>Maths</td>
<td>Chemistry</td>
<td>Economics</td>
<td>Finance</td>
</tr>
<tr>
<td>Bio/Comp</td>
<td>Maths/Bio</td>
<td>Finance</td>
<td>B.Maths</td>
</tr>
</table>
</body>
</html>
Design Form
A form is interface in web page for entering data. A form has many elements depends on input data
types. These elements have different attributes. The <form> tag defines the form option. The <input>
tag defines the input form field.
Attribute Descriptions of the attribute
Action Takes URL that defines where to send the form data
when the submit button is clicked
Method Defines the HTTP method: get or post
Type Type of form element or form field
name Unique name for the field value
value Default value of the field
checked Defines Boolean values: true/false
size=N Size of a form field in terms of number of characters
maxlength=N Maximum length of characters in a field
readonly Defines Boolean values
rows=N Number of characters in row for text area field
cols=N Number of characters in column for text area field
Text Box
You can enter text or number in a text box. The <INPUT type=”text”> tag is placed inside <FORM> tag
to create a text box. The <FORM> tag is used inside <BODY> tag.
<html>
<head>
<title> Text Box </title>
</head>
<body>
<form action=”test.html” method=”post”>
Name: <input type=”text” name=”name”> <br>
Address: <input type=”text” name=”add” size=20 maxlength=30> <br>
Country: <input type=”text” name=”country”> <br>
E-mail: <input type=”text” name=”email”> <br>
</form>
</body>
</html>
Radio Button
Radio button is used for selecting a single option from multiple choices. The <INPUT type=”radio”> tag
is used for creating a radio button.
<html>
<head>
<title> Radio buttons </title>
</head>
<body>
<form>
Marital Status: <input type="radio" name="r1" checked=true >Married
<input type="radio" name="r1">Unmarried <br>
Gender: <input type="radio" name="r2" value="male" checked=true>Male
<input type="radio" name="r2" value="female">Female
</form>
</body>
</html>
Check Box
Check box allows users to select multiple choice options. The <input type=”checkbox”> tag is used for
creating a check box.
<html>
<head>
<title> Check Box </title>
</head>
<body>
<form >
Hobbies: <br> <input type="checkbox" name="c1" checked=true >Study <br>
<input type="checkbox" name="c2" checked= true>Movies <br>
<input type="checkbox" name="c3" checked= true>Music <br>
<input type="checkbox" name="c4" checked= true>Travels
</form>
</body>
</html>
Select List
Select list provides user to select option from the given list of items. The <SELECT size=1> tag is used
to create list box, where size defines the number of items visible at a time. The sub tag <OPTION>
defines the value items of the list.
<html>
<head>
<title> Text Box </title>
</head>
<body>
<form>
Country: <select size="1">
<option> Nepal</option>
<option> India</option>
<option> China</option>
<option> Japan</option>
</select>
</form>
</body>
</html>
Text Area
Text area allows user to type multiple lines of text in a form. The <TEXTAREA> tag is used to define
text area. It has two attributes. Rows define number of characters in row and cols define the number
of characters in columns.
<html>
<head>
<title> Text Area </title>
</head>
<body>
<form>
Remarks: <br> <textarea rows=5 cols=20></textarea>
</form>
</body>
</html>
Password Box
Password box allows user to enter password. It displays asterisks (*) while typing. The <INPUT
type=”password”> tag is used for creating a password box.
<html>
<head>
<title> Password Box </title>
</head>
<body>
<form action=”test.html” method=”post”>
Password: <input type=”password” size=10 maxlength=8>
</form>
</body>
</html>
File Browser
File browser helps to browse a file from the computer and attach the file to the form. The <INPUT
type=”file”> tag is used for creating a file browser box.
<html>
<head>
<title> File Browser </title>
</head>
<body>
<form>
Select File: <input type=”file” size=20 maxlength=40>
</form>
</body>
</html>
Command Button
Command button helps to perform any action inside form. The <INPUT type=”button”> tag is used to
create button.
<html>
<head>
<title> Command Button </title>
</head>
<body>
<form action="test.html" method="post">
Click OK: <input type="button" value="OK">
</form>
</body>
</html>
Submit and Reset Buttons

Submit button provides user to submit the entire form contents. The <INPUT type=”submit”> tag is
used to create submit button.
<html>
<head>
<title> Create submit and reset button </title>
</head>
<body>
<form action="test.html" method="post">
Send Form: <input type="submit" value="send"> <br>
For Clear Form: <input type="reset" value="Clear">
</form>
</body>
</html>
Frame
Frame provides the facilities to divide a window into many sections. In each section you can add html
page, hence multiple pages can be displayed in one window. The <FRAMESET> tag defines frames
with attributes cols and rows. The cols defines the column of a frame in percentage with respect to
the window. The rows defines the row of a frame in percentage with respect to the window.
The <FRAME> tag helps to insert the html file with the help of src attribute. The src attribute takes a
html file with extension. The <FRAMESET> should not contain <BODY>. Body contains only one page
but frame contains multiple pages, which divides screen into many parts.
Example 1: Divides a window vertically (column wise) into two sections.
<html>
<head>
<title>FRAME</title>
</head>
<frameset cols=”50%, 50%”>
<frame src=”demo1.html”>
</frameset>
</html>
Example 2: Divides a window horizontally (row wise) into two sections.

<html>
<head>
<title>FRAME</title>
</head>
<frameset rows=”70%, 30%”>
</frameset>
</html>
Example 3: Divides a window horizontally (row wise) as well as vertically (column wise) into multiple
sections.
<html>
<head>
<title>Nested FRAMESET</title>
</head>
<frameset rows=”20%, *”>
<frameset cols=”50%, *”>
</frameset>
</frameset>
</html>
Concept of CSS and Script

You can embed different effects in web page file. These effects include paragraph, font, heading,
background, table and other different interactive effects. Such effects are called dynamic effects.
There are two methods for embedding such effects. First method is using CSS and the second method
is using scripts.
Cascading Style Sheet (CSS)

Cascading style sheet is a text file which contains set of rules for determining how information in a
web page should be displayed. In another words, it is an effect which can be embedded inside HTML
file to make easy and standard formatting and styles of a web page. Mostly such effects are
embedded into <HEAD> tags. CSS is case sensitive. The general syntax for CSS is as follows:
Element [property1:value1; property2:value2; property3:value3; ……..]
Where Element is a tag of HTML, properties are the attributes for the tag.
Some common styles and their properties are as follows:

Font Style: For changing font attributes
Attributes Description of the attributes
font-size:N points Changing size of the font in points
font-style:normal/italic Changing the font as italic or normal
font-family:arial Changing the font name like arial, times new roman, Calibri, algerian
Color:color/code Changing the font color
Paragraph Style: For Changing paragraph attributes
Attributes Descriptions of the attributes
background-color:color name/color code Defines paragraph background color
background-image: URL for image file Defines paragraph background image
border-style: none/solid/double/dotted/dashed Defines paragraph border
border-color: color name/color code Defines Paragraph border color
border-width: N (Pixel) Defines paragraph border width in pixel
Text Style: For changing text attributes

Attributes Descriptions of the attribute
text-decoration:underline/overline/linethrough Change the text decorations
line-height: N points Defines the height of lines as like line spacing
text-transform:uppercase/lowercase Defines uppercase, lowercase
text-align:left/right/center/justify Defines left, right, center, justify alignment
There are four ways to embed CSS in HTML document:

Inline Style
Inline style is very simple method of style web page. In this method style for HTML elements is
specified using its style attribute.
<html>
<head>
<title> Inline Style </title>
</head>
<body>
<h1 style=”font-size:100pt; color:green; text-decoration:underline; font-family:arial”>Galaxy
Secondary School</h1>
</body>
</html>
Embedded Style
Embedded style sheet is created by using tag <style> inside <head> element of HTML document.
<html>
<head>
<title> Embedded Style Sheet </title>
<style>
p{
font-size: 20 pt;
color:purple;
background-color:red;
border-style:solid;
border-color:yellow;
}
</style>
</head>
<body>
<p>Galaxy Secondary School</p>
</body>
</html>
Class Style
Class style is more flexible method of defining style sheet. A dot (.) operator is used to define a class.
Its attributes are defined within curly braces. You can use this class style as an external style sheet or
as an embedded style sheet. It is accessible inside class using the following syntax:
<tag class=”class_name”> ……………. </tag>
<html>
<head>
<title> Class Style </title>
<style>
.x1{font-size:50pt; color:green; font-family:arial;}
.x2{font-size:100pt; color:red; text-transform:uppercase;}
</style>
</head>
<body>
<p class=”x1”>Galaxy Secondary School</p>
<h1 class=”x2”>Dhangadhi 5 Hasanpur</h1>
</body>
</html>
External Style
An external style sheet is a separate HTML document file with extension .css, the css file contains css
rules which are linked to the HTML file by using the following code in <head> section.
<link rel=”stylesheet” href=”file_name.css”>
Eample:
Here we have to create two separate file one for css with extension .css and another HTML file with
extension .html. In this example we store both files in same folder.
demo.css (CSS file)
.c1{font-size:100; color: red; font-family:arial;}
.c2{font-size:70; color: green; font-family:calibri;}
.c3{font-size:50; color: yellow; font-family:algerian;}
Index.html (HTML file)

<html>
<head>
<title> External Style Sheet</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p class="c1">Galaxy Secondary School</p>
<h1 class="c2"> Galaxy Secondary School </h1>
<div class="c3">Galaxy Secondary School</div>
</body>
</html>
Scripting Concept
As HTML is simple markup language for developing web documents. Such web document contents
static in nature they do not respond to the user. In order to solve dynamic nature of problems,
scientist developed scripting language. A scripting language is a kind of web based programming
language for solving web related problems. Scripting language cannot independently execute and it is
embedded inside HTML tags.
Mainly there are two types of scripting languages: Client site scripting languages and Server site
scripting languages. Client site scripting languages execute in client site browser as per the user’s
respond. Examples: JavaScript, VB script etc. the server site scripting languages execute in web server
and they allow HTML document to link to the servers. Examples: ASP, PHP, JSP, etc.

Chapter 6 Web Technology I (1) 1

Uploaded by

Document Information

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

Chapter 6 Web Technology I (1) 1

Uploaded by

Copyright:

Available Formats

Chapter 6 Web Technology I

Basic Structure of HTML

<! - - Write your comment here - ->

Paragraph and Font

Create Ordered and Unordered List

Insert video and audio

HTML <audio> Element

Tags Syntax Attributes of the tag

Example 2 table using CSS:

Submit and Reset Buttons

Example 2: Divides a window horizontally (row wise) into two sections.

Concept of CSS and Script

Cascading Style Sheet (CSS)

Some common styles and their properties are as follows:

Text Style: For changing text attributes

There are four ways to embed CSS in HTML document:

Index.html (HTML file)

You might also like