නිපුනණතාව 10 - Multi media තාක්ෂණය උපයෝගී කර ගනිමින් වෙබ් අඩවි සංවර්ධනය කිරීම

Introduction

ලෝක විසිරි වියමන (WWW)

අන්තර්ජාලය මගින් සපයන සේවාවන් අතර වඩාත් ජනප්‍රිය සේවාවක් ලෙස World Wide Web (WWW) හඳුන්වන්න පුළුවන්.Computer Servers තුළ ගබඩා කර ඇති විද්‍යුත් ලේඛන සමූහයක එකතුවක් ලෝක විසිරි වියමන ලෙස හඳුන්වනවා මෙම විද්‍යුත් ලේඛන වෙබ් අඩවි ලෙස හඳුන්වනවා.ප්‍රවෘත්ති අ ධ්‍යාපන ව්‍යාපාරික සමාජීය හා සෞඛ්‍ය ආදී සෑම අංශයකටම අදාළ තොරතුරු මිලියන ගණනක් වෙබ් අඩවි ලෙස ලෝක විසිරි වියමන තුළ තිබෙනවා

මෙම වෙබ් අඩවි තුල අන්තර්ගත තොරතුරු සොයා බැලීමටවෙබ් අතිරික්සුව (WEB Browser) නම් වන මෘදුකාංගයක් අවශ්‍ය වෙනවා.

වෙබ් අතිරික්සුවක් කියන්නේ පරිගණක යෙදුම් මෘදුකාංගයක් (Application Software).

තමා කැමති වෙබ් අතිරික්සුවක් පරිගණකයේ ස්ථාපිත කරගෙන අවශ්‍ය අවස්ථාවේ දී වෙබ් අඩවි වලින් තොරතුරු සොයා ගැනීමට භාවිතා කළ හැකි වෙනවා.

වෙබ් අඩවි ආකාර (types of website)

අන්තර්ජාලයෙහි පවතින වෙබ් අඩවි ඒවායෙහි ස්වභාවය හා අරමුණ අනුව වර්ග කරන්න පුළුවන්.

උදාහරණ විදියට

තොරතුරු හා ප්‍රවෘත්ති වෙබ් අඩවි
පෞද්ගලික වෙබ් අඩවි
අධ්‍යාපනික වෙබ් අඩවි
ව්‍යාපාරික වෙබ් අඩවි
පර්යේෂණ වෙබ් අඩවි

මෙම වෙබ් අඩවිවල අභිමතාර්ථය පිළිබඳ සාකච්ඡා කරනවා නම්

සේවාලාභීන්ට හා වෙනත් පාර්ශවයන්ට තොරතුරු සැපයීම
ආයතනයෙහි ව්‍යාපාරික කාර්යයන් ප්‍රචාරය කිරීම
භාණ්ඩ හා සේවා අලෙවි කරගැනීම
සේවාලාභීන්ට ආයතනය සමග තොරතුරු හුවමාරු කරගැනීම ප්‍රධාන වෙනවා

වෙබ් පිටුවක් පරිශීලනය කිරීමෙන්

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

Creating Web Pages using HTML

What is HTML?

HTML කියන්නෙත් වෙබ් පිටු නිර්මාණයට යොදාගන්නා පරිගණක භාෂාවක්. නමුත් නූතන පරිගණක භාෂාවල අඩංගු ඉහල තත්වයේ අංග මෙහි අඩංගු වෙන්නේ නෑ . HTML ටැග් notepad මෘදුකාංගය භාවිතයෙන් ලියන අතර ඉන්පසු ඒවා HTML ගොනු ලෙස Save කරගන්නවා.

HTML - Hyper Text Markup Language

HTML - standard markup language for creating Web pages.

HTML - describes the structure of a Web page

HTML - consists of a series of elements

HTML - elements tell the browser how to display the content

HTML - elements are represented by tags

HTML - Not Case Sensitive

<P> means the same as <p>.

The HTML5 standard does not require lowercase tags

HTML Tags

HTML tags are element names with angle brackets

< html> Opening Tag

</html> Closing Tag

A Simple HTML Document

Output of above HTML code

HTML Headings

<h1> -The most important heading.

<h6> -The least important heading

<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Sri Dharmaloka College</h1>
<h2>Sri Dharmaloka College</h2>
<h3>Sri Dharmaloka College</h3>
<h4>Sri Dharmaloka College</h4>
<h5>Sri Dharmaloka College</h5>
<h6>Sri Dharmaloka College</h6>
</body>
</html>

Output of above HTML Code

HTML Paragraphs

HTML paragraphs are defined with the <p> tag

HTML Formatting Elements

Formatting Output

<b> - Bold text

<i> - Italic text

<mark> - Marked text

<small> - Small text

<sub> - Subscript text

<sup> - Superscript text

Font Color

<html>

            <head><title>table</title></head>

            <body>

                        <font color ="blue"> Sri Dharmaloka College Kelaniya</font>

            </body>

</html>

Output

Sri Dharmaloka College Kelaniya

වෙබ් පිටුවකට පින්තූරයක්යක් ඇතුළත් කරමු
HTML Images

HTML images are defined with the <img> tag.

Example

<html>
<head>
<title>image</title>
</head>
<body>

