HTML For Beginners

Available on the Web at. http://www.saskmactraining.biz/handouts/sess5/beghtml.html

HTML is a text oriented, tag-based language, meaning that it consists of plain text,(ie, everyday abc's and 123s)  surrounded by special labels that  define what the properties of that text should be.  The web browser interprets those tags, and displays

The 8 Tags You Need to know

This is ALL the HTML you need to know to build very basic web pages.  There's lots of other HTML tags you COULD learn, or that are strongly suggested, but to just wrap off a couple of quick web pages, this is all you need to know.

 

<html> </html>  - Indicates the beginning/end of an HTML document

<body> </body> - Indicates the beginning/end of the body of the HTML document

<img src ="filename.jpg"> - Place the image named filename.jpg at this spot

<br> - Break a line of text

<p> - Create a new paragraph

<a href = ³filename.html">Click Here</a> - insert a text link called Click Here here

Creating HTML files

Sure, you can create HTML files with really snazzy web-page editors that let you do thousands of cool things.  But you donıt NEED to.  Because HTML is a text-oriented, tag-based language, you can create web pages with something as simple as TextEdit,  the text-file creator included with every Mac.  It does also help to have a web browser to preview your files with, but you can create very basic pages just using TextEdit.

 

Let's make a web page now, and preview it with Safari.  Start TextEdit, and type in the Example page listed below on the left.

 

Example Page                                     


Saving HTML Files

In order for a web browser to recognize any text file as an HTML file, the file name must end with either html (Macs, Unix) or .htm (PCs).  You should adhere to the following rules when naming your web pages:  Lower Case letters only, no spaces in the file name, and try to keep the names short yet intelligible.  Save the example file you just finished typing.  Call it test.html, and save it on the Desktop of your computer (click the Desktop button in the Save dialogue box).

 

Previewing with Safari


You can view the page you just typed by starting your Safari, going to the file menu and choosing Open -> File.   Locate your test.html page on the desktop of the computer, and click Open.  This will display your page in the Safari window.

 


NOTE:  If you make any changes to your test.html file in TextEdit, you will need to save the file again, then push the Reload button in Safari before the changes will appear in the Safari window.

Inserting Images

The first question people ask about web pages is ³how do you put funky pictures in them?".  Well, first of all, you have to find some pictures that you want to put into your web page.  There are many different sources available for pictures.  You can scan them, you can take them with digital cameras, you can find them on the Web.  There are, however, some requirements for any picture you might want to use on the Web.  First, it must be either a JPG file or a GIF file.  Both of these are very common file formats that most graphics programs these days can work with.  Second, they must be of a reasonable enough size to load into your web browser fairly quickly.  Any picture you generally find out on the Web SHOULD already adhere to this rule; pictures that are taken with digital cameras or scanned with a scanner do not always adhere to this rule.

Taking Pictures from the Web

When you are in Safari, find a picture you like, then click over top of it with your mouse, holding the Control key down.  A menu will appear.  Choose Save This Image, then, in the Save dialogue that appears, navigate to where your web page is, and click Save.  Take careful note of what the name of the file is, as this is very important to the next step.

 

Inserting the Picture into the Web Page


Insert the HTML tag <img src = ³[the filename.jpg]"> into the text of your web page.  Save the file.   When you view it with your browser, the sample page on the left becomes

Linking Pages Together

Ok, here is the really powerful stuff.  First, let's hide Safari, so we have a bit of room to work.  Then go into TextEdit, and make another new document (File, New).  Leave your current test.html file open, and move the new document around until you can see both the documents.  Now let's cheat a little to save time.  Instead of retyping all those HTML tags that you put in test.html, simply highlight all the text in test.html, choose edit->copy, then move to the new document and choose edit->paste.  This should make an exact copy of what you have in test.html.  Now, change some of the stuff between the <body> and the </body> tags.  Once you have made those changes, save the new file.  Call it page2.html, and save it on the desktop of your computer.

            Now, go back into your test.html document, and add a <br> after the line ³I am Fine".  After the <br>, type the following:

 

<a href = "page2.html">Click Here to Go to Page 2</a>

 

This tag will create a clickable text hyperlink on your first page.  Please note that in order for your link to the file "page2.html" to work, the second page MUST be in the same directory as the first page.  To link to a page inside another directory (folder) you would need to specify the path to that file.  For example, if you had a folder on your desktop called "webfiles" and "page2.html" was inside of it, you would need to make the tag as follows:

<a href = "webfiles/page2.html">Click Here</a>

To go to a website on another server, your link would be as follows:

<a href = "http://duke.usask.ca/~brownt">Go To Tyson's Website</a>


 


Where to go From Here?

So, there.  That's about it for making simple web pages.  All it takes is practice.  And a good reference. Oh, ya, and a good way to see how other people have built their pages!  If you find a page that you like, you can choose View ->Page Source from the View menu, and it will display the HTML code for that page (which you can copy and paste into your own pages, even if that MIGHT be breaking copyright.).

Why Learn HTML This Way?

Most people ask me how come they have to learn this icky code stuff when they can just use one of the thousands of web page editors out there, and then they never have to touch the code.  That would be all well and good, I say, if you could be sure that every web-page editor was doing the best possible job and would produce the best HTML code for you.  Unfortunately, such is not the case, and I can guarantee you that you will at some point need to take a page made with an editor and view the raw code in it in order to fix up some screw-up the editor has made.  In this case, it really is good to have some basic understanding of how HTML works.

Some HTML And Design References

 

Computing Services - Computer Aided Instruction (CAI)

http://www.usask.ca/dcs/courses/cai/index.html

Using HTML for Instructional Design and Development

http://hscl.usask.ca/webpages/weblearning/

Index Dot HTML: THE Advanced HTML Reference

http://www.usask.ca/mirrors/indexdot/html/

Visual Design for Instructional Multimedia

http://www.extension.usask.ca/vdim/