OS/2 eZine

16 September 2000
 
Simon Gronlund is earning his Master of Science in Computer Science at the Royal Institute of Technology, Sweden, as an adult student. He also teaches Java and computer-related courses on a senior high school level. When he isn't tampering with his Warp 4 PC, he spends his spare time with his two boys and his wife.
If you have a comment about the content of this article, please feel free to vent in the OS/2 eZine discussion forums
Previous Article
Home
 Next Article

 
 

Hands on your home page -- I

Nowadays it looks like everyone has his or her own home page, do you have one? I do, since a few years back I more or less had to get myself such a page. And many more have had to, wished to try it out, liked to, or even loved to get a home page. The reasons differ but they have got one, or more probably a few pages. The questions arise: Do you need a home page? Is it hard to get one? How to do it?

This rather short "hands on" will guide you into how to make yourself a most rudimentary home page, completely without those bells and whistles you may see around the web. Let's face it, you always have to start somewhere. A future article will give you a few hints on how to put graphics to your pages. And the last article will show you how to do some styling, some simple but still working formatting of your pages.

But first a most elementary history review. Only ten years back the acronym HTML did not exist! Can you believe that? The Internet was borned--or at least the conception took place--in 1969, but was then called Arpanet. Due to confusion of computer tongues another acronym was created fourteen years later, when TCP/IP (Transmission Control Protocol/Internet Protocol) surfaced in 1983.

With TCP/IP computer networking really began to evolve and was heavily used by universities and computer freaks. Still it wasn't a charm to get to these documents or files. Then, in 1992, Tim Berners-Lee, those days working at CERN, Geneva, Switzerland, found a way to organize the network, the Internet. In fact his outlines was the sketch of the Web as we know it today. With hyper text you should be able to navigate directly to another place on the Internet were another document or file was placed. Behind these hyper texts, as the marked words were called, a link to the file were hidden. You know how it works, as you read this.
 

Hyper Text Mark-up Language

The tool to set these links, to format the text, to make it possible to add a few pictures and so forth, is the Hyper Text Mark-up Language (HTML). At this point we shall remember that HTML was mainly thought for pages of text, as the scientists still produce essays and theses. That the web should evolve into today's sites competing in fripperies was not close to anyone's mind at the time being, and hence HTML is, and shall remain, a bit sparse. On the contrary it is not hard to learn, and we will see why.

Further, never forget that HTML is your way to tell a browser how you liked the (text) page to be viewed, but the browser is its own judge to decide how it will render the page on screen. Factors like screen resolution, browser's window width and height, which browser brand and so forth will influence the result heavily. Hence, what looks nice when you look at it in your browser, may not look that good, maybe awful or maybe not visible at all, in another browser. As you may have noticed a few OS/2 e-Zine! Java columns back, some of the code lines too long caused the text to flow outside the browser window. Though you could scroll horizontally to read them, how fun that was, it caused the pages to be non-printable from a normal browser. The error was of course on my side, I had not double checked that the text was visible on a 640 x 480 screen resolution. I beg your pardon.

That is also the reason why so many pages around, in spite of being done by so called professionals, do not work, they are made once on a most modern machine but not tested with the more commonly used older screens or older software. Most web-page-making tools make a lot of twist and tweaking with the resulting HTML code, that also causes a lot of head ache for the normal web surfer. Hence we will learn how to make the web page from scratch, then it will be much more easy to do that last hands-on that every real professional always do with the result from their beloved page maker software.

The first step

Every web page is a document and we would like to tell the browser what kind of document it is. Hence we start with a most simple line: <HTML> and since most tags have to have a counterpart telling the browser were the block will stop. Consider <HTML> an opening block tag, so a closing block tag has to come and it looks like </HTML> and is found at the bottom of the page. Thus, most opening tags are closed later on!

<HTML>

<HEAD>
<TITLE>
  My first web page
</TITLE>
</HEAD>

<BODY>

</BODY>

</HTML>

Within the document a header is placed, where you can put stuff like the title, that is shown at the browser's title bar. Save this beginning under the file name index.html and you may view it for yourself using your own browser. The starting page is best named index.html since every web server look for that file if no file is specified by a visitor. If no default file is found the server will return a list, or an index, of the directory specified, something you perhaps do not like. Sub pages may be called with any name, but avoid white spaces or non-standard ASCII characters, since you will never know how different ISP's servers will treat such characters. On the other hand, upper or lower case is treated as different characters and may be used to differentiate between files.

