MP3 Music Hosting - Upload Music LoginSignup
  Home Blog Charts Forums Members AccountUpload Music  |  Your Cart  
Forum Info Forum Profile Private Messages Top Posters Search
 
 
 
General Forums - Computer Talk Forum Jump Down
The Easiest Way to Learn HTML: Create Your First Website
FuN
Age: 30
Gender: Male
Joined: Sep 26 2008
Posts: 293
Posted: Sat Apr 18, 2009 12:09 pm
*NOTE* I created this tutorial back in the year 2003. It was lost during the server crash, but luckily the internet achiver know as The "Way Back Machine" had a cached version of this page so I was able to transfer it here. I thought this tutorial was no longer used, but to my surprise I received emails from people asking where they could locate this tutorial again so here it is.

I wanted to create a tutorial that will easily explain how to create web pages using HTML. There are a lot of books and sites out there that teach HTML, but they can be confusing sometimes for some beginners. I understand that you want to build your own website without having to read about the history since the birth of HTML, how many sites use it and why, etc. You just want to know how to build your own site quickly and easily! I will explain how you can use HTML to build a simple website to have up and running in no time I have given examples throughout this tutorial to better help you understand the functions of HTML commands. Of course there are shortcuts and other ways of creating pages and explaining HTML, but I want to keep this as basic as possible to give you a better understanding of how it all works without using the big fancy words. Let's begin shall we?

The Easiest Way to Learn HTML

Contents

    Creating Your First Web Page
    Learning the Basics
    Additional Effects
    More complex HTML codes
    Work that Body
    Adding more pages and files
    Getting your site online
    The Funender HTML Reference Guide


Author: FuNEnD3R
 
FuN
Age: 30
Gender: Male
Joined: Sep 26 2008
Posts: 293
Posted: Sat Apr 18, 2009 12:19 pm
Creating your First Webpage

In this Chapter you will learn how to create HTML files on your computer. Many people choose different methods of creating web pages, but in this tutorial you will be using the notepad to get started. If you follow these directions step by step, you shouldnt have a problem at all. Some of the commands mentioned in the beginning of this tutorial may not make a lot of sense to you, but in time you will start to understand how it all works.


The First Step: Create a new folder on your computer


The first thing we will do is create a new folder on the desktop of your computer. If you have never created a new folder on your computer before, here are the ways for doing so: (different instructions for MAC and PC users so follow the instructions that apply to the computer that you are using)

PC Users
"right click" on your mouse anywhere on your desktop so that a submenu pops up. You will see the options

Quote:
Arrange Desktop >
Arrange Icons >
Line Up Icons
Refresh
Undo Move
New >
Properties


Click on the New Tab, and the first option on the top of that list is FOLDER. Clicking on the Folder Icon will create a new folder on your Desktop. For this tutorial, please name this folder: learn

MAC Users
The Apple mice that ship with a Mac don't have a right button, but you can hold down the control key and click anywhere on the desktop to get the contextual menu.

Quote:
New Folder
Get Info
Change Desktop Background...
Enable folder Actions...
Configure folder actions...



Click on the New Folder Icon, and for this tutorial name it: learn

You should now have a folder named "learn" on your desktop


The Second Step: Create an HTML file using notepad

Ok, now we have a folder named "learn" and this is where we are going to place all of our website files for this tutorial. I have named the folder "learn" so everyone will have the same folder and file names so we won't get confused if anyone needs extra help. What we are going to do now is open your notepad on your computer. Not wordpad, but notepad For MAC users it would be the BBEdit file.

Now that you are in the notepad, we can insert the necessary HTML codes to get started. I can type up about 2 pages worth of info on how HTML works, but let's just get right to the codes Basically an easy way to spot HTML codes are words with arrows around them < and > These are known as tags and its a way of the computer telling the difference between using HTML or displaying regular text. An example of an HTML tag would be

Code:
<html>
and
Code:
</html>


You may also notice the / inserted into the second tag, that is called a forwardslash. Forwardslashes are used to tell the computer that you want that HTML code to end. Without the forwardslash, the computer will not know when you want that HTML command to end, and continue it beyond the area you want to use that command in. Confused? Let me show you an example using an HTML command that gives you bold text.

The HTML command to make text in bold is:

Code:
<b>
and
Code:
</b>


You would place the <b> in the beginning of the text, and add the </b> at the end of the text to make it bold. So if I wanted the words "welcome to funender.com" all in bold, I would use the HTML command:

Code:
<b>welcome to funender.com</b>


and when viewed on a webpage, it would look like this:

Quote:
welcome to funender.com


Now lets say I wanted to add more text, but didnt want the rest of the text in bold, I just wanted it normal. I would use the command:

Code:
<b>welcome to funender.com</b> The Way Message Boards Should Be


and it will display on the webpage:

Quote:
welcome to funender.com The Way Message Boards Should Be


You can see that the words "The Way Message Boards Should Be" after the bold text are not in bold. The reason why is because of the forwardslash telling the computer to end the bold command there after the word funender.com. Now's lets see what happens if you do not add the forwardslash, it would result in all of the text becoming bold, because the computer doesnt know when you want to end the bold command. If you entered this:

WRONG:
Quote:
<b>welcome to funender.com<b>The Way Message Boards Should Be


The result would be this:

WRONG:
Quote:
welcome to funender.com The Way Message Boards Should Be


Make sense? If not you can pm me and I will add more examples to explain this better. Moving on....

*Note* HTML is very similar to BBcode code used on here on funender.com, so if you understand how to use that already then this should be a breeze.

Let's start with some HTML codes. Every HTML document (document = webpage) usually starts out with the <html> tag. You know how the command <b> creates bold statement? Well the <html> command creates an html statement So right now in your notepad, enter the <html> command like so:

Quote:
<html>




</html>


I have added some spaces between the two tags because we are going to be adding commands inbetween them. All whitespace is ignored when creating webpages, so you can hit the spacebar 8 billion times to create whitespaces, and it wouldn't make a difference. In order for HTML to work, you have to begin with the <html> and </html> tags so you can tell the computer that you want to use HTML commands between these tags.

Now to add other commands, called the:
Code:
<head>
and
Code:
</head>


Another is the:
Code:
<body>
and
Code:
</body>


Last but not least the:
Code:
<title>
and
Code:
</title>
commands.


Basically the <head> command contains most of the page title information, and the <body> contains everything else. Dont worry too much about understanding why its like this right now, just know to always include these tags when creating HTML webpages.

Now to include these tags where they belong. Add the tags just like I have them below

Quote:
<html>

<head>

<title>My First Webpage</title>

</head>

<body>

</body>

</html>


*Note* There is one more tag you can enter, but we are not going to worry about this now.

You notice that inbetween the <title></title> tags I have entered the text "My First Webpage" It's common sense but the title command gives the page a title You know when you bookmark a webpage and it's given it's own name? The <title> command is what does this. So if this page were on the internet now and you were to bookmark it, it would be saved in your favorites as "My First Webpage" If you do not enter a title, your browser will automatically create one out of the URL usually. If you want to change the title to whatever you wanted, you simply would delete the text "My First Webpage" and replace it with the title of your webpage. I do not want you to make any changes now just in case you make a mistake early on, so you can create your custom page once you understand how it all works

All the commands and text we will be adding would be included inbetween the <body> and </body> tags since that is where they belong. So let's use an example and add some plain text for starters. Enter the words "I am learning HTML" inbetween the body tags, so it would look like this.

Quote:
<html>

<head>

<title>My First Webpage</title>

</head>

<body>

I am learning HTML

</body>

</html>


When viewed as a webpage now, all what would be displayed is:

Quote:
I am learning HTML



Now for the cool part, save this notepad file (MAC users: BBedit file) When the save menu pops up to give it a name, name it exactly this: index.html

Make sure to add the .html at the end. When you save this file, your notepad will automatically be converted into an html document, how cool is that! Be sure to save this index.html file in your learn folder, that is imperative that you place the index.html file into the learn folder.

Now, click on the index.html file, it should open your browser and you would see the text:

Quote:
I am learning HTML
 
FuN
Age: 30
Gender: Male
Joined: Sep 26 2008
Posts: 293
Posted: Sat Apr 18, 2009 12:39 pm
Additional Effects

