Dream.In.Code -> HTML tutorial. Copy and Paste from my tutorial post. (which still hasn't been accepted)

Subscribe to Geek Discussion, By Jackson

HTML tutorial. Copy and Paste from my tutorial post. (which still hasn't been accepted)

28 October 2011

1 Comments

Posted by JacksonD

Hello, I'm Jackson.
I am an expert at HTML and I am willing to support anyone that needs help. I run a class at my school, where I teach a group of people the HTML/CSS languages.

Today I am going to be teaching you how to start learning HTML, and write your first page.
I'm not sure if this has been posted, but I'm going to make this.. my way.
Lets start:

HTML is a very simple code, Its a fast to learn code and can be written very quickly. HTML is used in a lot of code languages, including PHP.

HTML stands for Hypertext Markup Language, It is simply written with open and closed tags.

The first line for HTML is the code to start the script, without this line, a lot of errors can happen.

<html>

You will notice the < at the start, that means a line of HTML script is starting. After the < you put the HTML command, in this case HTML, You will also notice that after <html, it has >, the > mark stands that that line of code has been closed off.

Next we will make a page title, This is simply the title at the top of the page.
Posted Image

(ignore page content, I just got this image of Google Images
The page title code looks like this:

<title>

but thats not it, you need to name your page title, Notice that the content always comes after the command.

<title> Your Page Title Here!

Now, That might look like all you need to do, but you need to CLOSE, the command. Its fairly simple, its the same as the first line, just with a / in front of it. Lets finish off the title.

</title>

Your title code should look line this now:

<title> Your Page Title Here! </title>

If your a bit confused, let me tell you a bit more about the open and closed tags.
The open tag, starts the code. It looks like this:

<tag>

The content goes after the open tag.
The closed tag looks like this:

</tag>

The closed tag finishes it off, without that your code will continue, ruining your page. Ignore the <tag> I used tag simply for an example.
Lets continue.

Now that we have made a title, lets start the body area

<body>

No need to close this tag off yet! Everything after this command, will show up one the page. The body is simply the content area.

Now, you have started your first HTML code. It should look like this:

<html>
<title> Your Page Title Here! </title>
<body>

Now, Here is some things to put in your page, In the final code, It expects that you used all these.

A Header: (There is 5 HTML headers, H1 Being the biggest, H5 being the smallest, lets use the biggest.)

<h1> Main Header </h1>

Just remember, Main Header can be replaced with whatever you want the header to say.

Now an Image:

<img src="http://your-site.com/image.png></img>

Notice something differant? It had src="", The src is simple, it justs gets the image, instead of putting the link in the content, you put it in src. Remember, always have src as src="whatever", you can replace whatever with...well, whatever.

If this has confused you, just leave a reply and I will help you, Also, replace the link in src with your image location.

Now lets add a Hyperlink:

<a href="http://your-site.com/page"> Text </a>

Notice the href, it looks a lot like src, its the same, just href gets data for the link, and src gets image data.

Now, some simple text. There are many ways to make HTML text, this the command I use, as do a lot of people.

<p> Text Here! </p>

Now we have added some things to the page, lets finish off our code.

Remember the <body> command earlier in this tutorial? Lets finish that off.

</body>

Now that our page content is ended, Lets finish the script altogether.

</html>

Your complete code, expecting you used all the examples correctly, should look like this:

<html>
<title> Your Page Title Here! <title>
<body>
<h1> Main Header </h1>
<img src="http://your-site.com/image.png></img>
<a href="http://your-site.com/page"> Text </a>
<p> Text Here! </p>
</body>
</html>

See? How simple was that!
Basic site with three things, Quick and Simple.

Reminders/Notes:
Replace the examples with your link/image/text.

If you wish to learn more, Just browse HTML snippets!

Categories: Uncategorized

Share This Entry: