C++ පාඩම

ඔන්න ගොඩක් අයගෙ ඉල්ලීම පිට මම C++ ත් ගෙනාවා.. ඒත් මේක නම් මම නෙමෙයි උගන්නන්නෙ හොදේ.. මමත් තාම C++ ඉගෙන ගන්නවනෙ.. මම ඉගෙනගෙන ඔයාට උගන්නන්න හිටියොත් තව කල් යනවනෙ..
ඉතින් මම මේ දෙන ලින්ක් එකෙන් ගිහින් මේ pdf එක ඩව්න්ලෝඩ් කරගන්නකො. සිංහල pdf එකක්. සරලව තේරුම් ගන්න පුලුවන විදිහට කියලා දීලා තියෙනවා.. ඔන්න එහෙනම් අපි ඉගෙන ගනිමූ. C++ ත්..
මෙන්න ලින්ක් එක..

C++ PDF

SQL පාඩම - 01

ඔන්න අද මම ඔයාට කියලා දෙන්න යන්නෙ sql language එක ගැනයි..

SQL කියන්නෙ...,

Stuctured Query Language - ව්‍යුහගත විමසුම් භාෂාව.

කිසියම් පද්ධතියක් සදහා database එකක් සකස් කරනවා.. ඒ database එකට දත්ත ඇතුල් කරන්නත්, එකෙ තියෙන දත්ත සකස් කිරීම තුලින් නැවත ලබ ගන්නත් මේ SQL විධානයන් ඇතුලත් කරනවා..

අපි බලමු මේ SQL විධානයන් ක්‍රියාත්මක කරන්නෙ මොන දත්ත සමුදාය කලමණාකාරණ පද්ධතීන් (DBMS) එක්කද කියලා..

• My SQL
• Ms Access
• Oracle
• SQL Server

My SQL database එකක් සකස් කරන්න නම් අපි Wampserver අපේ කම්පියුටර් එකට install කරගන්න ඕනෙ.. ඔයා වැඩ කරන මැෂින් එකේ wampserver install කරගෙන නැත්නම් මෙතැනින් download කර ගන්න..

Wampserver

මේ වැම්ප්සර්වර් ඕපන් කරලා බලන්න.. එකේ My SQL Consoul වලදි තමයි මේ SQL Commands ලබා දෙන්න පුලුවන්..
දැන් අපි බලමූ SQL භාවිතා කරලා කරන්න පුලුවන් මොනවද කියලා..

Database භාවිත කරලා විමසුම් (query) සකස් කරන්න..
Database එකකින් දත්ත ලබා ගන්න..
Database එකකට දත්ත ඇතුල් කරන්න..
Database එකක තියෙන දත්ත වෙනස් කරන්න..
Database එකක දත්ත ඉවත් කරන්න...
අලුතින් Database එකක් හදන්න..
අලුතින් වගු සකස් කරන්න..
Database එකේ ව්‍යුහය වෙනස් කරන්න..

*මේ SQL විධානයන් ANSI සම්මතයන්ට අනුව වෙනස් වෙනවා.. ANSI කියන්නෙ American National Standard Institute.

ඔන්න දැන් අපි SQL Commands ඉගෙන ගන්නයි යන්නෙ.. ඔයා වැම්ප්සර්වර් එකේ My SQL Consoul වල මේ commands type කරලා බලන්න මම කියලා දෙන ගමන්ම..

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

1. Database සැකසීම.

අපි දැන් නිකන් හිතමූ getway lanka කියලා ආයතනයක් තියෙනව කියලා.. මේකෙ වැඩ කරන සේවකයන්ගෙ තොරතුරු , ආයතනයේ තොරතුරු ඒ හැමදේම එකතු කරලා අපි database එකක් හදන්නයි යන්නෙ.. database එකේ නම Gateway info කියලා ගමුකො..

මේ බලන්න ඒක හදන්න Command එක දෙන විදිහ..

CREATE DATABASE Gateway_info

*create database කියන්නෙ විධානය. දැක්කද අපේ database එකේ නම දීලා තියෙන විදිහ.. මැදින් ස්පේස් තියන්නෙ නැහැ.. "_" දීලා තමයි වචන දෙක වෙන් කරලා තියෙන්නෙ..

2. Database භාවිතා කිරීම.

USE Gateway_info

* අපි දැන් මේ භාවිතා කරන්න යන්නෙ මොන database එකද කියලා තමයි මේකෙ විධාන දෙන්නෙ.. අපි database එක හදලා නැත්නම් හදන එක ඇරුනම අනිත් වැඩ ඔක්කොම පටන් ගන්න ඕනේ මේ command එකෙන්.. මොකද අපි දැන් use කරන්න යන්නෙ මොන db එකද කියලා කියන්නෙ නැතුව පටන් ගන්න බැහැ.

3. Table සකස් කිරීම.

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

CREATE TABLE employee
(Emp.ID int,
LastName varchar (20),
FirstName varchar (20) ,
Address varchar (50) ,
salary int)

මම මෙහෙම පේලියෙන් පේලියට ලිව්වෙ ඔයාට අවබෝධ කරලා දෙන්න ලේසි නිසා.. command එක එකටම ලිව්වට අවුලක් නැහැ..

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

ඔන්න මම විධානය දීලා තියෙනවා employee කියන ටේබල් එක හදන්න කියලා..

ඊට පස්සෙ ඒකෙ Field තියෙන්න ඕනෙ ආකාරය ගැනයි මම කියලා තියෙන්නෙ. emp id, first name.. ඒවා තමයි field. Varchar , int කියන ඒවා ගැන ඔයාට ගැටලුවක් එන්න ඇති මේක දැක්කම.. Emp_ID බලන්න.. employee ගෙ ID එක තමයි මේ field එකේ අපි දාන්නෙ. මේ field එකේ දාන්නෙ සංඛ්‍යා. ඒ නිසයි int කියලා දාලා තියෙන්නෙ. (Integer) බලන්න.. salary එකටත් int දීලා තියෙන්නෙ සංඛයාවක් නිසා..
හරි. ඊලගට varchar. ඒකත් ඒ වගේ . ඒ field එකට දාන characters ගාන තමයි වරහන් ඇතුලෙ දාලා තියෙන්නෙ.. first name එකකට අකුරු 20 කට වැඩි වෙන්න බැහැනෙ නේද.. ඒ නිසා 20 ඇති. ඔයාට කැමති ගානක් දෙන්න පුලුවන් හොදේ.. ඒත් ගොඩක් වැඩි අකුරු ගානක් දෙන්න යන්න එපා මොකද memory එක waste වෙනවනෙ නිකන්.

***********************************

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

INSERT INTO

වගුවක් සදහා දත්ත ඇතුල් කිරීමට භාවිතා කරනවා.

අපි බලමු අපේ Employee වගුවට දත්ත එකතු කරන්න. බලන්නකො මේ Command.

INSERT INTO Employee (Emp.ID, LastName, FirstName , Address , salary) values (4 , 'perera', 'Nilu' , 'No.45, George Street ,Badulla.', 28000)

හොදට බලන්න.. int වලින් දෙන ඒවට අපි උධෘත දීලා නැහැ. සංඛයා නිකන්ම දීලා තියෙන්නෙ..

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

************************************

4. Table හි සැලැස්ම ලබා ගැනීම..

DESCRIBE Employee

ඔන්න මේ විදානය දුන්නට පස්සෙ ඔයා හදපු මේ employee table එක ඔයාට මේ විදිහට බලා ගන්න පුලුවන්. (Table එක කඩ ඉරි වලින් පෙන්නන්නෙ හොදේ..)

Field	Type	Not Null
Emp.ID	int (11)	yes
LastName	varchar (20)	yes
FirstName	varchar (20)	yes
Address	varchar (50)	yes
Salary	int (11)	yes

ඔයා බලන්න ඇති මේ Not null කියන්නෙ මොකද්ද කියලා.. යම් field එකක් not null ලෙස අර්ථ දැක්වුවොත් ඒ field එක හිස්ව තියන්න බැහැ.

5. වගුවක් ඉවත් කිරීම.

DROP TABLE employee

Employee කියන table එක ඉවත් වෙනවා..

6. Database එක ඉවත් කිරීම.

DROP DATABASE Gateway_info

7. Table එකේ ඇති දත්ත ලබා ගැනීම.

SELECT * FROM Employee

මේකෙදි * ලකුණ පාවිච්චි කරන නිසා table එකේ හැම field එකකටම අදාල දත්ත පෙන්නනවා.. මම ඉස්සරහට ඔයාට මේ ගැන ආයෙත් මතක් කරනවා අපේ table එකට data enter කරන්න මම කියලා දුන්නට පස්සෙ..

මේ SQL විධාන ප්‍රධාන කාණ්ඩ දෙකකට වෙන් කරන්න පුළුවන්..

1. DML - Data Manipulation Language.
2. DDL - Data Definition Language.

DML

Table එකේ දත්ත සමග කටයුතු කිරීම තමයි මේ විධානයන්ගෙන් සිදු කරන්නෙ..

