Introduction

      This tutorial is intended to disclose and illustrate the HTML (HyperText Markup Language) that you need to put up a website. There are many styles and methods of doing this that all do the same thing. Each of them can make your website look like anything you want. The method used here is the simplest I have found. When you understand the HTML used in this tutorial, you will be able to modify the examples to fit any layout and include any scenery you like. By using actual HTML and not a proprietary system for modifying templates, you will have real control over every aspect of your website's functionality; and you won't be locked into any particular service. You are welcome to view and copy the HTML code of any page of this website and adapt it for your own purposes. I recommend using Firefox as a browser, Gimp as a picture editor and NetBeans as an HTML editor. They're all free.

      Please notice that most paragraphs in this text are indented. If you hover your mouse over the indented area, it will indicate a link. This link is to Google. If there is a word or phrase in the text that you don't know enough about, you can copy it and click on the indented area to search for answers in Google. When you come back, you will not have lost your place.



Files

      When somebody uses their browser to reach your website, each page they see is rendered for them by their browser by interpreting a file. If they go to the front page of your website, a file called index.html is the file that they reach. That's what you should name your front-page file. All of the other pages of your website written in HTML that they see should be given names ending in .htm instead of .html. There is one other special file that has yet another ending. It is called a Cascading Style Sheet. At futurebeacon.com, fb0.css is the name of this cascading style sheet. It's purpose is to specify some of the features of the visible pages of the site. The .css file is not intended as a website page, but you can see it here as a text file. The HTML web page files are text files and so are cascading style sheet files. Your browser renders the meaning of the HTML files ( .htm and .html) but simply displays the .css files as the text files they are.

      Your index.html file together with several uniquely named .htm files and your .css file (initially a copy of fb0.css named for now as z.css) should be located on your computer in a folder perhaps called Website (or something similar). When you open your website folder and click on any web page file, your default browser will render it. The off-line path (the file path on your computer) will be shown in the web address window in the browser. Because each web page file will mention your .css file and because that file is in the same folder as the web page file, the page will be rendered just as it would be on line. When the site does what you need it to do (at least to begin with) you are ready to pick a domain name and hire a hosting service. A very well-known, economical and capable hosting service is GoDaddy.com. I recommend it. Its technical support is absolutely first rate.



Viewing Codes

      If you right click on an empty space on a web page, a list of options comes up, one of which is View Page Source. The term source means source code. Small pieces of this HTML source code will be displayed on this site in text areas like this:

<div style="font-size: 16px; line-height: 20px;"> <center>by James Adrian</center></div>

Here is what this code renders:



      The code calls for a font size that is 16 pixels high with a line spacing of 20 pixels. In addition, the rendered text is centered on the page. <center> and </center> are tags of the element called center. The tag that begins with a slash is called an end tag.       Some elements do not have an end tag, such as <br /> which instructs the browser to begin any following text or other material on a new line. It is a new-line code or carriage return. Another famous single-tag element is the "extra" space. You need to know that all browsers ignore all but the first in any string of spaces written into an HTML file unless an element for that purpose is used. If you insist on writing more than one space in a line, you must use the space element. It will be illustrated shortly.

      If the center element were to be removed, the text would begin on the left of the page by default. For every center there is a /center and for every div there is a /div. The elements that come in such pairs modify the material between their tags.

      Here is a link to a minimal HTML page.

      Here is the code for that page:

<html> <head> <title>Your Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="z.css" /> </head> <body> <div style="font-size: 36px; line-height: 40px;"> <center>This is a sentence.</center> </div> </body> </html>

      There are a few things to notice in this code. The html element has an end tag that must be the last thing written into the file. The html start tag must be the first thing in the file. That is what makes it an HTML file. The head element also has an end tag and its end tag must appear in the file before the body element. The body element also has an end tag. All of the material that you want to be visible on the page must be encoded between the two tags of the body element. The vast majority of elements that you write will be in the body of the file.

      The head element contains the title element and a few other things. For now, it is important to know that the cascading file sheet will not influence the rendering of the page unless <link rel="stylesheet" type="text/css" href="z.css" /> appears between the head element tags. Notice that z.css (the cascading style sheet) is referenced at the end of this line.

      Now consider this somewhat less minimal version of the minimal HTML page. You will notice that the background has changed from white to a background created in Gimp, the open-source image processing software. The background changed because body element's start tag includes an additional specification: class = "bgG". Background letter G is defined by z.css and you can change gbG to bg5 or to anything from 0 to 9 or A through G. The cascading style sheet provides 17 backgrounds called bg0 through bgG. The hexadecimal numerals (used for colors) are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F; but the css file is not restricted to any particular set of characters for naming backgrounds.

      A second thing to notice about this less minimal version is that the sentence at the top of the page has multiple spaces between some of its words. To see how this is accomplished, view the codes and see how an element beginning with "&" is used as extra spaces. This element does not need an end tag to help enclose something. It is a simple sign to the browser indicating the additional placement of a space.

      The third and last item I would like you to notice about this file is the method used in HTML to make a comment that you can write and read but the browser does not render on the web page.

