Ian Swenson .com » This Site

On Making a Web Site – HTML / CSS Layout

ianswens — Thu, 31 Jul 2008 03:32:12 +0000

I know, I know. The always intimidating coding part of making a web site. The biggest reason people use the WYSIWYG web editors is because they gloss over the coding. Why code if you can just slap some images in Front Page or DreamWeaver and it looks fine?

The reason is because you don’t have much control over your web site if you use a WYSIWYG editor. It makes it difficult to duplicate pages, fine-tune details, and provide consistency all the way around. Plus, if you’re skilled enough in the editor to actually overcome all of those deficiencies, you spent as much time learning to do that as you would learning HTML and CSS.

So that brings us here. It’s time for us to design the layout of our new web page using HTML and CSS. I’m going to have three parts for this tutorial. First, we’ll talk about a little HTML, its basic structure and what you’ll need to know. Second, we’ll look at styling that with a bit of CSS and I’ll explain its basic precepts. Last, we’ll put all of that to use and create a basic template page.

HTML Elements

Chances are you’re already at least a little familiar with HTML. I’m not going to get too much into the nitty-gritty details here (really, do you need to know it stands for HyperText Markup Language?), but you do need to know a few basic rules.

First of all, for the most part HTML works on opening and closing tags which surround content. There are a few exceptions to this, but we’ll get to that if we need to. Here is an example of a paragraph in HTML:

1	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Now, nevermind the phony Latin, that’s just so you focus on what matters: the tags. That’s right,

and

are called tags. More specifically, together they comprise a paragraph element composed of the opening

and the closing

. The p stands for paragraph and the forward-slash means close this paragraph. Everything in between — the lorem ipsum… — is affected by the paragraph element.

Here is a clearer example:

1	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

The element is for bolding text. Anything inside the strong element will be bolded on a web page, like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Now the important thing to realize is that until you close a element, it is still open and affecting everything within it. So if were to do this (semantically-incorrect) code here, it would bold everything inside it:

1 2 3 4 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Pellentesque ipsum urna, dictum vel, porttitor at, luctus a, arcu.

Donec turpis. Duis molestie felis at magna. Etiam vitae lorem.

That means all three paragraphs would be bolded. If I forgot to include the closing strong tag, the browser (IE/Firefox/whatever) will assume you meant to close it at the end of the page. I have occasionally seen news stories using italicized text and then forgot to include the closing tag, so the rest of the article was italicized, making it difficult to read.

Remember to close your elements.

HTML Structure

Here is a sample, extremely basic HTML page:

1 2 3 4 5 6 7 8 9 10 11 12
Basic HTML Page
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Pellentesque ipsum urna, dictum vel, porttitor at, luctus a, arcu.

Donec turpis. Duis molestie felis at magna. Etiam vitae lorem.

First of all, notice that all of the tags are lower-case and all close. This is referred to as semantic markup. That means it is written in a way that all browsers are sure to understand and not display incorrectly.

Second, the code is organized by tabs. This is not strictly necessary and is purely on a personal basis. You could even go with no spaces or tabs between elements (and places like Google do). However, good practice is to consistently organize your code so that it’s easy to find and change things after days or months of not looking at it. Plus, if you work on web sites with other people, it’s a good idea to come up with some standards for organization.

I personally use tabs because even though it looks like five spaces — good separation for the eye — it only takes one character for a tab, and thus makes a smaller file than if I used two spaces. And file size is something you need to care about for the internet.

Now, for specifics on the example.

The html element tells the browser what language it’s dealing with. There are more specifics you should include with it, but for now this will suffice.

The head element is where you include all of the things that affect the web page, but don’t actually show up in it. This would include links to external files for styling or scripts or for the title, as in this example.

The body element is where all of the display content goes. This is the actual web page, if you will. Inside the body are three paragraph elements which contain the text for the web page.

I also included a comment. Comments are for you to make notes on your coding, help organize, or to communicate between you and anyone else looking at the code. Comments don’t show up on the web page, so use them to your heart’s content. Start one with and end it with ––>

If you’re reading this via a feed, there are more pages on the web site. If you’re already on the web site, IGNORE THIS!

On Making a Web Site – Initial Photoshop Design

ianswens — Mon, 21 Jul 2008 20:29:45 +0000

So now you’ve got all your tools set up — you have a test platform for Wordpress, a graphics editor, and everything else you need to get going with web design. You’ve also come up with a basic layout and have decided what you want to present.

