2
Posted February 15, 2011 by Spyros in General Programming
 
 

A Beginners Guide To Creating HTML Pages

html
html

If you always wanted to know how to create your own website, this may be a nice article to read. Please understand that the process of building a commercial and dynamic(where people interact) website needs lots of programming knowledge but for sure every web programmer started with learning the old but very important HTML. There are lots of things to learn about HTML, but you will get the chance to practise with creating your first pages in this tutorial.

What is HTML?

HTML is the acronym for HyperText Markup Language and what is does simply is describe a way in which text is processed in a document. This markup language is the basic thing that all browsers on earth understand and obey. For example, the tag <title> in an html page informs every browser that the title of the webpage will follow. Let’s now see a basic html webpage.

Your First HTML page

You can create you new page and name it something like index.html. We choose that name because it’s one of the default names that a standard web server understands. Remember that in order for the browser to read that file it has to have the html or htm extension.

Every HTML page starts with the <HTML> directive. In HTML almost every starting tag has an ending tag too. So, with <HTML> we start the html page contents and with </HTML> we indicate that the webpage is finished.

Each html page has an attribute called <TITLE>. This is in fact the title that we see in the title bar of our browser when we open the page. However, since this attribute is not something that shows on the main window but on the title bar, it has to be included in the <HEAD> directive. Let’s assemble it together and write:

<HTML>
<HEAD>
<TITLE>My First Webpage !</TITLE>
</HEAD>
</HTML>

Save it in your index.html page and open it with your browser. You should see a blank webpage with the title ‘My First Webpage !’. That was nice :) We created our first standard html page. Let’s do more now. How about creating a simple paragraph with text and a header indicating the title of the text? Sounds complicated? It’s really very easy as we’ll see in a minute.

Now that we need to create content that we need to appear at the main window of the browser, we have to tell it to present it there. We do that by defining the <BODY> attribute and write everything inside it. Until the ending directive </BODY> gets found, everything inside it is regarded as content to be shown on the wain browser window.

We define a header in html using the <h{size}> directive. For instance <H1>Title</H1> will appear the word Title as a very large header. As numbers increase, the header size decreases, so <H2> is smaller than <H1>.

Finally, to create a paragraph, we need to define the <P> directive, write our content inside and close it with the standar </p>. Let’s now see it all together:

<HTML>
<HEAD>
<TITLE>My First Webpage !</TITLE>
</HEAD>

<BODY>

<H1> Welcome to my page </H1>

<p> Hello, this is my first website. Do you like it? :D</p>

</BODY>
</HTML>

If you open that page in your browser you’ll see your title in the title bar, your big header and a paragraph with the text we specified. Nice, we’re doing well :)

How do i create links ?

What is a website with no links? Well, not much really :) Creating a hypertext link is very easy. We do this with the directive <A>. Suppose that we want to create a link to codercaste.com. We just specify a link BEFORE </BODY> like:

<a href=’http://
codercaste.com’>Visit codercaste.com !</a>

Refresh the page we created and see the new link. If you click it, a new page will open and direct you to codercaste.com. Sometimes, it’s essential that the link opens in a new tab or browser instance. To do this, we can utilize the target directive in <A> like:

<a href=’http://
codercaste.com’ target=”_blank” >Visit codercaste.com !</a>

IMPORTANT NOTICE

It doesn’t matter if we use single or double quotes in enclosing text and it also does not matter if we use lowercase or uppercase letters. Find what suits you better and stick to it :)

Spice it up with an image

Let’s now see how to add an image to our website. You could just show an image that you have on your hard disk(or better website root if you have it on a server) or another image that is available online. In both cases, the tag to use is <IMG>. <IMG> does not end with an </IMG> but an /> tag. Suppose that we need to present an image that is in our C:\site folder and our created file in just inside C:\ . We do this by specifying:

<IMG src=’site/image.jpg’ width=’50’ height=’50’ alt=’my image’ />

This should show the image in 50×50 pixels and if you hover over it you’ll see a tooltip showing ‘my image’. The same process applies to an online image like:

<IMG src=’http://codercaste
.com/images/logo.gif’ width=’50’ height=’50’ alt=’codercaste image’ />

This will show you the main codercaste.com image but stretched to be 50×50 pixels sized. Our final webpage looks like that now:

<HTML>
<HEAD>
<TITLE>My First Webpage !</TITLE>
</HEAD>

<BODY>

<H1> Welcome to my page </H1>

<p> Hello, this is my first website. Do you like it? :D</p>

<br>
<a href=’http://
codercaste.com‘ target=’_blank’>Visit codercaste.com !</a>

<IMG src=’http://codercaste.com/images/logo.gif’ width=’50’ height=’50’ alt=’codercaste.com image’ />

</BODY>
</HTML>

I hope that this was a nice introduction to HTML and that you learned the basic things. Hopefully more advanced HTML tutorials will be available in the future. Hope you had a good time reading and learning :)


Spyros