HTML પૃષ્ઠ કેવી રીતે બનાવવું

જો તમે તમારું પોતાનું વેબ પેજ બનાવવા માંગો છો, તમારી પાસે HTML ની ​​સમજ હોવી જોઈએ. This article explains how to create an HTML page. પણ, તમે xml સાઇટમેપ કેવી રીતે બનાવવો અને ચિત્ર અને લિંક કેવી રીતે ઉમેરવી તે શીખી શકશો. xml સાઇટમેપ બનાવવો પણ મહત્વપૂર્ણ છે, જે તમને તમારી સાઇટને વ્યવસ્થિત કરવામાં અને તમારો ટ્રાફિક વધારવામાં મદદ કરી શકે છે. આગળનું પગલું એ ટેમ્પલેટ પસંદ કરવાનું છે.

Creating a html page

HTML એ માર્કઅપ લેંગ્વેજ છે. વેબ પૃષ્ઠના દરેક ઘટકને ટેગ દ્વારા રજૂ કરવામાં આવે છે. ટૅગને કોણ કૌંસ દ્વારા ઓળખવામાં આવે છે, અને દરેક તત્વમાં એક અથવા વધુ ટૅગ્સ હોય છે. કેટલાક ઘટકોને માત્ર એક ટેગની જરૂર હોય છે; અન્યને બેની જરૂર પડી શકે છે. ઓપનિંગ અને ક્લોઝિંગ ટૅગ્સમાં ફોરવર્ડ સ્લેશ હોય છે (/). દાખ્લા તરીકે, ફકરા તત્વ p ટેગ દ્વારા રજૂ થાય છે. ઓપનિંગ અને ક્લોઝિંગ ટૅગ્સ વચ્ચેનો ટેક્સ્ટ ફકરો ટેક્સ્ટ છે.

HTML દસ્તાવેજ બનાવવા માટે, તમારે ટેક્સ્ટ એડિટરનો ઉપયોગ કરવાની જરૂર પડશે. મોટાભાગના કમ્પ્યુટર્સમાં મૂળભૂત રીતે ટેક્સ્ટ એડિટર હોય છે. વિન્ડોઝ યુઝર્સ ઈન્ટરનેટ એક્સપ્લોરરનો ઉપયોગ કરશે, જ્યારે Mac વપરાશકર્તાઓ TextEdit નો ઉપયોગ કરી શકે છે. વ્યાવસાયિક દેખાતા વેબપેજ બનાવવા માટે તમે ફેન્સી ટેક્સ્ટ એડિટર ઇન્સ્ટોલ કરી શકો છો, પરંતુ તમારા પ્રથમ HTML પૃષ્ઠ માટે, તે જરૂરી નથી. તમે સરળ ટેક્સ્ટ એડિટર અને કોઈપણ વેબ બ્રાઉઝરનો પણ ઉપયોગ કરી શકો છો. જો તમે કયા પ્રોગ્રામનો ઉપયોગ કરવા માટે અચોક્કસ હોવ, મફત HTML એડિટર ડાઉનલોડ કરવાનો પ્રયાસ કરો.

html પૃષ્ઠમાં બે મુખ્ય વિભાગો છે: શરીર અને માથું. મુખ્ય વિભાગમાં વેબસાઇટની વાસ્તવિક સામગ્રી શામેલ છે, જ્યારે હેડ વિભાગનો ઉપયોગ શીર્ષક અને મેટા માહિતી માટે થાય છે. શરીર અન્ય તમામ તત્વો ધરાવે છે, છબીઓ અને અન્ય ગ્રાફિક્સ સહિત. હેડર વિભાગ એ તમારી નેવિગેશન લિંક્સ મૂકવાની જગ્યા છે. તમે બોડી લખવાનું સમાપ્ત કર્યા પછી, તમે દસ્તાવેજની સામગ્રી દાખલ કરવા માટે તૈયાર છો. તમારી વેબસાઇટ દરેક માટે સુલભ છે તેની ખાતરી કરવા માટે શરીર અને માથાના ઘટકોનો ઉપયોગ કરવાની ખાતરી કરો.

Creating a xml sitemap

If you have an HTML page, શોધ એન્જિનને તમારી વેબસાઇટ ક્રોલ કરવામાં મદદ કરવા માટે તમે XML સાઇટમેપ બનાવવા માગી શકો છો. જો કે આ તમારી શોધ રેન્કિંગને અસર કરશે નહીં, તે સર્ચ એન્જિનને તમારી સામગ્રીને સમજવામાં અને તેમના ક્રોલિંગ દરને સમાયોજિત કરવામાં મદદ કરશે. આ તરફ, તમારી વેબસાઇટ શોધ એન્જિન પરિણામોમાં વધુ દેખાશે. પ્રારંભ કરવા માટે અહીં કેટલાક સરળ પગલાં છે:

HTML સાઇટમેપ બનાવવાનું સરળ છે. તમારે ફક્ત તમારી સાઇટના પૃષ્ઠોનું એક સરળ ટેબલ બનાવવાનું છે, દરેક પૃષ્ઠની લિંક્સ સાથે. પછી હેડર અથવા ફૂટરમાં તે સાઇટમેપ પૃષ્ઠને લિંક કરો. આ તરફ, તમારી સાઇટના કેટલા પૃષ્ઠો છે તે કોઈ બાબત નથી, લોકો તેમના દ્વારા સરળતાથી નેવિગેટ કરી શકે છે. તદુપરાંત, સાઇટમેપ બનાવવા માટે તમારે SEO સબમિટ કરવાની જરૂર નથી.

એકવાર તમારું HTML પૃષ્ઠ લાઇવ થઈ જાય, તેને Google શોધ કન્સોલ પર સબમિટ કરો. તમે કોઈપણ ફાઇલ એક્સ્ટેંશનનો ઉપયોગ કરી શકો છો અને તમારા XML સાઇટમેપને નામ આપી શકો છો. તમે Google ને XML સાઇટમેપ સબમિટ કરી શકો છો, પરંતુ તે જરૂરી નથી. Google ના ક્રોલર્સ સામાન્ય રીતે નવી સામગ્રી શોધવામાં ખૂબ સારા છે, અને તમારે તેમને સાઇટમેપ સબમિટ કરવાની જરૂર નથી. તમે તેને અન્ય સર્ચ એન્જિન પર પણ સબમિટ કરી શકો છો, પરંતુ આ બાંહેધરી આપતું નથી કે તમને Google દ્વારા શોધવામાં આવશે.

તમારા વેબ પેજ પર XML સાઇટમેપ ઉમેરવો જરૂરી નથી, પરંતુ તે તમારી વેબસાઇટના એસઇઓ વધારશે. સાઇટમેપ્સનો ઉપયોગ સર્ચ એન્જિન દ્વારા તેમને એવા પૃષ્ઠોને અનુક્રમિત કરવામાં મદદ કરવા માટે કરવામાં આવે છે જે વેબ પૃષ્ઠ દ્વારા સીધી રીતે જોડાયેલા નથી.. સાઇટમેપ્સ સમૃદ્ધ મીડિયા સામગ્રીની ઍક્સેસિબિલિટીને સુધારવામાં પણ મદદ કરે છે. તમારી વેબસાઇટ પર સાઇટમેપ ઉમેરવાથી તમારી સાઇટને સર્ચ એન્જિન બૉટ્સ માટે વધુ ઍક્સેસિબલ બનાવવામાં મદદ મળી શકે છે.

Adding a picture

In HTML, તમે img ટેગનો ઉપયોગ કરીને પૃષ્ઠ પર એક છબી ઉમેરી શકો છો. આ ટૅગમાં માત્ર છબી અને તેની વિશેષતાઓ છે; તેને ક્લોઝિંગ ટેગની જરૂર નથી. આ ઈમેજ ટેગ HTML ડોક્યુમેન્ટના બોડી સેક્શનમાં દાખલ થવો જોઈએ. ચિત્રની પહોળાઈ અને ઊંચાઈ ઉપરાંત, તમારે ચિત્રનું વર્ણન કરતી વૈકલ્પિક વિશેષતા શામેલ કરવી જોઈએ. Alt ટેગ એવું લખવું જોઈએ કે જેમ તમે કોઈ વ્યક્તિ માટે વર્ણન લખી રહ્યા છો જે તેને જોઈ શકતો નથી.

HTML દસ્તાવેજમાં ચિત્ર ઉમેરવા માટે થોડું CSS અને HTML જ્ઞાન જરૂરી છે. ઇમેજનું કદ અને રિઝોલ્યુશન એ ધ્યાનમાં લેવાના બે સૌથી મહત્વપૂર્ણ પરિબળો છે. છબીનું કદ નક્કી કરશે કે તે દસ્તાવેજની સામગ્રીમાં કેવી રીતે ફિટ થશે. જો તમે અલગ રિઝોલ્યુશન અથવા સાપેક્ષ ગુણોત્તરનો ઉપયોગ કરવાનું પસંદ કરો છો, તમે ઇમેજનું કદ બદલવાનો પણ પ્રયાસ કરી શકો છો. જોકે, યાદ રાખો કે સ્કેલિંગ હંમેશા તમારી અપેક્ષા મુજબ કામ કરતું નથી.

છબીના કદને સમાયોજિત કરવા માટેનો અંગૂઠોનો સારો નિયમ તેની પહોળાઈ વધારવી છે. પહોળાઈ ઊંચાઈ કરતાં ઓછામાં ઓછી એક પિક્સેલ નાની હોવી જોઈએ. જો છબી પ્રદર્શિત કરવા માટે ખૂબ નાની છે, તમે સરહદ ઉમેરી શકો છો, અને પછી તેને ઇમેજ સાઇઝમાં ફિટ કરવા માટે એડજસ્ટ કરો. તમે ઇમેજની બોર્ડર એટ્રિબ્યુટમાં ઉમેરીને તેને એડજસ્ટ પણ કરી શકો છો. સરહદની જાડાઈ એ ડિફૉલ્ટ મૂલ્ય છે, પરંતુ તમે તેને કોઈપણ મૂલ્ય પર સેટ કરી શકો છો. ખાતરી કરો કે ઇમેજમાં src લક્ષણ છે.

Adding a link

You can add a link in HTML to your document using an a> href લક્ષણ સાથે ટેગ કરો. આ દસ્તાવેજ માટે બુકમાર્ક બનાવશે અને તેને નવી ટેબમાં ખોલશે. ડોક્યુમેન્ટમાં ઈમેજ ઈન્સર્ટ કરવા માટે તમે href એટ્રીબ્યુટનો પણ ઉપયોગ કરી શકો છો. તમે HTML બટનને લિંકમાં કન્વર્ટ કરવા માટે JavaScript કોડ સાથેની લિંકનો પણ ઉપયોગ કરી શકો છો. એકવાર તમે આ કરી લો, તમે CSS અથવા JavaScript કોડ સાથે તમારી લિંકને સ્ટાઇલ કરી શકો છો.

લિંક એ એક વેબ રિસોર્સથી બીજા સાથેનું જોડાણ છે. તે બે છેડા ધરાવે છે, સ્ત્રોત એન્કર અને ડેસ્ટિનેશન એન્કર. લિંક છબીથી ટેક્સ્ટ ફાઇલમાં કંઈપણ હોઈ શકે છે. મોટાભાગની સોશિયલ નેટવર્કિંગ સાઇટ્સ અને વેબસાઇટ્સ વપરાશકર્તાઓને ચોક્કસ URL પર નિર્દેશિત કરવા માટે લિંક્સનો ઉપયોગ કરે છે. HTML નો ઉપયોગ લિંકનું સ્થાન સ્પષ્ટ કરવા માટે પણ થઈ શકે છે. તે એક’ લક્ષણ તમને કોડ તત્વોને URL સાથે લિંક કરવાની મંજૂરી આપે છે.

લિંક ડિઝાઇન કરતી વખતે, તમારા મુલાકાતીઓ સામગ્રીનો ઉપયોગ કેવી રીતે કરશે તે ધ્યાનમાં લેવાની ખાતરી કરો. લિંક ટેક્સ્ટ વર્ણનાત્મક હોવો જોઈએ, જેથી તેઓ જાણશે કે તેઓએ શું અપેક્ષા રાખવી જોઈએ. સમાન URL નું પુનરાવર્તન સ્ક્રીન વાચકો માટે નીચ છે, અને તે તેમને કોઈ ઉપયોગી માહિતી આપતું નથી. સ્ક્રીન રીડર્સ યુઝર્સને એ પણ જણાવે છે કે ક્યારે લિંક્સ અસ્તિત્વમાં છે તેમને અલગ-અલગ સ્ટાઇલ અથવા અન્ડરલાઇન કરીને. આ રીતે, તેઓ સરળતાથી જરૂરી માહિતી મેળવી શકે છે.

Adding a table

Adding a table to an HTML page is simple, પરંતુ તમે તે કરો તે પહેલાં તમારે કેટલીક બાબતો ધ્યાનમાં લેવી જોઈએ. તમારા ટેબલનો પૃષ્ઠભૂમિ રંગ તમારા મુલાકાતીઓની નજરને પકડવા અને મહત્વપૂર્ણ માહિતી તરફ ધ્યાન દોરવા માટે મહત્વપૂર્ણ છે. તમે હેક્સ કલર કોડ્સ અથવા રંગના નામોનો ઉપયોગ કરીને ટેબલના હેડર એલિમેન્ટ અને ડેટા એલિમેન્ટ માટે અલગ રંગ સેટ કરી શકો છો. કોઈપણ રીતે, તમારું ટેબલ સરળતાથી જોઈ શકાશે.

તમે td એલિમેન્ટ સાથે ટેબલ હેડર અને ટેબલ ડેટા ઉમેરી શકો છો, જે વ્યક્તિગત વ્યાખ્યાયિત કરે છે “બોક્સ” સામગ્રી માટે. ટેબલ હેડર ઉમેરવું એ વેબપેજ પર ડેટા પ્રદર્શિત કરવા માટેનું પ્રથમ પગલું છે, અને જો તમે ઇચ્છો તો તમારે પ્રથમ ઉમેરવું જોઈએ. કોષ્ટકમાં ત્રણ પંક્તિના મથાળા પણ હોવા જોઈએ. એક હેડર ખાલી હોવું જોઈએ. જો તમારા ટેબલમાં કૉલમ છે, તમારે દરેક કૉલમ માટે પંક્તિ હેડર પણ બનાવવા જોઈએ.

તમે તમારા ટેબલ પર કૅપ્શન્સ પણ ઉમેરી શકો છો. કૅપ્શન એ વૈકલ્પિક ઘટક છે જે કોષ્ટકના હેતુનું વર્ણન કરે છે. કૅપ્શન્સ ઍક્સેસિબિલિટી માટે પણ મદદરૂપ છે. કોષ્ટકમાં ડેટાના જૂથોનું વર્ણન કરતા કોષો પણ હોઈ શકે છે. છેલ્લે, તમે પંક્તિઓ અને કૉલમના સમૂહને વ્યાખ્યાયિત કરવા માટે થીડ એલિમેન્ટ ઉમેરી શકો છો. તમે બંને ઘટકોનો એકસાથે અથવા અલગથી ઉપયોગ કરી શકો છો. તમે તેમને સંયોજનમાં પણ વાપરી શકો છો, પરંતુ કેપ્શન સૌથી મહત્વપૂર્ણ છે.

Adding a div

Adding a div to an HTML file allows you to add a section of your webpage without re-writing the whole page. ડિવ એલિમેન્ટ એ ટેક્સ્ટ માટે એક ખાસ કન્ટેનર છે, છબીઓ, અને અન્ય તત્વો. તમે તેને ગમે તે નામ આપી શકો છો અને તમારી જરૂરિયાતોને અનુરૂપ તેના લક્ષણો બદલી શકો છો. તમે તમારા પૃષ્ઠ પર div અને અન્ય ઘટકો વચ્ચે જગ્યા બનાવવા માટે વર્ગ અથવા માર્જિન પણ ઉમેરી શકો છો.

તમે div ની અંદર કોડ દાખલ કરવા માટે innerHTML એટ્રિબ્યુટનો પણ ઉપયોગ કરી શકો છો. આ પદ્ધતિ શબ્દમાળામાં બંધાયેલ કોડ સ્વીકારે છે, અને જો તે div ની અંદર નથી, સામગ્રી દૂર કરવામાં આવશે. તમારે આ રીતે ડિવમાં કોડ દાખલ કરવાનું ટાળવું જોઈએ, કારણ કે તે તમારી વેબસાઇટને ક્રોસ-સાઇટ સ્ક્રિપ્ટીંગ નબળાઈઓ માટે ખુલ્લી પાડી શકે છે. જો તમે JavaScript જેવી સ્ક્રિપ્ટીંગ ભાષાનો ઉપયોગ કરી રહ્યા છો, તમે innerHTML લક્ષણનો ઉપયોગ કરી શકો છો.

ડીવી એ એક મૂળભૂત HTML ટેગ છે જેનો ઉપયોગ દસ્તાવેજમાં જૂથ કોડ માટે થાય છે. તેમાં ફકરો હોઈ શકે છે, બ્લોક ક્વોટ, છબી, ઓડિયો, અથવા તો હેડર. તેની સ્થિતિ તમને પૃષ્ઠના વિવિધ વિભાગોમાં એકસમાન શૈલી અને ભાષા લાગુ કરવાની મંજૂરી આપે છે. સળંગ ઘટકોના જૂથો માટે સામાન્ય હોય તેવા સિમેન્ટિક્સને ચિહ્નિત કરવા માટે Divsનો શ્રેષ્ઠ ઉપયોગ થાય છે. જ્યારે તમે સમગ્ર પૃષ્ઠને ફરીથી લખ્યા વિના વિભાગમાં શૈલી ઉમેરવા માંગતા હો ત્યારે ડિવનો ઉપયોગ કરવો જોઈએ.