Hi
After completing this tutorial hopefully you will be able to make a simple web page on an ordinary computer.
Requirements:
Microsoft Windows Xp (used in this tutorial older windows will work don't know about Linux/macs)
Microsoft Notepad (or other text editing software)
A web browser - I recommend FireFox (Internet Explorer or any other browser can be used)
HTML stands for Hypertext Markup Language (html), it is the most simple web design language and it is widely used along with other languages like css, php ect. Html files can be made by many different programs including notepad, word-pad and other text editing programs, in this tutorial we will use notepad which comes with Microsoft windows. Html files have to be saved as name.html or whatever.htm it doesn't matter which you use but i suggest you always use one instead of alternating with them as this will get difficult (explained later). .htm or .html files will open in your default web browser as default.
So then code, html instructions are contained between < and > to start a html page you should start with <html> that is a tag, anything in html between < and > is a tag. Most html tags have an opening tag and an end tag for example:
<html>
</html>
A
<something> tag opens the tag and </something> closes the tag.
The <html>/</html> tags specify that what is between them is html code.
Some More Tags:
<head> usually follows the <html> opening tag between <head> and </head> is the <title> and </title> tags in between these you can specify the title of the page which is seen at the top of the browser. 
To add text to you web page you can place it anywhere between the
<body> and </body> tags these tags contain the content of the page eg. text, images ect.
So making your first web page:
1. Open notepad (Start > all programs > Accessories > Notepad)
2. Start your page off with the <html> tag then add the <head> tag
3. Now put in the <title> tag, now write your wanted title eg. My first page, then close this tag with </title>
4. At the moment we not putting anything else in the head area so close it with </head>
5. Now put in the
<body> tag
6. Now write some text eg. Hello this is my first webpage made in notepad with help from theflashplace.com, theflashplace rocks!
7. Now End the body tag with </body> 8. Now as this is the end of our first page close the html tag with </html> If you've followed correctly you will have something like this:
9. Now to view the page! Start to save the page usually (File > Save as)
10. Select where you what to save the file, then call it whateveryouwant.html or aname.htm
11. Save the file then open the folder that you saved the html page in.
12. If you don't see your file or see your file as a notepad file you've gone wrong try again, if you see a Htm or Html file well done load it up hopefully you'll see this:
If your page looks like mine well done you've made your first web page, if you didn't realize it isn't on the web sorry but its not that easy you have to have a host and domain name i might write a tutorial about that soon, if you don't see a page like this sorry you'll have to start again.
Well you have made your first web page here are some more tags that are used between the
<body> tags:
<br>
This tag doesn't have a close tag (
<br>
), this tag starts a new line of text, you can't just start a new line of text in notepad and have it start a new line in the browser.
<center> and </center> will center any text between them.
<img src="imagefilename.gif"> this will put an image on the page .gif also needs changing accordingly (doesn't need closing), the image must also be in the same folder as the web page file.
<A href="anotherpage.htm"> writing that can be clicked </A> to go to anotherpage.htm (a link), the ending of the file name must be the same as the name in the link thats why you should keep to one file ending(.htm / .html). An image tag can be put between the link tags to make a linked image e.g
<A href="anotherpage.htm"><img src="imagefilename.gif"></A>
<A href="mailto:aemailaddress@hotmailect.com"> Another link </A> That will open your email client with the email address specified in the email address bar. - Image can be used instead of text like above.
The <body> tag can be changed eg. <body bgcolor="55F0E9"> this will open the body tag and specify the colour of the page background with the 6 numbers eg. 55F0E9 which will make the page an aqua colour. All the different colour codes can be found at http://html-color-codes.com .
This is an example of some of the tags being used above: 
Which makes this:
 Well hopefully you now understand some basic html if you have any questions or want help, post them in the forum on this site I'm sure someone will be willing to help.
I'll do a tutorial on domain names and hosting (getting your website on the web) and a tutorial on some more html soon.
I hope you were able to follow this tutorial so now get out there and code some websites!
Good-luck coding
The Bin
Source1 - 1276filename.htm (right-click > "save target as" to download)
Source2 - 1276example.htm (right-click > "save target as" to download)
Back to tutorials
Sponsored Link
|
