You can create a simple web page using 'Notepad', 'Wordpad' or any ASCII text editor. You don't need a fancy editor like 'Dreamweaver' to start with. Open 'Notepad' and type in or Copy & Paste:-
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Put your own text here between these paragraph tags</p>
</body>
</html>
An HTML web page is just a simple text file. They have what are called tags. These tags tell the browser what to do. In general, every opening tag should have a matching closing tag e.g. <p> </p>, but there are some exceptions. Notice that the closing tags have a forward slash added. This is how your browser knows the difference. The tags <html> and </html> denote it's a HyperText Markup Language web page, as there are other languages.
Inside the <html> tags are the <head> and <body> tags. You insert your program to be displayed between the <body> tags. Information put between the <head> tags is used by the browser in a different way (e.g. the <title> tags make your title display in the top bar of your browser.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My First Web Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Put your text here between the paragraph tags</p>
</body>
</html>
The 1st line is the document statement which tells the browser which version of HTML to use. There are different doc statements that you can use, but this one will do for now. If you don't use a doc statement, your page will still display but Internet Explorer will use what is called the old 'Quirks' mode. Putting anything before the doc statement such as a comment <!-- xxx --> will make I.E. use the Quirks mode.
The 5th line tells the browser which character set to use. This can be ignored to begin with but (as you advance) they will be needed. Html tags will work in UPPERCASE, but lowercase tags are now required due to the new XHTML standards set by the W3C (World Wide Web Consortium).
Making a simple text web page
To get you started, enter the following line of text between the <body> tags :-
<h1 style="color:red; font-family:cursive; text-align:center;">Your Page Title</h1>
<p style="color:navy;">A paragraph of text. Hello to all my friends!</p>
<!-- This is a comment and doesn't display -->
<p style="color:blue; font-size:11px;">Another paragraph of smaller text</p>
These are called in-line styles and replace the depreciated <font> tags. The font tags will still work, but you might as well learn the new styles as they can do so much more. (Styles are normal held in a separate style-sheet, but shown here for example) see Cascading Style Sheets
Now save the text as mypage.html
The filename extension .html informs the browser that it's an html file, then it knows to display the file as a web page (the extension .htm is also acceptable and probably more common now). At this stage, it is better to create a new folder called 'mywebsite' or something similar, and save your file inside that folder. Now, double-click on the file you've just saved and it should display in your browser as follows:-
Your Page Title
A paragraph of text. Hello to all my friends!
Another paragraph of smaller text
Font-family is the font type. If the font you use is not installed on your computer, the default font will be used. There are specific fonts and there are generic families. Some common fonts are Arial, Verdana, Courier, 'Times New Roman' & Impact (not all computers have the same fonts installed). A generic family is a group of similar fonts. There are 5 groups, named serif, sans-serif, monospace, cursive & fantasy. If you specify one of these, you are guaranteed to get a font of a similar style with any modern browser. Try them out.
There are 16 Colors which should work in all browsers as defined in HTML 4.
Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White & Yellow (to get any colour, you'll need to use RGB values (e.g. #CCCC99) but you should have enough to start with). If you want more, see Color Chart
You would not normally use an 'in-line style' for every tag, but use what it called a 'style sheet' in the finished page. Note: It is recommended that all attributes are enclosed in quotes for future compatibility.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My First Web Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {color:black; background:white; font-size:0.8em; font-family:arial, sans-serif;}
h1 {color:red; background:transparent; font-size:1.8em;}
h2 {color:navy; background:transparent; font-size:1.5em;}
h3 {color:maroon; background:transparent; font-size:1.2em;}
</style>
</head>
<body>
<p>Put your text here between the paragraph tags</p>
</body>
</html>
One question people ask is: "Why set the body style to black text and a white background?"
Because some surfers alter the default colors. If you have blue text and they've set the background to light blue, your text would be hard to read. If there is a default setting, people will alter it. You can guarantee it.
Some of the more common HTML tags
Normally a web page starts with a title or heading at the top of the page. This can be done using the heading <h1> tags. <h1> to <h6> (big to very small). Heading tags display in BOLD text as:-
<h1>The Page Title</h1>
The Page Title
Notice that it leaves a gap above and below it, to separate itself from the rest of any other text as does the <p> tag. If you insert the Paragraph <p> tags around a block of text, it will separate the block from any other text, as you would see in a newspaper column. I won't give an example here, just try it and see how it formats your text.
Some other tags are <b> for Bold text <i> for Italics text
There are also <strong> and <em> which display similar.
There is a reason for this, but I won't complicate matters just yet.
<b><i>A Bold Italic Underlined Example.</i></b>
A Bold Italic Underlined Paragraph Example
Notice how each opening tag matches each closing tag. (Note: the tag <u> underlined, has been depreciated in the latest HTML version, as underlined text is traditionally used for links and this could be confusing). It will still work, but it's not recommended.
Tags without any closing tag
Any tag that doesn't have a closing tag has to have an extra space + a forward slash added.
The Horizontal Rule tag <hr /> is normally used as a divider to separate sections of text, and doesn't have a closing tag. You can use <hr /> on it's own, or include a style.
<hr style="text-align:center; width:50%; height:5px; color:red;" />
The last command you will need is the Break <br /> tag. When included at the end of a sentence, it forces the text to start a new line.
You should now have enough information to create a simple text web page. There are many more commands but they are too numerous to be mentioned here. The next thing you need to do is obtain a site (most Internet Service Providers give you free webspace) then upload your web page to the server.
Inserting an image into a web page
It takes the form of img {source, width, height, border, alternative-text}
<img src="joe.gif" width="108" height="54" border="0" alt="Hello from Joe" />
There is no particular order that they need to go in, but the above format is the norm. The source is where you've stored the photo. If it's in another folder, you would use src="myfolder/myphoto.jpg"
The width and height can be omitted (if you don't know them) but it's better to include them, as when the web page loads, it will leave an image place holder and display the rest of the page allowing the surfer to read the text while the image loads. If you want to, you can enter a different width and height to distort the image giving it a weird effect.
The border (now depreciated in HTML 4.01) can be set to zero or set to a pixel thickness value. The alternative (text) is the message displayed when the cursor is hovered over the image. There are some more attributes like align="right" valign="middle" for positioning, but let's not get to complicated yet.
Uploading a web page to the server with Windows
Type ftp://Username:Password@Upload Address in the address bar of the My Computer window on the right. Some examples follow:-
If this doesn't work, type ftp://Upload Address in address bar and wait for Password box to display. If it doesn't, from the File drop down menu, select Login As, fill it details and click OK.
Wait a few minutes as you might not see anything straight away, and there's nothing to indicate what's happening. If successful, maybe an icon will appear on the screen, but it can just be empty.
Drag & Drop or Copy & Paste the file from My Documents into the other My Computer window. Do this with any pictures or files that go with your web page. If you want to update a page, you just overwrite it. To delete something, right click it and select 'Delete'.
The first page of a website should be called index.html. If you've never uploaded anything before, they may already be a page called index.html, sometimes index.htm and in very rare cases default.htm. This is a holding page for your site. You need to overwrite this as this will be the page browsers automatically go to. Reset your window to how they used to be, then test your site by typing the address into the your browsers address bar.
Though I don't use this method, it does work as I wrote these notes while actually doing it. Don't try this if you're not used to having two windows open and resizing them. A more realistic approach is to install a free "Open Source" FTP program like Filezilla. An open source program is written by a group of people for non-profit to benefit everyone.
Update Notes
The way websites used to be written is changing. You may have come across the <font> tag and many others. Certain tags including the <font> tag have now been depreciated, though they will still work for a very long time. It is now generally agreed that all page styling is done in an external style-sheet. If you're just starting to learn HTML, you might as well learn the new methods which will guarantee your site will be up to date!
