Notes of Web Technology
Notes of Web Technology
The WWW are abbreviation of World Wide Web also called W3 and commonly
called Web. WWW is a way of accessing the hyperlink document through internet.
What is HTML?
HTML is a markup language for creating web pages. HTML is abbreviated from
Hyper Text Markup Language, where markup language is a set of markup tags.
What is DHTML?
In DHTML, D is abbreviated from Dynamic and HTML means Hyper Text Markup
Scripts
XHTML
DHTML. Every part of a Web page is specified by the DOM and using its consistent
naming conventions you can access them and change their properties.
Scripts: -
Scripts written in either JavaScript or ActiveX are the two most common scripting
languages used to activate DHTML. You use a scripting language to control the
CSS is used in DHTML to control the look and feel of the Web page. Style sheets
define the colors and fonts of text, the background colors and images, and the
placement of objects on the page. Using scripting and the DOM, you can change the
XHTML: -
XHTML or HTML 4.x is used to create the page itself and build the elements for the
CSS and the DOM to work on. There is nothing special about XHTML for DHTML -
but having valid XHTML is even more important, as there are more things working
Features of DHTML
This is one of the most common uses of DHTML. It allows you to change the
mouse click, time, or date, and so on). You can use this to preload information onto a
page, and not display it unless the reader clicks on a specific link.
Real-time positioning
When most people think of DHTML this is what they expect. Objects, images, and
text moving around the Web page. This can allow you to play interactive games with
Dynamic Fonts
This is a Netscape only feature. Netscape developed this to get around the problem
designers had with not knowing what fonts would be on a reader's system. With
dynamic fonts, the fonts are encoded and downloaded with the page, so that the
Data binding
databases from Web sites. It is very similar to using a CGI to access a database, but
uses an ActiveX control to function. This feature is very advanced and difficult to use
You can write an edit HTML file in any simple text editor such as Note Pad in
windows etc .So open your text editor and start writing HTML code.
<HTML>
<HTML> is the very opening for any HTML Web Page. All the other element are
written between <HTML> and </HTML> tag. </HTML> tag is placed in the end.
<HTML>
</HTML>
After opening your document with <HTML> you will start a new line and code
The <head> tag is basically container tag which contain some informational tag for
browser and Search engine. For example <Title> tag which is not only display on the
title bar as title of page also tell to search engine that what is in this page. Head tag
also contain some more information about the author, copyright, keywords etc.
In this simple page we Placed only Title Tag between Head Tag .Title tag defines the
title of the document and also Title tags tell search engines what your page is about.
<html>
<head>
</head>
After Head tag we place another tag which is body tag. This tag contain actual
contents which will be viewed on your Web page. After typing all contents write tag .
So far your total coding in the text editor looks like this:
<html>
<head>
</head>
<body>
</body>
</html>
Now Write some thing in between <BODY> and </BODY> Tag this mater is display
For Example:
<html>
<head>
</head>
<body>
Hello HTML , This is My First page and contain HTML , HEAD , TITLE and BODY
Tag.
</body>
</html>
Now Save this File and give a name. Normally your text editor save the file as text
file with txt extension so when you are going to save this file first select All file in
Save as Type. and then give the file name with extension. for example learning.html
HTML is a markup language, these markup are called tags which tell to the browser
how to display the text on user screen. In HTML Document tags element make the
structure of Webpage and when user open this code in its browser then these
element tells the browser how your website display. All the tags in HTML consists on
a start tag and end tag but some element may be have only start tag. These element
are called Void element. for example <BR> which is used to break the line.
An HTML element starts with a start tag is also called opening tag and ends with an
end tag is called closing tag . Some HTML elements have empty content Empty
elements are closed in the start tag. Most of HTML elements may have some
attributes.
as
Attribute are the Additional information about that tag which define the characteristics
of an element for example Height, Reference, Color etc. The Attribute have two part
one is attribute name and other is its value. Below we briefly discuses the different
For example :
<body bgcolor="#E6E6FA">
The Doctype
In HTML you must declare the document type at very first line before the <HTML>
tag . The <!DOCTYPE> declaration tell to the web browser about the version of
<
<!DOCTYPE html>
in HTML 4.01 Strict we can use all HTML elements and attributes. One
restriction is that we can not include any presentational elements. In this
version Framesets are not allowed. The document type declaration for HTML
4.01 Strict is as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In This version we can use all HTML elements and attributes, INCLUDING
presentational and deprecated elements (like font). Framesets are not
allowed. The document type declaration for HTML 4.01 Transitional is as
follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
In This version we can use all HTML elements and attributes, INCLUDING
presentational and deprecated elements (like font). In this version we cal
also use The Framesets. The document type declaration for HTML 4.01
Frameset is as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Main Page</title>
</head>
<body>
</body>
</html>
The <HTML> tag is very starting element of the HTML page which is indicate that
every thing in between <HTML> and </HTML> are HTML code and also indicate the
The <head> tag is basically container tag which contain some informational tag for
browser and Search engine. For example <Title> tag which is not only display on the
title bar as title of page also tell to search engine that what is in this page. Head tag
also contain some more information about the author, copyright, keywords etc.
<Title> is part of the Head tag . This is written between <Head> and </Head> tag.
Title tag is a descriptive tag, it defines the title of the document and also Title tags tell
search engines what your page is about. Every thing in title tag is appear on the title
bar. The maximum length of your title must between 20 words. The title appears at
<META> Tag
The meta tags are used to describes the information about the HTML page.
The�meta Tags are very help full for the search engines to understand and
categorize your web pages. when people search then your meta tags provide the
complete information about the contents of your page. There are many different
types of meta tags that can be used for many different purposes.
Meta Descriptions
for Example
IT Subject">
if you not specify the meta description then search engines will generate a
Meta Charset
The charset meta tag tell to web browser about the character encoding of your
content. An HTML page can have only a single charset. For most web pages, you
Meta Copyrights
Meta Copyrights
Meta copyrights tag protect your photos and the text on your website.
Meta Keywords
Keyword meta tag is very help full for search engine. Search engine put your provide
papers">
Meta language
This meta attribute define the language of the webpage.
The <big> element increases the font size by one size increment on the text which is
<p> This is simple Text but <big> Now This is Some Bigger Text in size </big> This
Element In HTML
When a text appear and the disappear alternately the this process is called blinking
of text. The text between <blink> and </blink> will be blink when its open in browser.
For example:
<p>
</p>
<center> tag aligned the text center of the page or center of the cell of table.
For Example:
<center>This is centered</center>
<center>So is this</center>
<center>And this is centered too</center>
This is centered
So is this
HTML Comments
Comments are used for further description (notes) of HTML code or if you want to
make some code ignorable by browser temporarily rather than removing them.
These notes will not display in browser window. Comments are also have opening
For example:
This is batter that instead of <comments> we use the standard HTML comment
syntax of <!-- comment here -->. Where <!-- is starting tag and --> is closing tag.
For example
The i short from italic. its make the text italic. The text between <i> and </i> will
<p>
This is simple text<br/>
</p>
Font is very important element of HTML. With font tag you can increase the font size
which make the contents more readable. You can apply different font on your
heading and give different color. You can also use a <basefont> tag to set the over
all of your text to the same size, face, and color. The font tag are used with three
attributes which are size, color, and face to customize your fonts.
You can set content font size using size attribute. The size attribute value can be
absolute or relative.
Absolute font size always fixed and remain the same in all browser and user can not
change. When you know about the physical size of the output for example screen
when you do not specify a font size then default font size of normal paragraphs is
There are different number from 1 ( which is smallest value of font size ) to 7 (which
is largest value of font size) are used to define the size of text in your webpage.
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"
You can also define the font size in pixel and em and point. for example
The <A> tag defines an link to another document, by using the href attribute or to
define a bookmark inside a document, by using the name attribute. The most
important attribute of the anchor tag is the href attribute, which describe the
destination page.
Href : -
href Specifies the destination of a link. The link can be to another page, a part of a
Name: -
Target: -
List In HTML
In html we display the information in shape of list for example if we want to display
1 Math
2 Computer
3 English
HTML offers several mechanisms for specifying lists of information. All lists must
contain one or more list elements. Lists may contain: 1- Unordered List.
2- Ordered List.
3- Definitions List.
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. An
unordered list typically created with bulleted. You can also customize the bullets and
The opening list tag must be <UL>. It is followed by an optional list header
(<LH>caption</LH>) and then by the first list item (<LI>). For example:
<ul>
<lh>Subject Name</lh>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ul>
Subject Name
Math
Computer
English
<lh>Subject Name</lh>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ul>
Subject Name
Math
Computer
English
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ol>
1. Math
2. Computer
3. English
For Example
<ol type="A">
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ol>
A. Math
B. Computer
C. English
HTML definition lists display the terms and there definition. The definition list created
<dl>
<dt><b>CPU</b></dt>
<dt><b>IT</b></dt>
<dd>Information Technology.</dd>
</dt>
</dl>
CPU
Centeral Processing Unit.
IT
Information Technology.
Image tag is used for inserting the image in your webpage. The image is a separate
file and we make this file as part of our webpage so user can view this image in web
browser.
Syntax:
<img src="image1.jpg">
Source Attribute
The Source attribute " src " is major attribute of image element which tell the browser
will display the image which is store in images folder of root directory.
Size Attribute
The size attributes control the the width and height of the image.
For example :
if you add an image but when user open your webpage and the image source is not
found then a blank space display instead of image. So we specify the alternative text
which appear in case of image source is not found. This is Alternative text which is
on the other hand Title attribute specify the tool-tip text. When user move mouse
For example:
The border attribute set the border border size around your image. In the following
Note : - The alt attribute is also an attribute which provide the image title to search
Align attribute is used for horizontally alignment of the image. Image elements are
For example :
<Marquee> Tag
The HTML <Marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings. <Marquee>
This is basic example of marquee</Marquee> Attribute
behavior:
Defines the type of scrolling.
<marquee behavior="Scroll/Slid/Alternate" >
bgcolor:
Specifies the background color.
<marquee bgcolor="rgb(x,x,x) or #colorHEX Code or Color name" >
Direction
Defines the direction of scrolling the content.
<marquee Direction="up or down or left or right" >
height:
Defines the height of marquee.
<marquee Direction="size in pix or in %age" > loop :
Specifies how many times to loop. The default value is INFINITE, which means that the marquee
loops endlessly.
<Frameset> Tag
The frameset element holds two or more frame elements. Each frame element holds
a separate document. The frameset element states only how many columns or rows
Rows and columns are described by a list of widths or heights. For example
COLS="25%, *, 40%" says that there will be three columns. The first column takes
up 25% of the width of the page, the third column takes up 40% of the width of the
<Frame> tag
Frames tag allow you to divide the page into several rectangular box and you can display a
separate document in each box. These rectangles box are called a "frame". Frames are one of
the most controversial uses of HTML, because of the way the frames concept was designed, and
because many web framed web sites are poorly implemented. Each frame in a frameset have
different attributes fro example border, scrolling, the ability to resize, etc. Attribute of Frame:
Frame Border:
The frameborder attribute specifies whether or not to display a border around a frame.
Marginheight: -
Specifies the top and bottom margins of a frame.
Marginwidth: -
Specifies the left and right margins of a frame.
Name: -
Specifies the name of a frame.
Noresize: -
Specifies that a frame cannot be resized.
Scrolling: -
Specifies whether or not to display scrollbars in a frame.
Src: -
Specifies the URL of the document to show in a frame.
Forms in HTML
Forms is an input tools in HTML. Like form on paper , HTML form also allows the
user to enter requested information on line and submit. For this purpose in HTML
you can use <Form> and </Form> Tag. A HTML form contain input elements like
Form attributes
Action: - This attribute specifies the target file where to send the form-data when a
form is submitted.
Method: - Method determine the way of sending the data to destination file. There
are two method send the data through a URL variable with GET Method and post
Name: -
Element of Form
Element
Input elements are used to create data entry field. The following attribute are used
TYPE: The name of input type. for example Text , option button etc.
NAME:
CHECKED: This is used for checkbox or radio button input filed, are check box or
DISABLED: Field is disabled and any user nothing to do anything with this field
Input Type Text Box This will be create a text box for and user can type the
For example:
<form>
</form>
Out Put is :
Name of Student:
Address:
This will be create a text box for password. when anyone enter the pass word in this
For example :
<form>
</form>
Checkbox are also input type which will provide many predefine option and user can
</form>
Option button also predefine input way but user can select one at a time from the
For example:
<form>
<br>
Out Put is :
Male
Female
Select Element
The <select> element in HTML form create a drop-down list and user can select any
FILE Element
File element display the brows button to select any file for upload from user system.
For Example:
<form >
</form>
The <textarea> element is an input control which is used for multi-line text.
For example:
<textarea rows="6" cols="50">
</textarea>
For Example :
Labels Element
The <label> element define the title (Label) for any input element.
For Example: -
<form>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="gender" id="female" />
</form>
Out Put is:
Male
Female
The <style> tag is used to define style information for an HTML document.
In Inline style you have to define the style each time when you use a element. Its
means that instead of defining the style once in whole document you define the style
of each element again and again when you use an element. For example if you
define the style one time for paragraph element then its apply on all the paragraph
which you use in you document in the same way. But in Inline style you must define
the style of every and each Paragraph tag. The main reason of inline style is that you
can apply the different formation option with different way on each element. For
example on one paragraph tag font size is 16px and on other paragraph tag 20px.
The example below shows how to change the background color of a paragraph with
inline style (you can use all the property of CSS in style element as attribute).
<html>
<body>
<p> This is simple paragraph </p>
<p style="background-color : yellow ;"> This paragraph contain yellow back
ground color </p>
</body>
</html>
If you want to define a style for all the same type of element. for example for H1
heading element, font color is Red then you can define Internal or In-page style. In
this type you can define style once and it apply on the whole page. Internal styles are
in previous example you noticed that we have tow paragraph but only the color of
one paragraph is changed in which we use style attribute. and other remain simple
this is inline style. Now we declare the in-Page style for example:
<html>
<head>
<head>
<style>
p
{
background-color : yellow ;
}
</style>
</head>
<body>
<p> This is first paragraph</p>
<p> This is second paragraph</p>
</body>
</html>
In this example you specify style once in the head section and then it will be apply
Type:This attribute defines the styling language. The language 'text/css' is assumed
Media: Select the media on which this style is applied. For example for graphical
Scoped:If we used scoped attribute then the style applies only to its parent element.
When you want to apply a style on many pages in your website then you create an
external style sheet. With the help of external style sheet you can change the look of
entire website by changing in a single file which is called external Style Sheet. The
external style sheet separately save with CSS extension. Each page of your website
linked to the style sheet using the <link> tag. The <link> must be written in Head
<head>
<link rel="stylesheet" type="text/css" href="pagestyle.css">
</head>
Open any text editor for example Notepad in windows and write the following code
body
{
background-color: gray;
}
p
{
color: blue;
font-size=18px;
}
h1
{
color: white;
}
Now link this file in your HTML file in the head section.
<HTML>
<head>
<Title> Learning hints </Title>