Posts Tagged ‘background images’

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 »