SELECT - දත්ත ලබා ගැනීම.
UPDATE - වගුවේ ඇති දත්ත වෙනස් කිරීම.
DELETE - දත්ත ඉවත් කිරීම.
INSERT INFO - දත්ත ඇතුල් කිරීම.

DDL

Database හි ව්‍යුහය වෙනස් කිරීම, database එක සැකසීම වගේ දේවල් මේ command මගින් සිද්ධ කරනවා..

CREATE DATABASE - database සැකසීම.
ALTER DATABASE - database සැකසීම.
CREATE TABLE - වගු සැකසීම.
ALTER TABLE - වගු වෙනස් කිරීම.
DROP TABLE - වගු ඉවත් කිරීම.
CREATE INDEX - දත්තය පහසුවෙන් සෙවීම සදහා නම් කිරීම.
DROP INDEX - index ඉවත් කිරීම.

SELECT

අපි දැන් හිතමු අපිට ඕනෙ Employee කියන table එකෙන් LastName සහ FirstName ට අදාල තොරතුරු විතරක් ඕනෙ කියලා.
මෙහෙමයි command එක..

SELECT LastName, FirstName FROM Employee.

මෙහෙම out put එක ඔයාලා දකියි..

LastName	FirstName
perera	renu
Wikramasinghe	Arjuna
Herath	Wishaka

හොදයි..ඊලග කොටසින් අපි SQL වල ඉතිරි ටික ඉගෙන ගනිමු. ඔයා හොද අවබෝධයක් ගන්න අද උගන්වපු කොටස් ගැන. ගැටලුවක් තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..

SQL පාඩම - 02

හරි. දැන් අපි වෙන table එකක් ගැනයි කතා කරන්නයි යන්නෙ. නම wether කියලා. අපි හිතමු ඒකෙ city කියලා field එකක් තිබුනා කියලා.. දැන් එකිනෙකට වෙනස් නගර සියල්ල ලබා ගන්න ඕනෙ අපිට.. බලන්න command එක ලියන හැටි..

SELECT DISTINCT City FROM Wether.

Wether ටේබල් එකෙන් city එක gall වෙන ඒවට අදාල සියලු තොරතුරු අපිට ඕනෙ කියලා හිතන්න.. මෙන්න command එක.

SELECT * FROM Whether WHERE City = 'Galle'

තේරුනාද.. * ලකුණ දැම්මෙ සියලුම තොරතුරු ගන්න ඕන නිසා..

හරි. මම දැන් ඔයාට විස්තරයක් දෙනවා. ඒකට command එක දෙන්න බලන්න..

Employee වගුවෙ salary එක 25000 වන අයගෙ අවසන් නමයි ලිපිනයයි ඕනෙ.

ඔයා ලිව්වද.. බලන්න හරිද කියලා..

SELECT LastName ,Address FROM Employee where Salary = '25000'

ඒ වගේම අපිට පුළුවන් යම් ගානක් දීලා ඒකට අඩු , වැඩි , වැඩි හෝ සමාන මේ වගේ විධානත් මේ Where එක්ක පාවිච්චි කරන්න..
මේ බලන්න..

= Equal
<> Not Equal
> Greater than
< Less than
>= Greater than or equal
<= Less than or Equal
BETWEEN
LIKE
IN තුල

හිතමු අපි persons කියලා වගුවක age කියලා field එකක් තියෙනවා කියලා. මම දැන් ඔයාට විස්තරයක් දෙනවා. ඒකෙ command එක ලියන්න..

persons වගුවෙන් වයස අවුරුදු 30 ට වඩා වැඩි හෝ සමාන වන අයට අදාලව LastName සහ FirstName ලබා ගන්න.

AND සහ OR Operators

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

SELECT * FROM Persons WHERE FirstName = 'Wishaka' AND LastName = 'Siriwardhana.'

අපිට field දෙකක තොරතුරු දෙකක් ඕන වුනා. ඒ දෙක සත්‍ය කෙනාගෙ තමයි සියලු තොරතුරු ඕනෙ වෙන්නෙ..

ඊලගට or ගැන බලමු. හිතන්න මට ඕනෙ කියලා City කියන එක Anuradapura හෝ Plonnaruwa හරි කියන එකේ සම්පූර්ණ තොරතුරු ඕනේ කියලා.. බලන්න ඒකට අදාල මේ Command එක.

SElECT * FROM Persons WHERE City = 'Anuradhapura' OR City = 'Polonnaruwa'

දැන් අපි බලමු අලුත් field එකක් එකතු කරන්න ඕන වුනොත් ඒක කරන්න කොහොමද කියලා..
Employee field එකට Age කියලා field එකක් ඇඩ් කරන්න ඕනෙ කියලා හිතන්නකො.. මෙහෙමයි Command එක.

ALTER Table Employee ADD Address varchar (10)

Employee table එකේ තියෙන data LastName එකේ අවරෝහණ පිළිවෙලට හදන්න ඕනෙ නම් මෙහෙමයි..

SELECT * FROM Employee ORDERED BY LastName .

ඒකම අවරෝහණ පිළිවෙලට ඕන නම් මෙහෙම..

SELECT * FROM Employee ORDERED BY DESC.

UPDATE

Table එකේ විශේෂිත රෙකෝඩ් එකක තියෙන දත්ත වෙනස් කිරීම තමයි මේ UPDATE වලින් සිද්ද වෙන්නෙ..

හරි අපි මෙහෙම හිතමු. LastName Gunarathne සහ FirstName Muditha කියන කෙනාගෙ ලිපිනය Katubedda, Moratuwa කියලයි සැලරි එක 30000 කියලයි වෙනස් කරන්න ඕනෙ කියලා. බලන්නකො මේ Commands.

SET Address = 'Katubedda, Moratuwa' , salary = 30000 WHERE LastName = 'Gunarathne.' AND FirstName = 'Muditha'

DELETE

Table එකෙන් රෙකෝඩ් එකක් හරි කීපයක් හරි ඉවත් කරන්න DELETE භාවිතා කරනවා අපි.
මේක බලන්න.. galle, Mathara ජීවත් වෙන අයගෙ සියලුම තොරතුරු ඉවත් කරන්න තමයි මේ Command එක.

DELETE FROM Employee WHERE City = 'Galle' OR City = 'Mathara'

LIKE Operator

Examples ටිකකින්ම මම කියලා දෙන්නම්..

SELECT * FROM Employee WHERE City LIKE "ka%"

ඒ කියන්නෙ සිටි එක ka වලින් පටන් ගන්න නගර වල සියලුම තොරතුරු. Kadawatha , Kathaeagama... ඒ වගේ නගර.
බලන්න මේක..

SELECT * FROM Persons WHERE City LIKE "%la"

මේකෙන් කියන්නෙ සිටි වල අවසන් අකුරු දෙක la වෙන ඒවායෙ සියලුම තොරතුරු ලබා ගැනීම.

IN Operator

SELECT * From Employee WHERE LastName IN ('Senawirathne', 'Kumarasinghe' )

Last Name එක Senawirathne හා Kumarasinghe වන අයගෙ සියලුම තොරතුරු එනවා..

ඔන්න අපි අන්තිම වගේම වැදගත්ම කොටසටත් ආවා. දැන් ඔයාට table ගොඩ නගන්න පුලුවන්නෙ නේද.. අපේ database එකේ මේ වගේ Tables ගොඩක් තියෙන්න පුලුවන්. ඒ Tables අතර සම්බන්ධය ගොඩ නගන්න අපිට key ඕන වෙනවා..
මෙහෙම හිතන්න. පාසල database එකක් ගැන. ටීචර්ස් සහ ස්ටුඩන්ට් කියලා ටේබල් දෙකක් තියෙනවා.. එක් සිසුවකුගෙ පන්තිය භාර ගුරුතුමාව අපට හොයා ගන්න ඕන වෙනවා.. ඉතින් ඒ සිසුවට අදාල තොරතුරක් ඔස්සේ අපිට ටීචර්ස්ලගෙ ටේබල් එකටත් යන්න වෙනවා.. ඒකෙදි ටීචර්ස් සහ ස්ටුඩන්ට් කියන ටේබල් දෙක අතරෙ සම්බන්ධයක් තියෙන්න ඕනෙ කියන එක ඔයාට වැටහෙනවා නේද..
හරි අපි බලමු ඒ keys.

Candidate Key

සම්බන්ධයක රෙකෝඩයක් අනන්‍යව හදුන ගන්න පුලුවන් උපලක්ෂණය තමයි මේක.
බලන්න මේ ටේබල් එකේ Candidate Key එක.

Student (R_No, ID_No, Name, Add)

බලන්න R_No ඒ කියන්නෙ Registor Numbe. එක ලමයෙකුට තියෙන්නෙ එක R No එකක්. ඒ නිසා එක රෙකෝඩ් එකක් වෙන්ව හදුන ගන්න මේක පහසුයි. ID_No ත් එහෙමයි. ඒත් Name , Address මේවා නම් ලමයින් දෙන්නෙකුට, කිහිප දෙනෙකුට සමාන වෙන්න පුලුවන්.

