Skip to main content

Web Designing : Web Page Using HTML, CSS, PHP And JavaScript

Overview Of Web Development

नमस्कार दोस्तों आप लोगो का स्वागत है मेरे नए ब्लॉग पर इस Post में हम बताएंगे की simple website कैसे बनाते हैं | अगर आप Engineering Student है तो आप को मै suggest करूँगा की आप अपने से खुद Website banaye , उसके लिए आपको कुछ जानकारी होना जरुरी है | 

जरुरी skills website बनाने के लिए :-

1. HTML 
2. CSS 
3. Javascript 
4. PHP 

1. HTML 

इसका full form '' Hypertext Markup Language " हैं |  इसका use website के पेज बनाने के लिए किया जाता हैं |  HTML tags का use किया जाता है contet को लिखने के लिए | Html tag जैसे कि <!DOCTYPE >, <html>, <h>, <p>, <body>, <frame>, <a></a>,<hr>,<head>,<title>, etc
HTML Code Syntax :-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html> . 

HTML Page :-


ये HTML Simple  Website Page हैं |  ऐसे ही आप जितने Text चाहेंगे जोड़ सकते है अपने Website के अनुसार और वे सरे चीज आपके वेब पेज पर दिखाई  देगा |  Html का जो Text होता है वो किसी भी चीज को explain करता है ,आप जिस बारे में बताना चाहते है वो html करता हैं | 

2. CSS 

CSS को Cascading Style Sheet कहा जाता है | CSS का use web pages को design करने के लिए किया जाता है |क्योकि केवल  html के द्वारा  web page को अच्छे से  दिखा नही कर सकते है | इसीलिए हम CSS  का use करते है | क्योकि CSS  के द्वारा Website को अपने अनुसार जैसा चाहे दिखा सकते है और अपने Website को attractive बना सकते है |

CSS 3 प्रकार का होता है:-
  1. Inline CSS
  2. Internal CSS
  3. External CSS
  

Inline CSS

Inline CSS का use HTML tags के अन्दर ही किया जाता है | लेकिन इसके लिए हमे style attribute का use करना पड़ता है |

Internal CSS

Internal CSS लिखने के लिए हमे style tag को create करना पड़ता है | क्योकि बिना style tag के Internal CSS नही लिख सकते है |

External CSS

External CSS लिखने के लिए हमे एक file create करना पड़ता है | और जब भी External CSS की file create करते है | तो CSS file का extension .css देना होता है |

Note :- अगर आप Inline CSS के अन्दर css की कोई property use कर लेते है | और वही property Internal CSS या External CSS मे use करते है | तो External CSS या Internal CSS की property work नही करती है | क्योकि उस property को Inline CSS मे use कर लिए है |

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <style>
  h1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html> . 

CSS  को हमेशा style tag के अंदर ही लिखते हैं | ऊपर वाले उद्धरण के अनुसार जो Text लिखा गया है "My first heading" screen के बीच में चला जायेगा और उसका color लाल हो जायेगा | 

Graphic interface के लिए complete web page बहुत ही अच्छे से design कर सकते है | और CSS लिखने के लिए property and value का use किया जाता है | 

CSS कि कुछ Advantages :-

  • CSS एक ऐसा language है जिसका यूज़ करने से हमारा time बचता है। और कम से कम समय मे एक से जादा web pages को अपने अनुसार जैसा चाहे दिखा सकते है |
  • हम CSS की library बना सकते है | और जब चाहे उसे किसी भी web page पर apply कर सकते है |और जरूरत पड़ने पर customize भी कर सकते है |
  • CSS के द्वारा web pages को customize करना बहुत ही आसन होता है | क्योकि CSS एक आसान  language है | जिसे हर कोई आसानी से सिख सकता है |
  • CSS एक ऐसा language है | जो html language से जादा option provide करता है | हमारे web page attractive बनाने के लिए |

3. JavaScript

 JavaScript एक client side scripting language हैं|  यह Client केब्राउज़र पर run करता हैं| इसके इस्तेमाल से किसी भी HTML पेज को एक साथ जोड़ सकते हैं | अपने पेज के कंटेंट को change कर सकतेहैं| यह open और क्रॉस-प्लेटफार्म है जिसका यूजरको better experience देना हैं|

