howtothings.co.uk
Basic HTML coding - Printable Version

+- howtothings.co.uk (https://www.howtothings.co.uk)
+-- Forum: Computing (https://www.howtothings.co.uk/forumdisplay.php?fid=4)
+--- Forum: Website Development, Implementation and General Webmaster Support (https://www.howtothings.co.uk/forumdisplay.php?fid=9)
+--- Thread: Basic HTML coding (/showthread.php?tid=137)



Basic HTML coding - Mark - 16-06-2010

Over the years i've made a few websites and messed around with HTML, if you're thinking about making a website you'll need to understand basic HTML.

The first thing you need to know is that each file needs to start and end with html tags.

Code:
<html>
</html>

This tells the browser that it's a html file.

Then secondly you need head tags.

Code:
<head>
</head>

You put codes or scripts in the header, such as meta data, links to css, fav icons or javascript code.

Linking to a CSS file

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in a markup language (HTML).

Code:
<link type="text/css" rel="stylesheet" href="http://mcompute.co.uk/global.css" />


Scripts

Code:
<script> </script>

After the header tags you have body tags, this is where you put all the content of your site - such as div classes, images and text.

Code:
<body>
<body>

Some of the things you can put inside theses tags includes:

Headers

Code:
<h1>My First Heading</h1>

Paragraphs

Code:
<p>My first paragraph.</p>

Underlined text

Code:
<u> </u>

Strike out text

Code:
<s> </s>

Bold text

Code:
<b>This text is bold</b>

Italic text

Code:
<i>This text is italic</i>

Big text

Code:
<big>This text is big</big>

Strong text

Code:
<strong>This text is strong</strong>

Bold, italic, underline and strikeout are looked down upon nowadays if used in a HTML file, they should be used in the CSS file instead - you then link the css file in the header.

Line breaks

You don't see these when viewing, it's just the equivalent of pressing enter to separate things such as writing.

Code:
<br />

Adding links

Code:
<a href="http://www.mcompute.co.uk" title="Link to mcompute forums" alt="mcompute">Link text goes here</a>

Adding images

Code:
<img src="logo.jpg" title="mcompute logo" alt="mcompute logo" />

You can also determine the size of the image.

Code:
<img src="logo.jpg" width="104" height="142" title="mcompute logo" alt="mcompute logo" />

img src="" is the link to the image
title="" is the text that you'll see when you hover over the link / image.
alt="" is the text that you'll see if the image is corrupt or no longer exists.

Changing font colour

This will make the writing "Defines the font color" black.

Code:
<font color="#000000">Defines the font color</font>

Changing font size

Code:
<font size="3">This text will be size 3</font>

Again, these are the old ways of doing things - a lot of things are done via CSS now.

Commenting your code

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Code:
<!-- This is a comment -->

How to View HTML Source code

Have you ever seen a Web page and wondered how they've done something?

To find out, right-click in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

A very good site to visit is:

w3schools


This is a very simple tutorial on HTML basics, if you need any help or have any suggestings please post below or PM me.


RE: Basic HTML coding - Jamez247 - 16-06-2010

Nice tut mark, nice of you to explain the <a href=> to people xD


RE: Basic HTML coding - Special Chris - 16-06-2010

Thanks a lot, been looking for something like this to pop up. Smile