Website Design Principles 2025

Read More

HTML Basics continued…

8th August, 2010

Following from yesterdays post I thought I would list a basic introduction to HTML that should cover all you need to know to begin writing.

<html>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
<p>Your third paragraph.</p>
</body>
</html>

Adding an HTML links to this webpage is very easy, you will need to define it with the <a> tag like below. The web address is specified in the href attribute.

<a href=”http://www.tidydesign.com/blog”>Linking text</a>

Images are defined with the <img> tags, so to include a logo.jpg you would write

<img src=”logo.jpg” width=”300″ height=”100″ />

Why not add a couple of different text effects to your page

<strong>Bold</strong>
<em>Italic</em>

So below we have created a basic webpage about your company and the services you offer

<html>
<body>
<h1><strong>Company Name</strong></h1>
<h2>Main services</h2>
<h3>Main products</h3>
<p><strong>Your first paragraph here looks bolder than the others.</strong></p>
<p><em>Your second paragraph here with an Italic style</em></p>
<p>A link to <a href=”http://www.tidydesign.com/blog”>Tidy Design</a>
</p>
</body>
</html>

Next we will look at adding some colour; this defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). The many combinations of Red, Green, and Blue values from 0 to 255 offer you more than 16 million different colours! Please add the following code before the <body> tag of the above sample page.

<style>
.blue {
color: #069;
}
</style>

You can now update your ‘Company Name’ so it will be blue

<h1 class =”blue”><strong>Company Name</strong></h1>

Recent Posts