GCE Advanced Level and Ordinary Level ICT Practical and Theory Lessons

Tuesday, 28 January 2020

Making HTML Form- පෝරම නිර්මාණය

google.com, pub-9566901277757948, DIRECT, f08c47fec0942fa0

HTML <form> element defines a form that is used to collect user input also Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Example Code

<html>

<body>

<h2>Application Form</h2>

<form action="/action_page.php">

First name:<br>

<input type="text" name="firstname" value="Enter Your First Name Here">

<br>

Last name:<br>

<input type="text" name="lastname" value="Enter Your Last Name Here">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Thursday, 17 October 2013

Creating Frameset with HTML

It is easy to define frameset using HTML and we can use it to create useful framesets on your website. Also we can use <frameset> tag to put some columns and rows in web pages with separate html documents. The <frame> tag use to put separate html documents on this page according to divided frames.

Frameset Rows and Cols

Frameset cols show the number and size of columns in a frameset and frameset rows specifies the number and size of rows in a frameset. The tag <frameset> specifies how many columns and rows there will be in the frameset, also how much percentage, pixels of space will occupy each of them.
There are two type of frameset in HTML.

Horizontal frameset
How to make a horizontal frameset with three different documents.
Vertical frameset
How to make a Vertical frameset with three different documents. Also with Mixed frameset it mentioned mix them in rows and columns.
While using the <frame> tag, it defines one particular window (frame) within a <frameset>. Also each <frame> in a <frameset> can have different attributes, such as scrolling,border , the ability to resize also.

Example for Horizontal frameset (Frameset Rows)

<html>
<frameset rows="25%,75%">
<frame src="Fsa.html">
<frame src="Fsb.html">
</frameset>
</html>

(Click on image to enlarge)

Example for Vertical frameset (Frameset Rows)

<html>

<frameset cols="25%,75%">

<frame src="Fsa.html">

<frame src="Fsb.html">

</frameset>

</html>

(Click on image to enlarge)

Saturday, 14 September 2013

Different type of Unordered List

In the last lesson we discussed about different type of ordered list and here we are going to discuss about different type of unordered list.
The unordered list normally comes with <UL>/</UL> but have number of different type of symbols can use to make a list.

Normally unordered list comes with bullets call small black circles.
Example:

<HTML>

<H1> Different type of Unordered List</H1>

<BODY>

<ul>

<li>Sri lanka</li>

<li>India</li>

</ul>

</body>

</html>

Here is the output of the lesson.(Click on image to enlarge)

Types of Unordered List

Example:-

<HTML>

<H1> Different types of Unordered List</H1>

<BODY>

<h3>Unordered List- Disc </h3>

<ul type="disc">

<li>Sri Lanka</li>

<li>India</li>

<li>USA</li>

<li>UK</li>

</ul>

<h3>Unordered List - Circle </h3>

<ul type="circle">

<li>Sri Lanka</li>

<li>India</li>

<li>USA</li>

<li>UK</li>

</ul>

<h3>Unordered List - Square </h3>

<ul type="square">

<li>Sri Lanka</li>

<li>India</li>

<li>USA</li>

<li>UK</li>

</ul>

</body>

</html>

Here is the output of the lesson.(Click on image to enlarge)

HTML Unordered Lists and Ordered Lists

Making list is very common when using HTML. Also the ordered list and unordered list are the main two method use to create list.
Ordered Lists
The Ordered Lists Start with tag of <OL> and need to close with </OL> tag. Generally ordered list start with number 1 but can define other three ordered list methods.
1, List Started with Number (1)
2, List Started with Roman Numbers (I)
3, List Started with Capital (A)
4, List Started with simple (a)
Anyware of your document you can add any kind of list mentioned here.
Example No 01
(Click on image to enlarge)

Ordered list Output

(Click on image to enlarge)

If you wish to put your list start with (A), (a), (I) like you need to mentioned the list type you need.

It comes with

<OL type=”A”> or

<OL type=”A”> and

<OL type=”A”> patterns. Here is some example.

Different Type of Ordered list Output

(Click on image to enlarge)

Friday, 6 September 2013

Making Hyperlinks with Several HTML Documents and Outside Source

Providing facility to navigate between page by page of website call as link or hyperlink. It allow you to click on image, text or word and then guide to another page. Effective hyperlink system help users to get maximum usage of website also.

If you have an experience of web browsing it is easy to understand hyperlink. If there is a link on some text, word, image your cursor will change like little hand mark. That is a sign of navigate to another page or site.

In this picture you can see hand symbol when moving mouse over it or text, click and you will direct to related link.

How to Put Hyperlink Using HTML?

Tag:

<a href="http://insurance-helpz.blogspot.com/">Click Here</a>

<a href="index.html">Check Index</a>

The tag one described the method used to put a external link of World Wide Web. You need to put complete URL of website that need make a link with keyword also. Once you save your page, it will display as shown in the image.

(Click on image to enlarge)

Also you need to consider early mentioned Tutorial - 5 lesson regard to more concentration about links.

And here i attached another example for you.

(Click on image to enlarge view)

Output Document (Click on image to enlarge view)

How to Add Image to Your Web Page Using HTML?

It is easy to add image to your web page using HTML. You can insert any image using your PC and or can insert images from different locations. If you wish to insert image in your computer you need to make some folder structure. That is not compulsory but it make clear path of image inserting.

When you start with creating web page, first make main folder name called index or my web. Inside such folder make sub folder name called image.

Example:-

Copy and paste all images to image folder and check easy path of image located with. We use <img> tag to import images on web page with “src” attribute. The meaning of “src” is source and it mentioned the value of URL that image already stored. It is one of the empty tag, which no need to close.

Example:- (Click on images to enlarge)

Document Output

Other attributes with HTML <img> tag.

"ALT"

Here ALT mentioned alternate text for an image and while unable to load image. It is a one of alternative way of display additional information on image by author generated. When you move your mouse pointer over the image alternative text will display as additional information.

Example:-

"width"/"height"

Both of width and height attributes are used to mention the height and width of inserted image.

"align"

Use to align an inserted image within the text.

If you wish to insert image from any other location like internet you have to mentioned URL of image clearly. Otherwise you will not be able show the image.

Thursday, 5 September 2013

Tutorial 05 - HTML Body Tag

HTML Body tag use to define body content of the web page. HTML Body tag use to define body content of the web page. The body tag already consists with all of the text, tables, hyperlinks, images, lists, and video also. We can use the entire above mentioned object inside of the <body> tag with number of other attributes.

We can use following attributes with HTML body tag.

Body bgcolor :- Determine background color of the documents

Body Background:- Determine background image for a document.

Body alink:- Determine color of an active link in a web page

Body vlink:- Determine color of visited links in a web page

Body link:- Determine color of unvisited links in a document

Body Text:- Determine color of the text in a web pages

Example :-
Define Body Background Color
With the million of colors we can choose any background colors to your web page. This colors are represent of hexadecimal numbers and starting with a # sign also all of the Hexadecimal values are represented as 3 pairs of two-digit numbers. The Hexadecimal color combination comes with main three color of Red, Green and Blue.

Color Name	Color Code	Color Name	Color Code
Red	#FF0000	Black	#000000
Green	#00FF00	Yellow	#FFFF00
Blue	#0000FF	White	#FFFFFF

Check following example do it again. (Click on images to enlarge)

Output Document

Pages

Tuesday, 28 January 2020

Example Code

Thursday, 17 October 2013

Saturday, 14 September 2013

Friday, 6 September 2013

Thursday, 5 September 2013