+- 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.