Primary Key

Candidate Key අතරින් වගු අතර සම්බන්ධතාවය ගොඩ නැගීම සදහා යොදා ගන්න candidate key එක තමයි ප්‍රාථමික යතුර වෙන්නෙ.

Alternate Key

Candidate Key අතරින් primary key ඇරෙන්න ඉතිරි keys තමයි Alternate Key වෙන්නෙ. කියන්න බලන්න මම දීපු example එකේ Alternate Key එක.. ඔව්. ID No.

Foreign Key.

Table දෙකක් අතර සම්බන්ධතාවය ගොඩ නැගීම සදහා කිසියම් වගුවක ප්‍රාථමික යතුර ඊට සම්බන්ධ වන වගුවේ ආගන්තුක යතුර (Foreign Key) වෙනවා.
ප්‍රාථමික යතුරේ සහ ආගන්තුක යතුරේ Field Name සමාන වෙන්න ඕන නැහැ.. ඒත් දත්ත වර්ගය සමාන වෙන්න ඕනෙ..
දැන් අපි බලමු මේ key SQL Command වලදි යොදන්නෙ කොහොමද කියලා..

Unique

කිසියම් Field එකක් table එකේ අනන්‍ය යතුර විදිහට හැදින්වීම සදහා භාවිතා කරනවා.. අපි හිතමු අනන්‍ය යතුර Emp.ID කියලා. මේ බලන්න..

CREATE TABLE employee
(Emp.ID int,
LastName varchar (20),
FirstName varchar (20) ,
Address varchar (50) ,
salaty int,
UNIQUE (Emp.ID))

Primary Key

CREATE TABLE employee (Emp.ID int,
LastName varchar (20),
FirstName varchar (20) ,
Address varchar (50) ,
salaty int,
PRIMARY KEY (Emp.ID))

පාඩමේ ගැටලුවක් ඔයාට ආවොත් කමෙන්ට් එකකින් අහන්න..

HTML - 01 පාඩම.

ඔන්න මම පටන් ගන්නෙ HTML වලින්. ඔයා මේ language එක ගැන හොදටම දන්න කෙනෙක් ( පොඩි පොඩි තැන් අපහසු.) ,ටිකක් දන්න කෙනෙක්,  මුකුත්ම නොදන්න කෙනෙක් වෙන්න පුළුවන්. ඒත් මම දැන් කියලා දෙන්න යන්නෙ මේ හැමෝම 'නොදන්න අය' කියන තැන ඉදලා.. ඉතින් ඔන්න එහෙනම් අපි පටන් ගමු  HTML ඉගෙන ගන්න..

ආ.. තවත් එකක්. ඔයා දැන් නවල් එකක් කියවනවා වගේ මේක කියවන්න නම් ලෑස්ති වෙන්න එපා.. ඒක සාර්ථක නැහැ.  ඔයා මම කියලා දෙන ඒවා කම්පියුටර් එකේ නොට් පෑඩ් එකේ ටයිප් කරලා ඒක ( නමක්).html කියලා හරි (නමක්).htm කියලා හරි save කර ගෙන browser  එකෙන් ඕපන් කරලා බලන්න හොදේ..

හරි අපි පටන් ගමු. 
HTML කියන එකේ තේරුම දන්නවද ඔයා..?

HTML - Hyper Text Markup Language.

මේ HTML භාෂාව HTML Tag වල එකතුවකින් හැදිලා තියෙන නිසා මේක පරිඝනක භාෂාවක් කියලම නෙමෙයි 'Markup Language' එකක් විදිහට  හදුන්වනවා.. මේ ටැග් කියන ඒවා වෙබ් පිටුව පවතින ආකාරය විස්තර කරනවා..

•HTML Tag

HTML Tag කියලා කියන්නෙ ඈන්ගල් බ්‍රැකට්ස් වලින් ආවරණය වුන විශේෂ වචන.. මේ බලන්න.. <html> ,<body>

ඒත් එක්කම කියන්න ඕනෙ මේ html tag වල case sensitive නැහැ.. ඒ කියන්නේ... කැපිටල් සිම්පල් භේදයක් නැහැ.. ඔයා ට මෙහෙම ඕන විදිහකට කෝඩින් කරන්න පුළුවන්.. <Body> <body> <BODY> .

මේ html ටැග් බොහෝමයක් ආරම්භ සහ අවසන් කියලා යුගල විදිහට තියෙනවා.. මේ බලන්නකො...
<html> </html>
<body> </body>

ඒ ඇයි කියලා මම කියන්නම්.

<body> - පිටුවේ body කොටසේ ආරම්භය.
</body> - පිටුවේ body කොටසෙහි අවසානය.

ඒ කියන්නෙ වෙබ් පිටුවෙ බොඩි කොටස තියෙන්නෙ මේ දෙක අතර මැද. තවත් ඉස්සරහට යනකොට ඔයා දකීවි.

තවත් ටැග් ජාතියක් තියෙනවා එහෙම ආරම්භ අවසාන කියලා දෙකක් නැහැ. තියෙන්නෙ එකම ටැග් එකයි. 
මෙන්න උදාහරණ : <br> <hr>

මම පටන් ගන්නකොටම ඔයාලට කිව්වනෙ මම කියලා දෙන ඒවා note pad එකේ type කරලා browser එකෙන් බලන්න කියලා.. දන්නවද තවත් ඒ වගේ ක්‍රම දෙකක් තියෙනවා වෙබ් පේජ් එකක් හදන්න. මම ක්‍රම තුනම පැහැදිලි කරන්නම්කො..

i. Note pad භාවිතයෙන් සැකසීම.

                    මේකෙදි html tag පිළිබද පුලුල් දැනුමක් ඕනේ. ඒක ක්‍රියාත්මක කරන විදිහ මම පැහැදිලි කරානෙ මුලින්.

ii. Dream weaver , Frount page වගේ මෘදුකාංග භාවිතයෙන් සැකසීම.

                 මේවයෙදි නම් ටැග් ලියන්න ඕනෙ නැහැ.. අපිට තියෙන්නෙ අකුරු, පිංතූර, වගු ඇතුල් කරලා වෙබ්  පේජ් එක හදන්නයි.

iii. විවෘත මූලාශ්‍ර මෘදුකාංග භාවිතයෙන් සැකසීම.

                Joomla,Drupal, Wordpress කියන විවෘත මූලාශ්‍ර මෘදුකාංග භාවිතා කරලා පුලුවන්.

• html වල මූලික ටැග්

1. <html> </html>
2. <head> </head>
3. <title> </title>
4. <body> </body >

වෙබ් පිටුවෙ අන්තර්ගතය ටැග් වලින් විස්තර කරනවා.. එම ටැග් එක ක්‍රියාත්මක වන ආකාරය උප ලක්ෂණ (attribute ) වලින් විස්තර කරනවා. උප ලක්ෂනයකින් විස්තර කරන දේ  උධෘත ඇතුලෙ තමයි දාන්නෙ.. අහ් තේරුනේ නැද්ද.. හි හී. ඒ කිව්වේ.... double quotation ඇතුලෙ..

මං කියලා දෙන්නම්. බලන්නකො මේ උදාහරණය..

<hr size = "15 " align = "left" >

hr කියන්නෙ ටැග් එක.  (ඉරක් අදින්න භාවිත කරන ටැග් එක. මම ඉස්සරහට වෙනම ඔයාලට කියලා දෙනවා ඒ ගැන.)
size , align කියන්නෙ attributes . ඒ අදින ඉර ගැන විස්තර කරනවා.. ඒකෙ සයිස් එක. ඒක වමෙන් පෙන්නන්න ඕනෙ කියන එක. දැන් ඒ ගැන පොඩි අදහසක් ඔයාලට එන්න ඇති.

හරි අපි දැන් බලමු මේ ටැග් වලින් කරන්න පුලුවන් දේවල්.

1.  <html>

  අපි කෝඩින් කරන්න පටන් ගන්නෙ මේකෙන්. අපේ මුලු කෝඩින් එකම තියෙන්නෙ <html> </html > මේ ටැග් දෙක අතරයි.

මේක චුට්ටක් බලන්නකො.

<html >
  <head>
    <Title> This is my blog 
     </title>
  </head>
</html>

පේනවද.. මම මේ කරලා තියෙන්නෙ අපි හදන වෙබ් පේජ් එකේ title එක විදිහට This is my blog කියන එක දීලා තියෙනවා.. ඔයා බැලුවද මේක බ්‍රවුස එකෙන් ඕපන් කරලා.. Title bar එකේ පෙන්වනවා ඇති This is my blog කියලා. හරි නේද.. මේ title එක අනිවාර්‍යෙන් තියෙන්න ඕනෙ head ටැග් තුල තමයි හොදේ..

හරි බලන්නකො මේකත්..

<html >
  <head>
    <Title> This is my blog 
     </title>
  </head>
<body bgcolor = "#ff0000" >
<body>
</html>

