Download - HTML Web design english & sinhala mix note

Transcript
Page 1: 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 DocumentEvery 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 TagsTo 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 bracketsMark Up Tags

<HTML>&</HTML> : Contains the whole of the HTML document. This elementtells 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.

Page 2: HTML Web design english & sinhala mix note

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> TagThe <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< BODYBgcolor = “color”Text =”color”Link =”color”Background =”Filename.extension”>

………………………………..document text</BODY>

Body Tag AttributesI. Bgcolor = background color

Page 3: HTML Web design english & sinhala mix note

II. Text = Text colorIII. Background =background picture fileIV. 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>

ColorThere are two type color codei. Standard Color

There are using 16 color codeBlack Maroon Green blueSliver red lime tealGray purple olive navyWhite fuchsia yellow aqua

Page 4: HTML Web design english & sinhala mix note

ii. Hexadecimal There are using RGB color code

Red, Green, Blue, යන ප්‍රධාන වර්ණ තුනටA –F දක්වා අක්ෂර වේදක ද0 – 9 දක්වා ඉලක්කම් වේදක දHexadecimal වර්ණ 256 ක පමන වර්ණ නිපදවයි.

ඒ අනුව.Red #FF0000Green #00FF00BLUE #0000FFWHITE #FFFFFFBlack #000000Red green blue00 00 00 BlackFF 00 00 Bright Red00 FF 00 BRIGHT GREEN80 00 00 Dark Red00 80 00 Dark Green00 00 80 Dark BlueFf ff 00 bight yellow80 80 00 BrownFF 00 FF Magenta80 80 80 Gray

Program

<Html><body bgcolor = “#FF00FF”TEXT = “#ggff00”>Welcome my web</BODY></HTML>

<Head><Title> TagDefines 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 pageis 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>

Page 5: HTML Web design english & sinhala mix note

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> -tagThis 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 productsMore program information is available in a README file Loacted in the same directory as the software.

</BODY></HTML>

Page 6: HTML Web design english & sinhala mix note

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 same directory as the software.

</BODY></HTML>

------------------------------------------------------

`<HR> tag

වේ�බ් පිටුවල ඉරි ඇදීම සදහා වේමම ටැග් එක වේයාදා ගැවේ�. වේම් සදහා ක්‍රම කිහිපයක් ම <HR> tag වේයාදා ගැවේ�.

<HTML><HEAD>

<TITLE>EXAMPLE FOR HRTAg

Page 7: HTML Web design english & sinhala mix note

</TITLE></HEAD><BODY>

<center> Welcome </center><br><HR>My first web site

</BODY></HTML>

------------------------------------<HR>tag එක සදහා වේයවේදන වේයදුම් කිහිපයක් විස්ථර පහත දැක්වේ�1. Size2. Width3. Align4. No shade5. Color

1.Sizeවේමහිදී එක් එක් ප්‍රමාන වලි� යුක්ත තිරැ සකස් කල හැකිය.<HTML>

<HEAD><TITLE>EXAMPLE FOR HRTAg</TITLE>

</HEAD><BODY>

<center> Welcome </center><br><HRSize = “1”><HRSize = “5”><HRSize = “10”>My first web site<HRSize = “20”><HRSize = “50%”>

</BODY></HTML>---------------------------------------------------

Page 8: HTML Web design english & sinhala mix note

2. widthවේයාදනු ලබන ඉවේර් දිග තිරණය කිරිමට වේම මගි� හැකි වේ�.

<HTML><HEAD>

<TITLE>EXAMPLE FOR HRTAg</TITLE>

</HEAD><BODY>

<center> Welcome </center><br><HRWidth = “10%”><HRWidth = “20%”><HRWidth = “30%”>

</BODY></HTML>----------------------------------------------------

3.Align

<HTML><HEAD>

<TITLE>EXAMPLE FOR HRTAg</TITLE>

</HEAD><BODY>

<center> Welcome </center><br><HRWidth = “10%”><HRWidth = “20%” align= “left”><HRWidth = “30%”align= “right”>

</BODY></HTML>

----------------------------------------------------------5. Noshade

<HTML><HEAD>

<TITLE>EXAMPLE FOR HRTAg</TITLE></HEAD><BODY>

<center> Welcome </center><br><HR Size = “1”noshade><HR Size = “5”noshade><HR Size = “10”noshade>

My first web site</BODY></HTML>--------------------------------------

Page 9: HTML Web design english & sinhala mix note

5.color<HTML><HEAD><TITLE>EXAMPLE FOR HRTAg</TITLE></HEAD><BODY><center> Welcome </center><br><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 tag2. Text style tag3. 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 same directory as the software.

</BODY></HTML>

------------------------------------------------

Page 10: HTML Web design english & sinhala mix note

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 emphasis7. <BIG> Enlarge text8. <small> small text9. <S> strike out10. <blink> blink text (using Firefox Browser ) 11. <marquee> horizontal scrolling text12. <sus> superscript13. <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

Page 11: HTML Web design english & sinhala mix note

="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>

Page 12: HTML Web design english & sinhala mix note

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>

Page 13: HTML Web design english & sinhala mix note

<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>

Page 14: HTML Web design english & sinhala mix note

<marquee behavior="alternate"><marquee width="200">Reoccuring Marquee</marquee></marquee>

<marquee scrollamount="5" width="40">&lt;&lt;&lt;</marquee>Opposite Direction Marquees<marquee scrollamount="5" direction="right"

width="40">&gt;&gt;&gt;</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.

Page 15: HTML Web design english & sinhala mix note

<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 needed2. 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

HeadingHTML 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

Display Output on screen

Page 16: HTML Web design english & sinhala mix note

of 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><H2> Heading Level 2 </H2><H3> Heading Level 3 </H3><H4> Heading Level 4</H4><H5> Heading Level 5 </H5><H6> Heading Level 6 </H6>

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>-------------------------------------

Page 17: HTML Web design english & sinhala mix note

3. List Tagමේ� යටමේ� ඔබට ප්‍රධාන වශමේයන් ටැග් වර්ග හතරක් හදුනාගත හැකිය. මේ�බ් පිටු වල අඩංගු විවිධ කරැණු සදහා මේ)) ලිස්ට් ටැග් භාවිතා මේ�. ඊට අ)තරව මේ� යටමේ� භාවිතාවන List Type, List items වශමේයන් මේකාටස් මේදකකි.

List Typeමේ�වාමේ/ වර්ග තුනකි.DiskCircleSquare

List itemsමේ� List Items වල අතුරැ මේකාටසක මේලස නැතමේහා� පහත දැක්මේවන් ලිස්ට් ටැග්වල ඇතුල� අනු ටැග් එකක් මේලස දැක්විය හැකිය.List Tag1. Unordered List Tag2. Ordered List Tag3. DIR List Tag4. Menu List Tag5. Definition List Tag6. 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”>

Page 18: HTML Web design english & sinhala mix note

<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>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>

<UL Type = “circle”>

<Li> apple</Li><Li> bananas</Li><LI>Grapefruit</Li></UL><H3><font color= “green”><center>Create By MahndaGamage</font></h3>

</Body></Html>------------------------------------------------

square Program<HTML>

<HEAD><TITLE>EXAMPLE FOR Unordered TAG</TITLE>>

</HEAD><BODY>

<H1>

Page 19: HTML Web design english & sinhala mix note

<font Face = “Arial”><center>Welcome</font></center><H1><br><h2><font color=”red”>My First Web Page <br></font></h2></center>

<UL Type = “square”>

<Li> apple</Li><Li> bananas</Li><LI>Grapefruit</Li></UL><H3><font color= “green”><center>Create By MahndaGamage</font></h3>

</Body></Html>--------------------------------<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>

<UL Type = “disk”>

<Li> apple</Li></UL><UL Type = “square”>

<Li> bananas</Li><UL Type = “square”>

<LI>Grapefruit</Li></UL>

</UL><H3><font color= “green”><center>Create By MahndaGamage</font></h3>

</Body></Html>

Page 20: HTML Web design english & sinhala mix note

Example:- circle/squreprogram

<HEAD><TITLE>EXAMPLE FOR Unordered TAG</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 numeralType = “A” -Upper aliphaticType = “a” -lower aliphaticType = “” - Upper case RomanType= “” -Lower case nunmerals

Page 21: HTML Web design english & sinhala mix note

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>

Page 22: HTML Web design english & sinhala mix note

</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>------------------------

Page 23: HTML Web design english & sinhala mix note

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>Myfirst computer web page <br></font></center></h2.

<Menu><LI> COMPUTER</LI><LI>INTERNET </LI><LI> EXPLORA</LI>

</Menu></BODY></HTML>-------------------------5. Definition tagයමක් සම්බ�ධව වැඩිදුර විස්ථර කිරිම සදහා DL,DT,DD භාවිතා කරයි. එක එක් වේයද�වේ� එකක් අවේනක තුල ඇති වේයදුමක් වේලස ය.්F Program

<HEAD><TITLE>EXAMPLE FOR director list TAG</TITLE></HEAD><BODY><h1><font face= Arial><center>Welcome<br></font></h1><h2><font color=red>Myfirst computer web page <br>

Page 24: HTML Web design english & sinhala mix note

</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>Myfirst computer web page <br></font></center></h2>

</BODY></HTML>…………………..Image Tagවේවබ් පිටුකට රූප එකතු කරන විට දී ඒවා වේකාටස් 3 කට වේව� කර හැකි අතර, එනම් image, Picture, Graphics වශවේයනි. එනම් GIF and JPEG වේලස ය.

Page 25: HTML Web design english & sinhala mix note

Syntax<img src = “photo files”>

Picture එක හැදි�විම සදහාALT = “Text”නමුත් Picture එක අතුලත දැකිය හැකිය.Width = numberHeight= numberBorder =number

Picture එකහි , පලල,උස වේබාඩරය දැකිය හැක.ALIGN = “LEFT/RIGHT/TOP/BOTOM/MIDDLEPicture එකපිහිටන ස්ථානය.

<HEAD><TITLE>EXAMPLE FOR පි�තුර TAG</TITLE></HEAD><BODY><CENTER><address>Technical college<br>Maddawatha junction<br>Matara<br></address></CENTER><h1>

<font face= Arial><center>Welcome<br>

</font></h1><h2><font color=red>Myfirst computer web page <br></font></center></h2><IMG SRC= “ AA.JPEG” ALT= “TEC” WIDTH= “50” HEIGHT= ‘30” ALIGN= “MIDDLE”>

</BODY></HTML>

Page 26: HTML Web design english & sinhala mix note

Table TagTable නිර්මාණය සදහා ටැග් භාවිතා කරනු ලබයි. ප්‍රධාන වශවේය� ටැග් වර්ග කිහිපයක් ඇත.එනම් <TR> ,<TH>,හා <TD> යන ටැග් වර්ග කිහපයකි. වේමයට අරම්භය හා අවසානයක් ද ඇත.Syntax<table>

<TR><TH>……………..</TH><TH>……………..</TH>

</TR></TABLE>

Tr- table rowTh-table headerTd- table data

Program<HEAD><TITLE>EXAMPLE FOR Table TAG</TITLE></HEAD><BODY><h1><CENTER><address>Technical college<br>Maddawatha junction<br>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>…………………………කාර්මික විද්‍යාලවේO සිසු� වේග් පාඨමාල වේල්ඛණ සකසමු

Page 27: HTML Web design english & sinhala mix note

<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= center>A002</td><td align= left>A. prasnna</td><td align= center>ICTT</td>

</tr><Tr>

<td align= center>A003</td><td align= left>s.Viraj</td><td align= center>NCE</td>

</tr></table></body></html>

………………………………………………Syntax of <Table>

<TableBorder = valueAlign = “left/Right/cener”Width = value/percentBgcolor = “color / “#hexadecimal code”

Border color = “color/“#hexadecimal code”Background = ‘file”>

1. Borderවේමමගින වේRබල් එකක වේබෝඩර්වේO විශාලත්වය හා වර්ණය වේවනස් කිරිවේම් හැකියව ඇත.

Page 28: HTML Web design english & sinhala mix note

<table border =5Bordercolor= “9900hh”>

…………………………Program

<body><h3>Student Registration for courses Table</h3><table border =5

Bordercolor= "9900hh">

<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= center>A002</td><td align= left>A. prasnna</td><td align= center>ICTT</td>

</tr><Tr>

<td align= center>A003</td><td align= left>s.Viraj</td><td align= center>NCE</td>

</tr></table></body></html>

…………………………2. Align

වගුව වේ�බ් පිටුවේ� පැවැත්වේව� ස්ථානය තිරණය කල හැකිය.<table border =5

Align= “right”>…………………………….<body><h3>Student Registration for courses Table</h3><table border =5

Bordercolor= "9900hh">

<TR><th>st-No</th><th>St-Name</th><th>Course name</th></tr>

<Tr>

Page 29: HTML Web design english & sinhala mix note

<td align= center>A001</td><td align= left>A.W Gamini</td><td align= center>welding</td>

</tr><Tr>

<td align= center>A002</td><td align= left>A. prasnna</td><td align= center>ICTT</td>

</tr><Tr>

<td align= center>A003</td><td align= left>s.Viraj</td><td align= center>NCE</td>

</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><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= center>A002</td><td align= left>A. prasnna</td><td align= center>ICTT</td>

</tr><Tr>

<td align= center>A003</td><td align= left>s.Viraj</td><td align= center>NCE</td>

</tr></table></body></html>…………………………….

4. Bgcolor

Page 30: HTML Web design english & sinhala mix note

Table එවේක් වර්ණ ගැ�විම කිරිමට වේමම විධානය වේයාදා ගැවේ�.

<Table border = 5bgcolor= “blue”>

…………………………………5. background

Table එවේක්background picture ගැ�විම කිරිමට වේමම විධානය වේයාදා ගැවේ�.

<Table border = 5 BACKGROUND= “12.JPG”>

…………………………………………………..6. Valign

වේමය ද වේRබල් එක වේවබ් පිටුවක තිබිය යුතු ස්ථානය දැක් විමට භාවිතා වේකවේර්.

Table border = 5Valign= “Top/Bottom/Middle”>

………………………………………………………..7. Merging Cells

1.ඹබට අවශ්‍ය පරිදි cell සංඛ්‍යාව වේවනස් කරමි� හැසිර විමට වේමය භාවිතා කරයි.

<th rowspan=2> index</th>2.columns වලට ආදල යම් වේවනස්කම් කිරිමට,සංඛ්‍යාව වේවනස් කරමි� columnsසංඛ්‍යාවඅදාල වගුව නිර්මාණය කල හැකිය.

<th colspan=2> index</th>

************<body>

<table border =5Bordercolor= "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><th>Course name</th></tr></bgcolor>

<Tr><td align= center>A001</td><td align= left>A.W Gamini</td><td align= center>welding</td>

</tr><Tr>

<td align= center>A002</td><td align= left>A. prasnna</td><td align= center>ICTT</td>

</tr>

Page 31: HTML Web design english & sinhala mix note

<Tr><td align= center>A003</td><td align= left>s.Viraj</td><td align= center>NCE</td>

</tr></table></body></html>

………………………………………………………………………….LINKSනිර්මාණය කරනු ලබන වේවබ් පිටුවකට අවශ්‍ය වේකවේරන වේවනත් සම්බ�ධතා සදහා වේදනු ලබන විධානයක මගි� වේනාවේයක් දූ සම්බ�ධ කල හැකිය. වේම්වා වේකාටස් වේදකකට වේබදිය හැකිය. වේම් සදහා <a> Anchor Tag භා�තා වේ�.

1. Internal Document Interface2. External Document Interface

Linking An image

<imgsrc= “12.jpg”>

Image position1. <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>...........................

Page 32: HTML Web design english & sinhala mix note

පි�තුරයක් හරහා වේවබ් පිටු සම්බ�ධ කරමු

<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">

<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

Page 33: HTML Web design english & sinhala mix note

වේමය දික් අතට වේවබ් පිටුවක් සිරස් ආකරයට තිරැ වේව� කිරිමක දී වේයාදා ගනු ලබ�වේ� වේමම වේයදුමය. ඒ අනුව සියයට ගණතක් වේලස එම වේව� කිරිම කළ හැක <FRAMESET ROWS ="50%,75%">

එවේස් වේව� කරගත් අවකාශයට නිර්මාණය කරන ලද වේවබ් පිටු ඇතුලත් කල හැකිය.<frame SRC = “filename.ext:”>

................(1)<html><head><title>example for Frame</title></head><FRAMESET ROWS ="50%,75%"><FRAME SRC= "EX1.HTML"><FRAME SRC= "EX4 TABLE.HTML"></FRAMESET>

</html>‘’’’’’’’’’’’’’’’’’’’’’’’’’(2)<html><head><title>example for Frame</title></head><FRAMESET ROWS ="50%,50%"><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>

A

Page 34: HTML Web design english & sinhala mix note

<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">දැ� B වේකාටවේස් ඇති ෆයිල් එවේක් ලීනක් C එකට පැමීණීමට නම් “SF”වේලස name command එවේක් නම් කල යුතුය. <frame SRC="ex6 aherf4.html"name="sf">

</frameset></HTML>

එවේස් නම් කල ෆයිල් එක තිවේබ්න ස්ථානවේO file එක open කර <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><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 වේකාටවේස් දර්ශණය වේ�.

වේලස target="sf" දැමිය යුතු වේ�,

Page 35: HTML Web design english & sinhala mix note

..........................................

<html><head><title>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>

Page 36: HTML Web design english & sinhala mix note

……………………………………..FORMS…………………….

වේම් සදහා ආරම්භක හා අවසාන ටැග් එකක් ද ඇත.FORM TAG වලට ආදල වන ටැග් වර්ග කිහිපයක් ඇත.Syntax :-<FORM

Action =ULRMethod=methodText 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>

Page 37: HTML Web design english & sinhala mix note

<formMethod = "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>

<formMethod = "post">

sex = male<input type ="radio" name ="R1">female<input type ="radio" name ="R1">

Page 38: HTML Web design english & sinhala mix note

</form></HTML>………………………………

4. Submit Program

<html><head><title>

example forms5</title></head>

<formMethod = "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><input type = "submit" name = "b1"></p></form></HTML>

Page 39: HTML Web design english & sinhala mix note

……………………………….6. Rest Program

<html><head><title>

example forms6</title></head>

<formMethod = "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 සදහා එවාවේO කි්‍රයාකාරිත්වය තහවුරැ කරන විධානය වේලස දැක්විය හැක

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 සදහා අගය� ඇතුළත් කිරීමට නැතවේහත් ඒවාවේO විශාලත්වය වේහෝ ප්‍රමාණය දැක්වීම සදහා භාවිතා වේකවේර්.

input type =" text" name = "T1" size = “20”Programhtml><head><title>

example forms

Page 40: HTML Web design english & sinhala mix note

</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 BoxList item Empty tag

Syntax :-<select Name = “Name”><option> list item text<option> list item text<option> list item text<option> list item text………………….………………..</select>

List :-පහළට වැවේටන ලිස්R එකක් සකස් කිරිමට වේමය වේයදා ගැවේ�.

<html><head><title>

example forms </title></head>

<form Method = "post">Time of work<select name ="time listt">

Page 41: HTML Web design english & sinhala mix note

<option>7.00a.m to 9.00p.m<option>9.00a.m to 9.00p.m<option>9.00a.m to9.00p.m<option>5.00a.m to 4.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 = numberCol = number</text Area>

<input> Text or other data- input fieldType = type pf input entery fieldName= symbolic lime of field valueValue = defult content of text feidChecked =button/Box checked by defaultSize= Number of characters in text fieldMax length= maximum characters accepted

Page 42: HTML Web design english & sinhala mix note

……………………………………………………..*****************************ඉහත දි කරන සිO ලු අභ්‍යස එකතු කර පහත දැක්වේවන වේවබ් පිටුව සකස�න.

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=54. Heading Center in the web page