HEX to ten base
HEX
 		ten
 		HEX
 		ten
01
 		0 + 1 = 1
 		 
 		2F
 		32 + 15 = 47
09
 		0 + 9 = 9
 		 
 		30
 		48 + 0 = 48
(3 * 16 = 48)
0A
 		0 + 10 = 10
 		 
 		99
 		144 + 9 = 153
(9 * 16 = 144)
0F
 		0 + 15 = 15
 		 
 		9A
 		144 + 10 = 154
10
 		16 + 0 = 16
 		 
 		9F
 		144 + 15 = 159
11
 		16 + 1 = 17
 		 
 		A0
 		160 + 0 = 160
(10 * 16 = 160)
19
 		16 + 9 = 25
 		 
 		AF
 		160 + 15 = 175
1A
 		16 + 10 = 26
 		 
 		B0
 		176 + 0 = 176
(11 * 16 = 176)
1F
 		16 + 15 = 31
 		 
 		EF
 		224 + 15 = 239
(14 * 16 = 224)
20
 		32 + 0 = 32
(2 * 16 = 32)
 		 
 		F0
 		240 + 0 = 240
(15 * 16 = 240)
21
 		32 + 1 = 33
 		 
 		FF
 		240 + 15 = 255
With the BODY block we in fact have a complete document skeleton, but of course not much will be read by a surfer passing by. We are to add text later on. The BODY tag can be extended with the background color, or a background image. This page you are reading right now has a BODY tag that look like

<BODY BGCOLOR="#FFFFFF">
The value used is the RGB system translated to HEX. Recall that RGB uses values in the range 0 - 255 for R, G and B respectively, that sums up to 16,581,375 color shades. The HEX system uses values in the range 0 - 15 each byte, 0 (zero) to 9 are read normally, but 10 is transposed to A, 11 to B, ..., 15 to F. Thus 0F is read 0 + 15 = 15, but 10 is read 16 + 0 = 16. The second byte from the right in a HEX value is worth a 16 of our ten based system.

The table to your right shows a few HEX values and how the ten based equivalent is computed. Anyway, HEX value FFFFFF is white, but 000000 is black, 999999 is gray, but FF0000 is red. Any value between 00 and FF is accepted, so try them out. Quite a few hand held calculators compute these values like a breeze, or compute them by hand.

<BODY BACKGROUND="bg.gif">
If you would like a background image this is the tag. Images can be any GIF or JPEG (JPG) file you like. If they do not fill the entire browser they are tiled both side by side and row by row. Hence most backgrounds are made rather small (to reduce the file size and download time) and made to make a nice pattern tiled. Or they are made a veeeery wide image but not that high, 1500 x 3 is not uncommon and will fit most screen resolutions. Still file size is small.

Background color or images may look nice to you, but be aware that the page will remain readable to any user. Some colors or backgrounds do not make the text easier to read, other will not be rendered that nice on some browsers, especially if they are older or do not support some of your tags, as (IBM) Web Explorer do not. Or Lynx <grin>.

Second step

Up to now we have not added any text to the page. HTML was created to before anything handle text, paragraphs and headlines, only interspersed with images, tables and stuff, to add a zest to the page or support an idea or a result. Many web page making software today tries hard to make an exact copy of what you see in a word processor layout, but remember that one of the most important laws is that the browsers are to judge how the page is to be rendered. HTML texts are then to be treated on a paragraph centric basis, not a word by word or line by line approach. Grab the side of this window with your mouse and resize it, you see how the text reflows but the paragraphs are still intact. That is not the case with many web pages out there on the 'Net, they do not use the most basic HTML tags you will use.

...

<BODY>
Welcome!
<P>
My name is Simon and I am writing a short hands on home
pages. I am trying to illustrate how paragraphs are
built by using the <P> tag, as in Paragraph. If I on
the other hand use the other end-of-line tag, the <BR>,
as in BReak-line, there will be no empty line
between the paragraphs.<BR>
The next paragraphs continues directly, but in fact on
a new line.
<P>
Of course you will see it better if you type it into
your index.html file and view it in a browser.
</BODY>

</HTML>

Text is typed as any text is typed, no difference to it. There are only two tags to use, Paragraph, that gives you an empty line between the paragraphs, and BReak-line that only starts the text at new line but no line in between. Both P and BR can be stuffed with extra tags to extend the functionality. One example is shown below, ALIGN=RIGHT is added to the P tag, and the following text is right aligned. LEFT (which is default), CENTER, RIGHT and JUSTIFY (that is not always supported by the browser), are qualified extensions to ALIGN. (To BR you can add CLEAR=ALL, that is mainly used in conjunction with tables and images and will not be discussed this time.)

Paragraph centric has the side effect that any new lines or excessive white spaces you type are ignored, the browser only looks for one blank at a time, and do nothing about new lines or new paragraphs until a P or BR is found, except for headers, rulers etc., that will come. If you have to insert extra white spaces you must use the special character &nbsp; that is No Break SPace. In fact the white space is both always rendered by the browser and it will be considered part of the word, hence the line will not be broken at that place, so it is wisely used to numbers together with quantifiers, e.g. 1024&nbsp;bytes, where it will be rendered as a white space and the number will always stick to the quantifier.

Another feature that can be used is to separate text blocks with horizontal rulers. Simply use the HR tag. A ruler can be extended to be ALIGNed LEFT, CENTER or RIGHT, but that is only useful if you set the ruler's SIZE to some value less than the browser width. The best way to accomplish that is to use the percent value, e.g. SIZE="50%" (note the quotes), as an opposite to SIZE="1,500" that is 1,500 pixels whether the user own such a wide screen or not. Best is to leave the value to the browser to compute.

From time to time you will quote someone, or indent the text anyway, and then you use the BLOCKQUOTE tag. Quotations are both left and right indented, as this text block is. And it is possible to put blocks within other blocks, if there is a need for that, as seen below.

The best way to use headers is to use the Header tag that is available in sizes from 1 to 7, e.g. H3, and 1 is the biggest down to the close to invisible 7 that is smallest and not always supported by the browser that realizes that "this will be to small, I'll make it bigger". Many page maker software put extra tags to headers but the basic headers are useful as is.
...

<BODY>
<H2>Welcome!</H2>
My name is Simon and I am writing a <STRONG>short
hands</STRONG> on home pages. I am trying to illustrate
how paragraphs are built by using the <P> tag, as in
Paragraph. If I on the other hand use the other
end-of-line tag, the <BR>, as in BReak-line, there
will be no empty line between the paragraphs.<BR>
The next paragraphs continues directly, but in fact on
a new line.
<H3>How to do it yourself</H3>
Of course you will see it better if you type it into
your <EM>index.html</EM> file and view it in a browser.
<P>
<HR WIDTH=50%" ALIGN=CENTER>
<P ALIGN=RIGHT>
Written by Simon Gronlund
</BODY>

</HTML>

The next step is to format the text itself a bit. Basic HTML do not give you that many ways to style your document, but I consider them usable for their purpose, you may set text bold using the <STRONG> tag (in fact it is the browser that decides if STRONG should be considered bold, but most browsers use that interpretation). The other more used tag is the <EM> tag and the text goes italic. From time to time underline or strike through can be used, <U> and <S> for short. Any of these tags have of course to be stopped by a </...>.

We now continue with FONT that gives you an opportunity to format both the text SIZE and the text FACE. Font sizes can be changed within the range 1 to 7, but the easiest way to change the size is to use the + or - signs, e.g. SIZE="-1" or SIZE="+2", that changes the size relative to the base font size that may be set both by the browser settings (default is 3) and by the basefont tag that I will not show here. The font FACE can be set to "Helv,Helvetica,Arial" or "Tms Rmn,Times New Roman". Default is set by the browser preferences.

Programming code and such text is preferably modified by the <CODE> or <TT> tags.
 

If combined with <PRE>,
as in PREformatted, the paragraph
centric way to treat text is canceled,
the text will be treated exactly as typed,
lines do not have to be broken by a BR or P tag.
Of course any FONT or such a tag must be closed by a </...> tag.

...

