Web Building Techniques

NUWAN BUWA · Oct 5, 2012

B
U
M
P

randitha chathumal · Oct 5, 2012

weerasinghe · Oct 5, 2012

KPZ said:
oyata hosting space ekak gewala ganna wenawa machan

මට දැනගන්න ඕන, Domain Name එකක් මිලට ගන්න තැන ඉදන්, අපි ම හදපු Web Page එකක් Host කරන හැටි.....
Web space එකක් මිලදී ගන්න හැටි,
Domain Name එක යි Web space එක Link කරන හැටි,

තේරෙන සිංහලෙන් තියනව නම් ගොඩක් හොදයි

weerasinghe · Oct 5, 2012

KPZ · Oct 5, 2012

weerasinghe said:
මට දැනගන්න ඕන, Domain Name එකක් මිලට ගන්න තැන ඉදන්, අපි ම හදපු Web Page එකක් Host කරන හැටි.....
Web space එකක් මිලදී ගන්න හැටි,
Domain Name එක යි Web space එක Link කරන හැටි,

තේරෙන සිංහලෙන් තියනව නම් ගොඩක් හොදයි

මුලින්ම මචන් මේ site එකට ගිහින් කැමති Hosting Site එකක් තෝරාගන්න.

http://thetop10bestwebhosting.com/uk

මම එක සැරයක් Host කලා මේ site එකේ.

මෙතන තියෙනවා මචන් video tutorials
https://my.justhost.com/cgi/help/tag/video_tutorial

කෝකටත් මචන් free host එකක host කරලා පුරුදු වෙයන්. 000webhost.com වගේ එකක් හොදයි මචන්.

ඒකෙ කරනකොට තේරෙනවා මචන්. try එකක් දීලා බලපන්.

අමාරුයි වගේනම් කියපන්කො
tute එකක් හදල දාන්නම්.

KPZ · Oct 6, 2012

HTML Hyperlinks (Links)

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 එකකට පිවිසීම සඳහා.

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>

මේ code එක type කරගෙන linktest.html කියල save කරගන්න.
ඊට පස්සේ web page එක open කරගෙන link එක click කරලා බලන්නකෝ

Mal Baba · Oct 6, 2012

නියමෙට වැඩේ යනවා
එළකිරි වැඩක්
මරුම තමයි

KPZ · Oct 6, 2012

වෙනත් page එකකට link කිරීමට target Attribute එක භාවිතයෙන්

අපිට යන්න ඕන web page එක open වෙන විදිහ සකස් කරගන්න පුළුවන් මේ target Attribute එක භාවිතයෙන්
මේ code එක type කරලා linktest2.html කියල save කරගෙන document එක open කරගෙන මේ එක එකේ ක්‍රියාකාරිත්වය කොහොමද කියල බලන්න.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Link Test Page 2</title>
</head>


<body>

<a href="http://www.elakiri.com/" target="_blank">Visit to elakiri from blank</a>
<br/>
<a href="http://www.elakiri.com/" target="_parent">Visit to elakiri from parent</a>
<br/>
<a href="http://www.elakiri.com/" target="_self">Visit to elakiri from self</a>
<br/>
<a href="http://www.elakiri.com/" target="_top">Visit to elakiri from top</a>
<br/>
<a href="http://www.elakiri.com/" target="new">Visit to elakiri from new</a>

</body>
</html>

මේකේ <br /> කියල තියෙන්නේ අලුත් පේළියකට (new line) යන්න කියන එක. එහෙම නැත්තම් මේ link ඔක්කොම එකම පේළියකට එන්නේ. link ටික වෙන් කරගන්නයි මේ <br /> tag එක බාවිතා කලේ. link වලට විතරක් නෙවේ ඕනෑම තැනකදී පේලි වෙන් කරගන්න මේ <br /> tag පාවිච්චි කරන්න පුළුවන්.

පොඩ්ඩා · Oct 6, 2012

නියමයි

KPZ · Oct 6, 2012

පොඩ්ඩා;13575334 said:
නියමයි

nnccbb · Oct 6, 2012

Mal Baba said:
නියමෙට වැඩේ යනවා
එළකිරි වැඩක්
මරුම තමයි

KPZ · Oct 6, 2012

2.එකම page එකේ වෙනත් section එකකට පිවිසීම සඳහා.

මේකේ ක්‍රියාකාරිත්වය බලාගන්න නම් page එක ටිකක් දිගට තියෙන්න ඕන.
ඉතින් code එක දිග කෙරුවා. මේ code එක type කරගෙන linktest3.html කියලා save කරගන්න. පස්සේ web document එක open කරගන්න. ඊට පස්සේ web page එකේ පහලම ඇති අපි හදාගත්ත link එක. ඒක කලාම Useful Tips Section එකට focus වෙනවා. බලන්න එහෙම වෙනවද කියලා.

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>

<a name="tips"><h3> Useful Tips Section</h3></a>
මේ කොටසින් කරන්නෙ <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" කියන කොටසට යන්න කියන එකයි.

මේ ටික තේරුනේ නැත්තම් කියන්න. :sorry:

SANJEE · Oct 6, 2012

gindara...... hemotama wedagath wewi mona widiyakata hari....... digatama karagena yanna one harida machan.......

Fire_Bird · Oct 6, 2012

KPZ said:

mama meka more than 3 years use karala thiyenawa. pattama service eka

KPZ · Oct 6, 2012

SANJEE said:
gindara...... hemotama wedagath wewi mona widiyakata hari....... digatama karagena yanna one harida machan.......

Fire_Bird said:
mama meka more than 3 years use karala thiyenawa. pattama service eka

~Titi~ · Oct 6, 2012

Malinga · Oct 6, 2012

අපේ එළකිරි එකේ නොදන්න අය වෙනුවෙන් මේ වගේ ත්‍රේඩ් එකක දිගටම පවත්වාගෙන යන එක වැදගත්. ඒ වගේ ම මේ වෙනුවෙන් වන මහන්සියටත් ස්තූතියි.

kandya · Oct 6, 2012

sameerasadaru · Oct 6, 2012

mysql

Mal Baba · Oct 6, 2012

web design

Web Building Techniques

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Member

Well-known member

Similar threads