How to Use HTML Code Essential (Beginners Guide)

Many are afraid of coding because they are not aware of HTML code for website or blog. Here, on one page, I will try to make the whole thing more accessible for beginners.  It is necessary to mention here that you will probably need to know about the use of such essential HTML code in many ways during the internet use. Hopefully, this concept of the HTML code for website mentioned below will provide different fun or freedom even when you create your Blogger blog.

So, what is HTML?

The full meaning of HTML is (Hyper Text Markup Language) which is used to create web pages and web applications.

Let's Know About The Basic Knowledge of HTML

To make it easy to understand, I'm presenting the ultimate HTML cheat sheet, and you can use the codepen.io site to get the results, or if you want, you can use the code below to copy and paste directly into your blog. But of course, look at the code structure to understand the use of HTML code for Website or Blog.

About HTML Header Tag

In the beginning, we will know about the HTML Header Tag, where H1/H2/H3 with your original header text and this tag is added at the beginning and end of the original header text. Which will be placed in the middle < > of this special letter at the starting and close with </ > this special letter. See examples:

<h1> Your H1 Heading Text </h1>

<h2> Your Sub Heading Text </h2>

<h3> Your Minor Heading Text </h3>

Paragraphs

Likewise, paragraphs are similar to the header tags, and these are the main text for your website or blog, See examples:

<p> Here you will write many lines of writing </p>

<p> Again some text lines </p>

Also, you can keep the text in the middle of <div> and </div>. You can notice this in the HTML compose of Blogger's blog post. See examples:

<div> Again some div text lines </div>
or
<span> Again some span text lines </span>

Underlined Text

Everyday things like underline your text

<u>Your underlined text</u>

Italic Text

To make your text italicized

<i>Text to change in italic design</i>

Emphasized Text

Italics look like text, referring to the text should be emphasized when reading.

<em>Your emphasized text</em>

Bold Text

To increase the weight of your font

<b>Your bold text</b>

Strong Text

It looks similar to the previous Bold text, but it is possible to express it differently, which forces the reader to read or understand.

<strong>Your strong text</strong>

Strike-through

It keeps a line through your text that helps you differentiate your thoughts.

<s>Your Strike-through text here</s>

Highlighted Text

it's a thing like this that you use the background color to highlight your text.

<p style="background-color:#C9F5C4"> Your highlighted text  </p>

Block Quotes

Such texts are used when quoting someone or for a specific part of your text.

<blockquote>Your quoted text here</blockquote>

Line Breaks

The issue of Line Breaks in HTML is using this code<br/>. Which you can use in paragraphs, heading, Italic Text, bold text. Or anywhere in the HTML Template where you want to line breaks.

<br/>

At the end of text lines.<br />

Links Use

Basic Text Link

In the case of HTML, the link code line is such that you change your link text and links.

<a href="http://www.yourlink.com">Your linked text</a>

Open Link in New Tab

And the link code line is such that after adding an extra part to make the link open in a new window.
<a href="http://www.yourlink.com" target="_blank">Your linked text</a>

Link To An Email Address

This email link opens the user's email program for quick email delivery. You can replace your own email address here:

<a href="mailto:you@youremailaddress.com">Your email address or link</a>

 Link To An Email Address With Subject Line

The same thing if you want to add Subject to email. That means you will be able to determine what the subject of the email sent through click on the link.

<a href="mailto:you@youremailaddress.com?subject=Your%20Email%20Subject">Your email address or link</a>

Anchored (“Jump”) Link

<a name="backtotop"></a>
Then, add the anchor to your link that the user will click on to jump to that section:

<a href="#backtotop">Back to top</a>

Images

Basic Image

<img src="https://www.yoursite.com/yourimage.jpg" alt="describe this image"/>

Image Link

<a href="http://www.yourlink.com"><img src="https://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

Image Link Opens In New Window

<a href="http://www.yourlink.com" target="_blank"><img src="https://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

Image Width and Height

<img src="https://www.yoursite.com/yourimage.jpg" alt="describe this image" width="450" height="600"/>

Align Image to Left or Right of Paragraph

<img src="https://www.yoursite.com/yourimage.jpg" alt="describe this image" align="left"/>

Use of CSS

Font Family

<span style="font-family: Arial, Helvetica, sans-serif;">Your new font</span>

Font Size

<span style="font-size:16px;">Your font in a new size</span>

Font Color

<span style="font-color:#030303;">Your new font color</span>

Backgrounds

Place these codes in between <style> and </style> tags in the <head> section of your website’s.

Page Background Color

body {
background-color:#c3c3c3;
}

Repeating Background Image

body {
background-image:url (https://www.yourwebsite.com/background-image.jpg);
background-repeat:repeat;
}

Change the above red “repeat” if you want the image to only repeat vertically: repeat-y
Change the above red “repeat” if you want the image to only repeat horizontally: repeat-x

Non-Repeating Background Image

body {
background-image:url(https://www.yourwebsite.com/background-image.jpg);
background-repeat:no-repeat;
}

Top Centered Non-Repeating Background Image

body {
background-image:url( https://www.yourwebsite.com/background-image.jpg );
background-repeat:no-repeat;
background-position: top center;
}

Top Centered Vertical Repeating Background Image

body {
background-image:url(https://www.yourwebsite.com/background-image.jpg);
background-repeat:repeat-y;
background-position: top center;
}

Lists

Ordered List

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

Unordered List With Bullets

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Unordered List With Different Bullet Types

<ul>
<li style="list-style-type:square">List item 1</li>
</ul>

Unordered List with Custom Image Bullet

<ul style="list-style-image:url('https://yourimageurl.com/yourbullet.jpg')">
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
 </ul>

Conclusion

Using the code mentioned above, you will notice that while creating a blog or website with HTML5, Simultaneously, CSS is used to publish these codes through various designs. Also, different functions like slides are made using Java. However, if you are new to Java, it is optional for you to create a website or blog for HTML5.

So only to know about the use of CSS. When you use a template, you should start to know about using CSS and to learn more about this CSS, learn from the "w3school" website to change the design quickly. In this way, it will take a few days to learn how to design a website or Blogger blog template using HTML5 if you are interested.

Finally, I will say: Of course you know, everyone should know about using HTML5, if you want to take advantage of internet usage and learning about HTML5 is really very short-course. So why do you ignore?