Next to actually deciding what you want to accomplish, this is the toughest step. You need to figure out what your web site should actually look like. Yes, this takes creativity, but more than that it takes perseverance. It’s hard to be struck by inspiration when you need to be. It’s much better to just suss it out and let inspiration strike organically in the process. I’ll illustrate this as we progress.

I am not a very creative person. My strength lies in taking something that someone has created and enhancing it. I can play another’s music. I can strengthen another’s writing. And I can assemble another’s artwork. You could say that I’m a good editor. I’m not good at coming up with that first step, but I excel at taking it to a polished end. I mention this to show you how you too don’t have to be an artist to make excellent web sites.

Okay, preamble over, let’s get going on the tutorial. I’m going to show you how I began work for this web site in Photoshop (this will be Windows Photoshop specific, sorry GIMP users).

I usually start working on a web site in Photoshop first instead of making a mock-up in html/css. I’m comfortable in Photoshop and usually inspiration will visit me and while I’m working graphically and change my html layout in the end anyway.

For this site I tried a couple things before I ended up with this design. This is normal. I usually try a couple ideas, see if they work or fail and then overhaul, then tweak. It was no different here.

If you’re reading this via a feed, there are more pages on the web site. If you’re already on the web site, IGNORE THIS!

On Making a Web Site – Tools

ianswens — Wed, 09 Jul 2008 05:25:35 +0000

In the last article of this series I talked about coming up with concepts about (1.) what you want your web site to accomplish and (2.) what you basically want it to look like.

Just as important as those two points are the tools you use to construct your site. Most people go with some sort of WYSIWYG (What You See is What You Get) editor like FrontPage or Dreamweaver.

Poppycock, I say!

You have much more control and can exact much more robust designs if you (*gasp*) hand-code. Yes, that means you have to learn a bit of HTML/CSS/PHP, but that’s where I come in. Future entries in this series will help you with those languages.

HTML, CSS, PHP, Javascript

The only program you need for the following is a text editor. Unlike the rest of the web publishing world, I work off a PC, which means my tutorial will be exclusively geared toward Windows. In Windows you have two basic text editors: Notepad and Wordpad. Notepad should never be used. It’s horrible. Wordpad is always your better option because it has less text formatting issues and has better search/replace features.

However, I recently discovered Notepad++. It performs GeSHi-style color formatting and is superior in tons of other ways while still being lightweight and free. Get the installer here (at time of this article the file is npp5.0.Installer.exe).

If you’re reading this via a feed, there are more pages on the web site. If you’re already on the web site, IGNORE THIS!

On Making a Web Site – Getting Started

ianswens — Mon, 07 Jul 2008 21:39:24 +0000

This is the first part of an extended series I have planned to show you step-by-step how I made this site. That means we’re going to talk HTML, CSS, Wordpress, PHP, Photoshop and more. Of course this tutorial is going to be highly individualized since I’m very particular and it is, well, about my site.

Now, this doesn’t mean that I want you to wholesale rip off my design and use it on your own site. But I hope that you could use this tutorial as a springboard for your own ideas and methods.

So, let’s get underway!

Does your web site look like this?

There are many reasons why this is a bad web site (which I found via Web Pages That Suck) including being out-dated, being hard to navigate, and having poor readability. But the biggest reason this web site sucks is that it’s ugly!

Chances are, your crappy web site is no where near as bad as the above. If it is…Yikes! Now there are many excuses why to stick with your crappy web site. Many people feel attached to it because “I made it. It’s mine.” But think how much happier you’d be if the web site you made looked great!

If you’re reading this via a feed, there are more pages on the web site. If you’re already on the web site, IGNORE THIS!

Preliminary Redesign

ianswens — Sun, 29 Jun 2008 05:08:45 +0000

Aha! I told you so.

It may have taken me a couple months, but it’s been done. I’ve redesigned the website to bring it more in line with what represents me as a designer.

It is not, however, done yet. I still have several design elements I want to add, and I certainly have some I want to change. Not only that — as I’m sure you’ll notice if you care to — none of the side links really go anywhere. I’ll get to that.

As Clayton Bennett said, “I am a man possessed!”

On a side note, if you’re an RSS subscriber, you’ll need to resubscribe because of some behind-the-scenes changes I’ve made. I realize this doesn’t help you much if you only read the feed, but still.

Grrrr …

ianswens — Sun, 01 Apr 2007 22:09:03 +0000

Blast that JavaScript.

I made this whole nifty post (well, half really) about graceful degradation and my new script doesn’t degrade. Dagumit.

