Blog by Sanjeev panday | Digital Diary

" To Present local Business identity in front of global market"

Meri Kalam Se Digital Diary Submit Post


JPEG, PNG, GIF, TIFF के बीच क्या अंतर है?


Image के कई सारे formats होते हैं जिनमे से सबसे ज्यादा JPEG, PNG और GIF का उपयोग web pages में किया जाता है। सभी image format के अपने-अपने फायदे और नुकसान हैं इसके अलावा कुछ formats ऐसे भी हैं जो की किसी ख़ास काम के लिए बनायें गये हैं।   आपको यह जरूर पता होना चाहिए की कौन से काम के लिए आपको कौन सा इमेज फॉर्मेट उपयोग करना चाहिए और कौन से format के उपयोग से बचना चाहिए ताकि आपको optimum result मि... Read More

Image के कई सारे formats होते हैं जिनमे से सबसे ज्यादा JPEG, PNG और GIF का उपयोग web pages में किया जाता है। सभी image format के अपने-अपने फायदे और नुकसान हैं इसके अलावा कुछ formats ऐसे भी हैं जो की किसी ख़ास काम के लिए बनायें गये हैं।

 

आपको यह जरूर पता होना चाहिए की कौन से काम के लिए आपको कौन सा इमेज फॉर्मेट उपयोग करना चाहिए और कौन से format के उपयोग से बचना चाहिए ताकि आपको optimum result मिल सके।

Contents:

Image File Formats in Hindi

तो चलिए आज हम computer graphics के कुछ image formats के बारे में जानते हैं की आखिर उनमे क्या खूबियाँ और क्या खामियां हैं और उनका किस जगह use किया जाना चाहिए।

 

JPEG Format क्या है?

JPEG का full form Joint Photographic Expert Group है, यह सबसे ज्यादा उपयोग होने वाला image format है। यह lossy compression का use करता है यानि की जब आप किसी image को JPEG format में save करते हैं तो यह उसमें से कुछ image information को ख़त्म कर देता है जिससे की image का size कम हो जाए।

  • JPEG में 24 bit color per pixel होते हैं और यह 16 million colors को support करता है।
  • Image को compress करके file size कम कर देता है।
  • Photography के लिए अधिकतर इसी format का use होता है और लगभग सभी digital cameras में इसका उपयोग होता है।

JPEG का कब Use करें?

  • Digital Photographs - Mobile, computer devices के लिए, online upload करने के लिए।
  • Printing के लिए - यदि आप high resolution में photo print करना चाहते हैं तो यह फॉर्मेट उपयोगी है।

JPEG का कब उपयोग न करें?

  • अगर आपको transparent image चाहिए तो इसके लिए JPEG सही नही है। आप इस format में transparent image नही बना सकते।
  • जिस इमेज में text हो, sharp edge वाले shapes हों उसके लिए JPEG use न करें क्योकिं compression के कारण text, color और edges blur हो सकते हैं।
  • Animated file चाहिए तो JPEG का use नही कर सकते।

GIF Format क्या है?

 

 

GIF का full form Graphics Interchange Format है। web image और ज्यादातर animated graphics के लिए इसका बहुत उपयोग किया जाता है। इसमें सिर्फ 256 colors होते हैं। कम कलर्स होने की वजह से file size बहुत कम हो जाता है।

  • GIF 8 bit format use करता है और सिर्फ 256 colors को support करता है।
  • GIF lossless होता इसलिए इसे बड़ी आसानी से customize किया जा सकता है।

GIF Image का कब उपयोग करें?

  • Simple images के लिए जिसमे ज्यादा colors न हों, GIF use कर सकते हैं।
  • Web animation, buttons, social media meme आदि के लिए बहुत उपयोगी है।
  • Transparent background चाहिए तब इसका use कर सकते हैं।

GIF का कब उपयोग न करें?

  • High quality photographs के लिए यह उपयुक्त नही है।
  • Gradient image design करने के लिए GIF use न करें क्योंकि इसके color limitation की वजह से image blur हो जायेगा।
  • Print design में इसका use नही कर सकते।

PNG Format

 

PNG का full form Portable Network Graphics है। इसे आप GIF का improved version भी समझ सकते हैं। इसे web को ध्यान में रख कर बनाया गया है। यह GIF जैसा ही है लेकिन PNG image में 16 millions colors हो सकते हैं।

  • GIF को replace करने के लिए PNG को बनाया गया था।
  • PNG file का size GIF के मुकाबले काफी कम होता है।
  • PNG 24 bit colors use कर सकता है।
  • इससे आप full transparent या alpha transparent image भी बना सकते हैं।

PNG का use कब करना चाहिए?

  • High-quality web graphics design करने के लिए PNG बहुत अच्छा है।
  • Smooth transparent design के लिए और alpha transparent जैसे drop shadow effect आदि के लिए PNG format उपयुक्त है।
  • Small size image के लिए।

PNG का use कब नही करना चाहिए?

  • Photographs के लिए इसका use नही करना चाहिए।
  • GIF की तरह PNG से animated graphic नही बना सकते।
  • आप printing के लिए design तैयार कर रहें हैं तो बेहतर है की आप JPEG use करें क्योंकि PNG format की image केवल screen के लिए सही होता है।

TIFF Format

 

TIFF का full form Tagged Image File Format है। इस format में image की quality बहुत ज्यादा होती है इसलिए इसका उपयोग desktop publishing और professional photography में किया जाता है।

  • TIFF image lossy या lossles दोनों हो सकता है।
  • Scanning और printing जैसे काम के लिए इसका ज्यादा उपयोग होता है।
  • JPEG, GIF की तरह इसमें भी image compress किया जा सकता है।

TIFF format का use कब होगा?

  • TIFF का use करें यदि आप high-quality graphics print करने जा रहें हैं, यदि lage size का image print करना है तो उसके लिए सबसे बढिया format है।
  • Scan किये document, photos की quality कम नही होने देना चाहते तो TIFF format में scan करें।

TIFF Format का उपयोग कब नही करना चाहिए?

  • Web graphic के लिए इसका use नही करना चाहिए यह printing के लिए बेहतर है।
  • High-quality online image के लिए इसका use न करें, इस format का file size बहुत बड़ा होता है, ज्यादा space लेता है और load होने में भी समय लेता है।

Read Full Blog...


HTML और CSS से Simple Menu Design कैसे बनायें


किसी भी website के लिए उसका navigation menu बहुत ही important होता है यह website की readability को बढ़ता है और contents को categorize करने में मदद करता है जिससे user को उस website में उपलब्ध information को ढूढने में आसानी होती है|     आज हम इस article में website के लिए HTML और CSS से simple menu bar step-by-step तरीके से बनाना सीखेंगे जिसमे horizontal और vertical दोनों तरह के n... Read More

किसी भी website के लिए उसका navigation menu बहुत ही important होता है यह website की readability को बढ़ता है और contents को categorize करने में मदद करता है जिससे user को उस website में उपलब्ध information को ढूढने में आसानी होती है|

 

 

आज हम इस article में website के लिए HTML और CSS से simple menu bar step-by-step तरीके से बनाना सीखेंगे जिसमे horizontal और vertical दोनों तरह के navigation design होंगे|

इस प्रकार के navigation को design करना बहुत ही आसान होता है इसके लिए हमे किसी प्रकार के jQuery या Javascript की जरूरत नही पड़ती हम केवल HTML और CSS की मदद से एक simple navigation menu design बना सकते हैं, इसके लिए आपको basic HTML और CSS की जानकारी होनी चाहिए|

 

पढ़ें:-  CSS से Tableless Layout कैसे Design करें

Simple Vertical Navigation Menu कैसे बनाये

Vertical menu bar में कई सारे links की एक  vertical list होती है जिसमे हर एक link किसी button की तरह दिखाई देती है इस प्रकार की menu को आप website के sidebar में लगा सकते हैं|

Vertical navigation menu बनाने के लिए नीचे दिए गये steps को follow करें|

Step 1 : Menu के लिए HTML Structure

जैसा की हमने ऊपर पढ़ा की एक navigation bar में list of links होते हैं इसलिए हम एक HTML लिस्ट बनाते हैं इसके लिए <ul> यानि un-ordered list create करेंगे जिसमे हमें जितने links add करने होंगे उतने <li> element का उपयोग करेंगे और उसके अंदर <a> tag से link बनायेंगे |

सबसे पहले आप कोई भी code editor open कर लें और उसमे नीचे दिए code को लिखना शुरू करें|

<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>

हम यहाँ पर nav element का use कर रहें हैं जो की HTML5 में introduce हुआ है जो की website की primary navigation को represent करती है इसके अलावा nav tag से developer, browser तथा search engine को यह समझने में आसानी होती है की यह वेबसाइट की main navigation है| Browser में यह कुछ इस प्रकार से दिखाई देगा:

css-menu-design-step-1-hindi

 

Step 2 : Navigation की background color और width change करना

हम अपने navigation menu को और आकर्षक बनाने के लिए इसकी background में कुछ कलर add करेंगे इसके लिए हम nav element को selector लेकर उसमे CSS की background property apply करेंगे | इसका code नीचे दिया गया है|

