HTML Guide

Lesson 10: So What Now?

So you've created a layout. You've created a menu. You know how to make links, format text and make lists and tables. That's all fine and dandy, you think, but when will you have your site on the Internet for everyone to see and admire so you can be all popular?

Well. Most importantly, you need to make some content. Content is the heart and soul of any website; nobody will care about your pretty layout if there is nothing of interest on the site. For a guide on the types of content you can have on a site and which ones make it worth looking at and will get you visitors, see this page; for a guide on actually making your content, try this one.

Now, presumably, as soon as you start making more pages, you will notice how inconvenient it would be to have your menu on every page and need to edit it on every page every time you update it. That is completely true, which is why there are various ways to get around this. Before you start to consider that, however, I recommend you find a host. A host is basically an external computer where you can upload your website files so that people can access them from the Internet. When you're starting out, you should find a free host, preferably one of those that have no forced ads, since everybody hates advertisements and they seriously detract from the professional appearance of your site. I can't really have any personal recommendations, but here you can find a list of free web hosts with no forced ads where you can view their features and reviews and pick one that seems good. Go with one that lists either PHP or SSI (or both) under Scripting; that won't be hard, since all the ones on the first page have at least one of them. When you have gotten a host, you should upload all the files your site uses, including images, .js files and so on, to the host.

Includes

The basic idea of the method to avoid having to edit the menu on every page when you change it is that instead of having the menu on every page, you have it in a separate file and then include that file on every page. This does not only apply to the menu, of course; you can do this with any part of the page at all that is always the same. My pages include first a short file with everything that goes above my title element, a longer one with the stuff that goes after the title element but before the actual content starts (i.e. up to and including the <body> opening tag), and finally one with all the stuff that goes below the actual content. Basically, you first take out all the HTML that you are sure you want to be the same on every page and paste it into a separate file which you then save (with whichever extension you like - I like to use .txt). You do not need to close any tags or add an <html> tag or anything here; an included file is essentially pasted into the page before the user's browser ever receives it, and they will never know that this HTML was ever in a separate file. It's only separate for your convenience when editing it. You can also include however many files you like.

After you have taken out all the HTML that will be the same on every page, you can use either SSI or PHP, depending on what your host has and whether you think you will in the future have a need for using other complex server-side scripts (which you can do with PHP, but not with SSI), to do the actual including. (Technically there are other scripting languages that can also include files, but I won't be going into them since they're not nearly as common, especially not for free hosts.) Assuming that the file is called filename.ext, the SSI code to include it is  and the PHP is <?php include('filename.ext'); ?>; you simply place the appropriate code where the menu (or whatever else was in your file) used to be. Finally, you must usually resave the page with a new extension, .shtml in the case of SSI or .php in the case of PHP.

In case that was confusing, a very barebones example. Imagine this is a file called page.htm:

<!DOCTYPE html>
<html>
<head>
<title>A page</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="content">
<p>This is some content on the page.</p>
</div>
<div id="menu">
<p>Imagine this is a menu.</p>
</div>
</div>
</body>
</html>

Now, let's just say you can live with typing the doctype and the html and head opening tags on every page, but want everything else other than the content itself to be included. Then you would cut out two sections of HTML to make into two files. This could for instance be top.txt:

<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="content">

And this would be bottom.txt:

</div>
<div id="menu">
<p>Imagine this is a menu.</p>
</div>
</div>
</body>
</html>

Then the new page would be page.shtml if using SSI and look like this:

<!DOCTYPE html>
<html>
<head>
<title>A page</title>
<!--#include file="top.txt" -->
<p>This is some content on the page.</p>
<!--#include file="bottom.txt" -->

Or, if you were using PHP, it would be page.php and would look like this:

<!DOCTYPE html>
<html>
<head>
<title>A page</title>
<?php include('top.txt'); ?>
<p>This is some content on the page.</p>
<?php include('bottom.txt'); ?>

Whichever way, the actual page when displayed on the web would look exactly the same as page.htm did before. Hopefully you get the picture.

You may notice that if you now go and try to view the page in your browser like you've been doing, it probably won't work. That's because odds are your computer does not have SSI or PHP. You can just upload the files to your host and view them there to see how they look, or if you want to be able to do it on your computer, you'll have to install special programs. If you're using PHP, you'll want to install Apache and PHP; this collection has both of them and more in one package. Again, if this is confusing and annoying, you don't need to do that; you can just make a habit of uploading everything to your host immediately.

Closing Words

Once you have a host, are using includes and have written a bunch of content, it is time to get some publicity. Put a link to your site in your signature at forums, maybe post in advertising forums where they exist, and ask other webmasters for affiliation (as long as you've read their requirements carefully and are sure that you fit them!). Be patient; your site won't get known or popular right away. Be open to feedback and constructive criticism; it will probably help you improve.

To make a good webmaster, you must be dedicated. Having a website can't just be a temporary interest that fades away after a couple of months; you need to have a flame to keep you going.

Don't be afraid to be creative and come up with your own ideas. Originality is good. Pokémon is an interesting fandom in how popular it is for people to create websites about it, but that means we already have plenty of them; we don't need to see all the standard content one more time.

I have not taught you everything there is to know about HTML and CSS. You can go prowling around the web yourself to find out more, either by viewing the source of pages that do something interesting that catches your eye, asking around on forums or finding good tutorial websites. (Please find some good ones, though - as a rule, if it tells you to bold things using the b tag or tells you how to change scrollbar colors, chances are it is not.) You should strive to use valid HTML and CSS, so run your pages (and CSS) through those every now and then. There are also complete references for HTML tags and CSS properties which you can browse through.

Use default HTML elements when they're appropriate - if you have update headings, for instance, there is no reason for them not to use heading tags like any other headings. (You can modify how these particular headings look by either having a container div around the updates, say #updates, and then defining properties for #updates h2 or whichever headings you're using, or by giving the update headings a class, say .updateheading, and defining properties for the class.)

And please read my website tips. Please.

Previous lesson

Page last modified April 17 2022 at 19:42 UTC

Comments

No comments on this page as of yet.

Post comment

Inflammatory or off-topic comments will be deleted; please go to the guestbook for discussion unrelated to this page. You can use BBCode (forum code) to format your messages.

[b]Bold[/b]
[i]Italic[/i]
[u]Underlined[/u]
[s]Strikethrough[/s]
[url=http://www.dragonflycave.com]Link[/url]
[spoiler]Spoiler[/spoiler]