Ardhavatrao :Tutorials in Marathi

07. HTML Quotation

2020-10-01T19:59:00.036+05:30

HTML Quotation

HTML मध्ये quotation elements चा वापर webpage मध्ये मजकूर ला अवतरण चिन्ह मध्ये घालण्यासाठी केला जातो, म्हणजेच webpage मधील सामान्य मजकुरापेक्षा भिन्न प्रस्तुत करण्यासाठी वापरतो.

खाली HTML चे सर्वात वापरले जाणारे Quotation Element आहेत : -

<q> element : -

या element चा उपयोग अवतरण चिन्ह (" ") देण्यासाठी होतो.

वाक्यरचना : -

<q> मजकूर </q>

Code : -

<!DOCTYPE html>

<html>

<body>

<q>HTML is invented by Tim Berners-Lee</q>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

<blockquote> element: -

HTML मध्ये <blockquote> element लांबीचे quotation दर्शविण्यासाठी वापरला जातो (म्हणजे एकाधिक ओळींना किंवा परिच्छेद विस्तृत करणारे quotation).

हा element ओळी किंवा परिच्छेदला अवतरण चिन्ह मध्ये ठेवण्याऐवजी तो ओळी किंवा परिच्छेदचे संरेखन इतरांपेक्षा वेगळी परिभाषित करतो.

वाक्यरचना : -

<blockquote>ओळीला किंवा परिच्छेद </blockquote>

Code : -

<!DOCTYPE html>

<html>

<body>

<p>Here is a quote from WWF's website:</p>

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

<abbr> element: -

<abbr> element एखादा मोठा वाक्याचा लहान स्वरूपाला परिभाषित करता. याच सह title attribute चा वापर होतो.

वाक्यरचना : -

HTML is invented by Tim Berners-Lee

</abbr>

उदा.

HTML हा Hyper Text Markup Language चं लाहान स्वरूप आहे. जेव्हा आपण webpage मध्ये HTML वर cursor ठेवतो तेव्हा browser, html ची संपूर्ण नाव प्रदर्शित करतो.

Code : -

<!DOCTYPE html>

<html>

<body>

<h2><abbr title="Hyper Text Markup Language">HTML</abbr> is invented by Tim Berners-Lee</h2>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

<cite> element: -

या element चा वापर आपल्या कार्याचा शीर्षकला ओळखण्यासाठी केला जातो. उदा . पुस्तक, गाणे, चित्रपट, टीव्ही शो, चित्रकला, आणि इतर.

हा element शीर्षकाचा मजकूर ला webpage वर Italic font style मध्ये प्रदर्शित करते.

वाक्यरचना : -

टीप : -

cite element आणि blockquote मधील cite attribute दोन्ही वेगळे आहे आणि त्यांचा वापर ही वेगळा आहे.

Code : -

<!DOCTYPE html>

<html>

<body>

<p><cite>Natsamrat</cite>, a play written by V.V. Shirwadkar for which he won several accolades</p>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

<bdo> element: -

bdo (Bi-directional Override) element चा वापर शब्दांचीवर्तमान ची दिशा बदलण्यासाठी वापरला जातो.

आपण शब्दांची दिशा डावीकडून उजवीकडे किंवा उजवीकडून डावीकडे बदलूशकतो.

यात dir (direction) attribute वापरला जातो. ज्याची दोन value आहे.

१) ltr (Left to Right) : शब्दांची दिशा डावीकडून उजवीकडे बदलण्यासाठी.

२) rtl (Right to Left) शब्दांची दिशा उजवीकडून डावीकडे बदलण्यासाठी.

वाक्यरचना : -

Code : -

<!DOCTYPE html>

<html>

<body>

<h4>डावीकडून उजवीकडे. </h4>

<bdo dir= “ltr”>Hello World! </bdo>

<h4> उजवीकडून डावीकडे. </h4>

<bdo dir= “rtl”>Hello World! </bdo>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

06. HTML Paragraph.

