Archive for the ‘building a website’ Category

So far, in this "How to build a web-site from scratch" series, (all of which, by the way, is cross-posted on the web-site we're building) we've created the basic structure of the site (although it may not seem like it, if you're new to this), we've created a bare-bones page, and added a background image to it. We've also, along the way, discussed CSS, and how it should be used to add style to the page, but not to add information. Now we're going to look a bit more deeply at the structure of a web-page. And we're going to be covering, or at least skimming, a fair number of ideas in this episode, so let's get on with it…

Structure is created by HTML, and takes the form of boxes. Plain, boring, rectangular boxes. Everything you see on a web-page is either a box or is in a box; or, more often, is in a box within a box. The first one, we've already looked at: the body. That one's a bit special, because—unlike nearly everything else in a page, it's expanded, even if there's nothing in it. It automatically fills the entire browser-window.

The next level down, nested inside the body, is known as a div. Short, I assume, for "division." At the level we're going to be working with today, divs define the main areas of the window: the header-area where the main title goes, the bar, or maybe a side-bar, where the navigation buttons live, the main-content area where the, erm… main content sits, and the footer where stuff like copyright notices, stat-counters and so on, go. They can also sit, nested, inside other divs, creating little "style-islands," with particular styles targeted only at content placed within them, or as visible boxes with particular border styles, backgrounds, and so forth. We'll be looking at at least one application of that later. (more…)

Read Full Post »

And so we come to the second of my "How to build a website from scratch" series of posts. Last time, we covered how to create the document—the "boring" bits—and the supporting folder-structure. And I'm going to start with an addendum to that…

When explaining how to create UTF-8 documents, I left Linux-users in the lurch, somewhat, saying that "I tried googling it, but ran into the good old geeky-jargon barrier." So thanks to Ubuntu-user Ron for this bit, and I'll quote him verbatim:

  1. Open a terminal (haha) and create a web directory in your "home" folder:
    • mkdir -p www/files/common/pics
    • mkdir -p www/files/common/styles/fonts
      (Note: the "-p" switch lets you create all subdirectories in one go)

  2. Create the files
    • touch www/index.html
    • touch www/files/common/styles/CommonStyle.css
    • touch www/files/common/styles/CommonStyleIE.css

  3. Open "index.html" with your favorite (insert flame war here) text editor to enter the HTML code.

Which—if you'll allow me a short digression—led to me looking for a way to create multiple directories (folders) and sub-directories in one go, in Windows. Turns out you can do it with a batch file, but you need to put in complete folder-paths, from C:\ onwards. Much easier, is this nice little portable freeware dingus, Text 2 Folders. Later, I might see if I can find a way to create multiple files in those directories. That'd be nice!

(Also, notice that Ron created a document with the .html extension, rather than the .htm that I use. Either is fine, and there's no practical difference between the two. I began my page-code-deciphering experience by trawling through the source-code produced by M/S Word's "Save as web-page" option (don't try it—it's awful), and my habit of using the shorter version comes from Word's use of that form.)

But back to the topic in hand… (more…)

Read Full Post »

Building A Website: Part One

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?"

So, chatty preambles now done, this is the first of a series of posts on a theme of "How to build a web-site from scratch," in which I'll assume that the reader has absolutely no prior knowledge. It won't be a fancy web-site—no JavaScript, no fancy drop-down menus which need millimetre-perfect mouse-control to navigate, no pop-up widgets for canvassing readers' opinions or inviting them to join the site; it won't offer, come to that, a way to create a site which can be joined. Just two or three web-pages, interlinked to form the nucleus of an ordinary site. Partly because I happen to dislike (over-use of) all those widgety things, and partly because you need to learn to walk before you can run; and trying to learn to breakdance before you can even take three steps is, frankly, silly.


Read Full Post »