List

October 4, 2007

We may display the contents in a list format. There are two types of list; ordered and unordered.

The ordered list will display the contents in a numbered list (e.g. 1, 2, 3,… or a,b,c,…). The elements used for ordered list is <ol>…</ol>. Each item in the list is represented with <li>…</li> element. Try this,:

<ol>

<li>First</li>

<li>Second</li>

<li>Third</li>

</ol>

 This code will display the three lines in 1,2,3 format (default format). If you want to display in different format, say a,b,c then you should add type attribute in the <ol> element.Hence, the element should be written as <ol type=”a”>. Change to type=”i” will make the list follow a roman format.

To produce an unordered list, change <ol>…</ol> to <ul>…</ul> element in the above code. You will see that the list is now represented in bullet format.

Posted in Lists | Leave a Comment »

Images

October 4, 2007

To display an image on a website, <img /> element is used. Two important attributes contained in the <img /> element, i.e. src and alt. src attribute indentify the image to be displayed (by referring to the image name), and alt attribute specify the text to be displayed on the website if the image cannot be loaded by the browser.

For example, we want  to display an image mypicture.jpg, so write the following:

<img src=”mypicture.jpg” alt=”this is the picture of mine.” />

Apart from just being displayed, an image may also be used as a hyperlink. This is especially true if we want to direct the browser to the other website after a user clicks on an image. Here is the example:

<a href=”http://developawebsite.wordpress.com” > <img src=”mypicture.jpg” alt=”this is a picture of mine.” /> </a>

When a user clicks on the image, the browser will display this informative and useful blog again! :)

Posted in Image | Leave a Comment »

Hyperlinks

October 4, 2007

Hyperlinks are used to refer to other source by clicking on the text or image. When we click on the hyperlink, browser will display a website page that we provide in the hyperlink element. The element is represented with <a href=”www.anysite.com” mce_href=”www.anysite.com”>…</a>. The href is an attribute of the hypelink element, which is used to specify the location that we want to link to. Name the destination website in between double quotes and you’ll get the result. Try this:

<a href=”http://www.developawebsite.wordpress.com”>I want to learn HTML</a>

Click on the text and you will be seeing this informative blog coming out on your screen! Apart from directing the browser page to the other website, hyperlink may also be used to invoke an email client so that we could send an email to the address stated in the hyperlink attribute. The href attribute that should be written like this: href=”mailto:myfriend.yahoo.com”. 

Posted in Hyperlinks | Leave a Comment »

Font bold & italic, line break and horizontal line

October 4, 2007

The previous two posts described on the very basic of HTML programming. Now, there are a few other elements that we may used, which are listed here:

  • <b>…</b> – all text in between will be bold.
  • <em>…</em> – all text in between will be italic.
  • <br> – create a line break (skip to the next line).
  • <hr /> – create a horizontal line on the page.

Posted in Basic HTML | Leave a Comment »

Headers

October 4, 2007

HTML provides 6 levels of headers for us to display text as a title/header of the content. The header uses <h1>…</h1> for the largest font size, and <h6>…</h6> for the smallest font size. Try this code in your notepad:

<html>

<head><title>My Header!</title></head>

<body>

<h1>Header 1</h1>

<h2>Header 2</h2>

<h3>Header 3</h3>

<h4>Header 4</h4>

<h5>Header 5</h5>

<h6>Header 6</h6>

</body>

</html>

See what’s displayed on the screen, you will see all levels of headers, with different font size.

Posted in Basic HTML | Leave a Comment »

my first page!

October 4, 2007

To display a website content is very simple. Firstly, we have to understand that there are a number of elements (or tags) in HTML, i.e. used for defining or describing the website contents.

HTML document always starts with <html> element, and end with </html>. Let us begin writing one simple message on the browser using HTML. Open your notepad and write the following:

 <html>

<head><title>My First Page!</title></head>

<body>

<p>Welcome to my page!</p>

</body>

</html>

The HTML document is structured in two section, head and body where each section is represented with <head>…</head> and <body>…</body>. The contents of the website should be enclosed in the body section. To write a text, we use paragraph element, which is represented by <p>… </p>.

Close and save your file as “anyname.html”. Then double click on the file and you will see your message is displayed on the browser.  

Posted in Basic HTML | Leave a Comment »

Follow

Get every new post delivered to your Inbox.