අලුතෙන් එකතු වුන දේ දැක්කද. බොඩි ටැග් එක. උපලක්ෂනයක් දීලා තියෙනවා bgcolor කියලා.. මම කලිනුත් කිව්වා ටැග් එක විස්තර කිරීමක් මේ උපලක්ෂනයෙන් දෙන්නෙ කියලා. මේකෙන් කියවුනේ බොඩි වර්ණය රතු කියන එක. ඔයා කරලා බැලුවද.. මුලු පේජ් එකම රතු පාට වෙලා ඇති. වර්ණය දාපු විදිහ ගැන කලබල වෙන්න එපා.. මම ඉදිරියෙදි කියන්නම්. ඔයා මේ ටැග් සහ උපලක්ෂන ගැන විතරක් තේරුම් ගන්නකො දැනට.

•HTML Heading

බලන්නකො මේක හොදට.. ඊට පස්සෙ මම කියලා දෙන්නම්..

<html>
<body>

<h1 align = "left" > Heading 1 </h1>
<h2 align = "center" > Heading 2 </h2>
<h3 align = "right" > Heading 3 </h3>
<h4> Heading 4</h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

</body>
</html>

බ්‍රව්සර් එකෙන් ඔපන් කරලා බැලුවම ඔයාට පැහැදිලි වෙයි.. 
මේ h1, h2.. කියලා ටැග් හයක් තියෙනවා.. ඒවා තමයි මේ හෙඩින් වල සයිසස්. ලොකුම සයිස් එක h1 ත් අනිත් ඒවා ටික ටික පොඩි වෙන සයිස් කියලත් ඔයාට පෙනෙයි. බලන්න align කියන උපලක්ෂනයෙන් ඒවා තියෙන්න ඔනේ තැන කියලා තියෙනවා.. වම, දකුණ, මැද..

•Html comments

Html කමෙන්ට්ස් ( විවරණ) කියන්නෙ මොනවද කියලා අපි බලමු.

මේවා වෙබ් පේජ් එකේ පෙන්නන්නෙ නැහැ.. කෝඩින් කරන කෙනාට විතරයි පේන්නෙ.. මේ කෝඩින් ගැන මොකක් හරි විශේෂිත හැදින්වීමක්, මැසේජ් එකක්... මේකෙ කෝඩින් බලන වෙන කෙනෙකුට දෙන්න ඕනෙ උනා ම හරි නැත්නම් තමන්ටම තවත් ගොඩක් කාලෙකට පස්සෙ අයෙත් කෝඩින් බලදිදි තේරුම් ගන්න බැරි වෙයි කියලා හිතෙන දෙයක්  කියන්න අපට පාවිච්චි කරන්න පුලුවන මේ කමෙන්ට්ස්.. මේක දාන්නෙ කොහොමද කියලා මම පෙන්වන්නම්. ඔයා කරලා බලන්න. එතකොට තේරෙවි..

<html>
<body>
<!__ ICT දැනුම __>
<p> what is my blog's name ? </p>
</body> 
<html>

බලන්න.. ICT දැනුම කියන එක කෝඩින් වල විතරමයි පෙන්නන්නෙ.. පේජ් එකේ පෙන්නන්නෙ What is my blog's name? කියන එක විතරයි. කමෙන්ට් එක දාන්න භාවිත කරපු symbols ඈත් කරලා පෙන්නන්නම්.  < ! _ _ උදාහරණය _ _ > 
මේ කමෙන්ට්ස් කොල පාටින් පෙනේවි ඔයාට.

• HTML Paragraph

Html ඡේද ගැන බලමු අපි.. මම කමෙන්ට්ස් ගැන දීපු කෝඩින් උදාහරනයේ  ඔයා දැක්කද <p> කියලා ටැග් එකක්. අන්න ඒක තමයි ඡේද සදහා භාවිතා කරන්නෙ අපි.
දැන් ඔයාගෙ පොඩි අවබෝධයක් හැදිලා  තියෙනවා කෝඩින් ගැන. මම මේ උදාහරනයෙන් පස්සෙ ඊළග එකට යන්නම්. ඔයා මේකත් තේරුම් අරන් කරලා බලන්න..

<html> <body>
<P> mmmmmmmmmmmmmmmmmmmmmmmmmmm</P>

<P> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</P> 

<P> nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn </P> 

<P>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </P>

</body> </html>

*මෙන්න පේජ් එකේදි ඔයාට පේන විදිහ..

mmmmmmmmmmmmmmmmmmmmmmmm
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ඡේද හතරක්. 
ඇරපු ටැග් එක වහන්න මතක තියා ගන්න.. මුලින්ම ඇරියෙ html. ඊලගට body. ඊලගට p. 
වහනකොටත් p වැහුවා.  ඊලගට body. අන්තිමට html.

•HTML Break

ඔයා නෝට් පෑඩ් එකේ ටයිප් කරනකොට enter බට්න් එකෙන් මොකද්ද කරන්නෙ??  ඊලග පේලියට යන එක නේද.. 
ඒත් මේ html කෝඩින් කරනකොටත් ඔයා එහෙම එන්ටර් කරලා ඊලග පේලියට ගියා කියලා පේජ් එකේ එහෙම වැටෙන්නෙ නැහැ.. ඒකටත් ටැග් එකක් තියෙනවා.. ඒ තමයි <br> ටැග් එක.. මතකද මම මුල්ම පාඩමේදි උදාහරණයකට ඔයාට දුන්නා මේක තනි ටැග් එකක් කියලා.. 
මම පෙන්නන්නම් මේක යෙදෙන හැටි

<html> <body>
<p> My name is <br> Muditha <br> Prabhani. </p>
</body> </html>

දැන් බලන්න පේජ් එකේදි මේක පෙන්වන විදිහ..

My name is
Muditha
Prabhani.

බලන්න.. br ටැග් එක දාපු තැනින්  break වෙලා ඊලග පේලියට ඇවිත්.

•Horizontal line

තිරස් රේඛා ඇදීම.. ඒකට භාවිතා වෙන්නෙ <hr> ටැග් එක.. ඒකත් තනි ටැග් එකක් කියලා මම කිව්වා ඔයාට මතක ඇති.  
බලන්න මේ උදාහරණය...

<html> <body> 
<p> I'll explain you about horizontal rule </p> <hr> 
</body> </html>

පැරග්‍රාෆ් ටැග් ඇතුලෙ මම දීපු සෙන්ටෙන්ස් එක් යටින් තිරස් ඉරක් ඔයාට පේජ් එකේ පෙනේවි..

උපලක්ෂන තේරුම් කරන්න මම උදාහරණ වලට ගත්තෙත් hr ටැග් එක බව මතකද ඔයාට... මේ hr ටැග් එකට තියෙන උපලක්ශන පහක් මම කියලා දෙන්නම් ඔයාට..

i. Size

තිරස් රේඛාවෙ ඝනකම තීරණය කරන එක..

<hr size = "15">

ii. Width

තිරස් රේඛාවෙ දිග තීරණය..  මේක pixel අගයකින් කියන්නත් පුලුවන්.. ප්‍රතිශතයක් විදිහට කියන්නත් පුලුවන්..

*pixel අගයකින්
<hr width =  "550" >

*ප්‍රතිශතයක් ලෙස
<hr width = "60%" >

iii. Alignment

රේඛාව පිහිටන ස්ථානය තිරණය කිරීම..
<hr align = "left">
<hr align = "center">
<hr align = "right">

iv. Noshade

ඒ රේඛාව ඇතුලට සෙවනැල්ලක් (අළු පැහැ වර්ණයක්) එක් කිරීම
<hr size = 50 noshade>

v. Color

රේඛාවේ වර්ණය සකස් කිරීම

<hr color = "#00ff00">

*උදාහරණ නිසා මම වෙන වෙනම දැම්මට මේ ඔක්කොම එකම ටැග් එකේ උපලක්ශන විදිහට එකට දාන්න පුළුවන් හොදේ..

<hr size = "30" color = "0000ff" align = "left" >

හරි.. ඔන්න මම වර්ණ ගැන කියන්නම් ඊලඟ පාඩමේදි.. මේ කියලා දීපු ටික හොදට ප්‍රැක්ටිස් කරලා එන්නකො..

 අද පාඩමේ ඔයාට ගැටලු තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..

HTML - 02 පාඩම.

ඔන්න අද පාඩමේ මුලින්ම මම වර්ණ ගැන කියලා දෙන්නම් ඔයාට..

• Html color attribute

වර්ණයක් යෙදීමේ උපලක්ශනය තමයි මේ color කියන්නේ..

RGB වර්ණ සංකලනය තමයි අපි යොදා ගන්නෙ... ඔයා දකින්න ඇති වර්ණ වලට ඉස්සෙල්ලා පාඩම් වලදි මම ලියපු කෝඩ්..

# ff0000
characters හයක් තියෙනවා.. RGB වර්ණ  සංකලනය කියලා මම කිව්වනෙ.. Red Green Blue. පිලිවෙලින් මේ එක වර්ණයකට characters දෙකක් වෙන් වෙනවා..
O----> No color
F----> Full color

