Subject: Multimedia and Web Technology || Topic: HTML

noiseboliviaΑσφάλεια

5 Νοε 2013 (πριν από 3 χρόνια και 10 μήνες)

76 εμφανίσεις


Subject :
FIT

|| Page
1

of
12

|| Session: 201
3
-
1
4



1


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT








HTML

(Hypertext Markup Language)

Subject :
FIT

|| Page
2

of
12

|| Session: 201
3
-
1
4



2


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

HTML



HTML stands for
H
yper
T
ext
M
arkup
L
anguage and it is a
markup language

used to create Web
Pages.



HTML

5
-

The Newest
Version

of
HTML


Wo
rds to Know

Tag

-

Used to specify ("mark
-
up") regions of HTML documents for the web browser to interpret.
Tags look like this: <tag>

Element

-

A complete tag, having an opening <tag> and a closing </tag>.

Attribute

-

Used to modify the value of the HTML element. Elements will often have multiple
attributes.


Structure of an HTML document:

All HTML documents are enclosed within the
<Html>

and
</Html>

tags and contains two
distinct parts:



The
Head section
that contai
ns information about the document that is not displayed
on the screen. This section is marked using the <Head> and </Head> tags.



The
Body section

that contains everything else that is displayed as part of the web
page. This section is enclosed within the <
Body> and </Body> tags.


Basic Format of HTML document:

<Html>

<Head>

<Title>
Subodh

Public School</Title>

</Head>

<Body>

Hello World! It’s a basic format to write html code!

</Body>

</Html>


---

> Save the file and open it in your browser.(Hint : save


“mypage.html” and open it in any
browser like internet explorer)


The <Html> Element

<Html> begins and ends each and every web page. Remember to
close your HTML documents with the corresponding </Html> tag
at the bottom of the document.

The <Head>
Element

Tags placed within the
head

element are not directly displayed by
web browsers. We will be placing the <Title> element here.

The <Title> Element

Place the <Title> tag within the <Head> element to title your
page. The words you write between the op
ening and closing
<Title></Title> tags will be displayed at the top of a viewer's
browser.

The <Body> Element

The <Body> element is where
all

content is placed. (Paragraphs,
pictures, tables, etc.).


HTM or HTML Extension?

When you save an HTML file, you

can use either the .htm or the .html extension. We use .htm in our
examples. It is a habit from the past, when the software only allowed three letters in file extensions.

With new software it is perfectly safe to use
.html
.


Subject :
FIT

|| Page
3

of
12

|| Session: 201
3
-
1
4



3


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT


World Wide Web Consortium

The World Wide Web Consortium (W3C) is an international community where
Member
organizations
, a full
-
time
staff
, and the public work together to develop
Web standards
.


Beginning HTML Tags!

A web browser reads an HTML document top to bottom, left to right. Each time the browser finds a
tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables, etc.). Tags
have 3 major parts: opening tag(s), content(s), and clo
sing tag(s).


Tips:
-



A tag consists of an opening tag and a closing
tag.



Few HTML tags do not require a closing tag.



Modify tags with attributes to customize your
WebPages
!


Types of tag:
-

1.

Container tag

2.

Empty tag


Q. Differentiate between container
tags and empty tags.

Ans.



The container tag are pair tags i.e., they require a starting tag as well as ending tag. They
affect the text appearing between their starting and ending tag. For Example. : <Html>,
<Body>, <Font> etc.



The empty tags just require

a starting tag and no ending tag. They just carry out the job
assigned to them. For Example. : <hr>, <img>, <br>
, <input>, <frame>

etc.


<Body> Tag

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>


attributes

background

-

Specifies a background image for a document

<body background=”sps.jpg”>


bgcolor

-

Specifies the background color of a document

<body bgcolor=”red”>


bgproperties


it gives watermark effect.

<body background=”sps.jpg”

bgproperties=”fixed”
>


link

-

Specifies the color of
unvisited links in a document

alink

-

Specifies the color of an active link in a document

vlink

-

Specifies the color of visited links in a document


<body bgcolor=”#669911” link=”green”

alink=”red” vlink=”purple”>