JavaScript को HTML के अन्दर और <script> tag के बीच में लिखते हैं | इसको websites में dynamic और interactive elements को जोड़ने के लिए किया गया था |
उद्धरण के लिए Program :- 

<script>
var d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>

इस Program में जितने भी code <script> and </script> के अन्दर है वे JavaScript code हैं|

4. PHP

PHP एक server side scripting language हैं और इसका प्रोयोग dynamic और Interactive पेजको बनाने के लिए किया जाता हैं| PHP के code को हम लोग Html के code के अन्दर भी लिख सकते है या dot .php का एक अलग Program लिख सकते है तब हमलोगों को Html और php के Program को जोड़ना पड़ेगा |
 साधारण उदहारण देखते है :-
 <!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>

</body>
</html>

इसमें php के code को <?php    ?> के बीच में लिखा गया है | इस Program में php और html का code एक ही प्रोग्राम में लिखा गया हैं|

Conclusion :- इस Post में बताया गया है की आपको website बनाना है तो ये Basics of Html, CSS, JavaScript और Php थोडा बहुत आना चाहिए | 
दोस्तों आपको ये Post केसा लगा जरुर बताइयेगा और comment और अपना Feedback भी लिख दीजियेगा |
धन्यवाद....!
Labels:

Comments

Post a Comment

Popular posts from this blog

Fix Breadcrumbs Error And m=1? In Blogger

  Remove Breadcrumbs Errors And ?m=1 Breadcrumb is a small path. It points your location on your site. It also affects the SEO of your website.  Use canonical URL , so: data:blog.url.canonical  instead of data:blog.url. It should work for both desktop and mobile versions. It means the same URL works on both mobile and desktop without producing the ?m=1 or ?m=0. Before this, I am going to tell you what all the portions I will explain and fix your problem. First we will fix Breadcrumbs Error . This is the most dangerous for your website. Second we will remove ?m=1 and ?m=0, tags from our mobile view URL. Remove Breadcrumbs Error :- You should follow the below steps, so that you would fixed this error :- Go to blogger.com Login to blogger with your blogger email id Click on Template Click edit HTML, you have to edit HTML theme code. Press Ctr + F to open a search bar in your HTML theme code. Search for <div class='breadcrumbs' Paste the below code up to </b:loop> ...
Post a Comment
Read more

API : What is an Application Programming Interface

Application Programming Interface API का पूरा नाम "Application Programming Interface" हैं| यह एक software intermediary है जो दो software applications को एक दूसरे से बात करने का कम करता हैं| जैसे कि उद्धरण के लिए Instagram पर आपको message आता है और आप अपने phone पर check कर लेते है API के कारण, क्योंकि API एक माध्यम है आपके फ़ोन में आप किसी भी application से इनफार्मेशन प्राप्त कर पते  हैं| जब आप अपने phone में  कोई  application use करते है तो application internet से जुड़ता है और data को server पर  भेजता है| तब वह server, data को लेता है और translate करता है इस data को , उसके बाद उस data पर जरुरी कार्य करता है और अंतिम में जो translated data है उसे phone पर send करता हैं| तब Application उस data को translate करता है और आपके फ़ोन पर दिखता है readable form में जैसा आप देखना चाहते हैं|  ये जितने भी कार्य है, phone से data को लेना और उसे translate कर के server को send करना और फिर उसे phone पर user के readable form में change करके उसके फ़ोन पर डिस्प्ले करना, ये सब API के मा...
Post a Comment
Read more

Merge Arrays : Merge Two Arrays Of Different Size In C++

Merge Two Arrays C++ Program C++ program to merge two arrays of different size. First array size is m and second array size is n. The size of the first array is greater than the first array i.e. m>n.                               Algorithm :- Enter the size of first array m. Enter the size of 2nd array n. Enter the elements of 1st and 2nd array and number of elements of first array should be greater than the number of elements of second array. After m index of first array, insert the element of second array into the first array up to m+n-1. Sort the merge array of size m+n. Display the first array, which will display all the elements of the merge array of size m+n. Program: - #include<iostream> using namespace std; int main() { int i,n,m,a[15],b[5],j;//array a[] and b[] are declared cout<<"Enter the size 1st array:-"<<endl; cin>>m; cout<<"Enter the size of 2nd array(n<m...
Post a Comment
Read more