Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

HTML Tutorial


  • Please log in to reply

#1
ditto

ditto

    - i pwn n00bs -

  • Member
  • PipPipPipPip
  • 1,260 posts
Hello,

Have you ever thought about making your own website but do not know how. Well this is a great place for you to start. I will be adding more as time passes by. So just sit back and read away. Make sure you practice, practice, practice, of course when you are done your school work or any other duties. I only ask that users post their questions in the forum instead of personal messaging to me so that others may learn from your question. GeekstoGo staff memebers may add to this tutorial as they wish. Well here it goes.

HTML- Hyper-Text Markup Language is the code that an internet browser translates into what you see on a web page. It is the most basic web language that you can learn. With HTML you can put anything online: pictures, journals, audio, movies, etc. It can be combined with other scripts and handlers to create a more dynamic website. But don't worry, with just HTML you can be on your way to making professional looking websites.


Table of Contents:
Section 1- Your First Site


---------------
Section 1- Your First Site

You are about to create your first site. Of course, you will need to have a host to put the html file on so that others may see it. I would recommed using Geocities for now until GtG has our own free hosting accounts.

Open up notepad and copy and paste the following code into notepad.
<html>
<head>
<title>My Very First Page</title>
</head>
<body>
Hello Everyone! Welcome to my site.<br>
<b>Bold</b>
<i>italic</i>
<u>underline</u>
</body>
</html>

Save it as "index.html". open up Internet Explorer and then go to File->Open and browse to the file. There you go, your first website.

The code explained:

<html>
<head>
<title>My Very First Page</title>
</head>
The very first thing you see is <html>. This is called a tag. Everything that is contained in <> are tags and/or attributes of the tag. The <html> tag lets the browser know that the following code is written in HTML. Notice at the end the forward slash "/" in </html>. This signifies that the tag is closing.

The <head> tag is sort of like the header of a letter. Tells you the title and other information about the website including any style sheets or meta keywords for the page. The <title> tag as you may have guess show the title of the page. Notice how it says "My Very First Page" at the top of the web page you just created.

<body>
Hello Everyone! Welcome to my site.<br>
<b>Bold</b>
<i>italic</i>
<u>underline</u>
</body>
</html>

The <body> tag is just like the body of a letter. It is wherer everything that is displayed on the letter would go. In this case, the website.
The <br> tag means breakline; Simply starting a new line. Notice how there is no closed break line tag (</br>)
The <b>,<i>,<u> are the bold, italic, and underline font tags respectively. Finally the </body> tag closes the body of the site and the </html> ends the html.

This is the end of section 1. You should be able to create a pretty basic website now. I will go into the use of tables and hyperlinks in the next sections.

Please post any questions/comments/suggestions. Thank you!

ditto
  • 0

Advertisements


#2
ScHwErV

ScHwErV

    Member 5k

  • Retired Staff
  • 21,285 posts
  • MVP
This forum is for tutorials. If you have questions about web design, post those in the appropriate forum. All other posts will be removed.

ScHwErV :tazz:
  • 0

#3
Dominicc2003

Dominicc2003

    Member

  • Member
  • PipPipPip
  • 120 posts
I'm pretty sure this is the right place to post:
Very nice tutorial but wouldn't it be better to put the <p> tags in the code now to get them in good habits?
  • 0

#4
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
That is a very simple tutorial, not really something you going to learn an all-full-lot from. My understanding it it will be removed once we get a better tutorial in place in the W3C University we have started.
  • 0

#5
b1caez01

b1caez01

    Banned

  • Banned
  • PipPipPip
  • 445 posts
Where do I go from this page to get the next installment...there are on cues at the bottom of the page appearing in my browser...

...very interested...
  • 0

#6
Sp3ke

Sp3ke

    Member

  • Member
  • PipPip
  • 41 posts
Thanks man, this really helped. I'm only just starting to learn HTML.
  • 0

#7
Necrotising Fasciitis

Necrotising Fasciitis

    New Member

  • Member
  • Pip
  • 3 posts
Just a quick note.

For compatibility with some browsers such as early Mozilla releases, you should use <br /> instead of <br> for a line break.
  • 0

#8
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
That is wrong. <br/> is used in XHTML since you have to close all tags. <br> will work in any browser if your displaying the pages as HTML. <br /> (note the space) is used when the page maybe displayed as either HTML or XHTML since they normally can both handle it. Though it is preferable you use the correct one.

And since there is no real reason why you should use XHTML over HTML for 99% of people, and a number of reasons why you should not use it. It is best to stick with <br> and HTML
  • 0

#9
Scribbles

Scribbles

    Member

  • Member
  • PipPip
  • 22 posts
What about using [codebox]&nbsp;[/codebox] ?

that what ive always used

Edited by Scribbles, 24 April 2008 - 10:32 PM.

  • 0

#10
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
I hope everyone understands that the tutorial is a very basic one. More fitting for an HTML 4.01 Transitional document type. If validated, it would be flagged for several errors (one is no character set meta tag) so I suggest any code you put into a web page, including the CSS, be validated at the w3c.org's validators. Now, these validators are not the be all, cure all, but they will certainly help you obtain a closer cross-browser compatibility. Not all errors have to be corrected and many may not be under your control.

This is a good start, but I hope bad coding habits are not presented right off like so many of the online tutorials I have seen. I moderate a coding tutorial site and I've been after the Admin to update the site as many (probably most) tutorials are incorrect for today's web pages.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP