#Syntax of html tag in hindi | Explore Tumblr posts and blogs

ckoerner · 6 years ago

Text

Four open design methods we used to improve Wikipedia’s iOS app

Wikipedia is built and edited by the collaborative efforts of volunteers around the world. When it came time to improve the editing features on Wikipedia’s iOS app, we here on the Wikimedia Foundation’s iOS team wanted to ensure that our design process reflected that and the values of our organization, including our design principles.

To accomplish this, we utilized a variety of different open design techniques, including conversations with community members and usability testing, generative research, comparative analysis, and design reviews.

Here’s more about what we did and what we learned from our experiences. We hope that you will also be able to learn from what we did here and apply it to your own product design process.

• • •

Collaborating with the community

At the Wikimedia Hackathon in May 2018, we performed in-person testing of the old iOS editing interface with Wikimedia volunteer editors, the power users who do or could use the feature every day. This helped us understand which parts of the editing workflow they felt could be most improved and what features it would be helpful to introduce into the app. We also participated in an open brainstorming session with the Foundation’s mobile web team, where attendees discussed common use cases and pain points in mobile contribution.

What we learned:

We created a list of requested features and used these findings to gain a better understanding of common use cases for editing on mobile, specifically within the iOS app.

Some of the results were surprising to us. One preconception we held was that users would want or expect to see a MediaWiki-style visual editor within the app. (The visual editor, styled as “VisualEditor,” is a rich-text editing option on most Wikimedia sites.) However, this session showed us that this group of users, who were often fixing small typos or mistakes while on the run, actually desired syntax highlighting for the older “wikitext” editor (similar to an HTML editor).

Overall view of the contribution taxonomy.

Utilizing generative research

Last year, the Wikimedia Foundation’s Abbey Ripstra and James Forrester created a contribution workflow taxonomy. This work, built off the New Editors research project, resulted in an inventory of 88 workflows and 500 steps used for contributing to the English, Czech, Korean, French and Hindi Wikipedias. These were ranked by most commonly utilized workflows and sorted by potential ease of use on mobile.

What we learned:

From this taxonomy and conversations with the researchers, we were able to identify a set of suggested workflows to bring to the iOS app, including expanding an article, copy-editing or re-writing, adding media from Wikimedia Commons, and tagging a page.

The old editing interface on the Wikipedia iOS app. Text from "Red panda" on the English Wikipedia.

Audit of current features and a comparative analysis

There are five different wikitext and visual editors available on Wikimedia projects for desktop and mobile. We studied them to gain a better understanding of which formatting options and syntax input shortcuts were included in current editors and how these options were grouped, and we were able to compile a list of nearly 50 syntax tags from across all the editors.

We then looked outside Wikipedia for input and inspiration in code editors, markdown note taking apps, and document editors to explore how apps in similar feature spaces were making formatting and writing content on a mobile phone easier or more intuitive for their users. This sort of comparative or competitive analysis is helpful for quickly identifying potentially beneficial design patterns. It entailed looking through the workflows and interfaces of around a dozen apps, while noting down their strengths and weaknesses.

What we learned:

These reviews helped the iOS app team to come up with a list of core UI elements and suggested features that we needed to make sure were included in our work on the Wikipedia iOS editor. Specifically, the comparative analysis helped us to make the decision to utilize a toolbar for presenting formatting options, rather than designing a special keyboard for inputting common syntax elements.

The audit of the current editing interfaces laid the groundwork for the information architecture of the header, toolbar, and submenus, including what elements should be grouped together and what contextual menus should be included.

The new editing Interface on the Wikipedia iOS app. Text from "Brooklyn Bridge Park" on the English Wikipedia.

Design, review, implementation, and iteration

After compiling all the information gathered during research and analysis, our findings were shared across the Wikimedia Foundation’s design and iOS app teams and used to facilitate conversations and plan workboards.

Once an initial set of features was established, we began to build out user flows for the core set of features in Sketch. These early flows mapped out actions that users would take and the system’s response. The goal was to get a better understanding of what screens, error states and messaging would be needed in order to successfully guide users through feature flows.

After developing and reviewing flows for each of the core features, we worked on high-fidelity mocks in the vector graphics editor Sketch, which were then used as internal discussion tools or turned into click-through prototypes. On the iOS team, we tend to begin with high-fidelity mocks instead of wireframes, as many of our UI patterns are either standard iOS components or reused from elsewhere in the app for the sake of consistency and ease of implementation.

Throughout this process, work was reviewed both by the Wikimedia design team and the iOS app team during weekly reviews and sync meetings. Once the mocks and flows had successfully completed rounds of review, engineers on the iOS team began to implement the designs. Before releasing these new features publically, a beta version of the app was published for internal and external testing of features.

The beta version of the app was used for usability testing, both with new and existing users. Due to the number of new features that were to be included in the first editing release, we opted to perform two different types of unmoderated usability testing.

We ran a 15-minute test was published on UserTesting.com, in order to test with new users who had no previous experience editing Wikipedia. The goal of this test was to ensure that new users could find their way through the new editing interface and complete common, core tasks.

To test with experienced users, employees of the Wikimedia Foundation who were iOS users completed a similar set of tasks to the UserTesting.com participants, using their iOS devices and the screen recording feature built into iOS 11 and above. This test helped us to uncover bugs that the iOS team and quality assurance had not previously identified and also helped us to learn more about what additional features experienced users were interested in.

Once identified bugs and usability problems were resolved, the iOS team was able to release a new version of the app to the public and begin our continued work on expanding the editing features available within the app.

What’s next?

The iOS team will continue to focus on the needs of the contributors that make Wikipedia. In upcoming releases we’ll make it easier to insert images from Wikimedia Commons, get feedback on your contributions with streamlined user talk pages, and generally work to make the work flows for participating in Wikipedia on the go far more delightful.

As we work through additional user needs and stories, the open design methods highlighted here will be a core part of our work.

How you can help

The Wikimedia Foundation’s iOS team is always looking for ways to make the app better, and we warmly welcome input and feedback from our users. You can contact us via IRC or by emailing us. The public version of the app—with the new wikitext editor!—is available for download from the app store. If you’re interested in testing out the latest features, you can sign up to become a beta tester within the app.

Additionally, as an open source project, we’re always happy to see volunteer contributions. If you are an iOS developer, you can learn about how to get involved on the Wikimedia mobile engineering contribution page.

Carolyn Li-Madeo, User Experience Designer, Audiences Design Wikimedia Foundation

https://wikimediafoundation.org/2019/05/28/four-open-design-methods-we-used-to-improve-wikipedias-ios-app/ via News – Wikimedia Foundation

0 notes

bkcomputercafe · 7 years ago

Text

HTML Style Tag in Hindi

HTML Style Tag की पूरी जानकारी

Style का मतलब होता है, सजाना. यानि, एक HTML Document को Style करना. वैसे तो Style के लिए CSS का उपयोग किया जाता है. लेकिन, आप सिर्फ HTML की मदद से भी कुछ सीमा तक एक HTML Document को अपने हिसाब से Style कर सकते है.

HTML Document की Style में Font Change करना, Font Family Change करना, Background Change करना, Text Color Change करना आदि को शामिल किया जाता है.

HTML द्वारा Document को Style करने के लिए दो तरीके अपनाए जाते है:

HTML Style Tag द्वारा Style करना

Style Attribute द्वारा Style करना

1. Style Tag का परिचय – Introduction to Style Tag

HTML <style> Tag का इस्तेमाल किसी Element की Style Information को Define करने के लिए किया जाता है.

हम Style Element को HTML Document की Mini CSS भी कहते है. क्योंकि इस Element के द्वारा आप एक Webpage की Inline CSS Define कर सकते है.

1.1 Syntax of Style Tag

Style Element को HTML Document के Head Section में Define किया जाता है. और वहीं किसी Specific Element के लिए Style Rule Define किये जाते है.

इसे देंखे:

<!DOCTYPE html><html><head><title>Style Tag Example</title><style attributes…>

Style Rule Here…

</style></head><body>

</body></html>

इसे समझिए:

ऊपर दिए गए HTML Code से हमने Style Tag के Syntax को समझाया है. बाकि Elements (!DOCTYPE, html, head, body आदि) से तो आप अच्छी तरह परिचित है. इसमें हमने Head Element में Style Element और Define किया है.

Style Element को भी अन्य HTML Elements की तरह ही Define किया जाता है. पहले Opening Tag – <style> अगर इसमे कोई Attribute इस्तेमाल करना है, तो उसे भी यहीं Define कीजिए. फिर Content (यहाँ Style Rules) और इसके बाद Closing Tag – </style>.

1.2 Commonly Used Attributes with Style Tag

Style Tag के साथ आप Global Attributes और Event Attributes दोनों को Define कर सकते है. इनके अलावा कुछ अन्य Important Attributes भी है, जो Style Tag के साथ Define किए जाते है:

type: यह Attribute Media Type को Define करता है.

media: यह Attribute Media Resource को Define करता है. मतलब आप किस प्रकार की Media (All, Print, Screen, TV आदि) के लिए Style Information Define कर रहे है.

2. Style Attribute का परिचय – Introduction to Style Attribute

Style Element की तरह Style Attribute भी HTML में Style Information को Define करता है. Style Element को Document के Head Section में Define किया जाता है, और Style Attribute को किसी भी Element में Attribute की तरह इस्तेमाल किया जाता है. क्योंकि यह एक Standard Attribute भी है.

Style Element द्वारा आप एक बार में ही सभी Document Element की Style Information Define कर सकते है. लेकिन, Style Attribute द्वारा प्रत्येक Element में अलग-अलग Style Information Define करना पडता है. Style Attribute को इस प्रकार Define किया जाता है.

2.1 Syntax of Style Attribute

Tagname: यहाँ आप कोई भी Tag लिख सकते है. जिसके लिए आप Style Information लिखना चाहते है. लेकिन, वह Element Body Element के भीतर ही Define होना चाहिए.

Property: यह CSS Property होती है. मतलब, जो Style आप Element के लिए Use करना चाहते है. इसे आप “What” भी कह सकते है.

Value: यह CSS Value होती है. मतलब, आप Element के लिए कैसी Style लगाना चाहते है. इसे आप “How” भी कह सकते है.

Note: CSS Property और CSS Value Pre-defined होती है. मतलब इन्हे पहले से ही बना दिया गया है. आप इन्हे ही इस्तेमाल कर सकते है. आप खुद CSS Rule नही बना सकते है.

अब हम कुछ Style Rule HTML Documents के लिए Define कर रहे है. जिसमे Style Attribute का इस्तेमाल किया गया है. लेकिन, इसके बाद हम आपको सभी Style Rules को एक साथ Style Tag के द्वारा भी Define करना बताएंगे.

3. HTML Document का Background Change करने का तरीका

HTML Document का Background Color Change करने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlbackground.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Background Example</title></head><body style=”background-color:gray;”>

<p>This is Gray Background.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Gray Background.

उदाहरण को समझिए:

ऊपर दिए गए HTML Code में हमने HTML Document का Background बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें background-colorProperty का Use किया गया है. हमने यहाँ Background Color Gray Set किया है. आप यहाँ अपनी पसंद का कोई भी Color लिख सकते है.

