HTML – How To Make Life Hard!

html logoHyperText Markup Language.

That heading either bored you rigid or it grabbed your attention like a farmer grabbing a chicken by the throat. Yes folks, this is a post about writing code and building a website. Feel free to click away now and find cute pictures of bunnies!

WordPress users can build a website in minutes, it’s easy-peasy-lemon-squeazy! Everything you need is right there for you to play with, all you need to do is add pictures and words and tweak some of the settings to suit your tastes.

There are plenty of WCMS (Web Content Management Systems) on the internet such as WordPress and Joomla to name but a few….well, two actually. Hey, I’m lazy. Google it or check out Wikipedia for a list of WCMS and see what it means.  The basic premise is that a CMS will let you get on with the fun stuff whilst leaving all (or most of) the coding and boring stuff in the background where it looks after itself.

Before you start moaning my answer is yes, there will be a lot of abv’s and bizarre words. If you were writing this would you want to write Content Management System a whole bunch of times? Or copy and paste it over and over? I thought not. Let’s move on and see where this is going shall we? I promise we’ll get to HTML and all the fun stuff in due course.

Let’s use WP (WordPress) as an example of a CMS.

I like to think of WP as the Golden Child. In the past I’ve tried out Blogger.com and other less impressive blogging sites, but WP had more to offer, more flexibility, easier to use, easier to customise and so on. I didn’t need to bang my head against the screen to make my blog look nice. I waved my mouse about, wrote some words, added pictures and had fun. All the code was done in secret behind my cursor. WP did the hard part for me. Actually, that’s wrong. WP did the time consuming part for me.

Years ago I spent a lot of time teaching myself how to build websites. Mainly through trial and error and reading books but it was down to curiosity. I wanted to know what made a website look the way it did and work how it fit together. I built websites for a living until people stopped paying for the service and started using online templates and stuff like WP which were a much cheaper option. I don’t blame them, would you pay someone to design that cool neat stitching to the left of this box if you could use a free online service to do it in a fraction of the time?

Think of web design as the ocean.

WordPress and similar sites offer the user the freedom to enjoy having a presence on the world wide wait without diving beneath the surface and into the underbelly of the Deep Dark Code. This has some draw backs. WP users are limited to swimming on the surface and the rigid confines of the templates and user interface, eg their snorkel and flippers!

There’s not much you can change because without diving gear you can’t swim to the bottom and play with the treasure. So this can feel claustrophobic for Coder Divers. On the other hand, don some breathing gear and you can swim right to the bottom and build a website from scratch, using all the sunken treasure that litters the floor of the internet. The diver has a blank seabed where they can discover untold riches, well, maybe that’s pushing it but it does give them the ability to paint their masterpiece, right from the start they are in control and everything is changeable. Okay so I mixed diving and painting but you get the idea.

Ye Olde Internette

Ye Olde FacebookeBack in the day, when the internet was switched off at 11 and came back on at 8am, the web was a strange place. Pages loaded slower than glaciers, modems made that strange garbled sound like a Smurf being drowned and Flash was something dirty old men did in alleyways. I was fascinated by the language used to make websites. I would save web pages then play around with the code, pick it apart and see how I could change stuff.

No. I wasn’t a hacker! LULZ! I did learn a few tricks but I was never interested in that kind of thing. Hackers was an ace movie but I didn’t own a shiny blue leather jacket, bleach blonde hair didn’t suit me and I couldn’t think of a cool hacker name like ZeroCool.

I started out with a marvellous web design tool called Notepad. You will find this under Accessories on your PC. If you use a MAC, well, I don’t know what the equivalent is…pen and paper maybe? Only jesting. Notepad is a pure form of writing code. There’s no formatting, like MS Word, and no jumbled up menu bars to confuse you. Even though I moved on to Dreamweaver, which we’ll get to in a bit, I still wrote a lot of code in Notepad. I still use it for keeping notes because the files are small and open quickly.

Me, an expert? Don’t make me laugh!

Isn’t there a saying about how everyone is an expert to someone with less knowledge than you? Something like that. Well, I’m no expert on building websites. Honestly. I never got to grips with PHP (Hypertext Pre-Processor) or other stuff beyond HTML, XML, XHTML (eXtensible HyperText Markup Language) and CSS. In other words the basics. I had a flair for graphic design and creating simple but effective websites. I also had a knack for being able to tell what elements made a good or bad website, how they looked and whether they worked properly.

