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>
<li>USA</li>
<li>UK</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)




at No comments:

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)


at 1 comment:

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)


at No comments:

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:-
<img src="image/lio.jpg" width="630" height="300" alt="We are Lions"></p>

"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.

<img src="baby.gif" alt="Sweet Baby" align="middle" width="100" height="75">
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.

<img src="http://yourwebdevelopment-helpz.blogspot.com/images/hplaptop.jpg" alt="Laptop" width="100" height="150"> 
at No comments:

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 Color Code Color Name Color 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


at No comments:

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. 

at No comments:

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)



at No comments:

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 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 
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)


at No comments:

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)




at No comments:

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.


at No comments:

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

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

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

google.com, pub-9566901277757948, DIRECT, f08c47fec0942fa0 HTML <form> element defines a form that is used to collect user inpu...