Jedi Order Symbol Jedi Knowledge Base - 160111

HTML Help - How to make an HTML document or 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 hope this page saves you time and headaches.

1) Open Notepad (Notepad.exe) for windows or any text editor such as gedit or leafpad for linux.

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,
Enter Text to appear on webpage Titlebar

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: - like Return key, or when you hit Enter key in tex to take you to the next line.
<br> - 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
<b>bold text</b>

Underlined Text
<u>underlined text</u>

Italicized Text
<i>italicized text</i>

Font Tags: (any time a <font> tag is used it must be closed with a </font> tag

Font Face: - type of font (typeface) to be used
<font face="fixedsys">this is the fixedsys font</font>

<font face="symbol">qis is qe simbwl font</font>

Font Color:
<font color="red">Red text using font color="red"</font>

<font color="yellow">Yellow text using font color="yellow"</font>

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

<font color="CCCC99">text using font color="CCCC99"</font>

For more colors, see: color chart

Horizontal Rule
<hr> = Horizontal Rule (like the line below this text)

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

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

<a href="C:\personal-directory\subdirectory\Subject.htm">Subject Name</a>

<a href=""></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 </b>
12- bold etc. are important otherwise it can
13- cause problems, know how you are coding
14- and do it right. :)

18>  <img src="directory/subdir/filename.jpg" height=300 width=200 ALIGN="LEFT">

Free Online HTML help:

< & >