Saturday, 18 November 2017

CSS से खूबसूरत Image Gallery Design कैसे करें?

CSS image gallery tutorial

जैसा की आप सभी को पता है की CSS3 के अलग-अलग properties का use कर बहुत ही amazing चीजें बनायीं जा सकती हैं, आज हम ऐसा ही कुछ बनाने जा रहे हैं जो की दिखने में जितना आकर्षक है बनाने में भी उतना ही मजेदार है|

आज हम CSS से एक खूबसूरत photo gallery design करने वाले हैं और इसको बनाने के लिए हमने किसी की Javascript या jQuery का use नही किया है इसे केवल CSS3 से बनाया गया है इसलिए इसे design करना बहुत ही आसान है|

यह काम कैसे करेगा?

हम कई सारे images को मिलाकर एक simple photo collage create करेंगे, सभी images को अलग-अलग position और directions में दिखाई देंगे इसके लिए CSS properties का उपयोग करेंगे|

फोटो एक दुसरे के ऊपर हो सकते हैं और जब हम किसी एक इमेज पर mouse hover करेंगे तब वह इमेज बाकी सभी photos से ऊपर transition effects के साथ display होगा|

HTML और CSS से Image Gallery कैसे Design करें?

एक beautiful photo gallery design करने के लिए आपको HTML और CSS की जानकारी होनी चाहिए| CSS से image gallery बनाने के लिए आप नीचे दिए गये step by step tutorial को follow करते जाएँ|

Step 1: HTML Structure बनाएं सबसे पहले हम एक div बनायेंगे और उसमे सारे images को add कर देंगे :
<div class="gallery">
    <img src="image/01.jpg" />
    <img src="image/02.jpg" />
    <img src="image/03.jpg" />
    <img src="image/04.jpg" />
    <img src="image/05.jpg" />
</div>
यह आपके browser में कुछ इस तरह दिखाई देगा:

Image gallery html structure

Step 2: Photos की Position सेट करें अब सभी images की position को set करेंगे जिसके लिए CSS की position property की value हमें absolute रखनी होगी जैसा की आप नीचे देख सकते हैं:
 .gallery img {
    position: absolute;
}

ऐसा करने से images अपने default flow से हट कर एक दुसरे के ऊपर display होने लगेंगे जो की कुछ इस प्रकार दिखाई देंगे :

set image position to absolute

इसके बाद हम pseudo-class nth-of-type का उपयोग कर images को align करना शुरू करेंगे| यहाँ पर left और top property का use कर प्रत्येक photo को browser window से अलग-अलग distance पर display करेंगे|
.gallery img:nth-of-type(1) {
    left: 20px;
    top: 50px;
}
.gallery img:nth-of-type(2) {
   left: 150px;
    top: 50px;
}
 .gallery img:nth-of-type(3) {
    left: 250px;
    top: 50px;
}
 .gallery img:nth-of-type(4) {
    left: 350px;
    top: 150px;
}
.gallery img:nth-of-type(5) {
    left: 450px;
    top: 50px;
}
इस step के बाद आपका design कुछ ऐसा दिखेगा:

align images

Step 3: Images को Rotate करें इस step में हम CSS3 की transform property का उपयोग कर सभी photos को अलग-अलग angle पर rotate करेंगे इसका CSS code नीचे दिया गया है:
 .gallery img:nth-of-type(1) {
    left: 20px;
    top: 50px;
    transform: rotate(7deg);
}
.gallery img:nth-of-type(2) {
    left: 150px;
    top: 50px;
    transform: rotate(-7deg);
}
.gallery img:nth-of-type(3) {
    left: 250px;
    top: 50px;
    transform: rotate(10deg);
}
 .gallery img:nth-of-type(4) {
    left: 350px;
    top: 150px;
    transform: rotate(-4deg);
}
.gallery img:nth-of-type(5) {
    left: 450px;
    top: 50px;
    transform: rotate(12deg);
}
अब आपकी फोटो गैलरी इस प्रकार दिखाई देगी:
Rotate-image


Step 4: Photos पर Border add करें Image पर border डालने से पहले हम उसमे कुछ padding डालेंगे जिसके लिए padding property का उपयोग करेंगे|
.gallery img {
    position: absolute;
    padding:10px;
    background:#fff;
    border:1px solid #000
}
images पर border और padding add करने के बाद यह कुछ ऐसे दिखाई देगा:
image-border-using-css
 Step 5: Image पर Hover Effect add करना इस image gallery tutorial का यह सबसे interesting part है इसमें हम images पर attractive hover effect apply करेंगे|   जब photo के ऊपर mouse hover किया जायेगा तब वह इमेज pop out हो कर सबसे ऊपर show होने लगेगा|

