Something I've noticed in my stats, having posted the odd article or two on basic html/css, is the number of searches which land people here, asking for really basic advice. How to apply a background image, what are the "proper" sizes for headings (any bleedin' size you like; so long as it's contained in heading-tags, and looks like a heading), even a few asking how to create the document in the first place. Some of them, judging by the phrasing, are getting a little desperate. Phrases like "for dummies" and "jargon-free" appear now and again. I sympathise.
One of the drawbacks of using the intertubes as a learning tool is having to sort out, without aid from a teacher, the dross from the good stuff, without even, to begin with, any knowledge of the correct terms to search for. Google for the solution to some problem or other to do with browser-incompatibility for instance, and you're more likely to find outdated solutions for similar problems affecting a now-outdated version of Internet Explorer (just for instance, but IE does throw up more than its fair share of those problems) back in 2007, than you are to find your needed solution.
And if you're a newbie, and don't even know the precise terms you should be looking for? You find yourself staring at an internet message board full of people talking about methods and terms—that you were thinking yourself clever for having worked out just the day before—being "deprecated" or just plain wrong, posting snippets of code that may or may not be good, but you wouldn't know how to apply them if they are, and, all-in-all, seemingly assuming a huge amount of basic knowledge on the part of their readers. Oh, and the ubiquitous car-park-attendant type, who always shows up to tell the originator of the thread that "This question was answered on this thread [insert plain-text url here] way back in 1996. Why the hell didn't you do a search before wasting our time?"
To that end, I've set up a (one-page, so far) website, so as to give a working example. (And where this article will be cross-posted, with a few edits and minus the preamble, to my shiny new site's homepage.) Graphically it's on a sort-of-1970s theme—because I felt like it—and at the moment the main content consists merely of a big box with some writing in it. But, if you're taking your first few steps in this site-building endeavour, that's really all you need.
Basically, over the course of a few (or many—we'll see how it goes) posts, I'm going to discuss how I created that site, starting with a blank text-document, what decisions I took and why, what stumbling-blocks I came across, and how I coped with them. It may be a plain old box with some text in but, believe me, it's quite complicated enough under the hood, to give an idea of the process. And along the way I'll discuss such generally-related matters as spring to my mind. If anyone wants summat discussed that I seem to pass by, feel free to ask. And I'll feel just as free to say "I don't know," though I'll probably try to find out first.
Oh, and while it's possible to do all this in a very basic editor like Windows' Notepad, I really recommend getting a more advanced editor, like Crimson Editor (my own choice) or Notepad++. (Which are both freeware, by the way.) If nothing else, you'll be glad, at some point, of access to an "Undo" function which remembers more than just the very last action you did.
And so, Gentle Reader, let us begin at the beginning, with all the boring stuff you have to do before playing around with the graphics, font-styles and so on. You need to create an html document, and it needs to be UTF-8 encoded. (Other formats are available, but UTF-8 will do nicely, thank you.) In Windows, this is easy.
- Open a new Notepad document.
- Click File→Save As…, and select "All Files" in the "Save as type" box.
- Type index.htm in the "File name" box. From the "Encoding" drop-down, select "UTF-8," and save it into your "Site" folder. (A site's home-page file should always be named "index." I have no idea why, but it's a thing.)
- Click Save, and save it to your "Site" folder.
On a Mac, apparently, you can do this, though I can't vouch for it, being a Windows user:
- In TextEdit, select all the text. (Don't know if this means you need to type a few random characters, just to have summat to work with. If so, you can delete them when their job's done, no worries.)
- Convert to plain text: Format→Make Plain Text.
- Save-as… choose "UTF-8 character encoding" from the "Save As" dialogue.
I'm assuming that somewhere during that process, you'll be given a chance to name it and give it a .htm extension.
Linux users, you're on your own. Sorry, I tried googling it, but ran into the good old geeky-jargon barrier. And I'm not re-installing Ubuntu just to find out.
If the worst comes to the worst, leave a comment, and I'll mail you a bunch of ready-formatted empty files which you can copy ad infinitum.
So, anyway, you've got your web-page. If you double-click it, it should open in your default browser, and you'll be presented with a large blank, white area. And probably a security warning, if you're using Internet Explorer; because apparently a file you made yourself on your desktop is more of a security problem than the thousands of remotely-hosted pages out there on the web. No, I don't get the logic of that either. Just click "Allow."
Now do the same again, but name the new document CommonStyle.css instead of "index.htm." Then make a few copies of that, as you'll need them later, and it's easier to have ready-formatted copies than to keep going through the above rigmarole. In fact, you'll need one soon, so rename one of the copies CommonStyleIE.css. Then stick the spares somewhere in another folder for now.
Now you need to create a bunch of sub-folders in your Site folder. Create one named Files. Open that, and create one inside it named Common. Open that one and create two more inside it; one named Pics and the other named Styles. Inside that one, create one named Fonts. Cut and paste your two .css files, from the top, Site, folder into the Styles folder.
Now open the index.htm file in the text-editor of your choice. You're going to put something on that blank web-page. Don't get too excited though; it won't seem much.
And now I'm going to drop a bunch of code on you. Don't worry, I'll go through it afterwards, line by line. Ready? Here tis:
<!DOCTYPE html> <!-- saved from url=(0014)about:internet --> <html> <head> <title>The Name Of Your Site</Title> <meta charset="UTF-8"> <link rel="shortcut icon" href="Files/Common/Pics/icon.ico"> <link rel="stylesheet" type="text/css" href="Files/Common/Styles/CommonStyle.css"> <link rel="stylesheet" type="text/css" href="Files/Common/Styles/Fonts/stylesheet.css"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="Files/Common/Styles/CommonStyleIE.css"> <![endif]--> </head> <body> Hello world! </body> </html>
That's what you're going to put into the index.htm document you opened in your text-editor. The first line…
… is called the doctype statement, and it tells the browser what language to expect; in this case, html.
The next line…
<!-- saved from url=(0014)about:internet -->
… is temporary, for while you're working with the page on your hard-drive. It’s called the "mark of the web," and it tells Internet Explorer, when you check the page in that browser to find out what the inevitable IE-related problems are, that it doesn't need to display that damned security warning every time. It must be placed immediately under the doctype. When all is done, and you put the finished version of the site online, you'll delete that line.
Then we have two simple tags:
The first tells the browser that this is the start of the document-proper, and the second announces, to it, the beginning of the head-section. This is where all the instructions to the browser about how to display the content go. Beginning with…
<title>The Name Of Your Site</Title>
…which places your site's name in the browser-tab, where, if this statement is missing, the url of the page will appear instead. Which is, well, ugly and not very informative to any user looking at a load of open tabs.
Then we have…
… which, as you've probably guessed, tells it that the document is UTF-8-encoded. A subject on which, I have to admit, I'm pretty hazy. Just make sure that the charset statement matches the document encoding, and you'll quite probably never have to look any deeper into it yourself. I'm given to understand that UTF-8 is becoming pretty-much standard for text-based web-documents, so I just go with that.
And now we come to the first bit you might find actually interesting, as opposed to merely necessary-to-know.
<link rel="shortcut icon" href="Files/Common/Pics/icon.ico">
That's the instruction which places that little graphic in the browser-tab and in the bookmarks, if (when!) people bookmark your site. We'll get around to making that later, when we're sure what kind of colour-scheme it's got to match.
Then we have the links to two style-sheets, one of which has yet to appear, and one we made earlier…
<link rel="stylesheet" type="text/css" href="Files/Common/Styles/CommonStyle.css"> <link rel="stylesheet" type="text/css" href="Files/Common/Styles/Fonts/stylesheet.css">
They'll contain virtually all of the style information for the site. From the size and colour of fonts to the positions of graphics, to the width of borders… all the fun stuff that makes the pages look (hopefully) good. We could put all that information right here in the head of the document, but then we'd have to put it in the head of every page; which is wasteful of both our time and the user's bandwidth. The reason we put them in a sub-directory of "Common" is that those two documents will inform the browser of (most of) the style-instructions for every page. Talking of "most of," though, the next one…
<!--[if IE]> <link rel="stylesheet" type="text/css" href="Files/Common/Styles/CommonStyleIE.css"> <![endif]-->
…is a bit special. The top line tells the browser that it should only consult what follows if the browser accessing the page is Internet Explorer. The link in the centre line, you can see, is to the other style-sheet we made. And the bottom line tells it that it's reached the end of the statements which that instruction applies to. Basically, if you followed that, we've told the browser that the "CommonStyleIE" sheet applies only to IE. There are ways to target other browsers, but IE's refusal to obey the same instructions other browsers do is legendary, and this particular targeting-statement is the only one you can almost be certain you'll need.
Which brings us to another point, though I'll get into it more later on, when we start doing stuff with the style-sheets. CSS stands for "Cascading Style Sheet," and, just as the word "cascading" implies, it works from the top down. Put in an instruction to make an element yellow, at the top, and a conflicting one to make that element green, further down, and the one further down will always be the one which is acted upon. (Basically, the browser is gullible: it believes the last thing it was told on any given subject.) Which means that the IE style-sheet link should always be further down the head of the page than the main sheet. Because, very often, we need to tell IE to do the same thing in a different way, or give up and apply a completely different style for IE, as the one used in other browsers just can't be done in IE.
But, anyway, with the next tag…
…we close the head element of the document. There's lots of other stuff we could put in there (google "meta tags" for hours of fun and tons of rather dubious and contradictory claims about SEO), but that's the basic stuff we need to have.
Oh, and about that <head>…</head> thing, and tags… Except for inside style-sheets, all instructions to the browser are placed in tags, formed by the less-than and greater-than signs, used as brackets. To tell the browser that it's reached the end of the section which that instruction applies to, we use a closing-tag, formed by the same two signs, with a forward-slash immediately following the less-than. So, to take a simple one, here's the underline tag: <u>and all text after it will be underlined until we reach the closing tag.</u> There are a few exceptions to this closing-tag rule—things known as self-closing tags—but we'll get to them later, when and if they crop up.
So now we open the body tag, where all the visible stuff will happen! Can I get a hallelujah?
<body> Hello world!
Skipping the "hello world" bit for a moment, we then close the body and the html sections…
Now all that remains is to save the document, and take a look at it in the browser. If you still have it open in the browser, just click refresh. If not, double-click "index.htm" again.
Wahay! Right up there in the top left-hand corner it should say "Hello world!" Notice, too, that the browser has translated the plain-text paragraph-break into a space. Except when given an instruction to do so, by a special tag, nothing we do to underlying plain-text has any effect on what appears on the page. If you want to affect what happens in the browser screen, you have to tell the browser what to do, in a language it can understand. The one we're going to be using, for instance—html. With some css to make it look nice.
First, though, we have to go digging into some boxes, and perhaps—depending how much wordage the box-digging takes up—play with some graphics. Which is what we'll be doing in the next instalment.
You may use these HTML tags in comments
<a href="" title=""></a> <abbr title=""></abbr>
<acronym title=""></acronym> <blockquote></blockquote> <del></del>* <strike></strike>† <em></em>* <i></i>† <strong></strong>* <b></b>†
* is generally preferred over †