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.
Sunday, January 24, 2021
Sunday, January 17, 2021
Friday, January 15, 2021
Thursday, December 31, 2020
Structure of HTML | Introduction to HTML | HTML Basics
What Is 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
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
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
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
div tag in html | html basic | purpose of Div tag in html | basic tags and syntax of html Document
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
hr tags in html | Center Tag In HTML | br 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
lists in html5 | types of lists in html | numbered lists bulleted lists and definition lists in html
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.
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
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
- Put the ags in pot filled with water
- Bring the pot to boil water
- Take of the pot , cover it and sit it for 12 min
- Remove the eggs from water
- 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 :
- Decimel
- lower-alphabets
- Upper alphabets
- lower roman
- 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
- Put the eggs in a pot filled with water
- Bring the pot to boil water
- Take off the pot, cover it and set it for 12 min
- Remove the eggs from the water
- Peel and eat
