You are invited to Log in or Register a free Frihost Account!

Basic HTML Introduction

I have written two HTML introductions. Both of which can be found on my friends site here:

I will also write them as to not take away unneccassary bandwidth away from my friends site.

In the file I will explain an introduction to HTML and will later add the rest.


HTML stands for HyperText Markup Language. It is used it webpages to
send instructions to your browser that get interpreted into all the
text and images you see on your screen. Now, before we begin, if you
don't already know what HTML is, I suggest you right click anywhere on
your screen and select "View Source" from the options that appear.
That will bring open up the HTML code that is used to create the page
you're reading right now in NotePad.

The first line is what is called a comment. It's not particularly
important -- it just lets whoever is reading the source code know what
type of document it is. A comment is made in this form:

<!-- Comment Text Here -->

using HTML. Anything in between those two markers is ignored by the
browser. These are helpful when organizing your source code,
especially if more than one person is creating the code. Please note
that this:

<! -- Comment Text Here --!>

is incorrect. The exclamation point only goes in the beginning. You
can stretch it out over as many lines as you need.

If you want to see what your webpage will look like without a certain
part of the code without actually removing a code, you can just place
a <!-- before it and an --> after it, then remove the comment markers
later if you want that code to be active again.

Okay now let's look at the next few lines:


<html> begins the HTML code. Notice that all of these words have
greater than/less than signs on either side of them. HTML works by
using something called "tags". A tag is the word in between the <>
signs. They are commands that tell the browser what to do. There are
many types of tags.

The tag <head> is used to include the title, stylesheet and sometimes
the HTML code that appears at the top of the page. A stylesheet, which
is what this:

<style type="text/css">

and everything that appears after it and before the closing </style>
tag is. It is called CSS, and is used to modify the text, images and
over all design of the page. You'll learn more about that in the CSS

As for this:

<title>Spundoogle - Spundoogle</title>

If you look up at the top of your browser, that is what appears in the
title bar. That's the bar above the menu:

File | Edit | View | Go | Bookmarks | Tools | Help

The title tags must be placed in between the <head> tags. If you are
creating your own page you can use <title>Your Title Here</title> to
set the title of your page.

After the title, stylesheet, and a few other things, eventually there
will be a closing </head> tag, and then a new tag:


The bulk of the code for the webpage goes in between body tags. You'll
notice that </body> doesn't appear until the end of the file, before
the </html>

In case you're wondering, case is not very important in HTML. It
doesn't matter whether you use <html> or <HTML> , but it's better to
keep your tag case consistent. If you use <HTML> don't close it with
</html> and never use something like <Body> or <Html>. It's all caps
or none. All lowercase is becoming the more common preference.

Now that we've learned about tags, let's see what we can do to create
our own HTML webpage. You don't need to be on the internet to create
or view your very own HTML page. All you need is a text editor like
NotePad and your web browser and you're set.

Open up a new file in notepad. You can do this by going to Start > Run
and typing in notepad then hitting enter. You now have a blank page.
Start it out like this:

<title>Your Title</title>
Hey look, it's some text!

Copy and paste that into the notepad window, then select File > Save As...

Where it says "Save As Type..." choose "All Files". This is important.
Now for the filename, type in "Mypage.html" then choose where you want
to save it. Your Desktop would be a good choice. Once you've saved the
file, don't close notepad. Leave it open, but minimize it and find the
HTML file on your desktop. It should have a blue explorer icon on it.
Double click it, and it will open with Internet Explorer. The page
will be mostly white, except for some text in the top left that says:

Hey look, it's some text!

Congratulations, you've created your first webpage. Close it and go
back to notepad, and change the text to something else. Then Ctrl+s to
save, and open it once again. The text in the browser window will
obviously change as well. As you can imagine, there are ways to change
the way this text looks. You can center it, make it bigger, change the
font, and change the color. We'll cover that in the next section.


In the second part of this HTML guide will tell you how to make a webpage. I will include a short source of an HTML page which you can edit and see how it looks.

Last time, we learned about the <!--comment-->, <html>, <head>, <title>, <style>, <body>, tags. Now I am going to go more in-depth into the whole art of webpage creating. Like I said before, you will not be needing to be on the internet or a host to do any of this. Just notepad and browser of your choice (preferably not the AOL browser). Remember, just save the file as "All Files" and name the page "mypage.html" and then save to your desktop. Click on it, it should open in your default browser as the page you just created in notepad. Then, just edit what you want in the notepad you have open (hopefully you didn't close it) and just save and refresh the page. If you do close it, just click on the "view" in your browser, and drag to "page source" it will open in notepad, just copy what you see and then open a new notepad page and paste it into there.

Ok got it? Good.

Normal page breaks (pressing enter or return) are not read in HTML. You must put a certain tag to do a page break. <br> can do this for you. So if you want a page break in something, just do this:


And this would be seperated. Without the page break and pressing enter it would look like this:


Since spaces ARE read in HTML, you do not need a tag to do these. Only line breaks are neccessary to have <br> tags.

Now you should know how to do a line break. Now we must move on...

Now it is time to learn how to add color to your website. The background color will first be taught.

<style> tags are used to show a style, they can tell your page what color the links should be, the color of the background, and much, much more. Here is an example:

<style type=text/css> A:visited { text-decoration: none; color: #0066FF; } A:hover { text-decoration: none; color: #FFFFF; } A:link { text-decoration: none; color: #F00000; } A:active { text-decoration: underline; color: #F00000; } </style>

This would make the visited links on a page the hexidecimal color of #0066FF (blue) if you want to know more hexicedimal colors, just check here they are excellent and should be bookmarked for anyone even slightly intrested in creating web pages.

Next, changing the background color from that bright white to a darker like black or green or anything you want. Say I wanted the background color as black, I would put this up:

<style type=text/css > BODY { background-color: #000000; } </style>

Since the hexadecimal color for black is #00000 this would change it to black. Virtually limitless colors are available as a background color. Even pictures can be put up, but we will get to that in the next section.

Centering can be done in many ways. Two popular ways to center many things is to do the following:

<div align=center> TYPE SOME TEXT HERE</div>
< center> TYPE SOME TEXT HERE</center>

I prefer the <div align> because it is easier to use for me and I am used to it. You can put the centering tags around as many lines as you want, so if I wanted to center say, this whole document I would just do it like this:

<div align=center> THE TEXT DOCUMENT WOULD BE HERE</div>

You can also put something to the left or to the right, they would be done the same way, just replace "center" with "left" or "right". This cannot be done like this though:

<left> TEXT HERE< /left>

You can only left or right something using:


Well, this section is over and with the knowledge you have gained here you should be able to understand the following script:

<div align=center>

That is the end of this text document, next document will be mainly over bolding, italicing, underlining, and changing font size and adding links and hyperlinks
HTML learning direct every one to internet in the last and also need for newbie. I suggest that newbie should use design tool along with learning process. They help you reduce the distance to success. I introduce you some typical tools as Microsoft FrontPage, Macromedia Dreamwear, Top Style Sheet Pro, Eclipse... Design mode in these tool (exclude Eclipse) help you understand HTML code speedly. Even if you already an professional web developer, those tools always are useful to you for saving time, that mean you saving money because "time is money", You have time to studying more important technologies.

About software charges, if you are a newbie, and want to learn , I think the author of those softwares will not complain you because you yourself are the marketing their products in the future, when wil be working for some company, your employer will pay tool 's charge for their workers.

Especially, Eclipse is an free - open source tool , very robust, and have many plug-in ( free too), not only for coding java but also for Coldfusion script, CSS, Php, ASP,.... It is the best choice for developer.

Good luck everybody!!!
Related topics
which freemail you are using?
Why use Gmail?
Hey everybody ;) HTML or Blog?
Create Web pages without knowing HTML.
Complete Tutorial LINKS for every language
HTML tables with irregular rows and/or columns
Give FRIH$ 5 and get 1 gmail invitation
HTML Tutorail made by me
HTML signatures!!!
how did you learn about html, php or other languages???
General .htaccess tutorial.
[Guide] HTML and CSS
The auldwyrm has arrived
HTML vs PHP pages?
Reply to topic    Frihost Forum Index -> Miscellaneous -> Tutorials

© 2005-2011 Frihost, forums powered by phpBB.