2020-09-15T22:40:00.001+05:30

HTML Paragraph

Webpage मध्ये परिच्छेद दर्शविण्यासाठी Paragraph (परिच्छेद) element वापरला जातो. Paragraph element ला <p> द्वारे सूचित करतात. webpage मधे एकापेक्षा अधिक <p> tag निर्दिष्ट केल्यास browser परिच्छेद दरम्यान एक रिकामी ओळ सोडतो.

Browser, webpage मध्ये असेलेली अतिरिक्त मोकळी जागा आणि अतिरिक्त रेखा पण काढून टाकतो.

Code : -

<!DOCTYPE html>

<html>

<body>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

</p>

<p>

</p>

<p>

</p>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

Paragraph मध्ये उपयोगी होणारे महत्वाचे tag.

<br> tag : -

नवीन परिच्छेद सुरू न करता नवीन ओळ सुरू करण्यासाठी <br> वापरण्यात येतं. हा empty tag आहे म्हणजे <br> tag ला closing tag नसतो.

<pre> tag : -

<pre> tag मधे मजकूर चं स्वरूप आधीपासून परिभाषित असतं. <pre> tag च्या आत असलेले मजकूर चा आकार आधीपासून निश्चित असते आणि हा tag त्यात असलेले अतिरिक्त मोकळी जागा आणि अतिरिक्त ओळी webpage मधून काढत नाही.

<hr> tag : -

<hr> element क्षैतिज रेखा तयार करण्यासाठी वापरला जातो. याला HTML मध्ये horizontal rule म्हणतात. हा empty tag आहे.

Code : -

<!DOCTYPE html><html><body>

<h5>कविता विना pre element वापरून </h5>

<p>Baa, baa, black sheepHave you any wool?Yes sir, yes sir, three bags full.One for the master,And one for the dame,And one for the little boyWho lives down the lane.</p>

<hr>

<h5>कविता pre element वापरून </h5>

<pre>Baa, baa, black sheepHave you any wool?Yes sir, yes sir, three bags full.One for the master,And one for the dame,And one for the little boyWho lives down the lane.</pre>

<hr>

<h5> ओळी विना br element वापरून </h5>

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. </p>

<h5> ओळी br element वापरून </h5>

<p> Lorem ipsum dolor sit amet, consectetuer <br>adipiscing elit. Maecenas porttitor congue massa. </p> </body></html>

Browser मध्ये code चे निष्कर्ष : -

05. HTML Heading

2020-09-14T22:33:00.000+05:30

Html Heading : -

Webpage मध्ये शीर्षक किंवा उपशीर्षकच्या मजकूर ला ठळक व त्याचा आकार परिभाषित करतो Heading tag.

Heading चे सहा प्रकार आहेत h1, h2, h3, h34, h5, h6.

<h1> सर्वात मोठी शीर्षकाला आकार देते तसेच <h6> सर्वात लहान शीर्षक ला आकार देतं.

Html Document : -

<!DOCTYPE html>

<html>

<head>

<title>Html Heading</title>

</head>

<body>

<h1>Html Heading</h1>

<h2>Html Heading</h2>

<h3>Html Heading</h3>

<h4>Html Heading</h4>

<h5>Html Heading</h5>

<h6>Html Heading</h6>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

04. HTML Comment.

2020-09-14T12:59:00.001+05:30

Html comment हा कोड असतो जो web developer ( वेब विकसक ) द्वारे html document मध्ये घातला जातो.

Html document मध्ये code च्या विशिष्ट विभागाबद्दल स्पष्टीकरण देण्यासाठी html comment लिहिला गेला जातो.

भविष्यात web developer ला html document मध्ये आवश्यक बदल करतांना code चा विशिष्ट विभाग शोधण्यास आणि code वाचणाऱ्याला समजण्यास मदत होते.

आपल्या code मध्ये comments जोडणे ही चांगली पद्धत आहे, विशेषत: जेव्हा आपल्या documents मध्ये बरेच जटिल कोड भरलेले असतात.

