Ok, so now you know what to do to start writing HTML, and you know where to put all the stuff that will display on your web page. However, typing some text by itself is very boring, without formatting.
Web designers tend not to use HTML for formatting anymore, CSS is used much more which we will get onto later. For now we will stick with HTML. What you can do to start with is open the HTML file you made before or you can start a new one.
- SHOW | Inside your HTML file
- Code: Select all
To make text bold, you can use two different tags; <b>text</b> or <strong>text</strong>
To make text italic, you can use two different tags; <i>text</i> or <em>text</em>
To make text underlined, you can use <u>text</u>
To make text marked (with a yellow background), you can use <mark>text</mark>
These are the basic formatting tags, the others use more advanced variations of tags, you'll see what I mean...
Text can be made into a heading using the <h#> tag; the # provides different levels of headings and can be made customisable with CSS to create different types of headings. By default (without CSS), the higher the number, the smaller the text gets, but the maximum number is 6. Try it out!
The rest of the formatting can be done using the <font> tag but with different things inside it called Attributes. Attributes are basically different options you can set to tags. To set these options, you put the Attributes that the tag uses inside the <tag>. For example, you would type it like: <tag attribute="value" attribute2="value">text</tag>. Attrivutes are a very important part in HTML, it means you can use tags to change your webpage, but change the tags further to suit you.
So to make text to different colours, you can use the following tag with the attributes:
<font color="colour">Coloured Text</font>
What you need to do is to replace colour with a colour name, hexadecimal colour code, or an RGB colour code (which i've never used because it's just easier to use colour names and hexadecimal colour codes). They are explained in a second, but first it is very important to consider the spelling of colour. "Color" is the American English spelling and this one needs to be used in HTML while "Colour" is the English spelling and this one can't be used in HTML.
You can type the names for colours into the attribute to change the colours, for example:
<font color="red">Coloured Text</font>
<font color="yellow">Coloured Text</font>
<font color="green">Coloured Text</font>
<font color="blue">Coloured Text</font>
<font color="lightgreen">Coloured Text</font>
You can use this list to see all of the colour names
Hexadecimal Colour Codes
You can also use the Hexadecimal colour codes for colours. Those of you who are familiar with the colours on the forum will know that you can use [color=#FF0000][/color] (for example) to change the colours. By selecting a different colour in the Font Colour tab, you will notice that the #FF0000 will change to #00FF00 (for example) if you choose green. This is the colour code, if you learn machine code, you will notice that this code uses Hexadecimal, but it's not important for you to know that.
The colours under the Font Colour tab only show 125 different colours so it's only using 125 colour codes. Altogether there are 16,777,216 different colours that can be displayed using Hexadecimal colour codes.
You can use this Colour Picker to get any colour in any shade (you can even mix colours with this) that you would like to use with Hexadecimal colour codes.
Here are some examples:
<font color="#FF0000">Coloured Text</font>
<font color="#FFFF00">Coloured Text</font>
<font color="#008000">Coloured Text</font>
<font color="#0080FF">Coloured Text</font>
<font color="#00FF80">Coloured Text</font>
We're not going to go over RGB colours because it's better to use colour names and hexadecimal colour codes. If you want to learn RGB in HTML, you can Google search it.
You can change the size of text by using a different attribute in the <font> tag. That attribute is size="#". You would replace # with a number from 1 to 7. CSS offers much more different options for size, but like I said, we are going to move on to CSS another time. The default size is 3 so you can make text smaller with a number below 3 and bigger with a number above 3. For example:
<font size="7">Sized Font</font>
<font size="6">Sized Font</font>
<font size="5">Sized Font</font>
<font size="4">Sized Font</font>
<font size="3">Sized Font</font>
<font size="2">Sized Font</font>
<font size="1">Sized Font</font>
Font families could be called font styles, basically it changes the shape of the letters, numbers and punctuation of a word/sentence. If you look at the top of the post box (in the forum) at the tabs, you will see a drop-down list called Font Family, this will do just that in your posts. The default Font Family is Times New Roman and you can change that with the attribute called face="font family name" obviously replacing font family name with the name of the Font Family. Unfortunately, you can only choose a specific few that are supported by HTML. There are a list of "Web-safe" fonts here but not all of them are guaranteed safe.
Because some fonts might not be on the computer of some other people, therefore you can add more font names into the attribute as "back-up fonts" and put commas (,) between them to separate them. They are listed in priority of use, so the first font will be used, and if it doesn't work on someone's computer, the web page will try and display the next font listed and so on. For example:
<font face="Times New Roman">"Times New Roman" Font Family</font>
<font face="Lucida Console">"Lucida Console" Font Family</font>
<font face="Palisoc,Verdana">"Verdana" Font Family</font>
On the last one, because "Palisoc" isn't recognised by your computer (unless you have it installed), it will display in "Verdana" font instead.
Now you know how to format the text you put into HTML! Next time we will learn how to use Pictures, Lists and most importantly; links!