HTML Tutorial

**323** · 17 Sep. 2010 10:40pm

I'm going to spend a little time to try to explain the basics of HTML

Please +Rep if this helped!

Welcome

Ok. First, you'll need an internet browser

Internet Explorer is one of the most common, but really any work.

All your going to need now, is a simple word processor program such as Microsoft Word, or Notepad or something. NOTE: You don't have to be connected to the internet while making your website, but to preview it you will.

What HTML Is

HTML is pretty much the basics of all websites. If you want an example of HTML, just go to one of your favorite websites (Even Logical Gamers!) and (If your on Internet Explorer) Click the "Page" tab, then click on "View Source". If you are on a different browser, you can do the same, or hit the F12 Key to see developer tools which has a more advanced view of the Source Code. I guarantee you EVERY one will have been made up of a combination of HTML and other programming languages.

HTML Stands for Hyper Text Markup Language.

Code:

    •  Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased - computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on. But HTML is different - you can go wherever you want and whenever you want. For example, it is not necessary to visit google.com before you visit logicalgamers.com
    • Text is self-explanatory.
    •  Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.
    • Language is what HTML is. It uses many English words.

Tags and Elements

A tag is the label that goes on each end of the element. Tags start with < and end with >

An element is what goes in the tag (The < >)

And Example of a tag and an element combined would look like this:

HTML Code:

<b>Bold Text :O</b>

The b stands for bold, and to end the bold text you would type the bold tag but add a / before the element

Which would look like this when on a website:

Bold Text

There are also codes such as h1-6 (h stands for heading)

The code would look like this:

HTML Code:

<h1>Heading! :O</h1>

<h2>Sub Heading! :O</h2>

Which would look like this on a website:

Heading!

Sub Heading!

And so on and so forth.

Placing Tags and Writing Tags

For now, im going to refer to the entire thing (Tag and element) as just a tag

So, you may be asking, should the tags be upper or lower case?

The answer to that, is, either or. Most people write their tags in lowercase, but almost all browsers still recognize tags that are typed in uppercase. But you should get in the habit of typing them lowercase just in case (Didn't even try to make that a fail-pun)

Another question you may be asking yourself is, do i have to put a closing tag (the </tagname> at the end of every tag? The answer is yes. only on special occasions do you not have to, such as line breaks.

Line breaks can be added by adding the tag , but some people prefer to close the tag and make it say 

I personally just type , but either way works.

Creating your first website!

Now, you'll be creating your first website! First, open a word processor such as Microsoft word or Notepad.

Now, for every website you ever make, you'll have to add these tags:

HTML Code:

<html>

<head>
</head>

<body>
</body>

</html>

In the head part, you will also have a title tag which will display the name of your page in the browser (so what the browser should display as the page name), but we'll get to that later.

For now, dont mess with the <head> tags. We'll be working more with the <body> tags.

To start a new paragraph in your website, place a tag. make sure to add the tag at the end of your paragraph!

What is within the <body> tags, is whats displayed on your website. for example:

HTML Code:

<html>

<head>
<title>Cool Games</title>
</head>

<body>
<p><h1>Welcome to my website!</h1></p>
<br>
<p>On my website you will find a bunch of super fun games! Hope you enjoy!</p>
</body>

</html>

This would make a blank white page that your browser calls "Cool Games" and on the blank page it will say "Welcome to my website!" big on the top, then a break, then "On my website you will find a bunch of super fun games! Hope you enjoy!". If you want, you can copy and paste that into notepad and hit "Preview in browser" and see what I mean.

When you make a basic website, you have to save it as a .htm file. No other file types will work online

also, if you dont have a "preview in broswer" button, you can see you website by hitting start, then run, and typing in, for example if i had my website on the c drive in a folder named websites, c:\websites\coolgames.htm

Typing that into the "Run" box will open your website in internet explorer (Or your default browser)

Now, your going to want to try to make a few basic pages by yourself. If you want, expirement with other tags such as (Italics) or (Emphasized, pretty much like italics). The things I'm teaching you in this tutorial are just the basic building blocks of HTML. Later, I will make more advanced tutorials for HTML too

Some New Elements to learn

Here are some new elements to expirement with on your new websites

HTML Code:

<small>Small Text!</small>

Another more advanced element to experiment with is the list one

First, you have to make the <ul> tag, which stands for unordered list.

Then, a <li> tag, with what you want to list after it, then close it with </li>

It should look like this if you make it right:

HTML Code:

<ul>
<li>Gaia Items</li>
<li>Gaia Gold</li>
</ul>

Which would look like this on your website:

• Gaia Items
• Gaia Gold

You can also do ordered lists

That would look like this:

HTML Code:

<ol>
<li>Gaia Items</li>
<li>Gaia Gold</li>
</ol>

Which would look like this on your website:

1. Gaia Items
2. Gaia Gold

The finial element I'll be showing you in this section is the <hr> tag

Its like the line break tag, but instead of a blank space it leaves a horizontal line. Just a long black line

It would look like this on your website:

HTML Code:

<p><h1>Heading</h1></p>
<hr>
<p>Stuff under epic line</p>

Which would show a big heading, then a black line, then it would say "Stuff under epic line" below the line

Thats all for this tutorial

In my next one, look forward to finding out how to add attributes, tables, links, CSS Layouts, and pictures to your website!

Thanks,

~Flareboy323

**323** · 31 Dec. 2010 07:20pm

Sorry for the bump but I need to add:

Two other really good HTML Tutorials can be found at HTML and CSS Tutorials, References, and Articles | HTML Dog and Free tutorials on HTML and CSS - Build your own website - HTML.net

**323** · 10 Jul. 2011 02:03pm

Bump, because I don't see any other HTML Tutorials on LG xD

Thread: HTML Tutorial

LinkBack

Thread Tools

Search Thread

Rate This Thread

Display

HTML Tutorial

Posting Permissions