Thursday 28 July 2016

How to add heading in HTML-HTML5 or heading tags in HTML or websites?

Here are the steps to include heading in HTML pages or web pages of your website :-

HTML-HTML5 headings added using heading tags from h1-h6.h1,h2,h3,h4,h5,h6 are HTML headings

Headings are most important part of any document.We start any article, paragraph after giving their heading.you can also give heading before writing any article or description in HTML or web page by using Heading tags.Headings are defined with <h1> to <h6> tag in a HTML.


<h1> to <h6> have variation in size and importance.<h1> tag have bigger font size and most importance among all headings.while <h6> tag have smaller font size and most least importance among all headings.

Example:
<h1> Heading1</h1>
<h2> Heading2</h2>
<h3> Heading3</h3>
<h4> Heading4</h4>
<h5> Heading5</h5>
<h6> Heading6</h6>

Headings also important because search engine uses the headings to index the structure and data/content of your web pages/website pages.Also, user explores or view your pages through a heading of your document or page.So, it is necessary to provide a good heading.

Example:
HTML heading tags example:

<!DOCTYPE html>
<html>
    <head>
          <title>Paragraph Tag </title>
    </head>
<body>
<h1> Heading1</h1>
<h2> Heading2</h2>
<h3> Heading3</h3>
<h4> Heading4</h4>
<h5> Heading5</h5>
<h6> Heading6</h6>
</body>
</html>
output:-

https://androidbarclub.blogspot.com/


Please comment below !

Posted by at 1 comment: No image
Labels:

Saturday 23 July 2016

How to apply CSS to any element for html page ?

Here i explain, what is CSS and how to use ?


What is CSS ?
CSS stands for Cascading Style Sheet. CSS is used to provide layout to html pages easy and efficiently.We can apply same CSS style to individual item or single page or multiple pages.
External CSS stylesheet can be apply to multiple pages.This is very helpful ,when you want same style for your website.

 how to apply CSS?
we have syntax to apply CSS.
Syntax:element where have to apply{property:value;}

 example: img { width: 200px; height: 200px;}

 For apply CSS to any HTML element, we have to define CSS selector for particular HTML element.For these we have these selector.

 1. Element selector 
This selector apply CSS to that HTML element that is define by Element.

 Example: If we want to apply text color to paragraph using CSS.Follow these instructios:-
<style>
    p{color:red;}
</style>

 2. Id selector 
This selector apply CSS to HTML element which is define with id attribute.

 Example:If we want to apply text color to paragraph using CSS which is define by Id. Follow these instructios:-
<style>
    #par{color:red;}
</style>

 3. Class selector 
This selector apply CSS to HTML element which is define with class attribute.

 Example:If we want to apply text color to paragraph using CSS which is define by class. Follow these instructios:-
<style>
    .par{color:red;}
</style>

 If you want to apply same CSS for different HTML elements,you can do this by following:-
Example:-
<style>
    h1,p{color:red;}
</style>
Posted by at No comments: No image
Labels:

Thursday 21 July 2016

HTML Paragraph Tag | Paragraph tag HTML is used to add Paragraph in web page website

HTML Paragraph Tag used to add paragraph in web page or website with properties


1.Paragraph tag is an HTML tag which is used to insert a paragraph.

2.Paragraph tag is start with start tag <p> and end with end tag </p>.Something typed or written in this tag shows as a paragraph on a web page.


3.Here are some elements used with paragraph tag like align(Left,Right,Justify) to set the location or format of a paragraph.


4.You can also use "<pre></pre>" tag for paragraph.This tag provides proper space between the word that makes paragraph easy to read and look neat and clean.In this tag when you press "Enter" after typing the first line and type the second line.so second line show after the first line without using break tag <br>.


Paragraph tag Example:


<!DOCTYPE html>

<html>

    <head>

          <title>Image Tag </title>

    </head>

<body>

<p>This is a paragraph with paragraph tag. </p>

<p>This is a muliple line paragraph with paragraph tag. 

This is a muliple line paragraph with paragraph tag.

This is a multiple line paragraph with the paragraph tag.

</p>

<pre>This is a multiple line paragraph with the paragraph tag. 

This is a multiple line paragraph with the paragraph tag.

