Archive for January, 2011

This quick classroom project added extra elements such as sound, video, pdf downloads, links to other websites and e-mail addresses. At present the only way I control the sound was to have a link to a the mp3 sound file rather than placing it on the page where it would automatically play.


Read Full Post »

With this quick classroom project we refreshed and built on what we had learnt in last weeks lesson. We looked at divs again, changing the appearance of links for navigation purposes and added some javascript named anchors (item 1,2,3,4 etc..) to enable easy movement between articles on the same page.

The javascript was copied and pasted into the head section of the html code and links were added by joining relevant information to the named anchors using the links tool in the properties bar.

This helps to keep large amounts of related information on the same page and means the visitor doesn’t have to scroll back to the top of the page or navigate to superfluous pages. We looked again at meta tags to increase optimisation of website.

Read Full Post »

This second classroom project built on what we learnt in the previous session. We built 4 linked webpages using a Dreamweaver template and applied CSS styling to the pages. We brought in artwork created in Photoshop and other photos and generally began to feel our way around Dreamweaver. We did not use coding to build the site, but instead built it in the design option -Dreamweaver automatically generates the code. We looked at the general rules to building the site such as how and where to save files, how to name pages (i.e. the home page is always called index.html) and also how to key in information to optimise the pages – i.e metadata, alt tags,

Prior to building the pages we looked at various websites to analyse what information is included on successful websites (ie those that appear in the the top five) to give an idea how to optimise a site. My research is included below for the top five Brighton garden design websites

Lilybud –gardens by design

<head> Info down to end of Meta name description

Title = Lilybud Gardens by Design: Brighton &amp; Hove Garden Designer

Meta name = Keywords:  gardening,garden,design,brighton,garden design

brighton,landscaping,sussex,planting plans,garden maintenance,landscape gardeners”

meta name = description: Lilybud Gardens by Design: Garden and landscape design and build in Brighton, Hove and Sussex. Tel: 01273 500407.

Header 1 <h1>

Beautiful Gardens that don’t cost the Earth

Body text <p>

We are a garden design and build company, based in Brighton & Hove, creating beautiful gardens across Sussex.  We hope you’ll find us friendly, professional and enthusiastic.

Images <img>


title=”Small garden with a Moroccan feel.

alt=”Moroccan inspired garden, Brighton” title=”Moroccan inspired garden, Brighton”


title=”Garden with curved lawn.

alt=”Curved lawn with metal edge and pebble path, Brigthon”


title=”Large Hove town garden

alt=”Large Hove town garden”


title=”Wildlife garden with willow ball

alt=”Wildlife garden with willow ball

Langlea Garden Design

<head> Info down to end of Meta name description

title = Langlea Garden Design Brighton, Landscapers Brighton &amp; Hove East Sussex, UK

meta name keywords = Garden Design, Garden Designer, Garden Designers, Landscape Gardeners, Brighton, Hove, East Sussex, UK”

meta name description = Langlea Garden Design – Landscape Garden Designers – Garden designers and landscape gardeners in Brighton &amp; Hove East Sussex UK.

Header 1

No text header – animated gif

Body text

Langlea Garden Design – Brighton & Hove, East Sussex Whether it’s a tiny roof garden, traditional cottage garden, contemporary courtyard or a minimalist retreat……

Langlea Garden Design and Construction based in Brighton & Hove East Sussex, will exceed your dreams. For many years Langlea have been creating unique, timeless gardens with enduring appeal and a harmonious sense of place.

Our landscaped gardens are executed to the highest standards with meticulous attention to detail.

We specialise in garden or landscape design and construction, including planting, water features, decking, paving, outdoor rooms, and more.

About Us >>

View our recent landscape garden design projects


Java script gallery

Zachary Lewis Garden Design and Build

<head> Info down to end of Meta name description

Title = Garden Design Brighton and Sussex, Landscape and Garden Designers in Brighton and Sussex

