HTML මුලසිට - පලමු කොටස

ඔන්න මම අද ඉදන් ඔයලට HTML ගැන කියල දෙන්නයි යන්නෙ. හුඟක් අය කියනව HTML අමාරුයි කියල. එත් එහෙම හිතන්න එපා. HTML කියන්නෙ හුගක් ලේසි එක්තරා භාෂාවක්. මෙ භාශාව පාවිච්චි කරල ඔයාලට වෙබ් පිටු නිර්මානය කරගනීමට පුලුවන්. හැබයි අද වෙනකොටනම් HTML වලට වඩා හොඳ නියමයන් ඇවිත් තියෙනව. PHP කියන්නේ ඒ වගේ එකක්. එත් මේ ඔක්කොගෙම මූලිකයා HTML නේ. අද කාලෙනම් කේත පාවිච්චි කර කර මේ පේජ් හදන්න ඔනි නෑ. ඔනිතරම් HTML වෙබ් පේජ් හදන මෘදුකාංග තියෙනව. විතරක් නෙවේ තවත් භාෂා වලින් වෙබ් පේජ් හදන මෘදුකාංග තියෙනව. එවගෙන් මේ වැඩේ හුගක් ලේසියි වගේම වැඩි වෙලාවක් යන්නෙත් නෑ. ඒ වගේම කේත මතකතියාගන්න ඔනිත් නෑ. ඒ උනාට අපිට සාමාන්‍යපෙළ , උසස්පෙළ විභාග වලට එන්නෙ HTML ගැනනේ. ඒ විතරක් නෙවේ ඔයගොල්ලො මේ දේවල් ගැන දැනන් ඉන්න එකත් හොඳයි. වදගත් වෙන්න පුලුවන්නෙ.

හරි අපි පාඩමට යමු එහෙනම්. 

අපි අන්තර්ජාලගේ දකින වෙබ් අඩවි වලට තොරතුරු ඇතුලත් කිරීමට ක්‍රමයක් හෙවත් යම්කිසි භාෂාවක් ඕනි. HTML කියන්නෙ පොදුවෙ ඔනිම පරිගණකයකයකට හදුනාගනීමට හැකි වෙබ් අඩවි නිර්මානයට ගන්නා ප්‍රධානතම වෙබ් අඩවි සාදීමට ගන්න භාෂාවක්. Hyper Text Markup Language යන නාමයේ කෙටි නම HTML ලෙස භාවිතාකරනුලැබේ.

ඒ වගේම කියන්න ඕනි මෙක පරිගණක වැඩසටහන් නිර්මානයට ගන්නා java, python, C++, VB වගේ ප්‍රෝග්‍රැමින් ලැන්වේජ් එකක් නෙවෙයි.

ටිම් බර්නර්ස් ලී

 HTML භාෂාව  1989 දී ශ්‍රීමත් ටිම් බර්නර්ස් ලී සහ රොබට් කැලියු යන දෙදෙනා ස්වාදීනව නිර්මානය කලත් ටිම් බර්නර්ස් ලී විසින් HTML භාෂාව තවදුරටත් දියුනු කරන ලදී. 

මෙහි විශේෂත්වය වන්නේ මෙම වෙබ් අඩවි සෑදීම සඳහා විශේෂ මෘදුකාංගයක් අවශ්‍ය නොවීමයි. පරිගණකය තුල තිබෙන Notepad වනි ටෙක්ස්ට් එඩිටර් එකක් තිබුනොත් අති. අවශ්‍යමනම් Notepad++ වනි පොඩ්ඩක් වැඩිදියුනු කරපු ටෙක්ස්ට් එඩිටර් එකක් උනත් පාවිච්චි කරන්න පුලුවන්.


