How to Build a YouTube Style Website Using an HTML Editor—A Complete Guide – Specialgujarati news

लगभग 1.7 बिलियन अद्वितीय मासिक आगंतुकों के साथ, YouTube दुनिया की दूसरी सबसे अधिक देखी जाने वाली वेबसाइट है। इसमें 2.56 बिलियन उपयोगकर्ताओं तक पहुंचने की क्षमता है। इसके अलावा, YouTube विज्ञापनों ने अकेले 2021 में लगभग 28 बिलियन अमेरिकी डॉलर का राजस्व अर्जित किया है।

आश्चर्यजनक तथ्य, है ना?

यही कारण है कि YouTube-शैली की वेबसाइटें ट्रेंड कर रही हैं। दुनिया भर के लोग YouTube जैसी वेबसाइट बनाने में समय और पैसा लगाने की जल्दी में हैं।

आप सोच रहे होंगे कि क्या ऐसी वेबसाइट डिजाइन करने में बहुत समय और मेहनत लगेगी। तथ्य यह है कि ऐसा नहीं होता है। बाजार में बहुत सारे विकल्प उपलब्ध हैं जो आपको बिना ज्यादा पैसा खर्च किए या बिना किसी तकनीकी ज्ञान के YouTube-शैली की वेबसाइट बनाने की सुविधा देते हैं।

सबसे अच्छा विकल्प जानना चाहते हैं?

फ्रोआला डिजाइन ब्लॉक तथा फ्रोआला WYSIWYG HTML संपादक उत्तर हैं।

तो चलिए यह समझकर यात्रा शुरू करते हैं कि ये वास्तव में क्या हैं और YouTube जैसी वेबसाइट बनाने के लिए इनका उपयोग कैसे करें।

फ्रोआला डिजाइन ब्लॉक क्या हैं?

फ्रोआला डिज़ाइन ब्लॉक सुपर-उन्नत डिज़ाइन ब्लॉक हैं जिनका उपयोग वेबसाइट बनाने के लिए किया जाता है। वे कम्युनिकेशन गैप को खत्म करने के लिए डिजाइनरों और डेवलपर्स के बीच एक सेतु का काम करते हैं। फ्रोआला 170 से अधिक उत्तरदायी डिज़ाइन ब्लॉक प्रदान करता है जो अद्वितीय हैं और आपको अपनी वेबसाइट और ऐप्स को अपनी इच्छानुसार विकसित करने की स्वतंत्रता देते हैं।

सभी ब्लॉक बूटस्ट्रैप लाइब्रेरी पर आधारित हैं। आप अपनी आवश्यकता के अनुसार पूर्वावलोकन देखने और संबंधित कोड डाउनलोड करने में सक्षम होंगे।

फ्रोआला डिज़ाइन ब्लॉक्स के बारे में अच्छी बात यह है कि वे स्वतंत्र और ओपन-सोर्स प्रोजेक्ट हैं। इस परियोजना का उद्देश्य बेहतर वेब में योगदान करने के लिए सभी को सशक्त बनाना है।

विशेषताएं:

• फ्रोआला डिज़ाइन ब्लॉक्स ओपन-सोर्स इलस्ट्रेशन का उपयोग करते हैं जो अनड्रा द्वारा बनाए जाते हैं और इनमें वेक्टरियल इमेज होती हैं जिन्हें आसानी से मक्खी पर अनुकूलित किया जा सकता है।
• AngularJS, React JS और Vue JS के लिए सपोर्ट फ्रोआला डिज़ाइन ब्लॉक्स का हिस्सा है।

• फ्रोआला डिज़ाइन ब्लॉक द्वारा उपयोग की जाने वाली तस्वीरें Pexels के पेशेवर फ़ोटोग्राफ़रों द्वारा बनाई गई हैं।
• फ़ॉन्ट विस्मयकारी पुस्तकालय का उपयोग सामाजिक नेटवर्क चिह्नों को सम्मिलित करने के लिए किया जाता है।
• उपलब्ध कोड लेआउट को शुरुआती बिंदु के रूप में इस्तेमाल किया जा सकता है।
• डिफ़ॉल्ट रूप से, रोबोटो फ़ॉन्ट का उपयोग डिज़ाइन ब्लॉक टूल किट में किया जाता है। आप उन्हें अपनी पसंद के किसी अन्य फ़ॉन्ट में बदल सकते हैं।
• इसका उपयोग करना आसान है। एक बार जब आप फ्रोआला डिज़ाइन ब्लॉक्स की मूल HTML संरचना को स्थापित कर लेते हैं, तो आप उन डिज़ाइन ब्लॉकों को ब्राउज़ कर सकते हैं जिन्हें आप जोड़ना चाहते हैं। आपको बस HTML को कॉपी/पेस्ट करना है।

अब जब आप फ्रोआला डिज़ाइन ब्लॉक के बारे में जानते हैं, तो आप फ्रोला WYSIWYG HTML संपादक के बारे में उत्सुक होंगे।

है ना?

खैर, यहाँ यह है:

फ्रोआला WYSIWYG HTML संपादक क्या है?

फ्रोआला WYSIWYG HTML संपादक अगली पीढ़ी का जावास्क्रिप्ट वेब संपादक है जो बुद्धिमानी से उच्च प्रदर्शन प्रदान करता है। यह एक हल्का संपादक है जो आपकी वेबसाइटों और ऐप्स के लिए समृद्ध-पाठ-संपादन क्षमताओं को सक्षम बनाता है। डेवलपर्स द्वारा और डेवलपर्स के लिए बनाया गया, इसमें उपयोगकर्ता की ओर से कोई कोडिंग शामिल नहीं है। इसका मतलब है कि आप अपने कोडिंग कौशल को क्रियान्वित किए बिना इसका पूरा उपयोग कर सकते हैं।

आप सोच रहे होंगे कि फ्रोआला WYSIWYG HTML संपादक को ही क्यों चुनना है।

कहने की जरूरत नहीं है, फ्रोआला थोक में उन्नत सुविधाएँ प्रदान करता है। यही कारण है कि इसे G2 द्वारा शीर्ष WYSIWYG HTML संपादक के रूप में दर्जा दिया गया है। इसके अलावा, फ्रोआला का उपयोग सैमसंग, ऐप्पल, आईबीएम, अमेज़ॅन, ईबे, इंटेल, सेल्सफोर्स, सिस्को, रॉयटर्स और अन्य जैसे कई कॉर्पोरेट दिग्गजों द्वारा किया जाता है।

अब सवाल यह है कि क्या ये कॉरपोरेट दिग्गज बाजार में उपलब्ध किसी अन्य HTML संपादक के साथ जा सकते हैं?

शायद नहीं!

अब आप फ्रोआला को आजमाने के लिए उत्सुक हो सकते हैं।

अच्छा, आपको कौन रोकता है? चलिए यात्रा शुरू करते हैं।

YouTube-शैली की वेबसाइट बनाने के लिए फ्रोआला डिज़ाइन ब्लॉक का उपयोग कैसे करें

वेबसाइट बनाने के लिए फ्रोआला डिज़ाइन ब्लॉक्स का उपयोग करने के कई तरीके हैं। हम दो सबसे आम तरीकों पर चर्चा करने जा रहे हैं।

विधि 1: डिज़ाइन ब्लॉक बिल्डर टूल का उपयोग करना

डिज़ाइन ब्लॉक बिल्डर का उपयोग करना वेबसाइट बनाने का सबसे तेज़ और सबसे सरल तरीका है। आइए चरणों के माध्यम से चलते हैं।

चरण 1: फ्रोआला वेबसाइट पर जाएं और डिजाइन ब्लॉक बिल्डर टूल खोलें। एक बार खोलने के बाद, डिज़ाइन ब्लॉक जोड़ने के लिए क्लिक करें।

चरण दो: शीर्ष मेनू से आवश्यक डिज़ाइन अनुभाग का चयन करें और उस डिज़ाइन ब्लॉक पर क्लिक करें जिसे आप जोड़ना चाहते हैं।

ध्यान दें: आप दिए गए विकल्पों में से उस डिज़ाइन ब्लॉक को ड्रैग और ड्रॉप भी कर सकते हैं, जिसे आप जोड़ना चाहते हैं।

चरण 3: डिज़ाइन ब्लॉक जोड़ना तब तक जारी रखें जब तक कि आप वह सब नहीं जोड़ लेते जो आवश्यक है। आप ऊपरी बाएँ कोने में डिलीट आइकन पर क्लिक करके डिज़ाइन ब्लॉक को हटा सकते हैं। आप HTML लोड भी कर सकते हैं और नीचे के मेनू से दृश्य और लेआउट को अपनी इच्छानुसार बदल सकते हैं।

चरण 4: एक बार जब आप डिज़ाइन के साथ कर लें, तो पर क्लिक करें डाउनलोड नीचे दाईं ओर बटन.

यह आपके द्वारा बनाए गए संपूर्ण डिज़ाइन को डाउनलोड करेगा।

विधि 2: एक वैकल्पिक (कंकाल)

साइट के शुरुआती बिंदु के रूप में नीचे दिए गए HTML लेआउट का उपयोग करें।

<!DOCTYPE html>
<html>
  <head>
    <title>Froala Design Blocks - Skeleton</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.0/css/froala_blocks.min.css">
  </head>

  <body>

    <!-- Insert HTML for Design Blocks. -->

  </body>
</html>

एक बार जब आपके पास फ्रोआला डिज़ाइन ब्लॉक HTML संरचना हो जाती है, तो आप अपनी इच्छानुसार ब्लॉक ब्राउज़ करना और डिज़ाइन करना शुरू करने के लिए पूरी तरह तैयार हैं। आप उनके लिए HTML को आसानी से कॉपी/पेस्ट कर सकते हैं।

ब्लॉक ब्राउज़ करें

फ्रोआला डिज़ाइन ब्लॉक्स को ब्राउज़ करने के कई तरीके हैं।