4. HTML Document का Text Color Change करने का तरीका

HTML Document का Text Color Change करने के लिए Opening Body Tag में StyleAttribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmltextcolor.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Text Color Example</title></head><body style=”color:green;”>

<p>This is Green Color Text.</p>

<p style=”color:red;”>This is Red Color Text.</p>

<p>This is Green Color Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Green Color Text.

This is Red Color Text.

This is Green Color Text.

उदाहरण को समझिए:

ऊपर दिए गए HTML Code में हमने HTML Document का Text Color बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें color Property का Use किया गया है. हमने यहाँ Background Color Green Set किया है. आप यहाँ अपनी पसंद का कोई भी Color लिख सकते है.

5. HTML Document में Font Size Change करने का तरीका

HTML Document का Font Size Change करने के लिए Opening Body Tag में StyleAttribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlfontsize.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Font Size Example</title></head><body style=”font-size:25px;”>

<p>This is 25 Pixel Font Size Text.</p>

<p style=”font-size:15px;”>This is 15 Pixel Font Size Text.</p>

<p>This is 25 Pixel Font Size Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is 25 Pixel Font Size Text.

This is 15 Pixel Font Size Text.

This is 25 Pixel Font Size Text.

उदाहरण को समझिए:

ऊपर दिए गए HTML Code में हमने HTML Document का Font Size बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें font-size Property का Use किया गया है. हमने यहाँ Font Size 25px Set किया है. आप यहाँ अपनी पसंद का कोई भी Font Size लिख सकते है.

6. HTML Document में Font Family Change करने का तरीका

HTML Document का Font Family Change करने के लिए Opening Body Tag में StyleAttribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlfontfamily.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Font Family Example</title></head><body style=”font-family: Verdana;”>

<p>This is Verdana Font Text.</p>

<p style=”font-family: Arial;”>This is Arial Font Text.

<p>This is Verdana Font Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Verdana Font Text.

This is Arial Font Text.

This is Verdana Font Text.

उदाहरण को समझिए:

ऊपर दिए गए HTML Code में हमने HTML Document का Font Family बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें font-family Property का Use किया गया है. हमने यहाँ Font Family Verdana Set की है. आप यहाँ अपनी पसंद का कोई भी Font Use कर सकते है.

7. HTML Document में Text Alignment Change करने का तरीका

HTML Document का Text Alignment Change करने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया जाता है. आप नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmltextalign.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Text Alignment Example</title></head><body style=”text-align:left;”>

<p>This is Left Aligned Text.</p>

<p style=”text-align:center;”>This is Center Aligned Text.</p>

<p>This is Left Aligned Text.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is Left Aligned Text.

This is Center Aligned Text.

This is Left Aligned Text.

उदाहरण को समझिए:

ऊपर दिए गए HTML Code में हमने HTML Document का Text Alignment बदलने के लिए Opening Body Tag में Style Attribute का इस्तेमाल किया है. जिसमें text-align Property का Use किया गया है. हमने यहाँ Text Alignment Left Set किया है. आप यहाँ अपनी पसंद का कोई भी Alignment Set कर सकते है.

नोट: एक बात और ध्यान रखें. यदि आप पूरे डॉक्युमेंट में एक जैसी Style इस्तेमाल करना चाहते है, तो आप Style Attribute को Body Tag में Define कीजिए. और यदि आप पूरे डॉक्युमेंट में Style अलग-अलग चाहते है, तो आप उसी Particular Paragraph में Style Attribute को Define कीजिए. जिसके लिए आप Style Information लिखना चाहते है.

अब तक आपने सभी Style Rules को Style Attribute के द्वारा Define किया है. आइए, अब इन सभी Style Rules को Style Tag द्वारा Define करते है.

इसे Try कीजिए:

<!DOCTYPE html><html><head><title>HTML Style Example</title><style type=”text/css”>body {background: gray;}p {color: green;font-size: 25px;font-family: Verdana;text-align: center;}<style/></head><body>

<h1>This is Heading.</h1>

<p>This is a Paragraph.</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Browser में देखेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

This is 25px Green Center Aligned Text .

from Blogger http://bkcomputercafe.blogspot.com/2018/09/html-style-tag-in-hindi.html via IFTTT

#IFTTT #Blogger

0 notes

lewiskdavid90 · 8 years ago

Text

50% off #Complete Website & CMS in PHP & MySQL From Scratch! – $10

A Web Development Project (CMS) Using PHP, MySQLi with Admin Panel, Commenting System & Dynamic Website from Scratch.

All Levels, – 12.5 hours, 48 lectures

Average rating 4.2/5 (4.2 (78 ratings) Instead of using a simple lifetime average, Udemy calculates a course’s star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.)

Course requirements:

XAMPP (PHP,MySQL, Apache) Web Server Dreamweaver CS5 or Notepad++ A browser (Chrome or Mozilla)

Course description:

Learn to create a beautiful dynamic website with content management system (CMS) in PHP & MySQLi from absolutely scratch, this course covers both back-end and front-end web development.

Building a Website & CMS in PHP & MySQLi:

If you want to create a category based news website or any kind of blog website in PHP & MySQLi which can be dynamically updated from Admin Panel then this course is for you, it will show you step by step how to create such system using simple PHP functions.

Some of the Important Topics We’ll Cover in This Course:

Creating the Website Layout in CSS3 & HTML5 Creating the Admin Panel Inserting & Displaying the Posts & Categories Creating the Commenting System Uploading the Whole CMS to Online Server

Overview & Summary:

With over 12 hours of content and 50+ lectures, this course proudly teaches you creating a complete website and content management system in PHP & MySQL from scratch, the course is for absolute beginners who want to create a big project in PHP & MySQLi in order to take their web development skills to the next level. This course gives you step by step environment to create a dynamic website in PHP, after completing the course, you’ll be able to remember every code that was written during the course. And the source code is also attached to the last lecture of the course.

If you are looking for a course which can teach you a perfect website in simple PHP functions then don’t waste your time and money on the internet, just join the course and you’ll be amazed. Furthermore, this course will be updated with more features.

Full details Create a Dynamic Category Based Website & CMS From Scratch Using PHP & MySQLi Learn to Create an Admin Panel from Scratch in PHP & MySQL Build a Custom News Portal with Custom Commenting System in PHP & MySQL If you want to create a dynamic website using PHP & MySQL from scratch then you should buy this course. This course teaches everything from scratch about creating a dynamic website & CMS in PHP/MySQL

Reviews:

“Nice work. Keep going like this.” (Silviu)

“Excellent. No where the institues teach like this…and i finished number of pages for my new website.” (John Vmk)

“Not Very Good – Bad Coding. I am an experienced front-end developer, and I was looking for a practical course to develop my back-end skills with PHP. I have some PHP training & experience also. What I Did Not Like About This Course – Negatives: Very Bad Coding – Duplicating Div ID’s in the HTML markup. In the course, the instructor uses an example, where he copies and duplicates HTML DIV ID’s. This is really bad coding, and should not be done. There are various reasons for this like page validation, and JavaScript uses. This is just really basic stuff, and I would have expected some one teaching coding to have been aware of this. This can be seen in the source code of course project. Instructor does not show a basic understanding of the use of HTML Div ID’s and Classes. It’s very sloppy. Bad Code Syntax – Instructor does not properly syntax code. SQL Statements are not capitalised as they should be. It all appears badly practised. This is not what I would have expected from a professional educational course. Bad Programming – There are a couple of examples where the instructor creates some new code to define a new variable, I could not see the point of this when the variable is already being defined in the script. It was unnecessary. Poorly implemented. This can be viewed on the top of the – comment_form.php course source code. This file is an > include, into the > details.php, and the > variable > $post_id is already defined on the – details.php file. This bad coding is done a couple of times throughout the course. Security – On Form submissions, and also on the – Search Form. I appreciate the instructor can only cover so much. Security is really important, and should have at least been mentioned, but it’s not even mentioned, as if it’s just not important. There are some real security vulnerabilities in the course. That should not be ignored. Database Includes – Why keep running database includes – only need to define once in your script, say on the index file, but the repeated database includes are so unnecessary. Another Bad Example – When the instructor creates files / scripts to be included as > includes, throughout the course, it is only necessary to code the raw code required for the include. Why keep running a whole new HTML DOCTYPE with BODY TAGS etc with every > include. Its just shows a lack of any awareness. This can be seen in the > admin area, of course. Positives: It was good to see some PHP logic and some basic PHP programming. You can see how a dynamic application can come together, and see the database interaction. Most of the course towards the end was just replicating and copying the same process time and again. Summary – I do not think the course is particularly very good. It’s not very well planned or organized. I was prepared to look past the bad and outdated front-end design to focus on the back-end development with PHP. I was only interested in the PHP and MySQL development, and this was executed in a bad way. The course has lots of bad coding practices and implementations, and I do not think that people should be taught to code and develop like that.” (Mark Bush)

About Instructor:

Abdul Wali

Abdul has successfully ranked hundreds of keywords in Google without any backlinking strategy. He is in the SEO and online marketing industry since 2009. Apart from SEO and marketing, he loves web development. WordPress is the core platform which Abdul has been using for creating top notch websites over the years. Abdul has established several successful startups such as OnlineTuting (An elearning system), OnlineUstaad (The largest hub of Urdu courses), Wali Solutions (Provides A to Z web solutions). He is one of the top Udemy Instructors with 45,000+ students and 1900+ reviews. He engages with students on Udemy in real time and answers questions within minutes. If you have any question in mind then don’t hesitate to ask Abdul via private message.

Instructor Other Courses:

HTML5 & CSS3 in Urdu/Hindi Abdul Wali, SEO Marketer & Top Udemy Instructor (7) $10 $20 Android Game Development in Urdu/Hindi Codeigniter Framework in Urdu/Hindi …………………………………………………………… Abdul Wali coupons Development course coupon Udemy Development course coupon Web Development course coupon Udemy Web Development course coupon Complete Website & CMS in PHP & MySQL From Scratch! Complete Website & CMS in PHP & MySQL From Scratch! course coupon Complete Website & CMS in PHP & MySQL From Scratch! coupon coupons

The post 50% off #Complete Website & CMS in PHP & MySQL From Scratch! – $10 appeared first on Course Tag.

from Course Tag http://coursetag.com/udemy/coupon/50-off-complete-website-cms-in-php-mysql-from-scratch-10/ from Course Tag https://coursetagcom.tumblr.com/post/160831871263

0 notes

bkcomputercafe · 7 years ago

Text

HTML Meta Tags List in Hindi

Meta Tag का परिचय – Meta Tag Introduction

HTML Meta Tag द्वारा HTML Document की Meta Information को Define किया जाता हैं. Meta Information Data (Content) के बारे में Data (Information About Content). अगर आसान शब्दों में कहें तो Meta Data एक Webpage के बारे में जानकारी होती हैं. जिसे Search Engines के लिए लिखा जाता हैं.

Meta Data में Document Title, Keywords, Description, Author Information, Last Modified Date आदि को सम्मिलित किया जाता हैं. इसके अलावा भी आप सैंकडों प्रकार का Meta Data एक HTML Document के बारे में Describe कर सकते हैं. इस जानकारी का उपयोग Search Engines हमारे Content को Index और उसको ढूँढने के लिए करते हैं.

