Some pages stand alone
Some Programmers are very clever, and set out their site in Frames, which makes it hard for us to Bookmark or to save their site to our computers. Others have mastered CSS (Cascading Style Sheets) and their pages lose their distinctive 'look' when we grab them and open them later.
When you are lucky, you will find a kindly soul whose page is easy to understand. Say a special prayer for that dear person.
Learning to write HTML.
When I started in 1998, I had a lot of companions, and the teaching pages were easy to find. These are still available, just do not feel 'left behind' when you discover the page is the same one I studied.
Geocities has free web sites - just be careful and do not get talked into anything.
Joe Burns is handy, after you learn the basics from Joe Barta.
Three parts - twice
The HTML Code for the Web Page has three parts,
the Head, which comes first, and contains material about the document,
the Body, which contains the material that shows on the screen,
and the End, which closes the page.
On this page you can see that the Body is also divided into three parts,
the top of the page,
page contents
and the closing reminders.
The page got too long, so I have added some Javascript and an up-arrow. This is to help you return to the Page Index.The code is just before the end tag </BODY>.
I like to use upper case for tag names.
You may notice that some source code has a first line like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
This is for Search Engines, telling which version of HTML is used, and the language (EN = English) involved.
<HTML> begins the page - </HTML> is the last item.
<HEAD> begins the page Header - closed by </HEAD>
<BODY> contains the code which becomes visible on your page, and is closed by </BODY>
Thus we use the sequence
<HTML><HEAD> items </HEAD><BODY> items </BODY></HTML>
The Header
<HEAD>
<TITLE>Name of this page using up to 70 characters</TITLE>
I like to put it first. What you put in this tag will appear in the title bar at the top of every browser being used to view your site. I have also found life is simplified if each page in the set begins with a different first digit or letter. ('4bones' instead of 'Page 4 Bones'). When a lot of pages are open, the titles get fewer letters in the tabs at the bottom of the screen.
If you want to dig into reference material,
use Google to find notes on Meta Tags,
Netmechanic on Titles up to 70 characters, and
http://webreference.com/html/tutorial29/ on Headers, are good sources of help.
The HTML 4.0 standards say that only certain tags should be placed inside the HEAD section. They are BASE, ISINDEX, LINK, META, SCRIPT, STYLE and TITLE.
<META NAME="Author" CONTENT="Elizabeth Janson">
Do not be shy, you wrote it, you claim copyright.
Acknowledge your sources - to fail to do so is bad manners, and the original author may be upset.
O.K. that is a rule, but authors should help us obey it by providing their identification on every page (they do not know what item I will regard as 'pure gold').
<META NAME="description" CONTENT="How to write Web Pages">
Search Engines like Yahoo print your Title, followed by your description.
You can expect up to 200 symbols to be used (my sample uses 22).
<META NAME="keywords" CONTENT="writing, web page, support">
The Search Engine will index your page using each keyword you supply. The allowance is up to 1000 symbols counting spaces. One bad thing is repeating your keywords in the list, though using alternatives is good.
For the best results with the search engines, use the key phrases in your Title, META Description, META Keywords, and Body text. Put the key phrase in header tags like <H1>Writing Web Pages</H1>.
<SCRIPT Language="JavaScript"> some code ending with </SCRIPT>
This page has two Javascripts, the first breaks out of someone else's frame, and the second stops error messages on your screen. Other popular Javascripts provide time and date messages.
<STYLE TYPE="text/css"> and is closed by </STYLE>
Style refers to changes of colours and text and is called CSS, or Cascading Style Sheets.
I am new to this refinement, and read that the CSS code is inside the tag it applies to, or in each Header, or in a file called by each page.
<LINK rel="stylesheet" href="style1.css"> is an example, where the Style Sheet information has been saved in a file called 'style.css' which is called by the Browser as it loads the parent document.
Of course I will have to rewrite my whole site, if I wish to change to CSS technology. That may be a good thing, you say! Six months later, and I have produced a CSS primer for myself, you can find it at geocities.com/elizatk/css.html
Other entries may include
<META NAME="distribution" CONTENT="global">
<META NAME="resource-type" CONTENT="document">
<META NAME="language" CONTENT="en">
<META NAME="Generator" CONTENT="NoteTab Pro">
End this section of your code with </HEAD>
The Bones of your BODY
Each page in this series has the same top and bottom, and the same central structure. I want you to know you are still 'with me' when you return from looking at one of my reference URLs.
Colour Schemes
Remember on Page 2, I gave some references for colour schemes, my Colour page to help select colour schemes, using the 140 named colours, and the 216 Browser safe colours known by their Hex codes. Now I have found a web site identifying 4096 colours.
The <BODY> tag.
The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...
Text is black
Links are blue
Active link is red
Visited link is purple |
This is written as
<BODY BGCOLOR=white TEXT=black LINK=blue ALINK=red VLINK=purple>
You can change these if you need to (notice I said need to).
The whole world has got used to links being blue and underlined. Why confuse us?
The Browser loads your pages in sections. When you use TABLES, the whole table is loaded before it is opened on your screen. For this reason, short tables appear faster than long ones. Time your site, to see how long it takes to be completed. Look for the hold-ups, like large photographs, and try to give your visitor something to read, so the wait is not tedious.
Trouble shooting
Our site can be 'captured' by another site which refers to it, and loads it in their frame. Some browsers throw up errors to disappoint a viewer, and email addresses can be stolen. Each of these issues is handled by a short program in Javascript.
1. Avoid being captured. You do not want your page to open inside another person's site.
<BASE TARGET="_top">
<SCRIPT Language="JavaScript">
<!-- hide script from non compliant broswers
if (top.frames.length!=0)
top.location=self.document.location;
// unhide -->
</SCRIPT>
2. Avoid unexpected error messages
<script language="JavaScript">
<!--
/*JavaScript error stopper-
By Website Abstraction (www.wsabstract.com)
*/
function stoperror(){
return true
}
window.onerror=stoperror
-->
</script>
3. Email addresses are reputed to be valuable - bad people harvest them from your site, and sell them!! They apparently use a computer program (web spider) that scans the source code looking for the pattern '[email protected]'
You will see that my Email address is not in my souce code. Instead I have
<script language=javascript>
<!--
var linktext = "Webmaster Elizabeth";
var email1 = "elizajan";
var email2 = "yahoo";
var email3 = ".com";
document.write("<a href=" + "mail" + "to:" + email1 + "@" + email2 + email3 + ">" +
linktext + "</a>")
//-->
</script>
You can see that in my source code for this paragraph, < is used to stop the computer acting on my use of '<'.
k. i. s. s.
I try to keep it simple!
|