માત્ર 30 મિનિટ માં Html શીખો-HTML Tutorial in Gujrati

Learn HTML in Gujrati : જો તમારે Web Designer અથવા Developer બનવું હોય અથવા તમારી પોતાની Website બનાવવી હોય તો તમારે Html શીખવું જોઈએ.

પરંતુ આ સિવાય, જો તમે પહેલેથી જ એક Businessman છો અને તમારી પાસે તમારી કંપનીની Website છે કે જેમાં નિયમિત Updates જરૂરી છે, તો પછી તમારા માટે Basic HTML શીખવું ફાયદાકારક થઈ શકે છે.

આની મદદથી તમે તમારી Website માં નાના સુધારાઓ કરી શકશો અને તમે આ કાર્ય માટે કોઈપણ Web Designer ને પૈસા ચૂકવવાથી બચી શકશો.

આની મદદથી તમે તમારી Website માં નાના નાના સુધારાઓ કરી શકશો અને તમે આ કાર્ય માટે કોઈપણ Designer ને પૈસા ચૂકવવાથી બચી શકશો.

આજે આ HTML tutorial in Gujrati ને વાંચી ને તમે આગામી 30 મિનિટમાં HTML નો ઉપયોગ કરીને એક સરળ webpage બનાવવાનું શીખી શકો છો.

HTML શીખવું ખૂબ જ સરળ છે, ફક્ત નીચે આપેલા સ્ટેપ્સ follow કરો .

Learn HTML in Gujrati – 30 Minutes Tutorial

અહીં તમને HTML નું મૂળભૂત knowledge મળશે જે એક સરળ Web Page ડિઝાઇન કરવા માટે પૂરતું છે, પરંતુ આગળ અમે તમને આ બ્લોગમાં Web Design અને Development નું અદ્યતન knowledge પણ આપીશું, તો અમારી સાથે જોડાયેલા રહેવા માટે અમારા બ્લોગ ને સબ્સ્ક્રાઇબ કરી શકોછો .

HTML શું છે ? What is HTML in Gujrati

HTML ( HYPER TEXT MARKUP LANGUAGE ) એવી ભાષા છે કે જેના દ્વારા આપણે Web-Browser ની સ્ક્રીન પર આપણા Web page ની માહિતી (text, images વગેરે) કેવી રીતે પ્રદર્શિત કરવી તે સમજાવે છે.
HTML કોડ થી જ બ્રાઉઝર ને કહીશું કે આપણા Page નું લેઆઉટ કેવું હશે.
HTML કોડ વિના, કોઈ પણ Web page ની રચના કરી શકાતી નથી, આ સમયે, તમે તમારી સ્ક્રીન પર જોઈ રહ્યાં છો તે Web page બનાવવા માટે, HTML ભાષાનો ઉપયોગ કરવામાં આવ્યો છે.
HTML ફાઇલ નું એક્સ્ટેંશન .html છે.

HTML Tools

HTML માં કોડ લખવા અને ચલાવવા માટે કેટલાક Basic Tools ની આવશ્યકતા હોય છે, જે લગભગ બધા કમ્પ્યુટર્સમાં પહેલાથી Installed થયેલા હોય છે.

આ માટે મુખ્યત્વે બે પ્રકારનાં Tools જરૂરી છે.

Text Editor ( જેવાં કે Notepad, Notepad++, Dreamweaver, visual studio code અને sublimetext વગેરે ).
Web Browser (જેવા કે Internet Explorer, Google Chrome, Firefox, Safari, Opera વગેરે ).

આપણે Text Editor નો ઉપયોગ કોડ લખવા માટે કરીશું અને બ્રાઉઝરમાં આપણે બનાવેલ HTML File ને Run કરીશું, જો તમારી પાસે Windows System છે, તો પછી તમારા કમ્પ્યુટર માં Notepad અને Internet Explorer પહેલેથી જ Installed થયેલું હશે .

HTML Document Structure

હવે આપણે એક html Page બનાવીશું, આ માટે નીચે કેટલાક મહત્વપૂર્ણ કોડ આપ્યા છે, જે તમે Copy કરો અને notepad માં paste કરો અને કોઈ Folder માં save કરો, ફાઈલ સેવ કરતી વખતે save as પર click અને ફાઇલના નામ પછી .Html લખો.

અહીં એક વાત નું ખાસ ધ્યાન રાખવું કે Html file ને સેવ કરવા માટે .html એક્સ્ટેનશન લગાવવું અનિવાર્ય છે જો તમે એમ નહિ કરો તો તમારી html file browser પર run નહિ થાય.

<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1>ગુજ્જુ ની સ્કૂલ પર તમે html શીખી રહ્યા છો</h1>
Hello World!!!
</body>
</html>

હવે Browser માં સેવ કરેલી ફાઇલ Open કરો જે આના જેવી દેખાશે.

ચાલો હવે આ કોડ સમજીએ:

એક HTML page ઘણા tags થી બનેલું હોય છે, અને બધા tags તે webpage ના કેટલાક elements ને રજૂ કરે છે જેમ કે કોઈ paragraph, image, table વગેરે.
લગભગ બધા જ Tags ખુલીને બંધ થાય છે. opening tag આવી રીતે લખીએ છીએ <tag_name> અને closing tag માં / આના જેમ ફોરવર્ડ ષ્લેશ આવે છે </tag_name>
ઉપર ના code માં તમે જોઈ શકો છો કે <html > થી વેબ page શરુ થાય છે અને </html > પર page પૂર્ણ થાય છે .

HTML Page Sections

એક HTML page મુખ્યત્વે બે ભાગો સમાવે છે :

Head Section: આ section માં pages વિશે માહિતી લખવાની હોય છે જે વેબ બ્રાઉઝર અને સર્ચ એન્જિન માટે ઉપયોગમાં લેવાય છે. આ section માં મુખ્યત્વે ત્રણ પ્રકારની માહિતી શામેલ છે: keywords, description જે ગૂગલ જેવા સર્ચ એન્જિન દ્વારા વપરાય છે અને ત્રીજું title જે webpage નું title છે અને બ્રાઉઝરના title bar માં Display થાય છે.
Body Section: તે main content સાથેનો એક ભાગ છે, અહીં બધી માહિતી લખવાની હોય છે જે આપણે આપણા page માં બતાવવા માંગીએ છીએ જેમ કે: text, image, video વગેરે.

Background અને Text માં Color add કરવો

આપણા Webpage ને વધુ આકર્ષક બનાવવા માટે, આપડે background color, text color અને images નો ઉપયોગ કરી શકીએ છીએ.

ચાલો આપણે જાણીએ કે HTML માં background color કેવી રીતે એપ્લાય કરવો.

તો ચાલો પહેલા આપણે page નો background-color બદલીએ.આ કરવા માટે, આપણે Notepad માં અગાઉ કરેલું Coding ખોલો અને body ટેગ માં bgcolor નામ નો attribute add કરો અને તેનું value વાદળી બનાવવું. જેથી સમગ્ર page background blue થઈ જશે.

Html માં background colour નો Code આવી રીતે લખીશું :

<html>
<head>
<title>My First HTML Document</title>
</head>
<body bgcolor="blue">
<h1>ગુજ્જુ ની સ્કૂલ પર તમે html શીખી રહ્યા છો</h1>
Hello World!!!
</body>
</html>

આપણે આજે code લખ્યો તેને browser માં open કરો અને હવે કંઈક આવું દેખાશે :

હવે આપણે text નો color બદલીશું એના માટે આપણે Font tag નો ઉપયોગ કરીશું અને એના atribute માં થી color નો use કરીશું .

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

atribute નો use ટેગ ની અંદર થોડીક space આપિ કરવો અહીં આપણે <font color ="white "> લખ્યું એટલે કે text નો color white karyo જે તમે નીચે ની image માં જોઈ શકો છો

અહીં તમે જોઈ શકો છો કે hello world !!! નો color બદલાઈ ગયો છે.

હવે તમને એક સવાલ થતો હશે કે font tag નો use કર્યા સિવાય color આપીશું તો શું થશે તો જો તમે font tag નો use કર્યા વગર color aapso તો એ સંપૂર્ણ page ના ફોન્ટ નો text બદલી દેશે.

જો તમારે અલગ અલગ text માં જુદા જુદા color નો use કરવો હોય તો font tag નો use કરવો.

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

Image add કરતાં શીખો

Visitor માટે આપણા webpage ને વધુ આકર્ષક બનાવવા માટે આપણે Images/pictures નો પણ ઉપયોગ કરીયે છીએ. webpage માં image insert કરવા માટે આપણે img tag નો use કરીશું.

સૌ-પ્રથમ આપણે જ્યાં html page ને સેવ કર્યું હતું એજ ફોલ્ડર ની અંદર આપણે બીજું એક ફોલ્ડર (images નામ નું ) બનાવીશું કે જેમાં આપણે web page બનાવતી વખતે ઉપયોગ માં લેવાતા images રાખીશું.

html page માં image show કરાવવા માટે નો code નીચે મુજબ લખીશું.

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

ઉપરના કોડમાં મેં images / myimage.jpg લખ્યું છે જે જણાવે છે કે આપણી ઇમેજ(photo /picture) નું નામ myimage.jpg છે જે images નામના ફોલ્ડર માં છે.

Note: અહીં image ના નામ અને format પર ધ્યાન આપો, ઇમેજનું નામ અને ફોર્મેટ જાણવા માટે ઇમેજ ની properties check કરવી જોઈએ, અહીં મેં જે ઇમેજ લીધી છે તેનું નામ myimage રાખવામાં આવ્યું છે જે jpg format માં છે, તમારી ઇમેજનું નામ અને format અલગ હોઈ શકે છે.

હવે આ Webpage ને બ્રાઉઝરમાં ખોલો, જે આવું દેખાશે:

આપણે picture ની size પણ બદલી શકીએ છીએ જેના માટે આપણે height અને width attribute નો ઉપયોગ કરીશું.

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

Height અને width બદલ્યા પછી, આપણું Page કંઈક આના જેવું દેખાશે.

Html માં Link કેવી રીતે create કરવી

એક Page ને બીજા Page થી કનેક્ટ કરવા માટે Link અથવા Hyperlink નો ઉપયોગ થાય છે.

સૌ પ્રથમ આપણે એક HTML page ની જરૂર છે જે આપણા પેજ સાથે લિંક કરી શકીએ, પછી આપણે બીજું Page બનાવીશું અથવા અગાઉ બનાવેલા page ને copy કરી અને તે જ ફોલ્ડરમાં બીજા નામ સાથે save કરીશું .

Link બનાવવા માટે, નીચે પ્રમાણે કોડ લખો:

<a href="તમારા પેજ નું નામ ">અહીં Text લખો જે user ને show કરાવવા માંગતા હોય </a>

ઉદાહરણ :

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

જો તમે કોઈ વેબસાઇટને લિંક કરવા માંગતા હોય, તો તેના માટે નો code નીચે મુજબ લખીશું :

<a href="http://www.website.com"> અહીં Text લખો જે user ને show કરાવવા માંગતા હોય
 </a>