Old school HTML formatting

HTML programming, homepages, can be made in different ways.
Some prefer a WYSIWYG editor.
WYSIWYG means; What You See Is What You Get. As a HTML generator, this gives you the possibilities to build the pages, and will give you an instant image of how, f.ex an images placement, or a piece of text will look in a browser. That is “the fast way”. You can edit the content like in a word processor, like f.ex Word, and the editor will write the tags for you. I will here mention that Word CAN be used to make homepages.
It will be an advantage to use a WYSIWYG editor if you want to make webpages and don’t have time, or don’t want to, or find it unecessary to learn the tags.

To learn the codes isn’t difficult, when you understand how a page should be constructed, and if you have a manual, a list of the tags that can be used. HTML in a WYSIWYG will be much easier if you have some knowledge about the tags. If you know what is happening, and how the result will look, in the browser

To program the pages in an ordinary text-editor, (like Notepad that is included in the windows system) is therefor “handmade” you can say. With a little experience you will quickly have an view over what is happening, and how your page should be build. In a WYSIWYG editor many will never get to know the tags, - the codes. Or if they look at the source codes, think that it’s all a pile of nonsense.

Here we will be using a really good small text-editor. It’s the “Gedit” that is freeware and is included in several Linux distrobutions, and it have more features than what you necessarly need. It have many advantages; You can have several documents open at the same time. It can save all the opened documents at the same time. There is a good “search and replace” function. Also you’ll have a gutter with line numbers, and a very useful syntax highlighting. You can change font and colors. And there are even some themes to choose from. A nice feature is also the “Highlight matching brackets”. That shows you where the opening tag have it’s closing tag. This goes for bot the curly brackets and the “greater that” and “less than” brackets.

For a start we will make the HTML documents editable in an easy way in Linux Mint Mate’s “Control Center”. Here we find the “Preferred Aplications”, and there we find the “System” tab, where you can choose the default Text Editor. Here it is possible to select the editor of you choice for opening these flatfiles.

We will, as said, learn the HTML tags by writing them manually. It takes a certain knowledge about what a HTML document have to contain as a minimum. It comes here; All HTML documents starts and ends with a tag telling the browser that this is a HTML document. There is by the W3C (World Wide Web Consortium) a set of definitions and rules for HTML. It’s W3C that is the worlds official and controlling institute. You can find places on the net, that tells the story of the Internet, and the definitions of the HTML language.

Every document starts as said with a command that tells users browser that the document is a HTML document. And it have had different content as the HTML language have developed in it’s different versions. Now, the HTML start tag is;

<!DOCTYPE html><HTML>

This have to be placed at the beginning of every HTML document. To end the you simply use the and tag, like so;

</HTML>

As you can see a slash is used. This is used for ending a tag. It’s not all tags that have a ending tag. Many of the tags contains of two tags, a start tag and an ending tag. Here the ending tag starts with a slash, telling the browser that here ends the code. It can for an example look so;

<STRONG>Bold text here</STRONG>

Some have only a single tag. Like the image tag, like so;

<IMG SRC=’imagefile.png’ />

As you see the slash here is put at the end of the tag, again to show where the tag ends.
The use of two tags is necessary when you f.ex use the

<STRONG><STRONG>

tag. It is necessary to have the ending tag, cause you have to tell where you want the text that should be bold will end.

After the HTML start tag we tell the browser that here follows the body of the page. So that tag is the

<BODY>

-tag. It can contain lots of sub-commands. Here is a full BODY tag;

<BODY TEXT=’#000000’ LINK=’#ff0000’ VLINK=’#000000’ ALINK=’#ff0000’ BGCOLOR=’#ffffff’ BACKGROUND=’baggrund.jpg’ BGPROPERTIES=’fixed’ LEFTMARGIN=’20’ TOPMARGIN=’0'>

That was a longer one. But let me tell you the bits.
The first property is TEXT where you can set the color that will be the color of the text in the document. Here the color is set in Hex code. Or you can use a certain amount of colors in their English names, like ‘Blue’, ‘White’, ‘Black’, and so on. In the above example the color is set to #000000, - six zeros. That means the color is set to be black. (You can of course set the color to be any, but we will get to that later).

After that there is the property LINK, where we set the color the same way as the TEXT. And this goes for the ALINK, VLINK, that is Active link, and Visited link, respectively. VLINK is the color of those links that leads to the pages that the user already have visited. After this we have the property BACKGROUND, here we set the URL to the image that we want as background. It’s needed here to say that the image will be tiled, meaning it will be repeated side by side to fill out the whole page. The next property, the BGPROPERTIES=’fixed’ is also for the background image. It will make so the background image will not scroll, but will be placed fixed on the screen, while the text will scroll down in usual way. This is sometimes useful. The last two properties are LEFTMARGIN and TOPMARGIN that are used to set a fixed margin on the page. Again this could be useful, it depends on what design you are making.

Hereafter it have to be said that none of these properties are musts, and not necessary cause you can f.ex just make a <BODY TEXT=’#000000’ BGCOLOR=’#FFFFFF’>, that then will give you a black text on a white background. But these are quick but not mandatory, but it is advised that at least to select a background color, because different browsers have different default background colors. F.ex will one browser show you a nice white page, while others will show you a grey. So I will recommend that you set a background color. It is also advisable to select a color for the text, and while at it; make it a habit to also set the LINK, VLINK and ALINK colors. Then you will not get any unpleasant surprises. And you can always override these setting, simply by set the color differently by use of CSS styles. We will get into that somewhere else in this tutorial.

It is in place here to explain a little about hexadecimals; hexadecimals are not like our normal decimals, that goes from 0 to 9. Hexadecimals they goes from 0 to 9 and then from A to F.
Completely it’s so;
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

As you saw above is the background color in the <BODY> command example aet to #FFFFFF, that is in decimals = 16, 16, 16, 16, 16, 16.

That is because the colors are divided in RGB. That is an acronym for Red, Green, Blue. Red is therefor the first two hexadecimals, that can be 0 to 16. And that means that there are two hexadecimals for every color. This means again that red can have 256 graduates - tones, 0 to 255.

And since there are three colors (Red, Green, Blue) you can all in all have 16,777,216 colors. (16 x 16 x 16 x 16 x 16 x 16 ).

This is valid for all the tags that can be used to set colors.
So this is how it is for all the colors. Grey tones, for the reason of mentioning those, are true grey if all the three (R, G, B) are of same value. This limits the hexadecimals to;
(16 x 16= 256) This way you can have 256 grey colors, or black, white, and 254 middle tones. You can say that 0 (zero) is the colors “turned down”, and by F its fully “turned up”. So you put more “light” on the color going from 0 towards F (going up in value).

Some colors have been dedicated with a name, the English word for the color. Here is the list of 17 colors, with their names and hexadecimal values.
In the Visual Studio Code editor you can by using the "code completion" see a much longer list of colors with dedicated names.

aqua		#00FFFF
black		#000000
blue		#0000FF
fuchsia		#FF00FF
gray		#808080
green		#008000
lime		#00FF00
maroon		#800000
navy		#000080
olive		#808000
orange		#FFA500
purple		#800080
red		#FF0000
silver		#C0C0C0
teal		#008080
white		#FFFFFF
yellow		#FFFF00

Here, in the beginning of this section about HTML we will learn about formatting TEXT. This sounds basic, and it is so. But yet there are many ways to setup, treat, and show text in. So let me begin with the tags here;

 - BOLD. Bold text. You can enclouse a piece of text by this tag, or by the beginning and end of the tag shown here, and it will present the text as bold in the browser. This is very useful, and it's often used. The result could look like this;

Hello <B>my name is jacob</B>, whats yours?

Hello my name is jacob;, whats yours?

As you can see not all the text is enclosed. Only a couple of words in the mid text is shown as bold.
I have to say though, the the tag is old and recommended not to be used anylonger. Instead you should use theOnly a couple of word in

<STRONG></STRONG>

tags. And better even to use is the "font-weight:bold;", in CSS.

If you want some text to be shown both as bold and underlined, well then you can simply let the one tag enclouse the other. And that can look like so;

Hello <B>my name is <U>jacob</U></B>, whats yours?

Hello my name is jacob, whats yours?
As you may have guessed the tag will make the text you enclouse with the tag underlined.
 is enclosed by . So the beginning of the text will be bold, while only “Jacob” will be underlined (and bold). And the end of the sentence will be normal text.
Okay, we have now seen how we underline and how we make text bold.
Further, there is a tag to make the text italic. It is as simple as the other tags show above. And it looks so;

<I>Hello <B>my name is <U>jacob</U></B>, whats yours</I>?

Hello my name is jacob, whats yours?
This will give you an italic text – with a few bold (and italic) words in the middle.
If you want your text italic but the piece of text that Is bold, not to be italic, you will have to insert the italic end tag. () And when you want the following text to be italic agasin, you simply put the beginning tag again, and remember to finish it off, but adding the italic end tag to end at where youwant the italic to be stopped. It can look like this;

<I>Hello </I><B>my name is <U>jacob</U></B>, <I>whats yours</I>?

Hello my name is jacob, whats yours?

As you see we tried using all three tags here.

There is a tag – a code, named <CITE></CITE> - that is mend to be used by f.ex. Showing a quote. What it does is just to present the enclosed text in an italic formatting. I just want to mention it here. Without an example.

From here we now go to a “strong” tag or command. Its the - that have several properties. is used to manipulate the text in other ways then those just mentioned above. You maybe have already thought about how you can change color for some text, other then how it is done in the <BODY> tag. First let me say that you should maybe not use this tag, as it is to be out phased, and you should instead make use of the STYLE instead, that is of the CSS. Take a look in the chapter about CSS.

Again, the is a tag that consists of both a start tag and an ending tag. Font have many advantages. For an example you can set another font, different from the rest of the text. To highlight a piece of the text content. You could imagine a scenario like this:



The property is for writing the name of the font you will use. These can be separated by a comma. So you can use Verdana, and if that is not present on the users machine, the browser will try the next, and so on. Then if none of the, by the webdesigners wish, fonts are installed – then the browser will use on that it have on the machine. But if you set the fontface to be one that is shipped with MS-windows, then you are about, 90% sure that the font you set in the code, will exist on the users PC.

The SIZE property. Its used for setting the size of the font. It goes from size 1 to 7, where 1 is the smallest. If you dont set a size in the tag size 3 is often used. But I will suggest that the SIZE is always set to something that looks good to you. Also you can set the fontsize “relative”. So if the text is in size 2, and you want to set it to 4, then you can simply write; SIZE=’+2’.

COLOR. This property is used to set a color of the enclosed text. The color is set using hexadecimals, as explained above. You can also use the colors “that have been named” elsewhere in this short ebook. They can be white, black, yelow, green, blue, red, etc.

In the HTML code you can use the tag <BIG></BIG> to make the text one size bigger. And you can use the to make the text appear smaller. These are useful in a “quick way” to change the texts size, without using the or some CSS styling.

If you have to present some programming source code, you can use; <PRE></PRE>. This will give you text that reminds of a typewriter, or the COURIER font, and other monospaced fonts, that are so well suited programming source code. You can get a similar effect by using the <TT></TT> tag. That is supposed to be a typewriter looking font.

Also, as a fast alternative to both is the Header tag. You can use numbers from 1 to 6, where 1 is the biggest, and 6 the smallest. (Notice the difference from the tag).
This is an alternative to if you want to make a quick headline. The <Hn></Hn> (n being a number of those here mentioned), -tag is also used in reading robots that will recognize the Headline tag and use it as headlines for f.ex chapters..

If you have some code that you want to be sure will not be wrapped by the browsers, you can use the tag. (NOBRake).

On the other hand, there is the BREAK tag. Its written like so:
 
And is probably the most used tag of them all.
It will simply break the text to next line, and two will break to the next line and create a open line before continueing the content that will follow.
The tag is just a single tag, with out any end tag. It has though a single property that have several values. Let me show you here:

CLEAR=’right’; Next line will start, where there to the right margin is free.
CLEAR=’left’; Next line will start, where there to the left margin is free.
CLEAR=’all’; Next line will start, where there, both to the left and right margin is free.
CLEAR=’none’; Next line will start, no matter is there is free margin.
CLEAR=’n’; Next line will start where there is free margin, both to the right and left margin. Plus n pixels below.

Also, for sections you can use the <BLOCKQUOTE></BLOCKQUOTE>. It will insert the enclosed text and make it show with margins all around the four edges.
Good for comments, cites and text that have to be presented different and highlighted from the body of the text.

Now we will try to set up a list. You use two tags for this. First we use the <UL></UL> tag. And within that we use the <LI> tag. The <LI> tag can have different properties. You can give the bullet marking the list different looks. They are;

TYPE=“A” - will give the bullet letters like “A-B-C-D” and so on.
TYPE=“a” - will give the bullet low caption letters like “a-b-c-d” and so on.
TYPE=“I” - will give the bullet the roman numbers in upper case, like “I-II-III-IV” and so on.
TYPE=“i” - will give the bullet the roman numbers in lower case, like “i-ii-iii-iv” and so on.
TYPE=“1” - will give the bullet arabic numbers, like “1-2-3-4” and so on.

What further makes this tag good, is that you can set a “start number” - If you have used TYPE=”A” and the START=’8’ then the list will run from; H,I,J,K,LM and so on. And TYPE=’i’ will; viii,ix,x,xi,xii,xiii, .. and so on.

The listitems are inserted using <LI> what is an item in the list. Following that is the text that is to be presented in the list, like;

<UL>
<LI>First day
<LI>Second day
<LI>Third day
</UL>

Its not just good for automatic numbering, but also if you have divided a longer list. You can then just start the second part of the list and give the START=’...’ property, that way the list will continue from where you want it to.
If you just want a bullet, with out numbering the list. -With no order. Then you can just make use of

<UL>
<LI TYPE=’circle’>
<LI TYPE=’disc’>
<LI TYPE=’square’>
</UL>

This will give you a bullet in different look. Try them.

If you want some content centered horizontaly, then you can do two things. The old tag is the <CENTER></CENTER< tag. This will center any content put inside those tags.
The other method is to use <DIV> or . Its; <DIV ALIGN=’center’></DIV>.
This ALIGN=’center’ can also be put inside the tags. The result is the same.

In both the <DIV></DIV> and , and tags you can also use the STYLE sub command with its properties that will handle alignment of text in all manners. You can do this;
STYLE=’text-align:left;’

Or with any of these properties;

right, center, justify, initial, inherit.

In the beginning of a document you can set which font you want to use throughout the document. This way you can just do the smaller changes like, color and size, bold, italic, underline, etc.
The tag is the <BASEFONT>. You have three properties and these are;
SIZE, that can be from 1 to 7.
COLOR that can have the color code set in hexadecimals.
NAME, that is for the name, or list of fonts.

You may have seen scrolling text on some homepages. Here I give you a couple of examples on those. The tag being used is the <MARQUEE></MARQUEE> -tag. It takes some properties. They are these;

BEHAVIOR – can be set to either “scroll”, “slide”, “alternate”
BGCOLOR – Background color in hexadecimal
DIRECTION - “left”, “right”, “up”, “down”
HEIGHT – Height in pixels or % of available space
WIDTH – Width in pixels or % of the space available
HSPACE – The width of margin to the left and right, between other content on the page and the <MARQUEE>.
VSPACE – Height of margin in top and bottom, between other content on the page and the <MARQUEE>
LOOP – Set amount of times to loop, f.ex “2”. For continues run, set the value to either “-1” or “INFINITE” SCROLLAMOUNT – Number of pixels scrolling. Try changing this till you are satisfied.
SCROLLDELAY – Number of milliseconds between each “updating”. Smaller numbers gives you a faster moving. Try changing this till you are satisfied.

Here is a couple of examples for you to try, or use as examples.

A horizontal scrolling marquee.

Hello this is a test of the marquee tag.

<MARQUEE SCROLLDELAY=80 SCROLLAMOUNT=2 LOOP="-1" WIDTH=460 BACKGROUND=’white’ DIRECTION="left">Hello this is a test of the marquee tag.</MARQUEE>

Here is a marquee that is scrolling up (vertical).

<MARQUEE SCROLLDELAY=80 SCROLLAMOUNT=2 LOOP="-1" WIDTH=160 BACKGROUND=’white’ DIRECTION="up">Hello this is a test of the <B>MARQUEE</B> tag.
<IMG SRC='linux.svg' WIDTH='128' /></MARQUEE>

Hello this is a test of the <MARQUEE> tag.

As you can see, you can use HTML tags in the content of the MARQUEE. Here I use f.ex a piece of graphics. Try to play with the numbers.
Here I will show you an example where the scrolling will stop when the users mouse will hover over the MARQUEE, and continue when the mouse is moved out of the MARQUEE.

<MARQUEE onmouseover=this.stop(); onmouseout=this.start(); DIRECTION=’up’ SCROLLAMOUNT=’2’ SCROLLDELAY=’80’>Here is some scrolling text<BR><B>BOLD TEXT</B><BR></MARQUEE>

Here is some scrolling text
BOLD TEXT


This tag is used to lower some text. The enclosed text will also be a little smaller than the rest of the text.
This tag is indispensable if you are writing formulas. An example:

H<SUB>2</SUB>O – Aqua.

H₂O – Aqua.


With use of this tag you can raise the enclosed text. Again the text will be a little smaller than the rest. This command is like indispensable in for example mathematics. An example:

A<SUP>2</SUP> + B<SUP>2</SUP> = C<SUP>2</SUP>

A² + B² = C²

To comment your HTML page is a very useful thing, so you later can find your way around in the source code. If you are making HTML for others it is almost indispensable for them to understand your coding.
You can comment your code, like this;

And if you want to comment several lines, you simply use it like so:

A comment will not be shown on the page, in the browser. But it is used to insert notes and remarks.
It can be useful if you are having problems in creation of your code. You can comment a piece of code to see how the whole will react. To find the error.
This comment tag is also used when you insert Javascripts, so it will not give an error in browsers that are not compatible with Javascripts.

Horisontal rule.
This tag doesn’t have an ending tag, it just insert a line. But in HTML a line is of course not just a line. Here are the properties:
SIZE=’’ - Sets the thickness of the line. Like “4” render a 4 pixel thick line.
COLOR=’’ - This takes the usual hexadecimals, or color names. You can make the <HR> suit your page’s color scheme. Like “#C0C0C0”.
ALIGN=’’ This sets the alignment of the line. F.ex will <HR WIDTH=’50%’ ALIGN=’right’> make the line in half the width of the space where it is inserted, and align it, so it will be aligned to the right.
NOSHADE – This have no value. Its just inserted in the <HR> tag. It makes the line 2D, (without a shadow).

<KBD></KBD>
This tag will show what the user is to write, f.ex a line of code, a command, etc.

Special characters.

If you need to insert special characters, like the copyright sign, or trademark, or any foreign letters, or matematical signs, and want them to be shown correctly then you should use either of these two methods.
Either you write like so;
&#nnn; where nnn is the signs decimal code.
Or you can write it like;
&ccc; where ccc is a string that represent the sign.
If I am f.ex to write the copyright symbol, then it can be like this;
©
It will be like this;
©
Resulting in; ©

Se the list of special characters elsewhere in this ebook.

This was sofar about formatting text in the body of your HTML document. Now I will tell you about the codes that you put in the beginning of the document.

<HEAD></HEAD>
This enclose the head of the document.
Here you can insert several codes.
F.ex you can set a title for your page.

<TITLE>My webpage</TITLE>
Enclosed in the <TITLE> tag you can write the title of your page. This title will often be used in the browsers tab, where you page is shown. And maybe it will be the default name for the bookmark, if you make a such, of that specific page.

The next code <META ...> is very useful. It have no ending tag. <META> is for example used to keywords, -tags, that search bots will read. Therefor it is a good idea to think about, and write the right words, words that describe the content of you webpage.
<META> can do many other things. But lets look at search phrases. Here we use the property to the <META> tag.

<META HTTP-EQUIV=’Keywords’ CONTENT=””>
Its in the CONTENT that you write your keywords, tags. Search engines have programs (bots, crawlers) that scans the web, and indexes the pages they find. And the bots saves the information about the pages, where they use, among others, these keywords. There is even more or less an industry that is all about tags and keywords. SEO; Search Engine Optimization. That is all about doing the right things, settings and actions that can be made for getting a higher ranking in the search engines.