À·€à·’à·à
බහු මාධ්‍ය තාක්ෂණය උපයෝගි කරගනිමින් වෙබ් අඩවි නිර්මාණය කිරිම • විශ්ව විසිරි වියමන ( The world wild web – www , web,3) විශ්ව විසිරි වියමන යනු අන්තර්ජාලය හරහා පිවිසිය හැකි එකිනෙකට සම්බන්ධ කරන ලද අධි - පාඨ (Hypertext ) , ( Documents ) ලේඛනයකි. මෙහිදී වියමන පිරික්සනයක් ( Web Browser) භාවිතයෙන් web පිටුවලට පිවිසීම සිදු කළ හැකිය. • වෙබ් අඩවි වර්ග ( Types of web sites) 1. Information - තොරතුරු 2. Personal - පුද්ගලික තොරතුරු අඩංගු 3. News – ප්‍රවෘත්ති ( BBC) 4. Educational - අධ්‍යාපනික -( www.w3schools.com) 5. Commercial - වානිජ්‍යය ( www.ebay.com ) 6. Web portals - විවිධ වු මූලාශ්‍ර වලින් තොරතුරු ඒකාබද්ධ කරනු ලැබු වෙබ් අඩවියකි. ( e-mail , news , stock prices , information , entertainment , database ) මෙහිදි එක් එක් තොරතුරු සඳහා web පිටුව තුල ඒ සඳහා ම වෙන් වු ඉඩක් වෙන් කර ඇත. උදා :- Yahoo , MSN , Google - Search engine
• වෙබ් අඩවියක අන්තර්ගතය 1. ආරම්භක පිටුව ( Home page ) මෙය index page එක ලෙසද හදුන්වනු ලැබේ. වෙබ් අඩවියකට පිවිසෙන විට මුලින්ම දිස්වනු ලබන්නේ මෙම web පිටුවයි. මෙය web අඩවියේ ප්‍රධාන පිටුව වේ. 2. සම්බන්ධිත පිටු ( Link Pages ) Hyper links (අධි සම්බන්ධක ) භාවිතයෙන් ප්‍රධාන පිටුවට සම්බන්ධ කර ඇති web පිටු මෙසේ හැදින්වේ. 3. වෙබ් පිටුවක් ගොඩනැගීමට අවශ්‍ය මූලිකාංග අකුරු , චිත්‍ර , ශව්‍ය , දෘෂ්‍ය , ගොනු මෙන්ම අධි සම්බන්ධතා අවශ්‍ය මූලික අවශ්‍යතා වේ. • අන්තර්ගතය සංවිධානය කිරිම 1. ආකෘතිය ( Formats ) 2. ලැයිස්තු ( Lists ) 3. වගු ( Tables ) 4. රාමු ( Frames )
• වෙබ් පිටු නිර්මාණය සඳහා HTML භාවිතය
HTML හැදින්වීම ( Hyper Text Markup Language ) Hyper Text Markup Language හි අක් නම HTML ලෙස හදුන්වනු ලැබේ. මෙය ක්‍රමලේඛ භාෂාවක් නොවන අතර සලකුණු කිරිමේ කේතයක් වේ. Standard General Markup Language - SQML වල උපකුළකයක් වන මෙය සලකුණු කිරිමේ උසුලනයක් ( Markup tags ) සමුහයකින් සමන්විත වේ.
වෙබ් පිටු සැනසීමේදි මුලාශ්‍ර ගොනුවක් වු HTML සංස්කාර ( Editor ) මෘදුකාංගයක් භාවිතා කළ හැකි අතර මුලාශ්‍ර සංස්කරණයක් ( Note pad , G Edit ) යොදා ගනිමින් වෙබ් පිටු සකසන විටදි සරල , පෙළ මෙන්ම html සලකුණු කිරිමේ උසුලනයක් යොදා ගනී. Web අතිරික්සුවක් ( Web browser ) හරහා වෙබ් පිටු දර්ශනය වීමේ දී සලකුණු කිරිමේ උසුලනයක් පරිශිලකයාට දක්නට ලැබේ.
What is hypertext ? ---- පරිගණක අකුරු
What is Markup Language ? ලේඛනයක් තර්කානුකූලව විස්තර කරනු ලබන නුතන පද්ධතියකි. Markup Language එකක් Markup tags වල කාර්යය වනුයේ වෙබ් පිටුවේ අන්තර්ගතය විස්තර කිරිමයි. • HTML Standards ( සම්මුතින් ) HTML කේතයක් HTML tag වන අතර මෙය කෝණ වරහනකින් (“ < > “ ) දක්වනු ලැබේ . HTML tag එකක් යනු සාමාන්‍යෙයන් යුගල වශයෙන් පවතින අතර තනි තනි tag ද දක්නට ලැබේ. (“ < b> , </ b> “ ) යුගලයේ පළමු tag එක පටන් ගන්නා tag එක වන අතර දෙවන tag එක අවසන් කරන tag එක ලෙස හදුන්වනු ලැබේ. අන්තර්ගතය පටන් ගැනීමේ හා අවසන් කිරිමේ tag යට “ / ” සංකේතය යොදනු ලැබේ. අන්තර්ගතය පටන් ගැනීමේ හා අවසන් කිරිමේ tag අතර ඇති සමහර අවස්ථාවලදී අන්තර්ගතයක් දක්නට නෙලැබේ. HTML පිටුවක් විස්තර කිරිමේ දී මුලට හා අගට පිළිවෙලින් < HTML > සහ </HTML> tag යක් භාවිතා කරයි. • HTML tag ලිවීමේ දී Capital Simple බේදයක් නොමැත. • HTML Page Structure <HTML> <HEAD> <TITLE> මාතෘකාව < /TITLE> </HEAD> <BODY> අන්තර්ගතය </BODY>
</HTML>
• Web Browser ( වෙබ් අතිරික්සුව / වියමන පිරික්සනය )
වෙබ් අතිරික්සුවක කාර්ය වනුයේ html ලේඛනයක් කියවා එය වෙබ් පිටුවක් ලෙස දර්ශනය කිරිමයි.අතිරික්සුව මගින් html tag නොපෙන්වන අතර එම tag තුළ ඇති දේ සකස් කර පෙන්නුම් කරනු ලැබේ.
• HTML Elements ( අංග ) HTML අංගයක් යනු html tag යන ආරම්භයේ සිට අවසාන tag සඳහා වු කොටසකි.
Eg - < p > This is a htmal element
• HTML Attributes ( භූතාර්ථ )
මෙමගින් html elements වලට අමතර තොරතුරු එකතු කරනු ලැබේ. Html attributes සෑම විටම ආරම්භක tag තුල ලියනු ලැබේ.
උදා:- < p align = “ Right “ > ----------------
• <HTML > ---------------------------</HTML> සම්පූර්ණ වෙබ් පිටුව අර්ත දක්වනු ලැබේ. • <HEAD> -------------------------- < / HEAD >
<html> tag එක යොදා ගැනීමෙන් අනතුරුව මෙම පිටුවෙහි අඩංගු කල යුතු මූලික තොරතුරු හදුනා ගැනීම සඳහා
<head > උපදේශ කේතය භාවිතා කරනු ලැබේ.
• <Title> -------------------------- < / Title > තැම්පත් කරන ලද web පිටුව web browser හරහා තිරය මත පතිත කිරිමෙන් එම web පිටුව ශීර්ෂ මාතෘකාව web browser හි ශිර්ෂය මත දිස් විය යුතු වේ. ඒ සඳහා <title> උපදේශ කේත අතර පිටුවේ උපදේශ කේත අතර පිටුවේ ශීර්ෂ මාතෘකාව සදහන් කල හැකිය. උදා <title> My First Web Page </title> • <Body> -------------------------< / Body > වෙබ් අඩවියක ඇති web පිටුවක බද(body) හෙවත් ප්‍රධානතම තොරතුරු ඇති කොටස (body) යනුවෙන් හදුන්වනු ලබන අතර එම එම පරාසය හදුනා ගැනීම සඳහා <body> - - - - - - - - - - - - - </body> උපදේශ කේත යුගල භාවිතා කරනු ලැබේ. ඉන් අනතුරුව එම උපදේශ කේත යුගල අතර වෙබ් ලිපියෙහි අඩංගු කල යුතු අනෙකුත් තොරතුරු වන රූප , වීඩියෝ පට සහ චලන චිත්‍ර විවිධ ආකාරයට වෙනත් උපදේශ කේත භාවිත කරගනිමින් ඉදිරිපත් කල හැකි අතර එම තොරතුරු සියල්ල web අඩවි භාවිත කරන්නට දැක ගත හැක. HTML Extensions (ගොනු දිගු) Html ගොනුවක් සුරක්ෂිත කරන විට (Save) .htm හෝ .html යන ගොනු දිගු වලින් එකක් භාවිත කැරනු ලැබේ. HTML Basic
HTML heading defined with the
to
tags.
ප්‍රධාන මාතෘකාව <html> <head> </head> <body>
This is a heading 1
This is a heading 2
This is a heading 3
This is a heading 4
This is a heading 5
This is a heading 6
</body> </html> HTML Paragraphs
HTML Paragraphs are defined with the
tags <html> <head> </head> <body>
This is a Paragraph
This is a Paragraph
</body> </html> HTML Comments (විස්තර ප්‍රකාශ/විවරණ) HTML මගින් කිසියම් විස්තරයක් හෝ ප්‍රකාශයක් වෙබ් පිටුව සකස් කරන්නාගේ පහසුව සඳහා හෝ වෙනත් වෙබ් පිටු සකසන්නෙකුගේ පහසුව සඳහා යමක් සටහන් කර තැබීමට අවශ්‍ය වුවහොත් ඒ සඳහා භාවිත කල හැකි HTML උපදේශ කේතයක් ලෙස <! - - . . . . . . . . . . . . . - - > භාවිත කල හැකිය.මෙම සංකේත අතර ඇති කිසිවක් වෙබ් Browser මගින් නොපෙන්වනු ලැබේ. <html> <head> </head> <body> <! - -This Comment will not be displayed - - >
This is a regular Programmer
</body> </html> HTML Line Break
HTML වලදී වාක්‍ය 2ක් එකිනෙකට වෙනස් කිරිම සඳහා හෝ පේලි වෙන් කිරිම සඳහා tag භාවිතා කල යුතුවේ. මේ සඳහා
හෝ
භාවිත කල හැක.
Tag භාවිත කරනු ලබන්නේ එකම ඡේදයක් තුල ඇති පේලි හෝ වාක්‍ය වෙන් කිරිම සඳහාය.
සඳහා අවසන් කිරිමේ Tag නොමැත.
<html>
<head>
</head>
<body>
This is
a para
Graph with line break
</body> </html> HTML Lines
මෙහිදී web පිටුව මතට සිරස් ඉරක් ඇතුළු කිරිම සඳහා
භාවිත කරනු ලැබේ.
<html> <head> </head> <body>
HTML
HTML is a language for describing web pages
CSS
CSS defined how to display HTML elements
</body>
</html>
< hr width = “50%” align = “ left” >
< hr width = “50%” align = “ left” Size = “5px”>
< hr width = “500px” align = “ Right = “5px”>
< hr width = “50x” align = “ Center = “5px”>
Text Formatting
Tag Description
Defines bold text - තද අකුරු
Defines Emphasized text -අවධානය කල යුතු අකුරු
Defines a italic text - ඇල අකුරු
Defines smaller text- පුංචි
Defines important text - වැදගත්
Defines Superscripted text - 25 Sup
Defines subscripted text - H2O Sub
Defines inserted text
Defines Deleted text
web පිටුව මතට සිරස් ඉරක් ඇතුළු කිරිම සඳහා
භාවිත කරනු ලැබේ.
<html> <head> </head> <body>
This Text is bold
This Text is strong
This Text is Emphasized
This Text is italic
This Text is small
This is subscript and superscript
Defines important text
Inserted text
deleted text
</body> </html>