HTML
HTML is the core programming language of web design, but to call it that is a slight misnomer. The ‘ML’ in HTML and in XML, a related technology, stands for Markup Language. XML allows you to ‘mark up’ any content so that a computer can parse it, and perform functions on it like filtering. Thus, a library might be marked up as follows:
<library><book><author>John</author><title>Web Design</title</book><book>...</book></libary>
Thus we’ve defined a markup language for describing the books of a library, using tags like ‘book’, ‘title’, and ‘author’. The computer can now select from the list only those books of a given author. HTML is just one other defined markup language, used for describing the content of a webpage, and thus has tags for headers, paragraphs, links, images, etc.
The take-home lesson here is that HTML is not about how information appears on the page, but about what that information means. You should be able to write your content and mark it up with HTML before you even begin to consider the aesthetic appearance of your web design.
As a final example, let’s consider the ‘strong’ tag. Many novice web designers think ‘strong’ means ‘bold’, but in reality, ‘strong’ simply means that the bit of text within the tag is more important than the text around it. Most browsers by default use a heavier font weight to convey this to the reader, but using CSS we could use a different font colour, or capital letters - any method of contrast available to us via CSS.
AS a bit of background, the reason for this confusion is because in the early days of web design, HTML was defined to include tags like the ‘font’ tag to allow the web designer to control the appearance of the webpage. In more recent definitions of HTML, now called XHTML, these presentational tags have been removed to encourage the designer to apply style using CSS, creating the desired separation of content from its presentation.
CSS
CSS is the stylish side of web design. A CSS file, referenced in your HTML file, is a list of rules defining how the browser should display the different tags in that HTML page. The rule is divided into two parts: the selector, and the styles. The colours, borders, fonts, etc. defined in the styles are applied to those tags included in the selector you define. The selector can be written to select:
- All tags, i.e. *{color:red; }
- All tags of a specified tag, i.e. p{color:red;}
- All tags of a specified class, i.e. .myclass{color:red;}
- All tags of a specified tag with a specified class, i.e. p.myclass{color:red;}
- The tag of a specified ID, i.e. #myID{color:red;}
Getting Started
To get started, first write your web page’s content. When you’re happy with your content, copy and paste the XHTML template from the web standards project into notepad and save the file as ‘pagename.html’. Then copy and paste your content in between the ‘body’ tags, open a good HTML Reference that lists all the available HTML tags and mark up your content as appropriate. If you now open your file with Internet Explorer or Firefox, you will have your first website design!
You will note that your browser is applying some default styles to your HTML, to make your headers a larger font size than your paragraphs, for example. But as a web designer you can do better than that! Open a good CSS Reference that lists all the CSS styles available to you, and apply styles to your tags until you achieve the desired result.
