Tutorial: HTML in 60 Minutes
Jun 21st, 2009 | By Dee | Category: Html and Design, Newbie Boot CampLet’s take a look at programming HTML from scratch. So, if you’re stuck using that EDITOR software then it’s time to move on. HTML coding by hand – typing the characters that form a webpage will lead to MUCH greater freedom in your web-page creation and you’ll be able to do things that you just can not do with that clunky old editor.
OK, lets get started…
I’m going to take you through the folowing things – EVERY part you need to code your website from SCRATCH.
And that is basically it!
What’s a TAG?
Good question! A ‘tag’ refers to what MAKES an HTML document. Basically you type text and then you surround that text with a tag that tells the browser HOW that text should look to the viewers. We can not make HTML tags up – they are all predefined by the folks who invent HTML so we just use THEIR tags to do stuff. There are actually not that many tags that are of use to us in designing webpages!
A ‘tag’ has a START TAG and an END TAG as follows:
<TAG>text here or image</TAG>
A browser can spot a tag because it has ‘<’ before the text and ‘/>’ after it.
HTML is pretty simple and it is a programming language that you can understand quite easily and can actually ‘read’ the source code.
This might all sound a bit complicated if you are VERY new, but it is fine! Let’s just type a webpage from scratch and then you’ll see how it all works.
PRINT THIS article out in it’s entirety and basically COPY what happens here and then TRY TO TYPE THE HTML PAGE OUT WITHOUT THIS GUIDE. Like Lego – build it with the instructions and then try to build it WITHOUT the instructions…
STEP 1 – Start your engines!
Start NOTEPAD or a text editor (For most Windows OS you can hit Start button, then click on Run, then type ‘notepad’ and hit enter). That was easy!
STEP 2 – The Document TAGs
In you new NOTEPAD window type (or cheat and copy/paste…lol):
<HTML>
</HTML>
We have told the browser that this is an HMTL document.
Go to File SAVE AS and save as ‘webpage.html’. You’ll only need to save it AS once – after that just go to File SAVE.
STEP 3 – The HEAD tags
Add:
<HTML>
<HEAD></HEAD>
</HTML>
Every HTML file must have a HEAD tag. This is where the TITLE will live along with the META tags that you can read about at http://www.searchenginewatch.com need to go.
STEP 4 – The TITLE Tags
Add:
<HTML>
<HEAD><TITLE></TITLE></HEAD>
</HTML>
OK now we just added the TITLE tag. You know the bit at the TOP of the web browser –RIGHT at the top – the BAR? You can choose some words to go here… Lets try this, add:
Add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
</HTML>
Now start Netscape or any browser and go to FILE OPEN and open webpage.html – this is called ‘previewing’ your page. You get your page looking right and THEN upload it : )
STEP 5 – The BODY tag
Add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
</BODY>
</HTML>
We just added a ‘SPACE’ where the text and the webpage goes. The viewer will see EVERYTHING that you type in the <BODY> </BODY> tag – it is a BIG ONE!
STEP 6 – Adding BODY text
OK, let’s add some text here.
Add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
The first line of text.
</BODY>
</HTML>
The best way for you to experience it is to SAVE and PREVIEW. I will be saying this a lot here so get used to it : ) Save the file and open it in your browser… See how the text is just o the left and at the top? Great – that is your fist webpage BY HAND – now lets learn some tricks…
STEP 7 – How to CENTER stuff!
Add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
The first line of text.
<CENTER>The second line of text.</CENTER>
</BODY>
</HTML>
SAVE AND PREVIEW
The center tag is used to well, center stuff! BUT we have a problem! This is supposed to be the SECOND line of text BUT it is just on the same line as the FIRST! How can this be? We have, after all typed it on the HTML on the second line! This is because we need to add a tag to move this onto the NEXT LINE…
STEP 8 – Moving banners and text to the next line down…
Add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
The first line of text.
<BR>
<CENTER>The second line of text.</CENTER>
</BODY>
</HTML>
NOW SAVE AND PREVIEW
Then add another <BR>:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
The first line of text.
<BR>
<BR>
<CENTER>The second line of text.</CENTER>
</BODY>
</HTML>
NOW SAVE AND PREVIEW AGAIN
See how each one you add moves the text down another line? This is how you add VERTICAL spacing to your webpage.
STEP 9 – The FONT tag
Now this will take some time as you have to add a lot here – add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
The first line of text.
<BR>
<BR>
<CENTER>The second line of text.</CENTER>
<BR>
<BR>
<CENTER><FONT SIZE=”4″>The third line of text.</FONT></CENTER>
<BR>
<BR>
<CENTER><FONT COLOR=”#FF0000″>The forth line of text.</FONT></CENTER>
<BR>
<BR>
<CENTER><FONT SIZE=”4″ COLOR=”#FF0000″>The fifth line of text.</FONT></CENTER>
</BODY>
</HTML>
SAVE AND PREVIEW
The FONT tag lets us choose the SIZE and COLOR of our text. Look at the HTML and try to see HOW you just applied it. Play with it. The SIZE can run from 1 – 7.
The COLOR=”#FF0000″ tells the browser what color should be used here. Try replacing it with #00FF00 and #0000FF to see what happens : )
STEP 10 – Adding an IMAGE
Two more tags to learn and that is ALL you need to make your pages from scratch!
OK we are going to add an image so what I need you to do is to get a GIF and copy it to the folder that webpage.html is saved in. NAME IT image.gif
Add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
The first line of text.
<BR>
<BR>
<CENTER>The second line of text.</CENTER>
<BR>
<BR>
<CENTER><FONT SIZE=”4″>The third line of text.</FONT></CENTER>
<BR>
<BR>
<CENTER><FONT COLOR=”#FF0000″>The forth line of text.</FONT></CENTER>
<BR>
<BR>
<CENTER><FONT SIZE=”4″ COLOR=”#FF0000″>The fifth line of text.</FONT></CENTER>
<BR>
<BR>
<IMG SRC=”image.gif”>
</BODY>
</HTML>
SAVE AND PREVIEW
You should see your little image at the base of the page. This is how we add images (banners and graphics etc.) to our pages.
STEP 11 – Making a LINK from an image or text…
OK, this is the tricky bit, we are going to make the FIRST line of text and the IMAGE a link!
Add:
<HTML>
<HEAD><TITLE>My webpage title!</TITLE></HEAD>
<BODY>
<A HREF=http://www.anylink.com>The first line of text.</A>
<BR>
<BR>
<CENTER>The second line of text.</CENTER>
<BR>
<BR>
<CENTER><FONT SIZE=”4″>The third line of text.</FONT></CENTER>
<BR>
<BR>
<CENTER><FONT COLOR=”#FF0000″>The forth line of text.</FONT></CENTER>
<BR>
<BR>
<CENTER><FONT SIZE=”4″ COLOR=”#FF0000″>The fifth line of text.</FONT></CENTER>
<BR>
<BR>
<A HREF=http://www.anylink.com><IMG SRC=”image.gif”></A>
</BODY>
</HTML>
SAVE AND PREVIEW
So now there should be 2 links on your page. You can replace http://www.anylink.com with your own links and pages.
WHAT NEXT…
Well, if you are new, this exercise SHOULD leave you feeling a little confused : ) What you need to do now is to try to figure out from this mess what does what and what happens if you change this, or WHY does this bit not work etc.… MASTER the tags mentioned here and you will make life so much easier for yourself in this business – I PROMISE YOU!
For further reading – go to http://www.htmlgoodies.com for more tutorials and a greater in-depth explanation of the TAGS etc…Affiliate Rugu also has a great HTML/CSS Tutorial to check out!
We Recommend:
The Native Remedies Affiliate Program
The Native Remedies Affiliate Network is a Two-tier program with high conversion rates and top level commissions. You can Earn 25% commissions on each direct sale and 5% on second tier sales – so even affiliates that sign up via your site earn you commissions!
Commissions are lifetime! – so each time your customer buys again, you get commissions! Click now to learn more about the NativeRemedies/PetAlive Affiliate Program!
Become a Wholesale, Dropship or Distributor Customer!
As demand for NativeRemedies and Pet Alive natural health products & remedies have grown, so has the opportunity for distributors, wholesalers and drop shippers to partner with us. Whether you are a small or large retailer, alternative health provider, an individual with a broad network of associates or a large distributor, Native Remedies has a reseller program designed just for you!
Wholesale Purchase Program – For individual resellers, retail stores, health providers or others who purchase in bulk and who resell the products directly to consumers.
Drop Ship Purchase Program – For those who do not wish to order in bulk but who wish resell our products along with others and then have us drop ship the products for them. (No Dropship Fees!)
Distributor Purchase Program – For large distributors who typically wholesale our products to retail stores and health practitioners and who can meet the higher minimum order volumes.
MaxBlogPress Ninja Affiliate System
It’s no secret that 95% of all bloggers out there make pennies from affiliate marketing, while a select few who are privileged enough to be in the “inner circle” make thousands of dollars effortlessly. Ninja Affiliate is WordPress plugin developed to imbue lethal marketing powers into your WordPress blog and instantly double or triple your affiliate marketing commissions with almost no effort on your part.
Using Ninja Affiliate, you can automatically convert any keyword in your blog to an affiliate link instantly. You can also cloak your affiliate links, track them and manage them right from your WordPress text editor. AffiliateRugu uses and highly recommends Ninja Affiliate by MaxBlogPress!