This is a muliple line paragraph with paragraph tag.

</pre>

</body>

</html>

Paragraph tag
Paragraph tag

Please comment if you like it.THANKS


Posted by at No comments: No image
Labels:

Monday 18 July 2016

Html Link tag | How to insert link or anchor tag in html

Here are the Steps to insert a link in html or html5 page or website:-

1.HTML links are hyperlinks that help us to navigate different information or data on the internet using web pages. One click on the link help you to jump to another document or other web page.

 2. A Html Link cannot only be apply on the text, you can apply it on images or any other element.
Html link tag 3.To insert link or hyperlink in html, we use <a> </a> tag.

  Example:
<a href="http://www.google.com/" >GOOGLE </a>

    In the above example,when you click on GOOGLE text it takes you to "http://www.google.com/" address on the internet.

 4. You can also connect to other pages using html links as a local links.
    Example: <a href="main_index.php">Home</a>

      In the above example,when you click on Home text it takes you to "main_index.php" page.Html link tag

 5.You can also use target attribute to define where the new link will be open on the browser window or tab.These attribute are _blank, _parent, _self(default), _top.
Example: 
<a ref="main_index.php"target="_blank">Home</a>

     when you click on Home ,Home page will be open in new tab/window.Html link tag

 6.You can also apply link on images or other elements.
    Example:
<a href="main_index.php"><img src="images/home.png" width="100px" height="100px"></a>

 Full Description:
Html link tag <!DOCTYPE html>
<html>
    <head>
          <title>Image Tag </title>
    </head>
    <body>
<a href="https://www.google.com/">Text Link</a></br>
<a href="https://www.google.com/"><h1>Heading Link</h1></a></br>
<a href="image.html"><img src="images/click_buuton.png" alt="No Preview" width="200px" height="100px"></a>
    </body>
</html>

 The output is:-

Html Link tag
Html Link tag















Please comment to suggestions and improvements or email me for any questios.

Html link tag
How to add image in HTML , HTML5 or add image in your Website 
https://androidbarclub.blogspot.in/2016/07/how-to-add-image-in-html-html5-or-add.html

Posted by at No comments: No image
Labels:

Wednesday 13 July 2016

How to add images in HTML or HTML5 using Image tag

Here are the Steps to insert or Display images in html,html5 or web page using <img> tag :


Html Image Tag
1.Image tag(<img>) is used to add images in html page or website.

 2.Image tag have attributes like :src, alt, width, height, align.

 3.Almost all latest browser support <img> tag.

 4.Put Image tags <img> </img> tag in <body> tag in your web page.
Html Image Tag
Example:
<body>
<img src="image/light.jpg" alt="No Preview"/>
</body>

 5."src" attribute provide the link or path of the image either local or internet link.while the alt attribute display text of alt attribute when image path is not correct or unavailable.It will look like the below image.Html Image Tag

Html image tag


Html Image Tag

6.Earlier version of HTML are also support other <img> tag attribute like: hspace, aligh, border.
But HTML5 does not support these attributes.


Example:

<!DOCTYPE html>

<html>
    <head>
          <title>Image Tag </title>
    </head>
    <body>
<img src="http://www.like.com/images/quote.jpg" alt="No Preview" width="300px" height="300px">
    </body>
</html>
Html Image Tag
  The output of above code is:
Html image tag

Posted by at 1 comment: No image
Labels:

Tuesday 12 July 2016

Internal CSS | How to use Internal CSS in HTML Web page

Here is the Steps to apply Internal CSS in your web page for single HTML page:

1. Internal CSS is used to apply Style to single Html Page or Web page.
Internal CSS
 2.For define Internal CSS in Html page you have to insert style( <style> </style>) tags within the head(<head>) tags.
For Example:
<head> <style></style> </head> 

   3.In between these style tags, you can define a style for different tags and items for your HTML page.
Internal CSS Example:
<style> h1{font-size:150%;} </style>

In the above example, we apply font-size to heading tag with help of Internal CSS. We can apply a different style to different items with help of Internal CSS on your Html web page.
4.If you are using div(<div>) tags in your Html page ,so in this situation, we can also use id,class to apply CSS.
Continue Reading...
Posted by at No comments: No image
Labels:

Monday 11 July 2016