Subject :
FIT

|| Page
4

of
12

|| Session: 201
3
-
1
4



4


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

Paragraph Tag <p>

The <p> tag defines a

paragraph. Using this tag places a blank line above and below the text of the
paragraph.


HTML Code:

<Html>

<Head>

<Title>example of paragraph tag</Title>

</Head>

<Body bgcolor=”green”>

<p>Avoid losing floppy disks with important school...</p>

<p
align="justify">For instance, let's say you had a HUGE school or work...</p>

<p align="center">For instance, let's say you had a HUGE school or work...</p>

<p align="right">For instance, let's say you had a HUGE school or work...</p>

</Body>

</Html>


HTML
-

Headings 1:6

A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of <h1>
(heading) tags, the text displays bold and the size of the text depends on the number of heading (1
-
6). Headings are numbered 1
-
6, with 1 be
ing the largest heading and 6 being the smallest.


HTML Code:

<Html>

<Head>

<Title>example of heading tag</Title>

</Head>

<Body background=”ash.jpg”>

<h1>Headings</h1>

<h2>are</h2>

<h3>great</h3>

<h4>for</h4>

<h5>titles</h5>

<h6>and subtitles</h6>

</Body><
/Html>


<br> Break Rule

HTML Code:

<b
ody background=”ash.jpg”>

<p>

Subodh

Public School<br>

Ram Bagh Crossing<br>

Jaipur<br>

</p>

Output:
-

Subodh

Public School

Ram Bagh Crossing

Jaipur


The
line break

tag can be placed within other HTML elements such as paragraphs, tables, lists, and
headings.

Remember that the line break tag (<br>) does not require a closing tag.


Subject :
FIT

|| Page
5

of
12

|| Session: 201
3
-
1
4



5


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT


HTML Horizontal
Rule (
<hr>)

HTML Code:

<Html>

<Body bgcolor="lightyellow" text="blue">

<
h1 align="center">
Subodh

Public School</h1>

<hr>

<center><b>Admission Start</b></center>

<hr>

text goes here

<hr color=”black”>

<b>text goes here</b>

<hr color="green" size="6" noshade>

<p> text goes here </p>

<hr color="green" size="6" width="50%" noshade
>

</Body></Html>


Output:





To have the 3 pixels thick horizontal line across the window

ANS:

<hr size="3">


Font and Basefont

The
<font> tag

is used to add style, size, and color to the text on your site. Use the
size
,
color
, and
face

attributes to customize your fonts. Use a
<basefont> tag

to set all of your text to the same size,
face, and color.

Set the size of your font with
size
. The range of accepted values is from
1(smallest)

to
7(largest).


The default size of a font is 3
.

HTML

Code:

<Html>

<Body bgcolor="lightyellow">

<h2 align="center"><u>Example of Font tag</u></h2>

<font color="green">Multimedia and Web Technology</font><br><br>

<font size="4" color="green">Multimedia and Web Technology</font><hr>

<font size="6" color="green
" face="Monotype Corsiva">Multimedia and Web Technology</font>


Subject :
FIT

|| Page
6

of
12

|| Session: 201
3
-
1
4



6


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

<p>we can use <font color="blue">font tag</font> anywhere in our <font size="4">web
page.</font></p>

</Body></Html>

Output:


Basefont

-

Set a solid Base

With the basefont

tag you will be able to set the default font for your web page.

HTML Code:

<Html><Body>

<basefont size="2" color="green" face=”Times New Roman”>

<p>This paragraph has had its font...</p>

<p>This paragraph has had its font...</p>

<p>This

paragraph has had its font...</p>

</basefont>

</Body></Html>


HTML


Images

The <IMG> tag is used for including images in a web page. The <IMG> tag is an empty tag.

For example: The effect of <Img Src=”skn.jpg” height=”120” width=”150”> will be




Above we have defined the
Src

attribute
. Src stands for
source
, the source of the image or
more appropriately, where the picture file is located.





Subject :
FIT

|| Page
7

of
12

|| Session: 201
3
-
1
4



7


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

Example1:

<Html><Body>

<h1 align="center">World of Multimedia</h1>

