Every Day inspire yourself with a great effort

Always believe on your self bbbecause which you can do no one can do.

Take a Deep breath

Dression consume your mental health and make your creativity down.

Grow your Mind with the Time

Every Child has a Great creative mind with a lot of mature sense

Education is what you gain

Do you really thing you are going to the right way ? please go on .

a victory is always remains victory either

you are getting education going to be developer or you are in the field of sports.

Thursday, December 31, 2020

Structure of HTML | Introduction to HTML | HTML Basics

By APK Pure December 31, 2020   No comments

 

 What Is HTML

Structure of HTML Introduction to html




HTML stands for Hypertext markup language , in html markup mean just marking the element on screen with its tags  there are some basic tags used to create complete structure of any page 
Html hag both Starting and Ending tags Some tags are use individually they don't Have Ending tags 
For Example <img> is tag which used to tag image but its does not use Ending tag  
The Structure of HTML is given bellow
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Html Structure</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    
</body>
</html>
Tags And Explanation
<!DOCTYPE html>
This Tag is mention in the First line of the HTML document which shows the document file type
and help the purser to read the complete Document
<html>
This Is the starting Tag of Html which has a lot of other tags with their functions HTML has both stating and ending tag
its syntax is
<html> </html>
<head>
Head Section is basically meta section it has more other tags like linking to CSS
linking to JavaScript linking to bootstrap etc. it also has to start and end tags and it always
closed before body section
<head> here we put meta tags </head>

Thanks For Visiting My blog Next tags will explain in New Post
Stay Connected For More Information
Read More

tags | html tags | html image tag | html div tag | html iframe tag | img tag | html link tag | introduction to html | w3schools bootstrap span tag in html

By APK Pure December 31, 2020   No comments

 

html Tags



                                                                 HTML TAGS

                            Basic TAGS in HTML  

Before starting basic html we discus about syntax of html 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Html Structure</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    
</body>
</html>
Basically this is the initial structure of html which you use in all html documents
in this syntax we use all kind of tags
so lets move to tags

Lets begin From heading Tag 

basically heading tags are used to write a heading on a page  in different ways and form 
there are basically 6 heading tags are used in html documents 
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
these are the tags which are sued to form headings in different slypes or according to use
These all heading tags have combine tags 
its means that they haver both starting and ending tags 
<h1> </h1> is written like this 
lets go to code and perform a practical  
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Html Structure</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <h1>i am first heading </h1>
    <h2>i am second heading </h2>
    <h3>i am third Heading </h3>
    <h4>i am forth Heading </h4>
    <h5>i am fifth Heading </h5>
    <h6>i am sixth Heading</h6>
</body>
</html>

you can copy this code and try by yourself for practice

lets more on to output of this code on browser

wow the great output you will see after execution of code

after the heading tag lets more on paragraph tag

paragraph tag is basically represented by <p> is has also starting and ending tag
this tag is used when we have to write a statement about a specific topics
or we want to make some paragraph in out statement
the actual syntax of paragraph is
<p> this is paragraph </p>

lets move on practical of this tag

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Html Structure</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
   <p>hallo i am paragraph one and i am teaching you about basics of html... </p>
   <p> after html we will move on css javascript and php and much more so keep connected </p>
</body>
</html>


Copy this file or try this by yourself own self
let's move to the output screen

This was the lecture hope you like it
will meet in next post stay connected and give your precious feedback about our work








Read More

div tag in html | html basic | purpose of Div tag in html | basic tags and syntax of html Document

By APK Pure December 31, 2020   No comments

purpose of div tag in HTML

 

                Div Tag In HTML

Definition and   Usage 

The <div> tag is define as decision of HTML documents 
The <div> tag is  usually used as container For HTML elements 
which can be styled later by using Css 
The <div> tag is easily styled by using class and Id 
All sort of content is write in between <div> tag


Code For <div > tag is 


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Html Structure</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
   <div class="mydiv">
       this is first dive of HTML document
   </div>
   <div class="div1">
       this is second div of HTMl document
   </div>
</body>
</html>

Out of this will be shown on the browser





this tag can be styled by using CSS we will discuss css very soon


if you like this blog please share and Comment


Read More

hr tags in html | Center Tag In HTML | br tag in HTML

By APK Pure December 31, 2020   No comments

 

hr tag in html


Hr Tags In HTML 

When we use <br> tag in HTML Document Everything Sarts From new Line  
Basically, this tag has Nothing inside like other tags like a paragraph tag 
 heading tags or 
all other tags respect <br> tag 
When we put <br> tag in HTML documents we give some space between
 br and forward slash 
Like <br /> 

Example of <br /> Tag

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Html | Tags</title>
    <meta name='viewport' content='width=device-width, 
initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen'
 href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <p>In this lesson we are going to understand horizantal line 
Tag
        when we use <br /> Tag Everything Starts From New Line 
    </p>
</body>
</html>

Try this Your own self

In Above Example we can see the <br> tag is used
and the output can
be shown on the screen which is given bellow





Center Tag In HTML DOCUMENT

When even we use Center Tag in HTML Document Everything Shown in Center on screen
this Tag really helpful whenever we want to use minimum lines of code to put the HTML
Document in the Center
The Syntax of Center Tag is <Center ><Center />
As this Tag is Pair Tag that's why is Has many other tags and statements inside it
Lets Discus its example

Example :

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Center Tag in HTML</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <p>In this lesson we are going to understand horizantal line 
Tag
        when we use <br /> Tag Everything Starts From New Line 
            </p>
    <center><p>In this lesson we are going to understand horizantal line Tag
        when we use <br /> Tag Everything Starts From New Line 
            </p>
    </center>
