Mick's Dinky Di Ridgy Didge Web Site and HTML Guide?

HOME ~ RESOURCE KIT ~ WEBMASTER'S ZONE ~ JAVASCRIPT ~ DESIGN TIPS

Introduction to HTML

This tutorial is aimed to get anyone started on making simple web pages themselves as they read along. Some basic knowledge of files and computers is helpful but additional details are also provided where possible as hyperlinks to the appendix or as separate reference pages. Use the back button to return to the lessons. (Several links point to the same entry etc, so adding a return link might not always help).

After you are making your own pages you may find the Resource Kit more useful. Browse the examples and templates I've collected for ideas and quick starts for projects and designs. I recommend saving a basic page for starters, then others with common features like navigation bars.

As immediately below, there are plenty of in-text links to the appendix if you need to check out any words or refresh your knowledge.

There is one sensible way to learn HTML. Experiment. You cannot cause much damage to your hard drive making web pages.

TABLE OF CONTENTS

The Beginning

Option 1A

Get a basic page to start with. You will need a web browser. Netscape, Microsoft or others are fine. IE allows you to view the source in Notepad, great for step two, so I use it for that alone, and Netscape to check and compare the two later on.

The page should be like this one below. Click this link to open the page in your browser window. There are instructions for you to follow before returning back to this page.

You can also save the page in the appropriate manner by choosing to save the link as index.html in a suitable place. This is a useful way to download a page, although graphic content is normally missing

This page will have a code as seen below:

<HTML>

<HEAD>

<TITLE>First page</TITLE>

</HEAD>

Save this page as index.html from the file menu on your browser where you can find it again easily

Now you have a homepage to add to

Use the back button to return to the lessons, or use the link below

<A HREF="lesson1.htm">back to the lessons</A>

</CENTER>

<HR>

</BODY>

</HTML>

Different parts are colour coded for reference. You can read the description for these below.

This will mean more as you continue so do not be concerned if is seems confusing or full of jargon. Below is what should appear in the browser, minus the code.

Learn as you go and need to know and in a few minutes you will have a real page to view.

<HTML><HEAD> <BODY TEXT="000000"> ~

These tags indicate the type of ducument and are always required. The BODY section has specific properties also for text and page colours.

<CENTER> ~

This code is general HTML formatting type code to center contents, begin a new line and set the text to 5 times the base or default text.

Save this page ... ~

Black type is the text that will appear in the browser window.

Back to the lessons ~

Hyperlink text colour as appearing in a browser

~

Comments or remarks that are hidden from a browser. These are for people to see when editing code, and often have tips or other information

Option 1B

The other way to create a web page is to SELECT all the code above (between the lines, but not including them) and COPY [eg. EDIT MENU,…COPY].

Open Notepad, or a text editor and then PASTE the text.

Save this file as index.txt. This should be in plain text. Word Pad will prompt for options, so you would choose the text only option if using it or a similar word editor.

Finally, rename the file to index.html, so it will open in a browser. It may open as a text file in a browser but no code is likely to be registered, so the appearance will be dull. This is useful however for simple information or large text files that you want displayed but do not want to convert to HTML.

Another way to describe the HTML files are as text files with a little extra information that adds features to an essentially plain text file like any other. Images and other bits are not found within the HTML file itself. These are separate, but refered to as will be explained shortly. As such, HTML files are quite small in themselves. The pictures, sound or whatever else they also rely upon cause the delay one normally experiences with an elaborate and graphic rich web page or site.

VIEWING

Now you have your own copy of a *.htm file (index.html) you have a homepage, not yet connected to the web. First you will need to view it, if you didn't save it from a browser first, but cut and pasted it as in Option 1B.

Example 1

Save this page as index.html from the file menu on your browser where you can find it again easily
Now you have a homepage to add to
Use the back button to return to the lessons, or use the link below

back to the lessons

Above is what you should see in the browser. The HTML code is hidden in this case. Follow these directions if you have not yet saved this page for later use.

Tags

Back to the Index

Tags are the code that is generally known as HTML. Browsers read this differently from normal text because it is contained within the<> brackets. The first page begins with <HTML> and <HEAD> tags. These tell a browser this is a HTML file, and the HEAD indicates any colour schemes and <TITLE> of the page. Soon after comes the <BODY> tag that contains the page content. The final tags are a </BODY> and </HTML> tags. The slash is a closing sign, as most tags will have. Tags are opened then closed in this way.

A good example is to use a tag. After the tag the text is bold until at some point it is turned off. Including an tag italicises the text until it too is closed with an tag to resume a normal font again. Underlined text, using an tag, will operate in the same way. You will not see these tags in a real page, as they are intended for the browser only, and no spaces are lost because of their presence.

The above paragraph would then appear in a browser as:

A good example is to use a tag. After the tag the text is bold until at some point it is turned off. Including an tag italicises the text until it too is closed with an tag to resume a normal font again. Underlined text, using an tag, will operate in the same way. You will not see these tags in a real page, as they are intended for the browser only, and no spaces are lost because of their presence.

Some meaning was lost in the above paragraph without the tags, but the text has shown no evidence of hidden code taking up any additional room. At first, adding code to perfectly good text may seem odd, but with a little practice, nothing will really change to look at.

Nesting tags

Tags are intended to work together as mirrors or sandwiches. For the French, a tag is the ne pas, between which the action is negative as in Je n'aime pas l'ecole. The main point to remember is to keep your code neat and even, or it will get confusing and hard to edit later, or find typo or surplus tags accumulating.

Below is an example of nesting correctly.

….

<H2>This text will be underlined and in italic</H2>

some bold text

</CENTER>

The result should appear in a browser as:

This text will be underlined and in italic

some bold text

One simple way to define nesting, or avoid it, is to remember to end one tag before beginning another, or else maintain the order you open and close them if using more than one.

If you want more details about tags you can go to the tag reference page for an extended list of possible tags and their use.

Text

Back to the Index

Text comes in three main variations, normal, bold and italic. The previous example uses these three types text tags. There are other tags also, that are called context type tags, as they tend to relate to the text and meaning it has. EM is used for added emphasis. TT gives typewriter text. PRE formats the text as typed, all spaces and wrapping as written, and in a plain font as with the TT tags. Remember to close the tag when you want to return to the basic font again

More variations are found in the tag reference page

Alignment

Back to the Index

Text can be aligned to the LEFT, RIGHT or CENTER of a page.

If you want more details about alignment you can go to the alignment reference page for a listing of alignment attributes.

Colours

Back to the Index

Text may be defined if needed using a HEX code. You can refer to a colour code chart and copy the code you want corresponding to the chosen colour, or use a HTML editor to do this.

Backgrounds may also be set to any of the possible colours available in the HEX codes.

Font colour, link colour, visited link, over-link colour and background colour are typically specified in the BODY tag, but may be included later if needed. The main colour for text is easily set this way, while occasional variations are set then closed, which returns the colour to the previous font colour.

Check the Colour Code Reference page for examples to copy HEX values from and sample various colours in listed format and code for copying easily.

Headings

Back to the Index

There are six heading sizes, <H1>, <H2> … <H6>. These are used for large text and work best as headings where a paragraph break is normally used. A clear line above and below headings means they act as if a tag is also present. Headings are not useful within the flow of text because they cause such a large break in text and lines. Below is the series of headings, as they will appear (relative to each other).

Heading size 6

Heading size 5

IN ITALICS size 4

UNDERLINE size 3

ITALICS & UNDERLINE size 2

Plain Heading in size 1

Other text tags like for italic or for bold may also be included and nested appropriately. Font colour and style can also be changed if desired.

Hyperlinks

Back to the Index

This page has hyperlinks throughout it. Many simply lead to other parts of this page like the appendix, but others go to other pages, or other sites on the WWW. All hyperlinks have the format of:

go to <A HREF ="page1.htm"> page 1</A> here

or else have a similar file name described within the quotation marks.

The code for referencing a picture is the same one used to refer to another *.htm page, *.wav (sound) file etc.:

<A HREF="graphics/hline.gif"> horizontal line </A> to download

The portion visible in blue is the hyperlink, not active in this example, but in use would let one view or save the file hline.gif, located in a sub-directory named graphics. The user needs only to click on the link instead of knowing where the file is exactly and the precise name it has before considering getting access to it. Hyperlinks used as e-mail links are equally useful as the address is automatically included, and the link can appear in the actual e-mail form or an alias such as the real name of the person or group.

Graphics

Back to the Index

The main types of graphics used in web site design and HTML are *.jpg or jpeg images and *.gif or gif's as they are also known widely. These are both efficient ways to transfer images. *.gif images may also have other properties, animation or frames are one useful example. Several animation tools are available to create motion and effects with *.gif image files.

Tables

Back to the Index

Tables were originally a Netscape idea that is now standard within HTML 3.0 and above, meaning almost all browsers can now display tables. Tables are a good idea when lots of lists and complicated placement of items are involved, but they can then be difficult to use manually. Publisher and other programs create table based web pages. Disadvantages are that you cannot resize such pages easily and the layout is often more rigid and time consuming. Tables are best used when needed for designs standard HTML cannot manage. A three-column page of newsprint style text may be one good reason to use tables, remembering that text may flow in ways not originally intended.

3x3 table

xx	xx	xx
xx	xx	xx
xx	xx	xx

3x3 table

xx	xx	xx
xx	xx	xx
xx	xx	xx

5 by 5 table

abcdefg	abcdefg	abcdefg	abcdefg	abcdefg
abcdefg	abcdefg	abcdefg	abcdefg	abcdefg
abcdefg	abcdefg	abcdefg	abcdefg	abcdefg
abcdefg	abcdefg	abcdefg	abcdefg	abcdefg
abcdefg	abcdefg	abcdefg	abcdefg	abcdefg

More examples of tables are detailed on the table reference page

Forms

Back to the Index

Forms are used in javascript, for guest books and feedback, survey and purchase or registration forms. The are basic table-like boxes that look like normal text areas or entry fields found in other applications. Users may type direct into the form. This needs to be handles is some way, as a POST or GET query or some mathematical operation perhaps. CGI scripts often process forms and these reside on a server awaiting some input before logging a request, and writing data to a file. CGI are the ultimate tool for commerce and like tasks, but vary greatly, as servers allow different types o scripts and operations. Setting CGI scripts thus needs knowledge of the server and technical details unless such services are specifically provided or catered for with simple procedures.

Javascript

Back to the Index

The use of javascript is something that depends upon the purpose and effect required from a web page. Javascripts can contain errors when different browsers parse it, and several versions also exist. I confine my interests to browser or client side scripts that are quick and simple, keeping to reliable ones.

Lots of fancy effects can be produced with applets and complicated code, but most are generic and mildly different from the mass. Cool watery titles look ok, but animated gifs and other methods are more efficient and friendly to speed and browser types. Unless you need a certain feature badly I personally avoid javascript when another method works well.

Want more Javascript examples?

Design layout

Back to the Index

It is easy to get exited about colour and effect and overdo the whole thing. You may have a busy page, cluttered and full of detail, but hard to follow. For a site, navigation is the key for user friendly sites.

Meta tags

Back to the Index

These are not required for basic web pages, but do provide useful information to web servers and search engines to assist in locating a site. Key words can identify the site's content, and a title can be included that appears on the browser's title bar.

Each type of Meta tag has a different purpose. The TITLE and KEYWORD Meta tags are the main concerns for design as they identify the page with a title that search engines can read, and specify greater detail with carefully chosen words that relate to the site or likely words that might be used is locating such a site. A site about cars may want to put auto, automobile, motor and similar words in the KEYWORDS Meta tag to enable it to be found more easily and generally. Search engines use these tags differently, ignoring some parts. Multiple repeats of one word may register something, or be ignored completely in other cases.

Appendix

Back to the Index

Browser, Web browser are relatively simple programs that can display HTML files as web pages, allow navigation and management of Internet resources and communicate with other Internet users and interpret this information. Mosaic was one early version, alluding to the structuring of the displayed information. Browsers essentially render text, graphics and animations, sound and other media where suitable resources exist. Users then experience uncomplicated collections of media in one simple viewer, the browser. Browsers and HTML follow a general international standard, but competition and brand characteristics affect overall compatibility in certain areas. HTML 2.0, 3.0, 4.0 and 5.0 currently exist, generally backwardly compatible, but with later versions possessing greater quirks and unique properties than previously, Frames, tables and image handling are all quite standard since HTML 3.0 became common.

Download to transfer electronic signals (data) across the Internet, typically from a web site or server to a home computer by 'saving' a page, image or other file. Software is commonly downloaded direct from the distributor or agent, as is music and graphics.

Extension the suffix portion of a typical file name. Report.doc may be recognised as one produced by Microsoft Office Word. Notepad produces report.txt files when you save them.

FTP File Transfer Protocol. The typical protocol used to send files across the Internet, and also though of as the actual program that does this task. FTP tools are common and relatively similar, using well established means to operate.

*.gif Graphics Interchange Format. A reliable graphic file type for the web. Capable of multiple frames and animation properties, though in lower colour densities and detail than JPEG or bitmaps. Gif's are optimised for digital communication as with the Internet.

HTML Hyper-text Markup Language. Essentially based on a text file format, except certain characters and codes are used by a web browser to format a page or include other features such as hyperlinks.

Hyperlinks special areas of text (or images) that have hidden instructions concerning a URL or file name that allows a user to follow a link without knowing specific file names or locations being entered. A user may simply see the words GO BACK but clicking such a link may point to a place like www.yahoo.com. Hyperlinks are also obvious as they differ in colour if text (blue is the general default, mauve for a followed link), and will react when a mouse is placed over them by being underlined or changing colour. Graphics can act as hyperlinks, sometimes having a border visible.

ISP Internet Service Provider. Someone who generally gives the public a web connection. (AOL, Big Pond, Yahoo, Microsoft etc.)

*.jpg Joint Photographic Expert Group. A widely used file type used by various graphic-based applications.

META tags These are used by search engines to index and clasify web sites using automated search engines. Normally, search indices will use the first few lines of text from a document as a short description to display in a search result. If for some reason you want a different text, use the <META> element as follows: <META NAME="description" CONTENT="Your description here.">. The description cannot contain HTML markup, and should be less than 1024 characters in length. In the same way, you can add extra keywords: <META NAME="keywords" CONTENT="Keyword, keyword, keyword."> These keywords are used next to the ones found in your document. If you overuse a keyword (some engines use an upper limit of 7 occurrencies) the entire list will be ignored.

Notepad a basic text file editor that is common to Windows based systems. This is the default viewer of the source code in Internet Explorer, and serves as a handy and fast editor for general additions and corrections to a HTML page.

Tags these are particular code or instructions contained within < > symbols to distinguish it from plain text in a HTML. This code does not appear on the viewed page.

URL Universal Resource Locater. This is an address that most web servers and browsers understand and accept as standards for identifying a web site location.

Back to the Index

HOME ~ RESOURCE KIT ~ WEBMASTER'S ZONE ~ JAVASCRIPT ~ DESIGN TIPS

Mick Kenny ~

[email protected]

Hosted by www.Geocities.ws