Computer Hope
Other => Internet & Network => FAQ solutions database => Web design => Topic started by: Ivy on October 26, 2008, 06:00:11 AM
-
Simple steps To make a webpage:
Here I will throw light on very simple steps to make your own webpages, We'll be working in NotePad (Its the simplest and the best)
Lets get started with opening your notepad , start with typing these:
<html>
</html>
These are called tags.
Starting tag --> <html>
closing tag --> </html>
Next, Every HTML document needs a pair of head tags.
<html>
<head>
</head>
</html>
The only thing we have to use with in the head tags (for now) are the title tags.
<html>
<head>
<title></title>
</head>
</html>
The Main Body of your page is going to be within the body tags.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Let us begin by giving your document a Title, and put something in the body aswell.
<html>
<head>
<title>My first page</title>
</head>
<body>
Hey Ivy, this is my page!
</body>
</html>
Time to save this, So in your Notepad window click File then Save As.
You will see the Save As dialog box. Make a new folder by clicking the New Folder icon in the Save As dialog box.
Name the new folder whatever you want. Then double click on it to open it. Now you're ready to save the file into the the new folder you just made. Where it says File name: type in page1.html and Where it says Save as type: make sure it says All Files(*.*).Click Save.
If you are using Internet explorer your file icon will look like this-->(http://i457.photobucket.com/albums/qq300/Ahera/p1.gif)
If you are using Firefox your file icon will look like this-->(http://i457.photobucket.com/albums/qq300/Ahera/p2.gif)
Just double click on the icon now and see the results!
Important Note:make sure you save your file with the file extension .html
-
Now let us start working within the body tags, I'm not going to use the other tage here, but you have to use them in your document, so keep them there.
<body>
</body>
Type 'Hi Ivy,this is my page! inside the body tage.
<body>
Hi Ivy,this is my page!
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p3.gif)
IMPORTANT NOTE:
Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser.
Let us proceed to the background colour,
<body bgcolor="#0099ff">
Hi Ivy,this is my page!
</body>
#0099ff is a nice shade of blue!
(http://i457.photobucket.com/albums/qq300/Ahera/p4.gif)
Here are codes to a few colours!
(http://i457.photobucket.com/albums/qq300/Ahera/p5.gif)
Some more HTML (http://www.computerhope.com/htmcolor.htm) Codes
Some of us might want to use a background image instead, here how to do that:
<body background="Blue Hill.GIF">
Hi Ivy!This is my page!
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/pp.gif)
Important Note: the image should be in the same folder as your HTML file.
Intresting point:
You must have seen pages where the background is fixed and the page just scrolls over it,here's how you can do that.
Simple, add style="background-attachment:fixed" to the <body> tag
<body background="mybackground.gif" style="background-attachment:fixed">
-
Now let us start experimenting a little with the text!
<body background="Blue Hills.GIF">
Hi Ivy, This is my page!
</body>
We can make text bold.
<body background="Blue Hills.GIF">Hi Ivy, This is my page!
In simple words, start making things bold, and at the stop making things bold, in other words we are suggesting to the browser that all text contained within the element should be rendered bold.
(http://i457.photobucket.com/albums/qq300/Ahera/p6.gif)
Now lets try Itallics, same principles apply here aswell.
<body background="Blue Hills.GIF">
Hi Ivy, This is my page!
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p7.gif)
Now comes underlining.
<body background="Blue Hills.GIF">
Hi Ivy , This is my page!
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p8.gif)
-
Now let us come to Font size, We can change Font Size very easily!
First start by adding the <font> tags
<body>
Hey Ivy, this is my <font>page</font>!
</body>
Then specify the size of the font.
<body>
Hey Ivy, this is my <font size="6">page</font>!
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p9.gif)
Font comes in 7 sizes.
Extra Knowledge:The default font size is usually 3(the default value is a value that the browser assumes if you have not told it otherwise).
Lets come to Font name.
the default font name is usually Times New Roman or Verdana 12pt, but ofcourse we can use font names other than the defaults.lets try arial.
<body>
Hey Ivy, this is my <font face="arial">page</font>!
</body>
Interesting point:
The font will only display if your visitor has that font installed on their computer.Arial, Comic Sans MS and Impact are easy to find. but you can always use more than one font,like this--><font face="arial,helvetica,lucida sans">So many fonts lol!</font>
here's what it'll do, The browser looks for arial. If it finds it, it uses it. If not, it goes on to helvetica. If it can't find that, it looks for lucida sans. And if it can't find that it uses the default font.
Now lets come to colour(its a colourful world so how can we leave out the colours!)
<body>
Hey Ivy, this is my <font color="#ff0000">page</font>!
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p10.gif)
Are you beginning to enjoy this? Hope so cause I've tried my best to make this simple and fun!
-
Now let us take this a little in detail, let us proceed to section headings.
<body>
<h1>Hi ivy, this is my first page!</h1>
<h2>Hi ivy, this is my first page!</h2>
<h3>Hi ivy, this is my first page!</h3>
<h4>Hi ivy, this is my first page!</h4>
<h5>Hi ivy, this is my first page!</h5>
<h6>Hi ivy, this is my first page!</h6>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p11.gif)
Another good attribute to know here will be align.
<body>
<h2 align="left">Hi ivy, this is my first page!</h2>
<h2 align="center">Hi ivy, this is my first page!</h2>
<h2 align="right">Hi ivy, this is my first page!</h2>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p12.gif)
Now I would like to share something very important about how a browser works.
If we write something like this(given below)
<body>
Hi ivy,
this is my first page!
</body>
It will show exactly in the same way as(given below)
<body>
Hi ivy,this is my first page!
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/p3.gif)
Both will appear the same(just like in the picture given above),The reason for this is because the browser doesn't recognize formatting.it just displays the characters in a steady stream. If you want to start a new line you have to use a line break.
<body>
Hi Ivy,
this is my first page!
</body>
basically says - start a new line.Using many
you can skip many lines at a time.
(http://i457.photobucket.com/albums/qq300/Ahera/p13.gif)
Another important point is that the browser won't recognize more than 1 space.
There code that means "space" to the browser is  .
<body>
Hi Ivy,
This is my first
Page
</body>
-
Now this is the part that the ones who are new to this will enjoy most!
The making of Links
It really simple and fun, I shall make a link to my favourite site, that is ComputerHope.
Start with this
<body>
Go to ComputerHope
</body>
(http://i630.photobucket.com/albums/uu26/LeonaSQ/2nd.jpg)
Next add a pair of anchor tags.
<body>
Go to <a>ComputerHope[/url]
</body>
Next Add the URL and you're done!
URL stands for Uniform Resource Locator, In simple words A URL is just an address on the web.You specify it like so: href="url".And since ComputerHope URL is http://www.computerhope.com/ our code ends up like this..
<body>
Go to <a href="http://www.computerhope.com/">ComputerHope[/url]
</body>
and this is what your final page will look like!
(http://i630.photobucket.com/albums/uu26/LeonaSQ/1st.jpg)
Now let us proceed to email links.
An email link works almost in the same way. We just use mailto: and an email address instead of a page address.
<body>
Send me Mail! (http://mailto:[email protected])
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/S17.gif)
-
Now let us work on some useful tools,
Lets start with a list.There are ordered lists and unordered lists.
This is an ordered list:
1. Red
2. Blue
3. Green
4. Yelolow
This is an unordered list:
* Red
* Blue
* Green
* yellow
First, we will learn how to build an unordered list.
Start with this...
<body>
My favourite colours!
</body>
Now Add a pair of unordered list tags.
<body>
My favourite Colours!
<ul>
</ul>
</body>
Next,Add a list item.
<body>
My favourite colours!
<ul>
<li>Red
</ul>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/s18.gif)
Add a few more...
<body>
My favourite colours!
<ul>
<li>Red
<li>blue
<li>Green
<li>Yellow
</ul>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/s19.gif)
There ya go! you learn so fast!!
Next,How to make an ordered list? Easy! Change the <ul> tag to <ol>.
<body>
My favourite colours!
<ol>
<li>Red
<li>blue
<li>Green
<li>Yellow
</ol>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/s20.gif)
Yes its that easy!!
Next we shall learn how to change the Type of an unordered list....
<body>
My favourite colours!
<ul type="circle">
<li>Red
<li>blue
<li>Green
<li>Yellow
</ul>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/s25.gif)
Now lets change the type of an ordered list...
<body>
My favourite colours!
<ol type="A" >
<li>Red
<li>blue
<li>Green
<li>Yellow
</ol>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/s22.gif)
The following list types are available...
<ol> Ordered List
type="1" - numeric: 1,2,3,4... (default)
type="a" - lower alpha: a,b,c,d...
type="A" - upper alpha: A,B,C,D...
type="i" - lower roman: i,ii,iii,iv...
type="I" - upper roman: I,II,III,IV...
<ul> Unordered List
* type="disc" (default)
* type="circle"
* type="square"
Another type of list is a definition list.
Ivy
A plant that runs up trees, walls, etc. "Ivy is the symbol of eternal life." The arms of the Town of St. Ives. ar. an Ivy branch overspreading the whole field vert.
Start with this...
<body>
<dl>
</dl>
</body>
Then add a definition title...
<body>
<dl>
<dt>Ivy
</dl>
</body>
And then the definition...
<body>
<dl>
<dt>Ivy
<dd> A plant that runs up trees, walls, etc. "Ivy is the symbol of eternal life." The arms of the Town of St. Ives. ar. an Ivy branch overspreading the whole field vert.
</dl>
</body>
You can make the definition title bold(looks better that way..)
<body>
<dl>
<dt>>Ivy
<dd> A plant that runs up trees, walls, etc. "Ivy is the symbol of eternal life." The arms of the Town of St. Ives. ar. an Ivy branch overspreading the whole field vert.
</dl>
</body>
(http://i457.photobucket.com/albums/qq300/Ahera/s23.gif)
-
This is the End of this part of ''Simple steps to make your first web page''
I have tried to keep this as simple as possible.
Hope this can change your opinion about HTML, HTML is actually pretty easy to learn and I believe anyone can make a website with just a little knowledge of HTML, little more dedication and a lot of will!
Best of luck!
....Ivy