Latest ads
-
Power Lifting Lever Belt- SkullVamp
- Updated:
-
port.lk Domain for sale
- Lankan-Tech
- Updated:
-
Colombo Kaduwela - Two Storey House for Sale- dilrasan
- Updated:
-
Wechat qr verification
- Pawan2005
- Updated:
-
🚀 GOOGLE AI PRO 18 MONTHS ACTIVATION 🚀- sayuru bandara
- Updated:
Web Building Techniques
- Thread starter KPZ
- Start date
Class එකක් කියන්නේ අපි HTML Element එක අපිට ඕන class name එකකින් define කරපුවහම. එකම class එකේ elements "." (dot)එකෙන් identify කරන්න පුළුවං.
http://www.elakiri.com/forum/showthread.php?t=1491206&page=13
group කරනවා කියන්නේ elements දෙකක් හරි ඊට වැඩි ගානක් හරි එක පාර සිලෙක්ට් කරන එකට. ඒකට Class or Id selectors තියෙන්නම ඕන නැහැ.
h1,h2,h3,p
Last edited:
shik post ekak liyagena yaddi ctrl+w press una. hetama dannam sql post ekak .
elaazz macha............
shik post ekak liyagena yaddi ctrl+w press una
machan uba pawichchi karana browser eka mokakda?
HTML Hyperlinks (Links)
3.වෙනත් page එකක නිශ්චිත section එකකට පිවිසීම සඳහා.
අපි link හදපු හැටි මතක ඇතිනේ...
අද බලමු එක් page එකක සිට තවත් page එකක නිශ්චිත section එකකට link කරගන්න විදිහ.
ඒක කරගන්නෙ මෙහෙමයි...
<a href="යාමට අවශ්ය web page එකේ link එක#section එකේ නම">
උදා :-
සම්පුර්ණ code එක මේ විදිහට ලියාගන්න පුළුවන්
මේ code එකට අදාල web page එකේ ක්රියාකාරිත්වය බලාගැනීමට.
ඒ page එකේ link එක click කලාම address bar එකේ link එක වෙනස් වෙන හැටිත් බලන්න
3.වෙනත් page එකක නිශ්චිත section එකකට පිවිසීම සඳහා.
අපි link හදපු හැටි මතක ඇතිනේ...
අද බලමු එක් page එකක සිට තවත් page එකක නිශ්චිත section එකකට link කරගන්න විදිහ.
ඒක කරගන්නෙ මෙහෙමයි...
<a href="යාමට අවශ්ය web page එකේ link එක#section එකේ නම">
උදා :-
HTML:
To read more go to <a href="linktest3.html#sec3">Section 3 in linktest3</a> pageසම්පුර්ණ code එක මේ විදිහට ලියාගන්න පුළුවන්
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Link Test Page 4</title>
</head>
<body>
<h1>Jump to a section in another page</h1>
<p>To read more go to <a href="linktest3.html#sec3">Section 3 in linktest3</a> page</p>
</body>
</html>
මේ code එකට අදාල web page එකේ ක්රියාකාරිත්වය බලාගැනීමට.
ඒ page එකේ link එක click කලාම address bar එකේ link එක වෙනස් වෙන හැටිත් බලන්න
Last edited:
Contents
HTML Fundamentals
HTML Elements
HTML Symbols
HTML5 Information
Web Page එකක් හදාගැනීම
මුලින්ම Notepad එක open කරලා මේ code එක type කරගන්න මේ තියෙන විදිහටම. HTML වල < > දෙක මැද ලියන ඒවට කියන්නේ Tags කියලා. tags හැමතිස්සෙම simple වලින් ලියන්න පුරුදු වෙන්න. Capital වලින් ලිව්වත් ප්රශ්නයක් නැහැ. ඒත් simple වලින් ලියල පුරුදු වෙන්න.
අපේ html file එක html tags වලින් තමයි නිර්මාණය වෙන්නේ.
<> ආරම්භක tag එකHTML:<html> <head> <title>My First Page</title> </head> <body> this is my web page. </body> </html>
</> අවසන් tag එක
code ලියද්දි මේ ආරම්භක tag එක සහ අවසන් tag එක කියන දෙකම දාන්න මතක තියාගන්න.
<html></html> කියන tab එකෙන් තමයි browser software එක අදුර ගන්නේ මේ file එකේ html coding ආරම්භ වෙන තැන සහ ඉවර වෙන තැන. මේ tag 2 ඇතුලේ තමයි සියලුම coding ටික ලියවෙන්නේ.
<head></head> ඇතුලේ තමයි අපේ අනිකුත් file ජාති (CSS , JavaScript) වගේ දේවල් include කරන්නෙ, ඒ වගේම <title></title> tag , <meta></meta> tag include වෙන්නෙත් මෙතනට තමයි.
<title></title> මේ tag 2 අතර ලියන දේවල් අපේ page එකේ title එක විදිහට වැඩ කරනවා.
<body></body> මේ tag 2 අතර ලියන දේවල් තමයි web page එකේදී අපිට display වෙන්නේ.
ඊට පස්සේ save කරගන්න මේ විදිහට.
රුපයේ 1 කියලා පෙන්නලා තියෙනවා වගේ file name එකේ අගට .html extension එක දෙන්න.
2 කියලා තියෙන තැනට All Files කියන එක දීල save කරගන්න.
තමන්ගේ ඔක්කොම HTML file ටික එකම තැනකට save කරගත්තනම් තමයි හොද.
මේ තියෙන්නේ අපේ file එක save කරගත්තම ලැබෙන file එක.
උඩින් තියෙන්නේ අපේ file එක, එක එක browser වලින් open කලාම පෙනෙන විදිහ.
HTML
heading tags Paragraph tags වැඩ කරන හැටි. (<h>,<p>)
<h> tags size 6ක් තියෙනවා කියල කලින් කිව්වනේ. ඔන්න ඒ 6ම එකම page එකේ දාල බලමු. ඒ වගේම අපේ page එකට paragraph add කරගන්න හැටිත් බලමු.
මේ විදිහට අපේ page එකට headings යොදාගන්න පුළුවන්.
page එකට paragraph යොදා ගන්න <p> </p> කියන tag යුගල බාවිතා කරන්න පුළුවන්.
සම්පුර්ණ code එක.
ඒ code එක ලියාගෙන document එක testpage1.html කියල save කරගන්න. ඊට පස්සේ ඕනෑම browser එකකින් html file එක open කරගන්න. එතකොට මේ විදිහට display වෙයි.HTML:<!DOCTYPE html> <html> <head> <title>My testing page</title> <head> <body> <h1>My Heading with H1 Tag</h1> <h2>My Heading with H2 Tag</h2> <h3>My Heading with H3 Tag</h3> <h4>My Heading with H4 Tag</h4> <h5>My Heading with H5 Tag</h5> <h6>My Heading with H6 Tag</h6> <p>This is paragraph one. I love web designing! This is paragraph one. I love web designing! This is paragraph one. I love web designing! This is paragraph one. I love web designing! This is paragraph one. I love web designing! This is paragraph one. I love web designing! </p> <p> This is paragraph Two. I love web designing for second time! This is paragraph Two. I love web designing for second time! This is paragraph Two. I love web designing for second time! This is paragraph Two. I love web designing for second time! This is paragraph Two. I love web designing for second time! This is paragraph Two. I love web designing for second time! </p><p>This is third paragraph. And I'm KPZ from elakiri.com. We all are elakiri members.</p> </body </html>
ඔයාලට පේනවා ඇති මම <p> tag දෙකක් එක ලඟ දාල තියෙනවා.
ඒ උනත් browser එකෙන් Paragraph 2ක් විදිහට වෙන් කරලා පෙන්නනවා.
ඔයාලත් try කරලා බලන්න.
HTML Hyperlinks (Links) - අද අපි link කරන හැටි ඉගනගමු.
Hyperlink එහ්මත් නැත්තම් link එකක් සඳහා වචනයක්, වචන කිහිපයක්,හෝ රුපයක් යොදාගන්න පුළුවන්. අලුත් web page එකකට යන්න හෝ දැනට ඉන්න page එකේ වෙනත් section එකකට යන්න හෝ page එකක කිසියම් නිශ්චිත section එකකට යන්න මේ link යොදාගන්න පුළුවන්.
Link එකක් උඩට mouse pointer එක ගෙනාවම arrow එකා පුංචි අතක රූපයකට වෙනස් වෙනවා.
HTML වලදී link එකක් හදාගන්න අපි <a> tag යොදා ගන්නවා.
අපිට <a> tags යොදාගන්න පුළුවන් ක්රම 3ක් තියෙනව. ඒවා,
- වෙනත් page එකකට පිවිසීම සඳහා.
- එකම page එකේ වෙනත් section එකකට පිවිසීම සඳහා.
- වෙනත් page එකක නිශ්චිත section එකකට පිවිසීම සඳහා.
අපි උදාහරණ ටිකක් බලමු.
1. වෙනත් page එකකට පිවිසීම සඳහා.
මේ code එක type කරගෙන linktest.html කියල save කරගන්න.HTML:<!DOCTYPE html> <html> <head> <title>Link Test Page</title> </head> <body> <a href="http://www.elakiri.com/">This Link goes to elakiri</a> </body> </html>
ඊට පස්සේ web page එක open කරගෙන link එක click කරලා බලන්නකෝ
HTML
2.එකම page එකේ වෙනත් section එකකට පිවිසීම සඳහා.
මේකේ ක්රියාකාරිත්වය බලාගන්න නම් page එක ටිකක් දිගට තියෙන්න ඕන.
ඉතින් code එක දිග කෙරුවා. මේ code එක type කරගෙන linktest3.html කියලා save කරගන්න. පස්සේ web document එක open කරගන්න. ඊට පස්සේ web page එකේ පහලම ඇති අපි හදාගත්ත link එක. ඒක කලාම Useful Tips Section එකට focus වෙනවා. බලන්න එහෙම වෙනවද කියලා.
<a name="tips"><h3> Useful Tips Section</h3></a>HTML:<!DOCTYPE html> <html> <head> <title>Link Test Page 3</title> </head> <body> <h3> Test Section 1</h3> <p>This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful </p> <a name="tips"><h3> Useful Tips Section</h3></a> <p> this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tipthis is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip this is a useful tip </p> <h3> Test Section 2</h3> <p>This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful </p> <h3> Test Section 3</h3> <p>This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful section This is not a useful section This is not a useful section This is not a useful section This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful This is not a useful </p> <a href="#tips">See Useful Tips Section</a> </body> </html>
මේ කොටසින් කරන්නෙ <h3> Useful Tips Section</h3> කියන කොටසට name එකක් දෙනවා tips කියලා. ඒක කලේ <a name="tips">..........</a> කියන කොටසින්.
<a href="#tips">See Useful Tips Section</a>
මේ කොටසින් වෙන්නේ See Useful Tips Section කියන link එක click කලාම name="tips" කියන කොටසට යන්න කියන එකයි.
මේ ටික තේරුනේ නැත්තම් කියන්න.
HTML
machan mata denaganna puluwanda WP site ekak protect karaganna hodama widiya?? recaptcha ekath enable karala thiyenne but spammersla hemadama register wenawa 
machan mata denaganna puluwanda WP site ekak protect karaganna hodama widiya?? recaptcha ekath enable karala thiyenne but spammersla hemadama register wenawa
Mizillagen ahapan machan
mama uta message ekak yawwa
u ubata kiyai
Similar threads
