Support Forums

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.

Very good basic tutorial. Good job!

Thanks for your comments.

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.

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.

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.

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

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.

Yes I am going to, thanks for your feedback.

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