HTML #4

මේ ලිපියෙන් පොඩ්ඩක් Advance දේවල් ටිකක් කරමු.

navigation එකක් හදමු..

මම eminem ගැන Wikipedia site එකේ search කරාම ආපු home page එක තමයි මේ.මේ page එක තරමක් විශාලයි..රතු පාටින් කොටු කරලා පෙන්නලා තියෙන්නේ මේ page එකේ තියෙන සියලුම main topics සහ sub topics සාරාංශ කරලා page එකේ මුලටම දාල තියෙන විදිහ.

Screenshot_13Screenshot_14

උදාහරණයකට මට අවශ්‍යනම් මට Artistry ගැන විස්තර, page එක පහලට scroll නොකර මේ navigation එක බාවිතා කරලා කෙලින්ම අවශ්‍ය තැනට යන්න පුළුවන්..මේක html tag එකකින් කරන වැඩක්..එක කරන්නේ කොහොමද කියල බලමු.

මේ තියෙන්නේ මම ඒ විදිහට හදාගත්ත paragraphs තුනක්.දැන් මට උඩින් navigation එකක් හදන්න ඕනි මේ paragraph 3 ට පහසුවෙන් navigate වෙන්න. එකට මම මුලින්ම කරන්නේ එක් එක් header එකට නමක් දෙනවා..ඒක කරන්නේ මේ විදිහට..

Screenshot_16

දැන් මට අදාළ නම පාවිච්චි කරලා ඕනෑම තැනක නමට අදාළ header එක,ඒ header එකට අදාල paragraph එක refer කරන්න පුළුවන්…

දැන් navigation එක හදමු..

navigation එකත් අපිට පෙන්න ඕන දෙයක්,ඒ නිසා එක තියෙන්න ඕනත් body එකේ,අපි navigation එක දාන්නේ උඩටම,අවශ්‍යනම් පහලටත් දාන්න පුළුවන්..ඒ නිසා body එකේ උඩින්ම අපි මේ විදිහට අපි හදාගත්ත නම් වලින් links හදනවා.links හදන විදිහ කලින් අපි කතා කරා.

Screenshot_9

මෙහි විශේෂත්වය මේවා link කරන්නේ තවත් වෙබ් අඩවියකට හෝ වෙබ් පිටුවකට නෙවෙයි.එකම පිටුවේ විවිධ ස්ථාන වලට..ඒ නිසා අපි ” # ” සලකුණ යොදාගන්නවා.” # ” සලකුණෙන්  ” වෙබ් පිටුවේ කොතන හෝ තැනක ” කියන දේ තමයි සංකේතවත් වෙන්නේ..

උදාහරණයකට <a href=”#life”> වලින්  කියන්නේ වෙබ් පිටුවේ life කියන නම තියෙන තැනට link එකක් හදන්න කියන එක.

email address එකකට link එකක් හදන්නේ කොහොමද..

සාමාන්‍ය link එකක් යොදන විදිහට email address එකකට link එකක් හදන්න බෑ.ඒකට අපි සාමාන්‍ය ලින්ක් එකටම පොඩි දෙයක් එකතු කරනවා.

mailto: email address එක..  මෙන්න මේ mailto + : (colon ) එකට පස්සේ තම email එක type කරන්නේ..

Screenshot_10

tool tip එකක් හදන විදිහ..

ඔබ දැකල ඇති සමහර ලින්ක් click කරන්න යනකොට link එක ලග පොඩිවට tip එකක් එනවා මොකද්ද මේ link එක,මේක කොහෙටද  යන්නේ වගේ ඒවා …

උදාහරණයකට Facebook කියල tip එකක් ඇවිත් තියෙනවා link එක උඩ..

Screenshot_11

මේක හදන්න කරන්න තියෙන්නේ පොඩි දෙයක්…සාමාන්‍ය link tag එකටම title කියල attribute එකක්  එකතු කරන එක විතරයි..

Screenshot_17

Screenshot_12

දැන් links ගැන දැනගත යුතු සියල්ලම වගේ අවසන්..tables,list ගැන ඊලග post එකෙන් කතා කරලා ඒවට styles දාන්නේ කොහොමද,ඒ කියන්නේ CSS පටන්ගන්නවා…..

Source codes මෙතනින් ගිහින් download කරගන්න පුළුවන්..

git

8094122684_9ffbdbe0c9

 

 

 

 

 

Comment එකක් දාගෙනම යන්න……ජය වේවා!!

Advertisements

3 thoughts on “HTML #4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s