nav { background: #ccc; width: 200px; }

यह browser में कुछ इस तरह display होगा:

 

css-menu-design-step-2-hindi

 

Step 3 : Browser की Default Settings को  Remove करना

जब भी हम <ul> element use करते हैं तो by default browser में इसके लिए कुछ margin और padding set हो जाते हैं इसके अलावा list में bullets पहले से सेट हो जाते हैं, किसी menu bar में इन चीजों की जरूरत नही पड़ती इसलिए हम इन settings को  CSS codes के माध्यम से हटा देते हैं|

nav ul { list-style-type: none; padding: 0; margin: 0; }

List items में से bullets को हटाने के लिए हमने list-style-type: none लिखा  margin और padding को remove करने के लिए इनकी value zero (0) कर दिया |

css-menu-design-step-3-hindi

 

Step 4 :  <a> element की styling करना

अब हम <a> element की style को change करेंगे, text में color add करेंगे, alignment को center करना है, और हमें text में underline की जरूरत नहीं इसलिए इसे हटा देंगे |

nav ul li a { display: block; color: #000; padding: 15px; text-decoration: none; text-align: center; }

 

चलिए अब इस कोड को समझते हैं:

display: block - अभी तक हमारा link सिर्फ text के ऊपर click करने पर काम करता था लेकिन <a> को display: block  करने पर link एक block element बन जायेगा और उसका पूरा area clickable बन जायेगा |

color: #000 - text की color को black करने के लिए hex code #000 use किया|

padding: 15px - links के बीच space लाने के लिए 15px की padding add किया|

text-decoration: none - इससे text के underline को remove किया गया|

text-align: center - अब तक text left side में दिखाई दे रही थी लेकिन अब center में display होगी |

इस code को apply करने के बाद menu की design कुछ इस तरह दिखाई देगी:

 

css-menu-design-step-4-hindi

Step 5 : Hover effect add करना

आपने देखा होगा ज्यादातर website के menu के button के ऊपर जब हम hover करते हैं यानि mouse pointer ले जाते हैं तब उसका background color change हो जाता है, हम भी कुछ ऐसा ही effect add करने वाले हैं इसके लिए नीचे दिए गये CSS code का उपयोग करेंगे |

nav ul li a:hover { background-color: #2c4584; color: #fff; }

 

जब हम menu के किसी भी link पर mouse ले जायेंगे तो उसका background color बदल कर #2c4584 (blue) हो जायेगा और text की color #fff (white) हो जायेगी | यह browser में कुछ इस प्रकार से दिखाई देगी:

css-menu-design-step-5-hindi

Step 6 : Navigation में Border set करना

अगर आप मेनू में border add करना चाहते हैं तो इसके लिए हम नीचे दिए कोड का उपयोग करेंगे|

nav ul { border: 1px solid #999; } nav ul li { border-bottom: 1px solid #999; } nav ul li:last-child { border-bottom: none; }

nav ul - हमने menu के चारों तरफ 1px का border add किया जिसका color #999 है |

nav ul li - हर एक list item के bottom में border सेट किया |

nav ul li:last-child - last वाले item के bottom में पहले से ही border जो की ul पर सेट किया गया है इसलिए last li का border-bottom: none कर देते हैं |

 

css-menu-design-step-6-hindi

 

Complete HTML and CSS Code For Vertical Navigation Menu Design

ऊपर हमने एक-एक  step में आपको समझाया की कौन सा code किस काम के लिए हम उपयोग कर रहे हैं  इन steps को follow कर आप एक vertical menu का design बना सकते हैं |

अब हम इसका पूरा code आपको दे रहें हैं ताकि आपको इसे समझने में आसानी हो|

HTML Code

<html> <head> <title>Simple Menu Design</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </body> </html>

CSS Code

nav { background: #ccc; width: 200px; } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li a { display: block; color: #000; padding: 15px; text-decoration: none; text-align: center; } nav ul li a:hover { background-color: #2c4584; color: #fff; } nav ul { border: 1px solid #999; } nav ul li { border-bottom: 1px solid #999; } nav ul li:last-child { border-bottom: none; }

 

Simple Horizontal Navigation Menu Design कैसे बनाये

यह सबसे ज्यादातर उपयोग होने वाली menu design है जो की अधिकतर website में header के नीचे लगाया जाता है|

यह vertical menu की तरह ही काम करता है लेकिन इसमें सारे links top to bottom के बदले left to right दिखाई देते हैं|

css-horizontal-menu-design-step-1-webinhindi

 

हमने ऊपर जो steps follow किये हैं same हम  horizontal menu के लिए भी करेंगे बस CSS में थोड़े से बदलाव करने पड़ेंगे जो की कुछ इस प्रकार होगा:

Nav element की width, height change करेंगे

nav { background: #ccc; width: 100%; height: 50px; }

Menu के सभी borders को remove कर li को float left करेंगे

 nav ul li { float: left; }

Complete Codes For Horizontal CSS Menu

इस design के लिए complete HTML CSS codes नीचे दिया जा रहा है आप चाहें तो इसे copy कर के अपने browser पर run करके देख सकते हैं और अपने आवश्यकता अनुसार इस पर changes भी कर सकते हैं|

 

HTML Code

<html> <head> <title>Horizontal Menu</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </body> </html>

CSS Code

nav { width: 100%; height: 50px } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li a { display: block; color: #000; padding: 15px; text-decoration: none; text-align: center; } nav ul li a:hover { background-color: #2c4584; color: #fff; } nav ul li { float: left; }

आप ये सारे steps एक-एक कर follow करते हैं तो आप आसानी से अपनी website के लिए एक आकर्षक navigation का design कर पाएंगे इसके अलावा आप चाहें तो इसमें और भी changes कर सकते हैं जैसे आप इसके background में color के बदले कोई image add कर सकते हैं इसके लिए आप CSS की background property use कर सकते हैं, font में बदलाव करने के लिए font property का उपयोग कर सकते हैं ऐसे ही और भी कई सारे changes आप चाहें तो कर सकते हैं|


Read Full Blog...


Responsive या Fluid या Liquid Website Layout Design कैसे बनाएं


आजकल हर कोई चाहता है की उसकी website की design ऐसी हो की वह किसी भी device चाहे वह large screen वाली desktop हो या छोटी screen वाली mobile, सभी में लगभग एक समान दिखाई दे ऐसा इसलिए क्योंकि आजकल smartphone users की संख्या लगातार बढ़ रही है और अगर हम &nbsp;चाहते हैंकी ये users हमारी site पर visit करें तो हमें अपनी website mobile friendly बनानी पड़ेगी| आज हम इस article में &nbsp;और CSS के द्वारा steb-by... Read More

आजकल हर कोई चाहता है की उसकी website की design ऐसी हो की वह किसी भी device चाहे वह large screen वाली desktop हो या छोटी screen वाली mobile, सभी में लगभग एक समान दिखाई दे ऐसा इसलिए क्योंकि आजकल smartphone users की संख्या लगातार बढ़ रही है और अगर हम  चाहते हैंकी ये users हमारी site पर visit करें तो हमें अपनी website mobile friendly बनानी पड़ेगी|

आज हम इस article में  और CSS के द्वारा steb-by-step तरीके से liquid या fluid website layout design करना सीखेंगे जिससे हमारी वेबसाइट डिजाईन लगभग सभी screen sizes पर अच्छे से display हो सके|

 

 

Fluid या Liquid Layout क्या है?

आगे बढ़ने से पहले हम ये जानते हैं की आखिर fluid या liquid design होता क्या है| इससे पहले हमने fixed layout design करना सीखा था जिसमे हम जो design बनाते हैं उसकी size fixed होती है और वह large screen पर अच्छे से दिखाई देती है लेकिन छोटे आकार के devices के लिए उपयुक्त नही है, लेकिन fluid layout एक ऐसी design होती है जो की screen width के अनुसार अपने आप को adjust कर लेती है|

Fixed width layout में dimensions pixel में set किया जाता है जब की fluid design में layout की size को percentage में define किया जाता है जिससे वह किसी भी screen resolution और browser window के size के अनुसार उपलब्ध space  में अपने आप को ढाल लेती है यहाँ तक की अगर user browser window की size को change करता है तो भी website के important parts बिना किसी restriction के दिखाई देने लगते हैं|

Steps to create fluid website design

अब हम आसान तरीके से एक fluid layout बनाना सीखेंगे इसके लिए आप नीचे दिए गए steps को follow करते जाएँ, इससे पहले हम ये जानते हैं की इस डिजाईन को बनाने में आपको किन-किन चीजों की जरूरत पड़ेगी :

पढ़ें : CSS Media Queries - Inroduction in Hindi

Step 1: Layout का structure define करें

सबसे पहले यह तय करें की layout का structure कैसा होगा उसके कितने parts होंगे हो website में कितने columns होंगे, आप चाहें तो किसी paper पर इसका एक rough sketch बना सकते हैं या कोई online tool का उपयोग कर सकते हैं, मैंने नीचे दिए गये sketch को gridpapr.com से बनाया है जो की बहुत आसान है आप चाहें तो इसका use कर सकते हैं|

हम इस tutorial में example के लिए three-column layout बनायेंगे जिसमे header, navigation, content, 2 sidebar और footer होंगे|

Step 2: Layout के लिए HTML coding करेंगे

अब हम सभी sections header, menu, sidebar, contents और footer के लिए अलग-अलग div बनायेंगे और सभी के लिए CSS id या class use करेंगे| layout का html structure कुछ इस प्रकार होगा:

<div class="header"></div> <div class="nav"></div> <div class="left"></div> <div class="content"></div> <div class="right"></div> <div class="footer"></div>

Step 3: Layout पर CSS style apply करेंगे

अब सभी classes को define करेंगे, यहाँ पर हम सभी sections की size को percentage में define करेंगे, left और right sidebar की width 20%, content की width 50% set करेंगे| header, navigation और footer के लिए कोई भी width define नही करेंगे क्योंकि इनकी width 100% होगी|

.header { background: #ccc; padding: 2em 2em; } .nav { background: #777; padding: 1em 2em; margin-bottom: 1em; } .left, .content, .right { float: left; background-color: #fff; margin-bottom: 1em; margin-left: 2%; } .left { width: 20% } .content { width: 50% } .right { width: 20% } .footer { background: #777; padding: 1em; clear: both; }

Step 4: Finally कुछ contents add करेंगे  और इसका output देखेंगे

हमने layout की design कर ली है अब इसमें कुछ contents insert करेंगे और इसका output देखेंगे| इसका complete HTML और CSS code नीचे दिया गया है :

HTML Code

<div class="header"></div> <div class="nav"></div> <div class="left"> <h2>About</h2> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin nunc arcu, posuere et auctor eget, ultrices vitae massa. Donec at pharetra purus, eget malesuada velit. Nunc dictum fermentum ligula id viverra. Pellentesque at mi porttitor, eleifend odio ut, aliquam mauris.</div> <div class="content"> <h2>Heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus velit diam, at semper velit ornare ac. Cras mollis faucibus dui, at sollicitudin augue gravida ut.</p> <p>Ut imperdiet massa sem, non cursus odio euismod vel. Sed consequat, massa vitae dignissim tincidunt, turpis ante mattis libero, vulputate cursus ante nibh sollicitudin ipsum. Praesent ac risus vel nunc egestas molestie. Phasellus elementum, ipsum eu varius maximus, lectus purus blandit augue, ut finibus sem eros vel arcu. Nam sagittis augue in ex pretium, et auctor justo efficitur.</p> </div> <div class="right"> <h2>Links</h2> <ul> <li><a href="#a">Home</a></li> <li><a href="#a">Articles</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="footer"></div>

CSS Code

.header { background: #ccc; padding: 2em 2em; } .nav { background: #777; padding: 1em 2em; margin-bottom: 1em; } .left, .content, .right { float: left; background-color: #fff; margin-bottom: 1em; margin-left: 2%; } .left { width: 20% } .content { width: 50%; } .right { width: 20% } .footer { background: #777; padding: 1em; clear: both; }

Final Output

 

fluid-layout-example
Screen Size: 1024x448px
fluid-liquid-layout-example
Screen Size:800x448px

 

अगर आप ऊपर दिए steps को follow करते हैं तो आप आसानी से एक simple fluid या liquid layout design बना सकते हैं| अगर आपको इस article से जुड़े कुछ सवाल पूछने हैं या कुछ कहना चाहते हैं तो आप नीचे comment box का उपयोग कर सकते हैं|


Read Full Blog...


HTML हिंदी में - HTML Tutorial in Hindi


Learn HTML in Hindi: अगर आप Web Designer या Developer बनना चाहते है या खुद की&nbsp;वेबसाइट&nbsp;बनाना चाहते हैं तब आपको HTML सीखना जरूरी है। लेकिन इसके अलावा अगर आप कोई Businessman हैं और आपके पास पहले से ही अपनी Company की Website है जिसमें Regular Updates की जरुरत पडती है तो भी Basic HTML सीखना आपके लिये फ़ायदेमंद हो सकता है। इससे आप खुद अपनी Website में Minor Updates कर सकेंगे और इस काम के लिये... Read More

Learn HTML in Hindi: अगर आप Web Designer या Developer बनना चाहते है या खुद की वेबसाइट बनाना चाहते हैं तब आपको HTML सीखना जरूरी है।

लेकिन इसके अलावा अगर आप कोई Businessman हैं और आपके पास पहले से ही अपनी Company की Website है जिसमें Regular Updates की जरुरत पडती है तो भी Basic HTML सीखना आपके लिये फ़ायदेमंद हो सकता है।

इससे आप खुद अपनी Website में Minor Updates कर सकेंगे और इस काम के लिये किसी Designer को पैसे देने से बच जायेंगे।

आज आप इस tutorial से अगले 20 Minute में HTML का Use करके एक Simple Webpage बनाना सीख सकते हैं। इसे सीखना बहुत ही आसान है बस आप नीचे दिये गये Steps को Follow करते जायें।

Learn HTML in Hindi -  20 Minutes Tutorial

अभी आप HTML की Basic जानकारी हासिल करेंगे जो कि एक Simple Page Design करने के लिये पर्याप्त है, लेकिन आगे हम आपको इस Blog में Web Design की Advanced knowledge भी देंगे तो आप हमारे साथ जुडे रहने के लिये हमारे Blog को अभी Subscribe कर लें।

Contents:

HTML क्या है? What is HTML in Hindi

 

  • HTML (Hyper Text Markup Language) एक भाषा है जिसके जरिये हम Web-Browser को समझाते हैं कि हमारे Webpage के Information ( text, images आदि) को User के Screen पर कैसे Display किया जाये।
  • हमारे पेज का Layout कैसा होगा ये भी हम HTML के Code से ही Browser को बताते हैं।
  • बिना HTML Code के कोई भी वेबपेज Design नही किया जा सकता इस समय जिस पेज को आप अपनी Screen पर देख रहें है इसे भी बनाने के लिये HTML Language का Use किया गया है।
  • HTML File का Extension .html होता है।

HTML Tools

HTML में Code लिखने और Run करने के लिये कुछ Basic Tools की जरूरत होती है जो लगभग सारे Computers में पहले से ही Installed होते हैं |

इसके लिये mainly दो प्रकार के टूल्स की जरूरत पडती है:

 

  • Text Editor (जैसे Notepad, Notepad++, Dreamweaver, Coffee Cup आदि)
  • Web Browser (जैसे Internet Explorer, Google Chrome, Firefox, Safari, Opera आदि)
  • Text Editor हम Use करेंगे Code लिखने के लिये और Browser में हम बनाये गये HTML File को Run करेंगे।

    अगर आपके पास Windows System है तो Notepad और Internet Explorer पहले से ही आपके कम्प्यूटर में Installed होंगे।

     

    HTML Document Structure

    अब हम एक html पेज बनायेंगे इसके लिये नीचे कुछ जरूरी Code दिये गए जिसे आप copy करके notepad में paste कर लें और save as करके किसी Folder में save करलें।

    ध्यान रहे फ़ाइल को save करते समय save as पर जायें और file के नाम के आगे .html लगायें।

    <html> <head> <title>My First HTML Document</title> </head> <body> <h1>This is heading</h1> Hello World!!! </body> </html>

    अब save किये गये फ़ाइल को Browser मे open करें जो कि कुछ इस तरह दिखाई देगा

     

     

    अब चलिये इस कोड को समझते हैं:

     

    • एक HTML Page कई सारे Tags से मिलकर बना होता है, और सारे tags उस पेज के किसी न किसी element को दर्शाते हैं जैसे paragraph, image, table आदि।
    • लगभग सारे Tags के opening और closing होते हैं। opening tag कुछ इस तरह होता है: <tag_name> और closing tag में / लगा होता है जैसे: </tag_name>
    • जैसा कि आप ऊपर कोड मे देख सकते हैं सबसे पहले <html> टैग होता है जो html page के शुरुआत को दर्शाता है और Last में </html> लिखा हुआ है जो पेज के अन्त को बताता है।

    HTML Page Sections

    एक html पेज के mainly दो भाग होते हैं:

  • Head Section: इस सेक्शन में पेज के बारे में Informations लिखे जाते हैं जो web browser और search engine के काम का होता है। इस section मे mainly तीन type की जानकारियां होती हैं: keywords, description जो कि Google जैसे search engines के काम आता है और तीसरा title जो कि वेबपेज का टाइटल होता है और Browser के title bar में display होता है।
  • Body Section: यह main content वाला part होता है यहां वो सारी जानकारियां लिखीं जातीं हैं जिसे हम अपने पेज में दिखाना चाहते हैं जैसे: text, image, video आदि।
  • Background और Text में Color add करना

    अपने Webpage को और Attractive बनाने के लिये हम background color, text color और images use कर सकते हैं।

    तो चलिये सबसे पहले हम अपने page का बैकग्राउंड कलर change करते हैं।

    ऐसा करने के लिये जो coding हमने पहले की थी उसे फ़िर से notepad में open करते हैं और body tag में एकbgcolor नाम का attribute जोड देते है और उसकी value को blue कर देते हैं जिससे पूरे पेज का background blue हो जायेगा।

    Code कुछ इस प्रकार से होगा:

    <html> <head> <title>My First HTML Document</title> </head> <body bgcolor="blue"> <h1>This is heading</h1> Hello World!!! </body> </html>

    अब इसे save करें और browser में open करें, कुछ इस प्रकार दिखाई देगा:

    heading example

    अब हम text का कलर change करते हैं इसके लिये font tag use करेंगे और color attribute में white लिखेंगे। जैसे:

    <font color="white">Hello World!!!</font>

    अब ये कुछ इस प्रकार से दिखाई देगा:

     

    change font color example

     

    यहां पर हमें font tag use करना होगा नही तो पूरे पेज के सारे text का color white हो जायेगा।

    अगर हम अलग-अलग text में different colors डालना चाहते हैं तो हमें अलग-अलग font tag use करने पडेंगे। जैसे:

    <font color="white">This is white color text</font> <font color="yellow">This is yellow color text</font> <font color="blue">This is blue color text</font>

    Image add करना

    Visitor के लिये अपने Webpage को और आकर्षक बनाने के लिये हम Images/pictures का भी इस्तेमाल कर सकते हैं, इसके लिये img tag का use करेंगे

    सबसे पहले जिस folder में हमने अपने html page को save किया था उसी folder में एक और फ़ोल्डर बनायें जिसे images नाम दें और इस फ़ोल्डर में कोई भी एक image सेव करें जिसे पेज में दिखाना चाहते हैं।

    अब इमेज डालने के लिये कोड कुछ इस प्रकार लिखें:

    <img src="images/myimage.jpg">

     

    ऊपर कोड में मैने images/myimage.jpg लिखा है जो बताता है कि हमारे इमेज/चित्र का नाम myimage.jpg है जो images नाम के फ़ोल्डर में है।

    Note: यहां पर image के name और उसके format पर ध्यान दें, इमेज का नाम और format जानने के लिये इमेज की properties check करें।

    यहां मैने जो इमेज लिया है उसका नाम myimage है जो jpg format मे है, आपके इमेज का नाम और format अलग हो सकता है।

    अब वेबपेज को ब्राउसर में ओपन करते हैं, जो कुछ ऐसा दिखाई देगा:

    add image

    हम picture कि size भी change कर सकते हैं जिसके लिये height और width attribute का इस्तेमाल करेंगे।

    <img src="images/myimage.jpg" height="100px" width="100px">

    Height और width बदलने के बाद हमारा पेज कुछ ऐसा दिखाई देगा।

    change image size

     

    Link create करना

    Link या Hyperlink का उपयोग एक पेज को दूसरे पेज से जोडने के लिये किया जाता है।

    पढ़ें: HTML Link के types और उपयोग

     

    सबसे पहले हमें एक HTML page चाहिये जिसे हम अपने पेज से लिंक कर सकें, तो आप एक और पेज बना लें या पहले जो हमने पेज बनाया था उसे copy कर के उसी folder में दूसरे नाम से save कर लें।

    Link बनाने के लिये Code कुछ इस प्रकार से लिखें:

    <a href="अपने page का नाम">Text जिसे आप user को show करना चाहते हैं</a>

    उदहारण:

     

    <a href="contact.html">Contact us</a>

    अगर आप किसी website को link करना चाहते हैं तो उसके लिये code कुछ ऐसे लिखें:

     

    <a href="http://www.website.com"> Text जिसे आप user को show करना चाहते हैं </a>

    उदहारण:

    <a href="http://www.webinhindi.com">Learn web design in Hindi</a>

    Image Link: जैसा की आपने किसी website में देखा होगा जिसमें कुछ Buttons होते हैं जिस पर click करने से कोई दूसरा पेज open होता है इसी तरह हम किसी image के ऊपर भी link create कर सकते हैं

    Image link create करने के लिये code कुछ इस तरह से लिखें:

    <a href="page.html"><img src="images/button.jpg"></img></a>

    Example के लिये हम एक Read More नाम का बटन अपने पेज़ पर लगाते है:

    <a href="page.html"><img src="images/Read_more_button.png"></img></a>

    हमारा पेज कुछ इस तरह दिखाई देगा:

     

    hyperlink example

     

    अब जैसे ही हम Read More वाले बटन पर click करेंगे तो page.html नाम का दूसरा पेज ओपन होगा।

     

    Text Formatting

    यह सबसे Basic लेकिन जरूरी part है मगर ये थोडा frustrating भी हो सकता है। अगर आप साथ में practice करते जायें तो ये आपको interesting लग सकता है।

     

    इस भाग में हम simple text formatting जैसे कि नये line में sentence कैसे लिखे, text को left, right या center align कैसे करें आदि सीखेंगे|

     

    सबसे पहले आप नीचे दिये गये English paragraph को copy कर के अपने HTML document में Paste करें और पेज को browser में run करें और देखें क्या result आता है। (आप इसके बदले में कोई दूसरा random text भी use कर सकते हैं लेकिन ध्यान रहे उसमें कुछ space डालना ना भूलें जैसा कि नीचे paragraph में हमने डाला है)

    "This is a sample paragraph of text. Nothing important here just typing some words to the example of HTML formatting. In this article you are learning basics of HTML page designing in Hindi language.

    In webinhindi.com we will cover all the topics related to web design and development in Hindi language.

    If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting.

    End of my sample paragraph!"

    जब आप पेज Browser में open करेंगे तो कुछ इस प्रकार से दिखाई देगा

    text-formating-example

    आपने notice किया होगा कि हमने प्रत्येक sentence के बाद space छोडा था लेकिन browser में वो spaces  दिखाई नही दे रहे हैं और सारे sentences एक साथ एक ही paragraph मे merge हो गये हैं।

    इसे fix करने के लिये हमें नीचे दिये गये कुछ tags use करने होंगे:

  • <p> : इसका उपयोग हम तब करते हैं जब हमें कोई नया sentence लिखना होता है।
  • <br> : Line break, नया लाईन शुरू करने के लिये use किया जाता है।
  • अब हम इन दोनो टैग्स का उपयोग कर नीचे फ़िर से पहले वाले पैराग्राफ़ को लिखेगें, इसे copy कर फ़िर से अपने document में paste कर लें।

    <p>"This is a sample paragraph of text. <br> Nothing important here just typing some words to the example of HTML formatting.</p> <p>In this article you are learning basics of HTML page designing in Hindi language. </p> <p> In webinhindi.com we will cover all the topics related to web design and development in Hindi language.<br> <p>If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting. End of my sample paragraph!"</p>

    अब आपका पेज कुछ इस प्रकार दिखाई देगा

    p and br tag exampleअब आप <p> और <br> tags के स्थान को बदल कर कुछ experiment कर के देखें की output कैसा आता है। अब हम text या image को align करना सीखेंगे, इसके लिये हम नीचे दिये कुछ टैग्स का उपयोग करेंगे:

     

  •  <center>Text जिसको center align करना है </center>
  • <p align =left> Text जिसको left align करना है </align>
  • <p align =right> Text जिसको right side में दिखाना है </align>
  • अब हम इन टैग्स को पहले वाले paragraph में apply करते है। ये देखिये मेरे में output क्या आता है:

    text and image alignment

    एक बार आप नीचे पूरा कोड देख ले:

    <html> <head> <title>My First HTML Document</title> </head> <body bgcolor="#1B99CF"> <center><font color="#fff">Hello World!!!</font></center> <center> <h1>This is heading</h1> </center> <center><img height="100px" src="images/myimage.jpg" width="100px"></center> <center><a href="page1.html"><img height="50px" src="images/button.png" width="100px"></a></center> <center> <p>"This is a sample paragraph of text.<br> Nothing important here just typing some words to the example of HTML formatting.</p> </center> <p align="left">In this article you are learning basics of HTML page designing in Hindi language.</p> <p align="right">If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting.</p> <p>In webtechadda.com we will cover all the topics related to web design and development in Hindi language.<br> End of my sample paragraph!"</p> </body> </html>

    Text जिसकी size change करनी है</font>: इस <font> tag को हम पहले भी use कर चुके हैं बस इस बार उसमें हम size attribute जोड देंगे और इसकी value 1-7 हो सकती (जहां 1 सबसे छोटा और 7 सबसे बडी size होगी)

    font size 

        2.<b>Text जिसको bold में दिखाना है</b>        3.<i>Text जिसको italic करना है</i> 4.<u>Text जिसमे underline डालना है</u>

     

     

    Tables

    HTML में टेबल बहुत ही useful होता है इससे न केवल हम data को अच्छे से present कर सकते हैं बल्कि हम table का use करके पूरे website का layout design कर सकते है

    तो चलिये देखते हैं कि हम अपने पेज में table कैसे डाल सकते हैं।

    Table बनाने के लिये 3 जरूरी tags का use किया जाता है:

  • <table > :Table
  • <tr> : Table Row
  • <td> : Table Data
  • अब नीचे दिये code को copy कर लें और run करके देखें:

    <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

    जो कुछ ऐसा दिखाई देगा:

    simple table

     अब चलिये कोड को समझते हैं:

    • सबसे पहले हमने <table> tag use किया border="1" लिखा जिससे border on हो जायेगा जिसकी size 1 होगी।
    • <tr> से हम एक नया row बनाते हैं|
    • <tr> के अन्दर हम <td> लिखते हैं, <td> से एक नया column बनता है। हमको कोई data लिखना होता है तो हम हमेंशा <td> tag के अंदर लिखेंगे।
    • हमने एक <tr> के अंदर दो <td> लिखा इसका मतलब एक row के अंदर 2 columns बनेंगे।

    Colspan and Rowspan:

    अब नीचे कुछ Tables दिये हैं, देखेंगे कि हम उसे किस तरह बना सकते हैं:

    colspan

    ये टेबल पहले से कुछ अलग है, इसमें पहले row में सिर्फ़ एक ही column है ऐसी स्थिती में हमें "colspan" attributeuse करना पडता है।

    • Colspan एक column की property है जिससे हम किसी एक column को दो या दो से अधिक column के बराबर span या फ़ैला सकते हैं।
    • जैसा कि आप ऊपर देख सकते हैं first वाले row में सिर्फ़ एक cell है लेकिन वो 2 cells के बराबर है, ऐसा हमने <td> में colspan="2" attribute use करके बनाया है। नीचे आप पूरा कोड देख सकते है:
    <table border="1" width="200px" height="200px"> <tr align="center"> <td colspan="2">Cell 1</td> </tr> <tr align="center"> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

    अब हम rowspan का example देखेंगे:

    rowspan

    जैसा कि आप देख सकते हैं हमने एक cell को vertically span करके 2 cells के बराबर बनाया है तो इसके लिये हमने<td> में rowspan="2" attribute का उपयोग किया है।

     

    नीचे आप पूरा कोड देख सकते हैं:

    <table border=1 width="200px" height="200px"> <tr align="center"> <td rowspan="2">Cell 1</td> <td>Cell 2</td> </tr> <tr align="center"> <td>Cell 3</td> </tr> </table>

    Note: अगर आप cell को horizontally stretch करना चाहते हैं तो <td> में colspan का use करें और vertical stretch के लिये rowspan attribute लगायें।

     

    HTML Form

    Web forms के जरिये आप अपने web page के users से information ले सकते हैं। HTML form के जरिये आप Registration, login, contact form आदि बना सकते हैं

    Note: HTML से form की सिर्फ़ design की जा सकती है। एक functional form बनाने के लिये हमें कोई server-side scripting (जैसे php, Asp.net आदि) की जरूरत पडेगी जिसे हम बाद में इसी blog में cover करेंगे।

    Form काम कैसे करता है:

    • हर form मे एक submit button होता है, जब भी कोई user इस बटन को click करता है तो उसके द्वारा भरा गया सारा information दूसरे पेज में send हो जाता है।
    • हमें सारा data कहां भेजना है ये हम पहले से ही form बनाते समय specify कर देते हैं
    • जिस page पर data send होता है उसमें हमें एक program लिखना पडता है जिससे आने वाले सारे data को हम receive कर सकें। इस program को PHP या कोई अन्य server-side भाषा में लिखा जाता है जिसके बारे में हम बाद में जानेंगे।

     

    Form कैसे बनायें:

    • <form> tag से सारे forms start होते हैं जिसे हम html के body में कहीं भी लिख सकते हैं।
    • Form tag में दो main attributes, method और action होते हैं <form method="post" action="register-exe.php">
    • Method attribute की value "get" या "post" हो सकती है। By default value get होती है।
    • Get method से भेजा गया information secured नही होता और form के सारे data browser के address bar में दिखाई दे सकते हैं। sensitive information जैसे की password आदि get method से नही भेजना चाहिये।
    • Post method secured होता है, send किया हुआ कोई भी data browser में show नही होता
    • Action attribute में हम उस वेबपेज का address लिखते हैं जहां हमें data send करना होता है।

    सबसे पहले आप नीचे दिया गया कोड copy करें और एक नये html page मे paste कर run करें:

     

    <html> <head> <title>Registration Page</title> </head> <body bgcolor="#00CCCC"> <h3>Registration Form</h3> <form action="" method="post">Enter Name: <input name="name" type="text"><br> <br> Enter Email: <input name="email" type="text"><br> <br> Gender: <input name="gender" type="radio" value="Male">Male <input name="gender" type="radio" value="female">Female<br> <br> City: <select name="city"> <option>Delhi</option> <option>Mumbai</option> <option>Kolkata</option> <option>Pune</option> <option>Hydrabad</option> </select><br> <br> Address: <textarea name="address"></textarea> <br> <br> <input type="submit" value="Register"> <input type="reset" value="Clear"></form> </body> </html>

    Output कुछ इस तरह दिखाई देगा:

    simple-html-form-design

    उपर हमने एक registration form बनाया है जिसमें name और email के लिये text box, gender के लिये radio button, city के लिये dropdown box और address के लिये textarea use किया है।

     

    चलिये अब इन codes को समझते हैं:

    • हमने form tag के action attribute को blank छोड दिया है क्योंकि अभी हमें data दूसरे पेज में send नहीं करना है।
    • Text-box: name और email enter कराने के लिये दो text-box बनाया गया है, इसके लिये <input> tag use किया जिसमें type में हमने text डाला।
    • Radio button: male, female के लिये हमने दो radio button बनाये, यहां ध्यान देने वाली है की एक बार में दोनो में से कोई एक radio button active होना चाहिये, हम male और female दोनो एक साथ select नही कर सकते नही तो मामला गडबड हो सकता है। इसलिये हमे दोनो radio buttons के name को same रखना होगा
    • Dropdown या Combo box: इसे हमने city के लिये use किया है। <select> tag के अंदर हमने 5 <option> लिखे हैं जिसमें 5 शहरों के नाम है।
    • Text-area: address के लिये हमें एक बडा box बनाना होता है जिसमें हम multiple lines लिख सकते हैं। इसे <textarea> tag के जरिये बना सकते हैं।
    • Submit button: form को submit करने के लिये button बनाया जिसे <input> tag से बना सकते हैं जिसमेtype="submit" होना चाहिये। value attribute के जरिये button में दिखने वाले text को बदल भी सकते हैं जैसा की हमने ऊपर button में register लिखा हुआ है।
    • Reset या Clear button: अंत में form fields को reset करने के लिये एक और <input> tag लिया जिसमेंtype="reset" रखा।

    इस article (HTML tutorial in Hindi) में हमने कोशिश किया है की HTML के सारे basic topics को कवर किया जाये, हो सकता है यह पोस्ट आपको थोड़ी लम्बी लगी हो लेकिन अगर आप इसे step-by-step तरीके से practice करते जाएँ तो आप सिर्फ 20 मिनट में HTML सीख सकते हैं|

     

     


    Read Full Blog...


    HTML Tags ,Complete HTML Tags List in Hindi


    HTML Tag एक साधारण शब्द या अक्षर होता है. जो Angular Brackets (&lt; &gt;) से घिरा रहता है. इस प्रकार एक साधारण शब्द/अक्षर और Angular Brackets से एक HTML Tag का निर्माण होता है. नीचे कुछ उदाहरण दिए गए है. आप इन्हे पढकर आसानी से HTML Tag को समझ जाऐंगे. Types Of HTML Tag एक HTML Tag के तीन भाग होते है: Opening Tag Text Closing Tag Opening Tag Opening Tag को Start Tag भी कहा जाता है. Start Tag का कार्... Read More

    HTML Tag एक साधारण शब्द या अक्षर होता है. जो Angular Brackets (< >) से घिरा रहता है. इस प्रकार एक साधारण शब्द/अक्षर और Angular Brackets से एक HTML Tag का निर्माण होता है. नीचे कुछ उदाहरण दिए गए है. आप इन्हे पढकर आसानी से HTML Tag को समझ जाऐंगे.

    Types Of HTML Tag

    एक HTML Tag के तीन भाग होते है:

  • Opening Tag
  • Text
  • Closing Tag

    Opening Tag

    Opening Tag को Start Tag भी कहा जाता है. Start Tag का कार्य Browser को बताना है कि अब ये Rule Define हो रहा है. ताकि ब्राउजर उस Tag को सही तरह से Read कर सके. Opening Tag को इस प्रकार लिखा जाता है.

    <Tag Name>

    Text या Content

    Text वह जानकारी होती है; जो Webpage में लिखनी होती है. आप जो सूचना या जानकारी अपने Users को बताना चाहते है. वह Text यहाँ लिखा जाता है. Text लिखने के बाद Syntax कुछ इस प्रकार दिखाई देता है.

    <Tag Name> Text

    Closing Tag

    Closing Tag को End Tag भी कहते है. End Tag से ब्राउजर को Opening Tag द्वारा Define Rule की समाप्ती के बारे में बताया जाता है. ये तीन Elements मिलकर एक HTML Tag का Syntax बनाते है. इन्हे एक साथ इस प्रकार लिखा जाता है. यह एक HTML Tag का पूरा Syntax है.

    <Tag Name> Text </Tag Name>

    Closing Tag को Opening Tag से अलग बनाने के लिए Forward Slash (/) का उपयोग किया जाता है.

    सभी HTML Tags का Syntax एक जैसा नही होता है. ऊपर बताया गया Syntax Paired Tags में Use किया जाता है. लेकिन, कुछ HTML Tags अकेले होते है. इन्हे Empty Tag कहते है. Empty Tag का Syntax इस प्रकार लिखा जाता है.

    <Tag Name />

    HTML Tag के प्रकार – Types of HTML Tags

    HTML Language में विभिन्न प्रकार के Tags होते है. प्रत्येक Tag का उपयोग अलग-अलग Elements को Define करने के लिये किया जाता है. HTML Tags के दो प्रकार होते है:

  • Paired HTML Tag
  • Unpaired HTML Tag
  • 1. Paired HTML Tags

    Paired HTML Tags वे HTML Tags होते है. जिनको जोडे यानि Pair में लिखा जाता है. एक Paired Tag के दो भाग होते है. पहला Opening Part होता है. जिसे इस प्रकार लिखा जाता है.

    <Tag Name>

    दूसरा भाग Closing Part होता है. इस भाग को Content यानि Text के बाद लिखा जाता है. इस भाग को इस प्रकार Define किया जाता है.

    </Tag Name>

    HTML में अधिकतर Tag Paired Tag ही होते है. लेकिन, हर चीज की तरह इनके भी अपवाद होते है – Unpaired Tag.

    2. Unpaired HTML Tag

    Unpaired Tag को Singular HTML Tag भी कहा जाता है. ये Tag अकेले होते है. Singular Tag का साथी Tag नही होता है. एक Unpaired Tag में Opening Part और Closing Part को एक साथ ही लिखा जाता है. एक Singular Tag को HTML Document में इस प्रकार Define किया जाता है.

    HTML Tag का Syntax – Syntax of an HTML Tag

    Basic Tags

    HTML Basic Tags वे Tags होते है, जो एक HTML Document की Foundation रखते है. इसलिये इन्हे Foundation Tags भी कहते है. नीचे HTML Basic Tags की List और उनके उपयोग के बारे में बताया जा रहा है.

  • <–…–> – यह Comment Tag है. Comment Element का उपयोग HTML Document में Comment Define करने के लिए किया जाता है.
  • <!DOCTYPE> – DOCTYPE Element का पूरा नाम Document Type Definition होता है. DOCTYPE Element का उपयोग Document Type को Define करने के लिए किया जाता है.
  • <HTML> – HTML Element एक HTML Document का Root Element होता है. इससे HTML Document को Define किया जाता है.
  • <Head> – Head Element द्वारा HTML Document के बारे में लिखा जाता है. यह एक Webpage का Header Section होता है. जिसमे अधिकतर Meta Information को लिखा जाता है.
  • <Title> – Title Element का उपयोग HTML Document का Title Define करने के लिए किया जाता है. Document Title हमें Browser Window में दिखाई देता है. Document Title को Head Element में लिखा जाता है.
  • <Body> – Body Element से HTML Document की Body को Define किया जाता है. Body Element में एक HTML Document का Visible Part लिखा जाता है, जो Users को दिखाई देता है.
  • <H1> to <H6> – ये Heading Elements है. Heading Element द्वारा HTML Document में Headings को Define किया जाता है. HTML में H1 से H6 Level तक Headings बना सकते है.
  • <P> – इसे Paragraph Element कहते है. इसका उपयोग HTML Document में Paragraph Define करने के लिए किया जाता है.
  • <Hr> – <hr> Element का पूरा नाम Horizontal Line है. Hr Element से HTML Document में Horizontal Line को Define किया जाता है.
  • <Br> – <br> Element का पूरा नाम Break है. Br Element का उपयोग Single Line Break देने के लिए किया जाता है. मतलब आप एक Line को अलग-अलग Line में तोडकर लिख सकते है.
  • Formatting Tags

    Formatting HTML Tags वे Tags होते है, जिनसे Document Text की Formatting की जाती है. मतलब आप Text को किस प्रकार दिखाना चाहते है. नीचे कुछ मुख्य Formatting Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

  • <abbr> – <abbr> Element का पूरा नाम Abbreviation होता है. Abbreviation Element से Abbreviation Define किया जाता है.
  • <b> – <b> Element का पूरा नाम Bold है. Bold Element से Text को Bold (गहरा) किया जाता है.
  • <big> – Big Element से Text को Normal Size से बडा करने के लिए किया जाता है.
  • <blockquote> – Blockquote Element का उपयोग Document में Text को Quote करने के लिए किया जाता है. इसका मुख्य उपयोग अन्य Source से प्राप्त Data को Quote करने के लिए होता है.
  • <center> – इसे Center Element कहते है. इससे किसी HTML Element की Center Position को Define किया जाता है.
  • <code> – Code Element से Computer Code को Define किया जाता है.
  • <del> – <del> Element का पूरा नाम Delete है. Delete Element से Document से Delete Text को Define किया जाता है.
  • <em> – <em> Element का पूरा नाम Emphasize होता है. इससे Text को Emphasized किया जाता है.
  • <font> – Font Element से Text का Font, Color और Size Define किया जाता है.
  • <i> – <i> Element का पूरा नाम Italic है. इससे Text को Italic यानि तिरछा किया जाता है.
  • <ins> – <ins> Element का पूरा नाम Insert है. Insert Element से Delete किए गए Text की जगह पर लिखे गए Text को Define किया जाता है.
  • <mark> – Mark Element से Text को Highlight किया जाता है.
  • <pre> – <pre> Element का पूरा नाम Preformat है. इस Element से Preformatted Text को Define किया जाता है.
  • <q> – <q> Element का पूरा नाम Quotation है. Quotation Element से छोटा Quotation Define किया जाता है. जैस; किसी शब्द या शब्दांश को Quote करने के लिए <q> Element का उपयोग किया जाता है.
  • <small> – Small Element से Text को Normal Size से छोटा दिखाने के लिए किया जाता है.
  • <strike> – <strike> Element का पूरा नाम Strikethrough है. Strikethrough Element से Strikethrough Text को Define किया जाता है. इससे Text के बीछ में एक Line आ जाती है.
  • <strong> – इससे Important Text को Define किया जाता है.
  • <sub> – <sub> Element का पूरा नाम Subscript होता है. <sub> Element से Text को Subscript किया जाता है.
  • <sup> – <sup< Element का पूरा नाम Suprescript है. इससे Text को Suprescript किया जाता है.
  • <u> – <u> Element का पूरा नाम Underline होता है. इस Element से Text को Underline किया जाता है. मतलब Text के नीचे एक Line आ जाती है.
  • Style Tags

    Style Tags के द्वारा एक HTML Document की Style Information को Define किया जाता है. नीचे Style Tags के बारे में बताया जा रहा है.

  • <style> – <style> Element द्वारा HTML Document में Style Information को Define किया जाता है. इसके द्वारा Text Color, Text Size, Heading Color और Size, Paragraph Size और Color को अपनी पसदांनुसार Define किया जा सकता है.
  • Image Tags

    Image Tags के द्वारा HTML Document में Image Insert करने के लिए किया जाता है. नीचे Image Tags के नाम और इनके उपयोग के बारे में बताया जा रहा है.

  • <img> – <img> Element का पूरा नाम Image होता है. इस Element द्वारा Document में Image को Define किया जाता है.
  • <map> – <map> Element से Image-Map को Define किया जाता है.
  • <area> – <area> Element से Image-Map में एक विशेष Area कोक Define किया जाता है.
  • Link Tags

    Link Tags का उपयोग HTML Document में Hyperlinks बनाने और अन्य बाहरी Documents को जोडने के लिए किया जाता है. नीचे Link Tags का नाम और उनके उपयोग के बारे में बताया जा रहा है.

  • <a> – <a> Element का पूरा नाम Anchor है. Anchor Element का उपयोग Document में Hyperlink बनाने के लिए किया जाता है.
  • <link> Link Element का उपयोग External Document को HTML Document से जोडने के लिए किया जाता है.
  • Section Tags

    Section Tags का उपयोग एक HTML Document को विभिन्न भागों में विभाजित करने के लिए किया जाता है. नीचे कुछ Section Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

  • <span> – <span> Element के द्वारा एक HTML Document में inline Sections बनाए जाते है. इसके द्वारा एक शब्द, Paragraph, Paragraphs का एक Section बना सकते है.
  • <div> – <div> Element का पूरा नाम Division है. Division Element से HTML Document में अलग-अलग Sections को Define किया जाता है.
  • List Tags

    List Tags के द्वारा HTML Document में Lists बनाई जाती है. आप Number Lists, Bullet Lists,Order Lists, Unorder Lists और Definition Lists Create कर सकते है. नीचे Lists Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

  • <ul> – <ul> Element का पूरा नाम Unorder List होता है. Unorder List Element द्वारा Bullet Lists या Unorder Lists बनाई जाती है.
  • <ol> – <ol> Element का पूरा नाम Order List होता है. Order List Element द्वारा Number या Order Lists बनाई जाती है.
  • <li> – <li> Element का पूरा नाम List Item होता है. List Item Element द्वारा एक List में लिखे जाने वाले Data को Define किया जाता है.
  • <dl> – <dl> Element का पूरा नाम Definition List होता है. Definition List Element द्वारा Definition Lists को Define किया जाता है.
  • <dt> – <dt> Element का पूरा नाम Definition Term होता है. Definition Term Element द्वारा Definition Term को Define किया जाता है.
  • <dd> – <dd> Element का पूरा नाम Definition Description होता है. Definition Description Element द्वारा Definition Terms के Description को Define किया जाता है.
  • Table Tags

    Table Tags के द्वारा HTML Document में Table Create करने के लिए किया जाता है. Table से Data को Tabular Format में Present किया जाता है. नीचे Table Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

     

  • <table> – <table> Element से Table को Define किया जाता है.
  • <caption> – <caption> Element का उपयोग Table Caption यानि शीर्षक Define करने के लिए किया जाता है.
  • <th> – &th;th> Element का पूरा नाम Table Header होता है. Table Header Element द्वारा Table Header यानि Cells को Define किया जाता है.
  • <tr> – <tr> Element का पूरा नाम Table Row होता है. Table Row Element द्वारा Table Row को Define किया जाता है.
  • <td> – <td> Element का पूरा नाम Table Data होता है. Table Data Element द्वारा Table Data को Define किया जाता है. यानि जो Data हम Table में लिखना चाहता है.
  • <thead> – <thead> Element का पूरा नाम Table Header होता है. Table Header Element द्वारा Header Content का Group बनाया जाता है.
  • <tbody> – <tbody> Element का पूरा नाम Table Body होता है. Table Body Element द्वारा Table के Body Content को Group किया जाता है.
  • <tfoot> – <tfoot> Element का पूरा नाम Table Footer होता है. Table Footer द्वारा Footer Content को Group किया जाता है.
  • Forms & Input Tags

    Form Tags का उपयोग एक HTML Document में अलग-अलग प्रकार के Forms बनाने के लिए किया जाता है. नीचे Form Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

  • <form> – <form> Element का उपयोग HTML Document में Form Create करने के लिए किया जाता है.
  • <input> – <input> Element का उपयोग HTML Form में विभिन्न प्रकार के Input Controls Create करने के लिए किया जाता है.
  • <textarea – <textarea> Element द्वारा Form में Text Area बनाया जाता है.
  • <button> – <button> Element से Form में Buttons बनाए जाते है.
  • <option> – <option> Element के द्वारा Drop-Down List में Options बनाने के लिए किया जाता है.
  • <optgroup> – <optgroup> Element का पूरा नाम Option Group होता है. इस Element द्वारा Drop-Down List मे एक प्रकार एक Options का एक Group बनाया जाता है.
  • <label> – <label> Element द्वारा एक Input Element के लिए Label को Define किया जाता है.
  • <fieldset> – <em> Element द्वारा Form में एक प्रकार के Elements का एक Group बनाया जाता है.
  • <legend> – <em> Element द्वारा Fieldset Element के लिए Caption या शीर्षक बनाया जाता है.
  • Scripting or Programming Tags

    Scripting Tags द्वारा एक HTML Document में कुछ Programming Codes को लिखा जाता है. नीचे Scripting Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

  • <script> – <script> Element द्वारा HTML Document में Script को Define किया जाता है.
  • <noscript> – <noscript> Element द्वारा उन ब्राउजरों के लिए वैकल्पिक (Alternet) Content को लिखा जाता है, जो Script को Support नहीं करते है. या जिन ब्राउजरों में Script को Disable कर दिया जाता है.
  • Frame Tags

    Frame Tags द्वारा एक HTML Document को कई Frames में बाँटा जा सकता है. मतलब एक Document को कई अलग-अलग Window बनाकर उनमे अलग-अलग Data Show करा सकते है. Frame का अब ज्यादा उपयोग नही किया जाता है. फिर भी जानकारी देने के लिए हमने Frame Tag के बारे में नीचे बताया है.

  • <frame> – <frame> Element के द्वारा HTML Document में Frames को Define किया जाता है.
  • <frameset> – <frameset> Element द्वारा एक Frameset को Define किया जाता है. Frameset को Frame Tag द्वारा अलग-अलग Rows और Columns में बाँटा जाता है.
  • <noframes> – <noframes> Element द्वारा उन ब्राउजरों एक लिए वैकल्पिक (Alternet) Content को लिखा जाता है, जो Frames को Support नही करते है.
  • <iframe> – <iframe> Element द्वारा HTML Document में Inline Frame को Define किया जाता है.
  • Meta Tags

    Meta Tags द्वारा एक Webpage के बारे में Information को लिखा जाता है. इस Information का उपयोग Search Engines द्वारा HTML Document के बारे में जानकारी लेने के लिए किया जाता है. नीचे मुख्य Meta Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

     

  • <head< – <head> Element का पूरा नाम Header होता है. Header Element द्वारा एक Document के बारे में Information को Define किया जाता है.
  • <meta> – <meta> Element द्वारा एक Document का Meta Data Define किया जाता है.
  • <base> – <base> Element का उपयोग एक Document में Related URLs के लिए एक Base URL Define करने के लिए किया जाता है.

  • Read Full Blog...


    How To Increase WordPress Website Speed Using Autoptimize Setting Word


    #start Leverage Browser Caching Gomahamaya &lt;IfModule mod_expires.c&gt; ExpiresActive On ExpiresByType image/gif &quot;access 1 year&quot; ExpiresByType image/jpg &quot;access 1 year&quot; ExpiresByType image/jpeg &quot;access 1 year&quot; ExpiresByType image/png &quot;access 1 year&quot; ExpiresByType image/x-icon &quot;access 1 year&quot; ExpiresByType text/css &quot;access 1 month&quot; Expir... Read More

    #start Leverage Browser Caching Gomahamaya <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/xhtml-xml "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresDefault "access 1 month" </IfModule> #End Leverage Browser Caching Gomahamaya

     

     

     

     

     

    Autoptimize plugin - https://wordpress.org/plugins/autopti... This is the best setting for Autoptimize plugin . if you have any question regarding this do let me know You can hire me I will optimise your website to get maximum speed on your website Note - if in case your website breaks you need to eliminate that particular JavaScript files from optimization . you need to check which one is breaking . Google page insight - https://developers.google.com/speed/p... gtmetrix- https://gtmetrix.com critical css generator - https://jonassebastianohlsson.com/cri... premium css generator - https://criticalcss.com Reduce server response time WordPress(server response time is because of small size, old technology server component updrage to best hosting i always kinsta ) -: Kinsta- https://www.gomahamaya.com/go/kinsta fastcomet- https://www.gomahamaya.com/go/fastcom... 14 days free trail cloud hosting - https://www.gomahamaya.com/go/fastcom... Bluehost- https://www.gomahamaya.com/go/bluehost inmotion hosting - https://www.gomahamaya.com/go/inmotio... NOTE - USE symobol for Angle brackets i can't type Angle brackets symbol because youtube doesn't allow us to type . its better collect the code from my website https://www.gomahamaya.com/leverage-b... https://www.gomahamaya.com/enable-gzi... Fix browser Leverage Cache Expiration # LBROWSERCSTART Browser Caching Angle brackets IfModule mod_expires.c Angle brackets ExpiresActive On ExpiresByType image/gif "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/xhtml-xml "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresDefault "access 1 month" Angle brackets /IfModule Angle brackets # END Caching LBROWSERCEND Fix Defer Parsing Of Javascript - https://youtu.be/_6iVXEIL4fo remove emoji - https://youtu.be/Mjp6fk1kOM8 Optimize image - https://youtu.be/sNwIBmjEOXI Optimize wp-emoji-release.min.js you need to add following code using https://wordpress.org/plugins/code-sn... plugin remove_action('wp_head', 'print_emoji_detection_script', 7); remove_action('wp_print_styles', 'print_emoji_styles'); Frequently asked questions Do I need any plugin for cache plugin? Yes , you need one more extra plugin for caching that will enhance visitor experience which is is best plugin for caching ? You can use any plugin like w3cache total wp total cache or comet cache . But we always recommand comet cache pro for getting high optimization https://www.gomahamaya.com/go/comet-c... Hire someone from fiverr just 5$ for complete website optimization - https://goo.gl/pv3jfj ----------------------------------------------------------------------------------------------------------- Donate to support our work- https://www.paypal.me/gomahamaya donation id - [email protected] ------------------------------------------------------------------------------------------------------- Get in touch with us on Social Media. Facebook: https://www.facebook.com/gomahamaya Twitter: https://twitter.com/gomahamaya


    Read Full Blog...


    require legal registration for online newspaper


    http://digitalindiamib.com http://www.pib.nic.in http://rni.nic.in/ Registrar Of Newspapers For India(RNI) The office of the Registrar of Newspapers for India (RNI) is controlled by The Ministry of Information and Broadcasting and it is also responsible for framing rules under the Press and Registration of Books Act, 1867. So, anybody who&#39;s willing to start a Newspaper or Magazine, Journals, e... Read More

    http://digitalindiamib.com

    http://www.pib.nic.in

    http://rni.nic.in/

    Registrar Of Newspapers For India(RNI)

    The office of the Registrar of Newspapers for India (RNI) is controlled by The Ministry of Information and Broadcasting and it is also responsible for framing rules under the Press and Registration of Books Act, 1867. So, anybody who's willing to start a Newspaper or Magazine, Journals, etc. will have to seek prior approval of RNI.

    The Regional offices of RNI are in Mumbai, Kolkata and Chennai.

    RNI – Registration Process


    The primary step to commence a newspaper business is to get the title (name of the proposed newspaper) verified from Registrar of Newspaper for India.

    For this, the publisher has to make an application for title verification indicating-

     

    The name of the paper.
    The name of the owner.
    Language in which it would be circulated.
    Periodicity and area of publication of the newspaper proposed.
    The publisher then has to submit it to the District Magistrate concerned.

    With the growing popularity of the internet, the office of Registration of Newspapers in India(RNI) has also provided the feature of filing an online application for title verification.

    The District Magistrate after verifying the credentials of the applicant will forward the application to the RNI, who in turn will check the availability of the title.
    RNI will notify the District Magistrate and publisher about the availability of the title by issuing a letter of title verification.


    Subsequent to this, the publisher has to file a declaration with the District Magistrate in the prescribed format available to start publishing the newspaper.
    The application for registration can be submitted to the RNI – along with an attested copy of title verification, a copy of the declaration, the first issue of the newspaper and a 'No Foreign Tie-up' affidavit- duly attested by a Notary.
    The first issue of the newspaper should be printed within 45 days from the date of authentication of the declaration if, it is a daily or weekly and, in the case of other periodicals, it should be printed within 90 days.

    A Newspaper Should Contain-

    Issue number, volume number, title- prominently displayed on the cover page and on all pages.
    Date line and page number and an imprint line containing- the name of publisher, printer, editor and owner, address of the place of publication and name and address of the printing press.
    If the printer and publisher are different persons, separate declarations are required to be submitted.
    Documents Required For Registration-

    Copy of the Title Verification Letter.


    Attested copy of the Declaration duly authenticated by the District Magistrate/Additional District Magistrate etc.
    Affidavit for No Foreign Tie-up duly notarized.
    Copy of the first issue of the publication brought out within 42 days in case of dailies and weeklies and 90 days for fortnightly and above.
    Copy of the latest issue of publication.
    The title becomes available for use and may be made available to any other applicant if the applicant does not apply for registration within the stipulated period of two years.

    In addition to the above said documents, following KYC (Know your Customers) documents are also required –

    Certificate of Incorporation, Memorandum/Articles of the Company and in the case of Proprietorship- the registration certificate issued under Shops and Establishment Act and in the case of Partnership- Partnership Deed.
    PAN of the organisation.
    List of Promoters/Directors/Partners
    Board resolution in case of Company.
    ID and Address proof of Partners/Directors/Proprietor.
    Formalities Required After Registration Under RNI
    Whenever the first issue is printed, a copy of the newspaper should be delivered to the RNI. The first issue after the last day of February should contain the Form No. IV (Statement regarding ownership and other details of the newspaper) duly filled in.

    It is also mandatory to submit an annual statement in form II- on or before the last day of May every year.

    Requirement Of Fresh Filings
    Whenever there is a change of publisher, printer, owners, periodicity and printing press, the publisher/printer has to make a fresh declaration.

    Procedure for obtaining a magazine license-

     

    Submit an Application form for title verification and approach to the Regional Magistrate Court.
    Obtain a Diary Number which has been allotted by the Magistrate Court and apply to the Office of Registrar of Newspapers for India (RNI) to check the availability of the name through the magistrate court.
    Approach the magistrate court to get a date allotted for hearing after the name has been approved.
    Printer, Publisher & Editor are required to appear before the magistrate for taking oath with the following documents-
    a) Declaration copy which has to be filled by the Printer, Publisher & Editor
    b) Address & ID Proof of the printer, Publisher & Editor
    c) Printing Press License copy of the Printer
    After these steps have been completed, the Magistrate Court will send an approval. The magazine can be published after that and the copies of the published magazines will have to be submitted to the RNI Regional Office for the final approval.
    Once the office of RNI is satisfied, they will issue an RNI Certificate and both (RNI Number and the Diary Number) will have to be mentioned on each copy of the magazine.
    That's all about Registration Of Newspaper & Magazine under RNI for now. Which part of the article do you find more informative? Comment below. And, Don't forget to Share!!


    Read Full Blog...


    फर्श से अर्श तक का सफर गौतम अडानी ( Biography Of Gautam Adani)


    गौतम अडानी का जन्म 24 जून 1962 को अहमदाबाद के गुजराती जैन परिवार में हुआ था। अपने सात भाई-बहनों में एक अडानी के पिता : शांतिलाल अदानी,&nbsp;माता : शांताबेन अदानी &nbsp;कभी आजीविका के लिए थराड़ कस्बे से गुजरात के इस उत्तरी हिस्से में आ बसे थे। &nbsp; &nbsp; &nbsp; &nbsp; गौतम अदाणी एक भारतीय उद्यमी और स्वयं निर्मित अरबपति है जो अदानी समूह के अध्यक्ष हैं। अदानी समूह कोयला व्यापार, कोयला खनन, तेल एवं... Read More

    गौतम अडानी का जन्म 24 जून 1962 को अहमदाबाद के गुजराती जैन परिवार में हुआ था। अपने सात भाई-बहनों में एक अडानी के पिता : शांतिलाल अदानी, माता : शांताबेन अदानी  कभी आजीविका के लिए थराड़ कस्बे से गुजरात के इस उत्तरी हिस्से में आ बसे थे।

            गौतम अदाणी एक भारतीय उद्यमी और स्वयं निर्मित अरबपति है जो अदानी समूह के अध्यक्ष हैं। अदानी समूह कोयला व्यापार, कोयला खनन, तेल एवं गैस खोज, बंदरगाहों, मल्टी मॉडल लॉजिस्टिक, बिजली उत्पादन एवं पारेषण और गैस वितरण में फैले कारोबार को सम्भालने वाला विश्व स्तर का एकीकृत बुनियादी ढ़ाँचा है। हमारे देश में शीर्ष अंबानी साम्राज्य के जनक आज के उद्योगपति मुकेश अंबानी और अनिल अंबानी नहीं, बल्कि उनके पिता धीरू भाई अंबानी रहे हैं। इसी तरह टाटा-बिड़ला का साम्राज्य भी उनके पुरखों का बनाया हुआ है लेकिन गौतम अडानी खुद के बूते इस मोकाम पर पहुंचे हैं। जिस समय वह गुजरात यूनिवर्सिटी में बीकॉम की पढ़ाई के लिए दाखिल हुए, उन्हीं दिनो घर के सामने रोजी-रोटी का संकट आ खड़ा हुआ। चिंताजनक स्थितियों में पढ़ाई छूट गई। वह कॉलेज से मुंह मोड़कर पैसा कमाने के चुनौतीपूर्ण सफर पर निकल पड़े। अपना शहर छोड़कर मुंबई चले गए और वहां एक डॉयमंड कंपनी में बड़ी मामूली सी पगार पर नौकरी करने लगे।

            33 वर्षों के व्यापार अनुभव के के साथ, गौतम अदाणी प्रथम पीढ़ी के उद्यमी हैं जिन्होंने अपेक्षाकृत लघु समय में $8 अरब का पेशेवर कारोबारी साम्राज्य आदानी समूह का नेतृत्व करने वाले एक मामूली पृष्ठभूमि के व्यक्ति हैं। उन्हें व्यापार-परिवहन एवं परिवहन सम्बंधी बुनियादी ढांचे के विकास के लिए विश्व भर के 100 सबसे प्रभावशाली व्यवसायियों में गिना जाता है।

    अदानी ग्रुप :

            अदानी ग्रुप को स्थापित करने वाले गौतम अदानी का शुरुआती जीवन आसान नहीं था।  शुरुआत में दो साल तक उन्होंने डायमंड सॉर्ट महिंद्रा ब्रॉस में नौकरी की।  नौकरी छोड़कर झावेरी बाजार में उन्होंने खुद का डायमंड ब्रोकरेज आउटफिट खोल लिया। वर्ष 1981 में मनसुखभाई ने प्लाटिक की एक यूनिट अहमदाबाद में लगाई तो गौतम अडानी को कंपनी चलाने के लिए कहा। इसके बाद उन्होंने बड़े भाई की पीवीसी यूनिट संभाली और धीरे-धीरे कारोबार आगे बढ़ाया। वर्ष 1988 में उन्होंने एक्सपोर्ट-इम्पोर्ट कंपनी अडानी इंटरप्राइजेज की स्थापना की। ऐसा भी कहा जाता है कि जिस अडानी ने मारुति-800 से अपना व्यावसायिक सफर शुरू किया था और आज उनके पास बीएमडब्ल्यू गाड़ियों का झुंड है, फरारी है, कुल तीन हेलिकॉप्टर, तीन बोम्बार्डियर, बीचक्राफ्ट विमान हैं।

    एक सबसे सफल बिजनेसमैन के इस सफर में गौतम अडानी को यह सफलता कोई आसानी से हासिल नहीं हुई है।

            आज अदानी ग्रुप देश की सबसे बड़ी एक्सपोर्ट कंपनियों में से एक है। उनका जन्म अहमदाबाद के निम्न मध्यम वर्गीय परिवार में हुआ था और वे कुल सात भाई-बहन थे। पढ़ाई लिखाई करने से पहले रोजी-रोटी का सवाल आ गया। नतीजा यह हुआ कि कॉलेज की पढ़ाई के बाद उन्होंने गुजरात यूनिवर्सिटी में बीकॉम में एडमिशन तो ले लिया, लेकिन पढ़ाई आगे बढ़ नहीं पाई।

            बात सन् 1980 के दशक की है। उस वक्त अडानी अपने अहमदाबाद शहर में बचपन के साथी मलय महादेविया के स्कूटर पर पीछे बैठे लोगों को दिख जाया करते थे। इस दोस्ती की एक खास वजह अडानी को कमजोर लेकिन महादेविया की अच्छी इंग्लिश भी रही। बाद में महादेविया उनके बिजनेस पार्टनर हो गए। 

            अडानी भारत के उन गिने-चुने कामयाब उद्योगपतियों में एक हैं, जिन्होंने फर्श से उठकर अर्श पर पहुंचने की 'अरबपति कामयाबी' हासिल की है। माली हालत खराब होने से ही उनके पिता अहमदाबाद के पोल इलाके की शेठ चॉल में रहते थे। आज उनका कारोबार पूरी दुनिया के कोयला व्यापार, खनन, तेल एवं गैस वितरण, बंदरगाह, मल्टी मॉडल लॉजिस्टिक, बिजली उत्पादन-पारेषण तक फैला हुआ है।

            इस वक्त वह लगभग दस अरब डॉलर की संपत्ति के स्वामी हैं। उनके पास देश की सबसे बड़ी एक्सपोर्ट कंपनी है। उन्होंने खुद का बीचक्रॉफ्ट जेट 2005 में और हॉकर जेट 2008 में खरीदा था। उनको यह सब महज साढ़े तीन दशक में हासिल हुआ है। अडानी ने हाल ही में उत्तर प्रदेश में 35 हजार करोड़ के निवेश का एलान किया है। उनकी पत्नी प्रीति पेशे से डेंटिस्ट हैं और अडानी फाउंडेशन की हेड भी। उनके दो पुत्र करण और जीत हैं।

            देश के बाहर भी कई मोरचों पर उनके सामने कठिन हालात आज भी बने हुए हैं। उनको ऑस्ट्रेलिया के क्वींसलैंड में सबसे बड़ी करीब 16.6 अरब डॉलर की लागत वाली कोयला खदान से खनन का अवसर मिला, जिसके लिए उन्हें ऑस्ट्रेलिया सरकार ने लगभग एक अरब डॉलर का कर्ज भी दिया लेकिन प्रोजेक्ट विवादों में आ गया।

             ऑस्ट्रेलिया के पर्यावरणवादी कहने लगे कि ये प्रोजेक्ट पर्यावरण के लिए नुकसानदायक है। इस प्रोजेक्ट पर केंद्रित विवाद आज भी थमा नहीं है। इसी तरह मध्य प्रदेश में उनका एक हीरा खदान का प्रोजेक्ट भी आजकल मीडिया की सुर्खियों में है। बताया जा रहा है कि अडानी ग्रुप और अरबपति अनिल अग्रवाल के नियंत्रण वाले वेदांता रिसोर्सेज ग्रुप मिलकर 59 हजार करोड़ के डायमंड प्रोजेक्ट के लिए बिड लगाने वाले हैं।


    Read Full Blog...


    Professional लोगो की professional पहचान wefru.com


    यदि&nbsp;आप&nbsp;एक&nbsp;Professional&nbsp;&nbsp;हैं&nbsp;अथवा&nbsp;आप&nbsp;Shopkeeper&nbsp;हैं&nbsp;या&nbsp;फिर&nbsp;आप&nbsp;अपना&nbsp;कोई&nbsp;Business&nbsp;करते&nbsp;हैं&nbsp;या&nbsp;आप&nbsp;अपनी&nbsp;कोई&nbsp;Service Providers&nbsp;करते&nbsp;हैं&nbsp;तो आप&nbsp;अपना&nbsp;Global Unique Identity Create&nbsp; कर सकते है&nbsp;Werfru&nbsp;पर&nbsp;Professional Profile&nbsp;बनाना&nbsp;उन&nbsp;लोगों&n... Read More

    यदि आप एक Professional  हैं अथवा आप Shopkeeper हैं या फिर आप अपना कोई Business करते हैं या आप अपनी कोई Service Providers करते हैं तो आप अपना Global Unique Identity Create  कर सकते है Werfru पर Professional Profile बनाना उन लोगों के लिए ज्यादा जरूरी होता है जो कि Online अथवा Offline में अपना खुद का Business करते हैं. अपनी Service providers करते हैं या फिर अपने  Product को Sale करते हैं या फिर किसी भी तरह से  Public से Connect रहना चाहते हैं. profile को Design करना और उसको अच्छी तरह से करने की सर्विस हम भी Provide करते हैं. इस Service में हम आपकी Wefru Profile को एक Professional look देते हैं और उसका On Page और Off Page SEO करते हैं और उससे इतना आसान बना देते हैं कि कोई भी आपके बारे में Search करें तो सीधा आपकी Profiles या Page पर पहुंच सके. और आपकी Profile को देखने के बाद उसको Trust Feel हो.




    Read Full Blog...


    Wefru My Business से अपने कारोबार को दें नई ऊंचाई


    आज के Digital युग में सब कुछ Online मौजूद है बात फिर चाहे सब्जी खरीदने की हो या टीवी फ्रिज खरीदने की. सब कुछ Online Order किया जा सकता है. ऐसे में जो व्यक्ति इस दौड़ में पीछे रह गया वह अपने व्यापार को ज्यादा आगे नहीं ले जा सकता. आलम यह है की छोटे से छोटा व्यापारी भी Online Business करने की रेस में है कुछ अपने Business से जुड़े Social Media Pages बना कर प्रचार कर रहे है तो कुछ Website बना कर ग्राहकों... Read More

    आज के Digital युग में सब कुछ Online मौजूद है बात फिर चाहे सब्जी खरीदने की हो या टीवी फ्रिज खरीदने की. सब कुछ Online Order किया जा सकता है. ऐसे में जो व्यक्ति इस दौड़ में पीछे रह गया वह अपने व्यापार को ज्यादा आगे नहीं ले जा सकता. आलम यह है की छोटे से छोटा व्यापारी भी Online Business करने की रेस में है कुछ अपने Business से जुड़े Social Media Pages बना कर प्रचार कर रहे है तो कुछ Website बना कर ग्राहकों को अपनी ओर आकर्षित करने में लगे है. आपकी Online मौजूदगी आज के समय में एक Status Symbol भी बन चुकी है. आपके नाम को लोग तभी विश्वशनीय मानते है जब वह आपको Google पर देख लें.

    आइये विस्तार से बात करते है Wefru My Business kya hai ? और यह हम सभी के लिए किस प्रकार उपयोगी साबित हो सकता है ?

    यदि आप एक Professional  हैं अथवा आप Shopkeeper हैं या फिर आप अपना कोई Business करते हैं या आप अपनी कोई Service Providers करते हैं तो आप अपना Global Unique Identity Create  कर सकते है Werfru पर Professional Profile बनाना उन लोगों के लिए ज्यादा जरूरी होता है जो कि Online अथवा Offline में अपना खुद का Business करते हैं. अपनी Service providers करते हैं या फिर अपने  Product को Sale करते हैं या फिर किसी भी तरह से  Public से Connect रहना चाहते हैं. profile को Design करना और उसको अच्छी तरह से करने की सर्विस हम भी Provide करते हैं. इस Service में हम आपकी Wefru Profile को एक Professional look देते हैं और उसका On Page और Off Page SEO करते हैं और उससे इतना आसान बना देते हैं कि कोई भी आपके बारे में Search करें तो सीधा आपकी Profiles या Page पर पहुंच सके. और आपकी Profile को देखने के बाद उसको Trust Feel हो.  

     

     

    Wefru My Business kya hai ?

     Wefru my Business को आसान शब्दों में समझें तो यह Wefru.com द्वारा लांच किया गया एक ऐसा टूल है जिसके मध्याम से आप अपने व्यापार को ऑनलाइन लिस्ट कर सकते है जिस से आपका ग्राहक आपको आसानी से ढूंड सकता है और उसे आपके बारे में जानकारी जैसे – Contact Number , Address , Location आसानी से मिल जाता है. इसी के साथ साथ यहाँ आप अपने व्यापार और प्रोडक्ट से जुडी कुछ तस्वीरें विडियो भी डाल सकते है. यदि आपके पास कोई वेबसाइट या पेज है तो उसे भी आप इसके साथ जोड़ सकते है. 

     

    Wefru My Business के फायदे 


    आज के समय में यदि आप दूसरो से आगे रहना चाहते है तो आपको उन सभी से कुछ अलग करने की जरुरत है नहीं तो आप दौड़ में हमेशा ही पीछे रह जायेगे. Wefru My Business के जरिये आप अपने व्यापार और उसके प्रोडक्ट से जुडी हर जानकारी को आसानी से ऑनलाइन शेयर कर सकते है.
    उधाहरण के लिए मान लीजिये , आपके व्यापार में 4 लोग ऐसे है जिनसे आप Competetion करते है. उन सभी ने अपने प्रोडक्ट को सस्ते दामों में बेचना शुरू कर दिया है लेकिन वह ऑनलाइन लिस्ट नहीं है. ऐसे में यदि आप अपना व्यापार ऑनलाइन लिस्ट कर लेते है तो जो लोग गूगल पर इस प्रोडक्ट को सर्च करेंगे वह आपको जानेगे बाकी उन तीन लोगो को नहीं. इसमें बस जरुरत है तो आपको दूसरों से थोडा सा अलग और एडवांस करने की.
    · आप अधिक से अधिक लोगों तक पहुच सकते है जो आप ऑफलाइन रह कर कभी नहीं कर सकते.
    · लोगो को आपके बिज़नस के बारे में पता चलता है.
    · लोग आपको और आपके प्रोडक्ट को आसानी से जान पाते है.
    · आप ग्राहकों के साथ किसी नए प्रोडक्ट के बारे में आसानी से एक क्लिक में शेयर कर सकते है.

     

    Wefru Business Listing


    आइये बात करते है की आप Wefru Business Listing कैसे कर सकते है ?

    · Wefru Business Listing के लिए आपको किसी विशेष तकनीक या राकेट साइंस की आवश्यकता नहीं है. आप सामान्य Google ID से ही Wefru Business Listing कर सकते है. इसके लिए आपको गूगल पर Wefru सर्च करना होगा. जिसके बाद आप अपना अकाउंट लॉग इन करें.

    · लॉग इन करने के बाद आपके सामने Create a New List का आप्शन होगा जिस पर क्लिक करने से आपको अपने बिज़नस से जुडी डिटेल्स को देना है.

    · सभी डिटेल्स को देने के बाद आपको अकाउंट वेरीफाई कराना होता है जिसके लिए एक से दो हफ्ते का समय लगता है और गूगल की तरफ से एक लैटर आपके उस पते पर भेजा जाता है जो आपने लिस्ट किया है.

    · अकाउंट को अवश्य वेरीफाई कराये जिसके बाद ही आपका बिज़नस पूरी तरह से लिस्ट होगा और Reputated Business कहलायेगा.

     

    My final opinion on this article,


    How did you think I would know this article only when you comment below. Hope, this article might
    have liked it, how do you think you must comment down? If you want to give any suggestions now,
    please give us what we can do something new for you. If you have not subscribed to our blog yet,
    please subscribe. You can also share your personal tutorials and blogs with us. ([email protected])

    मेरी अंतिम राय इस लेख पे,


    कैसा लगा मेरा ये लेख मुझे तभी पता चलेगा जब आप निचे कमेंट करेंगे. उमीद है ये लेख पसंद आया होगा, कैसा लगा आप जरुर निचे comment कर के बताइए. अगर आप भी कोई सुझाव देना चाहते हो तो जरुर दीजिये जिस्से हम आपके लिए कुछ नया कर सके. हमारे Blog को अभी तक अगर आप Subscribe नहीं किये हैं तो जरुर Subscribe करें.


    Read Full Blog...



    Wefru Services

    I want to Hire a Professional..

    <--icon---->