දැන් ඔයාට කියන්න පුලුවන්ද මම ඉහතින් දීලා තියෙන වර්ණය මොකද්ද කියලා.. රතු වලට අයත් characters දෙක ff . ඒ කියන්නෙ full color. අනිත් හතරම 0.  no color. ඒ කියන්නෙ මිශ්‍ර නොවුන පිරිසිදු රතු වර්ණය.. දැන් ඔයාට පුලුවන්ද කොල සහ නිල් වර්ණ ලියන්න.. ඒ characters හයට ඉස්සරහින් # දාන්නත් ඕනෙ.

කොල --> 00ff00
නිල් --> 0000ff

ඔයා o/l IT කරපු කෙනෙක් නම් මතක ඇති text book එකේ තිබුනා පිටු දෙකක්ම මේ වර්ණ කෝඩ් දීලා.. හෙක්සාඩෙසිමල් අගයන් (0-9 and A-F ) දාලා ඔයාට කැමති විදිහට වර්ණ හදා ගන්න පුලුවන්නෙ දැන්.
ඒ වගේම තව දෙයක්. ඔයාට මේකෙදි ඕන නම් වර්ණයේ නමත් පාවිච්චි කරන්න පුලුවන්..

<font color = "red">

පිටුවෙ සියලුම අකුරු වලට වර්ණයක් යොදන්නෙ මෙහෙමයි..

<html>
<body text = "#00ff00">
</body>
</hlml>

ඔයා මේ දේවල් වලට අලුත් ම කෙනෙක් නම් පුරුදු වෙන්නත් එක්ක colours කරලා බලන්න.. බොඩි ටැග් එකට colours දානවා නම් bgcolor කියලා තමයි දාන්නෙ හොදේ.. එතකොට ඔයා දීපු ඒ colour එක background colour එක විදිහට පෙනේවි..

ඒත් එක්කම තව දෙයක්.. වෙබ් පේජ් එකක් අපි පරිහරණය කරද්දි ඒකෙ background colour එක තද වර්ණයක් වුනොත් අපේ ඇස් වලට ගොඩක් අමාරුයි නේද.. ඒ නිසා background colour තෝර ගනිද්දි ලා වර්ණයන් තෝර ගන්න..

• fonts

ඔන්න තවත් වැදගත් කොටසකට අපි ආවා.. ඔයාට මතකද ඔයා microsoft word එකේ වැඩ කරද්දි bold , underline , Italic පාවිච්චි කලා.. අපි දැන් බලමු ඒ අකුරු හැඩ කිරීම් කෝඩ් වලින් කොහොමද කරන්නෙ කියලා..

මම කෙටියෙන් ඒ ටැග් ටික දෙන්නම්.. ඔයා කරලා බලන්න..

*bold - <b> </b>
*big - <big> </big>
*small - <small> </small>
*underline - <u> </u>
*code - <code> </code> ( මේකෙදි හැම අකුරකටම එකම ඉඩක් වෙන් කරනවා. )

ඊලගට අපි බලමු subscript, superscript. ඒකත් word එකෙදි කලා මතකයි නේද..

*subscript

<p> H ₂ O </p>

*superscript

<p> 1 ^st </p>

• font size

අකුරු වල ප්‍රමාණය ලබා ගන්නා ආකාරය බලමු අපි ඊලගට.. font කියන ටැග් එකේ size කියන attribute එකේ අපිට අවශ්‍ය සයිස් එක සටහන් කරන්න පුලුවන්..

Small size - 1, 2
Normal size - 3
Large size - 4, 5, 6, 7

බලන්න උදාහරණයකුත්...

<P>
<font size = "4" > My blog </font>
</p>

• List in HTML

ඊලගට අපි යන්නෙ ඡේද වලට විශේෂ සලකුණු යොදන හැටි සහ ලැයිස්තුගත කරලා ලියන්න කෝඩින් කරන හැටි දැන ගන්න..

ලිස්ට් වර්ග දෙකක් තියෙනවා.. ordered list සහ unordered list . ඔයාට මතක තියා ගන්න ලේසි වෙන්න මම මෙහෙම කියන්නම්කො.. Ordered කියන එකේ පිලිවෙලක් තියෙනවා ලැයිස්තුගත කරන්න..

මේ බලන්න..
1, 2, 3......
i, ii, iii.....
A, B, C.....
a, b, c.....

unordered list වලදි තියෙන්නෙ

Disk •
Circle °
Square

ඒ දෙකට උදාහරණ කියලා දෙන්න කලින් මට ඔයාට වාක්‍ය ඛණ්ඩයක් අර්ථ දක්වන හැටි කියලා දෙන්න ඕනේ.. ඒ කියන්නෙ definition lists.

බලන්න මේ දිහා....

My tom
       A fun game

My tom කියන එක අර්ථ දක්වලා තියෙනවා fun game එකක් කියලා..

බලමු දැන් ඒක කෝඩින් කරන්න..

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

Definition lists කියන එකට <dl> ටැග් එක භාවිතා කරනවා.. <dl> </dl>

My tom  කිව්ව එකනෙ topic එක.. ඒකනෙ අපි විස්තර කලේ.. ඒ නිසා ඒක definition topic එක.. ඒකෙ ටැග්ස් තමයි <dt> </dt>

ඊලගට a fun game කිව්වෙ අර topic එක  විස්තර කිරීම. දත්තය. ඒක තමයි definition data. ඒකෙ ටැග්ස් තමයි <dd> </dd>

හරි. තේරුම් යන්නත් එක්ක මේක බලන්නකො...

Sigiriya
       Ancient city.
Srilanka
        small country.

දැන් අපි මේ විදිහට ලියවෙන්න හදපු කෝඩ් බලමු. ටැග් දිහා හොදට බලන්න. ඔයා මෙතනදි definition topic එක  මොකද්ද..  definition   data එක මොකද්ද කියලා තේරුම් අරන් සිටීම ගොඩක් වැදගත්.. කෝඩින් එක බලද්දි නොතේරුනොත් ආයෙත් උඩට ගිහින් බලලා එන්න..

අපි මේ ලියන්න යන්නෙ definition list එකක්. ඒ නිසා මොන ටැග් දෙක ඇතුලෙද මේවා ලියවෙන්න ඕනේ?? ම්ම්... ඔව් <dl> </dl> අතරෙ.

<dl>

<dt> Sigiriya </dt>
<dd> Ancient city. </dd>

<dt> Srilanka </dt>
<dd> small country. </dd>

</dl>

හරි නේද.. කරලා බලන්නකො... තේරුම් යාවි.

දැන් අපි ordered list පැත්තට හැරෙමු. Ordered list වල ටැග්ස් තමයි <ol> </ol>

අපි බලමු කෝඩ් එකක්.

<ol>

<li> srilanka </li>
<li> india </li>

</ol>

<li> </li> මේ ටැග් දෙක අතරෙ තමයි ලිස්ට් එකේ දේවල් ලියන්න.. පිලිවෙලක් ඇතුව ලියවෙන ඒවා කියලා මම කිව්වා නේද.. සදහනක් කලත් නොකලත් එකේ ඉදලා තමයි ලිස්ට් එක වැටෙන්නෙ.. බලන්නකො..

1. srilanka
2. india

ඒත් ඔයාට ලිස්ට් එක දාන්න ඕනෙ හයේ ඉදලා කියලා හිතන්න.  අන්න එතකොට නම් ඇට්‍රිබියුට් එකක සහය පතන්න වෙනවා.. srart කියන එකෙන් තමයි අපිට ඕනෙ කීයෙ ඉදලද කියලා සටහන් කරන්න ඕනෙ..

මේ බලන්න...

<ol type = 1 start = 6 >

<li> srilanka </li>
<li> india </li>

</ol>

එතකොට මෙන්න මේ විදිහයි..

6. srilanka
7. india

ඔයාට ප්‍රශ්නයක් ආව නේද ඇයි මම type කියලා ත් එකක් දාලා තියෙන්නෙ කියලා.. ඒ තමයි ලිස්ට් එක යන්නෙ මොන වර්ගෙන්ද කියලා.. 1,2,3.. ඒ විදිහට යන්න ඕන නම් 1 දාන්න.. a,b,c.. විදිහට නම් a.  A,B,C... ඕනෙ නම් A දැම්මම හරි. පටන් ගන්න ඕනෙ තැන කොතන  ඉදලද.. කීයේ ඉදලද කියලා start එකෙන් දෙන්න..

හරි එහෙනම් අපි බලමු unordered list.
ටැග්ස් තමයි <ul> </ul>

මේ ලිස්ට් එක දිහා බලන්න.. සිංහලෙන්ම ලිස්ට් එකක් ගමු අපි බලන්න..

මගේ විෂයන් වන්නේ..
• තොරතුරු තාක්ෂණය.
• ජීව විද්‍යාව.
• භෞතික විද්‍යාව.

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

බලන්න කෝඩින එක.

<html> <body>

