GCE Advanced Level and Ordinary Level ICT Practical and Theory Lessons: 2013

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

Tutorial 04 - Basic Text Formatting with HTML

Basic text formattings are most important to creative and helpful web page. Specially if you are going to make a rich textured web page need to basic text formatting tags usually.

List of basic text formatting,

Bold Text <b>

Italic Text <i>

Underline Text <u>

Subscript text <sub>

Superscript Text <sup>

Strong Text <strong>
Small Text <small>

Highlighted Text <mark>

Example:- Output (Click image to enlarge)

HTML Program

Open new Notepad document and try to follow this lesson again. Also please don't forget to end all of this tags.

Wednesday, 4 September 2013

Tutorial 03 - HTML Text and Paragraphs Related

Tutorial 03

When we use handwriting need to put some blank line within two paragraphs. Also when we use HTML need to put some line spaces between web page paragraphs. With HTML we can use this tag <p> to be divided documents into paragraphs. (need to end tag)

Example:

<p> Use me to divide paragraph. </p>

The <p> tag adds an empty line within paragraph of the page.
Also <br> tag uses to (Line break) add new line without starting a new paragraph of the document. But here no need to end the tag because it is one of the empty tag uses with HTML.
Check the output.(Click on image to enlarge)

Tuesday, 3 September 2013

Tutorial 02- HTML Heading

To understand you need to do more practical with HTML. Here we are going to do our second lesson in HTML.

Lesson Number 02- HTML Heading

Using HTML heading tag you can define web page content heading with most important to least important.

The tag comes with

and

need to close with

</h1>, </h2>, </h3>, </h4>, </h5>, </h6> tags.

Important....

<H1> is the most important heading and <H6> is the least important heading in HTML. .
Example 02:-

Output of the program (Click on image to enlarge)

Are You Ready? This is Your First HTML Tutorial

Before Starting your first lesson you need to understand and remember given basic structure of HTML.
Lesson Number 01

Create Title to Your Web Page
Here we need to mention a title in your web page and it display on the browser title bar.
Example no 01:-

To create first tutorial you need to use Notepad from,

Start-->All Programs-->Accessories-->Notepad

Notepad is the easiest platform you can used to create HTML documents.

Then save text file with the any name with .HTML or .HTM extension and it will save with your default browser icon. Now double click on it and you can see your output of the program as bellow.

(Click image to enlarge)

Sunday, 1 September 2013

Ready to Create Your Own Website

Creating website for any sector has become a way of promoting or communicating with each other. If you are a businessman, educator, student or vendor you can invest little bit of money to buying or building your own website. Otherwise you can choose some of free hosted website like Blogger and WordPress also.
In other way you can design your website easily within short time of period with several kinds of software tools. There are so many software that you can choose for web development. Microsoft FrontPage, adobe Dreamweaver, Adobe ColdFusion, Adobe InDesign, Joomla and web development languages like HTML, XML can be used for your purposes. In Universal Web Development School we are going to learn and making website with HTML.

Introduction to HTML...

HTML is a world most famous web development language and it is a language of describing web pages.
Stands: Hyper Text Markup Language and it is a one of markup language used to develop web pages. Also it is call as a set of markup tags. Using tags and text we can create easy web pages and tags use to describe entire document content. Also created HTML document is call as a web page and it need to save extension with .HTML or .HTM.

Rules of using HTML
Need to used with angle brackets
<HTML>
<HEAD>
<TITLE>
There are two types of tags for used to describe content.
<TABLE> Starting Tag (opening tags )
</TABLE> End Tag or Close Tag (closing tags)

Actually you need to highly consider above mentioned command correctly otherwise your output may be empty page without any content.
Understanding of HTML Structure.

Human Brain and Intelligent Power to Technological Development

With the rapid development of internet and computer technology the world has became a small village. The power of human brain and intelligent has invaded all of the functions around the world also his life.

The inventions of Television, Radio, Telephone, and Electricity power has given guidelines to development of COMPUTER related technological innovations. With the help of these technological innovations, today the computer has became prime equipment we have.
Also within last two decades the technological innovation like internet technology and World Wide Web technology changed the habits of human being towards the cyber world.

The Epigrammatic History of Internet and World Wide Web

1957- Establishment of ARPA (Advanced Research Project Association)
1959/1962-Packet Switching Service. (Leonard Kleinrok)
1964- Computer Network Technology (Paul Baran)
1966- ArpaNet (Larry Roberts and Douglas Engelbart)
E-mail through ArpaNet- (Raymond Thomlinson)
1973/1974 TCP/IP(Transmission Control Protocol/ Internet Protocol) (Vinton Cerf and Robet Kahn)
1989-World Wide Web(WWW)-(Tim Berners-Lee)
1990-URL(Uniform resource locator),HTTP (Hypertext Transfer Protocol)HTML(Hypertext Markup Language)

Pages

Thursday, 17 October 2013

Creating Frameset with HTML

Saturday, 14 September 2013

Different type of Unordered List

HTML Unordered Lists and Ordered Lists

Friday, 6 September 2013

Making Hyperlinks with Several HTML Documents and Outside Source

How to Add Image to Your Web Page Using HTML?

Thursday, 5 September 2013

Tutorial 05 - HTML Body Tag

Tutorial 04 - Basic Text Formatting with HTML

Wednesday, 4 September 2013

Tutorial 03 - HTML Text and Paragraphs Related

Tuesday, 3 September 2013

Tutorial 02- HTML Heading

Are You Ready? This is Your First HTML Tutorial

Sunday, 1 September 2013

Ready to Create Your Own Website

Human Brain and Intelligent Power to Technological Development

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