<img src="Arduino.PNG" width="500" height="300" border="8">
</body>
</html>

HTML Links

HTML links are defined with the <a> tag
වෙන වෙනම සාදනු ලබන වෙබ් පිටු එකිනෙක සම්බන්ධ කිරීමෙන් වෙබ් අඩවියක් නිර්මාණය කරගත හැකිය. මේ සඳහා( hyperlinks ) අධිසම්බන්ධක භාවිත කරයි.

<a href="https://www.sdc.lk">This is a link</a>

The link's destination is specified in the href attribute.

Example
Students Marks යන්න Click කළ විට table 12 AB.html නැමැති වෙබ් පිටුව තිරයේ දිස් විය යුතු යෑයි සිතමු

<html>
<head>
Hyperlinks
</head>
<body>
<a href ="table 12 AB.html"> Students Marks</a>
</body>

</html>

Output of above HTML Code

"Students Marks" click කලවිට සිසුන්ගේ ලකුණු ඇතුළත් පහත වෙබ් පිටුව දර්ශනය වේ

මේ ආකාරයට වෙබ් පිටු සම්බන්ධ කළ හැක්කේ එකම ෆෝල්ඩරය තුල වෙබ් පිටු දෙකම පවතින පවිටදීය. එසේ නොවන අවස්ථාවලදී එය ඇති ස්ථානය ද දැක්විය යුතුය

වෙනත් ෆෝල්ඩරයක ඇති වෙබ් පිටු සම්බන්ධ කරන ආකාරය බලමු
<html>
<head>
<h1> Hyperlinks </h1>
</head>
<body>
<a href ="C:\Users\asus\Desktop/project2/welcome.html"> Students Marks</a>
</body>
</html>

HTML Buttons

HTML buttons are defined with the <button> tag:

Example

<button>Click me</button>

HTML Lists

<ul> - unordered (bullet list)

<ol> ordered (numbered list )

<li> tags - list items

Example

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

</body>

</html>

<html>

<body>

<h2>An Ordered HTML list</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

වෙබ් පිටුවක්ට වගුවක් ඇතුළත් කිරීම (Tables )

Tags

<tr> </tr>

<th> </th>

<td> </td>

<html>

<head> <title> HTML Tables </title></head>

<body>

<table border="1">

<tr>

<th>Name </th>

<th> Marks </th>

</tr>

<tr>

<td> Tharushi </td>

<td> 90 </td>

</tr>

<tr>

<td> Sajalee </td>

<td> 92 </td>

</tr>

<tr>

<td> Kumari </td>

<td> 87 </td>

</tr>

<tr>

<td> Minoli </td>

<td> 89 </td>

</tr>

</table>

</body>

</html>
ඉහත කේතයට අනුව ලැබෙන ප්‍රතිදානය

Adding Captions to Tables

<caption align='top'>
12 AB Marks
</caption>

Adding Colours

<html>

<body>

<h1 style="background-color:Tomato;">Tharushi</h1>

<h1 style="background-color:Orange;">Sajali</h1>

<h1 style="background-color:DodgerBlue;">Amanda</h1>

<h1 style="background-color:MediumSeaGreen;">Kumari</h1>

<h1 style="background-color:Gray;">Yasith</h1>

<h1 style="background-color:SlateBlue;">Minoli</h1>

<h1 style="background-color:Violet;">Vindya</h1>

<h1 style="background-color:LightGray;">Hansi</h1>

</body>

</html>

Create Forms

<html>

            <Head> <title>form </title>

            </head>

            <body>

            <form method ="get">

            <table>

            <tr>     <td>Name: </td>

            <td><input type="textbox" name="name" size="50" maxlength="15"></td>

            </tr>

            <tr>     <td>Address: </td>

            <td><input type="textbox" name="name"></td>

             </tr>

            <tr>

            <td>Gender: </td>

            <td>female<input type ="Radio" value ="yes" name ="name"> </td>

            <td>male<input type ="Radio" value ="yes" name ="name"></td>

            </tr>

            <tr>     <td>Select Course: </td>

               <td><select>

            <option>Arts</option>

            <option>Commerce</option>

            <option>Science</option>

            </td>

            </tr>

</table>

</form>

</body>

</html>

Uses HTML to create links

In an HTML document, there will be a number of links that have a connection to the content that appears on the same web page, or a connection that takes you to a new webpage. Such links in an HTML documents are called hyperlinks. Web pages can be linked to each other therefore the web pages can be navigated back and forth easily and the user experience can be improved.

To jump from one page to another, the tag, the anchor tag can be used. The text or image enclosed by the tag anchors one side of the link to the current page, and the href attribute (short for hypertext reference) specifies the other side, the destination. For example, consider,

Style sheets to change the appearance of web pages

Cascading Style Sheets (CSS) provide the look and feel for the HTML content. CSS enables the designer to change how the text, images, and links appear on a web page quickly and easily. Using the CSS, the designer has the freedom of styling the web page independent of the content using a presentation layer where you can make global formatting options. The cascading part of the CSS tells how the elements on a web page are affected by the CSS rules. With CSS, web page styles are made up of one or more style rules.
                           h1{
                                 color : blue;
                                 margin : 0 ;
                                 padding : 5px;
                               }

තොරතුරු සන්නිවේදන තාක්ෂණය

Search This Blog