Hand Coding Anyone?

Tags: , , , , ,
Posted 27 Sep 2007 in Soulville, Technology

Example of the beginning of a site:

<title>My Test Site</title>

Now that’s really basic. No doubt you want some color, some different sized text, some things in bold, italics or underlined, etc. You can do all that formatting and more with pure code.

The main colors in your page are controlled in the body tag. You can specify a background color with bgcolor, link color with link, visted link color with vlink, the color of a link when you click it with alink and the color of normal text with text. Example:

<body bgcolor="#ffffff" text="#000000" link="" vlink="#0000ff" alink="#00ff00">

You might be thrown off by the “#000000” type color codes. These are called hexidecimal codes. You’ll eventually remember some of the basic colors like the codes for black (#000000) and white (#ffffff), but the coolest way to pick colors (and see how they match each other) is to use sites like VisiBone Webmaster’s Colorlab. It will give you the hexidecimal code and tell you what color it is.

Now for very basic colors (black, white, yellow, blue, green, red, etc), some browsers will recognize you just typing that in (Example: <body bgcolor="blue">) but if you stick to the hexidecimal you will know that your colors will come out right every time, no matter who is looking at it and through what browser.

The size of text on your page can be controlled as well. If you do not specify a size, the user’s size preferences take precedence. It is fairly simple to set a size – H1 text is the largest and H7 is the smallest. Just like other tags, you open and close this tag.

<h1>I’m big</h1>

I’m big

<h2>I’m a little smaller</h2>

I’m a little smaller

<h3>I’m usually the normal size you see</h3>

I’m usually the normal size you see

<h4>I’m usually the smallest text you’d prefer to see</h4>

I’m usually the smallest text you’d prefer to see

<h5>I’m even smaller</h5>

I’m even smaller

<h6>I’m even smaller</h6>

I’m even smaller

<h7>I’m the smallest</h7>
I’m the smallest
To make something bold use <b></b>; for italic use <i></i>; and for underline use <u></u>.

Web page design is getting to be really popular these days. However, most people consider blogging web page building or build with programs that code for you and never really see what’s behind all of it.

Don’t get me wrong – coding programs are pretty awesome (I’ll review and show you how to use 2 of my favorites next week) and I love to blog, but they will never replace hand coding as my favorite mechanism of getting the exact look of what I want. Coding is so awesome.

So today is Part 1 of Web Design: Hand Coding for a new generation.

It isn’t the most in depth HTML cheat sheet, but I’ve named a site at the end that is one of the largest stockpiles of hand coding assistance ever – they have stuff for HTML, CSS, JAVA, etc. Great.

How to Hand Code in HTML

What Program Do I Use?

There are a number of different programs you can use to do HTML – Windows Notepad is my favorite, though certainly Microsoft Word, the code view of any program like Dreamweaver, or any other program that allows you to type text and save as .htm or .html are good. I use notepad because it is simple and doesn’t hog up a lot of computer resources while I’m working. Whenever you are working on a document, save it often. Even in notepad, open a blank document and save as whatever name you want and with the extension .htm or .html. The main page of your website must be named index.html, though every other page can have whatever name you want and either extension name.

Getting Started

HTML code is done in phrases called “tags”. Each tag is surrounded by brackets and tells the web browser what type of file it is and what it should do. For example, every file starts with <html> (lower and upper case don’t particularly make a difference with today’s browsers, but try to stay consistent). The “html” in brackets tells the browser that the file is html, but the reader of the page doesn’t see this part. It is because everything in brackets is invisible to the regular viewer of a site. Every tag has an end tag that you MUST use in order for what you’ve entered to work correctly. The end tag for <html> is </html>. Besides the <html> tag, you need to also begin an html document with <head></head> and <body></body> tags.

These two are the main ones that fall between <html> and </html>. They define two sections – the header and the body. The header is generally invisible on the web page itself, though the title bar of your web browser gets the title for your page from it. The body is where the actual substance of your page is. You may notice that these and other tags are similar to a text document you type up – they define the formatting of your site and tell the browser how things should look.

Example of text size and other formatting:

<h1><b>I'm ME and bold</b></h1>
<i><h3>I'm normal and italic</h3><br><h4>I'm still italics</h4></i>

Note that the first example shows the biggest font size in bold. The fact the bold tags are inside the H1 tags mean that only that text will be bold. In the second example, the italic tags are outside both the H3 and H4 tags – it makes both sets of text italic. You’ll also see the <br> tag. This makes a line break, similar to a regular break in a Word document or in this text. It does not need to be ended. If you use a <p> tag instead, it makes a new paragraph, similar to double spacing or the space between my examples and each of these paragraphs.

You know how to color a link, but how do you make one? How do you add pictures? The first is easier than the second.

<a href="link location">What you want everyone to see</a>
Examples of link types:

<a href="http://www.google.com">Google</a> – outside link
<a href="index.html">Home</a> – internal link
<a href="/story/story1.htm">Cool Story</a> – internal link but in a separate folder

The pictures are not difficult, just make sure you rename them in a format easy to link to. Instead of spaces in the name, use dashes (-) or underscores (_). The image tag does not have to be ended. I suggest putting pictures in a separate folder than the main html files.

To have a picture show up, do this:
<img src="picture1.jpg">

To make someone go to a different page to view your picture, do this:
<a href="picture1.jpg">My picture</a>

Much of web design is trial and error. One of my favorite sites to get help is Webmonkey. It has many tools for basic web design, including tutorials. Many books help as well, check out your local bookstore. If you get a book, make sure you understand what it is talking about.

You now have many of the tools it takes to make a basic website. But when you are done playing with it on your computer, you’ll want to put it somewhere right? There are many free sites – Tripod, Geocities, etc – that have tools and resources to check out. If you are more advanced and don’t need a lot of assistance, check out other free web hosts. My current host is 110mb.com and I love it – no ads! I use an FTP program to put my website up (FileZilla if you are interested, easily downloadable through download.com), though admittedly it is a somewhat advanced process. Just for starting out, Tripod and Geocities are excellent for helping you to learn and have great help files.

One final tip. If you see something on a page you REALLY like, go to “View” “Page Source” in your browser and can see the code and everything else there. Borrow it and tweak it to your liking.

See you guys in a few days for part deux of this, an overview of easy programs to use for web design. PS – Sorry for lateness of posts! I’ll get back on track soon – school rocks!

Blog Widget by LinkWithin

2 Trackbacks/Pingbacks

  1. The 30 month evolution of my online graphic design portfolio :: David Airey :: Graphic Designer 12 10 07
  2. thepinkc - ultimate geek girl 17 02 08