<h3> මගේ විෂයන් වන්නේ.. </h3>
<ul type =disk >
<li> තොරතුරු තාක්ෂණය. </li>
<li> ජීව විද්‍යාව. </li>
<li>භෞතික විද්‍යාව. </li>
</ul>

</body> </html>

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

fruits are,
       •Mango.
       •Banana.
       •Apple.

Other Teledramas
   iv. T20.
    v. Neranjana.

1. Institue
           ° Education.
           °Commercial.
                           b. Foreign.
                           c. Local.

(අන්තිම එකට බය වෙන්න එපා. ලිස්ට් එකක් ඇතුලෙ ලිස්ට් එකක්. කරන්න. ඔයාට පුලුවන් ඒක.)

•Pre formatted text.

මේකෙදි කරන්නෙ ඡේදයක්, ඒ සකස් කරන විදිහටම වෙබ් පිටුව තුල පෙන්නනවා.. ඔයාට මතක ඇති මම කිව්වා නෝට් පෑඩ් එකේ අපි enter කලත් space 10 ක් තියලා ටයිප් කලත් පේජ් එකේ එහෙම පෙන්නනෙ නෑ කෝඩින් කරන්න ඕනෙ කියලා.. පෑඩ් එකේ අපි කරන විදිහටම වෙන්න එහෙම යොදා ගන්න පුලුවන් ටැග් එකක් අදුන්වලා දෙන්නයි යන්නෙ..
මේ  <pre> ටැග් එක.

පොඩි උදාහරණයකට යමු. හිතන්න ඔයාට ඕනෙ කියලා my name කියන වචන දෙක අතර space හයක් තියන්න ඕනෙ කියලා.. මෙන්න මෙහෙමයි කෝඩින්   එන්නෙ..

<p>
<pre> my      name </pre>
</p>

මේ ටැග් දෙක ඇතුලෙ කරන දේවල් එහෙමම පේජ් එකේ සටහන් වෙනවා..

• Address Tag

Address ලියන්නත් ටැග් එකක් තියෙනවා.. උදාහරණයකින්ම පෙන්නන්නම්කො...

<Address>
A.B.C. Wirarathne. <br>
No. 34 <br>
George street <br>
Badulla.
</Address>

• HTML  Image

වෙබ් පේජ් සදහා images එකතු කිරීමයි මේ කියලා දෙන්න යන්නෙ..

ඉස්සෙල්ලම කියන්න දෙයක් තියෙනවා.. ඔයාගෙ වෙබ් පේජ් එකේ නම  max.html කියලා හිතමු. ඔයා ඒ වෙබ් පේජ් එකට එකතු කරන්න ඉන්න image එකත් තියෙන්න ඕනෙ ඒ පේජ් එක save කරලා තියෙන folder එකේමයි. ඒ folder එක ඇතුලෙම image කියලා තව folder එකක් හදලා ඒකේ තියෙන්නත් පුලුවන්. එතන ඉදලා හරියට පාත් එක ලියන එක තමයි වැදගත්ම..

අපි හිතමු max.html කියන පේජ් එක සේව් කරලා තියෙන ෆෝල්ඩර් එකේම image කියලා folder එකක flower1.jpg  කියලා image එකක් තියෙනවා කියලා. අපිට දැන් ඒ image එක වෙබ් පේජ් එකට දාන්න ඕනේ.. මේ බලන්න කෝඩින්..

<html > <body>
<img src = "image/flower1.jpg">
</body> </html>

ටැග් එක img . attribute එක src . හොදට බලන්න close ටැග් එකක් නැහැ හොදේ.. පාත් එක දීලා තියෙන විදිහ බලන්න.. image folder එක ඇතුලෙ තියෙන flower1.jpg .

flower1.jpg කියලා විතරක් දෙන්න නම් max.html කියන වෙබ් පේජ් එක අපි save කරලා තියෙන තැනට සමාන්තරවම  flower1.jpg කියම image එක save වෙලා තියෙන්න ඕනෙ.
img ටැග් එකට යෙදෙන attributes ගැන මම කියලා දෙන්නම් ඊලගට...

<img src = "image/flower1.jpg" alt = "rose flower" align = "top" width = 200  border = 2 hspace = 30 vspace= 10 >

හරි අපි එකින් එක බලමු. src කියලා දුන්නනෙ.

ඊලගට alt. ඔයා දැකලා තියෙනවද වෙබ් පේජ් එකක image එකක් උඩට cursor එක ගෙනියනකොට ඒ image එකේ නමක් පෙන්නනවා.. අන්න ඒ විදිහට නමක් දෙන්න අපිට alt එකෙන් පුලුවන්.

ඊලගට align. ඒක නම් කලින් පාඩමකදි මම කියලා දුන්නා.. image එක පිහිටන්න ඕනෙ කොතනින්ද කියලයි කියවෙන්නෙ.. මේකෙ මම දුන්නෙ. top එකෙන්.

width & hight කියලා දෙකක් තියෙනවා.. image එකේ උසයි පළලයි. ඔයා හොදට මතක තියා ගන්න උසයි පලලයි දෙකම දෙන්න යන්න එපා. එකක් දෙන්න. ඒ ඇයි දන්නවද.. අපි උස දුන්නොත් ඒ උසට හරි යන්න image එකේ පලල හැදෙනව.. පලල දුන්නොතුත් එහෙමයි. ඒත් දෙකම දුන්නොත් අපි කියම විදිහට උස පලල හැදිලා image එක විකෘති වෙනවා..

ඊලගට border එක. Image එකට මම 2 ක border එකක් දීලා තියෙනව.

hspace. ඒ කියන්නෙ horizontal space. තිරස් දුර. අපේ image එකේ ඉදලා පේජ් එකේ කෙලවරට තියෙන්න ඕනෙ තිරස් දුර.

Vertical space. සිරස් උස.

හොදයි ඔයා images ඔයාගෙ වෙබ් පේජ් එකට දාලා බලන්නකො මේ වගේ..

වෙබ් පේජ් එකේ පසුබිමට image දාන්න ඕනෙ නම් මේ විදිහයි...

<html>
<body background = image/sea.jpg>
</body>
</html>

අපි ඊලග පාඩමේදි බලමු link ගැන...

අද පාඩමේ ඔයාට ගැටලු තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..

HTML - 03 පාඩම.

• HTML Link

Internet එකේ සැරිසරන ඔයාට ලින්ක් ගැන නම් අමුතුවෙන් විස්තරයක් ඕන නැහැනෙ නේද..
හරි. එක් වෙබ් පිටුවක තියෙන වාක්‍ය ඛණ්ඩයක් හෝ පිංතූරයක් වෙනත් වෙබ් පිටුවකට සම්බන්ධ කරන්න අපි යොදා ගන්නවා මේ ලින්ක්..

ටැග් තමයි.... <a> </a>
ඇට්‍රිබියුට් තමයි... href

(එච් රෙෆ්. ඒ කියන්නෙ Hypertext reference. )

•Hyper Link - අධිසම්බන්ධය

කිසියම් වාක්‍ය ඛණ්ඩයක් හෝ පින්තූරයක් මත click කිරීමෙන් වෙනත් ස්ථානයක් හා සම්බන්ධ වේ නම් එම සම්බන්ධය අධි සම්බන්ධයක් ලෙස හදුන්වනවා..

මේ සම්බන්ධතාවය ගොඩ නැගීමට  ක්‍රම තියෙනවා..
දෙකක් මම කියන්නම්...

i. URL link.
ii. Web page link.

හරි අපි එකින් එක තේරුම් ගමු..

i. URL link

මේකෙදි වෙනත් වෙබ් අඩවියකටයි සම්බන්ධ වෙන්නෙ.. අපි හිතමු අපිට ඕනෙ ගූගල් වෙබ් සයිට් එකේ ලින්ක් එක අපේ පේජ් එකේ දාන්න කියලා.. ඉස්සෙල්ලම ඔයා මේ කෝඩින් බලන්න..

<html>
<body>
    <p>
<a href  = "http://www.google.lk"            target = "blank"> Google Website </a>
    <p>
</body>
</html>

ඔයා සමහර තැන් වලදි දැකලා ඇති "මෙතැනින් යන්න" කියලා දීපු ලින්ක්. ඒ වචනෙ උඩ ක්ලික් කරපු ගමන් ඒ යන්න ඕන තැනට යැවෙනවා.. ඒ වගේ තමයි මේක. මේකෙදි පේනවා නේද Google Website කියලා.. අන්න ඒක තමයි වෙබ් පේජ් එකේ දි අපිට පෙන්නන්නෙ.. ඒක උඩ click කලාම http://www.google.lk කියන සයිට් එකට යැවෙනවා.. තේරුනා නේද..

ඊලඟට ඔයා දකින්න ඇති මේ කෝඩින් වල අලුත් ඇට්‍රිබියුට් එකක්. target කියලා.