इसके लिए हम दो CSS properties का use करेंगे:
1. z-index - इससे हम उस image को सबसे top पर display करेंगे| जिस element की z-index value सबसे ज्यादा होती है वह सबसे ऊपर display होता है|
2. transform: scale(1.3) - हम चाहते हैं की जब photo पर hover किया जाये तो उसकी size थोड़ी बढ़ जाये इसके लिए scale() का उपयोग करेंगे|

इसका कोड कुछ ऐसा होगा:
.gallery img:hover {
   transform: scale(1.3);
    z-index: 10;
}

जब image पर hover किया जाएगा तब यह कुछ ऐसा दिखेगा:
Image-gallery with hover effect

Step 6: Animation Effect डालना अब हम अपने image gallery को और interesting बनाने के लिए इसे animated बनाना होगा| हम transition property का उपयोग करके  hover effect की timing को control  कर सकते हैं|
.gallery img {
    transition: all 0.5s ease-out;
}

अब आपका image gallery पूरी तरह से बन कर तैयार है|

Live Demo

Image Gallery के लिए Complete HTML and CSS Code

इस design को बनाने के लिए उपयोग किया गया HTML और CSS के codes आपको नीचे दिए जा रहें हैं| आप चाहें तो इसे copy कर के run कर सकते हैं पर ध्यान रहे images के path change कर लें इसकी जगह खुद के system पर उपलब्ध images का उपयोग कर सकते हैं|

Complete HTML Code

<div class="gallery">
    <img src="image/01.jpg" />
    <img src="image/02.jpg" />
    <img src="image/03.jpg" />
    <img src="image/04.jpg" />
    <img src="image/05.jpg" />
</div>

Complete CSS Code
.gallery img {
  position: absolute;
  padding: 10px;
  background: #fff;
  border: 1px solid #000;
  transition: all 0.5s ease-out;
}
.gallery img:nth-of-type(1) {
  left: 20px;
  top: 50px;
  transform: rotate(7deg);
}
.gallery img:nth-of-type(2) {
  left: 150px;
  top: 50px;
  transform: rotate(-7deg);
}
.gallery img:nth-of-type(3) {
  left: 250px;
  top: 50px;
  transform: rotate(10deg);
}
.gallery img:nth-of-type(4) {
  left: 350px;
  top: 150px;
  transform: rotate(-4deg);
}
.gallery img:nth-of-type(5) {
  left: 450px;
  top: 50px;
  transform: rotate(12deg);
}
.gallery img:hover {
  transform: scale(1.3);
  z-index: 10;
}

हमे उम्मीद है की आपने यह article पढ़ कर CSS से एक amazing image gallery design कर ली होगी| आप अलग-अलग CSS properties का use करके इसे और ज्यादा attractive बना सकते हैं|

आपको हमारा यह article कैसा लगा जरूर बताएं|

Saturday, 21 October 2017

5 मिनट में बनायें अपने Website के लिए Simple Image Slider using Pure CSS

Pure-CSS-Slider

आज हम इस article में एक simple image slider design करेंगे जिसे आप अपनी website पर बड़ी आसानी से लगा सकते हैं|

वैसे तो ज्यादातर carousel slider javascript से बनाये जाते हैं लेकिन इस slideshow की सबसे खास बात यह है की इसे बनाने के लिए pure CSS यानि की केवल CSS का उपयोग किया गया है इसमें  किसी भी प्रकार की javascript की coding use नही की गयी है|

कई सारे users अपने browser में javascript disable करके रखते हैं ऐसे में pure CSS slider का उपयोग करना काफी फायदेमंद हो सकता है|

Pure CSS Image Slider Demo

इस image slideshow का एक live example आप नीचे देख सकते हैं|

Pure CSS से Image Slider कैसे बनायें 

अब चलिए देखते हैं कि इस slider को design कैसे किया जाये | नीचे आप step-by-step तरीके से अपने वेबसाइट के लिए एक खूबसूरत सा slideshow design करना सीखेंगे|

अगर आपको कहीं परेशानी हो तो सबसे नीचे comment box में अपना सवाल पूछ सकते हैं|

तो चलिए शुरू करते हैं इस tutorial को:

Step 1: CSS Slider के लिए HTML Code लिखें
 सबसे पहले हमें जिस पेज पर इस CSS slideshow को दिखाना है वहां एक <div> बनाना होगा जिसकी id हमें slider रखनी होगी|

नीचे दिया गया HTML code देखें:
<div id="slider">
</div>

Step 2: Slideshow में Images Add करें
अब हमें जिन images को CSS carousel slider में display करना है उन्हें नीचे दिए गये तरीके से slider वाले <div> के अंदर अलग-अलग <div> बना कर <img> tag के जरिये add करना होगा|
<div id="slider">    
<div>
<img src="image4.jpg">
</div>
<div>
<img src="image3.jpg">
</div>
<div>
<img src="image2.jpg">
</div>
<div>
<img src="image1.jpg">
</div>  
</div>

Step 3: CSS Code for Image Slider
हमने सारे images add कर दिए हैं अब हमें इन pictures को slider effect देना है जो की CSS code से किया जा सकता है|
नीचे दिया गया CSS code आप copy करके अपने HTML page के <head> tag के अंदर paste कर दें|
<style type="text/css">
div#slider {
  overflow: hidden;
  margin: auto;
  width: 50%;
  max-width: 700px;
  max-height: 400px;
}

div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slider infinite;
}

div#slider div img {
  width: 20%;
  float: left;
}

@keyframes slider {
  0% { left: 0%;}
  20% { left: 0%;}
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%;}
  75% { left: -300%;}
  95% { left: -300%;}
}
</style>


Step 4: जरूरत के अनुसार Customize करें
हमने पहले से ही इस slider की height और width set किया हुआ है लेकिन जाहिर सी बात है हर वेबसाइट की अलग-अलग requirements होती हैं और आपके website के लिए यदि इसकी size सही न हो तो आप आवश्यकतानुसार इसकी height width में बदलाव कर सकते हैं इसके अलावा आप slideshow की speed भी कम-ज्यादा कर सकते हैं |

Set Height and Width:
इसके लिए आपको CSS में div#slider selector की कुछ properties में नीचे दिए गये अनुसार बदलाव करने होंगे:

  • width: 50%; - सबसे पहले इसके percentage में changes करें
  • max-width: 700px; - ध्यान रहे हम  यहाँ पर maximum width set करेंगे जिससे की इसकी width आवश्यकता से ज्यादा न हो नही तो image की quality भी खराब हो सकती है |
  • max-height: 400px; - उसी प्रकार maximum height भी तय करना होगा|

Set Animation Speed:
Slider की speed को भी बदला जा सकता है| इसके लिए CSS में div#slider div selector के animation property में changes करने होंगे|

नीचे आप animation property का code देख सकते हैं जहाँ इसकी value में हमने speed को 20s में specify किया है आप चाहें तो इसे बदल भी सकते हैं|

animation: 20s slider infinite;

आज आपने इस tutorial में एक simple pure CSS slider बनाना सीखा आप चाहें तो इसमें कुछ और भी add कर सकते हैं जैसे की image में link डाल सकते हैं, नीचे caption add कर सकते हैं इसके अलावा इसके animation effect को भी बदल सकते हैं|
आगे पढ़ें:


यदि आपको हमारा यह article पसंद आया हो तो आप हमें subscribe जरूर करें, subscribe करने के लिए नीचे newsletter box में अपना email enter करें और submit button press करें|



Wednesday, 11 October 2017

Website पर Full Screen Background Image कैसे लगायें?

how to add full screen background image in a website using css

Web design में full screen background image use करने का trend काफी popular है| आपने कई सारी companies और products की websites के home page में large background image का उपयोग करते हुए देखा होगा जो की पूरे browser window को cover कर लेता है और काफी attractive दिखाई देता है|

अगर आप भी अपने वेबसाइट पर इस तरह की background image use करना चाहते हैं तो आज हम आपको इस article में एक आसान तरीका बताएँगे जिससे आप CSS का उपयोग करके यह काम बड़ी आसानी से कर सकते हैं और इसकी खास बात यह responsive भी है यानि की लगभग सभी devices पर यह काम करता है|

Examples of Full Screen Background Images

चलिए सबसे पहले हम कुछ ऐसे websites का example देखते हैं जो की full screen image का उपयोग करते हैं| इन examples को देखने के बाद आपको भी कुछ inspiration मिलेगा और समझ भी आयेगा की किस तरह के images use कर सकते हैं|

Example of a full-screen background image- Frances vintage
http://francesvintage.com

Example of a full-screen background website- The gilder
http://thegilder.ca

example of a full-screen background website- zenvala
http://zenvala.com/

example of a full-screen background image website- hermestocchetti
http://www.hermestocchetti.com/en/

example of a full-screen responsive background image website- scene360
http://illusion.scene360.com/

example of a full-screen responsive background image website-justbean
justbean.co.uk

example of a full-screen responsive background image website- penandquill
http://penandquill.net/

exampleexample of a full-screen responsive background image website- cassiano
http://cassiano.tv

exampleexample of a full-screen responsive background image website- timi
https://www.timi-shop.com/

CSS Code से Full Screen Background कैसे लगायें?

जब हमें पूरे screen पर background डालना होता है तब हमें html tag या body tag पर CSS की background property apply किया जाता है|

इस example में हमने CSS code से body tag पर background image apply किया है| इसका code आप नीचे देख सकते हैं|
body {
  background: url(background.jpg) no-repeat center center fixed;
  background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 }
चलिए अब इस code को समझने की कोशिश करते हैं:

background shorthand property
सबसे पहले हमने background की shorthand property का use करते हैं जिसमे नीचे दिए गये कुछ values add करने हैं:
  • url(‘image_name.jpg’) - background image का path
  • no-repeat - हमें ये ध्यान रखना है की image repeat न हो इसके लिए no-repeat लिखना होगा
  • center center - इसकी जगह हम 50% 50% भी use कर सकते हैं जिससे image horizontal और vertical दोनों तरफ से center पर आ जाये|
  • fixed - इससे image background में fixed हो जाएगी और page scroll करने पर भी अपनी जगह पर बनी रहेगी|
background-size property
यह सबसे important है इस property की value cover रहेगी जिससे की यह पूरे browser screen की width और height को cover कर लेगा|

Old browsers के लिए code
कुछ पुराने version के browsers में background-size property सही तरह से काम नही करती है तो उनके लिए कुछ browser specific codes add करने होंगे:
  • -webkit-background-size - Safari और Chrome browser के लिए
  • -moz-background-size - Firefox के लिए
  • -o-background-size - Opera के लिए
इसका एक live example आप नीचे देख सकते हैं|

Large Image Select करते समय इन बातों का रखें ध्यान

वेबसाइट के background पर full screen image लगाते समय आपको कई सारी बातों का ध्यान रखना पड़ेगा| आपको यह ध्यान रखना होगा की image की quality high हो लेकिन आपको यह भी देखना होगा की website की loading speed पर उसका गलत प्रभाव न पड़े|

Background image लगाते समय नीचे दिए गये कुछ points पर जरूर ध्यान दें:
  • Small size के image का use न करें क्योंकि यह पूरे screen को cover करने के लिए expand होगी जिससे की large screen वाले device पर इसका resolution कम हो जायेगा और quality कम हो जाएगी|
  • Image की size को 1920px के आसपास रखें|
  • Image को optimize करने के लिए उसे compress कर सकते हैं लेकिन quality का भी ध्यान रखें|
  • आप large image की जगह कोई ऐसा small size का image use कर सकते हैं जिसे आसानी से repeat करके पूरे screen को cover किया जा सके| इसका एक फायदा यह भी है की ये जल्दी load हो जाते हैं जिससे website speed प्रभावित नही होती| आप Google पर repeatable background image search कर सकते हैं|
  • सही image format का उपयोग करें| यदि graphics multiple color वाली हो तो JPG और यदि solid color वाली हो तो PNG format का use करें|
  • Color combination का जरूर ध्यान रखें, website के contents background image के ऊपर रहेंगे ऐसे में contents के color को इस प्रकार रखें की वह साफ़-साफ़ दिखाई दे|

इस tutorial को पढने के बाद अब आप आसानी से अपनी website पर responsive full screen background image लगा पाएंगे| आप इस background के ऊपर किसी भी प्रकार के content जैसे heading, paragraph, navigation, form आदि जो कुछ भी चाहें लगा सकते हैं|

आपको यह article कैसा लगा जरूर बताएं|

Sunday, 8 October 2017

सिर्फ 7 Steps में सीखें jQuery में Coding करना?

jquery-tutorial-in-hindi

jQuery tutorial in Hindi: इससे पहले आपने jQuery का basic introduction पढ़ा जिसमे आपने जाना की jQuery क्या है, इसके क्या फायदे हैं,  Javascript और jQuery में क्या अंतर है|

अब यदि आपने तय कर लिया है की आपको jquery सीखना है तो यह article आपके लिए काफी फायदेमंद हो सकता है|

इस article में आप step by step तरीके से jQuery में coding करना सीखेंगे और जानेंगे की jQuery के जरिये web page के elements पर किस तरह से अलग-अलग प्रकार के effects apply कर सकते हैं|

Learn jQuery in Hindi - Step by Step Tutorial

चलिए अब इस step-by-step tutorial की शुरुआत करते हैं| आप अगले 7 steps में jQuery की लगभग सभी जरूरी features का उपयोग करना सीख जायेंगे| अगर आपको किसी step में परेशानी हो तो हमें नीचे comment करके जरूर बताएं|

STEP 1 - jQuery Download करें सबसे पहले आपको अपने system पर jQuery की file download करनी पड़ेगी इस file के बिना आप coding करना शुरू नही कर सकते|

jQuery download करने के लिए इसकी official website पर जाएँ|

यहाँ पर आपको jQuery के दो versions मिलेंगे:
  • Production version - यह minified यानि की compressed होता जिसे हम live website पर use कर सकते हैं|
  • Development version - यह testing और development के लिए होता है इसके अंदर के codes आसानी से read किये जा सकते हैं क्योकि ये compressed नही होते|

STEP 2 - HTML page पर jQuery को add करें download करने के बाद इस file को नीचे दिए गये code के जरिये HTML page के head section में include करें|
<head>
<script src="jquery.js"></script>
</head>

STEP 3 - jQuery Syntax अब आपने सीख लिया की कैसे jQuery file को किसी html page में include किया जाता है| अब चलिए jQuery में code लिखने का basic syntax देखते हैं:
$(selector).action();
  • यहाँ jQuery को short में $ लिखा जाता है|
  • selector - यानि element जिस पर हमें action perform करना है| जैसे paragraph element, input element आदि|
  • action() - यह एक function है जिसमे हम यह बताते हैं की कौन सा action या effect apply करना है|
Example:
यदि हमें पेज के सारे paragraphs को hide करना है तो उसके code कुछ इस तरह होगा:
$("p").hide()

STEP 4 - जब DOM पूरी तरह से ready हो जाए तभी jQuery को run करें जब हमारा HTML page पूरी तरह से load हो जाता है तब DOM यानि की Document Object Model create होता है जो की उस पेज के elements से मिलकर एक प्रकार का tree structure बनता है|

हम चाहते हैं की DOM यानि की page से सारे elements  जब तक पूरी तरह से load न हो जाए तब jQuery run न हो| इसके लिए हमें नीचे दिया गया code use करना होगा|
$(document).ready(function() {
       // All your jQuery codes here.
});

STEP 5 - jQuery selectors - कोई एक element select करें  आप CSS selectors के बारे में जानते ही होंगे ठीक उसी तरह jQuery में भी selectors होते हैं जिनके जरिये किसी भी HTML element को select कर उसमे effect apply किया जाता है|

हम यहाँ पर कुछ basic selectors के बारे में जानेंगे जो की अधिकतर उपयोग किये जाते हैं:

Element Selector:  किसी HTML element को select करना|
Select all paragraph elements.
$("p");
ID Selector:  CSS की तरह इसमें भी किसी id को selector बना सकते हैं|
ID के लिए हमें hash (#) use करना होता है जैसे हमें किसी ऐसे element को select करना है जिसकी id header है तो उसका code कुछ ऐसा होगा:
$("#header");
Class Selector: ठीक CSS की तरह इसमें भी class selector use किया जाता है|
इसके लिए  dot (.) use करना होता है| जैसे:
$("#myClass");

STEP 6 - jQuery Events - कब action perform होगा तय करें कोई action कब perform होगा यह हम event से बताते हैं| Commonly use होने वाले कुछ events  इस प्रकार हैं:
$(selector).click(function)  - Click event पर कोई function execute होगा|
$(selector).dblclick(function)  - Double click करने पर action perform होगा|
$(selector).focus(function)  -  जब selected element पर focus होगा तब function execute होगा|
$(selector).mouseover(function) - जब element पर mouseover किया जायेगा तब function trigger होगा|

STEP 7 - jQuery Effects का उपयोग करें  अब हम कुछ basic effects के बारे में जानेंगे जो की jQuery में use किये जाते हैं:
  • Hide
  • Show
  • Toggle
  • Slide
  • Fade
  • Animate
jQuery hide() and show()
किसी HTML element को hide और show करने के लिए hide() और show() method use किया जाता है|

Syntax:
$(selector).hide();
$(selector).show();
या
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

जहाँ दो parameters speed और callback optional हैं|
  • speed -  hide या show होने की speed set करने के लिए इस parameter का use होता है| इसकी value “slow”, “fast”, या milliseconds हो सकती है|
  • callback - इसकी value में  किसी function के name को specify किया जाता है जो की hide/show complete होने पर execute होगा|
Example:

jQuery Toggle
अगर हमें एक button से hide या show करना है तो toggle() का उपयोग कर सकते हैं|

Syntax:
$(selector).toggle();
या
$(selector).toggle(speed,callback);

Example:
jQuery Fading Effects jQuery में नीचे दिए गये कुछ fading methods use किये जाते हैं:
  • fadeIn() - Fade in effect create करने के लिए
  • fadeOut() - Fade out effect create करने के लिए
  • fadeToggle() - fadeIn and fadeOut के बीच toggle करने के लिए
  • fadeTo() - Selected element की fading के लिए opacity set कर सकते हैं जिसकी value 0 से 1 के बीच हो सकती है|
fadeIn() Syntax:
$(selector).fadeIn();
या
$(selector).fadeIn(speed,callback);
fadeOut() Syntax:
$(selector).fadeOut();
या
$(selector).fadeOut(speed,callback);
fadeToggle() Syntax:
$(selector).fadeToggle();
या
$(selector).fadeToggle(speed,callback);
fadeTo() Syntax:
$(selector).fadeTo();
या
$(selector).fadeTo(speed,callback);
Example:
jQuery Sliding Effects

jQuery में तीन प्रकार के sliding methods हैं:
  • slideDown()  - किसी element को slide down करने के लिए
  • slideUp() - किसी element को slide up करने के लिए
  • slideToggle()  - slideDown() और slideUp() को toggle करने के लिए

slideDown() Syntax:
$(selector).slideDown();
या
$(selector).slideDown(speed,callback);
slideUp()  Syntax:
$(selector).slideUp();
या
$(selector).slideUp(speed,callback);
slideToggle() Syntax:
$(selector).slideToggle();
या
$(selector).slideToggle(speed,callback);
Example:
jQuery Animation Effects

jQuery से हम animate() method का use करके animation create कर सकते हैं और simple stop() method से चलते हुए animation को stop कर सकते हैं|
  • animate()
  • stop()
animate() Method Syntax:
$(selector).animate({styles})
या
$(selector).animate({styles},speed,callback)
stop() Method Syntax:
$(selector).stop()
Example:

जरूर पढ़ें: CSS से Animation कैसे बनायें?

आज आपने इस article में step-by-step तरीके से हिंदी में jQuery के methods को समझा और coding करना सीखा| अगर आपको jQuery से जुड़े कोई सवाल पूछने हैं तो आप नीचे दिए गये comment box का जरूर उपयोग करें|

Friday, 29 September 2017

Top 35 HTML Interview Questions and Answers in Hindi

html-interview-questions-hindi

आज हम इस article में top 35 HTML interview questions और उनके answers के बारे में जानेगे जो की आपके लिए exams और interviews में उपयोगी साबित होंगे| हमने HTML के कुछ ऐसे important सवालों की list बनाई है जो की ज्यादातर interviews और exams में पूछे जाते हैं और इन questions और answers को हमने हिंदी में तैयार किया है ताकि आपको समझने में ज्यादा आसानी हो|

HTML Interview Questions in Hindi

1. HTML क्या है? Hyper Text Markup Language (HTML) एक प्रकार का language है जिसका उपयोग web page बनाने के लिए किया जाता है| यह World Wide Web (WWW) की एक standard language है जिसके जरिये web browser को यह बताया जाता है की हमारे web page के content को कैसे display किया जाए|

2. Tag क्या है? HTML page में  किसी content की formatting के लिए उसे tags के अंदर रखा जाता है| HTML tag दो symbols, less than (<) और greater than (>) का उपयोग करता है| इसके अलावा slash ( / ) symbol का उपयोग tag को close करने के लिए किया जाता है| इसका उदाहरण नीचे देख सकते हैं:
<strong>example</strong>

3. HTML element क्या है? HTML element एक प्रकार के structure को represent करता है जो की तीन चीजों से मिलकर बना होता है -

  1. start tag
  2. content
  3. end tag

आप नीचे paragraph element का एक उदाहरण देख सकते हैं:
<p>
This is the content of the paragraph element.
</p>
4. HTML attribute क्या है? HTML attribute किसी element की property को define करता है| इसे element के start tag के अंदर लिखा जाता है| एक attribute दो चीजों attribute name और value से मिलकर बना होता है| एक element में अलग-अलग प्रकार के कई attributes हो सकते हैं|
नीचे आप उदाहरण में <a> tag का example देख सकते हैं जहाँ href attribute का उपयोग किया गया है|
<a href="https://www.webinhindi.com">This is a link</a>
5. HTML file का extension क्या होता है? HTML file का extension .html या .htm हो सकता है|

6. क्या सभी tags के end tag होते हैं? ज्यादातर tags के end tag होते हैं लेकिन कुछ tags जैसे <br>,<hr>, <img>, <input>, <link>, <meta> आदि के closing tag नही होते|

7. Line break के लिए कौन सा tag use किया जाता है? <br> tag का उपयोग line break के लिए किया जाता है|

8. HTML में कितने प्रकार के headings होते हैं? HTML में <h1> से लेकर <h6> तक 6 प्रकार के heading tags होते हैं जिनमे से ज्यादातर <h1>, <h2>, <h3> और <h4> का use किया जाता है |

9. HTML में font का size कैसे बदला जाता है? इसके लिए <font> tag में size attribute का उपयोग कर font की size define की जाता है| Example के लिए आप नीचे देख सकते हैं:
<font size=”12”>Sample text</font>
10. HTML से web page का background color कैसे बदला जाता है? इसके लिए  <body> tag में एक attribute bgcolor का उपयोग किया जाता है|
उदाहरण:
<body bgcolor=”lightblue”>

11. Web page के background में image कैसे लगायें? <body> tag में background attribute use करके किसी image को पूरे वेब पेज का background बना सकते हैं|
<body background=”image.jpg”>
12. HTML में comment कैसे  लिखा जाता है? HTML comment  “<!--” से start होता है और “-->” से end होता है|
उदाहरण:
<!-- A sample comment -->
13. HTML form क्या है? की data को एक स्थान से दुसरे स्थान send करने के लिए एक interface की जरूरत पड़ती है जिसे HTML में form tag से design किया जाता है| <form> tag से data upload करने के लिए आपको किसी server side scripting जैसे php, asp.net आदि की जरूरत पडती है|
HTML में form बनाने के लिए एक छोटा सा example नीचे दिया गया है:
<form method=”post” action=”getinput.php”>
Name: <input type=”text” name=”user”>
Password: <input type=”password” name=”pass”>
<input type=”submit” value=”Login”>
</form>
14. Get और post method में क्या अंतर है? HTML form में दो तरह के methods use होते हैं, get और post इन दोनों में अंतर कुछ इस प्रकार है:
  • Get method से send किया गया data secure नही होता क्यों की यह URL का एक part होता है जो की browser history और server log में plain text के रूर्प में save हो जाता है|
  • Get method से हम limited data send कर सकते हैं क्योंकि यह URL का part होता है जिसकी length limited होती है|
  • Post method से भेजा गया  data URL में display नही होता जिससे सुरक्षित होता है और hack करना आसान नही होता|
15. Empty HTML elements क्या हैं? ऐसा element जिसमे कोई content न हो जैसे <br> element.

16. क्या सिर्फ <br> tag से ही text sections को separate किया जा सकता है? नही, <br> के अलावा <p> tag या<blockquote> tag का भी use कर सकते हैं|

17. DOCTYPE क्या है? DOCTYPE  browser को यह बताता है की open किये गये web page में किस प्रकार का HTML use किया जा रहा है इससे browser को पता चलता है की उस पेज को कैसे render किया जाय| सही DOCTYPE use करना जरूरी है नही तो आपका वेब पेज quirks mode में open हो सकता है|

18. Quirks mode क्या है? Quirks mode एक प्रकार का default compatibility mode होता है जो की अलग-अलग browser में अलग-अलग हो सकता है| इस mode में browser स्वयं तय करता है की पेज के content को किस standard के अनुसार render किया जाय|

19. Web standards कौन बनता है? Web में उपयोग होने वाले सारे technologies के standards को World Wide Web Consortium (W3C) define करता है|

20. HTML में copyright  symbol कैसे बनायें? Copyright symbol बनाने के लिए आपको &copy; या &#169; type करना होगा|

21. HTML में ordered list और unordered list क्या हैं? Ordered list - यह एक प्रकार का numbered list होता है इसे बनाने के लिए <ol> tag का use किया जाता है|
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Unordered list - इस प्रकार के list में numbers की जगह bullets होते हैं| इसे <ul> tag से बनाया जाता है|
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
22. क्या bullet के color को बदला जा सकता है? Bullet का color हमेशा list item के first character के color जैसा होता है| यदि bullet का color change करना है तो <font> tag से first character के color को बदलना होगा|

23. क्या hyperlink केवल text पर apply होता है? नही, आप इसे image पर भी use कर सकते हैं यानि image पर भी link crate कर सकते हैं|

24. Link पर click करने पर page नये tab या window में open हो इसके लिए क्या करना होगा? जब hyperlink बनाया जाता है तब हमारे पास यह option होता है की जब user उस link पर click करे तो link किया गया पेज कहाँ पर open होगा| नए tab में page को open कराने के लिए <a> tag में target attribute जोड़ना होगा जिसकी value “_blank” होगी|
उदाहरण:
<a target=”_blank” href=”https://webinhindi.com”>Click Here</a>
25. HTML से किसी दुसरे page पर redirect कैसे करें? <head> section के अंदर meta refresh का code लिख कर html page को automatically किसी दुसरे पेज पर redirect किया जा सकता है| इसका उदाहरण आप नीचे देख सकते हैं:
<meta http-equiv="Refresh" content="5; url=https://www.webinhindi.com">

इस code से page 5 seconds के बाद webinhindi.com पर redirect हो जाएगी|

26. Email link कैसे बनायें? Email link बनाने के लिए आप नीचे दिया गया कोड use कर सकते हैं:
<a href="mailto:email@domain.com">Email Me </a>
27. HTML page के error को कैसे check करें?
इसके लिए http://validator.w3.org/ पर जाकर अपने पेज का url enter करें या direct html code को copy करके paste करें और submit button press करें|

28. क्या HTML के source code को hide कर सकते हैं? ऐसा करना सम्भव नही है|

29. Table में cellspacing और cellpadding क्या है?
Cellsapcing: यह <table> tag का एक attribute है जो की define करता है की cells के बीच कितना space होगा|
Cellpadding: यह भी cellsapcing की तरह table का एक attribute है| यह cell और उसके अंदर के content के बीच के space को define करता है|

30. HTML table में colspan और rowspan क्या है?
Colspan: इस attribute से यह तय किया जाता है की किसी particular cell की size कितने columns के बराबर span करेगी|
उदाहरण:
<tr>

    <td colspan="2">Total</td>

</tr>
Rowspan: cell का फैलाव कितने row के बराबर होगी इसे rowspan attribute से define किया जाता है |
उदाहरण:
<tr>
    <td>Price</td>
    <td>100</td>
    <td rowspan="2">Total</td>
</tr>
31. पूरे पेज के texts और links के color को कैसे change करें? इसके लिए आपको नीचे दिए गये example की तरह <body> tag में कुछ attributes जोड़ने होंगे|
<body TEXT="#000000" LINK="#000000" VLINK="#000000" ALINK="#ffff00">

  • TEXT - इस attribute से पूरे पेज के texts के color को change कर सकते हैं| 
  • LINK - पेज में जितने भी links होंगे सभी के color को एकसाथ बदलने के लिए इसका उपयोग किया जाता है|
  • VLINK - ऐसे links जिन्हें पहले से visit किया जा चुका है visited links कहलाते हैं| इसके कलर को बदलने के लिए इस attribute का उपयोग किया जाता है|
  • ALINK - Active link के कलर को change करने के लिए इसका use किया जाता है|
32. <pre> tag का क्या उपयोग है? <pre> tag का मतलब होता है pre-formatted text, इस tag के अंदर हम जो भी text लिखते हैं वह fixed-width font में display होता है, यह sapce और line break दोनों को preserve करता है और text को as it is display करता है|
<pre>
Text in a pre element
preserves
both spaces and
line breaks
</pre>
33. <span> tag का क्या उपयोग है? sapn tag का उपयोग mainly text formatting के लिए किया जाता है जिसमे कुछ text पर CSS के जरिये style apply किये जाते हैं| <span> tag से नीचे दिए गये कुछ काम किये जाते हैं:
  • Text में color add करना 
  • Text के background में image डालना 
  • Text को highlight करना 
<p>
<span style="color:#000000;"> In this page we use span. </span>
</p>

ध्यान रहे अकेला span tag कुछ नही कर सकता, style apply करने के लिए CSS की जरूरत पड़ेगी
34. Marquee tag क्या है? <marquee>  tag का उपयोग scrolling text बनाने के लिए किया जाता है इस tag के अंदर का content move होता हुआ दिखाई देता है|

<marquee> Your text here... </marquee>
35. HTML button कैसे बनायें जो की link की तरह काम करे? इसके लिए नीचे दिया गया कोड use कर सकते हैं:
<FORM ACTION="[URL]" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button">
</FORM>


उम्मीद है यह HTML interview questions & answers की list आपके लिए फायदेमंद साबित होंगे| यदि आपको लगता है की इसमें कुछ और questions add किये जा सकते हैं तो आप comment के माध्यम से हमें बता सकते हैं|