An HTML document just consists of the text with tags that tell a browser how the text should appear on the screen, or to do specific things, like draw a horizontal line. To make a web page, all you need to do is write the words and then add tags to say how you want them to appear - just like writing a page in your word processor and then selecting which lines are headings, or which words appear in bold.
In fact, there are now programs that really do make writing web pages that simple, including add-ons for Microsoft Word and Front Page. These are known as WYSIWYG editors (what you see is what you get). So why spend three months learning how it works? There are a couple of reasons. First, ‘what you see’ is often ‘what YOU get’ but very rarely what anyone browsing your site will get! Because people use different browsers, different screen resolutions etc etc the code produced by these programs can look great on your browser but a total mess on someone else’s, and second, you'll be able to write much better web pages if you understand what's really happening.
Producing a web site requires no special software what so ever; all you need is a text editor. This can be as simple as Notepad. The software we will be using is call EditPlus. This is a shareware program which means that after using it for the first time you must register and pay for it after thirty days.
Click Here download a copy of EditPlus from the Trade Union Studies web site. EditPlus is what is known as a ‘tag editor’. This means that as your code develops you see it in HTML language, not as it will appear on the finished web site. The difference between this and a program like Notepad is that EditPlus helps you build the tags you need without having to remember every one. It also automatically colours various parts of the code making it easy to spot mistakes.
Looking at the source code for a big web page it can look very daunting indeed but it is not that complex when it is broken down – trust me!!!
The best way to explain it is to have a go, so let’s do just that.
Save the page to your disk named task1.htm. View the page using a browser Enhance the text on your web page by using bold type and italics and spacing the paragraphs.
First of all you will need to get yourself a copy of EditPlus. Go to the Trade Union Studies web site and click on Computers Year Two. Next select the resource page. Click on the Download Software Free button and select EditPlus. Save this file onto a floppy disk.
When you start EditPlus a warning panel appears showing how long you have left before your trial period ends. Click on I Accept. Next select File + New + Normal Text (selecting HTML page starts are file with some tags in that are not necessary and others that we will cover later) and you can begin to type your document just as you would in a word processing package, with the difference that you need to press return when you get to the end of a line to avoid the text scrolling off the edge of the window. This is not necessary to make the web page work but makes it much easier to see what is going on.
Also, you need to tell the browser that the file you are asking it to read is a web page, you do this by putting the <html> tag at the very top of your document. Type your document as shown below and remember to finish off by closing the HTML tag with the code </html>.
Your code should look something like this.
You can now save your file to disk. Web pages such as this have the extension .htm or .html – also, as web servers use a case sensitive operating system called UNIX it is important to be consistent with you use of capitals or your pages will not link together as you wish. The best thing to do is to adopt a convention and then stick to it rigidly. For the duration of this course we will use lower case letters only and use the .htm extension. Do not uses spaces in a web page file name as many systems do not recognise them as a valid character. Save this document as task1.htm
Notice that the html tags in the code turn blue and a new tool bar appears - this is because EditPlus now know it is dealing with an HTML document and can identify the tags. It is now time for the moment of truth – browsing your first web page!
Click on the View in Browser button as shown above.
Not quite what you were expecting? I guess not. All of the text has formed into one big paragraph. This is because of the way the browser interprets the text in the web page. If it sees more than one space, or a new line, it simply assumes that what you wanted was a single space. If we want to leave lines we need to add tads to tell the browser what to do. There are two options:-
Unlike all other tags <br> and <p> do not need to be paired with a closing tag (</br> & </p>)
To go back to your code click on the Edit Source button - this has taken the place of the View in Browser button that you used earlier. Add <br> and <p> tags.
Your code should now look something like this:-
Notice the <p> tags, as a result you page should look like this when you change back to the browser view:-
Next you can try adding bold type, italics and underlining. This is the first time that we can use EditPlus to help us generate tags. Notice the familiar B, U and I buttons. Generally underlined text on a web page denotes a link so avoid using it for effect as you would in a word document. If we wanted to make text bold type in Word, we would simply highlight the text and click the B icon. The selected text would change into bold type.
Try selecting some text and clicking click the B icon. Instead of making the text bold, EditPlus adds the tags <b> and </b> around the text. Italics work in exactly the same way. Try adding some of these tags to your page and look at the changes in the browser view. If you wish to apply more than one effect just nest the tags together, so...
<b><i> ..... </i></b> would make the text between the tags bold and italic etc