1. नवीनतम रिलीज़ के लिए, संग्रह डाउनलोड करें। आपके द्वारा डाउनलोड किए गए संग्रह में आप आसानी से कोड ब्राउज़ कर सकते हैं।
2. GitHub रेपो पर जाएं और कोड की जांच करें।
3. HTML कोड देखने के लिए होमपेज पर मौजूद डिजाइन पर क्लिक करें।

एक बार जब आप डिज़ाइन अनुभाग के साथ काम कर लेते हैं, तो समृद्ध सामग्री जोड़ने के साथ आगे बढ़ने का समय आ गया है। तो चलिए वहीं से शुरू करते हैं।

अपनी वेबसाइट में समृद्ध सामग्री जोड़ने के लिए फ्रोआला WYSIWYG HTML संपादक का उपयोग कैसे करें

फ्रोआला वेबसाइटों के साथ जल्दी से एकीकृत हो जाता है। आप कुछ आसान चरणों का पालन करके इसे आसानी से अपनी साइट में जोड़ सकते हैं। एक बार सफलतापूर्वक जुड़ जाने के बाद, आप इसका उपयोग आसानी से अपनी इच्छित वेबसाइट सामग्री बनाने के लिए कर सकते हैं।

आएँ शुरू करें।

चरण 1: स्थापित करें

फ्रोआला WYSIWYG संपादक को स्थापित करने के कई तरीके हैं। यहाँ, NPM का उपयोग किया जाता है। यह सबसे अच्छे और आसान विकल्पों में से एक है।

NPM के लिए, निम्न कमांड टाइप करें।

npm install froala-editor

एक बार इंस्टॉलेशन प्रक्रिया सफलतापूर्वक पूरी हो जाने के बाद, इस कोड को अपनी HTML फ़ाइल में एम्बेड करें।

<link href="https://www.techgenyz.com/2022/03/05/how-to-build-a-youtube-style-website-using-an-html-editor/node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.techgenyz.com/2022/03/05/how-to-build-a-youtube-style-website-using-an-html-editor/node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>

ध्यान दें: आप एक विकल्प के रूप में सीडीएन का भी उपयोग कर सकते हैं।

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

चरण 2: बनाएं

आप फ्रोआला WYSIWYG संपादक को किसी भी DOM तत्व पर आरंभ कर सकते हैं, लेकिन इसका उपयोग करने की अनुशंसा की जाती है a डिव तत्व।

एक खाली

तत्व जोड़ें जो एक रिच-टेक्स्ट संपादक में बदलने जा रहा है।

चरण 3: आरंभीकरण

पहले बनाए गए खाली तत्व पर फ्रोआला WYSIWYG संपादक को प्रारंभ करें।

var editor = new FroalaEditor('#example')

चरण 4: सामग्री प्रदर्शित करें

रिच-टेक्स्ट एडिटर के बाहर संपादित एचटीएमएल के स्वरूप को संरक्षित करने के लिए नीचे दी गई सीएसएस फाइलों को शामिल करें।

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="https://www.techgenyz.com/2022/03/05/how-to-build-a-youtube-style-website-using-an-html-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />

संपादित सामग्री को तत्व के अंदर रखना न भूलें एफआर-दृश्य।

<div class="fr-view">
  Here comes the HTML edited with the Froala rich text editor.
</div>

एक साइट के साथ फ्रोआला WYSIWYG HTML संपादक के एकीकरण को दर्शाने वाला एक पूरा उदाहरण फ़ॉर्म है।

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>


</head>
<body>
<div id="example"></div>
<div class="fr-view">
  Here comes the HTML edited with the Froala rich text editor.
</div>
</body>
<script>
var editor = new FroalaEditor('#example')
</script>
</html>

यहाँ फ़ॉर्म पर अंतिम नज़र है।

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

इसका मतलब है कि आप बिना किसी परेशानी के YouTube-शैली की वेबसाइट बना सकते हैं।

अंतिम टेकअवे

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

भले ही YouTube-शैली की साइट बनाना एक कठिन काम की तरह लग सकता है, आप उपरोक्त चरणों का पालन करके फ्रोआला डिज़ाइन ब्लॉक और फ्रोआला WYSIWYG HTML संपादक की सहायता से आसानी से एक बना सकते हैं।

न्यूज़लेटर्स के लिए साइन अप करें

हमारे न्यूज़लेटर की सदस्यता लें और नवीनतम तकनीक, गेमिंग, स्टार्टअप, कैसे मार्गदर्शन करें, डील करें और बहुत कुछ पर अपडेट कभी न चूकें।

अपने विज्ञापनों के साथ हमारे दर्शकों तक पहुंचें

TechGenyz पर विज्ञापन परिणाम देता है। अपना ब्रांड बनाएं, वेबसाइट ट्रैफ़िक बढ़ाएं, योग्य लीड जेनरेट करें और हमारे दर्शकों के साथ कार्रवाई करें। अपने ब्रांड के लिए सही विज्ञापन समाधान चुनें।

अभी साथी

Today News is How to Build a YouTube Style Website Using an HTML Editor—A Complete Guide i Hop You Like Our Posts So Please Share This Post.