ඔයා ලින්ක් එකක් උඩ ක්ලික් කලාම ඔයාට මතක ඇති ඒ ඕපන් වෙන සයිට් එක හරි පේජ් එක හරි වෙනම ටැබ් එකක ඕපන් වෙනවා.. එහෙම නැත්නම් ඒ ටැබ් එකේම ඕපන් වෙනවා.. අන්න ඒක තමයි මේ ටාගට් කියන එකෙන් පෙන්නන්නෙ.

* වෙනම ටැබ් එකක ඕපන් වෙන්න ඕනෙ නම් "_blank" කියලා දාන්න target කියන එකට..

* ඒ ටැබ් එකේම ඕපන් වෙන්න නම් "_self" කියලා දෙන්න target කියන එකට..

ii. Web page link

ඒ වෙබ් සයිට් එකේම වෙනත් වෙබ් පේජ් එකකට සම්බන්ධ කිරීමක් තමයි මේකෙදි  කරන්නෙ..
අපි හිතමු අපිට තව වෙබ් පේජ් එකක් තියෙනවා butterfly.html කියලා..
අපිට දැන් ඒකෙ ලින්ක් එක අපේ මේ පේජ් එකට දෙන්න ඕනෙ කියලා හිතන්න..
බලන්න කෝඩින්.

<html>
<body>
<p>
<a href = "butterfly.html" target = "_self">
Click here.
</a>
</p>
</body>
</html>

Click here කියන තැන click කලාම butterfly.html කියන පේජ් එක ඕපන් වෙන්නයි දීලා තියෙන්නෙ ලින්ක් එක.

•HTML Table

වෙබ් පේජ් එකක් ඇතුලෙ වගු ගොඩනගන හැටියි මේ කියලා දෙන්න යන්නෙ.. ටේබල් එක ඇදෙන්න කෝඩින් කරන්නෙ <Table> </Table> මේ ටැග් දෙක අතරෙයි.
ඒ ටැග් දෙක ඇතුලෙ භාවිතා කරන ටැග් මම පහලින් පෙන්නන්නම්.. ලිස්ට් හැදුවා වගේ තමයි මේකත්..

<tr> </tr> - Table row.
<th> </th> - Table header data.
<td> </td> - Table data.

ඔයා හොදට තේරුම් ගන්න උත්සහ කරන්න. මේක out put එන විදිහ දැකලා තේරුම් ගන්න ලේසි එකක්. ඒත් මට මෙතන ඔයාට ඒක පෙන්නන්න විදිහක් නැහැ මම මේ බ්ලොග් ලිපි ලියන්නෙ html පාවිච්චි නොකර නිසා..
ඒ නිසා ඔයා මේවා කරලා බලන ගමන් තේරුම් ගන්න උත්සහ කරන්න හොදේ..
බලන්නකො මේ කෝඩින් එක කරලා..

<html>
<body>
<table>
       <tr>
              <th> Name </th>
              <th> Age </th>
        </tr>
         <tr>
                 <td> Supun </td>
                  <td> 55 </td>
         </tr>
</body>
</html>

ඔන්න මම පිලිවෙලට කියන්නම්.. ඔයා තේරුම් ගන්න..
table ටැග් එක open කලා.. ඒක ඇතුලෙ tr. table row එකක් open කලා.. ඒක ඇතුලෙ table header data එක විදිහට name දැම්මා.
table header ටැග් එක වැහුව නිසා ඊලග කොටුවට ඉබේම යැවෙනවා. ඒ යැවෙන කොටුවෙත් header එකක් ලියන්න ඕනෙ අපිට Age කියලා. ඒ නිසා table header data ටැග් එකක් open කලා.. ඒකෙ දැම්මා Age කියලා.. ඒ row එක ඉවරයි. (ඔයාට තව ඕනෙ නම් තවත් header දාන්න..)
ඒ row එක close කලා.. තවත් row එකක් open කලා.. මේ දැන් ලියන්න යන්නෙ අලුත් row එකක් table එජේ කලින් එකට පහලින්. Table data එකක් ලියන්නයි යන්නෙ.  (මේක ලියවෙන්නෙ name කොටුවට පහල කොටුවෙ කියලා තේරෙනවා නේද..)
table data එකක් open කලා.. ඒකෙ supun කියලා දැම්මා.. ඒක close කලා.. ඊලග කොටුවට යැවෙනවා.. ඒකෙ 55 දැම්මා.. row එක වැහුවා.. table එක close කලා.. හරි නේද..

Table ටැග් එකට යොදන උපලක්ශන තමයි දැන් මම කියලා දෙන්නෙ..  බලන්නකො මේක...

<table border = 2 align = "center">

border සහ align දැන් ඔයාලට පුරුදු ඇට්‍රිබියුට්ස් නිසා හදුන්වාදෙන්න ඕන නැහැනෙ නේද..

අපේ ටේබල් එකට topic එකක් දෙන්න ඕන නම් ඒකට ටැග් එකක් තියෙනවා caption කියලා.. අපි හිතමු topic එක Srilanka කියලා.. කෝඩින් මෙහෙමයි...

<caption align =" top" > Srilanka </caption>

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

* Cell padding

ටේබල් එකේ දාරයයි අකුරුයි අතර පරතරය තියන්න අපි මේ ඇට්‍රිබියුට් එක පාවිච්චි කරනවා.. මෙහෙම..

<table border ="1" cellpadding = "10">

*Cell spacing

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

<table border ="1" cellspacing = "10">

ටේබල් එක කොයි තරම් පලල වෙන්න ඕනෙද කියලා අපිට width විදිහට දෙන්න පුලුවන්.. ඒක pixel වලින් දුන්නොත් නියත අගයක්. ප්‍රතිශතයක් විදිහට දුන්නොත් ඔයාගෙ browser එක අනුව වෙනස් වෙනවා.. මේ ක්‍රම දෙකටම පුලුවන්..

<table width = 800 >
<table width = 60% >

*ටේබල් එකක කෝශ කීපයක් එකතු කරලා තනි කෝශයක් තියන්න ඕන වෙන අවස්තාවන් තියෙනවා නේද..
ඒකට rowspan සහ colspan පාවිච්චි කරන්න පුළුවන්..

තිරස් අතට කොටු දෙකක් එකතු කරලා ඒකෙ Country  කියලා table header එකක ලියන්න ඕනේ කියමු.
මෙහෙමයි.

<th colspan = "2"> Country </th>

සිරස් අතට කොටු දෙකක් අල්ලලා 456 කියන එක table data එකක් විදිහට ලියන්න ඕනෙ කියමු.

<td rowspan = "2"> 456 </td>

•Table සදහා background colours සහ images ඇතුල් කිරීම..

මෙවා ඇතුල් කරන්නේ table ටැග් එකටමයි.. බලන්න..

<table border = "1" bgcolor = "red">

Background සදහා අපි යොදා ගන්න ඉන්න image එකේ නම rose.jpg කියලා හිතන්න..

<table border = "1" background ="rose.jpg" >

ඔයා කරලා බලන්න එහෙනම්...

• HTML Multimedia.

Multimedia යටතේ පහතින් මම දාලා තියෙන extension සහිත file ඇතුල් කරන්න පුළුවන්..

.swf
.wav
.mp3
.mp4
.mpg
.wmv
.avi

°Audeo ඇතුල් කරන්නෙ මෙහෙමයි..

<html> <body>

<audio controls>

<sourse src = "hithumanaapen.mp3" type = "audio/mpeg" >

</audio>

</body> </html>

°Video ඇතුල් කරන්නෙ මෙහෙමයි..

<html> <body>
<video width = "400" controls >
<sourse src = "littlestar.mp4" type = "video/mp4" >
</video>
</body> </html>

• Link colour

ඔයා ගූගල් සර්ච් කරනකොට දැකල තියෙනවද ඔයා visit කරපු link වෙන පාටකින් පෙන්නනවා.. ඔයා නොබලපුවා නිල් පාටින්.. දැනට click කරපු එක තවත් පාටකින්..
මෙන්න මේක කොහොමද කෝඩින් කරන්නෙ කියලයි මම කියලා දෙන්නම්..

බලන්න මේක..

<body Link = "#33CC00" Vlink = "#CC0099" Alink = "#ffff00">

Link, Vlink, Alink කියවෙන්නේ...

Link - Un visited link.
Vlink - Visited link.
Alink - Activated link.

HTML ඊලඟ  පාඩමෙන් ඉවර වෙනවා .

අද පාඩමේ ඔයාට ගැටලු තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..

HTML - 04 පාඩම.

•Frames

වෙබ් පිටුවක් රාමු වලට බෙදුවට පස්සෙ ඒ එක එක රාමුවට වෙන වෙබ් පිටු ආදේශ කරන්න පුලුවන්.
උස අතට වගේම හරස් අතටත් හදන්න පුලුවන්..

ඔයා හිතන්න මේ මගේ වෙබ් පිටු තියෙන folder එක කියලා.. ඒකේ මේ වෙබ්පිටු තියෙනවා..

°School.html
°Sun.html
°Mudi.html
°Myhome.html

දැන් අපි මේ වෙබ් පිටු frame විදිහට පාවිච්චි කරලා අලුත් වෙබ් පිටුවක් හදන්නයි යන්නෙ.. මේ කෝඩින් බලන්නකො ඔයා.. ඊට පස්සෙ මම විස්තර කරන්නම්..