Html comment या <! -- --> tag दरम्यान ठेवला जातो. म्हणून, <! -- --> टॅगसह असलेली कोणतीही सामग्री comment म्हणून गणली जाते आणि browser द्वारे त्याकडे पूर्णपणे दुर्लक्ष केले जातो, जेणे करून webpage वर ते comments दिसणार नाहीत.

वाक्यरचना : -

Html Document : -

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Browser मध्ये code चे निष्कर्ष : -

03. HTML Attribute

2020-09-13T20:40:00.003+05:30

HTML Element बद्दल अतिरिक्त माहिती Attribute प्रदान करतो.

attribute नेहमी element चा starting tag मध्ये निर्दिष्ट केला जातो.

Attribute दोन भागाने बनलेले आहे property चे नाव आणि value. जसे property चे नाव = " value ".

property name हे property (वैशिष्ट्यं) आहे, जे आपण element ला देऊ इच्छितो आणि value ही property चि मूल्य आहे.

property ची value नेहमी अवतरण चिन्ह मधे लिहणे अनिवार्य आहे.

बहुतेक html element मध्ये attribute असतात.

आपण एका HTML element मध्ये एकाधिक attributes जोडू शकता, परंतु दोन attributes मध्ये जागा देणे अनिवार्य आहे.

02. HTML मधील Tag आणि Element

2020-09-12T12:34:00.001+05:30

HTML Tag : -

Html Tag हे पूर्वनिर्धारित शब्द आहेत जे कोन्य कंसात " <> " असतात. जे webpage वर प्रतिमा, ऑडिओ, व्हिडिओ, मजकूर, दस्तऐवज इ. सारख्या सामग्रीचे स्वरूपन आणि त्यांचे प्रदर्शन कसे होईल ते परिभाषित करण्यासाठी वापरलं जाते.

Html Tag मध्ये दोन मुख्य भाग आहेत " Opening tag " आणि " Closing tag ". परंतु काही html tag ला closing tag नसतात.

Web browser जेव्हा एखादा html document वाचतो तेव्हा browser त्यास वरपासून खाली व डावीकडून उजवीकडे वाचतो. प्रत्येक Html tag चे भिन्न गुणधर्म असतात.

वाक्यरचना : -

वर्णन : -

HTML Element : -

HTML Element हे Html tag आणि त्याचा आत समाविष्ट असलेले सामग्री चे संयोजन आहे.

याचा अर्थ असा कि starting tags ते ending tag पर्यंत HTML Element आहे.

HTML Element प्रामुख्याने दोन प्रकारात वर्गीकृत केले आहे.

Block Element: -

Block elements नेहमी नवीन ओळीने सुरु होतात आणि आपल्या मूळ element किंवा webpage ची पूर्ण रूंदी वापरतात.

Block-level elements : -

Inline Element: -

Inline elements दिलेल्या मजकुराचा भाग उर्वरित मजकूरापासून वेगळे करतात आणि त्यास एक विशिष्ट कार्य प्रदान करतात. Inline element नावीन ओळीने सुरु होत नाही आणि आवश्यक असेल तितकंच रुंदी वापरेल.

Inline-level Element : -

HTML Document : -

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<p> <i> Hello World : ) </i> </p>
</body>
</html>

Nested Elements: -

जेव्हा आपण एका html element मध्ये दुसरा html element चा वापर करतो त्या प्रक्रिया ला nested करणे असे म्हणतो. आपण वरील दिलेले उदाहरण मध्ये पाहू शकता <body> element मध्ये <p> element आणि <p> element मध्ये <i> element चावापर केला. येथे <body> element <p> element चा मूळ element आहे आणि <p> element <i> element चा मूल घटक आहे. ज्या क्रम मध्ये element start करतो त्याचा विपरीत क्रमात element end करायचं असतं. अर्थातच जो element सर्वात आधी सुरु होईल तो सर्वात शेवटी समाप्त होईल.

