Thursday, 8 November 2018

Basic Web ගැන අද ඉගෙන ගමු

අපි අන්තර්ජාලයේ දකින web අඩවි වලට තොරතුරු ඇතුලත් කිරීමට පොදු භාෂාවක් අවශ්‍ය වේ .HTML යනු එවැනි භාෂාවකි .එහි තේරුම Hyper Text Markup Language වේ .එය 1989 දී රොබට් කැලියු විසින් හදුන්ව දෙන ලදී . මෙහි ඇති විශේෂත්වය වන්නේ web site සෑදීමට special software අවශ්‍ය නොවීමයි .ඒ සදහා note pad වැනි editor programs ප්‍රමාණවත් වේ. HTML ලියන විශේෂ ක්‍රමවේදයක් ඇත .පහතින් දැක්වෙන්නේ එම ආකෘතියයි .

<!DOCTYPE html>
<html>
<head>
<title> Document title</title>
</head>
<body>
My Name is Ashini
</body>
</html>

මෙහි එන <html > , <head >, <title > , <body > යනු open tags වන අතර </title > , </head > , </body > , </html > යනු close tabs වේ. මෙහි තැබිලි පාටින් පෙන්වන කොටස් අවශ්‍යතාව මත වෙනස් කල හැක .මෙහි title එකෙහි ලියනු ලබන්නේ අප කරන ලබන මාතෘකාව වන අතර body එක තුල content එක ලියනු ලබයි .ඊට අමතරව html headings ගැන කතා කරන විට headings 6 ක් ඇත .<h1> මගින් ප්‍රධානතම headings දක්වන අතර <h 6> මගින් least important headings දක්වයි .

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

html file එකක් save කිරීමේදී .html හෝ .htm ලෙස save කල යුතු වේ 
  • <!DOCTYPE html> මගින් කියවෙන්නේ document එක HTML5 version වන බවයි .
  • <html> ටැග් එක යනු HTML page එකේ root element එකයි .
  • <head> element එකෙන් document එකේ ඇත meta information නිරුපනය කරයි .
  • <title> ටැග් එක වෙබ් සයිට් එකේ තොරතුරු වලට අදාල title එක දක්වයි .
  • <body> එලිමෙන්ට් එක අපට web site එකේ පේන් න තියන details දක්වයි .
  • <h1> යනු විශාල heading එක නිරුපනය කරන tag එකයි .
  • <p> paragraph නිරුපනය කරනුයේ මෙම ටැග්‍ එක මගිනි .
සාදන වෙබ් පිටුවක් තවත් පිටුවකට සම්බන්ද වන්නේ Hyperlinks හරහාය. මේවා ආකාර 3 කි .
  1. External links
  2. Internal links
  3. Navigation links

external link අපගේ වෙබ් අඩවියේ සිට වෙනත් වෙබ් අඩවියකට පිවිසීමට බාවිතා කරයි .මෙය <body > </body > අතර බවිත කරයි .
<a href =http://www.facebook.com> Facebook </a> මෙම link එක click කල විට FB යා හැක.

<html >
<head >
<title >document title </title >
</head >
<body >
<a href =http://www.facebook.com> Facebook </a>
</body >
</html >
Internal links මගින් අපගේම වෙබ් අඩවියේ ඇති වෙනත් වෙබ් පිටුවකට සම්බන්ද විය හැක.

<body >
<nav >
<a href =home .html > Home </a >i
<a href =about .html >about </a >i
<a href =service .html >service </a >i
</body >

Navigation link යනු අපගේම වෙබ් අඩවියේම ඇති වෙනත් web පිටුවකට ඉක්මනින් සම්බන්ද විය හැකි වෙබ් link  එකකි.
<nav>
      <a href=Home.html>  Home </a> |
      <a href=About.html>  About </a> |
      <a href=Service.html>  Service </a> |
</nav>
වෙබ් පිටුවකට images යෙදීම .
මේ සදහා <img >නම් tag එක හා src නම් attribute එක භාවිත කරයි .
image එකට boarder එකක් දැමීමට
<img src ="asd.jpg"border=5/ මෙහි 5 අගය වෙනස් කිරීමෙන් පින්තුරයේ ප්‍රමාණය වෙනස් කල හැක .
image tips යනු mouse pointer එක image එක මතට ගෙන ගිය විට විස්තරාත්මක ව තොරතුරු දැක්වීමයි .එය නිරුපනය කරනුයේ
<img src =”asd.jpg” title=”This is example”/>
වෙබ් පිටුවකට background image එකක් දැමීමට <body style ="background-image:url(asd.jpg)">
</body>

0 comments:

Post a Comment