<html>

<frameset rows = 25%, 50%, 25%>

<frame src = "School.html">
<frame src = "Sun.html">
<frame src = "Mudi.html"

</frameset >

</html>

බලන්න.. දැන් ඔයා අලුතින් හදන වෙබ් පේජ් එක තිරස් අතට කොටස් තුනකට බෙදිලා.. මුල්ම එකටයි අන්තිම එකටයි ඉඩ 25% ගානෙ. මැද එකට 50%. 
මම දීලා තියෙන පේජ් frame විදිහට ඒ පිලිවෙලට ඒවා ආදේශ වෙලා.. හරි නේද..
ඔයත් කරලා බලන්න.. ඒත් ඔයා ආදේශ කරන්න ඕනේ ඔයා හදපු ඔයාගෙ වෙබ් පේජ් හොදේ..
ප්‍රතිශතයක් විදිහට වගේම සංඛයා  විදිහටත් ඉඩ වෙන් කරන්න පුලුවන්.  මේ බලන්න..

<frameset rows = "100, 200, 250" >

ඒ වගේම ප්‍රතිශතයක් විදිහට ඉඩ දෙකක් වෙන් කරලා අනිත් ඉඩ ඉබේ හැදෙන්න දෙන්නත් පුලුවන්... මේ බලන්න..

<frameset rows = 40%, 40%, * ">

Frame තුනක් නෙමේ කැමති ගානක් ඔයාට හදා ගන්න පුලුවන්..

ඔයා මේ විදිහට ප්‍රතිශත හරි සංඛයා විදිහට හරි ඉඩ වෙන් කලා වුනත් ඔයා බ්‍රවුසර් එකෙන් ඕපන් කලාම ඔයාට පුලුවන් එහෙට මෙහෙට ඇදලා ඒවයෙ ඉඩ වෙනස් කරන්න.. එහෙම කරන්න බැරි වෙන්න frame එකක් නිශ්චල වෙන්න කෝඩින් කරන්නෙ මෙහෙමයි..

<frame noresize  = "noresize" src = "Mudi.html" >

තිරස් වගේම සිරස්වත් ෆ්‍රේරේම් ආදේශ කරන්න පුලුවන් කියලා මම කිව්වනෙ.. බලන්න මේ කෝඩින් එක තේරුම් අරන් කරන්න..

<html>
<frameset rows = "50%, 50% >
      <frame src = "School.html">
       <frameset cols = "25%, 75%" >
              <frame src = "Sun.html">
              <frame src = "Mudi.html">
        </frameset >
</frameset >
</html>

මම මේ html frame ඉගෙන ගන්න කාලෙ ප්‍රැක්ටිස් කරන්න මෙහෙම දෙයක් මම හිතල කලා.. පේජ් පහක් හැදුවා බොඩි කලර් එක නිල්, කහ, රතු, සුදු, තැඹිලි දාලා. ඊට පස්සෙ සිරස් තීරු හයක් බෙදෙන්න අලුත් පේජ් එකක ෆ්‍රේම් කෝඩ් ලිව්වා.. ආදේශ කලා අර පේජ් පහ. අන්තිම සිරස් තීරුව හරස් අතට පහකට බෙදලත් කෝඩ් ලියලා ෆ්‍රේම් ආදේශ කලා..
මොකද්ද කියලා ඔයාට තේරුම් ගන්න පුළුවන්ද.. ඔව්. ඒ බෞද්ධ කොඩිය. හොද අවබෝධයක් ආවා ෆ්‍රේම් හසුරවන විදිහ ගැන.

•Forms

Database එකකට data ඇතුල් කරන්නත්, දත්ත පිටතට ලබා ගන්නත් තමයි මේ form නිර්මාණය කරන්නෙ..

අපි හදමු form එකක්, name එකයි address එක ගන්නයි..
බලන්නකො මේ කෝඩ්ස්.. මම පැහැදිලි කරන්නම් ඊට පස්සෙ..

<html> <body>

<form>
Your Name :
<Input type = "text" name = YN> <br>
Address :
<Input type = "text" name = AD>
</form>

</body> </html>

Form එකක් හදන්න යොදන්නෙ form ටැග් එක.. input කරන type එක text . මේ වගේ ටයිප්ස් තව තියෙනවා.. මම ඔයාට තව ඉස්සරහදි කියලා දෙනවා.. name YN . ඒ කියන්නෙ මේකට එන්ටර් වෙන දේ ඩේටාබේස් එකේ ගිහිල්ලා වැටෙන්නෙ YN කියන එක යටතෙ. ඔයාට yn නෙමෙයි කැමති විදිහකට දෙන්න පුලුවන් ඒක..

*Radio buttons දාන්නෙ මෙහෙමයි.

<input type = "radio" name "sex" >

Output එක එන්නෙ මෙන්න මෙහෙම..

° Male
°Female

මේ radio buttons වලින් එකක් විතරක් තොරන්න පුළුවන්..

*ඔයා දැකලා තියෙනවා නේද check box. කෝඩින් මෙහෙමයි..

<form>
Novels.
<input type = "checkbox" name = "Books" value = "Novels" >
</form>

*Submit button

ඊලගට ඔයාට කියලා දෙන්නම් submit button එකක් හදන්න කෝඩ් ලියන්නෙ කොහොමද කියලා.. ඉස්සෙල්ලම බලලා ඉන්න මේ කෝඩ් එක...

<html> <body>

<form name = "input" action = "info.html" method = "get">

User Name :
<Input type = "text" name = "user">
<Input type = "submit" value = "submit">

</form>
</body> </html>

ඔයා මේ කෝඩින් එක කරලා බලන්න.. ටෙක්ස්ට් කරන්න පුලුවන් කොටුවක් එක්ක submit button එකක් ඇවිත් ඇති.. ඔයාට ප්‍රශ්න දෙකක් එන්න ඇති..

එකක් action කියලා attribute  එකක පේජ් එකක් දීලා තියෙන්නෙ ඇයි කියලා.. මේ User Name කියන බොක්ස් එකට input කරන information යන්නෙ ඒ මම සදහන් කරපු පේජ් එකට.. ඒකත් අපි හදන එකක් හොදේ..

හරි. ඊලග ප්‍රශ්නය තමයි method කියන attribute එක. මේ method කියන එකට get භාවිතා කරනකොට text box එකට ඇතුල් කරන දේ address bar එකේ පෙන්නනවා.. ඒත් method එකට get කියලා දැම්මොත් එහෙම පෙන්නන්නෙ නැහැ.. ඔයා කරලම බලන්නකො.. තේරේවි..

ඊලගට මම කියලා දෙන්නම් text area එකක් හදන විදිහ.. කෝඩ් එක බලන්න....
ඔන්න මම සිංහලෙන්ම ටෙක්ස්ට් ඒරියා එක දානවා..

<html> <body>

<p> HTML යනු.. </p>
<textarea rows = "10" cols = "30">

Markup Language එකකි.

</textarea>

</html> </body>

ඒකත් කරලා බලනකෝ.. text area එකේ ප්‍රමාණය ඔයාට වෙනස් කර ගන්න පුළුවන් හොදේ..

•Meta tag

ඔයා ගූගල් සර්ච් කරනකොට ඔයා ඔයාට හොයන්න ඕන දේ නම ටයිප් කරනවා නේද.. ඊට පස්සෙ ඒකට සම්බන්ධ වෙබ් පේජ් ටික එනවා.. දැන් මේ ඔයා හදන පේජ් එකත් අනිත් අය මේ මේ වචන වලින් හොයනකොට එන්න ඕනෙ කියලා ඔයා තීරණය කරන්න ඕනෙ මේකෙදි.. ඒ වචන ටික.. ඒවා තමයි දැන් අපි මේ මෙටා ටැග් එකෙන් දෙන්නෙ..
බලන්න මේ කෝඩ්..

<meta name = "Keywords" content = "html", "ict", "cording" >

මේ විදිහට key words ගොඩක් දෙන්න පුළුවන්..

ම්ම්... අවසානයට ආවා අපි. ඔයා මුල ඉදලා අවධානයෙන් ඉගෙන ගත්තා නම් දැන් ඔයාට තනියම වෙබ් පේජ් එකක් හදන්න පුලුවන්..

ඔයාට ගැටලු තියෙනවා නම් කමෙන්ට් එකකින් අහන්න..

***********************************

ICT දැනුම blog එකේ ආරම්භය මම HTML වලින් ගත්තා.. තව ඉදිරියට ඔයාට මම තව දේවල් කියලා දෙන්න බලාපොරොත්තු වෙනවා.. ICT වල වෙනත් කොටස් ගැන...

මේ IT දැනුමෙන් මාව පෝෂණය කලාට ගොඩාක් ස්තූතිවන්තව මතක් කරනවා මගේ IT ගුරුපියාණන්, අනුර බණ්ඩාර සර්.  සික්සා - අනුරාධපුර.