Page 1 of 1

Guide to the Web and Design part II HTML Basics Rate Topic: ***** 1 Votes

#1 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 97
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Posted 03 October 2006 - 10:04 PM

II.HTML Basics
HTML is the basis of the Internet, a simple language that is deciphered by your web browser to display text, graphics or whatever else your heart desires. Try opening your browser right now, and whenever your homepage loads go click on view > source. That is HTML. It may look like gibberish right now but is actually very simple and will not take long for you to be able to read it easily.

Start off by opening Windows Notepad. This simple tool will allow you to create and edit your code. You can also use WSYWIG editors, but for simplicity in learning the language, go ahead and just open notepad and we can get started.

Since this is probably the first page of your website, lets go ahead and make a new folder on your computer, any name you want works and any location, for the purpose of our examples I made a folder on my C Drive named 'website1' . Now , every page that you make on this website you will want to include in this one folder, it will be explained later on why this is important, just know that for organizations sake and if other people are to eventually view this site this is necessary.

Alright, so your in notepad and you've got a blank page in front of you. Where do you start? Well, HTML has some easy basic constructs to set up your page. First things first, the browser is going to open this document and the first thing it needs to see is what kind of language the page is written in. So you will identify that the code is html with the <html> tag. A tag is a particular identifier surround by the less-than or greater-than brackets. These are also sometimes called containers, I will probably refer to them as both at one time or another. In HTML you will open a tag with regular brackets, and then close that tag when you are done with it, with the brackets and a slash preceding the identifier. For example, the very beginning of your website opens the page with <html> and the very end will close it with </html>. That's it.

One thing about these containers is that they normally are going to need to be nested within each other. So you do not want to have something like this :
<tag1><tag2></tag1></tag2>
The tag2 container should be opened and closed within tag1, not where it is straddling the tag1 closer. This is important because if you have overlapping font tags, or table tags then your html will simply cease to perform correctly.

The next page construct is the <head> tag. This part of the page is not normally shown in the browsers main content area but instead can be used to hold information vital to the page's purpose but that can remain hidden. (Later on in the guide you will find more uses for this) One thing you can do in the header of the page is title your page with the title tag. Simply enclose what you would like the browser to display in the top left corner of your window in the tag and there you are. Try it out.

Below I displayed what we should have up to now. Notice that it does not matter if all the text is on one line or not, nor if the tags are all on the same line or spread out. So go ahead, put what you would like in for the title, then lets save the page. You can save it as whatever you would like , but if your following along with me word for word you can save it as 'index.html'. Then lets navigate to that site and see how it looks. Open up your browser and in the address bar type in C:/website1/index.html This should bring up a blank page, but if you inspect the title in the to left, your language should be in there.
Neat , you got a site going. Yippee!

<html>
<head>
<title> This is the tile of your page. Check the top left of your browser window. </title>
</head>
</html>

The main content of a website is included in <body> tags. Here you can type all the good stuff you want to display.

Your final setup as of now :

<html>
<head>
<title> This is the tile of your page. Check the top left of your browser window. </title>
</head>
<body> Replace this with your content
</body>
</html>

To add some content to the actual page one quick way is to use headers. Much like in Microsfot Word there are styles preconfigured in html. Numbered 1-6 these headers are organized, H1 being the most important and therefore the largest.

<h1> Your most important header </h1>
<h6> Your least important header </h6>

Also, set up your text into paragraphs using <p>.

<p> place some content in here and you will have a fantastic looking site </p>
<p> now it may all be pretty plain right now but we are about to liven it up a little bit.

Now, notice that the second one i did not close the brackets on, <p> is one of the very few tags where that is allowed, so you can be a little bit more relaxed with it.

<html>
<head>
<title> This is the tile of your page. Check the top left of your browser window. </title>
</head>
<body> <h1> Your most important header </h1>
<p> place some content in here and you will have a fantastic looking site </p>
<p> now it may all be pretty plain right now but we are about to liven it up a little bit.
</body>
</html>

There you are, save your file, load it up in the browser one more time (C:/website1/index.html) and you will see your working site with real content this time. Now, in the next chapter we can make it pretty. Now, your options for displaying information are numerous. And I will start in the next section by continuing on with HTML, but be aware that new languages are coming out that can be used on top of HTML that do a lot of these little things better than this old and cranky language.

Also, the <br> tag adds a line break whenever you need it.
The paragraph tag already adds a line break automatically before each new paragraph.

Is This A Good Question/Topic? 2
  • +

Replies To: Guide to the Web and Design part II

#2 chili5  Icon User is offline

  • D.I.C Lover

Reputation: 19
  • View blog
  • Posts: 1,144
  • Joined: 28-December 07

Posted 02 January 2008 - 06:19 PM

Thats really informative thanks.

This post has been edited by chili5: 02 January 2008 - 06:20 PM

Was This Post Helpful? 0
  • +
  • -

#3 FiendKing04  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 10-August 08

Posted 24 December 2009 - 03:32 AM

As always, simple, but informative.

Many thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1