<P>
We now continue with <STRONG>FONT</STRONG> that
gives you an opportunity to format both the text
<STRONG>SIZE</STRONG> and the text<STRONG>FACE
</STRONG>. Font sizes can be changed within the
range 1 to 7, but the easiest way to change the size
is to use the + or - signs, e.g. <FONT SIZE="-1">
SIZE="-1"</FONT> or <FONT SIZE="+2">SIZE="+2"</FONT>,
that changes the size relative to the base font size
that may be set both by the browser settings (default
is 3) and by the basefont tag that I will not show
here. The font FACE can set to "Helv,Helvetica,Arial"
or <FONT FACE="Tms Rmn,Times New Roman">"Tms
Rmn,Times New Roman"</FONT>. Default is set by the
browser preferences.
<P>
<CODE>Programming code and such text is preferably
modified by the <STRONG><CODE></STRONG> or <STRONG>
<TT></STRONG> tags</CODE>.
<P>
<PRE>If combined with <STRONG><PRE></STRONG>,
as in PREformatted paragraph,
centric way to treat text is canceled,
the text will be treated exactly as typed,
lines do not have to be broken by a BR or P tag.</PRE>
Of course any FONT or such a tag must be closed by a
</...> tag.

Clearly it will be tiresome to type all those extra formatting tags, hence the web page maker software, but still it is good to know what they are doing, and I promise you that I still write quite a lot of HTML manually, to get the pages my way. To these tags there are quite a few more, but these you will learn yourself by trial and error.

Third step

So far we will add the list feature, how to make those nice lists, numbered, with discs etc., that are used from time to time? First we can distinguish between ordered lists, as those with numbers or letters, and unordered lists, as those with discs, squares, or nothing at all. There are a few more but as above, you will find them and use them yourself by trial end error.

 List type
 		 Code
(New list)
  1. Ordered, numeric, first level

    1. Next level

    2. Same level, next item

  2. Out one level
 <OL TYPE=1>
  <LI>
    Ordered, numeric, first level
    <OL TYPE=1>
      <LI>
        Next level
      <LI>
        Same level, next item
    </OL>
  <LI>
    Out one level
</OL>
(New list)
  1. Ordered, capital letters, first level

    1. Next, capital roman letters

    2. Same level, next item

  2. Out one level
 <OL TYPE=A>
  <LI>
    Ordered, capital letters, first level
    <OL TYPE=I>
      <LI>
        Next, capital roman letters
      <LI>
        Same level, next item
    </OL>
  <LI>
    Out one level
</OL>
(New list)
  1. Ordered, small letters, first level

    1. Next, small roman letters

    2. Same level, next item

  2. Out one level
 <OL TYPE=a>
  <LI>
    Ordered, small letters, first level
    <OL TYPE=i>
      <LI>
        Next, small roman letters
      <LI>
        Same level, next item
    </OL>
  <LI>
    Out one level
</OL>
(New list)
  • Unordered, disc type, first level

    • Next level, square

    • Same level, next item

  • Out one level
 <UL TYPE=DISC>
  <LI>
    Unordered, disc type, first level
    <UL TYPE=SQUARE>
      <LI>
        Next level, square
      <LI>
        Same level, next item
    </UL>
  <LI>
    Out one level
</UL>
(New list)
Definition lists

First line to be defined

Some explanation or so

Next line to go
And another line
 <DL>
  <DT>
    <STRONG>Definition lists</STRONG>
  <DT>
    First line to be defined
    <DD>
      Some explanation or so
  <DT>
    Next line to go
    <DD>
      And another line
</DL>

As you see you may put lists into other lists, and then mix them to be of different types. To view some other kinds, why not look at the code produced by HomePage Publisher, or Netscape/2 Composer. Make yourself a few lists and see how the result looks like.

Fourth step

As a last step we have to learn how to produce hyper links. And you will find that basic links are not hard to learn at all. Here you will find a link to WarpCast, a link to the Java installment of this issue, and at last this issue's index.html. Let us look under the hood.

As a last step we <EM>have to</EM> learn how to produce hyper links. And you will find that basic links are not hard to learn at all. Here you will find a link to <A HREF="http://www.warpcast.com">WarpCast</A>, a link to the <A HREF="java9.htm">Java installment</A> of this issue, and at last this issue's <A HREF="../index.html">index.html</A>. Let us look under the hood.

The basic link has A HREF, A is for anchor and I suppose HREF may be understood hyper reference. The destination is enclosed by quotes and may be an Internet address, a web page close to the page you are actually viewing or a locally stored file. The text shown and clickable is enclosed by the <A HREF... tag and the </A> finishing tag.