At least the new gallery looks nice. I’ll try to find more pictures to add shortly. Maybe a couple which actually contains me. Not that anyone likes to look at me or anything, but I’m a fan of terrorizing the public.

Now I’m going to have to find a div hiding script that gracefully degrades. Let the search begin.

Updates Abound! (And Graceful Degradation)

ianswens — Sat, 31 Mar 2007 00:48:12 +0000

Wow! Never in the history of the world …

Okay, I’ll skip the theatrics. I’ve updated two sections so far, and two more to come. I’ve added five “new” songs on the music page. They’re not new to me, but they might be new to you. I’m very critical about stuff that I create. I’ve actually composed 14 songs for this “album”–I’m actually doing air-quotes each time I do those–but I only “like” two of them. The posted five are ones I can “deal” with. The remainder are crap. Or is it, “the remainder is crap?”

I also posted a link to a website I made last January for my first and only anthropology class. You can see it on the portfolio page. I like how it turned out visually, and the content’s not too bad neither. It’s about the internal reasons for the decline of the Aztec empire. It’s not in depth or super-scientific or anything. I was just trying to get a good grade in the class (which I did).

I also have two other planned updates, but they require a teensy bit more time than I have at the moment. I’m going to change the gallery page to incorporate flash (from the folks at SlideShowPro). I’ll also add a second work of fiction and a little piece of JavaScript to be able to hide divs for ease of viewing. Yay!

I normally try to stay away from JavaScript because I’ve had it engrained into me that usability is more important than flashiness. If 5% (it’s smaller, I’m sure) of users have JavaScript disabled, then they (A) won’t be able to get full functionality from a site and (B) will leave it. So all these articles I read on web design, SEO, and at places like A List Apart strongly suggest that reliance on JavaScript is a bad thing.

But my opinion is starting to shift a bit as the philosophy of JavaScript is subtly shifting around the web. For the past couple of years designers have been working on websites “degrading gracefully,” as they put it. What that basically means is that if someone is browsing with say, JavaScript disabled, or images disabled, or is on a text-only or mobile browser the website should function just as well for them as for smart users like me who use Firefox. So if I have a nifty drop-down menu system that relies on both CSS and JavaScript, every link should be accessible for any of the users mentioned above.

Since this is now being recognized as a good thing nearly universally, that means smarter people than me are writing scripts and such that I can use! I know next to nothing about coding (I can modify someone’s PHP or JavaScript, but that’s it), I’m at the mercy of the web philosophy. So while I’ve been avoiding scripts for ages, now I’m coming around to their usefulness. So I’ll be able to use a nice JavaScript on the fiction page that’ll hide the stories you’re not currently reading. But if you’re, for some insane reason, reading my stories on your cell, they won’t be hidden from you.

That may or may not be a good thing.

Congratulations! It’s a Website!

ianswens — Mon, 28 Aug 2006 00:36:19 +0000

Going along with my masterbatory announcement on the front page, I’m congratulating myself for essentially finishing the website here in my blog. It’s been years in the wanting and a month in the making, but here it is: IanSwenson.com

I actually don’t have anything substantial to add to that besides noting that I will be adding and updating as time goes by. Hopefully by next spring I’ll be able to participate in CSS Reboot Spring 2007 to give the webpage a facelift that it does not need presently.

Well, enough said. Hope you, my rare visitor, are enjoying yourself.

Portfoliator

ianswens — Sat, 12 Aug 2006 20:32:15 +0000

I know this might get a little old, as keep writing new blogs as I finish with each individual page. I still like it though.

My portfolio is done. It includes the three actual websites I’ve created that have been published recently. I’m not going to count the ones I did when I was a teenager that probably aren’t still up, and were done well before a thing called CSS was popularized.

I also included the first index page I did for this website before I decided to go in another direction. I still want to work a photo of me like that into this webpage somewhere. We’ll see.

Gallery

ianswens — Thu, 10 Aug 2006 17:35:59 +0000

The gallery has just been finished. Well, finished with the photos I wanted to post.

I really haven’t taken that many photos on my own. Primarily, that’s because I don’t own a camera. Most of the ones I took that are posted here were taken on Roxy’s and my roadtrip down to San Francisco over Spring Break. I was allowed to use her amazing digital camera and I nearly filled an entire memory card just during the first leg of driving.

She has since been able to purchase her first digital SLR and she is having a blast with it. Hopefully I’ll be able to pony up enough dough to purchase her other one for my own enjoyment, and eventually be able to put up more photos in the gallery.