<hr color="brown" size="6" noshade>

<img

src="skn.jpg" width="220" height="150" border="2" alt="image does not exist"
align=”left”
>

<p>world of multimedia. World of multimedia.world of multimedia.

world of multimedia. World of multimedia.world of multimedia.world of multimedia.

world of
multimedia.world of multimedia.world of multimedia.world of multimedia.

world of multimedia.world of multimedia.world of multimedia.world of multimedia.

</p>

<hr color="brown" size="6" noshade>

</Body></Html>


Example2:

<Html><Body>

<h1 align="center">Wor
ld of Multimedia</h1>

<hr color="brown" size="6" noshade>

<img src="skn.jpg" width="220" height="150" border="2" alt="image does not exist"
align=”right”
>

<p align=justify>world of multimedia. World of multimedia.world of multimedia.

world of multimedia. W
orld of multimedia.world of multimedia.world of multimedia.

world of multimedia.world of multimedia.world of multimedia.world of multimedia.

world of multimedia.world of multimedia.world of multimedia.world of multimedia.</p>

<hr color="brown" size="6" nos
hade>

</Body></Html>


Subject :
FIT

|| Page
8

of
12

|| Session: 201
3
-
1
4



8


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

HTML Lists


The three different types of lists available in HTML are:

1.

Ordered List

2.

Unordered List


A <ol> tag for ordered list, <ul> tag for unordered lists. Use the
type

and
start

attributes to fine tune
your lists accordingly.

<ol>

-

ordered list;
numbers


<ul>

-

unordered list;
bullets



1.

Ordered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening
<ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the
list
below demonstrates.


HTML Code:


Output:


<Html><Body>

<h3>Goals</h3>

<ol>

<li>Find a Job</li>

<li>Get Money</li>

<li>Move Out</li>

</ol>

</Body></Html>




Start your ordered list on any number besides 1 using the
start

attribute.

HTML Code:


Output:


<Html><Body>

<h3>Goals</h3>

<ol start="4">

<li>Find a Job</li>

<li>Get Money</li>

<li>Move Out</li>

</ol>

</Body></Html>


Nothing fancy here, start simply defines which number to begin numbering with.

There are 4
other types of ordered lists
. Instead of generic numbers you can replace
them with Roman numerals or letters, both capital and lower
-
case. Use the
type

attribute to
change the numbering.

HTML Code:

<ol type="a">

<ol type="A">

<ol type="i">

<ol type="I">


Subject :
FIT

|| Page
9

of
12

|| Session: 201
3
-
1
4



9


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

Or
dered List Types
:

Lower
-
Case Letters

Upper
-
Case Letters

Lower
-
Case Numerals

Upper
-
Case Numerals

a.

Find a Job

b.

Get Money

c.

Move Out

A.

Find a Job

B.

Get Money

C.

Move Out

i.

Find a Job

ii.

Get Money

iii.

Move Out

I.

Find a Job

II.

Get Money

III.

Move Out

2.

Unordered Lists

Create a bulleted list

with the <ul> tag. The bullet itself comes in three flavors:
squares,
discs, and circles
. The default bullet displayed by most web browsers is the traditional full
disc.

HTML Code:

Output:

<Html><Body>

<h3>Goals</h3>

<ul>

<li>Find a Job</li>

<li>Get
Money</li>

<li>Move Out</li>

</ul>

</Body></Html>



Here's a look at the other flavors of unordered lists may look like.

HTML Code:

<ul type="square">

<ul type="disc">

<ul type="circle">

Unordered List Types:

type="square"

type="disc"

type="circle"



Milk



Toilet Paper



Cereal



Bread



Milk



Toilet Paper



Cereal



Bread

o

Milk

o

Toilet Paper

o

Cereal

o

Bread

Example (Nested List)

<Html><Body>

<h3 align="center">Nested List</h3>

<ol>


<li>Rajasthan



<ul type="disc">




<li>Jaipur




<li>Churu



</ul>


<
li>Bihar



<ul type="square">




<li>Patna



</ul>

</ol>

</Body></Html>



Subject :
FIT

|| Page
10

of
12

|| Session: 201
3
-
1
4



10


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

<Html><Body>

<h4>A nested List:</h4>

<ul>


<li>Coffee</li>


<li>Tea


<ul>


<li>Black tea</li>


<li>Green tea


<ul>


<li>China</li>


<li>
Africa</li>


</ul>


</li>


</ul>


</li>


<li>Milk</li>

</ul>

</Body></Html>





Text Formatting Tags


Tag

Description

<b>

Defines bold text

<i>

Defines italic text

<small>

Defines small text

<
strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<strike>

Deprecated. Use <del> instead

<u>

Deprecated. Use styles instead





HTML Code:


Output:


<body>


A<sup>2</sup>+B<sup>2</sup>

<br><
br>

H<sub>2</sub>O


</body>



Subject :
FIT

|| Page
11

of
12

|| Session: 201
3
-
1
4



11


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT

HTML
-

Links and Anchors


Use the <a></a> tags to define the start and ending of an anchor. Decide what type of
href

attribute

you need and place this attribute into the opening tag. The text you place between the
opening and closing tags will be shown as the link on a page.

The destination of the link is defined in the
href

attribute of the tag. The link can be
absolute
,
such as

"http://www.spsjaipur.com", or it can be
relative

to the current page.

So if, for example, you had another file called "flyingmoss.html" then the line of code would
simply be
<a href="flyingmoss.html">The miracle of moss in flight</a>

or something like th
is.

A link does not have to link to another HTML file, it can link to any file anywhere on the web.

HTML Code:

<Html>

<B
ody bgcolor="lightyellow">

<h1 align="center">HTML Anchor Tag Example</h1>

<hr color="blue">

<a href="Home.html">Home</a>

<a href
="About.html">About Us</a>

<a href="Contact.html">Contact Us</a>

<hr color="blue">

</Body></Html>

Output:



HTML Code:

<Html><Head>


<Title>Anchor Tag</Title>

</Head>

<B
ody bgcolor="lightyellow"
link
=”yellow”
alink
=”brown”
vlink
=”pink”>

<h1 align="center"
>Rajasthan Tourism</h1>

<hr color="blue">

<center>

<a href="Home.html"><b>Home</a> &nbsp;&nbsp;&nbsp;

<a href="About.html"><b>About Rajasthan</a> &nbsp;&nbsp;&nbsp;

<a href="rjdesert.html"><b>Rajasthan Desert</a> &nbsp;&nbsp;&nbsp;

<a href="rjtemp.html"><b
>Rajasthan Temples</a>

</center>

<hr color="blue"></Body></Html>


Note:
&nbsp;

is used to give spaces between text.


Subject :
FIT

|| Page
12

of
12

|| Session: 201
3
-
1
4



12


Subodh Public School,

Rambagh,

Jaipur ||
Subject: FIT


Output:




LINK
:
-

the link attribute specifies the color used for hypertext links.


VLINK (Visited Link)
:
-

the vlink

attribute specifies the color used for hypertext links that
have been previously visited by the viewer.


ALINK

(Active Link)
:
-

the color that is briefly used for links at the moment the user clicks
on the link

(this color is displayed only while the mouse

is held down on the link.)


Note
:
Link, Alink and Vlink are the attributes of BODY tag.


Absolute URL

Absolute URL use a complete address to give the location of a resource.

Example:
-


<body background=”c:/myfolder/images/myphotos/sps.jpg”>

<a href=”http
://www.sunilnehra.tk”>absolute url</a>


Relative URL

Relative URL designates the file name. if the web page and files(images, html pages) are stored in
same folder, then we use relative url.

Example:
-


<body background=” sps.jpg”>

<a href=”address.html”>ad
dress</a>


HTML


Email Links

Creating an email link is simple. If you want somebody to mail you about your site a good way to do
it is place an email link with a subject already in place for them.

HTML Code:

<a href="mailto:info@spsjaipur.com”>
Email@subodh</a>

Email Links:

Email@subodh


Or

If you want to
add subject

also, then write

<a href="mailto:info@spsjaipur.com?subject=Feedback" >Email@subodh</a>