Meta Data पाठकों को दिखाई नही देता हैं. इसे केवल Search Engines और Web Browsersद्वारा ही Read किया जा सकता हैं.

Meta Tags का महत्व – Importance of Meta Tags

अभी हमने बताया कि Meta Information हमारे Content को पाठकों के सामने लाने में इस्तेमाल होती हैं. इसके अलावा भी Meta Tags के अन्य महत्वपूर्ण उपयोग हैं, जिनके बारे में नीचे बताया जा रहा हैं.

Meta Tag द्वारा Document Title, Content Description (Summary), Keywords, आदि को Define किया जाता हैं.

Viewport (Readers को दिखाई देने वाली स्क्रीन) Setting को Meta Tag द्वारा Define किया जाता हैं. /li>

Cookies, URLs Redirection आदि को भी Meta Tags द्वारा ही Define किया जाता हैं.

Meta Information हमारे वेबपेजों को Index कराने में सहायक हैं.

SEO – Search Engine Optimization के लिए भी Meta Data आवश्यक होता हैं.

General Syntax of Meta Tag

नीचे हमने Meta Tag का General Syntax दिया हैं.

Meta Tag एक Empty HTML Tag होता हैं. जिसका कोई साथी Tag यानि Closing Tag नहीं होता हैं. इसमें सिर्फ Opening Tag ही होता हैं. ऊपर जो Syntax दिया गया हैं, हमने अन्य HTML Tag की भांति ही Meta Tag को Define किया हैं. इसमें सारी Information Attributesद्वारा ही Define की जाती हैं.

अगर आप Meta Tags को HTML में इस्तेमाल कर रहे हैं तो आपको इसे Close करने की जरूरत नहीं हैं. और यदि आप XHTML में Meta Tag को Define ��र रहे हैं तो इसे Close करना जरूरी हैं.

Commonly Used Attributes of Meta Tag

Meta Element द्वारा Global Attributes और Event Attributes दोनों को Support किया जाता हैं. इनके अलावा कुछ Element Specific Attributes भी हैं, जिनको सिर्फ Meta Element में ही Define किया जाता हैं. जिनकी जानकारी नीचे दी जा रही हैं.

charset – इसका पूरा नाम Character Setting हैं. इस Attribute द्वारा HTML Document की Character Encoding को Define किया जाता हैं. अगर आप Encoding Define नहीं करते हैं तो Browser Default Encoding को इस्तेमाल करता हैं.

content – इस Attribute द्वारा name और http-equiv Attributes की Value Define की जाती हैं.

text – इस Attribute द्वारा Meta Data का नाम Define किया जाता हैं. इसकी संभावित Value application name, author, description, generator, keywords, viewport हो सकती हैं.

http-equiv – इस Attribute द्वारा Content Attribute द्वारा Define Value के लिए HTTP Header Define किया जाता हैं.

Defining Meta Tags

Meta Tags को हमेशा Webpage के Header में Define किया जाता हैं. Meta Tag का Syntax आप ऊपर जान ही गए हैं. अब हम यहाँ आपको कुछ सामान्य और उपयोगी Meta Tags को Define करने के बारे में जानकारी देंगे.

Define Keyword Meta Tag

Keyword Meta Tag के द्वारा HTML Document से कुछ मुख्य शब्दों को छांटकर यहाँ लिखा जाता हैं. जैसे यह Tutorial Meta Tags के बारे में हैं, तो आप Meta Tag, HTML, Meta Element आदि शब्द छांट सकते हैं. और इन्हे Meta Keywords के रूप में इस्तेमाल कर सकते हैं. Meta Tag को इस प्रकार Define किया जाता हैं.

<!DOCTYPE html><html><head><meta name=”keyword” content=”meta tag, meta data, meta element”>

</head><body>

</body></html>

Example को समझिए

Keyword Meta Data Define करने के लिए Meta Tag में name Attribute की Value keyword हैं, और content Attribute द्वारा Keywords को Define किया गया हैं. आप भी इसी तरह अपने HTML Document या फिर Blog Post के लिए Keywords Define कर सकते हैं.

Define Description Meta Tag

Description Meta Tag द्वारा HTML Document के बारे में लिखा जाता हैं. इसे आप Summary भी कह सकते हैं. हमे लगभग 150 शब्दों के भीतर अपने पूरे HTML Document को Describe करना पडता हैं. इस जानकारी को Search Engines अपने Search Engine Result Pages में पाठकों को दिखाते हैं. इसलिए इसे समझदारी से लिखना चाहिए.

<!DOCTYPE html><html><head><meta name=”description” content=”In this tutorial you can learn about HTML Meta Tags.”>

</head><body>

</body></html>

Example को समझिए

Description Meta Data Define करने के लिए Meta Tag में name Attribute की Value description हैं, और content Attribute द्वारा Description को Define किया गया हैं. आप भी इसी तरह अपने HTML Document या फिर Blog Post के लिए Description Define कर सकते हैं.

Define Viewport

वर्तमान समय Mobile Web का हैं. इसलिए Website/Blog को Mobile Friendly होना जरूरी हैं. जिसमें viewport Value की अहम भूमिका हैं. इससे आप अपनी साईट को प्रत्येक डिवाईस के लिए Responsive बना सकते हैं. जिसे आपके पाठक भी पसंद करेंगे. Viewport को इस प्रकार Define किया जाता हैं.

<!DOCTYPE html><html><head><meta name=”viewport” content=”width=device-width,intial-scale=1.0″>

</head><body>

</body></html>

Example को समझिए

Viewport Define करने के लिए Meta Tag में name Attribute की Value viewport हैं, और content Attribute द्वारा Viewport को Define किया गया हैं. जिसमें width को device-widthSet किया गया हैं. ताकि हमारी वेबसाईट जिस उपकरण में खुल रही हैं अपने आपको उसी की width के अनुसार Adjust हो जाए. और intial-scale को 1.9 लिखा गया हैं. इससे साईट Zoomable बन जाती हैं.

Define Character Encoding

HTML Document के Character Encoding को Define करने के लिए charset Attribute का इस्तेमाल किया जाता हैं. अगर आप Encoding Set नहीं करते हैं तो ब्राउजर आपके Content को Default Encoding में दिखाता हैं. इसलिए इसे Define करना सही कार्य हैं.

<!DOCTYPE html><html><head><meta charset=”UTF-8″>

</head><body>

</body></html>

Example को समझिए

Character Encoding Define करने के लिए Meta Tag में charset Attribute का इस्तेमाल किया जाता हैं और इसकी Value में Character Encoding को लिखा जाता हैं. वर्तमान में UTF-8 सबसे ज्याद प्रचलित Character Encoding हैं. और हमने भी इसी का इस्तेमाल किया हैं.

Define Page Redirection

Page Redirection द्वारा आप पाठक को Landing URL से किसी दूसरे URL पर Redirect कर सकते हैं. मतलब आप उसे एक वेबपते से दूसरे वेबपते पर बिना उसे बताये भेज सकते हैं. इस कार्य के लिए Redirection Meta Data का इस्तेमाल किया जाता हैं.

<!DOCTYPE html><html><head><meta http-equiv=”refresh” content=”5;url=http://www.bkcomputercafe.com/”>

</head><body>

</body></html>

Example को समझिए

Redirection Define करने के लिए Meta Tag में http-equiv Attribute का इस्तेमाल किया जाता हैं और इसकी Value को refresh Define किया जाता हैं. मतलब इस वेबपते को पुन: Load होना हैं. कैसे? इसको content Attribute द्वारा Define किया गया हैं. हमने यहाँ समय 5 सैकण्ड और URL में इसी साईट के होमपेज का पता लिखा है. जब आप इस पेज को अपने ब्राउजर में खोलेंगे तो आप अपने आप 5 सैकण्ड बाद BKComputerCafe.com पर Redirect हो जाऐंगे. आप इसी तरह एक URL को दुसरे-तीसरे या अन्य पर Redirect करा सकते हैं.

from Blogger http://bkcomputercafe.blogspot.com/2018/09/html-meta-tags-list-in-hindi.html via IFTTT

#IFTTT #Blogger

0 notes

bkcomputercafe · 7 years ago

Text

HTML Comment Element in Hindi

1. HTML Comment का परिचय – Introduction to HTML Comment .

Comment एक HTML Code होता है, जिसे ब्राउजर द्वारा पढा नही जाता है. और इस Code को वेबपेज में दिखाया नही जाता है. अर्थात जो Content HTML Comment Tag के अंदर लिखा जाता है. इसे केवल Browsers और Developers ही देख सकते है. End Users इस Content को नही देख सकता है.

HTML Document की कोडिंग में Comments को इस्तेमाल करना एक पेशेवर कौशल (Professional Skill) है. जो आपको एक Professional Web Developer की श्रेणी में लाती है. अधिकतर अनुभवी डवलपर HTML Comments का इस्तेमाल करते है. इसलिए हम भी आपको इसे उपयोग करने की सलाह देंगे.

HTML Document में Comment Tag द्वारा Comment को Define किया जाता है. वैसे, HTML 5 में Comment Tag को हटा दिया गया है. फिर भी कुछ ब्राउजर Comment Tag को अभी भी Support करते है. Internet Explorer इसका सबसे अच्छा उदाहरण है.

2. HTML Comment Syntax.

HTML Comment के लिए एक Special Tag काम में लिया जाता है. जिसका Syntax बाकि HTML Tags से अलग होता है. HTML Comment Syntax इस प्रकार का होता है:

ऊपर आप देख सकते है कि Comment Tag की बनावट बाकि HTML Tags की बनावट से किस प्रकार अलग होती है. एक Comment Tag के Syntax में तीन भाग होते है:

Opening: Comment की Opening में Less Than Symbol (<), Exclamation Mark (!) और दो Dash (—) होते है. इसे आप Opening Tag भी बोल सकते है.

Closing: Closing में दो Dash (—) और एक Greater Than Symbol (>) होता है. इसे आप Closing Tag भी बोल सकते है.

Comment Text: Opening और Closing के भीतर जो भी लिखा जाता है. उसे Comment Text कहते है. यह हिस्सा हमें वेबपेज में दिखाई नही देता है.

जब हम इन तीनों को एक साथ लिखते है तो Comment Tag का निर्माण होता है. जो कुछ इस प्रकार दिखाई देता है:

<!– Comment Text –>

अब आपने HTML Comment Tag के Syntax को तो समझ लिया लिया है. आइए अब HTML Document में Comment लिखने का तरीका जानते है.

3. HTML Document में Comment लिखना – Defining Comment .

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlcomment.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Comment Example</title>

</head><body><p> <!– Paragraph Starting. –>

This is BKComputerCafe. Tutorials related to Website.

</p> <!– Paragraph Ending. –></body>

</html>

जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड में एक Comment Define किया है.

This is BKComputerCafe. Tutorials related to Website.

Example को समझिए:

ऊपर दिए HTML Code में हमने Opening Paragraph Tag के बाद एक Comment Define किया है. जैसा आप जानते है कि जो भी HTML Code Body Tag के भीतर लिखे जाते है. वह हमें ब्राउजर में दिखाई देते है. इस प्रकार हमें Comment भी दिखाई देने चाहिए थे. लेकिन, ऐसा नही हुआ है. हमें सिर्फ कमेंट के बाद लिखा हुआ Text ही दिखाई दे रहा है.

इसका मतलब है कि हमारा Comment काम कर रहा है. और ब्राउजर ने उसे Ignore कर दिया है. और यहि होना चाहिए था. और हमें Closing Paragraph Tag के बाद भी लिखा गया कमेंट दिखाई नहि देगा.

4. Comment के विभिन्न प्रकार – Types of HTML Comment .

वैसे तो Comment के आधारिक तौर पर कोई प्रकार नहि बताये गये है. लेकिन, हमने Comment को समझने की सुविधा के लिए Comment के तीन प्रकार बताये है:

Single Line Comment

Multi Line Comment

Conditional Comment

1. Single Line Comment: जब HTML Document में सिर्फ एक Line पर कमेंट किया जाता है, उसे Single Line Comment कहते है. Single Line Comment को इस प्रकार Define किया जाता है.

<!– This is Single Line Comment. –>

2. Multi Line Comment: जब HTML Document में एक से ज्यादा Lines पर Comment किया जाता है, तो इसे Multi Line Comment कहते है. इसका उपयोग एक Paragraph या अधिक Paragraphs को Describe या एक साथ Users से छिपाने के लिए किया जाता है. Multi Line Comment को इस प्रकार Define किया जाता है.

<!– This is Multi Line Comment.This Comment Apply More Than One Line.You Can Apply This for Whole Paragraph or Document. –>

3. Conditional Comment: इस प्रकार के Comments को Internet Explorer Browser के लिये लिखा जाता है. अन्य ब्राउजर Conditional Comments को Ignore कर देते है. Conditional Comment द्वारा IE Browser के अलग-अलग Versions के लिये Conditional Instructions लिखे जाते है. Conditional Comment को इस प्रकार लिखा जाता है.

<!DOCTYPE html><html><head>

<–[if IE 7]

Special Instructions Goes Here…

<![endif]–>

</head><body></body></html>

अगर आप IE के अलग-अलग Versions के लिए भिन्न-भिन्न style Use करना चाहते है. तब आप Conditional Comment के द्वारा यह कार्य कर सकते है.

5. HTML Comment का महत्व – Importance of HTML Comment .

1. जब किसी जानकारी को Users से छिपाना होता है. तब उस Content विशेष को Comments के माध्यम से बिना Delete किये छिपाया जा सकता है.

2. किसी HTML Document के अलग-अलग भागों को Comment के द्वारा नामकरण किया जा सकत है. इससे HTML Code को समझने में आसानी रहती है.

3. जब आप HTML Code को किसी अन्य Developer के साथ Share करना चाहते है. तो Comment के माध्यम से उस Code विशेष के बारे में बताया जा सकता है कि आपको इस Code पर करना है. इस प्रकार उसे कोड ढूंढने में समय नही लगता है.

4. किसी ब्राउजर विशेष को Conditional Instructions देने के लिए भी HTML Comments महत्वपूर्ण है.

5. HTML Document बहुत बडे होते है. जिनमे बहुत अधिक कोड लिखा जाता है. जो एक दिन का काम नही है. इसलिए Coding करते वक्त बीच-बीच में Comments के माध्यम से Notes डाल दिये जाते है. ताकि काम को दुबारा से वही से शुरू किया जा सके.

from Blogger http://bkcomputercafe.blogspot.com/2018/09/html-comment-element-in-hindi.html via IFTTT

#IFTTT #Blogger

0 notes

bkcomputercafe · 7 years ago

Text

HTML Form Element in Hindi

HTML से Form कैसे बनाये?

Websites HTML Documents यानि Webpages का संकलन हैं. और एक HTML Document अनेक HTML Elements से मिलकर बना होता हैं. इसमे Headings, Paragraphs, Lists, Images आदि शामिल होते हैं.

HTML Form का परिचय

Users से जानकारी लेने के लिए HTML Forms का इस्तेमाल किया जाता हैं. इस जानकारी में फीडबैक, निजि जानकारी, संदेश, शिकायत या अन्य कुछ सुझाव आदि हो सकते हैं.

आपको Websites में HTML Forms कई रूपों में मिल जाऐंगे. आप इन्हे Sign Up Forms, Log in Forms, Payment Details Forms, Survey Forms आदि के रूप में देख सकते हैं. क्या आप जानते हैं कि Google का Search Box भी एक HTML Form ही हैं?

Forms में Users द्वारा जरूरी जानकारी को भरा जाता हैं. और इस जानकारी को Server पर भेज दिया जाता हैं. जहाँ से इसे Webmasters Access कर पाते हैं.

सभी Form Elements की जानकारी

HTML Forms को Form Element द्वारा Define किया जाता हैं. Form एक Container Tag की तरह काम करता हैं. जिसके अंदर अन्य Form Elements को Define करके Forms को बनाया जाता हैं. Form Element के अलावा भी कई अन्य Important Form Elements भी होते हैं. जिनके बारे में नीचे बताया जा रहा हैं.

input – Input Element HTML Form का दूसरा Required Element हैं. Input Element के द्वारा Form में विभिन्न प्रकार के Data Fields को Define किया जाता हैं. जिनका निर्धारण type Attribute करता हैं.

select – Select Element से Form में एक Drop-down List को Define किया जाता हैं. इससे अधिक जानकारी एक Field में ही समाहित हो जाती हैं.

textarea – वैसे तो Input Element द्वारा Text Field Define किए जा सकते हैं. लेकिन, Multiline Data Fields को textarea Element द्वारा ही Define किया जा सकता हैं. क्योंकि Input Element से सिर्फ Single-line Data Field ही बनाए जा सकते हैं.

Form Elements के प्रमुख Attributes

Form Tag के साथ आप Global Attributes और Event Attributes को Define कर सकते हैं. क्योंकि Form Tag Global और Event Attributes को Support करता हैं.

इन दोनों के अलावा कुछ Attributes को सिर्फ Form Tag में ही Define किया जा सकता हैं, जो Element-specific Attribute कहलाते हैं. जिनके बारे में नीचे बताया जा रहा हैं.

action – User द्वारा Form Submit करने के बाद जो कार्य आप Server से करवाना चाहते हैं से actionAttribute द्वारा Define किया जाता हैं.

Method – आप Form Data को जिस Method से Submit करवाना चाहते हैं उसे Method Attribute से Define किया जाता हैं. यदि आपका Data में संवेदनशील या निजि जानकारी शामिल हैं तो आपको PostMethod Define करनी चाहिए. नही तो आप Get Method को Use कर सकते हैं.

Target – आप Result Page को जिस Window में Open करना चाहते हैं, उसे target Attribute द्वारा Define किया जाता हैं.

एक HTML Form बनाना

अब तक आप जान चुके हैं कि HTML Form को Form Element द्वारा Define किया जाता हैं. और अब हम एक HTML Form बनाने का तरीका बताने जा रहे हैं.

HTML Form बनाने से पहले हम आपको Form Syntax की जानकारी दे रहे हैं. ताकि आप सही तरह से HTML Form बना सके.

HTML Form का Syntax

नीचे Form Syntax दिया जा रहा हैं.

<form>

Form Elements

</form>

Syntax को समझिए

ऊपर आपने देखा कि Form Syntax बिल��कुल आसान हैं. जिसमें सिर्फ Opening Form Tag और Closing Form Tag का इस्तेमाल किया गया हैं. इन दोनों Tags के बीच में अन्य Form Elements के द्वारा Data Fields को Define किया जाता हैं.

HTML Form Define करना

अब हम एक HTML Form बनाऐंगे. यह एक साधारण HTML Form हैं. जिसे सिर्फ आपको समझाने के लिए बनाया गया हैं. नीचे दिए गए HTML Code को किसी Text Editor जैसे Notepad में लिखिए या फिर इसे Copy करके Paste कर दिजिए और इसे form.html के नाम से Save कीजिए.

<!DOCTYPE html><html><head><title>HTML Form Example</title></head><body><form>First Name: <input type=”text” name=”firstname”>Last Name: <input type=”text” name=”lastname”><input type=”submit” value=”Submit”></form></body></html>

अब आप ऊपर दिए गए HTML Code को Save करके ब्राउजर में Open कीजिए तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.

First Name:Last Name:

Form में विभिन्न प्रकार के Data Fields बनाना

HTML Form द्वारा Users से कई प्रकार की जानकारी प्राप्त की जाती हैं. इस कार्य के लिए अलग-अलग प्रकार के Data के लिए भिन्न-भिन्न Data Fields की जरूरत होती हैं. ताकि Users से प्राप्त Data को छांटा जा सके. नीचे हम आपको एक फॉर्म में इस्तेमाल होने वाले Data Input Fields के नाम और उपयोग बता रहे हैं.

Text Input Controls

Text Input Controls सबसे ज्यादा उपयोग होने वाला Data Fields हैं. जब Users से Text के रूप में जानकारी प्राप्त करनी होती हैं तो इस प्रकार के Input Controls को Form में Define किया जाता हैं. Text Input Controls के तीन प्रकार होते हैं.

Single-line Text Input Control – जब Users से केवल एक Line का Data Input करवाने की जरूरत होती हैं, तब इस प्रकार के Data Fields को Define किया जाता हैं. इसके लिए <input> Tag में type Attribute की Value को text लिखा जाता हैं.

Password Text Input Control – यह भी एक प्रकार का Single-line Text Input Control ही हैं. इसमे जब Users Data को लिखता हैं तो इसमे Data किसी खास प्रकार के Characters में बदल जाता हैं. इसके लिए <input> Tag में type Attribute की Value को password लिखा जाता हैं.

Multi-line Text Input Control – जब Users से एक से ज्यादा Lines में Data Input करवाने की जरुरत होती हैं, तब Multi-line Text Input Controls को HTML Forms में Define किया जाता हैं. इसके लिए <textarea> Tag का इस्तेमाल किया जाता हैं. जिसमे हम Rows और Columns Define कर सकते हैं.

Text और Password Input Control Define करना

नीचे दिए गए HTML Code को नोटपेड या किसी अन्य Text Editor में लिखिए या इसे Copy करके Paste कीजिए और इसे input-form.html के नाम से Save कर दीजिए.

<!DOCTYPE html><html><head><title> Single-line Text Input Control Example</title></head><body><form>User ID: <input type=”text” name=”id”>Password: <input type=”password” name=”password”><input type=”submit” value=”Submit”></form></body></html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Single-line और Password Input Controls दोनों को एक साथ Define करना बताया हैं.

User ID:

Password:

Multi-line Text Input Control Define करना

नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html><html><head><title> Multi-line Text Input Control Example</title></head><body><form>Message:<textarea rows=”5″ cols=”30″ name=”message”>Write your message here…</textarea></form></body></html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा. इसमे हमने आपको Multi-line Text Input Control को Define करना बताया हैं. आप इसकी लंबाई और चौडाई को क्रमश: rows और cols Attribute द्वारा Define कर सकते हैं.

Message:

Form Check Box

