यदि आप एक वेब पेज बनाना चाहते है !! तो आप यह इस example के द्वारा बना सकते है !
आप इसे दो तरीके से बना सकते है
1 . आप पहले अपने HTML को डिजाईन कर उसे separately stylesheet के साथ connect कर सकते है
for example :-
<!DOCTYPE html>
<html>
<head>
<title> my first page with css</title>
<link rel="stylesheet" href="style.css">
<h1>SKILLGAINERS </h1>
<h2> <marquee> Learn how to make webpages!!</marquee></h2>
</head>
<body>
<nav>
<ol>
<li>
lesson1
</li>
<li>
lesson2
</li>
<li>
lesson3
</li>
<li>
lesson4
</li
</ol>
</nav>
<h3>
!!This is the way you can make a webpage.!!
</h3>
<form>
<table border="2px" color="black">
<tr>
<th>
<p> This blog is for those who want to learn and grow, for those who have big hearts to share with the society.</p>
<p>so, who ever is intrested to contribute in this blog can share his or her mail id with me and i will give the athority to those who is intrested</p>
<p>!!Also if i will be having any profit with this blog i will definately share the profit as well.!!</p>
</th>
</tr>
</table>
</form>
<div>
<form>
user ID :<input type="text" name="user_id"/> <br><br>
password :<input type="password" name="password"/>
</form>
</div>
</body>
</html>
आप इस example मे देख सकते है ,की इसमे मैंने CSS नहीं डाला है ! और इसमें मैंने बस link डाला है ! जो की yellow color से highlight कर दिया है !
मैं यहाँ अपनी CSS file की coding भी mention कर रहा हु जो इसके डिजाईन मे use किया गया है !
आप इसे अपने आप practice कर सकते है !
यदि आप को कोई भी परेशानी हो तो आप मुझसे सवाल कर सकते है !!
body{
margin:0px;
font-family:'arial';
width:80%;
padding-left:10%;
padding-right:10%;
}
li {
color:blue;
}
h1{ padding:10px;
background-color:blue;
text-align:center;
color:white;
}
h2{
text-align:center;
color:red;
}
h3{ padding:10px;
text-align:center;
}
nav{
line-height:30px;
background-color:#d5d8d9;
height:300px;
width:15%;
float:left;
padding:5px;
}
div{
text-align:center;
padding:20px;
}
और यदि आप इसे separately use करने के बजाय एक ही साथ इस्तेमाल करना चाहते है तो आप को केवल इतना करना है की आप इस HTML CODE के HEAD मे <style> <style/> लिख कर उसमे ये css कोड डाल सकते है !!
इसका भी EXAMPLE मैं नीचे mention कर रहा हु !!
<!DOCTYPE html>
<html>
<head>
<title> my first page with css</title>
<style>
body{
margin:0px;
font-family:'arial';
width:80%;
padding-left:10%;
padding-right:10%;
}
li {
color:blue;
}
h1{ padding:10px;
background-color:blue;
text-align:center;
color:white;
}
h2{
text-align:center;
color:red;
}
h3{ padding:10px;
text-align:center;
}
nav{
line-height:30px;
background-color:#d5d8d9;
height:300px;
width:15%;
float:left;
padding:5px;
}
div{
text-align:center;
padding:20px;
}
</style>
<h1>SKILLGAINERS </h1>
<h2> <marquee> Learn how to make webpages!!</marquee></h2>
</head>
<body>
<nav>
<ol>
<li>
lesson1
</li>
<li>
lesson2
</li>
<li>
lesson3
</li>
<li>
lesson4
</li
</ol>
</nav>
<h3>
!!This is the way you can make a webpage.!!
</h3>
<form>
<table border="2px" color="black">
<tr>
<th>
<p> This blog is for those who want to learn and grow, for those who have big hearts to share with the society.</p>
<p>so, who ever is intrested to contribute in this blog can share his or her mail id with me and i will give the athority to those who is intrested</p>
<p>!!Also if i will be having any profit with this blog i will definately share the profit as well.!!</p>
</th>
</tr>
</table>
</form>
<div>
<form>
user ID :<input type="text" name="user_id"/> <br><br>
password :<input type="password" name="password"/>
</form>
</div>
</body>
</html>
thank you:
धन्यवाद
आप इसे दो तरीके से बना सकते है
1 . आप पहले अपने HTML को डिजाईन कर उसे separately stylesheet के साथ connect कर सकते है
for example :-
<!DOCTYPE html>
<html>
<head>
<title> my first page with css</title>
<link rel="stylesheet" href="style.css">
<h1>SKILLGAINERS </h1>
<h2> <marquee> Learn how to make webpages!!</marquee></h2>
</head>
<body>
<nav>
<ol>
<li>
lesson1
</li>
<li>
lesson2
</li>
<li>
lesson3
</li>
<li>
lesson4
</li
</ol>
</nav>
<h3>
!!This is the way you can make a webpage.!!
</h3>
<form>
<table border="2px" color="black">
<tr>
<th>
<p> This blog is for those who want to learn and grow, for those who have big hearts to share with the society.</p>
<p>so, who ever is intrested to contribute in this blog can share his or her mail id with me and i will give the athority to those who is intrested</p>
<p>!!Also if i will be having any profit with this blog i will definately share the profit as well.!!</p>
</th>
</tr>
</table>
</form>
<div>
<form>
user ID :<input type="text" name="user_id"/> <br><br>
password :<input type="password" name="password"/>
</form>
</div>
</body>
</html>
आप इस example मे देख सकते है ,की इसमे मैंने CSS नहीं डाला है ! और इसमें मैंने बस link डाला है ! जो की yellow color से highlight कर दिया है !
मैं यहाँ अपनी CSS file की coding भी mention कर रहा हु जो इसके डिजाईन मे use किया गया है !
आप इसे अपने आप practice कर सकते है !
यदि आप को कोई भी परेशानी हो तो आप मुझसे सवाल कर सकते है !!
body{
margin:0px;
font-family:'arial';
width:80%;
padding-left:10%;
padding-right:10%;
}
li {
color:blue;
}
h1{ padding:10px;
background-color:blue;
text-align:center;
color:white;
}
h2{
text-align:center;
color:red;
}
h3{ padding:10px;
text-align:center;
}
nav{
line-height:30px;
background-color:#d5d8d9;
height:300px;
width:15%;
float:left;
padding:5px;
}
div{
text-align:center;
padding:20px;
}
और यदि आप इसे separately use करने के बजाय एक ही साथ इस्तेमाल करना चाहते है तो आप को केवल इतना करना है की आप इस HTML CODE के HEAD मे <style> <style/> लिख कर उसमे ये css कोड डाल सकते है !!
इसका भी EXAMPLE मैं नीचे mention कर रहा हु !!
<!DOCTYPE html>
<html>
<head>
<title> my first page with css</title>
<style>
body{
margin:0px;
font-family:'arial';
width:80%;
padding-left:10%;
padding-right:10%;
}
li {
color:blue;
}
h1{ padding:10px;
background-color:blue;
text-align:center;
color:white;
}
h2{
text-align:center;
color:red;
}
h3{ padding:10px;
text-align:center;
}
nav{
line-height:30px;
background-color:#d5d8d9;
height:300px;
width:15%;
float:left;
padding:5px;
}
div{
text-align:center;
padding:20px;
}
</style>
<h1>SKILLGAINERS </h1>
<h2> <marquee> Learn how to make webpages!!</marquee></h2>
</head>
<body>
<nav>
<ol>
<li>
lesson1
</li>
<li>
lesson2
</li>
<li>
lesson3
</li>
<li>
lesson4
</li
</ol>
</nav>
<h3>
!!This is the way you can make a webpage.!!
</h3>
<form>
<table border="2px" color="black">
<tr>
<th>
<p> This blog is for those who want to learn and grow, for those who have big hearts to share with the society.</p>
<p>so, who ever is intrested to contribute in this blog can share his or her mail id with me and i will give the athority to those who is intrested</p>
<p>!!Also if i will be having any profit with this blog i will definately share the profit as well.!!</p>
</th>
</tr>
</table>
</form>
<div>
<form>
user ID :<input type="text" name="user_id"/> <br><br>
password :<input type="password" name="password"/>
</form>
</div>
</body>
</html>
thank you:
धन्यवाद
