HTML Web design english & sinhala mix note

HTML (Hyper Text Mark up Language)
Web Design
What is HTML?
Hyper Text Mark up Language is the tool, used to build web pages.(Hypertext with
text with links to more links)(mark up code within document that represents its
intended structure)HTML is a collection platform independent styles that defend
the various components of a world wide web document.
What an HTML Document is,
HTML Documents are plain text(also Known an ASCII) files that can be created using any text
editor( e.g. Emacs or version on Unix machines . Simple Text on a Macintosh, Notepad on a
windows machine) you can also use word processing software if you remember to save your
document as “Text only with line breaks.
HTML Document
Every Html document should contain standard HTML tags. Each document consists of head and
body text. The head contains the title, and the body contains the actual text that is made up of
paragraphs, lists, and other elements. Browsers expect specific information because they are
programmed according to HTML and SGML specifications.
Overall Structure of HTML
 Tag Is a markup text
Ex:
<html>
-All HTML document have three document level tags
<head>
<body>
Tags delimit certain sections of HTMLdocument
</body>
</html>
What are Tags
To denote the various element in an HTML document.we use tags. An HTML tag consist of a
left angle bracket and (<), a tag name, and a right angle bracket (>),[eg : <HTML>] Tags are
usually paired . [Eg.<HTML>&<//HTML>] to start and end the tag instruction.The end tag
looks just like the start tag except a slash (/) precede the text within the brackets
Mark Up Tags
<HTML>&</HTML> : Contains the whole of the HTML document. This element
tells your browser that the file contain HTML coded
information(Usually first & last tags)
<HEAD>&</HEAD> :Delimits the beginning and ending of the document’s head.
The Title is shown as part of your browser’s windows.
<TITLE>&</TITLE> : create the HTML document s title identifies its context.
This tag is vary important and should always be used.(Unless
the document is part of a frame set)
<BODY>&</BODY> : The second-end largest-part of your HTML document is the
Body contains the content of document.

The <html> Tag
 The <html> tag surrounds the entire HTML document. This tag tells the client browser
where the document begins and ends.
<html>
…..document contents …
</html>
The <head> Tag
The <head> tag delimits the heading of the HTML document.
 The heading section of the document contains certain heading information for the
document.
The document's title , meta information, and in most cases, document scripts are all contained in
the <head> section
Type of main Tag
1. Body tags
2. Format Tags
3. List Tags
4. Image Tags
Body tags
 There are including under Title ,paragraph, List, Table and Images
අරම්භය <Body>
------Statement ---->
අවසානය </Body>
…………………….
 <BODY> - Tag syntax
< BODY
Bgcolor = “color”
Text =”color”
Link =”color”
Background =”Filename.extension”>
………………
………………..document text
</BODY>
Body Tag Attributes
I. Bgcolor = background color
II. Text = Text color

III. Background =background picture file
IV. Link =Hyperlink text color
i. Bgcolor ( background color) -වේබ් පිටුවල පසු බිම වර්ණ ගැනවිම සදහා වයොදා ගැවේ.
1 Program
<Html>
<body bgcolor = “black”>
……………………
…………………..
</BODY>
</HTML>
ii. Text( Text color)
වමමගිේ Text එකක් සදහා වර්ණ ගැේවේ.
2 . Program
<Html>
<body bgcolor = “black”
TEXT = “RED”>
welcome
…………………..
</BODY>
</HTML>
iii. Background (background picture file)
වේබ් පිටුවල පසු බිමට image වයොදා ගත හැක.
වම් සදහා jpg/jpeg or Bmp type ඇති image වයොදා ගැවේ.
3 . Program
<Html>
<body Background = “world.jpg”
TEXT = “RED”>
welcome
…………………..
</BODY>
</HTML>
Color
There are two type color code
i. Standard Color
There are using 16 color code
Black Maroon Green blue
Sliver red lime teal
Gray purple olive navy
White fuchsia yellow aqua
ii. Hexadecimal
There are using RGB color code

Red, Green, Blue, යන ප්‍රධාාන වර්ණ ුනනට
A –F දක්වා අක්ෂර වදක ද
0 – 9දක්වා ඉලක්කම් වදක ද
Hexadecimal වර්ණ 256 ක පමන වර්ණ නිපදවයි.
ඒ අනුව.
Red #FF0000
Green #00FF00
BLUE #0000FF
WHITE #FFFFFF
Black #000000
Red green blue
00 00 00 Black
FF 00 00 Bright Red
00 FF 00 BRIGHT GREEN
80 00 00 Dark Red
00 80 00 Dark Green
00 00 80 Dark Blue
Ff ff 00 bight yellow
80 80 00 Brown
FF 00 FF Magenta
80 80 80 Gray
Program
<Html>
<body bgcolor = “#FF00FF”
TEXT = “#ggff00”>
Welcome my web
</BODY>
</HTML>
<Head><Title> Tag
Defines the title of a page.
This text does not appear in your web page, but appears in the title bar of the
browser and when the page
is bookmarked.
The TITLE must be defined in the HEAD of the document. Only one
TITLE can be used in each page.
Program
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR BODY TAG
</TITLE>
</HEAD>
<BODY

BACKGROUND=”GLASS.JPG”
TEXT=”BLACK”>
WELCOME MY WEB
</BODY>
</HTML>
---------------------------------------------------------------
<BR> - this tag is using line Break tag
Program
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR line break TAG
</TITLE>
</HEAD>
<BODY>
WELCOME <BR> My First web
</BODY>
</HTML>
-----------------------------------------------------------------
<p> -tag
This is using divide in paragraph, and setting alignment.
1. <p>
2. <p align= “left”>
3. <p align=” right”>
4. <p align=” center”>
5. <p align=” justify>
Program(6)
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR align paragrph TAG
</TITLE>
</HEAD>
<BODY>
This chapter describe the contents of the support CD-ROM that comes with the
mainboard package.
The support CD-ROM contains all useful software necessary drivers and utility
program to properly run our products
More program information is available in a README file Loacted in the same
directory as the software.
</BODY>
</HTML>
Program(7)
<HTML>
<HEAD>

<TITLE>
EXAMPLE FOR align paragraph TAG
</TITLE>
</HEAD>
<BODY>
<p>This chapter describe the contents of the support CD-ROM that comes with
the mainboard package.
<p>The support CD-ROM contains all useful software necessary drivers and
utility program to properly run our products
<p>More program information is available in a README file Loacted in the
same directory as the software.
</BODY>
</HTML>
--------------------------------------------------------------------------
Center tag <Center> ………………….</center>
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR center TAG
</TITLE>
</HEAD>
<BODY>
<center> Welcome </center><br>
<p>This chapter describe the contents of the support CD-ROM that comes with
the mainboard package.
<p>The support CD-ROM contains all useful software necessary drivers and
utility program to properly run our products
<p>More program information is available in a README file Loacted in the
</BODY>
</HTML>
------------------------------------------------------
`
<HR> tag
වේබ් පිටුවල ඉරි ඇදීම සදහා වමම ටැග් එක වයොදා ගැවේ. වම් සදහා ක්‍රම ිහිපපයක් ම <HR> tag
වයොදා ගැවේ.
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR HRTAg
</TITLE>
</HEAD>
<BODY>
<center> Welcome </center><br><HR>

My first web site
</BODY>
</HTML>
------------------------------------
<HR>tag එක සදහා වයවදන වයදුම් ිහිපපයක් විස්ථර පහත දැක්වේ
1. Size
2. Width
3. Align
4. No shade
5. Color
1.Size
වමිපදී එක් එක් ප්‍රමාන විනේ ුකක්ත තිැ සකස් කල හැිහය.
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR HRTAg
</TITLE>
</HEAD>
<BODY>
<HRSize = “1”>
<HRSize = “5”>
<HRSize = “10”>
My first web site
<HRSize = “20”>
<HRSize = “50%”>
</BODY>
</HTML>
---------------------------------------------------

2. width
වයොදනු ලබන ඉවර් දිග තිරණය ිහරිමට වම මගිේ හැිහ වේ.
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR HRTAg
</TITLE>
</HEAD>
<BODY>
<HRWidth = “10%”>
</BODY>
</HTML>
----------------------------------------------------
3.Align
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR HRTAg
</TITLE>
</HEAD>
<BODY>
<HRWidth = “20%” align= “left”>
<HRWidth = “30%”align= “right”>
</BODY>
</HTML>
----------------------------------------------------------
5. Noshade
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR HRTAg
</TITLE>
</HEAD>
<BODY>
<HR Size = “1”noshade>
My first web site
</BODY>
</HTML>
--------------------------------------

5.color
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR HRTAg
</TITLE>
</HEAD>
<BODY>
<HR Size = “50” color=”66hhll”>
<HR Size = “50” color=”Red”>
<HR Size = “25” color=”green”>
</BODY>
</HTML>
2.Format tags
There are three type main tag
1. Font tag
2. Text style tag
3. Heading Tag
Font Tag - <font size = “5”> statement……..</font>
< font color=”Red”> statement………</font>
<Font size= “12” color= “red”>statement………</font>
<Font face= “Arial” size= “12” color= “Red”>statement………</font>
Program
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR center TAG
</TITLE>
</HEAD>
<BODY>
<center><Font size= “20” color= “red”>Welcome</font></center><br>
<p><Font face= “Arial” size= “12” color= “blue”>This chapter describe the
contents of the support CD-ROM that comes with the mainboard package.
</font></p>
<p>< font color=”Green”>The support CD-ROM contains all useful software
necessary drivers and utility program to properly run our products</Font></p>
<p>More program information is available in a README file Located in the
</BODY>
</HTML>
------------------------------------------------

2. Text style
1. <B> - Bold <B>………TEXT…………..</B>
2. <I>- Italic <I>…….....TEXT…………..</I>
3. <U> Underline <U> ….....TEXT…………..</U>
4. <TT> type writer text <TT>…….....TEXT……..</TT>
5. <EM> Logical Emphasis Style <EM>………Text……….</EM>
6. <Strong> Logical strong emphasis
7. <BIG> Enlarge text
8. <small> small text
9. <S> strike out
10. <blink> blink text (using Firefox Browser )
11. <marquee> horizontal scrolling text
12. <sus> superscript
13. <sub> subscript
Marquee Tag
වේබ් පිටුවල හරස් අකුැ වේළියක් වැනි වකොටස් ගමේ කරවිමට ඔබට අවශ්‍ය නම් වමම ක්‍රමය
වයොදා ගත හැිහය.
 WIDTH: how wide the marquee is
 HEIGHT: how tall the marquee is
 DIRECTION: which direction the marquee should scroll
 BEHAVIOR: what type of scrolling
 SCROLLDELAY: how long to delay between each jump
SCROLLAMOUNT: how far to scroll
 LOOP: how many times to loop (default=infinite)
 BGCOLOR: background color
 HSPACE: horizontal space around the marquee
 VSPACE: vertical space around the marquee
<BIG><TT><BLINK>WELCOME </BLINK></TT><BR><BIG>
<FONT SZE="4" FACE=" ARIAL">
 <MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE
BGColor="yellow">This is an example of an alternating
marquee...</MARQUEE></FONT>
 <MARQUEE>My First web</MARQUEE><BR>
<FONT SIZE="4" FACE="courier" COLOR=blue>
 <MARQUEE WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow LOOP=5>This
is an example of a scrolling marquee...</MARQUEE></FONT>
<FONT SIZE="4" FACE="courier" COLOR=blue>
 <MARQUEE WIDTH=100% BEHAVIOR=SLIDE BGColor="yellow">This is an
example
of a sliding marquee...</MARQUEE></FONT><BR>
<FONT SIZE="4" FACE="courier" COLOR="blue" BGCOLOR

="RED">
 <MARQUEE WIDTH=100% BEHAVIOR=SCROLL
DIRECTION=RIGHT BGColor=yellow>This is an example of a marquee
scrolling to the right...</MARQUEE></FONT>
</BODY>
</HTML>
Attrubutes:
A HTML marquee can have following attributes:
 width: how wide the marquee is. This will have a value like 10 or 20%etc.
 height: how tall the marquee is. This will have a value like 10 or 20% etc.
 direction: which direction the marquee should scroll. This will have value
either up,down, left or right.
 behavior: what type of scrolling. This will have
value scroll, slid and alternate.
 scrolldelay: how long to delay between each jump. This will have a value
like 10 etc.
 scrollamount: how far to jump. This will have a value like 10 etc.
 loop: how many times to loop. The default value is INFINITE, which means
that the marquee loops endlessly.
 bgcolor: background color. This will have any color name or color hex
value.
 hspace: horizontal space around the marquee. This will have a value like
10 or 20%etc.
 vspace: vertical space around the marquee. This will have a value like 10
or 20%etc.
Examples:
Here are few examples to demonstrate the usage of marquee tag.
<marquee>This is basic example of marquee</marquee>
<marquee width="50%">This example will take only 50% width</marquee>
<marquee direction="right">This text will scroll from left to right</marquee>
<marquee direction="up">This text will scroll from bottom to up</marquee>

HTML Marquees • Marquee Codes for Myspace
The following Marquee html tags are created to help you to build your own web application,
website or Myspace marquee blog. In this table you can find most useful text tags as well as
marquee image codes. Just follow our tutorial and learn how to manipulate HTML tags and
codes to reach your goal without need to use any kind of Marquee Generator. Knowledge is
Power! Pay attention that not all browsers, Netscape - old versions in particular, do support
marquee function.
BASIC Marquee
<marquee>Change text between marquee tags</marquee>
Marquee BEHAVIOR
<marquee behavior="slide">Slide marquee behavior</marquee>
<marquee behavior="alternate">Alternate marquee behavior</marquee>
Marquee DIRECTION
<marquee direction="right">Right marquee direction</marquee>
<marquee direction="up">Up marquee direction</marquee>

<marquee direction="down">Down marquee direction</marquee>
Marquee LOOP • Number of times marquee wiil scroll (loop)
<marquee loop="3">This marquee is set to scroll (to loop) 3 times</marquee>
<marquee loop="5">Another example: This marquee will loop 5 times</marquee>
Marquee SCROLLAMOUNT • Smaller SCROLLAMOUNT value scrolls marquee slower
<marquee scrollamount="10">SCROLLAMOUNT marquee equals 10</marquee>
<marquee scrollamount="20">Another example: SCROLLAMOUNT marquee equals
20</marquee>
Marquee SCROLLDELAY • Smaller SCROLLDELAY value scrolls marquee faster
<marquee scrolldelay="250">SCROLLDELAY marquee. 250 = ¼ sec</marquee>
<marquee scrolldelay="500">Another example: SCROLLDELAY marquee 500 = ½
sec</marquee>
Miscellaneous HTML Marquee Tags
<marquee bgcolor="#66CD00">Changing bgcolor value changes marquee background
color</marquee>

<marquee behavior="alternate"><marquee width="200">Reoccuring
Marquee</marquee></marquee>
<marquee scrollamount="5" width="40"><<<</marquee>Opposite Direction
Marquees<marquee scrollamount="5" direction="right"
width="40">>>></marquee>
Opposite Direction Marquees
<marquee width="60%" direction="up" behavior="alternate"><marquee
direction="right"behavior="alternate">ZigZag Marquee</marquee></marquee>
<marquee scrollamount="15" direction="up" behavior="alternate"><marquee
scrollamount="15" direction="right" behavior="alternate"><img src="YourImage.gif"
/></marquee></marquee>
<marquee direction="down"><img src="http://www.Fillster.com/image.gif" /></marquee>
<marquee"><img src="http://www.Fillster.com/image.gif" /></marquee>
--------------------------
Lists : HTML supports unnumbered, numbered, and definition lists. You can next list too. But use
this feature sparingly because too many nested items can get difficult to follow.
<LI>&</LI> :Container of a list items
<UL>&</UL> :Created an unnumbered list of bulleted <LI> element.
<OL>&</OL> :Defines an ordered list containing numbered <LI> elements
<DL>&</DL> :logical tag indicating that enclosed text is a definition.
<DT>&</DT> :Logical tag indicating that enclosed text is the term part of a
definition list element.

 <DD>&</DD> : logical tag indicating that enclosed text is the tern part of a
definition list element.
 Unnumbered List : To make an Unnumbered bulleted list.
Start with an opening list <UL> (for unnumbered list) tag.
1. Enter the <UL> (list item) tag followed by the individual item , no closing </UL>
tag is needed
2. End the entire list with a closing list </uL> tag.
Below is a sample three item list
<UL>
<Li> apple
<Li>bananas
<LI>Grapefruit
</UL>
The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <p> paragraph
tags.
 Numbered lists
A numbered list(also called an ordered list, from which the tag name derives) is identical to an
unnumbered list, except it uses<OL> instead of <UL> the items are tagged using the same <LI>
tag . the following html code;
<OL>
<Li> apple
<Li>bananas
<LI>Grapefruit
</OL>
 Definition lists
A definition list(coded as <DL> usually consists of alternating a definition term (coded as <DL>)
and a definition (coded as <DL>). Web browsers generally format the definition an a new line and
indent it The following is an example of a definition list;
<DL>
<DT> NCSA
<DD> NCSA, the National Center for supercomputing Application.Is located on the campus of the
University of Illinois at Urbana- champaign.
<DT>Cornell Theory Center
<DD>CTC is located on the campus of Corncell University in Ithaca, New York.
</DL>
 Heading tag
Heading
HTML has six levels of headings numbered 1 through 6 with 1 being the largest. Headings are
typically displayed in larger and/or bolder fonts than normal body text. The first heading in each
document should be tagged <H1> The syntax of the heading element is <Hy> Text of heading </Hy>
where y is a number between 1 and 6 specifying the level of the heading. Do not skip level of
Display Output on screen

headings in your document. For example, don’t start with a level one heading (H1>) and then next
use a level three(<H3>) heading.
<H1> Heading Level 1 </H1>
<H4> Heading Level 4</H4>
Program
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR headingr TAG
</TITLE>
</HEAD>
<BODY>
<center><Font size= “20” color= “red”>Welcome</font></center><br>
<UL>
<Li><H2> apple</H2>
<Li><H3> bananas</H3>
<LI><H4> Grapefruit</H4>
</UL>
</Body>
</Html>
-------------------------------------

3. List Tag
මේ යටමේ ඔබට ප්‍රධාන ශයමය් ටග් ශ්ග තරක් තුන න ර තගියය මබ්
පිටු ශල අඩංගු විවිධා කරුණු සදතන මෙෙ ලිස්ට් ටග් භනවිරන මබ ඊට අෙරකශ
මේ යටමේ භනවිරනශ List Type, List items ශයමය් මකොටස් මදකිය
List Type
මේශනමේ ශ්ග තු ිය
Disk
Circle
Square
List items
මේ List Items ශල අතුරු මකොටසක මලස ගරමතොේ පතර දග් මශ් ලිස්ට්
ටග් ශල ඇතුලේ අනු ටග් එක් මලස දග් විය තගියය
List Tag
1. Unordered List Tag
2. Ordered List Tag
3. DIR List Tag
4. Menu List Tag
5. Definition List Tag
6. Address List Tag
1. Unordered List Tag (UL tag)
මේශනමේ ද ආකේභක සත අශසන ටග් මදක් ඇර ඒ අරක ලිස්ට් ටග් මදක් ද
දගියය තගියය එමසේෙ මෙයට මපක සදත් කක ලද List Type ශලි් කගෙති එක්
ඇතුළේ ියරිමේ තගියයනශ ද තිම්
Disk Program
<HTML>
<HEAD>
<TITLE>
EXAMPLE FOR Unordered TAG
</TITLE>>
</HEAD>
<BODY>
<H1>
<font Face = “Arial”><center>Welcome</font></center><H1><br>
<h2>
<font color=”red”>
My First Web Page <br>
</font></h2></center>
<ULType = “disc”>
<Li> apple</Li>
<Li> bananas</Li>
<LI>Grapefruit</Li>
</UL>

<H3>
<font color= “green”><center>
Create By MahndaGamage
</font></h3>
</Body>
</Html>
------------------------------------------------
circle Program
<HTML>
<HEAD>
<TITLE>
</TITLE>>
</HEAD>
<BODY>
<H1>
<h2>
<UL Type = “circle”>
<Li> apple</Li>
<Li> bananas</Li>
<LI>Grapefruit</Li>
</UL>
<H3>
</font></h3>
</Body>
</Html>
------------------------------------------------
square Program
<HTML>
<HEAD>
<TITLE>
</TITLE>>
</HEAD>
<BODY>
<H1>
<h2>

<UL Type = “square”>
<Li> apple</Li>
<Li> bananas</Li>
<LI>Grapefruit</Li>
</UL>
<H3>
</font></h3>
</Body>
</Html>
--------------------------------
<HTML>
<HEAD>
<TITLE>
</TITLE>>
</HEAD>
<BODY>
<H1>
<h2>
<UL Type = “disk”>
<Li> apple</Li></UL>
<Li> bananas</Li>
<LI>Grapefruit</Li></UL>
</UL>
<H3>
</font></h3>
</Body>
</Html>
Example:- circle/squre
program
<HEAD>
<TITLE>

</TITLE>
</HEAD>
<BODY>
<center><Font face= “Arial” color= “red”>
<H1>Welcome</font></H1></center><br>
<h2>
<Font face= “Arial” color= “#ggff11”>
My first web page<Br>
<HR width=”10” color =”black”>
<UL Type=”circle”>
<Li>Computer<//Li>
<Li>internet</Li>>
<LI>Explora</Li>
</UL>
<UL Type=”SQUARE”>
<Li>Computer<//Li>
<Li>internet</Li>>
<LI>Explora</Li>
</UL>
<H3>
<font color = “Green”><center> crated by MahindaGamage</center>
</font></h3>
</Body>
</Html>
2. Ordered list Tag (OL tag)
පිළිවවළකට අනුව වපළ ගැස්මක් සකස් කරන විට ඔබට වමම වයදුම භාවිත කල හැිහය.
Type = “1” -Arabic numeral
Type = “A” -Upper aliphatic
Type = “a” -lower aliphatic
Type = “” - Upper case Roman
Type= “” -Lower case nunmerals

Program :
<HEAD>
<TITLE>
EXAMPLE FOR ordered list TAG
</TITLE>
</HEAD>
<BODY>
<center><Font face= "Arial" color= "red">
<H1>Welcome</font></H1></center><br>
<h2><center>
<Font face= "Arial" color="red">
<MARQUEE width= 75% bgcolor= yellow>
My first web page<Br>
<HR width=50% color ="black"></mARQUEE></center>
<UL Type= "1">
<LI>COMPUTER</LI>
<UL Type= "I">
<LI> HP use in </LI>
<UL TYPE="A">
<LI>KOREAN</LI>
<LI>SRI LANKA</LI>
</UL>
<Li> sony use in</Li>
<UL TYPE="A">
<LI>Japan</LI>
<LI>SRI LANKA</LI>
</UL>
</UL>
<Li>Internet</Li>
<UL Type="i">
<Li>File search</Li>
<Li>web browsing</Li>
<LI>E-mailing</Li>
</uL>
<Li>Computer sale center</Li>
<oL Type="a">
<Li>Matarar</Li>
<Li>Colombo</Li>
<LI>Galle</Li>
</OL>
<oL Type="I">
<Li>Computer</Li>
<Li>internet</Li>
<LI>Explora</Li>

</OL>
<oL Type="i">
<Li>Computer</Li>
<Li>internet</Li>
<LI>Explora</Li>
</OL>
<H3>
<font color = “Green”><center> crated by MahindaGamage</center>
</font></h3>
</Body>
</Html>
3. Directory List tag(Dir Tag)
Directoryවලස වතොරුනරු වපළගස්වේවේ නම් ඔබට වමම ක්‍රමය වයොදා ගත හැිහ ය.
Program
<HEAD>
<TITLE>
EXAMPLE FOR directot list TAG
</TITLE>
</HEAD>
<BODY>
<h1>
<font face= Arial>
<center>Welcome<br>
</font>
</h1>
<h2>
<font color=red>
Myfirst computer web page <br>
</font>
</center>
</h2.
<dir>
<LI> COMPUTER</LI>
<LI>INTERNET </LI>
<LI> EXPLORA</LI>
</DIR>
</BODY>
</HTML>
------------------------

Menu List tag
මාතෘකා වලස වපළගැස්මක් සකස් කරන විට දී ඔබට වමම ටැග් එක භාවිත කල හැිහ වේ.
Program
<HEAD>
<TITLE>
EXAMPLE FOR director list TAG
</TITLE>
</HEAD>
<BODY>
<h1>
<font face= Arial>
<center>Welcome<br>
</font>
</h1>
<h2>
<font color=red>
</font>
</center>
</h2.
<Menu>
<LI> COMPUTER</LI>
<LI>INTERNET </LI>
<LI> EXPLORA</LI>
</Menu>
</BODY>
</HTML>
-------------------------
5. Definition tag
යමක් සම්බේධාව වැඩිදුර විස්ථර ිහරිම සදහා DL,DT,DD භාවිතා කරයි. එක එක් වයදේවේ
එකක් අවනක ුනල ඇති වයදුමක් වලස ය.
්‍්Program
<HEAD>
<TITLE>
EXAMPLE FOR director list TAG
</TITLE>
</HEAD>
<BODY>
<h1>
<font face= Arial>
<center>Welcome<br>
</font>
</h1>
<h2>
<font color=red>
</font>
</center>

</h2.
<DL>
<DT>Hardware
<dd> it is physical part of the computer
<DT> SOFTWARE
<DD> IT IS PROGRAM
</Dl>
</BODY>
</HTML>
----------------
6. Address list Tag
වේබ් පිටුවල යම් තැපල් ිනපිනයක් දක්වන විට ඒ සදහා ඔබ විසිේ වමම කුමය වයොදා ගත ුකුනය.
එක් එක් වේළි සදහා <BR>ටැග් භාවිතා අවශ්‍ය වේ.
<HEAD>
<TITLE>
EXAMPLE FOR directot list TAG
</TITLE>
</HEAD>
<BODY>
<Address>
Technical college<br>
Maddawatha junction<br>
Matara<br>
</address>
<h1>
<font face= Arial>
<center>Welcome<br>
</font>
</h1>
<h2>
<font color=red>
</font>
</center>
</h2>
</BODY>
</HTML>
…………………..
Image Tag
වවබ් පිටුකට රූප එකුන කරන විට දී ඒවා වකොටස් 3කට වවේ කර හැිහ අතර, එනම් image,
Picture, Graphics වශ්‍වයනි. එනම් GIF and JPEG වලස ය.
Syntax
<img src = “photo files”>
Picture එක හැදිේවිම සදහා

ALT = “Text”
නමුත් Picture එක අුනලත දැිහය හැිහය.
Width = number
Height= number
Border =number
Pictureඑකිප , පලල,උස වබොඩරය දැිහය හැක.
ALIGN = “LEFT/RIGHT/TOP/BOTOM/MIDDLE
Picture එකපිිපටන ස්ථානය.
<HEAD>
<TITLE>
EXAMPLE FOR පිේුනර TAG
</TITLE>
</HEAD>
<BODY>
<CENTER><address>
Matara<br>
</address></CENTER>
<h1>
<font face= Arial>
<center>Welcome<br>
</font>
</h1>
<h2>
<font color=red>
</font>
</center>
</h2>
<IMG SRC= “ AA.JPEG” ALT= “TEC” WIDTH= “50” HEIGHT= ‘30” ALIGN=
“MIDDLE”>
</BODY>
</HTML>

Table Tag
Table නිර්මාණය සදහා ටැග් භාවිතා කරනු ලබයි. ප්‍රධාාන වශ්‍වයේ ටැග් වර්ග ිහිපපයක් ඇත.
එනම් <TR> ,<TH>,හා <TD> යන ටැග් වර්ග ිහහපයිහ. වමයට අරම්භය හා අවසානයක් ද ඇත.
Syntax
<table>
<TR>
<TH>……………..</TH>
<TH>……………..</TH>
</TR>
</TABLE>
Tr- table row
Th-table header
Td- table data
Program
<HEAD>
<TITLE>
EXAMPLE FOR Table TAG
</TITLE>
</HEAD>
<BODY><h1>
<CENTER><address>
Matara<br>
</address></CENTER>
</h1>
<table border= "1"
Style="border-collapse: collapse" bordercolor="#111111"
Width=”129” height=”325”>
<tr>
<td width="129" height="325"></td>
</tr>
<center>
<h3><u> ICT course<u></h3>
</body>
</html>
…………………………
කාර්මික විදයාලවස සිසුේ වග් පාඨමාල වල්ඛණ සකසමු
<html>

<head>
<title>
Course Detail
</title>
</head>
<body>
<h3>Student Registration for courses Table</h3>
<table border>
<TR>
<th>st-No</th>
<th>St-Name</th>
<th>Course name</th>
</tr>
<Tr>
<td align= center>A001</td>
<td align= left>A.W Gamini</td>
<td align= center>welding</td>
</tr>
<Tr>
<td align= left>A. prasnna</td>
<td align= center>ICTT</td>
</tr>
<Tr>
<td align= left>s.Viraj</td>
<td align= center>NCE</td>
</tr>
</table>
</body>
</html>
………………………………………………
Syntax of <Table>
<Table
Border = value
Align = “left/Right/cener”
Width = value/percent
Bgcolor = “color / “#hexadecimal code”
Border color = “color/“#hexadecimal code”
Background = ‘file”>
1. Border
වමමගින වේබල් එකක වබෝඩර්වස විශ්‍ාලත්වය හා වර්ණය වවනස් ිහරිවම් හැිහයව ඇත.
<table border =5
Bordercolor= “9900hh”>

…………………………
Program
<body>
<table border =5
Bordercolor= "9900hh">
<TR>
<th>st-No</th>
<th>St-Name</th>
</tr>
<Tr>
</tr>
<Tr>
</tr>
<Tr>
</tr>
</table>
</body>
</html>
…………………………
2. Align
වගුව වේබ් පිටුවේ පැවැත්වවේ ස්ථානය තිරණය කල හැිහය.
<table border =5
Align= “right”>
…………………………….
<body>
<table border =5
Bordercolor= "9900hh">
<TR>
<th>st-No</th>
<th>St-Name</th>
</tr>
<Tr>

</tr>
<Tr>
</tr>
<Tr>
</tr>
</table>
</body>
</html>
…………………………………
3. Width
Table එවක් දිග තිරණය ිහරිමට වමම විධාානය වයොදා ගැවේ.
<Table border = 5
Width= 80%>
………………………………
<table border =5
Bordercolor= "9900hh" align= "center" width= 80%>
<TR>
<th>st-No</th>
<th>St-Name</th>
</tr>
<Tr>
</tr>
<Tr>
</tr>
<Tr>
</tr>
</table>
</body>
</html>
…………………………….
4. Bgcolor
Table එවක් වර්ණ ගැේවිම ිහරිමට වමම විධාානය වයොදා ගැවේ.
<Table border = 5

bgcolor= “blue”>
…………………………………
5. background
 Table එවක්background picture ගැේවිම ිහරිමට වමම විධාානය වයොදා ගැවේ.
 <Table border = 5
 BACKGROUND= “12.JPG”>
…………………………………………………..
6. Valign
වමය ද වේබල් එක වවබ් පිටුවක තිබිය ුකුන ස්ථානය දැක් විමට භාවිතා වකවර්.
 Table border = 5
Valign= “Top/Bottom/Middle”>
………………………………………………………..
7. Merging Cells
1.ඹබට අවශ්‍ය පරිදි cell සංඛයාව වවනස් කරමිේ හැසිර විමට වමය භාවිතා කරයි.
<th rowspan=2> index</th>
2.columns වලට ආදල යම් වවනස්කම් ිහරිමට,සංඛයාව වවනස් කරමිේ columns
සංඛයාවඅදාල වගුව නිර්මාණය කල හැිහය.
<th colspan=2> index</th>
************
<body>
<table border =5
Bordercolor= "9900hh" width= 80% height=50%>
<tr>
<thcolspan=3><h3>Student Registration for courses
Table</h3></th>
</tr>
<TR bgcolor ="yellow" >
<th>st-No</th>
<th>St-Name</th>
</tr></bgcolor>
<Tr>
</tr>
<Tr>
</tr>
<Tr>
</tr>
</table>
</body>
</html>

………………………………………………………………………….
LINKS
නිර්මාණය කරනු ලබන වවබ් පිටුවකට අවශ්‍ය වකවරන වවනත් සම්බේධාතා සදහා වදනු ලබන
විධාානයක මගිේ වනොවයක් දෑ සම්බේධා කල හැිහය. වම්වා වකොටස් වදකකට වබදිය හැිහය. වම්
සදහා <a> Anchor Tag භාේතා වේ.
1. Internal Document Interface
2. External Document Interface
Linking An image
<imgsrc= “12.jpg”>
Image position
1. <imgsrc =”12.jpg” align=”middle”>
2. <center><imgsrc= “12.jpg”></center>
Image Adjusting the size
<imgsrc= “12.jpg” height=100 width=150>
HREF(hyper text Reference)
වවබ් පිටු සම්බේධා ිහරිමට භාවිතා කරනු ලබන විධාානයිහ. වේබ් පිටුවක වමවැනි වයදුම් හදුනා
ගත හැිහය.එවැනි වයදුම් ඇති ස්ථාන වචන යටිේ සාමානයවයේ ඉරක් ඇදි තිවබනු දැිහය හැක.
<html>
<head>
<title>
example for Link tag
</title>
</head>
<body>
<h1><font face ="impact">
<center>WELCOME</CENTER>
</h1>
<H2>
<FONT COLOR="RED">
MY FIRST WEB PAGE
<BR>
<A HREF ="EX1.HTML">EXAMPLE 1</A>
</FONT>
</H2>
</body>
</html>
...........................
පිේුනරයක් හරහා වවබ් පිටු සම්බේධා කරමු
<html>
<head>
<title>
</title>
</head>

<body>
</h1>
<H2>
<FONT COLOR="RED">
MY FIRST WEB PAGE
<BR>
<A HREF ="EX1.HTML">
<IMG SRC="12.JPG"
WIDTH=20% HEIGHT=30% BORDER = 10>
</A>
</FONT>
</H2>
</body>
</html>
..................................
Multimedia Links
වම් යටවත් ඔබට වවබ් පිටුවකට විවිධා sound or video ඇුනල් කළ හැිහය.
<A HREF ="19.mp3">sound </A>
<A HREF ="13.wmv">vedio</a>
...............................
Link to the Web site
වවනත් වවබ් අඩවියට සම්බේධා ිහරිමට නම්,
<A HREF ="http:// www.yahoo.com">To yahoo</A>
……………………………………….
FRAMES
වවබ් පිටුවක් වකොටස් ිහිපපයකට වබදීමට අවශ්‍ය නම් ඒ සදහා වමම වයදුම් භාවිත කර හැිහය.
<FRAMSESET > TAG වයොදා ගත හැක. ටැග් 2 කට වවේ කල හැිහය.
1. ROWS
2. COLUMNS
1.RowS
හරස් අතට වවබ් පිටුවක්තිරු වවේ ිහරිමක දී වයොදා ගනු ලබේවේ වමම වයදුමය. ඒ අනුව සියයට
ගණතක් වලස එම වවේ ිහරිම කළ හැක. එිප දි වවේ කරන වකොටස් වදක සදහා වවන වවනම වවබ්
පිටු වදකක් සකස් කළ ුකුන වේ.
<FRAMESET ROWS ="50%,75%">
2.Column
වමය දික් අතට වවබ් පිටුවක් සිරස් ආකරයට තිරු වවේ ිහරිමක දී වයොදා ගනු ලබේවේ වමම වයදුමය.
ඒ අනුව සියයට ගණතක් වලස එම වවේ ිහරිම කළ හැක
එවසේ වවේ කරගත් අවකාශ්‍යට නිර්මාණය කරන ලද වවබ් පිටු ඇුනලත් කල හැිහය.
<frame SRC = “filename.ext:”>
................
(1)
<html>
<head>
<title>
example for Frame

</title>
</head>
<FRAME SRC= "EX1.HTML">
<FRAME SRC= "EX4 TABLE.HTML">
</FRAMESET>
</html>
‘’’’’’’’’’’’’’’’’’’’’’’’’’
(2)
<html>
<head>
<title>
example for Frame
</title>
</head>
<FRAME SRC= "EX1.HTML">
<FRAMESET cols ="50%,50%">
<FRAME SRC= "EX4 TABLE.HTML">
<FRAME SRC= "12.jpg">
</FRAMESET>
</FRAMESET>
</html>
‘’’’’’’’’’’’’’’’’’’’’’’’’’’’’
පටු තිරුව ුනළ එක් එක් පිටුව සම්බේධා කරන හයිෆර් ිනංග් අුනලත් කරනු ලබ ඇත්වත් ය.
<FRAME SRC= "EX4 TABLE.HTML"> -------------පටු තිරුව
<a href="EX1.HTML" target="sf">---------------පුලුල් තිරුව
A වකොටස සැකසිම සදහා
<html>
<head>
<title>
Create Frames
</title>
</head>
<Frameset Rows ="25%,75%">
<frame Src="ex3 order2.html">
B and C සැකසිම සදහා
<Frameset Cols ="25%,75%">
B වකොටසට පැමිණිය ුකුන ෆයිල් එක frame SRC මගිේ link කල ුකුනය.
<frame SRC="ex6 aherf4.html">
A
B C

දැේ B වකොටවසේ ඇති ෆයිල් එවක් ලීනක් C එකට පැමීණීමට නම් “SF”වලස name command එවක්
නම් කල ුකුනය.
<frame SRC="ex6 aherf4.html"name="sf">
</frameset>
</HTML>
එවසේ නම් කල ෆයිල් එක තිවබ්න ස්ථානවස file එක open කර
<html>
<head>
<title>
</title>
</head>
<body>
</h1>
<H2>
<FONT COLOR="RED">
MY FIRST WEB PAGE
<BR><ol type = "1">
<li><A HREF ="19.mp3" target="sf" >sound </A><br></li>
<li><A HREF ="PSY Gangnam Style.avi"target="sf"> vedio</a><br></li>
<li><A HREF ="http://www.yahoo.com"target="sf">To yahoo </A></li>
</FONT>
</H2>
</ol>
</body>
</html>
එවිට B වකොටවසේ ඇති ෆයිල් එක C වකොටවසේ දර්ශ්‍ණය වේ.
..........................................
<html>
<head>
<title>
වලස target="sf" දැමිය ුකුන වේ,

exampleforlink
</title>
</head>
<body>
<h1>
<u>Meuu</u></h1>
<ul><H2>
<Li><a href="EX1.HTML" target="sf">TEC </A></lI>
<Li><a href="EX4 TABLE.HTML" target="sf">TABLE </A></lI>
<Li><a href="EX4 TABLE2BOR.HTML" target="sf">BORDER </A></lI>
</H2></UL>
</BODY>
</HTML>

……………………………………..
FORMS
…………………….
වම් සදහා ආරම්භක හා අවසාන ටැග් එකක් ද ඇත.FORM TAG වලට ආදල වන ටැග් වර්ග ිහිපපයක්
ඇත.
Syntax :-
<FORM
Action =ULR
Method=method
Text and command
</FORM>
INPUT Tag
වවබ් අඩවි නිර්මාණය ිහරිවම් දී input tag වලස භාවිතයට ගැවනන ටැග් වර්ග හා අවස්ථා සදහා
උදාහරණ ිහිපපයක් පහත දැක්වේ.
Text Box , Password text box, Check Box, Radio Button, Submit Button, Rest Button.
/
Syntex :
<input
Type = “Text/password/check Box/ Radio/submit/Rest”
Name = “Object Name”
Value= “Object Value”
Size = “Size of the item”>
1. Text
<html>
<head>
<title>
example forms
</title>
</head>
<form
Method = "post"
Action = "kgi/bin/resure.pl">
Name <input type ="text" Name="Name"><BR>
Company <input type = "text Name = "company"><BR>
</form>
</HTML>
2 password program
<html>
<head>
<title>
example forms2
</title>
</head>
<form
Method = "post">
Name <input type ="text" Name="Name"><BR></p>
Company <input type = "text Name = "company"><BR>

password<input type ="password" name= "password"><Br>
</form>
</HTML>
2. Checkbox Program
<html>
<head>
<title>
example forms2
</title>
</head>
<form
Method = "post">
<p> your choice</p>
<p> internet<input type="checkbox" name="c1"></p>
<p> hardware<input type= "checkbox" name="c2"></p>
<p> software<input type= "checkbox" name="c3"></p>
</form>
</HTML>
----------------------
3. Radio program
html>
<head>
<title>
example forms2
</title>
</head>
<form
Method = "post">
sex = male<input type ="radio" name ="R1">
female<input type ="radio" name ="R1">
</form>
</HTML>
………………………………
4. Submit Program
<html>
<head>
<title>
example forms5
</title>
</head>
<form
Method = "post">
<p> your Choice </p>
<p> internet <input type = "checkbox" name = "c1"></p>
<p> hardware <input type = "checkbox" name = "c2"></p>
<p> software <input type = "checkbox" name = "c3"></p>

……………………………….
6. Rest Program
<html>
<head>
<title>
example forms6
</title>
</head>
<form
Method = "post">
<p> your Choice </p>
<p> internet <input type = "checkbox" name = "c1"></p>
<p> hardware <input type = "checkbox" name = "c2"></p>
<p> software <input type = "checkbox" name = "c3"></p>
<p><input type = "submit" name = "b1"></p>
<p><input type ="reset" name="b2">
</p>
</form>
</html>
Object Name
වමිපදී Object සදහා නම හදුනාගත හැක. එනම්
input type ="text" name = "T1"
input type ="submit " name="B1"
input type ="reset " name = "B2"
input type ="radio " checked name="R1"
Object Value
වමිපදී Object සදහා එවාවස ක්‍රියාකාරිත්වය තහරුරු කරන විධාානය වලස දැක්විය හැක
input type ="submit" Value = "submit"
input type ="reset" Value="reset"
input type ="checkbox" Value="On"
input type ="radio " Value="V1"
Size of the Item
වමය අදාළ item සදහා අගයේ ඇුනළත් ිහරීමට නැතවහත් ඒවාවස විශ්‍ාලත්වය වහෝ ප්‍රමාණය දැක්ීමම
සදහා භාවිතා වකවර්.
input type =" text" name = "T1" size = “20”
Program
html>
<head>
<title>
example forms
</title>
</head>

<form Method = "post">
1
<input type ="text" name ="t1" size= "20"><input type ="submit" name="b1"><input type
="reset"
value="reset" name ="b2"></p>
2
<input type ="checkbox" name ="c1" value="on" ><input type ="submit" value=
"submit"name="b1"><input type ="reset" value="reset" name ="b2"></p>
3 <input type ="Radio" name ="v1" checked name=" R1" ><input type ="submit"
value="submit"
name="b1"><input type ="reset" value="reset" name ="b2"></p>
</form>
</form>
</HTML>
………………………………………………
Select tag
………………………….
වම් යටවත් දක්නට ලවබන අවස්ථා ිහිපපයක් පහත දැක් වේ
Unordered list combo Box
List item Empty tag
Syntax :-
<select Name = “Name”>
<option> list item text
………………….
………………..
</select>
List :-
පහළට වැවටන ිනස්ේ එකක් සකස් ිහරිමට වමය වයදා ගැවේ.
<html>
<head>
<title>
example forms
</title>
</head>
<form Method = "post">
Time of work<select name ="time listt">
<option>7.00a.m to 9.00p.m

<option>9.00a.m to9.00p.m
</select>
</form>
</form>
</HTML>
………………………………..
Box
……………………
විස්ථාර සමුහයක් ඇුනල් ිහරිවම් දී වමය වැදගත් වේ. එවසේම එිප විශ්‍ාලත්වය ඔබට අවශ්‍ය පරිදී වවනස්
ිහරිමට ද හැිහයාව ඇත. වමිප දැක්වවන වැඩ සටහන නීරික්ෂණය ිහරිවමේ ඔබට ඒ පිළිබදව වැඩි
අවවබෝධාක් ලැබීය හැිහ වේ.
<html>
<head>
<title>
example HTML forms
</title>
</head>
<form>
COMMENTS:<BR>
<TEXTAREA ROWS = 5
COLS =30>
</TEXTAREA><BR>
<INPUT TYPE ="SUBMIT"
VALUE="SUBMIT">
<INPUT TYPE= "RESET"
VALUE="RESET">
</form>
</form>
</HTML>
........................................
TEXT AREA
වමිප දි ඔබට TEXT AREA වල ප්‍රමාණයේ වවනස් ිහරිමට අවකාශ්‍ ඇත. උදාහරණ වලස
ROWS/COLMS වවනස් කළ හැක.
Syntax :
<text Area
Row = number
Col = number
</text Area>
<input> Text or other data- input field
Type = type pf input entery field
Name= symbolic lime of field value
Value = defult content of text feid
Checked =button/Box checked by default
Size= Number of characters in text field
Max length= maximum characters accepted
……………………………………………………..
*****************************

ඉහත දි කරන සිසලු අභයස එකුන කර පහත දැක්වවන වවබ් පිටුව සකසේන.
1. Add heading in web page – “WECOME TO JOB WEB PAGE”
2. Add marquee with =775height =5 behavior= altnatebgcolor=”#0099cc”
3. Add Font color= red size=5
4. Heading Center in the web page

HTML Web design english & sinhala mix note

More Related Content

What's hot

Viewers also liked

Similar to HTML Web design english & sinhala mix note

Recently uploaded

HTML Web design english & sinhala mix note