The difference between the two links above is plain, the WarpCast link is simply a fully qualified Internet address. The http:// may be changed to ftp://, news: or mail: as you need different features to help you.

The Java link on the other hand refers to a web page located very close to the page the link is located at. Since it is only a file name, it has to reside in the same directory since there is no reference to another directory. Hence, the web browser will look the link up at the actual address base, if that is www.os2ezine.com/000916/ the browser will look for the new file there.

On the other hand, you may redirect the browser to a relative directory. The index.html link is such a relative directory, the two dots says you have to go up one level. If you have to go up many levels you simply extend the chain to ../../../index.html and so forth. If you on the contrary want to go down in the file structure, you give the address as images/plain/example.gif where images has to be a directory at the same level the actual page resides at. Finally you may chain like ../../images/plain/example.gif, that is two steps up and two down on another branch. Relative addresses are really good to use since they work both on-line and off-line, that is, if you have downloaded a site not using relative but direct URL:s, you can not surf it off-line.

Summary

Here is a table of the tags we have used today. With these tags you can type yourself any basic web page, text-only but still working. Please, launch any plain text editor and try the tags out, that is the best ways to get the hang of it. Further view other web pages' sources, use the Netscape short-key CTRL+U when you like to view a source.

Simple HTML tags
Tag
 		Closing tag *
 		Meaning
 		Note
... applied to document
<HTML>
 		</HTML>
 		Document type
 		 
<HEAD>
 		</HEAD>
 		Header block
 		Not always necessary
<TITLE>
 		</TITLE>
 		Browser Titlebar
 		Not necessary
<BODY>
 		</BODY>
 		Body block
 		BACKGROUND image and/or BGCOLOR can be set
BACKGROUND
 		 
 		Background image
 		E.g. BACKGROUND="bg.gif"
BGCOLOR
 		 
 		Background color
 		E.g. BGCOLOR="#FF00FF" that is violet
... applied to text blocks
<Hx>
 		</Hx>
 		Header line
 		x is a digit between 1 and 7
<P>
 		( </P> )
 		Paragraph
 		ALIGN can be set
<BR>
 		 
 		Break, line
 		ALIGN can be set
<HR>
 		 
 		Horizontal rule
 		SIZE and WIDTH can be set
<BLOCKQUOTE>
 		</BLOCKQUOTE>
 		 
 		 
... applied to text
<STRONG>
 		</STRONG>
 		 
 		Mostly rendered as bold
<EM>
 		</EM>
 		 
 		Mostly rendered as italics
<U>
 		</U>
 		Underlined text
 		 
<S>
 		</S>
 		Strike through
 		 
<FONT ... >
 		</FONT>
 		Font attributes
 		SIZE and/or FACE must be set
<CODE> or <TT>
 		</CODE> or </TT>
 		Code text style
 		 
<PRE>
 		</PRE>
 		Preformatted text
 		Text is rendered as typed, format is preserved
List tags
<OL>
 		</OL>
 		Ordered list
 		TYPE can be set; = {1, A, a, I, i}
<UL>
 		</UL>
 		Unordered list
 		TYPE can be set; = {DISC, SQUARE, CIRCLE}
<LI>
 		 
 		List item
 		May be another list
<DL>
 		</DL>
 		Definition list
 		 
<DT>
 		 
 		Definition term
 		 
<DD>
 		 
 		Definition
 		 
Link tag
<A HREF="..."
 		</A>
 		Hyper link
 		The tag and the finishing tag encloses the address.

http://, ftp://, news: or mail: are used to addresses.

Miscellaneous tags
&nbsp;
 		 
 		no break space
 		white space that is non-breakable
ALIGN
 		 
 		Align
 		LEFT, CENTER or RIGHT
SIZE
 		 
 		Size
 		E.g. SIZE="+1", SIZE="5"
WIDTH
 		 
 		Width
 		Value in percent or pixel, e.g. "10%" or "10"
* Tags within parentheses are optional

  

Next time we will add images, but more, we will look into some real pit falls with images. So, if you, contrary to expectation, have not got yourself PMView, go for it. There are other software available that can do the same work, but in the OS/2 community it is one of the best tools for web imaging. You cannot draw images but you can edit colors, add filters, resize, convert and read most image file formats known to humans. CU later.

The resulting HTML page.
 

Previous Article
Home
 Next Article