How to make HTML Files:
For beginner M.I.A. Volunteers

Understanding what HTML is about.

HTML is the type of document used on websites. HTML documents have the extension .htm, whereas Word documents are .doc and plain text documents are .txt.

Select a simply formatted Word document from your own files – no columns or tables, just plain text, with maybe some italics, some headings maybe. Open it in Word and then Save As a plain text document, but change the extension to .htm

Now open the document you just saved with your browser (e.g. IExplore): File menu, Open, Browse, ... OK

You see that the document is just a string of words, no formatting, no paragraphs, no headings, just one long line. To make it look like it is supposed to look you have to format it for HTML.

Currently you are “previewing” the document. Open the document using the browser’s Notepad – View Menu, Source. Here you see the document as a plain text document, with paragraphs visible. At the beginning of each paragraph insert <p> and then Save it.

Now go back to the “preview” window and Refresh. You should now see the document with paragraphing. If not, please find out what you did wrong before continuing.

Now in the source code, pick a word to put into italics. You do this by putting <i> before the word and </i> after it. Save it and then refresh the preview window. Pick one of the lines which was a heading and enclose it between <h1> and </h1>, Save and see how this makes a heading.

Basic Structure of HTML documents

Now you are reading this document on your browser. You can’t edit it, because it is on the server. Look at the source and you will see that the document has a <!DOCTYPE line at the top. You can ignore this. Then the whole document is enclosed between <html> and </html> and within this, there are two parts of the document: the header, enclosed between <head> and </head> and the body of the document enclosed between <body> and </body>.

The header provides certain important information about the document.

<meta http-equiv="content-type" content="text/html; charset=utf-8">

tells the browser that the document uses ordinary western European characters;

<meta name="viewport" content="width=device-width, initial-scale=1"/>

tells the browser to use different width if the page is read on a mobile device;

<link rel="stylesheet" type="text/css" href="../../../css/works.css">

tells the browser where to get instructions about how to present the various styles in the document, namely http://www.marxists.org/css/works.css. You don’t really need to know anything about this file, except the range of styles it offers. You can copy this line into any document you make, but you have to have a copy of works.css and the right path to it. For practice, just use the default styles on your browser and don’t worry about getting the MIA styles.

Experiment with your trial document. <b> ... </b> for putting things in bold. Use headings <h1>...</h1> or <h2>... </h2> etc.

You can do all this in Word, before saving it as a plain text.htm file, making use of Word’s Find-and-Replace-All facility.