जब Users को एक से ज्यादा विकल्प को चुनना पडता हैं तो इसके लिए Check Boxes का इस्तेमाल किया जाता हैं. इसे भी <input> Tag द्वारा ही Define किया जाता हैं. लेकिन, type Attribute की Value को checkbox लिख दिया जाता हैं.

HTML Form में Check Box Define करना

<!DOCTYPE html><html><head><title> Check Box Input Control Example</title></head><body><form>Choose Your Subjects:<input type=”checkbox” name=”hindi”> Hindi<input type=”checkbox” name=”english”> English<input type=”checkbox” name=”maths”> Maths<input type=”checkbox” name=”science”> Science<input type=”checkbox” name=”ss”> Social Sciences</form></body></html>

जब आप ऊपर दिए गए HTML File को ब्राउजर में खोलेंगे तो आपक सामने इस प्रकार का परिणाम आएगा.

Select Your Subjects:HindiEnglishMathsScienceSocial Sciences

Form में Radio Buttons बनाना

जब एक से ज्यादा विकल्पों में से सिर्फ एक ही विकल्प Users द्वारा Select करवाया जाए तो इसके लिए Radio Buttons को फॉर्म में Define किया जाता हैं. Radio Buttons को भी <input> Tag द्वारा ही Define किया जाता हैं. बस type Attribute में Value को radio लिख दिया जाता हैं.

HTML Form में Radio Button Define करना

<!DOCTYPE html><html><head><title> Radio Buttons Input Control Example</title></head><body><form>Select Your Official Language:<input type=”radio” value=”hindi” name=”subject”> Hindi<input type=”radio” value=”english” name=”subject”> English<input type=”radio” value=”tamil” name=”subject”> Tamil<input type=”radio” value=”urdu” name=”subject”> Urdu<input type=”radio” value=”bangla” name=”subject”> Bangla</form></body></html>

Select Your Official Language:HindiEnglishTamilUrduBangla

Form में Drop-down List/Select Box बनाना

आप फॉर्म में Drop-down List भी बना सकते हैं, इसे Select Box Control के नाम से भी जाना जाता हैं. इस प्रकार के Input Control को <select> Tag द्वारा Define किया जाता हैं, और <option> Tag द्वारा विकल्पों को Define किया जाता हैं.

Form में Drop-down List Define करना

<!DOCTYPE html><html><head><title> Drop-down List Input Control Example</title></head><body><form>Select Your State:<select name=”dropdown”><option value=”delhi”> Delhi&lt/option><option value=”rajasthan”< Rajasthan</option><option value=”haryana”> Urdu<option></select></form></body></html>

Select Your State:DelhiRajasthanHaryana

File Upload Controls

Users से किसी प्रकार की फाईल Upload करवाने के लिए File Upload Control भी एक फॉर्म में Define किया जाता हैं. आप फोटो, Text File या किसी अन्य प्रकार की फाईल फॉर्म द्वारा Upload करवा सकते हैं. इसके लिए <input> Tag का ही इस्तेमाल किया जाता हैं. लेकिन, type Attribute में Value को file लिख दिया जाता हैं.

HTML Form में File Upload Box Define करना

<!DOCTYPE html><html><head><title> File Upload Box Example</title></head><body><form>Upload Your Resume:<input type=”file” name=”resume”></form></body></html>

Upload Your Resume:

Submit and Reset Button बनाना

आप एक फॉर्म में विभिन्न प्रकार के HTML Buttons बना सकते हैं. इनमे प्रमुख रूप से Submit और Reset Button का ज्यादा इस्तेमाल किया जाता हैं. आप अन्य प्रकार के Clickable Buttons जैसे Image Button, Send Button आदि भी बना सकते हैं.

HTML Form में Clickable Buttons Define करना

आप Form में Clickable Button <input> Tag द्वारा Define कर सकते हैं. इसके लिए आपको type Attribute में Value को button Define करना हैं. आप नीचे दिए गए HTML Code को ऊपर बनाई गई HTML File में लिखिए या इसे Copy करके Paste कीजिए और इसे Save कर दीजिए. आप चाहे तो एक नई फाईल भी बना सकते हैं.

<!DOCTYPE html><html><head><title> Clickable Buttons Example</title></head><body><form><input type=”submit” name=”submit” value=”Submit”><input type=”reset” name=”reset” value=”Reset”><input type=”button” name=”send” value=”Send”><input type=”image” name=”imagebutton” src=”image url”></form></body></html>

Grouping Form Data

आप एक ही Form में Users से कई प्रकार की जानकारी पाप्त कर सकते हैं. जिसमें निजी जानकारी, शैक्षिक जानकारी, व्यावसायिक जानकारी आदि हो सकती हैं.

एक प्रकार की जानकारी को आप एक नाम विशेष से शीर्षक दे सकते हैं. इस कार्य को Grouping करना कहते हैं. जिसे Fieldset और Legend Element द्वारा Define किया जाता हैं.

इसे Try कीजिए

<!DOCTYPE html><html><head><title> Grouping form Data Example</title></head><body><form><fieldset><legend>Personal Information:</legend>First Name<input type=”text” name=”fname”>Last Name<input type=”text” name=”lname”></fieldset><fieldset><legend>Log in Details:</legend>User ID<input type=”text” name=”ID”>Password<input type=”password” name=”password””></fieldset></form></body></html>

जब आप ऊपर दिए गए HTMl Code को सेव करके ब्राउजर में खोलेग तो आपके सामने कुछ इस प्रकार का परिणाम आएगा.

Personal Information:

First NameLast Name

User IDPassword

from Blogger http://bkcomputercafe.blogspot.com/2018/09/html-form-element-in-hindi_5.html via IFTTT

#IFTTT #Blogger

0 notes

bkcomputercafe · 7 years ago

Text

HTML Link Tag in Hindi

HTML Link की पूरी जानकारी

HTML Links इंटरनेट का Super Highway है. यह कहना गलत नही है. क्योंकि Hyperlinks के माध्यम से ही हम WWW – World Wide Web पर उपलब्ध Information (जानकारी) को Search वे Access कर पाते है.

और इस Lesson में हम आपको HTML Links की ही पूरी जानकारी देने वाले है. आप जानेंगे कि HTML Link क्या है – What is HTML Link in Hindi? HTML Links कैसे बनाते है – How to Create HTML Link in Hindi? HTML Links का विभिन्न प्रकार, HTML Links का महत्व (Importance) आदि के बारे में आपको जानकारी मिलेगी.

1. HTML Links का परिचय – Introduction to HTML Links in Hindi.

HTML का पूरा नाम Hypertext Markup Language होता है. जिसमें Hypertext HTML Links को ही Define करता है.

Links एक साधारण शब्द ही होता है, मगर इसे Anchor Element द्वारा Hyperlink में बदल दिया जाता है.

जब, आप एक HTML Link पर Mouse Cursor को ले जाते है, तो Cursor एक हाथ में बदल जाता है. यही चीज एक साधारण शब्द और Link में पहचान कराती है.

आपको लगभग हर Webpage पर Links मिल जाएगी. जिन पर क्लिक करके आप एक पेज से दूसरे पेज पर चले जाते है.

आइए अब हम भी HTML Links बनाना सीखते है?

2. HTML Links कैसे बनाये – How to Create HTML Links?

HTML Link बनाने के लिए Anchor Element का इस्तेमाल किया जाता है. Opening <a> Tag द्वारा Link को Define किया जाता है. Anchor Tag से हम Link तभी बना सकते है; जब हमे HTML Link Syntax की जानकारी होगी. तो आइए पहले Link Syntax को जानते है?

2.1 HTML Link का Syntax – Introduction to HTML Link Syntax.

नीचे HTML Link Syntax को दिया जा रहा है:

Syntax को समझिए:

a: a Anchor Tag को Represent करता है. और Opening Anchor Tag से एक Link को Define किया जाता है. मतलब उसकी शुरूआत होती है.

href: इसका पूरा नाम Hypertext Reference होता है. href Anchor Tag का एक जरूरी Attribute है, जो Destination Address (वेबपेज पता) को Define करता है. Destination URLs Standard Format (मान्य तरीका) में ही Define होने चाहिए.

Link Text: वह शब्द या शब्दांश होता है, जो Users को दिखाई देता है. मतलब जिस पर क्लिक होती है. यहाँ आप अपनी पसंद से कुछ भी लिख सकते है.

</a> यह Closing Anchor Tag होता है. यह ब्राउजर को बताता है कि यह HTML Link यही समाप्त हो गई है.

आपने जाना कि एक HTML Link Syntax चार अलग-अलग भागों से मिलकर बना होता है. जिसमें प्रत्येक भाग का अपना अलग कार्य होता है. उम्मीद है कि आपने Link Syntax को अच्छी तरह समझ लिया है. चलिए अब Link बनाते है.

2.2 एक HTML Link बनाना – Creating an HTML Link.

HTML से आप दो प्रकार की Link बना सकते है:

Text Link

Multimedia Link

a. HTML से Text Link बनाने का तरीका

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmllink.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Link Example</title></head><body><p>

Below is an HTML Link. By Clicking on it You Can Visit BKComputerCafe.com.

</p>

<a href=”http://bkcomputercafe.blogspot.com/”>Visit BKComputerCafe.com</a>

</body>

</html>

जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड में एक Paragraph और एक HTML Link Define किया है.

Below is an HTML Link. By Clicking on it You Can Visit BKComputerCafe.com.

Visit BKComputerCafe.com

Example समझिए:

ऊपर दिए गए कोड के माध्यम से हमने एक Paragraph और एक HTML Link बनाई है. हमने यह Link, Link Syntax का उपयोग करते हुए ही बनाई है.

a: a से हमने Anchor Tag को Define किया है. जो Link की शुरुआत करता है. यह Opening Anchor Tag है.

href: इस Attribute में हमने एक Web Address; http://www.bkcomputercafe.com को लिखा है. जब आप Link Text पर क्लिक करेंगे तो आप इस वेबपते पर पहुँच जाऐंगे. आप यहाँ Standard Format (मान्य तरीका) में कोई भी Destination URLs Define कर सकते है.

Visit TutorialPandit.com: यह Link Text है. जो Users को दिखाई देता है. जिस पर क्लिक करके Hypertext Reference यानि Web Address पर पहुँचा जाता है. आप यहाँ अपने हिसाब से कुछ भी लिख सकते है. बस आप URL सही होना चाहिए.

</a>: यह Closing Anchor Tag है. जो ब्राउजर को बताता है कि यह Link यहाँ समाप्त हो रही है.

b. HTML से Multimedia Link बनाने का तरीका

HTML Students द्वारा ये सवाल अक्सर पूछे जाते है कि HTML से Image Link कैसे बनाये? Video Link कैसे बनाते है?

तो इन सवालों का जवाब है: Multimedia Link. Multimedia Link से आप Image, Video, Audio, Gifs आदि को Link में बदल सकते है.

इसे Try कीजिए:

<!DOCTYPE html><html><head><title>HTML Image Link Example</title></head><body><p>

Below is an Image. By Clicking on it You Can Visit BKComputerCafe.com.

</p>

</body>

</html>

जब आप ऊपर दिए गए कोड को Save करके अपने ब्राउजर में Open करेंगे तो आपके सामने कुछ इस प्रकार से खुलेगा:

