Hello, all. This is the second blog about HTML for formatting blogs. Malkiboy, the author of the first blog, allowed me to make this blog since he didn't have enough time to make it.

Strikethroughs

To get a strikethrough, you do the following:

<s>
Whatever you would like to strikethrough
</s>

The outcome should look like this:

Whatever you would like to strikethrough

Horizontal Lines

To get a horizontal line, you do the following:

<hr>

Outcome:

---

Animated Text

<marquee width="60%" direction="up" height="19px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>

Notice where it says direction="up". That can be changed to "down", "left", or "right"!

The outcome for scrolling text (up) should look something like this:

This is a sample scrolling text that has scrolls in the upper direction.

Rainbow Text

Credits to user Abc85 for showing Malkiboy the code for this in his first blog.

To get rainbow text, you do the following: (Scroll right with the provided scroll bar to see all the code)

<h3 style="background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
The text you want to put
</h3>

Outcome:

The text you want to put

Note: As you go on, the colours will change in the colour order of a rainbow as you have more text.

Images

<img src="image URL">

You can use other tags to specify the image. For adding a border, type border="1" after "image URL". The border can be any number depending on how thick you would like it to be. To change the image size, type width="number" and height="number" after "image URL". And to change image align (whether it should be right, left, or in the middle of the code), add align="right", or align="left". So full image code would be like this:

<img src="image URL" border="0" width="15" height="17" align="left">

Link Tag Add-Ons

In the previous blog, you learned about the <a href tag. You can specify it with more complex code.

The first one is the target="_blank code. This makes it open in a new tab. Add it after the last quote in the normal code.

The second one is the title="title" code. You can specify a title for the link (in "title") so that when the user hovers over the link, it will say something.

The next one is the style="color:blue" code. This causes the link to always stay blue and never turn purple, despite how many people click on it. Here is the full code:

<a href="https://google.com" target="_blank" style="color:blue" title="Google">
Whatever you want the link to say
</a>

Outcome:

Whatever you want the link to say

You can also use it to link to an email address. When clicked, it will create a blank email with the recipient as the person you would like to email to.

<a href="mailto:someone@example.com">Send email</a>

Outcome: (this sends an email to me!)

Send email

Tables

I am now going to show you how to make tables. It is a complicated process, with many tags that you can add. The <th> tags are for a new row while <td> are for a new cell. Here is some example code (you MUST include the CSS):

<style>
table, th, td {
  border: 1px solid black;
}
</style>


<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Outcome (ignore the blue):

Month	Savings
January	$100
February	$80

Yes, I know what you're thinking. This table looks extremely basic. You can add a lot of things to make it look better. First, look at the <style> place. The border, as you can see is 1px. You can change that to a higher number to make it thicker. It also says "solid black" and you can change the colour of that, too. The tag gives your table a caption. To change font colour, do it the same way as shown in the first blog. <h1> to <h6> tags also work in a table, when enclosed in a tag.

Another thing is a table caption. Use the <caption> tag to give your table a caption.

Lastly, we will explore table classes. Basically, the classes are different types of table formats. The most commonly used one is the standard-table class. If you use this class, you can have a neat table with different types of text, borders, and captions. When using this class, you can use the th colspan tag to merge two cells. It is a bit complex, but the example down below shows it. You will mostly use this class.

A good outcome will use this code:

<style>
table, th, td {
  border: 5px solid blue;
}
</style>
<table class="standard-table">
<caption>Table Caption</caption>
<tr><th colspan="2">Monthly Savings</th></tr>
<tr><td>January</td><td>$100</td></tr>
<tr><td>February</td><td>$200</td></tr>
<tr><td>March</td><td>$300</td></tr>
</table>

Outcome:

Table Caption

Monthly Savings
January	$100
February	$200
March	$300

Yes, this may look very confusing. No worries! Let me run through the code.

First, the <caption> tag defines a table caption. This is not required if you have a header row like shown in this table. Now, you may notice the header row is a bit different. The colspan means that it merges the two top cells together. If there were three columns and you wanted to merge all three, the colspan would be equal to 3. As I said earlier, the <tr> tag defines a new row while the <td> tag defines a new cell in that row.

Note: For more information about tables, such as how to align them, go here.

Back to Top

---

Thank you for reading. Please tell me down in the comment section if anything is incorrect/you would like me to add anything. Thanks again :)