</body>
</html>

Try This By yourown self



This Document will show Output Like





hr Tag in HTML

Hr tag is used to draw a horizontal line in HTML DoCument
Whenever we use <hr> tag in HTML Document it Starts from Center of Document
And breaks the document from Left to Right margin
hr tag can be used in paragraph tag or we can use this any ehere in html Document
To understand <hr> tag Lets Discuss an example :


Example :


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Center Tag in HTML</title>
    <meta name='viewport' content='width=device-width,
 initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen'
 href='main.css'>
    <script src='main.js'></script>
</head>
<body>
             <p>I am a paragraph with out Horizantal line 
            </p>
            <p>
                I am paragraph with <hr> i this paragraph
 use can see the Horizantal line 
                is drawn in HTML Document 
            </p>
</body>
</html>

Try this by yourself

OutPut od this HTML Document will be :




This Lesson Is Ended up


Thanks for Reading This Blog

Kindly Share This with your friends And stay Connected




Read More

lists in html5 | types of lists in html | numbered lists bulleted lists and definition lists in html

By APK Pure December 31, 2020   No comments

 

                        Types of Lists In HTML  

In this Post, We will Discus which is totally different than other Tags in HTML 
Lists Are used in many ways and purpose 
the outline of this Post is :
  • Create numbered List in HTML 
  • Create bulleted list In HTML
  • Create Definition List in HTML
A brief overview of the List :
Every list used in the HTML document has a Unique purpose  for example 
A number list is used for presenting things e.g Top 5 best songs, top five development 
site  etc 
a bullet list is usually called a default list is not a numbered list but use to show
 the items with bullets.



html lists






Important Note :
In Old HTML 
There are two additional lists were used which are as follows 
  • Menu List 
  • Directory list
All Tags in HTML have common elements Like
In HTML every list has its own outer list for example 
<ul> 
        <ol>
        </ol>
<ul>
same as list item has own tags like 
<dt> <dd>
in List item the Closing tags of <dt> and <dd> are optional but using the 
closing tags is good practice 
like 
<li> <dt> <dd> </dt></dd></li>
lets move on coding 
Unorder list 
Unordered lists are often referred to as bulleted lists. Instead of being numbered, each
element in the list has the same marker. The markup to create an unordered list looks just
like an ordered list except that the list is created by using <ul>...</ul> tags rather
than ol. The elements of the list are placed within <li> tags, just as with ordered lists  
Code for un order list 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Types of list in html</title>
    <meta name='viewport' content='width=device-width,
 initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' 
href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <p>today we are going to under the type of lists in HTML </p>
    <ul>
        <li>i am item  </li>
        <li>i am second item</li>
        <li>i am third item</li>
    </ul>
    <p>an other example </p>
    <ul>
        <li> pakistan</li>
        <li>india</li>
        <li>china</li>
        <li>america</li>
    </ul>
</body>
</html>
YOU CAN TRY IT :

THE OUTPUT WILL BE

today we are going to under the type of lists in HTML

  • I am item
  • I am the second item
  • I am the third item

another example

  • Pakistan
  • India
  • china
  • America
Numbered Lists OR  Order List
Number list is Also called order list and the sntex of writing order list is
<ol> </ol>
every item in in order list is listed with <li> tag same as un order list 
when out put is shown on browser every element in order list is ordered by
number
there is no need of giving numbers to any element while you are going to
 write order list 
if you add or delete any element it automatically renumber the elements 
this List is used when all elements are relevant to each other 
or there are steps include in any kind of work .
lets consider and example of boiling eggs :
example :
coding for boiling eggs
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>order list in html</title>
    <meta name='viewport' content='width=device-width,
 initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' 
href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <h1>process of boiling eggs</h1>
    <ol>
        <li>put the ags in pot filled with water</li>
        <li>bring the pot to boil water </li>
        <li>take of the pot , cover it and sit it for 12 min </li>
        <li>remove the eggs from water </li>
        <li>peel and eat </li>
    </ol>
</body>
</html>
Try this code :
Output of this code :

process of boiling eggs

  1. Put the ags in pot filled with water
  2. Bring the pot to boil water
  3. Take of the pot , cover it and sit it for 12 min
  4. Remove the eggs from water
  5. Peel and eat
In above example you cn see the output of order list in which 
every element is listed with a number


Order list can be contumized as :
  1. Decimel 
  2. lower-alphabets
  3. Upper alphabets
  4. lower roman
  5. Upper roman
To specify the type of order list <style> tag is used 
for example we want to make a list of sequence using 
Lower alphabets 
We can use :
<ol style=“list-style-type: lower-alpha;”> 

as we know  the oder list is listed with decimel numbers
if you want to write the above steps using lower alphabet  then 
The code will be :
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>order list in html</title>
    <meta name='viewport' content='width=device-width, 
initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' 
href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <h1>process of boiling eggs</h1>
    <ol style=" list-style-type: lower-alpha ;"> 
        <li>put the ags in pot filled with water</li>
        <li>bring the pot to boil water </li>
        <li>take of the pot , cover it and sit it for 12 min </li>
        <li>remove the eggs from water </li>
        <li>peel and eat </li>
    </ol>
</body>
</html>

The output of this code will be :

process of boiling eggs

  1. Put the eggs in a pot filled with water
  2. Bring the pot to boil water
  3. Take off the pot, cover it and set it for 12 min
  4. Remove the eggs from the water
  5. Peel and eat


Read More