I guess it doesn’t take an expert to know this stuff, just a flair for design and an eye for detail. These days there are trillions of books on web design. Amazon will keep you busy for hours, if not days, with list after list of books that can teach you everything you need to know. But, and this is a pretty big BUT, to build a website you need to understand the basic fundamental principle behind every website – knowing that your website needs to be the same as every other website, yet different enough to keep a visitors attention, keep them coming back and just as importantly, to impress them enough to share that link.

I’m talking about the Mental Model. More of this in a bit.

My 1st Web Page!

I don’t have the file now but here’s a rough idea of the first web page I ever made in Notepad.

<html>
<head>
<title>Home Page</title>
</head>
<body>
This is my Home Page!
</body>
</html>

That’s as basic as it gets!

TIP: When you save a web page in Notepad, remember to name it properly.

You can call it whatever you like but replace the *.txt bit with .html or .htm (there’s really no difference) or your web browser won’t know it’s a web page. Save it wherever you like. I’ll cover file hierarchy in a bit. To see what it looks like just click that file and it will open in whatever web browser you use. Because you have saved it as an HTML file the icon for that file will be that of your default web browser.

To edit the file, Right Click it and choose Open With – then Notepad. You can work on your code then save. If you keep the web page open you can simply refresh the page to see any changes rather than open it again.

Learning is Fun!

Let’s dive in with some basic stuff shall we?

<html>   –   Always start your web page with this. It tells the browser that your code has started.
<head>  –   This bit tells the page what to do and how to do it.
<title>Home Page</title>   –    This bit is what appears in the browser bar.
</head>    –    This tells the browser that the instructions for that page have finished.
<body>    –    The main section of the page, what you see in the browser.
This is my Home Page!    –    First line of text.
</body>    –     The end of the main section of the page.
</html>    –    This tells the browser that the code has finished.

Using the / thingy tells the browser that the function or instruction has finished. So when you finish eating a sandwich your brain might receive a signal from your mouth like </eat_sandwich> and the maybe another one that says </chewing> so your mouth doesn’t keep flapping about for no reason.

There are lots of other tags you can use to make stuff stand out.

<strong>This is my Home Page!</strong>

or

<b>This is my Home Page!</b>

This will make the text bold.

<em>This is my Home Page!</em>

or

<i>This is my Home Page!</i>

This will make the text appear in italics.

or a combination of both:

<b><i>This is my Home Page!</b></i>

Do a quick search for HTML Basics and you’ll find any number of websites that can show you basic tags. Try this one: http://www.w3schools.com/html/html_primary.asp for a good list with explanations. It can be easier to think of HTML as similar to creating a document in MS Word. You use Bold and Italics and Headings but in HTML you actually need to type in those commands for that formatting to work.

Keep stuff Simple!

Think you’re ready? Wait! Don’t go anywhere just yet! I have an important tip that will save you time and lots of head scratching! HTML for Dummies will teach you lots of cool tools to play with but before you start you need to understand how to organise your files. I have a tidy mind. I like to keep things organised and that means I need to do a certain amount of planning ahead.

Say you want to insert an image into your web page. This can be done with a simple bit of code.

<img src=”doggyphoto.jpg”>

or

<img src=”doggyphoto.jpg” width=”500″ height=”350″/>

The “img src” means “image source” and the width and height are…the width and height of what you want the photo to look like. Say for instance you had a photo that was 900 pixels wide and 450 pixels high but you wanted it to look smaller on your page, you change the size to constrain how it appears in the web browser.

TIP: Just because you have resized the image size it doesn’t mean the file size is any smaller. I’ve found the best way to do this is resize the image in an image editor, Photoshop for example, and put the exact size into the code. That way you keep track of the size of your website and leave less room for browsers to make mistakes when presented with an original image and then a constraint placed on that image through code.

The way the image is accessed by the browser is important too. Take a look at this picture.

Pic 1

This is how you should keep your files. Everything should be in the right place. Try not to store everything in one folder because it will eventually look messy and make it harder to find the file or image or whatever you need. For example:

Pic 2

This is the contents of your “My Web Site” folder. As you can see the web pages and photos are mixed up together. A better way to organise this is to drag the photos into the “images” folder. Then when you want to add an image to your web page the code will look like this:

<img src=”images/doggyphoto.jpg” width=”500″ height=”350″/>

As you can see the code tells the browser to look in the images folder and find doggyphoto.jpg. Your web pages can stay in the root folder, the main folder, for example in Pic 1 the main or root folder is called “My Web Site.” Call it what you like though. Remember you may eventually want sub folders for your photos, 2011 Holiday or Wedding or Cute Bunny Pictures, and keeping them in order will save time and your sanity.

TIP: If you move files around, rename them or delete them, the code will stay the same until you change it to show the web browser the correct path to that file or image.

The Mental Model.

How weird would it be if you went to a car dealer, ignored the charming git in the suit, then got into a car only to find the steering wheel was on the roof? No. I do not like that. I’ll try another. Argh! This car has the steering wheel on the floor! Well gosh darn it, this is going to be tricky! Third times a charm…oh my, now the steering wheel is split in two and located on the back seat!

If that was the case I’m sure you’d stop mucking about in strange cars and go back to your original where you felt comfortable and safe.

This is fun, let’s try another.

You go to the Big Electrical Store to buy a TV. There are lots to choose from. You try a few out but the remote controls are all weird. Some have the buttons in the wrong place, some don’t have the right shape of buttons and some have too many or too few buttons. What you really want is a new TV but with the same style of remote control you are used to.

You figure your TV set is probably good for a while longer anyway.

This is because we all build up a Mental Model of everything around us. From experience we expect bacon to taste like bacon and not chocolate, we know that a newspaper will have the name and headline at the top in a big font, not in tiny letters on the back somewhere. Most of what we do in our lives is based on being able to access our mental model, even when faced with new situations we can refer to a similar mental model and adapt it. I think it is our mental model that keeps us sane. Without it everything would be brand new and you’d have a strange feeling akin to instant memory loss every few minutes.

The same can be said when it comes to using a computer. From experience we know what the Printer icon looks like or the Copy and Paste icons. The little disk icon tells us that’s what we click to save our stuff. The same principles can be applied to web pages. A house picture means home or home page, the left and right arrows usually mean Back and Next. The @ symbols tells us that’s how we can send an email.

There’s probably been plenty of studies about modern semiotics and how our brains are trained to look for memorable symbols. But when we talk about symbols and web pages it isn’t just about the symbols alone, but where they are on the page. If the Home button or icon or picture was in yellow on a white background at the bottom of the page you probably wouldn’t find it very easily or be happy when you did find it.

So when designing a website it is worth remembering that your visitors will expect to find everything in roughly the same place as other web sites they’ve visited. There are exceptions but it’s best to play safe until you know what you’re doing. This means the top of your website should have those elements people expect and need in order to enjoy their time on your web site.

Take a look at these examples:

As you can see the elements a user needs and expects are all at the top. Most web sites have a Search or Log In facility somewhere. Often if you can’t find a Contact option it is because it is at the bottom of the page. But we know to look there because of our mental model.

By the way, The Mountain is an excellent site for full over print t-shirts. Very high quality!

This is also about consistency. It’s well and good having all the necessary elements on your web pages but they need to be in the same place. Your main content can and will change but the important stuff, links, navigation and interaction stuff must be in the same place each and every time. You have probably visited web sites that don’t make any sense, either through poor design or colour scheme or bad layout. Did you go back? How many times do you visit your favourite web sites? Think about this the next time you do online shopping or browsing.

The Nitty Gritty.

So you want to build your own website? Okay. You’re going to need some tools. This is a rough list of things you’ll need if you’re a noobcake! I’ve been dying to fit that in somewhere on my blog!

A domain name & web space.

These can usually be bought at the same place. Lot’s to choose from online. I personally use a company based in England so I can speak to them on the phone if I need to. However, I have heard good things about http://www.godaddy.com who do good rates and have plenty of hosting options.

Login Details.

When you have purchased your domain and web space you’ll be given login details, passwords, and a whole bunch of other things to help you set up your website and sort out your emails.

Web Design Software.

I know. I know. I said you can build a website using nothing more than basic Notepad. And you can. But there are bits of software that can help you achieve this whilst still learning how to understand what the code means.

Dreamweaver.

This can be a daunting piece of kit to use for a noobcake (hehe, there it is again! Okay, I’ll stop now.) and it can be expensive. But you can still find older versions at a reduced price. I just found this cool thingy by doing a search for “Buy Dreamweaver 5” on Google

