In my lifetime I've written software in 2 versions of Fortran, in 4 versions of Basic, and in C⁺⁺. In some of the software I've written, I had to define the content of each pixel on the screen.

Those were lower level languages. Doing anything was tedious and time consuming. Therefore, I can appreciate the simplicity of a high level language like HTML.

In HTML you write the text that you want to appear on the screen, and imbed "tags" to define the formatting (font style {eg bold}, headings, tables and lists, etc).

What you see now on the browser window is not what was sent to your computer. What is sent from the website server to the browser is really a text file with imbedded tags. You can see the actual "source" file sent to your computer for this page by clicking on the page with the right mouse button, then selecting "View source". When your browser gets this source file, it puts the page in the window based on what the HTML tags say to do.

Tags: A tag is a character, several characters, or a whole word enclosed in angle brackets - < >. For instance, <b> puts the following characters in bold. In most cases, tags come in pairs, <b> opens the boldfacing and </b> closes it.

Other tags that affect font "style" are,
<i>italics</i> for italics,
<u>underlining</u> for underlining,
<del>strikethrough</del> for strikethrough, and
<center>center something</center> to

center something

Links: Another tag type is the "anchor" tag <a> and </a>. It is used, among other things, to anchor a hyperlink reference to a link word. The URL to which you want to link is defined by the attribute "href=", which is inserted, after a space, in the <a> tag, and the URL is enclosed in quotation marks. Finally, the URL must be complete, starting with http://, not just www. So, to link the address for Bacharach to the word "here", you write,

"For information about Bacharach, click <a href="http://www.bacharach.de">here</a>", and you get

For information about Bacharach, click here.

You can use href to link to a page somewhere on the internet, another page in your website, or another place on the page.

Pictures: All I will say about imbedded pictures is that they are imbedded using the self-closing image (<img>) tag. Since I don't think ETBD wants people imbedding pictures in their posts, I won't say any more.

"Self closing" tags: Some tags do not need a closing tag. Example of this are the <img> tag, from above, or the line break, <br>, which are used alone. HTML does not recognize normal text formatting, such as <CR> (carriage return). Even though you might type two lines with line spaces between them, if you don't put in line breaks (<br>), the lines will run together when put on the screen by the browser.

HTML codes: Because <b> has a meaning, as a formatting command to the browser, if I write it on the page, to show you what it is, you won't see the tag but everything after it will be in bold. What to do?

Since certain characters have meanings to HTML, there has to be a way to get the browser to put them on the screen without using them. We do this with HTML codes. Some are as follows:
&lt; is the code for the "less than" symbol, <
&gt; is the code for the "greater than" symbol, >
&amp; is the code for the "ampersand" symbol, &

So, when I wanted to write <b>, I actually had to write &lt;b&gt;.

&euro; is the code for the "Euro" symbol, €

A word of caution

HTML, like any other programming language, requires strict adherence to syntax. It cannot guess what you really mean.
It does exactly what you told it to do, not what you wanted it to do.
Even a small error in spelling or "punctuation" (like leaving out "/" or ">") will give you unexpected results. If you are not quite getting what you expect, look for small errors.

Webpage organization

If you looked at the source file for this page (like I suggested earlier, right mouse click), you would have seen that the page contains more that just the HTML code I descibed above. At the top of the page is a tag that tells the browser what version of Markup Language this page is written for, and a link to a website where the version is defined.

The rest of the page is contained between opening and closing tags, <html> and </html>.

The html part of the page is divided into the "header", between tags <head> and </head> and the body, between tags <body> and </body>. The body is where all the actual contents of the page, the text and some of the formatting, are contained.

Inside the head are two things: first, the "META" commands, which tell the Internet about the page - who wrote it, what it is about, and some keywords to assist search engines in identifying it.

Also in the head is a section called "style", where you can identify characteristics - font-type, font-size, margins, color, etc to be used for blocks of text in the body. Styles are a little too advanced for this disertation. Anyway, if posting on the Grafitti Wall, you don't have access to styles.

More tags

Lists: You can use tags to create order (numbered) and unordered (bulleted) lists.

For an ordered list,

1. Start with <ol>,
2. Then start every item on the list with <li> and close with </li>,
3. End with the closing tag, </ol>.

The above list was created with
<ol>
<li> Start with &lt;ol&gt; </li>
<li> Then start every item on the list with &lt;li&gt; and close with &lt;/li&gt;, </li>
<li> End with the closing tag, &lt;/ol&gt;.</li>
</ol>
Note, in the above example I had to use HTML codes, like &lt;ol&gt; to get <ol>.

Using <ul> instead of <ol> gives you a bulleted list.

Tables: Tables can be defined by (you guessed it) the <table> tag.

In between the opening and closing "table" tags each row is defined with <tr> and </tr> tags.

Within the row tags, column are defined with either <th> or <td> tags.

<th> tags are for headers, in bold; <td> tags are for the cell contents, in normal fonts.

So, to define a simple 2x2 table,

<table border="1">
<tr> <th>Table</th> <th>Col 1</th> <th>Col 2</th> </tr>
<tr> <th>Row 1</th> <td>row 1, col 1</td> <td>row1, col 2</td> </tr>
<tr> <th>Row 2</th> <td>row 1, col 1</td> <td>row2, col 2</td> </tr>
</table>

Table	Col 1	Col 2
Row 1	row 1, col 1	row 1, col 2
Row 2	row 2, col 1	row 2, col 2

The "attribute, border="1", gives you a thin line between cells.

Headings: There are an number of pre-defined headings, <hn> </hn>, in HTML. h1 is the largest; the heading get progressively smaller as n get bigger.
Headings are bold and appear on their own line with space above and below.

This is <h1>.

This is <h2>.

This is <h3>.

This is <h4>.