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:
1. 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.
2. 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
name> ………………….. </font> |
Size=1 to 7 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”
align=”left/right/center”> |
Size=N (in pixels) 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 </marquee> |
direction=left/right/up/down 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> <li> |
<ol
type=”1/A/a/i”> …… </ol> <li>
data items </li> |
Type=1/A/a/i
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 item. The tag defines unordered list. The sub tag is
used with tag to list data items.
|
Tag |
Syntax |
Attribute of the tag |
|
<ul> <li> |
<ul
type=”1/A/a/i”> ….. </ul> <li>
data items </li> |
Type=disc/square/circle |
<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 |
  |
One space |
|
& |
& |
Ampersand |
|
< |
< |
Less than |
|
> |
> |
Greater
than |
|
© |
© |
Copyright
symbol |
|
® |
® |
Registered
trade mark |
|
µ |
µ
|
Greek
micro sign |
|
± |
±
|
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 path” |
URL or
path of image source file. |
|
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” controls> ………….. </video> |
Height=N 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.
|
Tags |
Syntax |
Attributes of the tag |
|
<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.
|
Tags |
Syntax |
Attributes of the tag |
|
<a> |
<a
href=”filename”>Text or Picture</a> <a
href=”mailto:xyz@gmail.com”>email to xyz</a> <a
href=”http://www.google.com”>Google</a> |
href=file name or URL |
<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>
<td>English</td>
<td>English</td>
<td>English</td>
</tr>
<tr
bgcolor="yellow">
<td>Physics</td>
<td>Nepali</td>
<td>Nepali</td>
<td>Accountancy</td>
</tr>
<tr
bgcolor="yellow">
<td>Chemistry</td>
<td>Physics</td>
<td>Accountancy</td>
<td>Economics</td>
</tr>
<tr
bgcolor="yellow">
<td>Maths</td>
<td>Chemistry</td>
<td>Economics</td>
<td>Finance</td>
</tr>
<tr
bgcolor="yellow">
<td>Bio/Comp</td>
<td>Maths/Bio</td>
<td>Finance</td>
<td>B.Maths</td>
</tr>
</table>
</body>
</html>
Output
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>
<tr>
<td>English</td>
<td>English</td>
<td>English</td>
<td>English</td>
</tr>
<tr>
<td>Physics</td>
<td>Nepali</td>
<td>Nepali</td>
<td>Accountancy</td>
</tr>
<tr>
<td>Chemistry</td>
<td>Physics</td>
<td>Accountancy</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>
Output:
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”>
<frame
src=”demo2.html”>
</frameset>
</html>
Example 2:
Divides a window horizontally (row wise) into two sections. <html>
<head>
<title>FRAME</title>
</head>
<frameset
rows=”70%, 30%”>
<frame
src=”demo1.html”>
<frame
src=”demo2.html”>
</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%, *”>
<frame
src=”demo1.html”>
<frameset
cols=”50%, *”>
<frame
src=”demo2.html”>
<frame
src=”demo3.html”>
</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 |
There
are four ways to embed CSS in HTML document: (IMP)
1. 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>
2. 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>
3. 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>
4. 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.