Basic Tutorials of HTML-For Noobs

**PoP_KiLLaH** · 10-10-2009

Welcome to this tutorial. If you are willing to learn HTML, then you must already have an understanding of its uses. If not then allow me to explain, HTML is a language used for building websites. Every website you see on the internet uses HTML, even Google.com. HTML is designed by a group of web designers at World Wide Web Consortium - Web Standards. All scripts and codes are made there. Check out their website for more info.
__________________________________________________ _
Now that you have an understanding, lets continue with our tutorial

LESSON 1: What is HTML?
First off, lets start off by understanding what HTML stands for below,

Hyper.Text.Markup.Language=HTML

I have no idea honestly what it means haha.

As mentioned above, HTML is the Key to building many websites and allowing the viewers to see it from a web browser. Even websites like Google have HTML.

You're probably wondering how a bunch of codes can build up a website. Well if you have ever used the internet before with browsers such as Internet Explorer, Firefox, or maybe even Opera, the answer would be right in your face. If you still haven't found the answer then take a look at the page source in your internet browser. Heres a list of options on how to do that,

*Internet Explorer*
View>Source

*Firefox*
View>Page Source or (Ctrl+U)

*Opera*
View>Source or (Ctrl+U)

Then you'll see a bunch of codes that may hurt your brain. But fear not! I'm willing to help you understand those codes! And we're going to get you started on the simplest way to understanding HTML. Now you're maybe wondering how? What kind of programs will you use? How am I going to use it on the internet?

Well believe it or not, HTML goes way back. Almost around the time C++ came into place or at least I think so... There weren't a lot of programs around the time. So the guys at w3c figured out a basic text editor to use for HTML back in the days. Trust me! You guys have most likely used this text editor before. Still don't know it? Alright I'd just come forward with it. The most common program for making HTML codes is,

*NotePad*

Yup, Microsoft NotePad. If you have never used Notepad before, you kind find it in the start menu (Start>Programs>Accessories>NotePad). Now lets start using html!

LESSON 2:MAKING HTML CODES

Alright now that we have a text editor for our codes, lets start by opening up notepad. If you've noticed, you don't really have many options with notepad, but trust me its the best starter program out there. You can get into more advanced programs after you discover the basics of HTML.

Now to start off building our webpage, we're going to need to start off a code to make our file html based. And this code will also be the start off for many other codes. Take a wild guess what this code is. Still haven't figured it out? Here it is,

Code:

<HTML>

Yup our first code! This is called the HTML tag. This code basically represents our webpage. Without it, nothing would basically show up on your website. Even if you type other codes, you will still need this piece of code to display your webpage.

If you notice, our code uses brackets (<). This is the basic design for making html codes. All codes are represented in brackets. And also in HTML our text are capital. It actually doesn't matter if your text are capital when making codes. You can even make it lower case. The web browser will still understand the code.

*NOTE*
Now there are two types of HTML. XHTML and HTML. XHTML is more dynamic coding. We are working with regular HTML. If you use XHTML, most of your codes would have to be capitalized. And XHTML would require quotations for giving properties to codes (You will have to learn this at their site.)W3.org

Alright now we need to give our webpage a title. The title appears at the top left corner of a webpage.

To give your webpage a title just type the following below,

Code:

<HTML><HEAD><TITLE> YOUR TITLE HERE</TITLE></HEAD>

In the Title tag, what ever you name it,for example if you used firefox and your title was MPGH. It would say MPGH- Mozilla Firefox at the very top left of your webpage. Also if you noticed, We inserted two of the same tags twice. But at the end of the second tags they start off with a forward slash within the brackets ( / ). This slash is very important in HTML. A forward slash is used to end a tag after you've completed putting all of your items within it. After you start a tag, its very important to close it. If you don't close your tags. Then your webpage may end up with errors!

Now lets explain these Tags,

<HEAD> TAG: This tag is basically for things the viewer will not see (except for the title). This tag can be used for scripts, meta tags, and much more. Its less important for this tutorial. But it is still always needed for your page title.

<TITLE> TAG: As mentioned above, This tag is used for naming your webpage. What ever you name your webpage, it will show up at the Top Left corner of your website. Every time someone visits your website, the title will be there for them to see.

Now we're still not done. You still want to put things on your website for people to see right? Well like a written letter or story book, webpages require a body. A body is an area where most of everything comes up.

Where going to put something in this body. Just some plain text. Maybe "Hello World!" or "MPGH RULEZ!" *your choice*. And to do that just type the following,
HTML Code:

Code:

<HTML><HEAD><TITLE>Your Title Here</TITLE></HEAD><BODY>MPGH RULEZ!</BODY>

Now we have a webpage with text in it.

<BODY> TAG: This tag is needed in order for all of your images, text, videos, and much more to show up on your webpage. Its actually the heart of your webpage.

Now you're maybe wanting to see your webpage. But hang on! We're almost done. Theres just one more thing we need to do before taking a look at our masterpiece. Haven't figured it out. Well take a look below,

HTML CODE:

Code:

<HTML> <HEAD> <TITLE>Your Title Here</TITLE> </HEAD><BODY>I ROCK!</BODY></HTML>

You Must Close Your <HTML> tag!!! This will complete your website.
*NOTE*
As a tutorial I'm just pointing this out so you don't publish your website without closing your <HTML> Tag. If your just editing your website, then you can still preview it. You will see more in lesson 3.

Now we have a full fledged webpage! But now you would like to see it on you web browser I am sure. Take a look at lesson 3!

LESSON 3:

Now I must apologize. I should have mentioned this back in lesson 2. But I wanted to make sure you've completed all of the basic HTML codes in notepad.

Now that we have all of our code in place. Its time to preview it on our webpage. Now to do this, we have save our webpage. But we must save it as a specific file. So click File>Save As. And at the bottom there is a text area to name your file. You want to type the name of your webpage and the file type. This is how you save a webpage file,

"yourwebfile.html"

You don't want to save it as yourwebfile.txt. That way, you wouldn't be able to preview it on your web browser.

Another way to save your file for the web is,

"yourwebfile.htm"

I guess HTM is a shorter form for the file type...

After naming your file, save it to your desktop *or anywhere you please*. After that open it up in your preferred web browser. If you noticed, everything you did in notepad with HTML has appeared on your web page. And at the top left corner of your web page is the title! If all of this shows on your web page, then you have successfully constructed your first website!

Now if you wish to keep learning HTML I suggest you go here,

W3Schools Online Web Tutorials

You can learn HTML and many other great things for Web-Designing from that website! It isn't hard either. Just put your mind to it, and you can become a great web designer.

Credits to w3schools.com And me

Thank ME if i helped!

**daniliard** · 10-10-2009

I remember this tutorial lol

**PoP_KiLLaH** · 10-14-2009

Originally Posted by Hackz-ftw

Wow leeched..

noob I saw this at website. NOOB. GTFO!

**anthon0498** · 11-29-2009

... the code in one line?
omg stfu

Thread: Basic Tutorials of HTML-For Noobs

Thread Tools

Display