This website stores cookies. Click here to accept them.cookie information page

What is Dreamweaver?

25th November 2011
Categories: basics, dreamweaver

In the last couple of posts on HTML I've mentioned that you can easily edit it in a text editor. You'd be forgiven for thinking that I don't want to spend money on fancy WYSIWYG tools and that's why I'm so excited about being able to edit HTML in notepad. 

In fact what I like about HTML being written in plain text (unlike, for example, the formatting of Word documents) is that it's easy to debug (in other words, to look behind the scenes and figure out what's going on).

Dreamweaver combines HTML and CSS plain text editing with a WYSIWYG tool which lets you check progress as you go or edit WYSIWYG on the fly. It's the industry standard tool for this sort of thing, although there are many, many programs which do more-or-less the same thing.

So if like us you're hooked up with the entire Adobe product family, you'll already have it - do try it out. You can also get a taster by downloading a 30 day trial.

What we normally do when we create HTML and CSS from a design, though, is split it up into different parts of the page and hand-code those parts to a high standard in terms of HTML and CSS best practice and accessibility, something Dreamweaver doesn't always encourage, and then feed those bits and pieces of HTML into the template side of a content management system (CMS).

To find out more about CMS's you'll need to wait for my blog post on that subject - coming soon!

What is CSS?

22nd November 2011
Categories: basics, css

CSS (or cascading style sheets) is a language that enables you to tell a web browser how a webpage should look. Whilst HTML is a language describing the structure and content of a page, CSS describes how that content should look.

The syntax of CSS is extremely simple, you declare which element/elements you wish to affect and then declare the styles that you want to apply to them contained within curly braces (“{}”)

The selector (the part of the block which defines WHAT to affect) can be a HTML tag, a HTML class attribute prefixed with a “.” or a HTML id attribute prefixed with a “#” (there are others but these are the most common)


color: red;

background-color: green;

font-weight: bold;
color: blue;

In this example we have three blocks, each with a single selector (a, .title and #branding). The “a” selector will affect all “<a ” tags on the page (also known as anchors or links). The “.title” selector will affect all tags on the page that have “title” as one of their classes (i.e. “class=title”) whilst the “#branding” selector will affect the element that has an id of branding (i.e. “id=branding”).

As you can see above, the style declarations themselves are extremely simple: what you want to change, a colon, what you want to change it to and then a semi-colon.

The cascading part of CSS refers to the fact that all the elements will inherit the styles of their parents, for instance say you had the following markup:

<div id=”branding”>

<span class=”title”>My Company</span>

<span class=”subtitle”><a href=”/about”>about us</a></span>


using the styles above the text “My Company” would be bold and green (it gets the 'bold' part from the branding div that contains it) whilst the “about us” link would be bold and red.

You aren't limited to just using one selector in CSS, you can chain them together as a set of rules that allow you more control over what to apply the styles to. For instance you can declare a style for any anchor tag that has an element with the 'menu' class as an ancestor (doesn't have to be a direct ancestor)

.menu a

color: orange;
text-decoration: none;

To limit the rule to only apply to direct parentage you use “>”


.menu > a
color: yellow;

This would mean that the parent of the anchor would have to have a class of “menu” for the style to be applied.

One last thing to cover is pseudo-classes. These are used for special effects and refer to a specific circumstance, for instance, hover-effects.

text-decoration: underline;

This would cause all anchor tags to become underlined when the mouse is hovered over them.

What is HTML? - Part 2

21st November 2011
Categories: basics, html

I mentioned in my last tech blog post that HTML had taken a back step from telling browsers how to display content, and that this job had been taken over by CSS (Cascading Style Sheets). But wait! Not so fast! What does HTML do now, and what's good and bad about it?

First then, what does it do?

In the new way of things, HTML allows you to specify and mark up content, leaving CSS to define how the content is displayed.  So for example if I have a menu and some body text, those parts of the page might look like this in HTML:

<div class="menu">
<div class="menuitem"><a href="/">home</a></div>
<div class="menuitem"><a href="/about">about us</a></div>
<div class="bodytext">
We are a fabulous company selling t-shirts of all sizes

Note that nowhere does it say where the menu should go or what it should look like - the HTML just provides content and defines the purpose of the content - e.g. "menuitem", for the CSS to get to work on.

HTML is good because it provides a simple, text-editable way of getting content online, readable, and linking with other content.

The bad part is that there are so many legitimate ways of expressing the same thing, and despite attempts to tidy up everyone's usage, because of the number of websites out there that use antiquated methods of displaying information, it's difficult to break away from the old.

So for example, <i> means italic, but so does <em>, and so does <span style="font-style:italic">. Or if I want to organise something into a list, I could use a list tag, a table, or just div tags one on top of the other.

To write good HTML I'd recommend packing Dreamweaver back into its box and buying a book specifically aimed at HTML 5 and CSS (at time of writing HTML 5 is the most up-to-date version). This will help you on your way to write standards-driven (and therefore future-proof) web pages.

What is HTML?

14th November 2011
Categories: basics, html

There are many huge and cumbersome problems with the internet; one of them is HTML.

Allow me to explain. In the beginning, the internet was not synonymous with the world wide web. The internet was a network of computers, as you might have in any office. The communication between those computers was typically related to transfer of files, or instructions, or people running text-based programs on a remote computer.

Independently of the internet, a system called 'Hypertext' was developed, which allowed you to create a document with 'forks' or 'links' to other parts of the document. Interestingly enough, Jorge Louis Borges is credited with developing the first 'hypertext novel', The garden of forking paths.

Tim Berners-Lee is the genius who put hypertext, the internet, and other elements together to create the world wide web. Using the web you could connect to a remote computer to look at scientific documents and browse around them following the links.

Web page creators needed nothing more than a text editor to create hypertext markup language (HTML) documents ('Markup' refers to the way that ordinary text is 'marked' or 'tagged'):

“<b>” means bold, while “</b>” means end bold. so in a web page, the markup:

come to my <b>party</b>

would look like:

come to my party

<i>is for italic, <u>for underline,

So the following HTML:

<p>Visit the <a href="">oxford web website </a>for more <i>info</i>

would look like this on a web page:

Visit the oxford web website for more info

As HTML evolved, though, the markup became less about how things should look than about what sort of things they were. So as a simple example,

<h1>this is a header</h1>

but it's something else, a stylesheet, that tells the browser how to display “h1” headers. And we'll visit CSS in another blog post.

© Alberon Ltd 2018

8 Standingford House
26 Cave Street

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).