X

Get in Tutch

Week 1: A beginners guide to HTML.

Software Needed: A text-editor & a web browser.

Recommended Text-editors (click to download):

Next Lesson: Styling your webpage with CSS.

 

What is HTML?

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a mark-up language rather than a programming language.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behaviour of HTML web pages.

Where do I start?

Most of the stuff on the web is no different than the stuff on your computer — it’s just a whole load of files sorted into a whole load of directories. HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.

Notepad is a common text editor on Windows-based computers (usually found under the Programs > Accessories menu) and Mac OSX computers come bundled with TextEdit but any program that lets you fiddle with text will do.

Your text file is your webpage at this point, anything you input into the text editor will be displayed on the page. We’re going to start by typing the following into the text editor.

<!DOCTYPE html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Explained: Doctype declares the file as a html file, The text between the html tags tells our browser that it is reading html. The text between the body tags is what is visible on the page. H1 tags declare a heading, these range from h1-h6, decreasing in size as a lower number is stated. P tags declare a paragraph.

Once you have done so, Save the file as a .html. It is important to save the file as a .html for it to be displayed in your browser. To look at HTML files, they don’t even need to be on the web. Open a web browser such as Chrome, Firefox, Safari or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, “c:\html\myfirstpage.html”) and hit return.
Congratulations, you have created a very basic webpage.

We would recommend looking at what other tags are available and playing around with them to see how they display. You can find a list of tags here: http://www.w3schools.com/tags/default.asp

We’ve said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Adobe Dreamweaver. You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to “help” you.