Empty Elements : -

आत्तापर्यंत आपल्याला हे माहित आहे की HTML Element ला starting आणि closing tag दोन्ही असतात परंतु Empty Element असे element असतात ज्यांना closing tag नसतो. उदाहरण <br>, <link>, <img>, <hr>, <meta>, <source> आणि इतर.

01. HTML शी ओळख.

2020-09-09T23:24:00.022+05:30

HTML म्हणजे काय?

HTML चे संक्षिप्त आहे "Hyper Text Markup Language" आहे जी Web page आणि Web application तयार करण्यासाठी वापरली जाते. HTML ला 1991 मध्ये “Tim Berners-Lee” यांनी विकसित केले.

चला पाहू HTML मध्ये Hyper Text आणि markup language काय आहे ?

HTML मध्ये, Hyper Text त्या मजकूरला म्हटलं जातं ज्यात link असते. उदाहरणार्थ, जेव्हा आपण एखाद्या link असलेल्या मजकूरवर क्लिक करतो तेव्हा तो आपल्याला नवीन webpage वर आणते, त्याचा अर्थ असा की आपण Hypertext क्लिक केले आहे.

Markup language ही संगणकाची भाषा आहे जी दस्तऐवजाचे आराखडा आणि सजावट करण्यासाठी दस्तऐवज मध्ये घटक परिभाषित करण्यासाठी वापरली जाते. HTML ही Markup language आहे.

नुकताच आपण HTML बद्दल शिकलो, आता आपण HTML Document ( HTML दस्तऐवज ) कसे बनवायचे ते शिकू.

HTML Document बनवण्यासाठी दिलेल्या चरणांचे अनुसरण करा: -

चरण 1: - Notepad Text Editor उघडा.

Notepad

चरण 2: - हा HTML code, notepad मधे लिहा.

HTML Document:

<!DOCTYPE html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

चरण 3: - HTML code save करा.

HTML save करण्यासाठी, “File” वर click करून मग “Save as” चा पर्याय वर click करा.

File > Save as.

Save as वर click केल्याने, “ Save As ” window उघडेल.

चरण 4: - File Save करता तेव्हा लक्षात ठेवण्याच्या काही महत्त्वाच्या गोष्टी आहेतः

" .html " HTML File extension वापरा, उदाहरणार्थ " index.html ". File extension हा file नावाचा प्रत्यय असतो आणि तो file च्या प्रकाराचे वर्णन करतो.

File नावामध्ये कोणतीही मोकळी जागा किंवा विशेष चिन्ह ( !, @, #, $, %, ^, &, * ) वापरू नका. त्याऐवजी अंडरस्कोर ( _ ) किंवा डॅश ( - ) वापरा.

File चे नाव “index.html” आणि encoding “UTF-8” ठेवा.

चरण 5: - HTML Document ला web browser मधे पाहणे.

Save केल्यावर HTML file अशी दिसेल.

पाहण्यासाठी save केलेले HTML file वर double-click (मागो- माग दोनवेळा) click करा किंवा mouse वर right-click करून "open with" मध्ये आवडत्या web browser निवडा.

टीप: - सुरुवातीस, HTML चे code लिहिण्यासाठी notepad चा वापर केला पाहिजे ज्यामुळे आपल्याला HTML चे सर्व tags , elements आणि attributes समजण्यास आणि लक्षात ठेवण्यास मदत होऊ शकते.

Html document चे वर्णन: -

<!DOCTYPE html>: <!DOCTYPE html>असे नमूद करते की हे document, html 5 शी संबंधित आहे.

<html>: html element, document ला परिभाषित करतो.

<head>:<head> element document बद्दल माहिती प्रदान करतो.

<title>: <title> element, document लाशीर्षक प्रदान करतो.

<body>:<body> element, webpage मध्ये दिसणारे सामग्री असते.

<h1>:<h1>मजकूर चा स्वरूप ठळक आणि आकार परिभाषित करतं.