<!-- This text is not seen. The string above that includes an<br /> exclamation mark creates the start of an unseen area.<br /> <br /><br /> The string below that includes ">" marks the end of the<br /> unseen area. -->

      None of the characters in the text area box above are visible unless you view codes.

      Now, for a simple text page.

      Having clicked on the link just above, it's time to look at hyperlinks:

Now, for a <a href="z2.htm"> simple text page</a>.

      The file name of A Simple Text File is z2.htm. Only the file name is needed in this link because the file is in this directory (the same directory that this file you are reading is in). If the link is to a more remote location, something more is needed. Do you remember this sentence?

The .css file is not intended as a website page, but you can see it <a href="http://futurebeacon.com/fb0.css ">here</a> as a text file.

      In both cases, you can write any words you like between the <a href="ADDRESS"> and the end tag </a>. Whatever you write between these tags will be underlined. That is the indication to the reader that what you write is a link. If the text you write is a string of pace elements, the link will look like this:

            

      There is another class of link that I use that does not underline the words between the tags. This kind of link is used as indentation areas at the start of most paragraphs on this website. In those links, the word between the tags is a string of space elements. That's why they look like indentations. The elimination of the underlining is accomplished by using another class of link defined by the cascading style sheet. By viewing the codes you will see that class="m1" is added to the code near the beginning.

      The forgoing information (which includes a couple of other files that this file has linked to) is what you must have to put up a text website. The functions that remain include pictures, the placement of text and pictures in absolute positions (as opposed to placing them in the next place to the right or the next paragraph down), the inclusion of pictures that are themselves links, the inclusion of videos and a few miscellaneous matters like the following:

      Most of the still-picture files on the Internet have names that end in .jpg or .gif but all of the still pictures used in this tutorial have names that end in .png because the .png format is not owned by anybody who might ask you for a royalty when your company is large. You can forget about all of those financial and legal issues (even if your cameras do not produce .png pictures) by converting them to .png files in Gimp, the photo processing software I mentioned earlier. Here is your basic image display element:

<img src="flag.png" alt="Flag" width="150" height="100" />

      Here is how it is displayed:



      If, for any reason, the picture is not displayed, the word "Flag" is displayed instead. That is the function of the specification alt="Flag".

      Here is a slightly more elaborate picture display that provides a black border around the picture:

<img src="piano.png" width="156" height="160" border="2" style="border: 2px solid black;" alt="Piano" />

      Here is how it is displayed:



      Here is web page where text areas have a variety of backgrounds inside each other.

      The page you just returned from has the color of the outside area specified in the body element with this code:

body bgcolor ="#8CCC88       The inside color was specified in a div style this way:

background-color: #FFFF00;

      There is a pattern to the color codes. #FF0000 is red. #00FF00 is greeen. #0000FF is blue. Each primary color (red, green and blue) can take on any one of 256 hexadecimal values between 00 and FF. #000000 is black. #FFFFFF is white. Any code that has the same number for each of the primary colors is some shade of grey, like #9A9A9A. Google offers many links to color charts so that you can get the official HTML color code for Teal, for instance.

      Now let's take a look at a picture that is a link. Please click on this picture of a plane: Below, the text area shows the code that makes this possible:

<a href="http://www.wired.com/autopia/2010/08/piaggio-p180-business-airplane/" target="_blank"> <img src="plane.png" width="243" height="160" border="2" style="border:2px solid black;" alt="Plane" /> </a>

      This code may seem complicated at first glance, but it is merely a link with a picture display element written where you would normally expect a text description of the link.

      The layouts so far have been simple. If things get complicated, you need absolute positioning.