Example समझिए:

HTML Image Link बनाना बहुत आसान है. हमने ऊपर एक Image Link बनाई है. हमने Link Text की जगह पर Image को Add किया है. और कुछ नही. हमने Image Add करने के लिए Image Tag का इस्तेमाल किया है. अगर आपको Webpage में Image Add करना नही आता है, तो आप इस Tutorial को पढिए.

आप इसी तरह किसी भी प्रकार की Multimedia File से HTML Link बना सकते है. बस आपको, Link Text की जगह पर Multimedia को Add करना है. बाकि Process Text Link के समान रहती है.

जब आप एक Image Link बनाते है, तो आपके सामने सिर्फ Image ही दिखाई देती है. लेकिन, जब आप इसके ऊपर Mouse Cursor को ले जाऐंगे तो Cursor एक हाथ में बदल जाता है. और यही एक Link की आसान पहचान है.

Text Link में हमें कोई शब्द/श्ब्दांश लिखना पडता है. और Multimedia Link में Text के स्थान पर कोई Multimedia File जैसे; Video, Image, Audio आदि को Add करना पडता है. एक Text Link और Multimedia Link में यही छोटा-सा अंतर होता है.

2.3 HTML Link का Color बदलने का तरीका – Colors in HTML Link.

आप HTML Link का Color भी अपने हिसाब से Set कर सकते है. By Default Link Color कुछ इस प्रकार से होता है:

Unvisited Link: जिस लिंक पर आपने अभी तक क्लिक नही किया है. Unvisited Link का Color Blueहोता है, और ये Underlined रहती है.

Visited Link: जिस लिंक पर आप क्लिक कर चुके है. Visited Link का Color Purple होता है, और भी Underlined रहती है.

Active Link: जिस लिंक को आपने अभी आपके सामने खोला हुआ है. Active Link का Color Redरहता है, और ये भी Underlined ��हती है.

जब आप HTML Link के लिए कोई Color नही Set करते है. तब भी ब्राउजर द्वारा ये Value दिखाई जाती है. अब आपने Links का Default Colors के बारे में जान लिया है. आइए अब अपनी पसंद का Link Color Set करते है.

इसे Try कीजिए:

<!DOCTYPE html><html><head><title>HTML Link Example</title></head><body link=”blue” alink=”green” vlink=”red”><p>

Below is an HTML Link. By Clicking on it You Can Visit BKComputerCafe.com.

</p>

<a href=”http://bkcomputercafe.blogspot.com/”>Visit BKComputerCafe.com</a>

</body>

</html>

जब आप ऊपर दिए गए कोड को Save करके ब्राउजर में खोलेंगे तो आपके सामने कुछ इस प्रकार का परिणाम दिखेगा:

Below is an HTML Link. By Clicking on it You Can Visit BKComputerCafe.com.

Visit BKcomputerCafe.com

Example को समझिए:

हमने ऊपर Link Color बदलने के लिए Body Tag में link, alink और vlink Attributes का इस्तेमाल किया है. और इनमे Color को Set किया है. यहाँ जो Color Set किया गया है. यह आपके पूरे डॉक्युमेंट पर असर करता है. और आपके वर्तमान पेज पर जितनी भी Link होगी. उन सभी का Color इसके अनुसार हो जाएगा.

यहाँ link का मतलब Unvisited Link है; alink का मतलब Active Link है; और vlink का मतलब Visited Link है. आपको जो भी Color अपनी Link के लिए Set करना है, उसका नाम लिखिए बस आपका काम हो गया.

3. Anchor Element के साथ Use होने वाले कुछ Importance Attributes की जानकारी.

Anchor Element के साथ दोनों Global Attributes और Event Attributes का Use किया जा सकता है.

इनके अलावा भी कुछ Special और Commonly Used Attributes है, जो Anchor Element के साथ इस्तेमाल किए जाते है. इनके बारे में नीचे बताया जा रहा है:

href: इस Attribute का इस्तेमाल Link का Destination Address Define करने के लिए किया जाता है. मतलब किसी पेज विशेष का URL Define किया जाता है.

target: यह Attribute ब्राउजर को बताता है कि Destination Address को कहाँ खोलना है. Target Attribute की निम्न Value हो सकती है:

_blank: यह Value URL को एक New Window/Tab में Open कराती है.

_self: इसके द्वारा URL उसी Window/Tab में Open होता है, जिस Window/Tab पर आपने उस URL पर क्लिक किया है.

_parent: इस Value के द्वारा URL Parent Frame में Open होता है.

_top: इसके द्वारा URL पूरी Window में Open होता है.

इस Value के द्वारा URL नाम विशेष Frame में Open होता है.

hreflang: इस Attribute से ब्राउजर को बताया जाता है कि Linked Document इस भाषा में लिखा गया है. भाषा को Standard Format में लिखा जाता है. जैसे; हिंदी का मान्य नाम hi है. और अंग्रेजी का मान्य नाम en है.

type: इस Attribute से Internal Media Type को बताया जाता है कि इस URL से इस प्रकार की फाईल जुडि हुई है.

download: इस Attribute से ब्राउजर को बताया जाता है कि इस URL से कोई Download होने वाला Content Linked है.

mailto: इस Attribute से Email Address को Define किया जाता है. जब आप इस प्रकार की लिंक पर क्लिक करते है, तो आप सीधे Mail Software पर पहुँच जाते है.

title: इस Attribute से Link को परिभाषित किया जाता है. जब आप किसी Link पर माउस को ले जाते है तो यह Title दिखाई देता है.

4. HTML Links का प्रकार – Type of HTML Links?

HTML Links के विभिन्न प्रकार है. हम आपको नीचे इनकी जानकारी दे रहे है:

Internal Link

External Link

Download Link

E-mail Link

1. Internal Link

Internal Link एक वेबसाईट का दूसरा URL होती है. अर्थात किसी वेबसाईट के एक Document में समान साईट के अन्य Documents की Links को Internal Links कहते है. जैसे; इस Lesson में हमने कई अन्य Lessons की Links को दिया हुआ है. ये सभी Links आपको इसी साईट के अन्य Lessons पर ले जाती है. इन्हे Internal Links कहते है.

2. External Link

External Link एक वेबसाईट पर किसी दूसरी वेबसाईट का URL होती है. अर्थात किसी वेबसाईट पर दूसरी वेबसाईट का URL या Specific Page URL को External Link कहते है. आपको इस साईट पर भी कई External Links भी मिल जाएगी. External Link आपको किसी दूसरी वेबसाईट पर ले जाती है. और आप वर्तमान वेबसाईट से बाहर हो जाते है.

3. Download Link

आप HTML से Download Link भी बना सकते है. Download Links का उपयोग विभिन्न प्रकार की फाईलों को Downloadable बनाने के लिए किया जाता है. आप Word, PDF, Videos, Pictures, Audios आदि प्रकार की फाईलों को अपने Users को Download करा सकते है. Files को Downloadable बनाने के लिए File का Full Path लिखना पडता है. आप एक Download Link इस प्रकार बना सकते है:

<!DOCTYPE html><html><head><title>HTML Download Link Example</title></head><body>

<a href=”http://bkcomputercafe.blogspot.com/bkcc-logo.png/” download=”BKComputerCafe Logo”>Download Logo Image</a>

</body>

</html>

जब आप ऊपर दिए गए कोड को Save करके ब्राउजर में Open करेंगे तो आपके सामने इस प्रकार का परिणाम आएगा:

Download Logo Image

Download Link भी साधारण Link की तरह ही होती है. बस इसमे आपको download Attribute को और जोडना पडता है. अगर आप इस Attribute को Link में नही जोडेंगे तो फाईल सीधे ब्राउजर में खुल जाएगी. और अगर आप download Attribute को जोडते है तो फाईल Users के System में डाउनलोड होती है. और जो Value आप download Attribute में लिखते है. वही फाईल का नाम हो जाता है. इसलिए डाउनलोड लिंक में download Attribute को जरूर शामिल करना चाहिए.

4. E-mail Link

HTML से आप ईमेल लिंक भी बना सकते है. E-mail Link के द्वारा आप Users को सीधे E-mail Programs तक ले जा सकते है. एक ईमेल लिंक इस प्रकार बनाई जाती है:

<!DOCTYPE html><html><head><title>HTML E-mail Link Example</title></head><body>

</body>

</html>

ऊपर लिखा गया कोड आपको इस प्रकार का परिणाम देगा:

Mail Us

E-mail Link बनाने के लिए href Attribute में URL में E-mail Address लिखना पडता है. बाकि Process HTML Text Link के समान ही रहती है. जब Users किसी ईमेल लिंक पर क्लिक करते है, तो यह Users को उनके Default E-mail Program पर पहुँचा देती है.

5. HTML Links का महत्व – Importance of HTML Links?

बिना Links के Internet अधूरा है. Links ही इंटरनेट का महत्व सिद्ध करती है. नीचे HTML Links के कुछ उपयोगों की जानकारी दी जा रही है. जिनसे आप खुद HTML Links की Importance का अदांजा लगा सकते है:

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

Users को आसान Navigation भी Links के द्वारा ही उपलब्ध कराया जाता है.

External Links, जिन्हे SEO – Search Engine Optimization की दुनिया में Backlinks भी कहते है. ये SEO का अहम हिस्सा होती है.

6. Base Tag का परिचय – Introduction to Base Tag .

जब आप किसी वेबसाईट के एक पेज में संबधित पेज के Links बनाते है, तो आपको सभी Links का Full Path लिखना पडता है. लेकिन, <base> Tag के द्वारा इस कार्य से छुटकारा पा सकते है.

<base> Tag को Document के Header में Set किया जाता है. और बाकि Relative Links को Document के Body Section में लिखा जाता है. Base Path इस प्रकार Set किया जाता है:

<!DOCTYPE html><html><head><title>HTML Base Path Example</title><base href=”http://bkcomputercafe.blogspot.com/”>

</head><body>

<a href=”/about-us.html”>Know About Us</a>

</body>

</html>

हमने ऊपर कोड में एक Base Path – http://bkcomputercafe.blogspot.com/ Set किया है. और Body Section में एक Link – /about-us.html बनाई है, जो आपको BKComputercafe के About Us Page पर ले जाती है.

नीचे वाली लिंक में हमने पूरा URL नही लिखा है. लेकिन, Base Path के कारण ब्राउजर इस URL को http://bkcomputercafe.blogspot.com/p/about-us.html के समान ही मानता है. आप इस प्रकार कितने भी URLs लिख सकते है. ऊपर दिया कोड इस प्रकार का परिणाम देगा:

Know About Us

from Blogger http://bkcomputercafe.blogspot.com/2018/09/html-link-tag-in-hindi.html via IFTTT

#IFTTT #Blogger

0 notes

bkcomputercafe · 7 years ago

Text

HTML Image Element in Hindi

1. HTML Image का परिचय – Introduction to HTML Image

Image हमारे वेबपेज को ज्यादा आकर्षक और सुंदर बनाती है. पाठक (Readers) भी बिना फोटो के साथ बनाए गए वेबपेज की तुलना में फोटो के साथ बनाए गए ब्लॉग पोस्ट को ज्यादा पंसद करते है.

इसलिए HTML में Image Element को जोडा गया है. Image Element का उपयोग HTML Document में Picture Insert करने के लिए किया जाता है. <img> Tag द्वारा Image को Define किया जाता है. <img> Tag एक Empty HTML Tag होता है. जिसका कोई साथी Tag यानि Closing Tag नही होता है.

एक HTML Document में विभिन्न Format में Images को Insert किया जा सकता है. आप PNG, JPEG, GIFs, आदि Format में फोटो को जोड सकते है. हम जिस भी Format में Image को Use करना चाहते है, उस Format को हमे बताना पडता है.

2. HTML Image का Syntax

HTML Document में Image Insert करने का Syntax नीचे दिया जा रहा है.

Image Syntax में दो चीजे महत्वपूर्ण होती है. पहला, खुद <img> Tag और दूसरी srcAttribute. <img> Tag से तो आप परिचित ही है. यह तो अन्य Opening HTML Tags की तरह ही कार्य करता है.

लेकिन, इस टैग में src Attribute बहुत ही उपयोग और महत्वपूर्ण होता है. इस Attribute का काम Document में Image Path को Define करना होता है. आप जिस Image को अपने वेबपेज में जोडना चाहते है. उस Picture का Full URL Double Quotation Mark (“”) के भीतर लिखना पडता है. ताकि, Image विशेष हमारे Document में Download हो सके.

ध्यान दें: File Name Case Sensitive होता है. इसलिए Image का नाम जैसे लिखा हुआ है. वैसा ही आप src Attribute में लिखे. क्योंकि ब्राउजर के लिए picture.png और Picture.pngदो अलग-अलग फाईल है.

इसके अलावा भी <img> Tag में कुछ और Attributes का इस्तेमाल किया जाता है. जो Image की अन्य विशेषताओं को Define करते है. जिनके बारे में नीचे बताया जा रहा है.

3. Image Element के साथ Commonly Use होने वाले Attributes के नाम और उपयोग

src – इस Attribute का उपयोग Image के Source यानि URL को Define करने के लिए किया जाता है.

alt – इस Attribute से Image के बारे में बताने के लिए किया जाता है.

style – Style Attribute से Image पर CSS Rules को Apply किया जाता है.

width & height – ये दोनो Attributes अलग-अलग उपयोग किए जाते है. इनके द्वारा Image Width और Height को Define किया जाता है.

align – इसके द्वारा Image Alignment को Define किया जाता है.

border – Image Border को Border Attribute से Define किया जाता है.

title – Image को Title देने के लिए इस Attribute का उपयोग किया जाता है.

वेबपेज में फोटो जोडने का तरीका –

नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlimage.html नाम से Save कीजिए. और इसे Open कीजिए.

<!DOCTYPE html><html><head><title>HTML Image Example</title><body><img src=”bkcc-logo.png”></body></html>

जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड के माध्यम से एक Image को वेबपेज में जोडा है. यह Image TutorialPandit का Official Logo है.

Image के लिए Alternative Text लिखना

Image के लिए Alternative Text लिखने के लिए alt Attribute का उपयोग किया जाता है. इसे Image Define करते समय src Attribute की तरह हमेशा Use करना चाहिए. क्योंकि जब किसी कारणवश Image Display नही होती है. तब यह Alternative Text ही User को दिखाई देता है. इसके अलावा Screen Readers, Search Engines आदि के लिए भी Alternative Text लिखना जरूरी है. क्योकि यह Image को देख नही सकते है. यह तो सिर्फ पढ सकते है.

इसे Try कीजिए

जब आप Image के लिए Alternative Text Define कर देते है तो यह Text User को दिखाई नही देता है. इसे सिर्फ Screen Readers और Search Engines Robots पढ सकते है. लेकिन, जब Image Display नही होती है, तो User को यह Text ही दिखाई देता है. एक Image के लिए Alternative Text इस प्रकार लिखा जाता है.

जब आप लिखे गए कोड से कोई Image Insert करेंगे और वह Image Show नही हो रही है. तो इसकी जगह पर हमे alt Attribute में लिखा गया Text दिखाए देगा.

Image की Width और Height Set करना

Image की Width और Height को Set करना एक सही काम है. आप Image Width और Height को CSS या फिर Style Attribute के द्वारा भी Set कर सकते है. लेकिन, हम यहाँ आपको width और height Attribute का उपयोग कर रहे है.

इसे Try कीजिए

हम Image की Width और Height Set करने के लिए ऊपर उपयोग की गए फोटो को ही ले रहे है. जिसकी Width 100px और Height 50 px Set की गई है. अब यह फोटो हमे इस Size में ही दिखाई देगी.

ऊपर दिये कोड से आपको Image इस प्रकार दिखाई देगी.

ध्यान दें: हमने यहाँ Image Width और Height को Pixels में Define किया है. आप चाहे तो Percentage (%), Points (pt), इसके अलावा भी कई अन्य Units में Set कर सकते है.

Image Alignment को Set करना

Image Alignment को align Attribute द्वारा Define किया जाता है. By Default Image हमें बांई तरफ दिखाई देती है. लेकिन, align Attribute से आप एक Image को Right और Center में भी Show करा सकते है.

इसे Try कीजिए

ऊपर दिए कोड में हमने Image को Center Align किया है. आपको अब यह Picture Webpage के बिचोबीच दिखाई देगी.

जिस प्रकार आपने यहाँ center Align Set किया है. ठीक इसी प्रकार आप right Align Set कर सकते है.

Image Border को Set करना

Image Border को Set करने के लिए border Attribute का इस्तेमाल किया जाता है. आप एक Image के लिए इस प्रकार Border Set कर सकते है.

इसे Try कीजिए

जब आप ऊपर लिखा गया कोड आपको इस प्रकार का परिणाम देगा.

from Blogger http://bkcomputercafe.blogspot.com/2018/09/html-image-element-in-hindi.html via IFTTT

#IFTTT #Blogger

0 notes

bkcomputercafe · 7 years ago

Text

Learn HTML Attributes in Hindi

HTML Attributes क्या हैं? HTML Attributes की पूरी जानकारी.

HTML Tags से आप एक Simple HTML Document Create कर सकते है. इस Simple HTML Document का White Background और Text का Color Black होता है. यह एक Black and White HTML Page होता है.

अब खुद सोचिये कि क्या आप एक Black and White Page को Read करेंगे. क्या आपके Readers एक Webpage के साथ Engage हो पायेंगे?

नही!

कोई बात नही जहाँ समस्या होती है वहाँ समाधान भी होता है. और HTML में इस समस्या का हल है – HTML Attributes.

अब आपके मन में भी यही सवाल आ रहा होगा कि एक HTML Attribute क्या होता है?What is an HTML Attribute? HTML Attributes कितने प्रकार के होते है? Types of HTML Attributes?

इस Lesson में हम आपको HTML Attributes की पूरी जानकारी देंगे. इसके साथ ही आप HTML Attribute का Syntax भी लिखना सीखेंगे और HTML Attributes का उपयोग करने का Practical Knowledge भी आप सीखेंगे.

HTML Attributes का परिचय

कुछ HTML Tags का इस्तेमाल करत समय उनके बारे में अतिरिक्त सूचना (Addition Information) भी लिखनी पडती है. जैसे; HTML Document में Image Insert करने के लिए Image Tag का उपयोग किया जाता है. Image Tag अकेला किसी Picture को Webpage में Insert नही कर सकता है. इसके लिये Image Address या Source के बारे में Tag को बताना पडता है. इस अतिरिक्त सूचना को ही Attribute कहते है.

HTML Attributes HTML Tags के बारे में अतिरिक्त सूचना (Additional Information) Provide कराते है. HTML Attributes का उपयोग HTML Tags की विशेषताओं (Characteries) को Define करने के लिये किया जाता है.

सभी HTML Tags अपनी Default Value में Show होते है. इस Default Value को Change करने के लिये ही Attributes का इस्तेमाल किया जाता है. आप अपनी जरूरत के अनुसार किसी विशेष HTML Elements की Value को विशेष Value से बदल सकते है. आप Elements की Default Value को Attributes से Control कर सकते है.

जैसे आप अपने HTML Document में Text Color को Black Color (Default Value) को Replace कर Red Color में दिखाना चाहते है; तो आप Paragraph Tag में Style Attribute द्वारा Change कर सकते है.

HTML Attributes के प्रकार

HTML Attributes को पढने की सुविधा के लिए चार श्रेणियों में विभाजित किया गया है. Attributes की इन चार श्रेणियों के बारे में नीचे बताया जा रहा है.

Required Attributes

Optional Attributes

Standart Attributes

Event Attributes

1. Required and Optional Attributes

Required और Optional Attributes लगभग एक जैसे ही होते है. इनका इस्तेमाल किसी विशेष HTML Element या कहें कि HTML Tag को Modify करने के लिये किया जाता है. आप चित्र वाले उदाहरण से इन्हें समझ सकते है. जिसमें src Attribute एक Required Attribute है और alt एक Optional Attribute है.

2. Standard Attribute

Standard Attributes अधिकतर HTML Elements पर Apply होते है. इन्हें Global Attributes भी कहते है. आप Standard Attribute को Required एवं Optional Attributes के साथ-साथ ही इस्तेमाल कर सकते है.

3. Event Attributes

Event Attributes का उपयोग किसी खास परिस्थिति में किसी विशेष कार्य को Run कराने के लिये किया जाता है.

HTML Attribute का Syntax – Syntax of an HTML Attribute

एक HTML Attribute के दो भाग होते है. पहला Attribute Name और दूसरा Attribute Value. इनके बारे में आप Attribute के General Syntax को देखकर अधिक जान पायेंगे. नीचे चित्र देंखे.

1. Attribute Name

Attribute Name एक HTML Tag की Property होती है, जो आप इस Tag के लिये Set करना चाहते है. अर्थात Name Property एक HTML Tag में वो Change है जो आप किसी Tag में करना चाहते है. Name उस विशेषता का नाम होता है, जो विशेषता आप एक HTML Tag पर Apply करना चाहते है.

Name Property HTML Tag पर निर्भर रहती है. क्योंकि कुछ Attribute कुछ विशेष Tags पर ही Apply होते है. जैसे, src Attribute सिर्फ Image Tag पर ही Apply होता है.

Name Property को Paragraph Tag के द्वारा समझते है. <p> Element का एक Attribute होता है – Align, जिसका इस्तेमाल HTML Document में Paragraph के Alignment (दिशा) को Set करने के लिये किया जाता है.

2. Attribute Value

Attribute Value उस Name Property की Value होती है, जो आप इस Name Property के लिये Set करना चाहते है. जैसे; <p> Element के Align Attribute की तीन सभांवित Values होती है: Left, Center, और Right.

Attributes का कार्यक्षेत्र – Scope of Attributes

Attributes का कार्यक्षेत्र Tags के अनुसार तय होता है. आप जिस Tag पर Attribute इस्तेमाल करते है, उसका Effect उसी Tag तक सीमित रहता है.

इसे और अधिक समझने के लिये आपको Parent-Child Tag Concept को समझना जरूरी है. आइये इसे एक उदाहरण द्वारा समझते है.

