HTML For Formatting Blogs #1
Last updated: Monday April 5th, 2021
Report this blog
In this blog, we'll cover the absolute basics of HTML.
What is HTML?
HTML stands for 'hypertext markup language'. HTML is the most basic way of building web pages. HTML consists of elements which tells the browser how to present documents, web pages etc.
Paragraphs
To get a paragraph, you do the following:
<p>Whatever you want to go in the paragraph.</p>The paragraph above should look like this:
Whatever you want to go in the paragraph.
Obviously, your paragraphs won't read as 'whatever you want to go in the paragraph' but it would read what you want to go in the paragraph.
Headings
There are six headings: the first heading is usually for the most important; the sixth for the last.
To get a heading of any of the six, you do the following:
<h1>Whatever you want to go in the heading</h1><h2>Whatever you want to go in the heading</h2>
<h3>Whatever you want to go in the heading</h3>
<h4>Whatever you want to go in the heading</h4>
<h5>Whatever you want to go in the heading</h5>
<h6>Whatever you want to go in the heading</h6>
This is how the headings should look like:
Whatever you want to go in the heading
Whatever you want to go in the heading
Whatever you want to go in the heading
Whatever you want to go in the heading
Whatever you want to go in the heading
Whatever you want to go in the heading
Same thing as paragraphs, your heading won't probably won't read 'Whatever you want to go in the heading' but that's just an indication to what you want to go in the heading.
Italics
To get italics, you do this:
<i>Whatever you want in italics</i>It doesn't matter whether the 'I' is capital or not. It'll still do the same thing. Anyway, this what you should get:
Whatever you want in italicsYour italics probably won't read 'whatever you want in italics' but this is just to indicate what goes in italics.
Bold
To get something in bold, you do this:
<b>Whatever you want in bold</b>This is what it should look like:
Whatever you want in boldYou probably won't have 'whatever you want in bold' in bold, but that's just to indicate that you can have anything in your blog post in bold.
Hyperlinks
To get a hyperlink, you do this:
<a href="url">Whatever you want the link to say</a>You don't type the letters 'url' in the speech marks: you type the website url. For this example, I'm going to link a website for HTML formatting. For this example, this is what you're hyperlink should look like.
Whatever you want the link to sayYou can type anything in the 'whatever you want to say' part.
Buttons
To get a button you do this:
<button>Click me</button>You should get this:
Click meTo get a button which'll link to somewhere, you do this:
<a href="url of the web page"><button class="either blue, green, red, or purple">whatever you want the button to say</button></a>Now, when dealing with the button class, you don't type "either "blue" etc. That's just there to tell you what you can get. You would type "blue" for the colour of the button to be blue, and the other colours to get the other colours. You don't type 'url of the web page' either. The url of the page goes there.
For this example, I'll use the front page of JetPunk with a green colour. If you do the above with the appropriate link and colour, you should get what you want. If I follow the steps above, this is what I get:
whatever you want the button to say
When dealing with the colour, if you don't put a colour, the button will be grey by default.
Lists
Ordered List
To get an ordered list, you do the following:
<ol><li>Whatever you want to go first</li>
<li>Whatever you want to go second</li>
<li>Whatever you want to go third</li>
</ol>
You can do this for as many things as you want. The list above should look like this:
- Whatever you want to go first
- Whatever you want to go second
- Whatever you want to go third
You've probably gotten the idea by now, that you don't have to put 'whatever you want to go first' in order to do a list. All you need is the appropriate formatting.
Unordered List
To get an unordered list, you do the following:
<ul><li>Whatever you want to go here</li>
<li>Whatever you want to go here</li>
<li>Whatever you want to go here</li>
</ul>
This is how it should look like:
- Whatever you want to go here
- Whatever you want to go here
- Whatever you want to go here
Line Breaks
I should've done this a lot earlier to be honest. To get a line break, you put this on the end of the line you want to go on a new line:
<br />On JetPunk, it will be autocorrected to have a slash after the 'br'. I think that you don't need to bother to do this when making lists as long as a new item starts on a new line. You will probably need a line break to get something on a new line.
Colour Styles
To change the text colour, you do this:
<font color="color"></font>
You can write either the color's name in the place where it says color
. For example:
Should look like this:
The quick brown fox jumps over the lazy dog.This is a good way to introduce colour into your post!
Fonts
For fonts, you do the same thing as with colour styles except the style changes to "style=font-family:font;". I think the fonts are the same as word fonts.
For example, if I want a heading in Times New Roman, this is what I'd do:
<h1 style="font-family:timesnewroman;">Heading</h1>This is what I get:
Heading
I think the actually name of the font has to be in lowercase letters. I don't think you need a hyphen between the font words if it's more than one word.
Back to Top
)
Click here