After a quick search on eBay I found a whole bunch of second hand copies of Dreamweaver.

Amazon has a range of web design programs but try to avoid Microsoft Front Page. I’ve found it to be clunky and generates a lot of pointless code. If you have this as part of your MS Office package I guess it’s worth a try but don’t rush out and buy it.

WordPress.org.

Don’t confuse this with WordPress.com. My Noobcake blog is hosted by WordPress.com. The dot org version is different. There you can download the actual content that powers a blog. Then you upload it to your website to use as you wish. The advantage of this is that you can customise so much more than with the dot com version. It requires more fiddling and messing with settings and code etc but it does mean you have a fully functioning website that you can tweak to your hearts content!

Certain web hosting companies sometimes provide you with WordPress features, though sometimes you have to choose a hosting package that has that feature. It’s worth looking into if you like the WordPress functionality and wish to use it as a basis for creating your own style. Also there are plenty of templates you can download or buy that you won’t find with WordPress dot com.

Books

Any of these are a good place to start forcing that knowledge into your skull.

HTML for Dummies

Web Design for Dummies

SAMS Teach Yourself HTML and CSS in 24 Hours – (24 hourly segments not an actual day because that would be exhausting, but if you fancy giving it a go…get some Red Bull and take on the challenge!)

Online Resources.

There a plenty of these and I won’t attempt to try to put any of them in order because it really is down to preference. Search for terms like “HTML beginners guide” or “HTML practical tips” and so on. From your mental model you’ll find the website you’re looking for.

Conclusion.

There are loads I haven’t covered here but that’s because I don’t want to rob you of all the fun and take the mystery out of it. Like any hobby or learning curve you will need patience and plenty of time, especially when it comes to reading. There can be a lot to take in but start small and work your way up. Even if you have web design software it is worth understanding the basic HTML language.

TIP: Most web browser have a feature where you can look at the code of the page. Right Click on the page and choose something like “View source” or “View source code” and you’ll be presented with a window filled with code. A lot of it can seem like total gibberish and sometimes that’s true when it comes to sloppy coding, but you can find out some interesting things by viewing a web page this way.

If you get stuck or find some interesting code that either doesn’t make sense or you want to know what it does, copy and paste it into Google. Chances are someone else has already done this and you may find a forum with answers to your questions.

Concluding the Conclusion.

Designing your own web site can take time, it’s like taking 10,000 match sticks to build a pirate ship, only sometimes you get half way through and realise you’ve built a rocket instead. But that’s okay because you might end up liking the rocket!

It can also be very rewarding, like writing or painting or watching two dogs fighting over a bone. At some point you may feel like your brain has turned to jelly and you can’t work out if you’re supposed to use <em> or <i> and all you want to do is scream at your PC until it starts playing soothing music to calm you down.

But stick with it. Even Picasso started his career by sticking his pudgy 2 year old hands in a tub of paint and smearing them over his mother’s best table cloth. Eventually you’ll get the hang of it and when those moments of clarity come you’ll be thankful you kept going.

The Conclusion of the Concluded Conclusion.

Go forth and code your brains out! If you need any advice just scream at me in the handy box below and I’ll come running, well, maybe walking…hmmm, no, I’ll stroll along, yeah, that’ better. Scream and I’ll stroll on by with some advice, a serene smile and a pat on the back for your hard work.

And maybe a doughnut.

</breath_sigh_of_relief>

<smile></smile>

</overly_long_blogpost>

Advertisements

20 thoughts on “HTML – How To Make Life Hard!

  1. You grabbed my attention for sure, truly appreciate this fantastic wealth of information. I will definitely be bookmarking this page and reviewing often. Thanks!

  2. Hi Noob,

    i taught myself basic HTML using http://www.w3schools.com/html/html_primary.asp and I’ve never looked back. I now markup interviews to be published online and upload them as well. The pain and frustration was well worth the effort because the principle has also helped me understand WordPress. I now always work in html rather than visual. If anyone does use txt i can thoruoughly recommend notepad++ I’ve really enjoyed the challenge…hmmm and now I know where to come if I get stuck!

    Great post

    cheers
    PiP

  3. Pingback: Writing Tips Wednesday – Getting the layout right « Dave Farmer

Speak to me!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s