printer friendly version

Basic HTML codes

Here are some useful codes to start with - you will certainly need them while making your websites. Only basic codes are included in this tutorial, check my other tutorials for more.

What does HTML code look like?

HTML code is a set of many tags. A tag is the smallest unit of HTML, a part of the website code. You can recognize the tag by the signs < and > which represent the begining and the end of a single tag.
In the begining on every page there is a tag <html>. That means the beggining of HTML code. In the end of a document, there has to be </html>. This is the end of code. Anything written between these two markups will be interpreted as HTML.
The first tag in the document is <head>. That tag holds information about the site, such as title, encoding, meta tags, styles and similar. You won't see any of this text in a browser, but it's very important for the page itself.
Somewhere between <head> and</head> you should put <title> your title here </title>. Replace the words between the tags with your own. That title is written in the title bar, on top of this window. My title of this page looks like this: <title>Basic HTML codes | HTML and CSS tutorials | inObscuro</title>
After the head tag, there is the <body> content here </body>. Anything you type inside will be seen on your page. You'll put all your text, images, etc. here.
Here you will find an example of the simplest HTML page. If you copy this code into Notepad, and save your document with the .html extension instead of the default .txt, you will be able to open the page in a browser and see what it looks like. You can use this code for practising, by adding more code snippets to it.
Note the <br> tag. This means a linebreak. Whatever text you put after it will be shown in a new line. There are other tags I haven't mentioned here, but you will learn them later.

	<title>This is the page title</title>
	This is the simplest HTML page. <br> Learn how to improve it :)

How can I change the font style?

Copy the code and paste it somewhere inside your page (must be between the <body> and </body>)
Change the size, font name and color into what you need.

<span style="font: 12px Comic Sans MS; color: red">YOUR TEXT</span>

How to make my text bold, italic or underlined?

<b>bold text</b> <i>italic text</i> <u>underlined text</u>

Note: Do not combine the underlined text with color other than your normal text, because people might assume it's a hyperlink and get frustrated by clicking on it.

How to change background color?

Look for the <body> tag in your code and replace it with the suggested one. #FF0000 is red, change it to the on you need. If you need a hex color sheet, you can find it here.

<body bgcolor="#FF0000">

You can use this code for table, cell or layer background.

How to add a background image?

Here's the example for the body. If you don't change anything, the image will be tiled.

<body background="image.jpg">

Note that this will work, but it's better to do it using CSS.

How to insert an image?

Between the quotations (") for alt write your image's name or short description. That text will be shown if the image couldn't be loaded. It's recommended that each image has it's alt, at least an empty one like in the following code:

<img src="yourimage.jpg" alt="" />

Replace with the right path (absolute or relative), and instead of "YOUR TEXT" you also can insert an image. Target should be _blank if you want the link to open in new window, or _self if you want it to be opened in the same window. If you want it to be opened in a frame, you'll type the frame's name here. The entire target attribute should be omited if you want the link to open in the same window.

<a href="" target="_blank">YOUR TEXT</a>

How to make an e-mail link?

If you want people to send you an e-mail by clicking on some text or image, you need this code:

<a href="mailto:[email protected]" >YOUR TEXT</a>

Can I add more effects to the text?

Using pure HTML not really. For other effects you should know something about CSS, and luckily there are some tutorials about CSS here, as well :)

For more HTML codes, read the sequel of this tutorial, Basic HTML codes (part 2).

Share this tutorial with your friends!

Work with me

Brand identity design by Nela Dunato
Brand identity design for consulting companies

My book

The Human Centered Brand by Nela Dunato
The Human Centered Brand: A Practical Guide to Being Yourself in Business