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:
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=https://www.facebook.com>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 is
empty, it contains attributes only, and does not have a closing tag.
specifies the URL (web address) of the image:
<img src=”wrongname.gif” alt=”Flowers in china”>
The alt Attribute
alt 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
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
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
<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.
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 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
To add a background image on an HTML element, use the CSS
To add a background image on a web page, specify the background-image property on the BODY element:
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.