HTML – Coding Basics

15/04/2013

htmlhead

The basics of HTML Coding

HTML Coding? Wouldn’t know where to start?
Well, we’ve got one of our developers here at Attitude Design to explain the basics.

Before you begin: Open up a text editor such as Textwrangler. You can find by searching on Google.

Setting up a basic HTML page

Setting up a basic HTML page is quite easy. Type the following code into your text editor:

<!DOCTYPE HTML>
<html lang = “en”>
<head>
<!– Basic.html –>
<title>basic.html</title>
<meta charset = “UTF-8” />
</head>
<body>
<h1>Level One Heading</h1>
<p>
<h1>This is a paragraph</h1>
Note that text will be automatically wrapped.
</p>
</body>
</html>

About this code:

a) Document type: <!DOCTYPE HTML>
This should be on the first line of your Website and set to HTML5.

b) HTML Tag: <html lang = “en”>
The <html> tag indicates the beginning of a Webpage. The </html> tag should then go at the bottom of the page to close it off. It is important to include the forward-slash. Also you need to add the language the page is written in to the opening tag. For English = “en”.

c) Head Tag: <head> </head>
This tag is empty in the above example but can fill up with JavaScript and other CSS goodies before you know it. Remember to add the closing </head>

d) Character Set: <meta charset = “UTF-8” />
You need to specify the character set. Those written in English generally are indicated thus: <meta charset = “UTA-8” />

e) Indentation:
It is good to get into the habit of indenting your code. It doesn’t make any difference to the browser but helps you to see it more clearly. An example of indentation is shown below.

untitled text

f) Comments: <!– Basic.html –>
Adding a comment can help navigation around your web page. HTML comments start with:

g) Title Tag: <title>basic.html</title>
You can add a title for your web page by typing: <title>typeyourtitlehere</title>
This will appear in the tab or title bar of your web browser and will often appear in search engine results for your page.

h) Body Tag: <body> </body>
The majority of your page code will be included between these tags. Most of the text that is seen on your site is contained within the body. The </body> tag is usually placed just before the tag.

i) Heading Tags: < h1 > < /h1 >
Use these as descriptions. They all begin with ‘h’ followed by a number which indicates the strength of the heading. All of your main topics should be indicated by level-one headings.

j) Paragraph Tags: < p > < /p >
Place most of your text into paragraphs. Although HTML doesn’t require the use of paragraph tags, it’s a good idea to use them as it will make things much easier to manage the look and behaviour of your text using CSS.

k) Divisions < div > < /div >
Larger sections of your text may be enclosed in-between div tags. Think of a div as an envelope into which you put things.
You can even put divs inside divs.

l) Save your work
Save your file with a .html extension.
Then you can drag and drop the file into a web browser to see how it looks.

Have a go!

Author

Attitude Design

View Attitude's Profile

Attitude Design

Tell us what you're thinking...

Your Contact Details

Your Comment

Recieve Attitude Mail?

Are You Finished?

Let's Filter Through!

Choose one of our blog categories below

Questions?

Call us on 0845 0700 820
or get in touch using the buttons below

contact details

project planner