Before we continue, let's make a check to make sure we are all on the same page. Be sure that you have created a folder named learn, and inside this folder, you have a notepad which converted into an html document named index Just like all your files on your computer, the extension (the.html at the end of index.html is an example of an extension) is not shown in the file name. So instead of the file name showing up in the folder as index.html, it would only read index.

Now for the fun part, adding additional HTML commands. I will start out with the easy ones, then show you the more complex commands later once you can handle it Now that your notepad is in the form of an html document and automatically opens up your web browser when clicked, PC users right click on this file, and you will see the options

*Note* This may look different depending on which programs you have installed on your PC, such as Winzip, WinRAR, etc.

Quote:
OPEN
OPEN in same Window
Print
Open With


You would select Open With and select notepad to get back to adding more commands. You should now see the HTML commands you have entered before if you have done this correctly. Now let's use some more HTML commands to do some cool things to the text "I am learning HTML" First let's use the <center> command to center this text on the page. Just like all the other HTML commands, you would place the <center> tag in the beginning of the text "I am learning HTML" and at the end you would use the forwardslash </center> An easy way to remember is to say:

FordwardSlash tag to the back

Say that about 5 times until it sinks in Now let's get to centering

Quote:
<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<center>I am learning HTML</center>

</body>

</html>


You can see how I added the first <center> tag to the beginning of "I am learning HTML" and added the </center> to the back Save this file and click on it again so that it opens in the web browser. Cool It's centered now! Congrats, you have learned how to use the bold and center tags already!

The thing about HTML commands, is knowing what each tag can do. Meaning that you already know that the <b> tag makes bold statements, the <html> tag makes html statements, the <title> tag adds a title to the page, and the <center> tags centers objects including text. Don't use up too much brainpower trying to figure out how or why they work, just know what each tag is used for and you will be alright. That is like stressing out over why the sky is blue, just accept the fact that it is and move on

The reason I say this are for the next set of commands that we are about to use to perform certain actions. Let's use the text "I am learning HTML" and use it to what is called a heading. Basically the heading is the title of the page that is displayed to users. I dont want you to get confused with the <title> command, so let me explain. The <title> command is now shown on the webpage, earlier when you opened up the index.html file in your web browser, the only thing you could see was "I am learning HTML" The <title> command is hidden but is shown when you bookmark that page. The heading is the title that users can actually see when they visit your page. Really all it is, is a way to make text bigger so it looks like a page title You do not have to add a header, some people use images as a page title, but we can get into all that fancy pro stuff later. For right now, I want to show you the header command.

The header command (nope, it's not <header> The command for the largest header is:
Code:
<h1>
and
Code:
</h1>


The number 1 you see in the tags are the size of the heading, and 1 is being the largest. If you would want the heading title a little bit smaller, you would use the command
Code:
<h2>
and
Code:
</h2>
It goes all the way up to <h6> which is the smallest header size.

So let's turn the text "I am learning HTML" into a header, a page title. You would add the <h1> in the front of the text and </h1> in the back. Of course you have those <center> tags there dont forget about that, np though. Let me show you how it's done


Quote:
<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<center><h1>I am learning HTML</h1></center>

</body>

</html>



*Note* There is another way to center headlines without the <center> tags, but I won't get into that now. Either way works

You can see that I simply added the header tags as if the center tags were not there, this is ok. Only make sure that whichever tag is first, the same tag with the fordwardslash needs to be at the end. Confused? Here's an example on using two different HTML tags

Ok, let's say that I want to make the words "funender.com" centered and with a heading size of 1. I would use the command

Code:
<center><h1>funender.com</h1></center>


You can see that the center tags are at the end, and the <h1> tags are inbetween them. If they were out of place, such as the <center tag came first, the <h1> tag next, then the </center> tag next, and the </h1> tag at the end, such as this

Wrong:
Code:
<center><h1>funender.com</center></h1>


Sometimes it may cause the command not to work, or not display properly, and sometimes it's ok. This is a huge concern when using the <table> commands, so just make sure that if a tag begins in the beginning, the end should be in the end

Correct:
Code:
<center><h1>funender.com</h1></center>


There are also some tags that do not end in a forwardslash. I wanted to save this info until you understood the whole forwardslash thing so I wouldnt confuse you. These perform very simple functions and are used a lot. One of them is the
Code:
<hr>
tag. What this tag does is create a horizontal line across the page. It can be used to separate date entries, guestbook, etc. Another command is my personal favorite, the
Code:
<br>
tag. This tag moves you to the next line, because remember that whitespace is ignored on webpages, so you cannot simply hit the enter key for the text to appear on the next line. Using the <br> tag performs that action. You can add more spaces by using the <br> tag more then once, such as this for example:

Code:
<br>
<br>
<br>


*note* there are more commands, but I want to keep this short and sweet so you can learn how to use HTML quicker without having everything thrown at you at once.

Going back to the headline tags now, (I mentioned I would bring this back up later about centering without the <center> tags) some HTML commands allow you to combine more then one command together to perform mutiple tasks without always needing separate tags. One example with the <h1> tags would be the align function (known as attributes) Remember now we used the command

Code:
<center><h1>I am learning HTML</h1></center>


To center "I am learning HTML" on the index page? well you can use the align attribute to perform both the heading and center function. The command for that would be

Code:
<h1 align=center>
and
Code:
</h1>


If you take a second and look at it, common sense would tell you how this works. Have you ever taken algebra in highschool, and had variables like a + b = c? Well, you dont have to know algebra at all for HTML, but this is my analogy so bare with me Looking at this tag, you will see that h1 is the heading, align makes the heading align, and the equals sign is what the heading and align will cause the text to do, which is to center If you are confused you can totally forget my analogy and continue, I am only having hghschool flashbacks

So now I would like you to delete the <center> and </center> tags from the index, and replace them to look like this:

Quote:
<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1 align=center>I am learning HTML</h1>

</body>

</html>



Save this file again and open it click on it to open up your web browser. You will see that it still performs the same function as the <center> tags. There is more to the align attribute and I am going to get into that next.

Exit out of the browser, and again right click on the index.html file, and open with notepad. Now for the extra features of the align attribute, are also the left and right alignment. You would simply replace the part that says center in the <h1 align=center> tag with left to make the text move to the left of the page. The command to move the heading to the left would be:

Code:
<h1 align=left>I am learning HTML</h1>


You can see that the only change I had to make was where the "center" used to be, and entered "left" To align the heading to the right, it's the same way. Delete the "left" and enter "right" as so:

Code:
<h1 align=right>I am learning HTML</h1>


Are you still hanging with FuNEnD3R? If so then great! Let's move on!
 
FuN
Age: 30
Gender: Male
Joined: Sep 26 2008
Posts: 293
Posted: Sat Apr 18, 2009 12:47 pm
More complex HTML codes

Ahh yes, the part we have all been waiting for.... now to add anchored links! Before we begin, I thought I would mention this now that I have your attention Always, always always always make backups of files. Meaning to simply copy your web page files, and save them at another location on your computer so in case you mess up (which you will hehe) you can simply go back to the backup file and start from where you last saved instead of loosing it all. I always make backups just in case the computer crashes, power goes out, or when I mess up In fact I am even copying backups of this tutorial topic! So make copying files as backups a good habit!

Now, back to the links. In order to create an anchored link, you need two things:

    1. the link for the page, of course
    2. make a name for it so that visitor's know what they are clicking on!


To do this, use the <a href> command. So an example would be a link to my site. The url to this site is
Code:
www.funender.com

and the name I want to give the link is
Code:
Visit www.funender.com!


*Important Note* always be sure to include the whole url beginning with
Code:
http://


If not, the url will result in a page not displayed error since it will search for the url www.funender.com from within the directories of your own site, instead of realizing it is a site of it's own located elsewhere. To link to pages from within your own website, such as extra web pages and files, you do not need to worry about this, I will explain more later[/size]

Now for the example to funender.com:

Code:
<a href="http://www.funender.com">Visit www.funender.com!</a>


This will create a link like this:




So to add whichever link you wish, all you have to do is replace the URL with the one you want, and give it a title. You should be able to look at the example above and figure it out.

You can also use the <a href> link to direct visitors of your website to email you. Clicking on this link usually will open up the user's email program automatically and insert the email link so all they have to do is type in the subject and the message. To create an email link, use the command:

Code:
<a href="mailto:no_one@funender.com">Contact Us</a>


I gave the link title "Contact Us" but of course you can change that text to whatever you want. Of course I have entered my email address in this example as no_one@funender.com, change that email address and add yours If I were to place the links in the index.html file, it would look like so:

Quote:
<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1 align=center>I am learning HTML</h1>

<a href="http://www.funender.com">Visit www.funender.com!</a>

<br>
<br>

<a href="mailto:no_one@funender.com">Contact Us</a>

</body>

</html>


If you notice I have included 2 <br> tags after the anchor link to my site. I did this so that the "contact us" link wouldn't be right beside the funender.com link. Without those <br> tags the page links looked similar to this:

Quote:
visit [url]www.funender.com![/url] Contact Us


You can save and open up index.html in the browser to see how it looks now with the <br> tags. I have typed a lot of info on one topic page, so I will create a new topic located below

Continue to the next topic on learning More complex HTML codes....
 
fastnfurious
Age: n/a
Gender: n/a
Joined: May 08 2009
Posts: 9
Posted: Mon May 18, 2009 8:08 am
Thanks for the post. I don't like programing that much I like to CMS to build website. However it is helpful to build the basic of HTML thanks again.
 
ChadW
Age: n/a
Gender: n/a
Joined: May 31 2009
Posts: 25
Posted: Sun May 31, 2009 6:47 am
Awesome point for you.

+1
 
Watermelon
Age: n/a
Gender: n/a
Joined: May 31 2009
Posts: 20
Posted: Wed Jun 3, 2009 6:45 am
Thank you SO MUCH. I'm going into web design, so this will be most helpful!
 
Chaibolna
Age: n/a
Gender: n/a
Joined: Nov 11 2009
Posts: 1
Posted: Wed Nov 11, 2009 6:44 am
HI guys

The Easiest Way to Learn HTML: Create Your First Website - There are a lot of HTML tutorials out there, but this one gets straight to the point and explains.Download the latest version of The Easiest Way to Learn HTML: Create Your First Website free. There are a lot of HTML tutorials out there, but this one gets


Thanks
 
Tsuki
Age: 20
Gender: Female
Joined: Nov 29 2009
Posts: 137
Posted: Sun Nov 29, 2009 11:19 pm
thanks for the post FuN!!!
I got myself a book on HTML and DHTML, but i think i'll be coming back to this XD i'll prolly have to design a site for an aunt's boss, so i think this'll help tons! thank you!!! *bow down*

....psssst is it ok if i ask for help when i'm at it? ^^; thank you!
 
alexdenipaul
Age: n/a
Gender: n/a
Joined: Dec 14 2009
Posts: 5
Posted: Mon Dec 14, 2009 4:37 am
I am also trying to setup Java SOAP Client to talk to Omniture WS API, but I am not able to authenticate the client. I get invalid login seo. Is there anything you can do to help? Here is my SOAP header.



<soapenv:Header>
<wsse:Security soapenv:mustUnderstand="1" xmlns:wsse=" ">
<wsse:UsernameToken wsud="User">
<wsse:Username>MyUsername<wsse:Username>
<wsseassword Type="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-username-token-profile-1.0#PasswordDigest">MyPassword
</wsseassword> work at home
<wsse:Nonce>MyNonce</wsse:Nonce>
<wsu:Created xmlns:wsu=" ">2009-01-29 13:09:56</wsu:Created> dedicated servers
</wsse:UsernameToken>
</wsse:Security>
</soapenv:Header>

I am also having problem with namespace for the create element. How can i eliminate that attribute? Any help is appreciated. website hosting
 
 
Subscribe to this topic  |  Topic watchers (0)
 
Quick Reply Total Replies (9)
You can Login or Create a Free Account to post a reply
 
 
Forum Options
 

 
Your Activity
You have to login or signup to view your forum activity
 

 
Sponsors