Meta name = Keywords: content=”garden designers brighton, landscape designers brighton, landscape garden designers brighton, garden design brighton, landscape design brighton, landscape garden design brighton, garden designers sussex, landscape designers sussex, landscape garden designers sussex, garden design sussex, landscape design sussex, landscape garden design sussex

meta name = description: Garden design from our garden designers and landscape designers in Brighton, Sussex. We offer garden and landscape design services for large scale domestic, commercial as well as smaller gardens.

Header 1 <h1>

No text header – part of image


alt – ZL Garden Design – Landscape design &amp

Body text <p>

ZL Garden Design Brighton – Landscape and Garden Designers in Brighton, Sussex

Based in Brighton, Sussex ZL Garden Design are firmly established landscape designers and garden designers. We have a passion for all styles of garden in both private and commercial settings. We would hate to be considered only capable of contemporary works, we are led greatly by the space itself and of course the brief and preferences of the client.

“Style is a matter of taste, but design is a matter of principle”.

Covering Brighton, Sussex, London and the south, the landscape and garden designers at ZL Garden Design have forged a reputation for consistently delivering stunning gardens and landscapes

Please take a moment to browse our online garden design portfolio.

For more information, or to talk to our landscape and garden designers

about your garden, please do not hesitate to contact us.

You will see why we are a popular choice for those looking for quality

garden design in Brighton and Hove, Sussex.

Lewispol has ceased trading, anyone wishing to contact Gabriel Pol please click here.

Images <img>

Scroll viewer

flower.jpg alt  – Echinacea flowers

buddhist-garden.jpg alt – Buddhist walled garden

coastal-garden.jpg  alt Coastal Garden

chair.jpg alt – Modern garden design

outdoor-dining.jpg  alt – Outdoor design

courtyard.jpg alt – Modern courtyard

fountains.jpg alt – Garden water features

Read Full Post »

This was a first attempt at coding in Dreamweaver completed as a Classroom exercise

Read Full Post »

Here is a gallery with with collected material to inspire my website. With the websites I looked at, it was often elements of them – such as image galleries and links, hotspots and navigation that I found interesting rather than the sites as a whole. Using ideas from other websites,  I want to develop and integrate them into a more cohesive overall design.

I have also include plans, and mood boards to help develop the flavour of the site.

The other stuff is flotsam and jetsam of interesting images, textures and photos  that evoke or directly relate to the sea and the shore.

This slideshow requires JavaScript.

The event I am going to publicise on my website is a beachcombing day. It will consist of five pages:

Home page

Content page – more info about the day

Content page – Gallery

Content page – guidelines- what to bring, how to dress, safety on the beach

Contact/form page

For the project I need to think about SEO, Navigation between pages, links to pdfs, e-mails, video and other websites, image galleries, hotspots and named anchors as well as the overall design of the site. Some of the elements will contain javascript to create a smoother, more professional look to the site.

I want the overall feel to be like a scrapbook or field book – where someone has jotted down what they have seen with photos and drawings, to be informal and friendly and with a flavour of the seashore! I want it to have a tactile look to it, but to also be quite clean and uncluttered with plenty of ‘white space’.

My intended audience, is really anyone interested in the seashore and beachcombing or looking for an alternative day out. The site will be geared primarily towards adults and families. I will try to include a spread of different visuals and sounds to try and entice people in and get them to explore the site, be inspired and hopefully sign up for the day out!

Read Full Post »


HTML (Hypertext Mark-up Language) was originated and developed by British Physicist Tim Berner Lee and is first mentioned on the Internet in late 1991.

It is a mark-up language  (not programming language) used to create HTML documents that are made up of HTML tags and plain text. Web browsers such as Safari and Firefox read the HTML documents and display them as web pages by using the HTML tags to interpret the content of a page.

HTML 4.0 is the current version as recommended by the World Wide Web Consortium (W3C). It supports multimedia options, scripting languages, style sheets and documents that are more accessible to users with disabilities.


