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

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

C++ Vector : Basics Of Vector in C++ STL

In C++, Vector is unlike array, it stores different data types such as int, double, string, float, etc. It works like the dynamic array with the ability to resize automatically itself. Vector stores data in the contiguous memory location. Two functions are needed to traverse from starting to end that is begin() and end() functions.                               Syntax of the vector declaration:-             vector<data_type> variable_name (number_of_elements);  Here number_of_elements is optional, we can also declare a vector with empty vector that contains zero elements. The data_type in the angle-brackets indicates any type of data type which is valid in c++. Vector declaration examples:- vector<int> numbers (10); //In this example, we declared a vector name number of 10 integers. vector<string> names;  //In this, a vector name declared of string. In eve...
Post a Comment
Read more

Data Structure And Algorithm Important Topics Overview

  Overview Of Data Structures And Algorithms This post will give you the clear idea about learning data structures and algorithms . So, Data structure? => In computer science a data structure is a data organization , management and storage format that enables efficient access and modification. Or in the other words it is a way in which data is stored on a computer. Types of data structures:- Array  String Stack Queue Linked List  Binary Tree Binary Search Tree Heap Hash Table Graph Above topics, array is a linear data structure which stores the data in the sequence order, dynamic array, every data is stored in the next contiguous memory location.   String is a collection of characters. If it contains the alphabets and it also uses the digit as character. If a string is composed of numbers and characters then numbers are also treated as characters. Stack is also a linear data structure. It works either on Last In First Out or First In Last Out . It has only one ...
Post a Comment
Read more