Preparing for publishing an existing material.
If you've decided to go online, then perhaps you've already have a material that can (even if only in your sole opinion) be of some interest to others.
I would suggest to start with a plain text document. Why exactly the text document when so many file formats can be opened while using a web browser? Basically, just because the following:
a) we want to get to our page by entering the address of our site (http://my.cat.net), rather than typing in its physical address (http://my.cat.net/file_ name.file_extension);
b) we don't intend (not just yet, in any case) to build a dynamic, for example, PHP Site (although, in many cases it is more convenient), but any dynamic pages can become an obstacle in working with search engines (and this is precisely the next paragraph);
c) we want to see (maybe not immediately but after some time) our site indexed at least by the major search engines, and for them there is nothing better than a plain text, because reading and, if you like, "stealing" and keeping our valuable information is the only thing they're able to do.
Thus, just the text format is appropriate for the great majority of people who publish materials online.
And if you are among these people and you have a file named for example aboutMyCat.txt, then, to start with, just rename it to index.html (extension - i.e. .html - necessarily needs to be changed, you maybe even have to open any folder and go to Tools -> Folder options -> View -> and uncheck the box near Hide extensions for known file types).
If you are using a relatively new type of word processor such as MS Word or OpenOffice and your document looks like aboutMyDog.doc or something of the kind, you have two options:
a) if you are lazy, then after clicking File -> Save As... -> HTML Document (.html) you will get the very document with a relatively decently formatted code that is already prepared for publication, and therefore you can skip all the topics that do not deal directly with site uploading and search engine optimization (SEO);
b) you are not lazy? Then save your .doc as .txt, and after that change its extension to .html and its name to index, and, believe me, your work will not be in vain and further couple of steps will not only reduce the file's size, but also will make it more accessible for search engines.
So, once again, we check the file for spelling errors and ... What have we achieved!? Our beautiful document, which had had a nice formatted look of something similar to the previous screenshot, suddenly stretched into one long line! But the fact is that by default any number of successive whitespace characters are reflected on a web page as a single space. And here we'll be helped out by HTML. HTML documents are composed of individual instructions (tags), enclosed in angle brackets (<tag>), as well as almost all of them are paired and are of container type (can contain other tags), and we get the following: <tag>and perhaps something in here</tag>. All html-documents must begin with the <html> instruction. After the opening tag the document is divided into head section (HEAD), where we will place the name of our document (TITLE) and a number of tags (META) which will not be displayed by browsers but will provide search engines with some useful information; the main part of the document - the body section (BODY) will contain our text (plus additional tags for formatting) . We end the document with the relevant closing tag - </html>. Skipping in this case manual retyping, we'll use copy (keyboard shortcut ctrl + c), followed by past (ctrl + v), because any html-editor will provide us with the initially formatted document.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> </head> <body> A poem about my cat. So it's happened that my Cat On a window sill sat But sighted a Bird and ran away And this is all that I can say. </body> </html>
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - here we declare the document type, at the moment this type considered preferable by many people due to its flexibility in working with different versions of different browsers, XHTML (for more information see W3C site, http://www.w3.org respectively).
2. <html xmlns="http://www.w3.org/1999/xhtml"> - begins the document and points to the address of the language specification (XHTML namespace ).
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - declares that the document contains an html-formatted text with UTF-8 character encoding.
4. <title>Untitled Document</title> - instead of Untitled Document here we'll type in the title of our page, I've, for example, named it A poem about my favorite cat.
5. Add a meta tag containing a brief description of the document: <META NAME="description" CONTENT="a poem about my favorite cat written by me last year at spring time">.
6. Let's have a look at the result:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A poem about my cat.</title>
<META NAME="description" CONTENT="a poem about my cat written by me last year at spring time">
</head> <body> A poem about my cat. So it's happened that my Cat On a window sill sat But sighted a Bird and ran away And this is all that I can say. </body> </html>
It seems that nothing has changed in the browser window. Only at the very top of the screen (before the commercial name of the browser - in my case it is Mozilla Firefox) the name of our document (the content of the tag TITLE) has appeared.
At long last we can proceed with the formatting of our text! Of course, we could achieve the desired result simply by applying the tag <pre> </pre>, which defines the block of pre-formatted text. This text normally is displayed in monospaced font with all the spaces and line breaks preserved:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A poem about my cat.</title>
<META NAME="description" CONTENT="a poem about my cat written by me last year at spring time">
</head> <body> <pre> A poem about my cat. So it's happened that my Cat On a window sill sat But sighted a Bird and ran away And this is all that I can say. </pre> </body> </html>
However, this tag will become unnecessary when working with CSS and applying for various tags style attribute, so we'll go another way, namely: the name of our document we'll put in the tag <h1></h1> (HEADER, these can be from h1 to h6, the higher number will yield the smaller text, different browsers display the headers in different sizes, but this is easily handled with the help of CSS, are extremely useful when working with search engines, for them the significance of a text decreases together with its size) and the rest of the document we'll put between the tag <p></p>, which determines a paragraph with some blank space before and after it, the addition of the attribute style="white-space: pre" will enable us to preserve our spaces.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A poem about my cat.</title>
<META NAME="description" CONTENT="a poem about my cat written by me last year at spring time">
</head> <body> <h1>A poem about my cat.</h1> <p style="white-space: pre"> So it's happened that my Cat On a window sill sat But sighted a Bird and ran away And this is all that I can say. </p> </body> </html>
By the way, for the line break we could use the tag <br /> (inserts single line break), which in classic HTML looks like <br> and which we, according to the type of our document, make self-terminated with a forward slash. But imagine that we want to place on the page not our concise text, but something really long (to begin with, let's say a poem containing about one and a hundred lines). It'll be quite tedious typing (or pasting) tag <br /> in again and again, but even worse there must be text indents! And we know that for HTML all of our spaces look like one. We would have to use non-breaking space, which belongs to the group of special characters and represented by . And our document would be looking in the editing mode like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A poem about my cat.</title>
<META NAME="description" CONTENT="a poem about my cat written by me last year at spring time">
</head> <body> <h1>A poem about my cat.</h1> <p> So it's happened that my Cat<br /> On a window sill sat<br /> But sighted a Bird and ran away<br /> And this is all that I can say. </p> </body> </html>
In any of the last three cases we get approximately the same result. Yes, and here's a word about special characters. The point is that browsers look at some characters as if they were a piece of programming code, for example, <, but we by all means want to see it on our page! For this reason these characters are replaced by letters standing just after the ampersand sign (&) with the semicolon at the end (by the way, each of them has a numeric analog, for example, —). You don't have to remember the sequences because any HTML-editor will give you a menu from which you'll be able to choose a desired character.
And, despite of all said above, pay attention to the break tag. This is the first unpaired tag we've met so far. Tags are mostly paired (containers). Other unpaired tags that we are likely to use in the near future are - <img /> for inserting images and <hr /> for inserting a horizontal dividing line.
In the meantime, we've already have some material for publication!
There is only one important detail left. The point is that the very name of html - hypertext markup language - implies the existence of this hypertext, and a hypertext document is a document which contains links that allow us to move quickly to other documents. So let's create for a start at least one such link. Assuming that we've got a document mycats_bio.html, which is the biography of the cat to which my poem is dedicated we'll place at the end of the document before the </body> tag a couple of line breaks (for a visual separation of the link from the poem's text) and add the tag <a></a>. The letter a is here for the word Anchor, between its opening and closing tags can stand a word, a group of words or image that we want to enable our site's user to interact with, the only tag attribute, which we are now interested in - href, which defines the URL of the document that we want to open in response to clicking on the link.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A poem about my cat.</title>
<META NAME="description" CONTENT="a poem about my cat written by me last year at spring time">
</head> <body> <h1>A poem about my cat.</h1> <p style="white-space: pre"> So it's happened that my Cat On a window sill sat But sighted a Bird and ran away And this is all that I can say. </p> <br /> <br /> <a href="mycats_bio.html">mycats_bio.html</a> </body> </html>
And now to less interesting, but nevertheless important moments.