**[TUT] Basic HTML (Guide 1)**

**[TUT] Basic HTML (Guide 1)** - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: **[TUT] Basic HTML (Guide 1)** (/showthread.php?tid=6521)

Pages: 1 2

**[TUT] Basic HTML (Guide 1)** - Sam - 04-24-2010

Hello there fellow SF users this is going to be a start in my HTML guide series. Today I will be going through Basic HTML Format The following sub-topics are going to be covered in this first guide:

Basic text tags
Headings, line breaks, paragraphs etc...
Font size & colour
Basic image adding, including resizing

Basic Text Tags

Making text bold
In-order to make text bold we will have to add the following tags before and after the passage of text:

Code:
<b>Test Text</b>
This will create this - Test Text
Making Text Underlined
To create underlined text we have to follow the same rule; we must add tags before and after the selected text we wish to be underlined. Like so:

Code:
<u>Test Text</u>
This will create this - Test Text
Making Text Italic
To create italic text we must follow the same rules as before, like so:

Code:
<i>Test Text</i>
This will create this - Test Text
Make text stuck out
Again we are going to follow the same rules but we are going to change the content inside of the tags this time:

Code:
<strike>Test Text</strike>
This will create this - Test Text

Headings
HTML allows us to create different sized headings using simple tags. There are five different heights of heading; five being the smallest and one being the biggest. To create a heading you must use the tags:

Code:
<h1>Test Text</h1> <h2>Test Text</h2> <h3>Test Text</h3> <h4>Test Text</h4> <h5>Test Text</h5>
This will create this -

Line Breaks
In HTML we use line breaks to separate sections of text. This is the equivalent of pressing enter in a word processor. If we want to make some text in a paragraph format with line breaks then we can use this code:

Code:
<p> Test Text 1<br /> Test Text 2<br /> Test Text 3<br /> </p>
The <br /> in the code makes the line break. The <p> stand for the paragraph.
This will create this -

Font Colour & Size
Changing Font Colour
Changing your font colour is a really nice touch to add to your HTML page. In-order to choose your colours you need to visit this site. You should notice that each colour has a number code inside it. This is the code that will define the colour of the selected text. You should use the code like this:

Code:
<font color="FF0000">Test Text</font>
This will create this - Text Text
Changing Text Size
With have already seen that we can change the size by using the heading codes. This is a good way if those sizes work for you. However if you want a more specific size then you can use a few commands like these:

Code:
<big>Test Text</big> <small>Test Text</small> <font size="5">Test Text</font>
You can replace the number in the last code snippet to edit the size.
This will create this -

Images & Resizing
Adding Images Basic
We can add images in HTML using a simple code:

Code:
<img src="http://www.supportforums.net/images/avatars/Officials/major.png">
This will add any image you wish at whatever size it is.
This will create this -
Adding Images - Resizing
We can resize the images to fit a certain part of a website. We do this by adding this code:

Code:
<img src="http://www.supportforums.net/images/avatars/Officials/major.png" width="50" height="50">
You can replace the numbers to edit the width and size (pixels)
This will create this -

This brings a close to my first HTML guide. My next guide will be number 2 which will include starting to customize backgrounds with colours and images, also the addition of lists and basic forms to communicate with a web server.

Thanks for reading.

Notes: This guide belongs to me and I prohibited posting this elsewhere without 100% credit to me and a link to my SF profile.

RE: **[TUT] Basic HTML (Guide 1)** - Tierney - 04-24-2010

Very good basic tutorial. Good job!

RE: **[TUT] Basic HTML (Guide 1)** - Sam - 04-24-2010

Thanks for your comments.

RE: **[TUT] Basic HTML (Guide 1)** - Elektrisk - 04-24-2010

This is a great tutorial, but imo, it's bad habit to use HTML to style your text. It'd be better, to do for example:

<p>This word is <span style="font-weight: bold;">bold</span>.</p>

Great job nonetheless.

RE: **[TUT] Basic HTML (Guide 1)** - Sam - 04-24-2010

Thanks for your comments Elecktrisk.

I understand this way is better but I was just trying to lay out the basics. I will develop upon the methods in future guides.

RE: **[TUT] Basic HTML (Guide 1)** - ndee - 04-24-2010

The first thing you should do when you write an HTML tutorial is talk about:
<html> - <head> - <body>
When you achieve that, then you start talking about <b> and the likes.

Good tutorial nonetheless.

RE: **[TUT] Basic HTML (Guide 1)** - Sam - 04-24-2010

Yeh I thought about doing that but then I thought I would create a tutorial on how to structure a HTML document.

RE: **[TUT] Basic HTML (Guide 1)** - Streeeam - 04-24-2010

Structuring a HTML document is really easy, but can be confusing for newbies. I think you should write up a guide for structuring a HTML document. Big Grin

RE: **[TUT] Basic HTML (Guide 1)** - Sam - 04-24-2010

Yes I am going to, thanks for your feedback.

RE: **[TUT] Basic HTML (Guide 1)** - .:xX[ThunderStorm]Xx:. - 04-24-2010

Wow it's really nice very nice TUT with most of the basics and very useful for beginners even.