Html basic codes

Hello everyone today we are going to learn some new codes hope you all enjoy.

The codes that I’m going to teach you is about style also size of font and background colour and html link and also how to add any picture on your website so let’s go for it:

basic html codes

This codes are for the colour:



<h1 style=”colour: blue ;”>This is a heading</h1>

<p style=”colour: red;”>This is a paragraph.</p>



Note: This code is for giving colour your paragraph and heading so any colour you want you can use it here but don’t forget to mention that colour that you want to use for your paragraph or heading.

Mention the color that you want to use like that is mention above.

This code is for making the paragraphs and headings to bring them in the medial:



<h1 style=”text-align: centre;”>Cantered Heading</h1>

<p style=”text- align : centre ;”>Cantered paragraph.</p>



Write this code for making the texts to come in medial of page in your website.

This code is for font size:

Use this codes for having any font size in your paragraph or heading and body



<h1 style=”font-size:300%;”>This is a heading</h1>

<p style=”font-size:160%;”>This is a paragraph.</p>



Yeah so same like giving colour your paragraph also heading this is also the same here but when you want to make the font size mention the size for the font you want
similarly like the example given above.



<h1 style=”font-family : verdant;”>This is a heading</h1>

<p style=”font-family :courier;”>This is a paragraph.</p>



basic html codes

In html every font have their name like above example they all have their name so you can write their name in state of mentioning their size.

HTML Links – Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

<a href=”url“>link text</a>

<a href=” here the url means the link of any website that you want to add put that link here and don’t forget to close that at the end.

Example: <a href=>like this you can add here any link of a web page</a> and close the paragraph you have started that your code should work.

HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src=”wrongname.gif” alt=”Flowers in china”>

The alt Attribute

The attributealt provides an alternate text for an image if the user for some reason cannot view it and because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Note: first you have to download any image you want and then save that as a (jpg) file in the folder and in the code you have to mention the name of the picture like the example given above.

Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.


<img src=”img_girl.jpg” alt=”Girl in a jacket” style=”width:500px;height:600px;”>

And with this code chose size of the image the code is as simple as the example given

Images in another Folder

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:


<img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

so Here if you had saved the image in any other folder thus you have to mention the name of the folder where you have saved the image mention the name of the folder just like this:

<img src=”/put name of the folder where you have saved the image than put a / and then write (jpg) and the rest are the same as the example given.

Related:- How to Set Icon on Nav in WordPress
How to Start HTML Basic Codes of The Day

Animated Images

HTML allows animated GIFs:


<img src=”programming.gif” alt=”Computer Man” style=”width:48px;height:48px;”>

Now you can add gifs inside your website with this code

basic html codes

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:


<a href=”default.asp”>
  <img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>

and add any image as a link and with a click on the link any one can see the image

Background Image

To add a background image on an HTML element, use the CSS property background-image:


To add a background image on a web page, specify the background-image property on the BODY element:

<body style=”background-image:url(‘clouds.jpg’);”>

<h2>Background Image</h2>


Chapter Summary

the HTML <img> element to define an image

the HTML src attribute to define the URL of the image

Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed

Use the HTML width and height attributes to define the size of the image

Do Use the CSS width and height properties to define the size of the image (alternatively)

Use the CSS float property to let the image float

Use the HTML <map> element to define an image-map

Do Use the HTML <picture> element to show different images for different devices

Note: Loading images takes time. Large images can slow down your page. Use images carefully.

Suggested:- Best laptop for programming in 2019
how to create a password for a folder

ali zahedi

i am ali zahedi student of computer science

You may also like...

3 Responses

  1. Free Stuff says:

    I抦 impressed, I need to say. Really hardly ever do I encounter a weblog that抯 each educative and entertaining, and let me tell you, you might have hit the nail on the head. Your thought is outstanding; the difficulty is one thing that not enough people are speaking intelligently about. I am very joyful that I stumbled across this in my search for something referring to this.

  2. GuQinPu says:

    Thanks for discussing your ideas with this blog. Also, a myth regarding the banks intentions while talking about foreclosures is that the loan company will not take my installments. There is a fair bit of time which the bank requires payments occasionally. If you are also deep within the hole, they’re going to commonly call that you pay the payment 100 . However, i am not saying that they will have any sort of repayments at all. When you and the loan company can find a way to work a little something out, the foreclosure process may stop. However, if you continue to pass up payments beneath new plan, the home foreclosure process can just pick up where it was left off.

  3. We’re a group of volunteers and starting a new scheme in our community. Your site offered us with valuable info to work on. You’ve done an impressive job and our entire community will be thankful to you.

Leave a Reply

Your email address will not be published. Required fields are marked *