HTML के Body Element में एक Webpage के Visible Part को लिखा जाता है. Body Element के अंदर ही अन्य जरूरी HTML Tags का उपयोग किया जाता है.

जब आप Body Tag पर किसी Attribute को Apply करते है, तो इसका Effect पूरे Document पर पडता है. जैसे; हमने Body Tag पर Style Attribute द्वारा Text Color को Blue कर दिया तो पूरे Document सभी Paragraphs और Headings का Color नीला हो जायेगा.

लेकिन, जब आप Body Element के बीच में लिखे गये Heading Tag पर Style Attribute द्वारा Text Color Green कर देते है. तो Heading में Text का Color Green Show होगा. और बाकि Tags का Color Blue ही रहेगा.

इस प्रक्रिया में हमने Body Tag (Parent Tag) की Value को Heading Tag (Child Tag) की Value से Overrid किया है.

इससे यह बात साबित होती है कि एक Specific Tag (Parent Tag) के Attribute का प्रभाव तब तक रहता है जब तक इस Attribute को किसी अन्य Tag (Child Tag) द्वारा Define नही किया जाता है.

इसे समझने के लिये हमने एक उदाहरण तैयार किया है. जिसे आप भी Try कीजिये. इससे Concept को समझने में आसानी होगी.

इस उदाहरण में हमने दो Conditions बनाई है. जिसमें पहली Condition में हमने Body Tag में Style Attribute का इस्तेमाल करके Text Color को Blue किया है. वही दूसरी Condition में हमने H1 Tag में भी Style Tag को Use करके इसका Color Green किया है. दोनों Conditions के HTML Code को हमने नीचे चित्र मे दिखाया है. आप इस कोड को अपने नोटपेड में Type करके Save कर लिजिये.

अब हम मानकर चल रहे है कि आपने ऊपर लिखे कोड को लिखकर सेव कर लिया है. जब आप इस कोड को अपने ब्राउजर में Run करेंगे तो यह कोड इस प्रकार का Output देगा. नीचे चित्र देंखे.

Commonly Use होने वाले Attributes के नाम और उपयोग

HTML में कुछ Attributes अन्य Attributes की तुलना में ज्यादा इस्तेमाल किये जाते है. ये Attributes अधिकतर Tags पर Apply किये जा सकते है. इन Commonly Use होने वाले Attributes को Global Attributes भी कहते है. Global Attributes की सूची इनके नाम और उपयोग के साथ नीचे दी जा रही है.

1. Style

Style Attribute का इस्तेमाल किसी Tag पर Inline CSS Rule Apply करने के लिये किया जाता है.

2. Href

Href Attribute द्वारा किसी Link का URL (Web Address) लिखा जाता है.

3. SRC

SRC Attribute भी Href Attribute की तरह ही कार्य करता है. इस Attribute का इस्तेमाल Image Tag में किसी Image के URL को लिखने के लिये किया जाता है.

4. Width and Height

इस Attribute द्वारा किसी विशेष Tag की Width और Height को Set किया जाता है. जैसे; आप किसी Image को इसके Original Size की जगह पर Custom Size में Show कराना चाहते है; तो आप Width and Height Attributes द्वारा Image का Custom Size Define कर सकते है.

5. ALT

ALT Attribute का इस्तेमाल एक Image के बारे Alternative Text लिखने के लिये किया जाता है. यह Text Picture के Show नही होने पर Readers को दिखाई देता है. और Search Engines इसका इस्तेमाल Image को पहचानने के लिये करते है.

6. Title

Title Attribute का इस्तेमाल एक Element के बारे में अतिरिक्त सूचना देने के लिये किया जाता है.

7. ID

ID Attribute का इस्तेमाल एक Element को Unique ID Define करने के लिये किया जाता है. एक ID सिर्फ एक ही Element पर Apply होती है. एक ID को आप एक से ज्यादा Element पर Apply नही कर सकते है इसकी जगह पर Class का Use किया जाता है.

8. Class

Class Attribute भी ID की तरह ही होता है. इसका इस्तेमाल एक Element की Class Define करने के लिये किया जाता है. आप एक ही Class को एक से ज्यादा Element पर Apply कर सकते है.

9. Lang

इस Attribute का इस्तेमाल Content की Language को Define करने के लिये किया जाता है. इस Attribute को HTML Element पर Apply किया जाता है.

from Blogger http://bkcomputercafe.blogspot.com/2018/09/learn-html-attributes-in-hindi.html via IFTTT

#IFTTT #Blogger

0 notes

lewiskdavid90 · 8 years ago

Text

95% off #Android Wear App development: Ride the next wave – $10

Get into the next gold rush by developing application for Android Wear. Android Wear app market value’s 8 Billion dollar

All Levels, – 1.5 hours, 15 lectures

Average rating 2.3/5 (2.3 (15 ratings) Instead of using a simple lifetime average, Udemy calculates a course’s star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.)

Course requirements:

Android App development Android Studio should be downloaded

Course description:

Join the amazing list of 4800+ happy and satisfied students and learn Android Wear App Development from the best course available in udemy marketplace.

Course Updated on 05-01-2016

I continue to review the price of this course as I build it with more valuable content

——————————————————————————————————————–

“Really loved this course. Worth every penny. Explained in such a detailed manner. Highly recommended if you want to startup with android wear.” – Shivam Chopra

“I’ve been going through multiple Android wear app development Courses and this one is well organized and explains concepts in easy to understand language. They are very good about answering questions. I’m over 50% through it and it has been very well organized. Definitely worth the price.” – Jay Dass

“This is a great course to learn Android Wear App development without much mobile development experience. I went through the course and found that it successfully described the main feature of the latest Android Wear app development. ” – Ashley Ahorn

Android has became a very important part of our lives, Android has applications in everything.

Our smartphones, tablets and much more work with the help of Android Operating System, and now most latest technology of android are the Android Wear devices. In this course we will show you practical, and easy ways of understanding what Android Wear actually is and how applications work in this. We will explain you in detail that how you can make your own Android Wear Applications. More clearly we’ll teach you “Android Wear Applications”. And after completing this comprehensive yet simple course you’ll be able to make your own Android Wear Applications and will be able to call yourself an Android Wear Application Developer.

This great, comprehensive and amazing course is taught by an expert instructor. His name is Amit Huddar:

Ride the next 8 Billion $ wave: Android Wear App development

“Get Job in your dream software company”

Authenticate certificate from Softdust will be provided on task completed

Course completion certificate for watching all the videos. Android Wear app developer certificate for watching all the videos and submitting your own new android wear app.

“Take the first mover advantage”

Who can enroll:

Android App developers

In this tutorial one acquires skill to develop app for android wear which is estimated as 8 billion dollar revenue Potential for developers

At the end of tutorial one will be able to build playstore publishable Android Wear app

you will build two application

Wear Message Api Stay awake

before that you will go through

Vision for Android wear Wear Application in market A to Z overview i.e from hardware to software flow of wear Setting up of atmosphere Hello world Pairing up of smart phone and smart watch emulator To pair smartphone and android wear(smart Watch emulator)

At last you will package Android Wear app developed.

Complete Android wear app development Course.

Android wear tutorial consists of 13 videos, 1.5 hour duration

Full details One can apply for job in dream software company with developer certificate Can take share in emerging Android Wear Market One can confidently develop application for Android Wear Android Application developers

Reviews:

“Explanations could have been better, yet makes us learn a lot of stuffs in a considerable amount of time. Thanks Amit for the course.” (Prabhakar Kumar)

“I found very useful and very informative so far.” (Syed Shahzaib Ahmed)

“The instructor speaks quietly, often stops in a middle of a sentence like he doesn’t know what to say next and sometimes adds background music which makes him even harder to understand. He gives false information: – he said that Java development kit (JDK) and Android studio both need to be on the same partition. I had them on separate partitions and everything was working just fine. – he claims that android studio loads much faster on a Mac than on a Windows machine. The loading speed is affected by hardware of a device, not by its OS. Macbooks come with an SSD preinstalled while most Windows laptops come with a normal HDD which makes them slower in everything. I installed an SSD in my Windows laptop and it was loading Android studio as fast as my friend’s Macbook pro. There are a lot of video glitches throughout the whole course. He missed the purpose of the course. The course should focus on Android wear development, but on most of the videos he talks about people always looking into their phones and missing the beautiful things in life. That also applies to the quizes with dumb questions which are not at all related to programming. Once he finally gets to the programming, he shows the code in a normal text editor, which wouldn’t be so bad, but he shows it without any syntax highlighting. He also just pastes a ton of code and explains it very poorly. What he should have done is write the code line by line and talk about why he writes excactly that and not something else. When he shows his “Stay awake” app, he waits one full minute for the countdown to finish, he should have just skipped a part of the video. He did not go through everything there is to know about android wear, just some random few lessons. In conclusion, the overall quality if the course is as bad as it can be. It seems like he made it just for the sole purpose of making a course, similar to how some students write a shitty essay just so they can pass the subject that requires writing an essay. I got it for free on some sale, but if I paid for it, I would definetly ask for a refund.” (Dominik Otočan)

About Instructor:

Amit Huddar

Amit Huddar is an Internet Entrepreneur and Software Engineer. He runs his own software company “Softdust”, which develops products using new technology such as Android Wear (smartwatch and Google Glass). He believes wearable gadgets are the future of personal computing. He believe 2015 to 2025 is meant for app developers Many made millions out of app development, yet he believe it’s just beginning. He is CEO of Softdust (software firm). Amit opted to study Computer Science Engineering in 2013 at SSIT. He started his software company in his first year of Engineering and it became successful, so he dropped out in September, 2014. He has worked on non-conventional forms of energy. Amit demonstrated his design of a tidal energy power plant model at a national level and won awards from prestigious institutes including the ISRO (Indian Space Research Organisation) and NITK (National Institute of Technology Karnataka). He is quantum physicist too. Amit worked on practical application of quantum leap with fellow scientists at IISc (Indian Institute of Science), India’s leading research institute and also ranked as 23rd best in the world. He applies and believes in the law of attraction. Whilst the basic principles of reasoning from physics are important to him, so equally is the law of attraction also important. This plays a very important role in his life. Skills: Android app development, HTML, CSS, PHP, C, C++, JAVA, Linux, building custom Linux OS, cloud computing, penetration testing, Kali Linux and Hacking. Languages spoken: English, Hindi, Kannada.

Instructor Other Courses:

A to Z Ethical Hacking Course Amit Huddar, Scientist, Engineer, Android Developer,Trainer and CEO (111) $10 $200 Wi-Fi Hacking with Kali Android app monetization (free version) …………………………………………………………… Amit Huddar coupons Development course coupon Udemy Development course coupon Mobile Apps course coupon Udemy Mobile Apps course coupon Android Wear App development: Ride the next wave Android Wear App development: Ride the next wave course coupon Android Wear App development: Ride the next wave coupon coupons

The post 95% off #Android Wear App development: Ride the next wave – $10 appeared first on Course Tag.

from Course Tag http://coursetag.com/udemy/coupon/95-off-android-wear-app-development-ride-the-next-wave-10/ from Course Tag https://coursetagcom.tumblr.com/post/158200927578

0 notes