Tawheed | دعوت توحید: How to create a website urdu | ویب سائٹ کیسے بناتے ہیں

السلام علیکم ورحمتہ اللہ
امید ہے کہ آپ سب بھائی خیریت سے ہوں گے
آج ہم آپ کو بتائیں گے کہ ایک نارمل ویب سائٹ بنانے کیلئے کن چیزوں کا جاننا اور ہونا ضروری ہے
1) سب سے پہلے آپ کو html codes کا جاننا ضروری ہے یہاں html کے مختلف کوڈز دئیے گئے ہیں اور آپ اسی سائٹ پر ان کوڈز کے functions وغیرہ بھی چیک کر سکتے ہیں یاد رہے کہ ان سب کوڈز کا جاننا آپ کے کیلئے ضروری نہیں مگر اتنا ہی جتنا کہ آپ کو ایک نارمل ویب سائٹ بنانے کیلئے ضرورت ہے اس لئے زیادہ کوڈز دیکھ کے پریشان ہونے کی ضرورت نہیں :)
2) آپ کو Css Codes کی معلومات کا ہونا ضروری ہے تانکہ آپ آسانی سے ویب پیجز کو کنٹرول کر سکیں اور اسٹائل وغیرہ دے سکیں
یہاں Css codes دیئے گئے ہیں اگر آپ کو زبانی یاد نہیں تو آپ اپنی ضرورت کے مطابق کوڈز لے کر استعمال کر سکتے ہیں
3) آپ کو اپنی ویب سائٹ آن لائن کرنے کیلئے ڈومین نیم کا خریدنا ضروری ہے یہاں ڈومین نیم خریدنے کا طریقہ کار بتایا گیا ہے
4) آپ کو ویب ہوسٹنگ کی ضرورت ہے جہاں آپ اپنی ویب سائٹ کا مواد وغیرہ رکھ سکیں

اپنی سہولت کیلئے اپنے کمپیوٹر میں Notepad++ ڈاؤنلوڈ کر لیں تانکہ آپ آسانی سے کوڈز لکھ سکیں اس کے علاوہ آپ ہوسٹنگ میں موجود Editor کے ذریعے آن لائن کوڈز ٹائپ کر سکتے ہیں
کوئی بھی ویب پیج تیار کرنے کیلئے نیچے دیئے گئے کوڈز کا استعمال ضروری ہے لہذا انہیں ذہن نشین کر لیں

اب ہم ان کوڈز میں div اور css codes کا استعمال کریں گے تانکہ پیج پر کوئی دیکھائی دے سب سے پہلے ہم header بناتے ہیں

رزلٹ

Dawat-e-Tuwheed

header بنانے کے بعد ہم wrapper اور footer کی طرف چلتے ہیں

رزلٹ

Dawat-e-Tuwheed

اب ہم اس میں Horizontal Navigation Bar لگاتے ہیں (Horizontal Navigation Bar codes)

رزلٹ

Dawat-e-Tuwheed

Home
News
Contact
About

اب ہم wrapper میں مزید دو حصے بناتے ہیں

<!DOCTYPE html>
<head>
<title> YOUR WEBSITE NAME </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.header{
     width: 100%;
     height: 70px;
     padding: 25px 10px 5px 10px;
     background: #FB6B21;
     text-align: center;
     font-size: 34px;
     color: #FFF;
}
ul {
    list-style-type: none;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 6px 10px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
.wrapper{
     width: 95%;
     height: 470px;
     margin: auto;
     padding: 5px 5px 5px 5px;
     background: #DFFB21;
     font-size: 16px;
     color: #000;

}

.content{
     width: 340px;
     height: 450px;
     float: left;
     border-left: 0px  solid #000;
     padding: 5px 5px 5px 5px;
     background: #C7FBED;
     font-size: 16px;
     color: #000;
}
.sidebar{
     width: 150px;
     height: 450px;
     float: right;
     border-left: 1px  solid #000;
     padding: 5px 5px 5px 5px;
     background: #DFFB23;
     font-size: 16px;
     color: #000;
}

.footer{
     width: 100%;
     height: 40px;
     padding: 5px 5px 5px 5px;
     background: #252523;
     font-size: 16px;
     text-align: justify;
     white-space: normal;
     direction:  ltr;
     text-align: center;
     color: #FFF;
}
</style>
</head>
<body>
<div class="header">
Dawat-e-Tuwheed
</div>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div class="wrapper">
<div class="sidebar">
</div>
<div class="content">
</div>

</div>
<div class="footer">
© 2015-2016 <a href="#">yoursitename.com</a> All Rights Reserved.
</div>

</body>
</html>

رزلٹ

Dawat-e-Tuwheed

Home
News
Contact
About

اب ہم اس میں ایک Vertical Navigation Bar ایڈ کرتے ہیں

#top_menu {

}
#top_menu ul {
    list-style-type: none;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
    background-color: #333;
}

#top_menu li {
    float: left;
}

#top_menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 6px 10px;
    text-decoration: none;
}

#top_menu li a:hover {
    background-color: #111;
}

.wrapper{
     width: 95%;
     height: 470px;
     margin: auto;
     padding: 5px 5px 5px 5px;
     background: #DFFB21;
     font-size: 16px;
     color: #000;
}

.content{
     width: 340px;
     height: 450px;
     float: left;
     border-left: 0px  solid #000;
     padding: 5px 5px 5px 5px;
     background: #C7FBED;
     font-size: 16px;
     color: #000;
}

.sidebar{
     width: 150px;
     height: 450px;
     float: right;
     border-left: 0px  solid #000;
     padding: 5px 5px 5px 5px;
     background: #FFF;
     font-size: 16px;
     color: #000;
}

#leftmenu{
     margin-top: 20px;
}
#leftmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 148px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

#leftmenu li a {
    display: block;
    color: #000;
    
    text-decoration: none;
}

#leftmenu li {
    text-align: center;
    border-bottom: 1px solid #555;
}

#leftmenu li:last-child {
    border-bottom: none;
}

#leftmenu li a.active {
    background-color: #4CAF50;
    color: white;
}

#leftmenu li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.footer{
     width: 100%;
     height: 40px;
     padding: 5px 5px 5px 5px;
     background: #252523;
     font-size: 16px;
     text-align: justify;
     white-space: normal;
     direction:  ltr;
     text-align: center;
     color: #FFF;
}
</style>
</head>
<body>
<div class="header">
Dawat-e-Tuwheed
</div>
<div id='top_menu'>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>
<div class="wrapper">
<div class="sidebar">
<div id='leftmenu'>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</div>
</div>

Dawat-e-Tuwheed

Home
News
Contact
About

اگلا صفحہ

Tawheed | دعوت توحید

بلاگ شیئر کریں

بلاگ آرکائیو

زائرین کی تعداد :

اعداد وشمار :

Labels

زیادہ بار پڑھی گئی تحاریر

متصف مراسلہ

شرک و بدعت

گرافکس

ویب سائٹ خود بنائیں

How to create a website urdu | ویب سائٹ کیسے بناتے ہیں

تلاش کریں

اُردو فونٹ ڈاونلوڈ کیجیئے

فہرست

احکام ومسائل

آخرت

کتابیں

بلاگر حلقہ احباب

فیس بک پیج

فلیگ کاؤنٹر

متفرقات

دعوت توحید ویڈیوز

تفسیراحسن البیان