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

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

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