EverWeb Codebox

Editing Code

HTML Doc

An HTML doc consists of two main sections - a <head> and a <body>.

The information in the head is not seen by the visitor and consists of styles, scripts and meta data. The exception is the page title which appears above the address bar in the browser.

The body is usually sub divided into sections - header, content and footer.

The header contains information that will appear on every page of the site such as the website name, logo and navigation.

The content area can be further divided using columns and block elements.

The footer also contains info that is required on every page such as the copyright notice, contact details and links to pages like terms & conditions and the sitemap.

The header, content and footer are enclosed in a "container" which determines the overall page width and whether this width is static or dynamic.

A basic HTML document is shown below. It's important to remember these basics so that you can visualize this layout when you come to insert code.

The code shown below will create a completely blank page. A more interesting one is shown on the NEXT PAGE...

<!DOCTYPE html>

<head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <title>Basic Web Page Layout</title>

</head>

<body>

<div id="container">

   <div id="header"></div>

     <div id="content"></div>

   <div id="footer"></div>

</div>

</body>

</html>


Code Editing Software

The Head and Footer code and the HTML Snippet boxes in EverWeb are necessarily small and not suitable for making changes to code. It's far better and easier to use an editor app.

Code can be pasted into and edited in Text Edit.app which comes with every Mac. Make sure to select "Plain Text" for the format in the New Document tab in Text Edit preferences.

A better way is to use a WYSIWYG code editor so that you can see the effect of changes instantly. RageSW have an excellent, and now free, app - WebDesign -  which will make this task a lot easier.

CSS can be quite daunting to the beginner and does require some basic math skills and an understanding of the concept of absolute, fixed and relative positioning. The freeware app Simple CSS really does simplify creating custom styles.

Use the above basic HTML doc as a framework to try out HTML, CSS and Javascripts. Insert the various types of code as described on the previous page.