HTML mark-up tags describe the web pages and consist of keywords or letters surrounded by angle brackets that normally come in pairs. The first tag in the pair is called the start tag and looks something like this: <p>, the second tag is called the end tag and looks like this </p>. They are also known as opening and closing tags. Information appears between these pair of tags and are known as elements. Tags can also have attributes, which are extra bits of information that appear inside quotation marks. These are specified in the start tag and come in name/value pairs such as <style type=”text/css”>.

HTML Document (web page)

A typical web page may be coded in the following way:

The text between <html> and </html> describes the web page. The start tag will appear at the very beginning of the document and the end tag at the very end. All other information appears between these pairs of tags.

The head area  <head> </head>

Information about the document is placed between this pair of tags this can include the following:

Title – defines the title of the document and is essential to produce a valid document and helps with SEO(Search Engine Optimization).

Example: <title>CMC – the Clinical Media Centre at Brighton and Sussex University Hospitals in Brighton</title>

In a browser this will appear at the very top of the page, above where the url is situated.

Meta information – used to provide information about the page – this helps with SEO. SEO is very important, Good titling and descriptions  or a webpage/site help to push them get them on to the top pages of a browser.

Example: <meta name=”Description” content=”CMC  – The Clinical Media Centre specialises in clinical and non-clinical photography, video, graphics and retinal photography ” />

Style -used to describe CSS (Cascading Style sheets) at page level  – This describes how elements of a page will physically look and act.

Example: <style type=”text/css”> <!– –> </style>

This information can also be included by using links.

Links -Defines a link to an external resource. It is most commonly used to link a CSS file to an HTML document. Different links specify different actions

Links example: <link href=”styles.css” rel=”stylesheet” type=”text/css” />

