Latest ads

Electronics
Vehicles
Property
Search

HTML

inranasingha

inranasingha

Well-known member
  • Jan 27, 2008
    5,818
    1,785
    113
    රජයේ රෝහල
    මුලින්ම කියන්න ඕන HTML කියන්නෙ "Hyper Text Mark-up Language" කියන එක..

    ඒක programming language එකක් නෙවෙයි.. markup language එකක්..:yes:

    WWW කියන්නේ ගෙයක් නම් ඒක නිම කරන්න ඕනෑ මූලිකම දෙයක් තමයි මේ HTML කියන්නේ.

    යමෙකුට වෙබ් පිටුවක HTML කෝඩ් බලාගන්න ඕනෑනම් මෙහෙම පුලුවන්.
    Internet Explorer- View > Source
    google chrome waladi Tools> view source
    ඔය වගේ.

    මූලිකවම නෝට්පෑඩ් එක උපයෝගී කරගෙන අපිට HTML පේජ් එකක් ලියාගන්න පුළුවන්.
    සේව් කරද්දි එක්ස්ටෙන්ශන් එක .html නැත්නම් .htm කියල දෙන්න..

    තව දෙයක් කියන්න තියනවා..
    මේකට අපිට ඕනෑ වෙනවා ටැග් කියලා ජාතියක් ඒකියන්නේ Angle brackets ව්ලින් සමන්විත මෙන්නෙ මේ වගේ එකක්..

    <මේක ටැබ් එකක් ඇරපු වෙලාව>

    ඒක වහන්නත් මතක තියාගන්න මෙන්න මේ වගේ..
    </ඇරියනම් වහන්නත් ඕනෑ>;)

    හොඳයි අපි දැන් අපේ පළමු වැනි වෙබ් පේජ් එක නිර්මාණය කරමු.:rolleyes:
    ප්‍රධාන වශයෙන් මේකට මේ ටැබ් දෙක ඕනෑ වෙනවා..

    <head> එකේ තමයි title එක search engine එකකට අවශ‍ය වන Keywords වගේ දේවල් ඇතුලත් කරන්නේ..

    ඊට පස්සේ body sectionඑක.
    <body>
    එකේදි තමයි අපි වෙබ් පේජ් එක කෝඩ්න් කරන්න ඕනෑ..
    මෙන්න පළමු වැනි ප්‍රෝග්‍රම් එක..:confused:

    NotePad එකක type කරලා .html විදියට save කරලා double ක්ලික් කරලා open කරලා බලන්නකෝ..:rolleyes:

    <html>
    <head>
    <title>My Own Home Page </title>
    </head>
    <body>
    <H1> I am Nalin and this is my web Page! </H1>
    </body>
    </html>

    කියන්න දෙයක් තියනවා මේවගේ සරල දෙයක් දැම්මේ අපේ එලකිරියේ comments දාද්දී ත්‍රෙඩ් එකකට reply කරද්දී ,අළුත් ත්‍රෙඩ් එකක් දමද්දී අපේ යාළුවන්ට ඕනෑ වෙන නිසා..

    තව ගොඩක් දේවල් තියනවා කියලා දෙන්න ...

    මම කියන දේවල් වල වැරදි තියනවනම් පෙන්නලා දෙන්න...:rolleyes:
    තව ගොඩක් දේවල් තියනවා මේ ත්‍රෙඩ් එකේ කියලා දෙන්න ඒවා මම දෙන්නේ ඔයගොල්ලන්ගේ ප්‍රතිචාර අනුව තමා හොඳේ..:yes:

    ​
     
    • Like
    Reactions: navodth, unknown-me and lahirufx+
    inranasingha

    inranasingha

    Well-known member
  • Jan 27, 2008
    5,818
    1,785
    113
    රජයේ රෝහල
    හොඳයි ...:cool:

    මුලදි මට එක දෙයක් කියන්න බැරිවුනා..;)

    මෙතන h1 කියන්නෙ html හෙඩින් එකක්..
    h1 ඉදලා h6 වෙනකන් තියනවා..:yes::yes:

    දෙයක් මතක තියා ගන්න ඕනෑ..
    h1ට ඇතුලෙ දක්වන හෙඩින් එක විශාලවත් (ෆොන්ට් සයිස්),h6 හි දක්වන හෙඩින් කුඩාවටත් තමයි පෙනෙන්නේ..:cool:

    දෙයක් කියන්න ඕන html ටැග්ස් සරලව යුගල වශයෙන් තමා තියන්නේ..

    opening ටැග් එකට starting ටැග් කියලත්end tag එකට closing කියලත් කියනවා.

    html documents, html ටැග් සහ plain text වලින් සමන්විත වෙනවා..
    html documents වලට තමයි අපි වෙබ් පේජ් කියලා කියන්නේ...:cool::cool:

    plain text editor එකක් ඒ කියන්නේ Notepad එක තමයි රෙකමන්ඩ් කරලා තියන්නේ html ඉගෙන ගන්න..
    තව දෙයක් html documnts අර්ථ දක්වලා තියන්නේ html elementsකියන ඒවා වලින්.:rolleyes:

    <p> this is a html element</p>

    මෙහිදී this is a html element කියන එක තමයි html element එක...
    html ටැග්ස් case sensitive නැහැ..
    <body>,<BODY> දෙකම එකයි...

    ඒ වුනාට රෙකමන්ඩ් කරලා තියන්නේ ටැග් සදහා සිම්ප්ල් තමයි..

    හරි දැන් තමයි අද පාඩම පටන් ගන්නේ...

    ළමයි ලෑස්තිද? ශිෂය්‍යත්ව විභාගයට?:rolleyes:

    අපි වෙබ් අඩවියක් නිර්මාණය කරද්දී ඒ සඳහා විවිධ වර්ණ භාවිතා කරන්න වෙනවා..
    text color background color වගේ තැන් වලදී..

    මුලින් background color එකක් ඇඩ් කරගන්න විදිහ..
    මෙහෙම,..

    <body bgcolor = "blue">

    නැත්නම්....:confused:

    <body bgcolor = "#0000FF"> කියලා..

    :confused::confused:
    කලබල වෙන්න එපා..

    #0000F කියන්නේHexadecimal colour"මේකෙන් අපිට පුලුවන් complex වර්ණ ඇඩ් කරගන්න...

    වැඩි විස්තර ඕනෑ නම් මෙන්න..
    මෙතනට අනින්න
    මෙන්න අද උදාහරණය..

    <html>
    <head>
    <title>My Own Home Page </title>
    </head>
    <body>
    <body bgcolor= "blue">
    <H1> <color="yellow">I am Your-Name and this is my web Page!</color></H1>
    </body>

    text color එකක් දාද්දී මේ විදිහට ඇඩ් කරන්න ඕනෑ ...
    [colour="blue"] text here[/colour]

    මෙතනදි colour වෙනුවට color යොදාගන්න අමතක කරන්න එපා..
    ඇමෙරිකන් English වලින්....;)

    ඉතිරි ටික හවස..:rolleyes:

    ​
     
    inranasingha

    inranasingha

    Well-known member
  • Jan 27, 2008
    5,818
    1,785
    113
    රජයේ රෝහල
    අද බලමු කොහොමද කියලා...
    ඉමේජ් එකක් ඇඩ් කරගන්නේ..:rolleyes:

    වෙබ් පේජ් එකකට..:yes:

    මුලින්ම ඇඩ් කිරීමට අවශ්‍ය පින්තූරේ සම්පුර්ණ නම,
    එහෙමත් නැත්නම් file name with extension දැන ගන්න ඕනෑ..
    උදාහරනයක් විදිහට myimage.gif විවිධ file extension වෙබ් ඉමේජ් සදහා භාවිතා වෙනවා...

    මේවා නම් දන්නවනේ:cool:

    gif-Graphics Interchange Format.

    jpeg/jpg-joint Photographic Experts Group.

    bmp-Bitmap Image File.

    tiff-Tagged Image File Format.

    png-Portable Network Graphics.
    ඔය වගේ.

    දැන් බලමු ඒ සඳහා අවශ්‍ය HTML command එක..

    මෙහෙම..

    <img src="myimage.gif"></a>

    මෙහිදී src කියන්නේ source කියන එක කියලත් ඒක attribute එකක් කියලත් මතක තියගන්න..

    දැන් බලමු ..අද code එක...
    මෙහෙම..

    <html>
    <head>
    <title>My Own Home Page </title>
    </head>
    <body>
    <body bgcolor= "blue">
    <font color="Red">
    <H1> I am Your-Name and this is my web Page!</H1>
    <img src="myimage.gif"></a>
    </font>
    </body>


    තව දෙයක් බොහොමයක් වෙබ් අඩවි
    තමන්ගේ සියලු images එකම folder එකක උදාහරනයක් විදියට
    images folder කියලා ගබඩා කරලා තියා ගන්නවා..
    ඒක ඔබේ කැමැත්ත.. :rolleyes:

    තව ටිකක් වැඩ ටිකක් දාලා ඕනෑ නම් මෙහෙමත් Syntax එක ලියන්නත් පුලුවන්.

    <img src="url" alt="some_text"/>

    <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />


    alt,width,height කියන්නේ attributes...

    URL කියන තැනට යම් වෙබ් අඩවියක ඉමේජ් එකක් තියන තැනක පාත් එක ඇඩ් කර ගන්න පුලුවන්..

    alt කියන එකෙන්- යම් හේතුවක් නිසා
    උදාහරනයක් විදිහට slow connection ස්පීඩ්
    (ලන්කාවෙ නෙවේ හොඳේ..);)
    ඉමේජ් එක ලෝඩ් උනේ නැත්නම් ඒක ගැන විස්තර කිරීමක් clientට ලබා දෙන්න පුලුවන්..:rolleyes:

    අනෙක් attributes වලින් ඉමේජ් එකේ දිග පලල ලබා දෙනවා..

    මෙම attributes දෙක භාවිතයෙන් වෙබ් පේජ් එකක් ලෝඩ් වෙද්දිම ඉමේජ් සඳහා අවශ්‍ය ඉඩ වෙන් කරගනු ලබනවා..

    මේකනිසා ඉමේජ් එකක් ලෝඩ් වෙද්දි පේජ් layout එකට වෙන බලපෑම අඩුකරගන්න පුලුවන්.
    මේ අත්දැකීම නම් අපේ එළකිරි කොල්ලන්ට, කෙල්ලන්ට ඇති...:yes:
    ​
     
    inranasingha

    inranasingha

    Well-known member
  • Jan 27, 2008
    5,818
    1,785
    113
    රජයේ රෝහල
    දැන් බලමු ලින්ක් ඇඩ් කරන විදිහ..:yes:

    ලින්ක් එහෙම නැත්නම් හයිපර්ලින්ක් කියන්නේ තවත් ඩොකියුමන්ට් එකකට යන්න තියන කෙටි පාරක්..:cool:
    එහෙම නැත්නම් එම ඩොකියුමන්ට් එකේම අළුත් කොටසකට කියමුකෝ..

    ලින්ක් එකක් විදිහට ටෙක්ස්ට් එකක් වගේම ඉමේජ් එකකුත් යොදාගන්න පුලුවන්..:cool:

    ලින්ක් අර්ථ දක්වලා තියන්නේ මෙන්න මේ ටැග් එක උපයෝගීකරගෙන.
    <a>
    cursor එක ලින්ක් එක උඩට අරගෙන ගියොත් ඔබට මෙහෙම දැක ගන්න පුළුවන්.
    Open+Links+in+new+window+or+tab+in+Blogger+hand+cursor+and+blogger+logo.png

    පොඩි අතක් වගේ එකක්.

    ලින්ක් කරන්න HTML File එකකුත් එපැයි..

    මුලින් පාඩමෙදි උදාහරණයක් page1.html කියලා මුලින්ම සේව් කරගන්න..

    තව දෙයක් මේ කරන හැම දෙයක්ම එකම ෆොල්ඩෙර් එකකට දා ගන්න..

    HTML Syntax මෙහෙම..

    <a href="name of your page here">Text that you want the
    user to see here</a>

    තවත් ටිකක් Advanced කලොත් target attribute එකක් යොදාගන්න පුළුවන් මෙහෙම..

    <a href="http://www.Elakiri.com/" target="_blank">Visit ElaKiri Community!</a>

    ඒකෙන් අලුත් බ්‍රව්සර් වින්ඩොව් එකක් තමා ඕපන් වෙන්නේ..:yes:

    ඔයගොල්ලොම උත්සාහ කරලා බලන්න..:rolleyes:

    තව Attribute එකක් භාවිතා කරනවා ඩොකියුමන්ට් එක තුලම බුක් මාර්ක් දාගන්න මේ විදිහට

    <a name="tips">Useful Tips Section</a>:confused:

    දැන් අද උදාහරණය..:cool::cool:

    <html>
    <head>
    <title>My Own Home Page </title>
    </head>
    <body>
    <body bgcolor= "yellow">
    <font color="Red">
    <H1> I am Your-Name and this is my web Page!</H1>
    <img src="images/myimage.gif">
    <a href="Page1.html">Click Here for my next page</a>
    </font>
    </body>

    NotePad එකක type කරලා .html විදියට save කරලා double ක්ලික් කරලා open කරලා බලන්නකෝ.
    දෙයක් මතක තියාගන්න මම ඉහත උදාහරනයේ backgrond කලර් එක yellow දමලා තියන්නේ IEවල ඩිෆෝල්ට් background කලර් එක blue ම නිසා..හොඳේ...:yes:

    ​
     

    Similar threads

    Martian Professor
    මගේ ප්‍රශ්ණෙට උත්තරයක් දීපල්ලකො
    Replies
    17
    Views
    361
    Martian Professor
    Martian Professor
    infernocus
    Daraz Mall : Incorrect Items from Baseus Official by Trident,
    Replies
    10
    Views
    428
    infernocus
    infernocus
    Bam
    මේ කිරි වල ප්‍රෝටීන් නැද්ද එතකොට ?
    Replies
    25
    Views
    610
    topkollek
    topkollek
    Aiden Pearce
    නදුනගෙ වීර කියාවක් සෙට් උනා 😅😅
    Replies
    18
    Views
    716
    Nadun26
    Nadun26
    ravixd
    තත්පර කිහිපයකින් මනුස්ස කටහඬ හදන AI — ප්‍රයෝජනවත්ද? භයානකද?
    Replies
    2
    Views
    166
    lilman
    lilman
    Top Bottom