Use of Inline CSS in html | How to apply inline css

Inline CSS

Inline CSS is used to apply style to Html elements.Use Inline CSS within the html tag where you want to apply.

 1.Create a html page with .html extension.

 2.Put some html tags to apply inline CSS for individual item. For example :here we put a heading tag and a paragraph.

 <h1>Hello Red</h1> <p>Hello Blue</p>

 3.To apply inline CSS we use "Style" attribute within the heading and Paragraph tag different for heading and paragraph tag. like 

 <h1 style="color:red;">Hello Red</h1>
<p style="color:blue;font-size:150%">Hello Blue</p>

 Here the example of Inline CSS:

           <!DOCTYPE html>
      <html>
      <head>
          <title>Inline CSS </title>
      </head>
      <body>
Inline CSS
       <h1 style="color:red;">Hello Red</h1> 
       <p style="color:blue;font-size:150%;">Hello Blue</p>
      </body>
      </html>
The output is shown below:
Inline CSS
Inline CSS

Please comment for suggestions! Enjoy Learning web Development.
Inline CSS


Posted by at 1 comment: No image
Labels:

Thursday 7 July 2016

Html Image Audio Tags | How to Add Images and Audio in Html


Image, Audio tags in Html or Html 5 page used to add Images and Audio in web pages.

   To Add Images:

 1.Type Image tag <img> Within body Tag of your web page to insert picture in your web page.

 2.Provide the image path in the image tag with help of "src" keyword or attribute

 ex:<img src="image/light.png"></img>

 3.You can also describe the Width and Height for the image.

 Html Image Tag Example:
<img  src="image/light.png" width="200px" height="300px"></img>

Note 1 : You can avoid  typing pixel(px) for Width and Height.

 Note 2:If you do not define the width & height of image then it will automatically cover space of your web page according to original width & height of the image.
   
 To Add Audio File:
1.Type Audio tags <audio controls> <audio> Within body Tag of your web page to insert the audio file in your web page.you can add Mp3, Wav, Ogg format file using this tag.

The controls attribute adds audio controls like: play, pause, and volume control.
Html image and audio tag
2.Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.so another tag is used for audio file with in the <audio> tag.

 3.we use <source></source> tag for audio files.use src and type attribute for providing audio file path to audio file destination.while type attribute provide the format of audio file.

 Html Audio Syntax:

 <source src="horse.mp3" type="audio/mpeg">

Html Image And Audio tags Example:

 <!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="Not available" width="128px" height="128px">
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

 </body>
</html>

Html audio image tags


 Please comment and you can ask any question, if you have. THANKS
Html image and audio tag
Posted by at 2 comments: No image
Labels:

How to create HTML page or Web pages-Website in Html simple



To create any HTML simple web page you need to follow these steps:-

Html page 1.Open a new document anywhere on the computer where you can easily locate it and save it with extension (.html).

 2.Now Open .html file with any Text Editor like Notepad++ or Edit Plus or you can  open with Windows Notepad.

 3.Start a Html tag with Symbol <html> and close with </html> tag. You have added all other HTML tags between these two tags.

 4.Now put Head "<head></head>" tag within HTML tags.Head tag is used to provide information about your page in the browser that helps to load your pages on browsers. It also used to attach internal or external CSS ,javascript in your pages.

 5.Head tag is also included tiltle "<title> </title><title> </title>" tags which is used to provide title to your web page it shown on the title bar of your web browser.

 6.Now is the main part of your page is the body part that will show on the browser window.It start's with opening body tag <body> and close with </body>.

 7.After creating body tags now you can add you contents on your web page with the help of different HTML tags.

For example, we can add text headings in your web page by using heading tags.There are six heading tags for different font size.
From <h1></h1> to </h6></h6> are heading tags that can be used to provide Headings in html.
Html page
Example HTML page: Take an example we add "Hello Jenny" word with heading tag <h1>.

<html>
    <head>
          <title>My First Text on Web </title>
    </head>
    <body>
           <h1>Hello Jeanny</h1>
    </body>
</html>

create HTML page

create HTML page

Html page


Html page
Related Post:


Please Comment and provide any suggestion!! THANKS

Posted by at 1 comment: No image
Labels:
Location: India
Subscribe to: Posts (Atom)