එච්ටීඑම්එල් (හයිපර්ටෙක්ස්ට් මාකප් භාෂාව)
HTML.svg
ගොනු නාම විස්තාරය .html, .htm
අන්තර්ජාල මාධ්‍ය වර්ගය text/html
කේත වර්ගය TEXT
ප්‍රථම නිකුත් කිරීම 1993; 22 (1993)
අවසාන නිකුත් කිරීම 5.0 / 4 පෙබරවාරි 2014; 18  (2014-02-04)
ආකෘතියේ වර්ගය Document file format
විස්තීරණය වූයේ SGML
විස්තීරණය වනුයේ XHTML
සම්මත(ය) ISO/IEC 15445
W3C HTML 4.01
W3C HTML5 (draft)
විවෘත ආකෘතියක් ද? Yes
වෙබ් අඩවිය w3.org/html/

  එච්ටීඑම්එල් ලියනු ලබන්නේ එච්ටීඑම්එල් එලෙමන්ට් හි හැඩයම් තුළ වන අතර මෙහි අඩංගු වන ඈන්ගල් බ්‍රැකට්ස් හෙවත් කෝණ වරහන් (උදාහරණ:<html>) තුළ සම්බන්ධක යොදනු ලැබේ.

බොහෝවිට HTML ටැගයක් පටන්ගත්විට එය අවසන්ද කල යුතුය.
උදා:  <H1> Text </H1>


එසේ අවසන් නොකලහොත් වෙබ් පිටුව තුල එම ටැග් මගින් කෙරෙන කාර්යය නිවරදිව සිදු නොවේ.

එමෙන්ම පලමුව විවෘත්ත කට ටැගය අවසානෙටත් අවසානෙට විවෘත්ත කල ටගය පලමුවත් අවසන් කල යුතුය.
උදා: <p>
          <div>
                 <a>http://fb.com</a>
          </div>
      </p>

මෙම කේත කොටසේ පළමුව <p> ටැගය විවෘත්ත වන අතර එය අවසන් වී අත්තෙ <p> ටැගය තුල ආරම්භ කල සියලු ටැග් අනුපිලිවෙලින් වසාදැමූ පසුවයි.

යුගලයක පළමු ටැගය ආරම්භක ටැගය වන අතර, දෙවන ටැගය අවසාන ටැගය නම් වේ (ඒවා විවෘත ටැග සහ වැසුම් ටැග ලෙස ද හඳුන්වනු ලැබේ).

 සමහර ටැග හිස් එලෙමන්ට්ස් දක්වන අතර යුගල වශයෙන් නොපවතී.
උදාහරණ:  <img>  

වෙබ් බ්‍රව්සරයක කාර්යය වනුයේ එච්ටීඑම්එල් ලේඛන කියවා ඒවා ශ්‍රාව්‍ය ද්‍රෘශ්‍ය වෙබ් පිටු ලෙස සැකසීම ය. බ්‍රව්සරය එච්ටීඑම්එල් ටැග දර්ශනය නොකළ ද වෙබ් පිටුවේ අන්තර්ගතය තේරුම් ගැනීමට ඒවා භාවිතා කරයි. එච්ටීඑම්එල් භාෂාව ක්‍රමලේඛ භාෂාවකට වඩා වැඩියෙන් මාකප් භාෂාවක් ලෙස ක්‍රියා කරන්නේ වෙබ් අඩවියක ආකෘතිය ඉදිරිපත් කිරීමට සලකුණු තාර්කික ව යොදා ගැනීම නිසාය. 

 

Cascading Style Sheets - CSS

HTML මගින් සාදන ලද පිටු අලන්කාරය සඳහා Cascading Style Sheets  නැතිනම් CSS භාවිතාකරනවා.

හොදයි අපි එහෙනම් HTML ගැන කතා කරන ගමන්ම CSS ගැනත් කතාකරගෙන යමු.

Cascading Style Sheets (CSS)
CSS-shade.svg
Filename extension .css
Internet media type text/css
Developed by
  • Håkon Wium Lie
  • Bert Bos
  • World Wide Web Consortium
Initial release December 17, 1996; 18 years ago
Type of format Style sheet language


Håkon Wium Lie, chief technical officer of the Opera Software company and co-creator of the CSS web standard

හරි එහෙනම් වලට උදාහරනයකුත් බලලම ඉන්නකෝ.

body {
             background-color: #000000;
             color: #ffffff;
          }

මෙ CSS File එකට පුලුවන් වෙබ්පිටුවේ පසුබිම වර්ණය කලු පාටත් , අකුරු සුදුපාටත් කරන්න.

මෙම කේත වැඩිපුරම යොදනු ලබන්නෙ <head> ටැග් එක තුලය. එමෙන්ම <body> තුලද යොදන අවස්තා තිබේ. තවද එම අදාල ටැග් එක තුලමද යොදන අවස්තා ඇත.
Share on Google Plus

About REX

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment