HTML Help - How to make a WebPage

[home]

HTML Help - How to make a webpage...

[Very Basics] [<tags>] [Fonts] [Color Chart] [Tips]
[Free Webhosts] [Affordable Webhosts] [FTP]
[Icons & Animated Gifs] [Free Counters & Trackers]
[Affordable Domain Registration] [Advanced HTML Help]
[Books on HTML] [HTML Editors] [ Search Engine ]

HTML Basics using Notepad - (Very Basics)

If you have never made an HTML document (web page) before, this is the place to start. Many people have a difficult time just trying to get basic help with making simple web pages. I was one of them. I hope this page saves you time and headaches.

1) Open Notepad (Notepad.exe) , In windows usually it can be found by clicking on Start_Programs_Accessories_Notepad. You can use other text editors such as Wordpad, Microsoft Word,etc.

Below is the simplest web page being written in notepad I can think of (But with the MUST essential <tags>) :

If you 2) type the same as above in notepad as I did above, then 3) save the file as filename.htm or .html you will be able to view the results (by 4) opening the file

from the directory that you saved the filename.htm page to) that should look like:

Either open the file through Windows Explorer and doubleclick on the filename in the directory where it is stored or open your web browser (example internet explorer) - File_Open, click on the [Browse] button, open the browser to the directory and file you saved the textfile.htm in/as.

You see, all web pages have "tags", <tags> , tags that begin the page with <html> and end with the closing html tag: </html>

Below the <html> tag,
<head>
<title>
Enter Text to appear on webpage Titlebar
</title>
</head>

The <title> (title open) and </title> (title close) tags go in between <head> and </head> open and closing tags, the Text appearing on the Webpage (HTML document)

Below the </head> tag place the <body> tag, all that appears on the webpage itself will appear between <body> and </body> , then close with the </html> tag. Just as it appears in the first pic above of the notepad file.

Okay, now that you know the basic structure of creating a webpage, you may want to learn some of the other essential basic tags:

Note: when adding additional tags or updating what you are putting on the page, do not forget to occassionally save the text file, then Refresh your browser (Alt+V+R in i.e.) so you can see your changes.

Basic Tags:

  - Break tag - Acts as an Enter or Return key. (Just hitting the enter key when writing an html document will not return the text to the next line.)

Bold Text
bold text

Underlined Text
underlined text

Italicized Text
italicized text

Font Tags: (any time a  tag is used it must be closed with a  tag

this is the fixedsys font

qis is qe simbwl font

Red text using font color="red"

Yellow text using font color="yellow"

You can also use hexidecimal numbers & letters that represent colors for font, background and link colors:

text using font color="CCCC99"

For more colors, see the color chart

<hr> = Horizontal Rule

Add a Hyperlink:
<a href="URL(webAddress)">click here (to go to tags)</a>

Examples:
<a href="index.html">Index.html</a>

<a href="http://www.htmlgoodies.com">htmlgoodies.com</a>

Add a picture:
Note: - Filenames as to response by HTML code may be CaSe SeNsiTivE (So if MaKe SurE to uSe CaPs in HTmL coDeS where they are used in the filename and Extension(.jpg, .GIF, .BmP)

Putting the .jpg or image file in the same directory where your html (webpage) document is stored:

<img src="angel_kitten_cat.jpg"> =

(img src = image source)

You can create a subdirectory in windows explorer (file manager, etc.) to store separately your images and call them up through html code from the subdir (subdirectory). Below is an example where the image is stored in a subdirectory called "img".

<img src="img/angel3.jpg"> =

How to resize and make text on right of picture

1) html code below #18
2- ALIGN="left" in code moves text right of pic
3- as you can see in the code below..
4- ..I set the height and width of picture
5- if you view source you will see how such
6- appears in the editor (notepad;wordpad;etc)
7- in below's code you can change the 300
8- or 200 to other pixel # height or width
9- Alot of HTML code is CaSe sEnSiTiVe
10- so being precise in placing quotation marks
11- " or <angle brackets> closing 
12- bold etc. are important otherwise it can
13- cause problems, know how you are coding
14- and do it right. :)
15
16
17
18> <img src="directory/subdir/filename.jpg" height=300 width=200 ALIGN="left">

Free Online HTML help:
www.htmlgoodies.com

< & >