href specifies  the target of a link (in this case the target is css styles which contains the information about how the page should look

rel specifies the relationship of the target of the link to the current page.  stylesheet is telling us that we are linking to a page (styles.css) that defines the different elements of styling that can be applied across the website.

Type can be used to specify the MIME type of the target of a link . A MIME is a two-part identifier for file formats on the internet. (Or an attribute?) In this case the MIME is =”text/css” and is telling us (I think) that the type is text that has had css styling applied to it as specified by the href and rel links as discussed above. (another example of a type is audio – the MIME could be audio/mpeg).

Script -Used to define a scripting language, such as JavaScript. JavaScript works in conjunction with HTML and create an ‘event’ to make enhanced user interfaces and dynamic websites.  An example of this are pop-up slim boxes which create pop-up boxes for enlarged images:

<script type=”text/javascript” src=”js/mootools.js”></script>

<script type=”text/javascript” src=”js/slimbox.js”></script>

<link rel=”stylesheet” href=”css/slimbox.css” type=”text/css” media=”screen” />

Body area <body> </body>

This is where all of the content is placed. This element must be used and used once only. It must start immediately after the closing head tag and end directly before the closing html tag.

The body area can contain the following:

Heading <h1> </h1> – If your document contains headings than you can apply html tags specifically to those. These range from <h1> through to <h6> and determine the size of the heading so that it displays either as a main or sub heading. – <h1> displays as the largest size and is normally only used once on a page and <h6> as the smallest. <h2> to <h6> can be used as often as required, but should always be used in order, as they were intended. For example, an <h4> should be a sub-heading of an <h3>, which should be a sub-heading of an <h2>.

Example: <h1>Beachcombing at Saltdean</h1>

Paragraphs <p> </p> – The main body text is placed between this pair of tags. If you want text to appear on different lines then you need to explicitly state this by place each line of text within p tags like so:

<p>This is the first line of text</p>

<p>this is the second</p>

This is because web browsers don’t usually take notice of what line your code is on.

Lists – The two main kinds of lists are ordered and unordered. Ordered are sequential lists which are normally represented by incremental numbers and are defined by the <ol> tag while unordered lists are non-sequential lists list items which are usually preceded by bullets and are defined by the <ul> tag. Within the lists, the li tag is used to define each list item.

Example: <ul>





Links – These can be used to make pages of a website link together, to send the user to another part of the page they are viewing or to link to any file anywhere on the web.

An anchor tag <a is used to define the link, for these to become active you need to add the destination of the link.

Example (This is for a navigation bar):

<div id=”navbar”><a href=”index.html”>Home</a>|<a href=”about.html”>About</a>|<a href=”guidelines.html”>Guidelines</a>|<a href=”finds.html”>Gallery</a>|<a href=”contact.html”>Contact</a></div>

Images – The img tag is used to put an image into a document

Example: <img src=”images/seaweed-2.jpg” alt=”Seaweed on shore” width=”164″ height=”164″ />

The src attribute tells the browser where to find the image.

It is important to include width and height attributes. If they are excluded, the browser will try to calculate the size of the image as it loads, instead of when the page loads – this can cause the layout of the document to jump around while the page is loading.

The alt attribute is the alternative description, it is important as it is used for people who cannot or choose not to view images.

Forms <form> </form> – These are used to pass data to a server and contain input elements such as text fields, checkboxes, radio-buttons and submit buttons.

Example (text field): <form> First name: <input type=”text” name=”firstname”</form>

Check boxes let a user select one or more options of a number of choices.

Radio buttons let a user select only one of a number of choices.

Submit buttons are used to send form data to a server. The data is sent to the page specified in the form’s action attribute.

Divs <div> </div>– Divs stand for division and their purpose is to divide up a web page into distinct sections, thus providing a definite structure to the page. It can be used in combination with CSS to provide design and layout.

Example: <div id=”footer”>

<p>Copyright J Lewis. All rights reserved | Private Policy | Terms and Conditions | Site Map</p>


CSS stands for Cascading Style Sheets and allows for flexible formatting of web pages. It was created by W3C to overcome the expensive and unwieldy process of HTML having to format documents.

It enables content, style and interaction to be put into separate ‘layers’ which makes the job of creating a web document quicker, cleaner and easier as well as adding the ability to create fantastic looking sites with all kinds of multimedia additions. It also makes websites more accessible and are an attempt to ‘future proof” against ongoing developments in technology and functionality.

CSS has been around for nearly a decade, but it is only had recent widespread support and been integrated into the majority of browsers.

Basic CSS Syntax

Whereas HTML defines the content of a web document, CSS defines how HTML elements are to be displayed.

A CSS rule has two main parts: a selector, and one or more declarations:

Selector: The selector is normally the HTML element you want to style (for instance the paragraph <p>

Declaration: A declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

Example: p {color:red; font-size: 14px; text-align:centre;}

P is the selector, colour, font-size and text align are the properties while red, 14px and centre are the values.

CSS declarations always end with a semicolon, and declaration groups are surrounded by curly brackets.

id and class selectors can also be specified. An id selector is used to specify a style for a single, unique element whereas a class selector is used to specify a style for a group of elements and in contrast to the id selector is most often used on several elements.  The id selector is define with “#” and the class selector with “.”.

Finally, when a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet: External CSS style sheets enable the appearance and layout of all the pages in a Web site to be changed, just by editing one single file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

Example: <head> <link href=”styles.css” rel=”stylesheet” type=”text/css” /> </head>

Internal Style Sheet: Internal style sheets are be used when a single document has a unique style. Internal styles are defined in the head section of an HTML page, by using the <style> tag.

Example: <head>

<style type=”text/css”>

hr {color:blue;}

p {margin-left:10px;}

body {background-image:url(“images/background.jpg”);}



Inline Styles: Inline styles are place within an HTML element and lose many of the advantages of style sheets by mixing content with presentation. This method should be used sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Example: <p style=”color:blue;margin-right:20px”>This is a paragraph.</p>

For examples of HTML coding and CSS styling please look at post –  Classroom Project – Coding, further up this blog.

Read Full Post »

Read Full Post »

Older Posts »