HTML For Formatting Blogs #1

+23

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 italics

Your 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 bold

You 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 say

You 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 me

To 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:


  1. Whatever you want to go first
  2. Whatever you want to go second
  3. 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:

<font color="blue"></font>

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
+1
Level 55
Sep 28, 2020
Edits: I fixed a few codes, added the dropdown menu, and added the Back to Top button
+7
Level 53
Sep 28, 2020
I'm glad you are restoring Malkiboy's blogs!
+3
Level 55
Sep 28, 2020
:)
+6
Level 78
Sep 29, 2020
Thanks for restoring these, I learnt a lot from them. I have however written out the details of each one in a literal "little black book" that I can refer to without having to open an extra tab and switch between the two.
+4
Level 55
Sep 29, 2020
Cool!
+1
Level 55
Oct 5, 2020
This blog was actually pretty important, it's hard to understand most things in the sequels without reading this!
+2
Level 55
Oct 6, 2020
do you know how Malkiboy inserted the code while not making the code happen? (i.e. if I do the paragraph thing, this is what happens:

)

+1
Level 43
Nov 17, 2020
How to change the BG color of a table?
+1
Level 65
Nov 17, 2020
How can you combine them?
+1
Level 55
Nov 17, 2020
Just type them one after another ie <p>Paragraph</p> <i>More text</i>
+1
Level 65
Nov 17, 2020
No like have it bold AND italics.
+1
Level 55
Nov 17, 2020
ok then do <b><i>Text</b></i>
+2
Level 65
Nov 18, 2020
Ok
+1
Level 60
Jan 4, 2021
Tip: for Comic Sans, you have to put in <p style="font-family:comicsansms;">
+1
Level 55
Jan 4, 2021
yes
+1
Level 65
Feb 10, 2021
I thought I was the only one who loved Comic Sans... :(
+1
Level 65
Jan 25, 2021
How do you make html code inactive?
+1
Level 65
Feb 10, 2021
I think he replaced it with inline CSS. If that's what you mean. Btw Pandora, you still have a bit of styling on the JetPunk drop down menus.
+1
Level 55
Feb 10, 2021
i know but if I edit it for all blogs some codes will be removed automatically
+1
Level 61
Feb 12, 2021
Thank you Pandora!
+1
Level 28
Mar 27, 2021
Very helping thank you!
+1
Level 55
Mar 27, 2021
You're very welcome! :)
+1
Level 28
Mar 27, 2021
+1
Level 68
Mar 27, 2021
Yaaah it worked!
+1
Level 53
Mar 30, 2021
I'm testing the button:

Click here

+1
Level 53
Mar 30, 2021
Yay it worked!
+1
Level 53
Apr 1, 2021
Now I'm testing the font!
+1
Level 60
Feb 23, 2022
Do you know how to make text invisible?
+1
Level 55
Feb 23, 2022
change text color to white, but it wont work on darkmode. if you want to see the actual way to make it invisible, youll need a < p > tag and style it accordingly
+1
Level 60
Feb 23, 2022
Oh wow I feel dumb lol, not realizing you just switched the color