Modern website design consists of many elements including html, cascading style sheets (styling), graphic design and dynamic content creation which normally makes use of databases or xml files.
Here we look at the basics of creating the “front” of a website which includes html, css, graphics design and client-side scripting.
Websites should always be designed with best practices in mind which will ensure that any website will appear as you expect on the majority of users browsers.
Creating a Website
- A web browser (Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer etc…)
- A simple text editor
HTML files are simply text files with a .html extension, so you don’t need any specialist or expensive software like Dreamweaver to create them. In fact, your computer comes pre-installed with software which you can write webpages in – ‘Notepad’ on Windows, or ‘TextEdit’ (in ‘plain text mode’) on Mac.
While the software pre-installed on your computer will do, it’s far from the best. I recommend downloading Notepad++ if you’re on Windows or TextWrangler on Mac. Both programs are completely free and offer a number of features useful to web developers, such as syntax highlighting, tabbed file editing and line numbering.
Introduction to HTML
Every website on the internet is written in Hyper-Text Markup Language (HTML). The HTML language has grown and been extended over the years as the web has become more mainstream and websites find themselves requiring new features.
The HTML language is maintained by the World Wide Web Consortium (W3C) and the latest specification is currently HTML 5, which has added a number of new features to the language and is helping to pave the way to more interactive and feature-rich web pages.
A simple HTML page looks like:
<!doctype html> <html> <head> <title>Hello, World!</title> </head> <body> <p>Hello, and welcome to my website.</p> </body> </html>
The above code will create the following website when opened in a web browser:
HTML is a very simple language to learn. You are simply inserting ‘tags’ within your content which outline how each bit of content should be displayed in a web browser.
For example, you’d insert tags into your page where you want new paragraphs of text to begin, to make text a heading within the document, to insert images, links to other pages on your site or elsewhere on the Internet etc.
HTML tags are wrapped inside < > angle brackets. Looking at the previous example, you will see every ‘tag’ is a pair. We have <html> at the top, and </html> at the bottom.
<html> informs the web browser that everything inside the tag pair is HTML code. The </html> tag tells the browser the HTML content has ended. The ‘slash’ in the last tag denotes this as the ‘closing’ tag.
The <head> … </head> section immediately following is where you place information about the webpage which will not be shown in the main page itself, but holds meta data about your page for the browser.
Inside the <head> section, we have the text “Hello, World!” wrapped inside <title> … </title> tags.
<title> literally contains the title of the current webpage which is used by the web browser to name the window/tab:
Following the <head> section, we have <body>. This is where the actual content for your webpage is placed. In the body we have a <p> tag with a little welcome text inside.
<p> marks-up a paragraph on your page. For example:
<p>Once upon a time in a land far, far away there lived a princess who lived happily ever after.</p> <p>The End.</p>
Marks-up two paragraphs of text. If we were to view that in a browser, we’ll see the following:
You may be wondering why we need these <p> and </p> tags to display a paragraph. Well, if we didn’t, and wrote the webpage like this:
Once upon a time in a land far, far away there lived a princess who lived happily ever after. The End.
The page will look like this in a browser: