Students frequently turn to Computer Class 12 GSEB Solutions and GSEB Computer Textbook Solutions Class 12 Chapter 3 કમ્પોઝરનો ઉપયોગ કરી સરળ વેબ સાઇટની રચના for practice and self-assessment.
GSEB Computer Textbook Solutions Class 12 Chapter 3 કમ્પોઝરનો ઉપયોગ કરી સરળ વેબ સાઇટની રચના
પ્રશ્ન 1.
વ્યવસાયમાં વેબ સાઇટ શા માટે અગત્યનો ભાગ ભજવે છે?
ઉત્તરઃ
વ્યવસાયમાં વેબ સાઇટ (Web site in Business)
- આધુનિક યુગમાં કોઈ પણ વ્યવસાયમાં વેબ સાઇટ ખૂબ અગત્યનો ભાગ ભજવે છે. તે વિશ્વકક્ષાએ વ્યવસાયની રજૂઆતમાં મદદરૂપ બને છે.
- વેબ સાઇટની રચના શ્રેષ્ઠ તનિક દ્વારા કરવામાં આવી હોય તે જરૂરી છે, કારણ કે વ્યવસાયના વિકાસમાં, ઉત્પાદનના વેચાણમાં અને ખૂબ મોટી સંખ્યામાં ગ્રાહકોને આકર્ષવામાં વેબ સાઇટ મદદરૂપ બને છે.
- સારી વેબ સાઇટની મદદથી સંસ્થા મહત્તમ સંખ્યામાં મુલાકાતીઓ મેળવી શકે છે અને ઉચ્ચતમ નફો મેળવી શકે છે.
- વેબ સાઇટ એ વિશિષ્ટ હેતુ માટે પરસ્પર જોડાયેલાં વેબ પેજનો સમૂહ છે.
- વેબ સાઇટની રચના એવી હોવી જોઈએ, જેથી ઉપયોગકર્તાને માહિતીપ્રદ લાગે તથા ઉપયોગકર્તા વારંવાર તેની મુલાકાત લે.
પ્રશ્ન 2.
સારી વેબસાઇટના આયોજનની પ્રક્રિયામાં ધ્યાનમાં રાખવા જેવા મુદ્દાઓની યાદી બનાવો.
ઉત્તરઃ
સારી વેબ સાઇટના આયોજનની પ્રક્રિયામાં આ મુદ્દા ધ્યાનમાં રાખવા જોઈએ :
- હેતુ (Purpose),
- પ્રેક્ષકગણ (Audience),
- વિષયવસ્તુ (Content) અને
- માધ્યમ (Medium).
પ્રશ્ન 3.
વેબ સાઇટ બનાવવા માટેનો હેતુ શા માટે સ્પષ્ટપણે વ્યાખ્યાયિત થયેલ હોવો જોઈએ?
ઉત્તર:
હેતુ (Purpose)
- કોઈ પણ વેબ સાઇટનો હેતુ સ્પષ્ટપણે વ્યાખ્યાયિત થયેલો હોય તે જરૂરી છે. વેબ સાઇટની રચના કરતા પહેલા તેની વ્યાખ્યા અને ધ્યેય સ્પષ્ટ હોવાં જરૂરી છે.
- વેબ સાઇટની રચનાનો હેતુ વ્યક્તિઓના સમૂહને માહિતી પૂરી પાડવાનો, નવા ગ્રાહકોને આકર્ષવાનો કે ઉત્પાદનને ઑનલાઇન વેચવાનો હોઈ શકે.
- હેતુ નક્કી થયા પછી વેબ સાઇટના વિષયવસ્તુ (Content) અને રૂપરેખા(Layout)ને યોગ્ય રીતે વિકસાવી
શકાય.
પ્રશ્ન 4.
વેબ સાઇટની રચના કરતી વખતે અપેક્ષિત પ્રેક્ષકગણ વિશેનું જ્ઞાન કઈ રીતે મદદરૂપ બને છે?
ઉત્તર :
પ્રેક્ષકગણ (Audience)
- વેબ સાઇટના રચનાત્મક વિભાગનું કાર્ય શરૂ કરતા પહેલા અપેક્ષિત ઉપયોગકર્તા અંગેની જાણકારી હોવી જરૂરી છે. વેબ સાઇટમાં સામાન્ય અને વિસ્તૃત એમ બંને પ્રકારની માહિતી હોવી જોઈએ.
- વેબ સાઇટમાં યોગ્ય વિષયવસ્તુ અને રૂપરેખાના સમાવેશ માટે ઉપયોગકર્તાની અપેક્ષાઓ જાણવી જરૂરી છે. જો તેમ કરવામાં આવે, તો વેબ સાઇટ ઉપયોગી તથા સફળ બને છે.
- વેબ સાઇટની રચના સમયે ઉપયોગકર્તાના ઇન્ટરનેટ જોડાણની ઝડપ પણ ધ્યાનમાં લેવી જોઈએ. કારણ કે જો વેબ સાઇટ પર વિશાળ ચિત્રાત્મક ફાઈલો રાખવામાં આવી હોય, તો તે ડાઉનલોડ થવામાં લાંબો સમય લે છે. તેથી કેટલીક વાર ઉપયોગકર્તા સાઇટ છોડી દે છે. આથી વેબ સાઇટમાં જરૂરી હોય તેટલા પ્રમાણમાં જ ચિત્રો અને મલ્ટિમીડિયા ફાઈલનો સમાવેશ કરવો જોઈએ.
પ્રશ્ન 5.
વેબ સાઇટની રચના વખતે કયા વિષયવસ્તુનો સમાવેશ કરવો જોઈએ?
ઉત્તર:
વિષયવસ્તુ (Content)
- વેબ સાઇટમાં સંપૂર્ણ અને સુસંગત માહિતી હોવી જરૂરી છે.
- યોગ્ય અને સુસંગત માહિતી મૂકવાથી ઉપયોગકર્તાને સંતોષ પ્રાપ્ત થાય છે તથા વેબ સાઇટમાં તેનો રસ જળવાઈ રહે છે.
- વેબ સાઇટની રૂપરેખા એવી હોવી જોઈએ કે ઉપયોગકર્તા તેને ઉપયોગી એવી વિશિષ્ટ માહિતી સરળતાથી મેળવી શકે.
- વેબ સાઇટમાં લખાણના ફકરા હંમેશાં યોગ્ય લંબાઈના રાખવા જોઈએ. વેબ પેજ પર વિપુલ પ્રમાણમાં વિષયવસ્તુ દર્શાવવાનું હોય તો તેને લખાણના નાના નાના વિભાગોમાં વહેંચી નાખવું જોઈએ.
- વેબ સાઇટમાં નેવિગેશન શક્ય એટલું સરળ હોવું જોઈએ. એટલે કે એક પાના પરથી અન્ય પાના પરનું સ્થાનાંતરણ સરળ હોવું જોઈએ. જેથી ઉપયોગકર્તાને ખબર પડે કે તે ક્યાં છે અને હોમ પેજ પર કેવી રીતે પાછા ફરી શકાશે.
- સારા વિષયવસ્તુથી સભર વેબ સાઇટ ઉદ્યોગ કે અન્ય સંસ્થા માટે એક કીમતી સંસાધન બની રહે છે.
પ્રશ્ન 6.
વેબ સાઇટના હોમ પેજને શા માટે index. html નામ આપવું જોઈએ?
ઉત્તર:
પગલું 1 : સૌપ્રથમ આપણે હોમ પેજની રચના દ્વારા વેબ સાઇટની શરૂઆત કરીએ તે માટે કમ્પોઝર ખોલી નવું વેબ પેજ બનાવો. વેબ પેજમાં તમામ વિષયવસ્તુ અને ચિત્રોની ગોઠવણ કરવા માટે એક ખાનું (Cell) ધરાવતું કોષ્ટક ઉમેરીશું.
કોષ્ટક ઉમેરવા માટે Insert→ Table પસંદ કરો. જેથી આકૃતિ મુજબ વિન્ડો ખૂલશે, તેમાં એક સેલ પસંદ કરી OK બટન પર ક્લિક કરો.
યોગ્ય શીર્ષક આપી વેબ પેજનો સંગ્રહ કરો. હવે “index.html” નામ આપી ફાઈલનો સંગ્રહ કરો.
- હોમ પેજ એટલે શું? હોમ પેજને શા માટે index.html નામ આપવું જોઈએ?
જ્યારે ઉપયોગકર્તા વેબ બ્રાઉઝરના ઍડ્રેસ બારમાં URL સરનામું ઉમેરે, ત્યારે વેબ સાઇટના ખોલવામાં આવતા સૌપ્રથમ પાનાને હોમ પેજ કહે છે. તમામ ઉપલબ્ધ વસ્તુઓના વર્ગ- (Category)ની યાદી વેબ સાઇટના હોમ પેજમાં દર્શાવવામાં આવે છે. - સામાન્ય રીતે હોમ પેજને index.html નામ આપવામાં આવે છે. વેબ સર્વર પર દરેક વેબ સાઇટ ડિરેક્ટરીમાં બનાવવામાં આવે છે અને દરેક વેબ પેજ એ વેબ સર્વર પરની સ્વતંત્ર ફાઈલ છે.
- જ્યારે ઉપયોગકર્તા www.schoolplaza.com જેવું વેબ સાઇટનું કોઈ URL બ્રાઉઝરમાં લખે છે, ત્યારે તે ખોલવામાં આવનાર ફાઈલની સ્પષ્ટતા કરતો નથી, પરંતુ વેબ સર્વરને થોડું વિષયવસ્તુ દર્શાવવા માટે એક પૂર્વનિર્ધારિત ફાઈલની જરૂર પડે છે. આ પૂર્વનિર્ધારિત ફાઈલનું નામ index.html છે. આમ, જ્યારે ફાઈલના નામ વગર URL ઉમેરવામાં આવે છે, ત્યારે સર્વર પૂર્વનિર્ધારિત ફાઈલને ધ્યાનમાં લઈ તેને આપોઆપ દર્શાવે છે.
પ્રશ્ન 7.
કોષ્ટકની લાક્ષણિકતાઓ ગોઠવવા માટે કયા વિકલ્પ ઉપલબ્ધ છે ?
ઉત્તરઃ
કોષ્ટકની લાક્ષણિકતાઓ ગોઠવવા માટે નીચેના વિકલ્પો ઉપલબ્ધ હોય છે :
- Size,
- Border and Spacing,
- Table Alignment,
- Caption
- Background Color.
પ્રશ્ન 8.
કૂકી એટલે શું?
ઉત્તરઃ
કૂકી એટલે શું?
- ઉપયોગકર્તાના કમ્પ્યૂટરમાં સંગ્રહ કરવામાં આવતા ચલને ‘કૂકી’ કહે છે. તે માર્ગ યાદ રાખી મુલાકાતીના વધુ સારા અનુભવ માટે અથવા સાઇટની આંકડાવિષયક માહિતી માટે જરૂરી પસંદગીઓ, ખરીદી, વળતર અને અન્ય માહિતી પૂરી પાડે છે.
- જાવાસ્ક્રિપ્ટમાં document ઑબ્જેક્ટના Cookies ગુણધર્મ દ્વારા કૂકીનો ઉપયોગ કરી શકાય છે.
- કૂકીને વાંચી શકાય છે, રચી શકાય છે, સુધારી શકાય છે તથા દૂર પણ કરી શકાય છે.
પ્રશ્ન 9.
વેબસાઇટનું પ્રકાશન (Publishing) એટલે શું?
ઉત્તરઃ
વેબ સાઇટ પ્રકાશિત કરવી (Publishing a Web site)
- વેબ સાઇટને પ્રદર્શિત કે પ્રકાશિત કરવી એટલે કે ઉપયોગકર્તા સાઇટનાં વેબ પેજ, ચિત્રો અને સ્ટાઇલશીટનો ઉપયોગ કરી શકે તે માટે તેને વેબ સર્વર પર ખસેડવી. આ પ્રક્રિયાને સામાન્ય રીતે ‘અપલોડિંગ’ (Uploading) તરીકે ઓળખવામાં આવે છે.
- જો વેબ સર્વ૨ ૫૨ આપણું ખાતું હોય, તો વેબ સાઇટને અપલોડ કરી શકાય છે. ઇન્ટરનેટની સેવા પૂરી પાડનાર સંસ્થા (Internet Service Provider – ISP) વેબ સર્વર પર મર્યાદિત જગ્યા પૂરી પાડે છે.
- વ્યવસાયિક રીતે હોસ્ટિંગ પૂરું પાડતી સંસ્થાઓ પાસેથી જગ્યા ખરીદી પણ શકાય છે.
- વૈકલ્પિક રીતે, વેબ સાઇટને અપલોડ કરવા માટે ઘણા વેબ હોસ્ટ (Webhost) છે, જે ઉપયોગકર્તાને મર્યાદિત જગ્યા નિઃશુલ્ક પૂરી પાડે છે. આ નિઃશુલ્ક જગ્યા મર્યાદિત સમયમર્યાદા માટે પણ હોઈ શકે છે.
- આપણી વેબ સાઇટ પ્રકાશિત કરવા માટેનાં પગલાં :
પગલું 1 : સૌપ્રથમ index.html વેબ પેજ ખોલો અને File → Publish વિકલ્પ પસંદ કરો. આકૃતિ માં દર્શાવ્યા મુજબનું Publish Page ડાયલૉગ બૉક્સ ખૂલશે.
પગલું 2 : Publish Page ડાયલૉગ બૉક્સમાં આપેલ ગોઠવણના વિભાગોમાં નીચે દર્શાવેલ વિગતો પૂરી પાડો :
- Site name ફિલ્ડમાં વેબ સાઇટનું નામ ઉમેરો.
- Web Site Informationમાં “HTTP address of your homepage” ફિલ્ડ વેબ સાઇટનું પ્રત્યક્ષ સરનામું અથવા URL રજૂ કરે છે.
નોંધ : આપણે ઇન્ટરનેટ પર ડોમેઇનની નોંધણી કરાવી શકીએ છીએ. ઇન્ટરનેટ પર એવી ઘણી વેબ સાઇટ ઉપલબ્ધ છે, જેની મદદથી આપણે ડોમેઇન નામની નોંધણી કરી શકીએ છીએ. ઉદાહરણ તરીકે, સામાન્ય ખર્ચ ચૂકવી www.schoolplaza.com જેવું નામ મેળવી શકાય છે. - જગ્યા ખરીદવામાં આવી હોય, તો ISP કે વેબ હોસ્ટ દ્વારા પ્રદર્શિત કરવા માટે વિગતો પૂરી પાડવામાં આવે છે. પ્રકાશન માટેનું સરનામું ટાઇપ કરો. જો FTP દ્વારા જોડાણ કરવામાં આવ્યું હોય, તો FTP સરનામું ટાઇપ કરો. અહીં FTP યુઝરનેમ અને પાસવર્ડ આપો.
પગલું 3 : હવે, Publish બટન પર ક્લિક કરો. જેથી આકૃતિ માં દર્શાવ્યા મુજબનું ડાયલૉગ બૉક્સ ખૂલશે.
પગલું 4 : હવે નીચે દર્શાવેલ પગલાંને અનુસરો :
- જો પસંદ થયેલ ન હોય, તો ડ્રૉપડાઉન મેનૂમાંથી સાઇટનું નામ પસંદ કરો.
- Page Title ઉમેરો, તે index.htmlના શીર્ષકનો સંદર્ભ આપે છે.
- ફાઈલનું નામ આપો. અહીં index.html ફાઈલ ખૂલેલી હોવાથી આપોઆપ ફાઈલનું નામ લઈ લેશે.
- જો વેબ સાઇટની પેટાડિરેક્ટરીમાં હોવું જરૂરી હોય, તો તેને “Site Subdirectory” ફિલ્ડમાં ઉમેરો.
- ચિત્રો માટેની ડિરેક્ટરી નિશ્ચિત કરો.
- Publish બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનું Publishing ડાયલૉગ બૉક્સ ખૂલશે.
હવે, કમ્પોઝર (KompoZer) ફાઈલોને અપલોડ કરશે અને અંતમાં Pop-Up સંદેશ પ્રદર્શિત કરશે. અપલોડિંગ થઈ ગયા બાદ, બ્રાઉઝરમાં URL ટાઇપ કરી વેબ સાઇટને તપાસી લો.
પ્રશ્ન 10.
વેબ વિકાસ માટે ઉપલબ્ધ કેટલાંક ઓપન સોર્સ ટૂલ્સનાં નામ આપો.
ઉત્તર :
વેબ વિકાસ માટે ઉપલબ્ધ કેટલાંક ઓપન સોર્સ ટૂલ્સ નીચે દર્શાવેલ છે :
- કમ્પોઝર (KompoZer),
- અપ્ટાના સ્ટુડિયો (Aptana Studio),
- બ્લેંગ્રિફોન (Bluegriffon) અને
- અમાયા (Amaya).
Computer Class 12 GSEB Notes Chapter 3 કમ્પોઝરનો ઉપયોગ કરી સરળ વેબ સાઇટની રચના
વેબ સાઇટનું આયોજન (Planning for the Web site)
- વેબ સાઇટના વિકાસ માટે વિસ્તૃત આયોજન જરૂરી છે. આયોજન જેટલું બહેતર હશે, તેટલી જ વેબ સાઇટની ઉપયોગિતાના સંદર્ભે સફળતાની તક પણ વધુ રહેશે અને વેબ સાઇટ બનાવવા માટેનું ધ્યેય સિદ્ધ કરી શકાશે.
- સારી વેબ સાઇટ બનાવવા માટે આયોજનની પ્રક્રિયામાં ધ્યાનમાં રાખવા માટેના કેટલાક અગત્યના મુદ્દા નીચે મુજબ છે :
માધ્યમ (Medium)
- વધુ ને વધુ વ્યક્તિઓ હવે સ્માર્ટ ફોન અને ટૅબ્લેટ દ્વારા ઇન્ટરનેટનો ઉપયોગ કરી રહી છે. વેબ સાઇટની રૂપરેખાનું કદ કમ્પ્યૂટર, સ્માર્ટ ફોન અને ટૅબ્લેટ જેવાં તમામ સાધનોને અનુરૂપ હોવું જોઈએ.
- વેબ સાઇટની રૂપરેખા તૈયાર કરતી વખતે એ પણ ધ્યાનમાં રાખવું જોઈએ કે તેને મોઝિલા ફાયરફૉક્સ, ઑપેરા, ઇન્ટરનેટ એક્સ્પ્લોરર અને ગૂગલ ક્રોમ જેવા તમામ પ્રચલિત વેબ બ્રાઉઝરમાં યોગ્ય રીતે દર્શાવવામાં આવે.
પ્રયોગ 1
હેતુ : કમ્પોઝરનો ઉપયોગ કરી School Plaza નામની સરળ ઇ-કૉમર્સ વેબ સાઇટની રચના કરવી.
વેબ સાઇટનું આયોજન તથા વિષયવસ્તુ :
- આપણે “School Plaza” નામની એક સરળ ઇ-કૉમર્સ વેબ સાઇટની રચના કરવાની છે કે જે શાળામાં જતા વિદ્યાર્થીઓની જરૂરિયાતો પૂરી કરતી હોય.
- આ વેબ સાઇટ પર પુસ્તકો (Books), સ્ટેશનરી (Stationary), શાળાની બૅગ (School Bag), પાણીની બૉટલ (Water Bottle), નાસ્તાનો ડબ્બો (Lunch Box), ફોલ્ડર (Folder) અને તેના જેવી શાળાને સંબંધિત અન્ય વસ્તુઓ ઉપલબ્ધ હશે અને ઑર્ડર પણ આપી શકાશે.
- આપણે એક શૉપિંગ કાર્ટની પણ રચના કરીશું, જે ખરીદવામાં આવેલી તમામ વસ્તુઓની યાદી અને કુલ રકમ દર્શાવશે.
- આપણે આયોજન કરેલી વેબ સાઇટનું હોમ પેજ અને શૉપિંગ કાર્ટનો દેખાવ આકૃતિ અને માં દર્શાવ્યો છે.
આકૃતિમાં દર્શાવેલ વેબ સાઇટની રચના કરવા નીચે દર્શાવ્યા મુજબનાં પગલાં અનુસરો :
પગલું 2 : આપણે ઉમેરેલા કોષ્ટકને બૅકગ્રાઉન્ડ કલર આપવા કોષ્ટક પસંદ કરી ડબલ-ક્લિક કરો અથવા કોષ્ટક પર રાઇટ ક્લિક કરી “Table Cell Properties” વિકલ્પ પસંદ કરો. આમ કરવાથી આકૃતિ માં દર્શાવેલું Table Properties ડાયલૉગ બૉક્સ ખૂલશે.
અહીં Table અને Cells એમ બે વિભાગ (Tab) જોવા મળશે, જેના દ્વારા ઉપયોગકર્તા કોષ્ટક કે સ્વતંત્ર સેલના વિવિધ પાસા નિયંત્રિત કરી શકે છે. Table વિભાગ દ્વારા હરોળ તથા સ્તંભની સંખ્યા તથા કોષ્ટકની ઊંચાઈ અને પહોળાઈ (Size) પિક્સલ અથવા વિન્ડોના ટકાના સ્વરૂપે બદલી શકાય છે. ઉપરાંત કોષ્ટકને સીમારેખા (Border) આપવી કે નહીં, સેલ વચ્ચેની જગ્યા (Spacing) તથા સેલની કિનારી અને તેમાં આવેલ લખાણ વચ્ચેની જગ્યા (Padding) પણ ઇચ્છા મુજબ ગોઠવી શકે છે. તથા ગોઠવણ (Table Alignment), શીર્ષક (Caption) તથા બૅકગ્રાઉન્ડ કલર પણ આપી શકે છે.
આકૃતિ માં દર્શાવ્યા મુજબ તમારી ઇચ્છા મુજબ બૅકગ્રાઉન્ડ કલર પસંદ કરો.
પગલું 3 : હવે “School Plaza” લખાણ અને તેને સંબંધિત ચિત્ર ઉમેરવા માટે એક હરોળ અને બે સ્તંભ ધરાવતું અન્ય કોષ્ટક ઉમેરીએ.
કોષ્ટક ઉમેરવા Insert → Table વિકલ્પ પસંદ કરો. આકૃતિ માં દર્શાવ્યા મુજબ 1 × 2 કોષ્ટક પસંદ કરો અને OK બટન પર ક્લિક કરો.
પગલું 4 : હવે, કોષ્ટકમાં ડાબી બાજુના સેલમાં લખાણ ઉમેરો અને જમણી બાજુના સેલમાં ચિત્ર ઉમેરવા Insert → Image વિકલ્પ પસંદ કરો. જેથી આકૃતિ માં દર્શાવ્યા મુજબ ડાયલૉગ બૉક્સ ખૂલશે. અહીં ચિત્રનું સ્થાન શોધો અને ઇનપુટ બૉક્સમાં વૈકલ્પિક લખાણ ઉમેરો. જો વૈકલ્પિક લખાણ ઉમેરવા માંગતા ન હો, તો “Don’t use alternate text” રેડિયો બટન પસંદ કરો.
પગલું 5 : હવે, Dimension વિભાગ (Tab) પસંદ કરી તેમાં આવેલ Custom Size વિકલ્પ પસંદ કરો. ચિત્રને આખા સેલમાં દર્શાવવાનું હોવાથી આકૃતિ માં દર્શાવ્યા મુજબ ઊંચાઈ અને પહોળાઈ 100% રાખો.
આકૃતિ માં લખાણ તથા ચિત્ર સાથેનું વેબ પેજ દર્શાવેલ છે.
પગલું 6 : હવે, વર્ગો (Categories) અને નવાં ઉત્પાદનો (New Products) દર્શાવવા માટે બે હરોળ અને બે સ્તંભ ધરાવતું અન્ય કોષ્ટક ઉમેરીશું. અહીં પ્રથમ હરોળ(Row)ના સેલમાં “Categories” અને “New Products” લખાણ ટાઇપ કરો. Format → Text Colorનો ઉપયોગ કરી લખાણને યોગ્ય રંગ આપો. [જુઓ આકૃતિ]
પગલું 7 : હવે, બીજી હરોળમાં Categoriesની નીચે એક સ્તંભ અને વધુ હરોળ સાથેનું એક અન્ય કોષ્ટક ઉમેરો. આ કોષ્ટકમાં School Bags, Water Bottles, Lunch Box, Compass Box, Stationary અને Files n Folders માટેનું લખાણ અલગ અલગ હરોળ(Row)માં ઉમેરો તથા લખાણને યોગ્ય રંગ આપો.
અહીં લખાણને છૂટા પાડવા આડી લીટી આપવા Insert → Horizontal Line વિકલ્પનો ઉપયોગ કરો.
પગલું 8 : હવે, New Products સેલની નીચે છબી અને તેને સંબંધિત વિગતો ઉમેરવા ત્રણ હરોળ અને ત્રણ સ્તંભ સાથેનું કોષ્ટક ઉમેરો. વેબ પેજમાં ઉમેરેલ Categories અને કોષ્ટક આકૃતિ માં દર્શાવેલ છે.
પગલું 9 : હવે, પાનાના નીચેના ભાગમાં “About School Plaza”, “Feedback”, “Contact Us” અને “Site Map”ની વિગતો માટે અન્ય કોષ્ટકની રચના કરો અને લખાણ ઉમેરો. આ લખાણ પર લિંક બનશે.
નોંધ : અહીં આપણે લગભગ આખું હોમ પેજ બનાવી લીધું છે. જ્યારે ડાબી બાજુ કોઈ પણ, વર્ગ પર ક્લિક કરવામાં આવશે ત્યારે પાનાની ગોઠવણ સમાન રહેશે, પરંતુ તે વર્ગને અનુરૂપ ચિત્ર બદલાઈ જશે. આમ, હવે નવા વેબ પેજની રચના કરવાની જરૂર નથી. પણ હોમ પેજની જ એકથી વધુ નકલ કરી જરૂર મુજબ ફેરફાર કરી શકાશે.
પગલું 10 : હવે, Save As વિકલ્પ પસંદ કરી ફાઈલનો જુદાં જુદાં નામથી સંગ્રહ કરો. (દા. ત., waterbottles. html, school_bags.html અને lunchbox.html) હવે, જ્યારે કોઈ નિશ્ચિત વર્ગ ૫૨ ક્લિક કરવામાં આવે ત્યારે તેને સંબંધિત વેબ પેજ ખુલશે.
પગલું 11 : હવે, એક પછી એક વેબ પેજ ખોલો અને Format → Page Title Properties ascu-u ઉપયોગ કરી દરેક વેબ પેજનું શીર્ષક બદલો અને દરેક વેબ પેજ ખોલી તેના વર્ગને અનુરૂપ ચિત્રો ઉમેરો.
પગલું 12 : હવે આપણે હોમ પેજમાં ચિત્ર અને તેની વિગતો ઉમેરતા પહેલા જુદા જુદા વર્ગો માટે લિંકની રચના કરીએ કે જેથી જે-તે વર્ગ પર ક્લિક કરવાથી તેને સંબંધિત (Linked) વેબ પેજ ખુલશે.
પ્રથમ index.html ફાઈલ ખોલો તેમાં લિંકની રચના કરવા માટે લખાણ પસંદ કરો (દા. ત., School Bags) અને Insert → Link વિકલ્પ પસંદ કરો. જેથી આકૃતિ માં દર્શાવ્યા મુજબનું ડાયલૉગ બૉક્સ ખૂલશે. તેમાં Link Location વિકલ્પ હેઠળ જે ફાઈલ ખોલવાની છે તે દર્શાવો. અહીં school_bags.html પછી OK બટન પર ક્લિક કરો. આ જ પ્રમાણે Water Bottles, Lunch Box વગેરે વર્ગ માટે અનુક્રમે waterbottles.html, lunchbox.html વગેરે ફાઈલ પસંદ કરી લિંક સ્થાપો.
પગલું 13 : હવે, હોમ પેજમાં નવાં ઉત્પાદનોની વિગતો ઉમેરીએ. કોષ્ટકના દરેક સેલમાં વસ્તુનું ચિત્ર, વસ્તુનું નામ, કિંમત તથા Add to cart ચેક બૉક્સ અને વસ્તુના જથ્થા માટેનું ટેક્સ્ટ બૉક્સ ઉમેરીશું.
- અગાઉ ઉપયોગમાં લીધેલ પદ્ધતિ મુજબ ચિત્ર ઉમેરો, ઉત્પાદનનું નામ ઉમેરો અને કિંમત ઉમેરો. હવે ફૉર્મ ફિલ્ડ દ્વારા એક ચેક બૉક્સ ઉમેરો. ચેક બૉક્સ માટે b1 નામની “id” HTML લાક્ષણિકતા ઉમેરશું, જેનો પછીથી જાવાસ્ક્રિપ્ટમાં ઉપયોગ કરવામાં આવશે. તેની સામે “Add to Cart” નામનું લેબલ ઉમેરો.
- હવે, શરૂઆતની કિંમત 1 અને “q1”id સાથે ટેક્સ્ટ બૉક્સ ઉમેરો. તેની સામે “Quantity” લેબલ ઉમેરો. જ્યારે ઉપયોગકર્તા Add to cart ચેક બૉક્સ પસંદ કરશે, ત્યારે વસ્તુ અને તેના જથ્થાનો શૉપિંગ કાર્ટમાં સમાવેશ કરવામાં આવશે. ઉમેરવામાં આવેલ ઉત્પાદનોની વિગતો આકૃતિ માં દર્શાવી છે.
નોંધ : આ જ પ્રમાણે અન્ય વેબ પેજમાં ચિત્રો તથા વિગતો ઉમેરો અન્ય વેબ પેજ અહીં દર્શાવવામાં આવ્યા નથી.
પગલું 14 : હવે, આપણે પાનાના નીચેના ભાગમાં “Purchase” બટન ઉમેરીશું, જે આપણને બિલની વિગતો- (Bill details)નાં વેબ પેજ તરફ લઈ જશે.
- આ પાનું ખરીદવામાં આવેલ કુલ વસ્તુઓની સંખ્યા (Qty) અને કુલ ૨કમ (Total) દર્શાવે છે.
- બટનની onclick ઘટના સમયે કોડ લિસ્ટિંગ 3.1માં દર્શાવેલ જાવાસ્ક્રિપ્ટ ઉમેરીએ. તે oncart( ) વિધેયનો અમલ
કરશે અને ત્યારપછી oncart( ) વિધેય બિલ માટેનું વેબ પેજ દર્શાવશે.
કોડ લિસ્ટિંગ : યથાર્થતા માટેની જાવાસ્ક્રિપ્ટ (Continue)
પગલું 15 : જ્યારે ઉપયોગકર્તા Purchase બટન પર ક્લિક કરે છે, ત્યારે જાવાસ્ક્રિપ્ટ દ્વારા આકૃતિ માં દર્શાવ્યા મુજબ “bill.html” પાનું દર્શાવવામાં આવે છે.
- bill.html પાનામાં જાવાસ્ક્રિપ્ટ દ્વારા પસંદ કરેલ વસ્તુઓ માટે કુલ વસ્તુઓની સંખ્યા સાથે ચૂકવવાની કુલ ૨કમની ગણતરી કરવામાં આવે છે.
- કુલ રકમની ગણતરી કરવા માટેની જાવાસ્ક્રિપ્ટ કોડ લિસ્ટિંગ 3.2માં દર્શાવી છે.
કોડ લિસ્ટિંગ : કુલ ૨કમ શોધવા માટેની જાવાસ્ક્રિપ્ટ
- અહીં myfile( ) નામનું વિધેય વ્યાખ્યાયિત કરવામાં આવ્યું છે. આ વિધેય કૂકી પાસેથી વિગતો લઈ તેને ઍરેમાં સંગૃહીત કરે છે, ત્યારપછી વિગતોને parseFloat ( ) વિધેય દ્વારા અંકોમાં ફેરવી સરવાળો કરવામાં આવે છે. અંતમાં સરવાળાને દર્શાવવામાં આવે છે.
- અંતમાં, ઉપયોગકર્તા બિલના વેબ પેજ પર આવેલા Proceed to Checkout બટન પર ક્લિક કરશે. આ સમયે જો ઉપયોગકર્તાએ લૉગ-ઇન કરેલું નહિ હોય, તો તેને તે વિશે પૂછવામાં આવશે અને જો ઉપયોગકર્તાની નોંધણી થયેલ ન હોય, તો તેને નવું ખાતું (Account) બનાવવા માટે કહેવામાં આવશે. આ માટે આગળના પ્રકરણમાં ચર્ચા કર્યા મુજબ નોંધણી માટેનું ફૉર્મ (Registration Form) બનાવી શકાય છે.
- સામાન્ય રીતે આ પ્રકારની વેબ સાઇટના વ્યવસ્થાપન માટે ડેટાબેઝની રચના કરવાની જરૂર પડે છે; જેમાં ઉત્પાદન, નોંધણી થયેલાં ઉપયોગકર્તાઓ, લૉગ-ઇન નામ, પાસવર્ડ અને અન્ય સંબંધિત વિગતોનો સંગ્રહ કરવામાં આવ્યો હોય છે.
વેબ વિકાસ માટેના અન્ય ઓપન સોર્સ ટૂલ્સ (Other Open Source Web Development Tools)
કમ્પોઝર એ વેબ વિકાસ માટેનું એક નિઃશુલ્ક અને ઓપન સોર્સ IDE છે. કમ્પોઝરની જેમ જ વેબ વિકાસ માટેના ઘણા નિઃશુલ્ક ટૂલ્સ ઇન્ટરનેટ પર ઉપલબ્ધ છે. તેમાંના કેટલાક ઓપન સોર્સ ટૂલ્સ નીચે દર્શાવેલ છે :
અપ્ટાના સ્ટુડિયો (Aptana Studio)
અપ્ટાના સ્ટુડિયોની મુખ્ય ખાસિયતો નીચે દર્શાવેલ છે :
- તે એક સક્ષમ ઓપન સોર્સ IDE (Integrated Development Environment) છે.
- તે HTML, CSS, JavaScript, Ruby, PHP Python અને અન્ય ઘણી ભાષાઓને સમર્થન આપે છે.
- તે વિપુલ સંખ્યામાં વધારાના પ્લગ-ઇન સાથે આપવામાં આવે છે.
- અષ્ટાના સ્ટુડિયો 2.0.5નો ઉપયોગ HTML, CSS અને JavaScriptની મદદથી વેબ વિનિયોગના વિકાસ માટે થાય છે.
- www.aptana.com વેબ સાઇટ પરથી તે સરળતાથી ડાઉનલોડ કરી શકાય છે.
- તેની મદદથી PHP Rails, Ruby કે Webમાં પ્રોજેક્ટ બનાવી શકાય છે.
અપ્ટાના સ્ટુડિયોનો દેખાવ આકૃતિ માં તથા તેમાં લખેલ HTML કોડ આકૃતિ માં દર્શાવેલ છે.
બ્લેંગ્રિફોન (BlueGriffon)
બ્લૂગ્રિફોનની મુખ્ય ખાસિયતો નીચે જણાવ્યા મુજબની છે :
- તે એક WYSIWYG (What You See Is What You Get) પ્રકારનું HTML એડિટર છે.
- તેને www.bluegriffon.org પરથી સરળતાથી ડાઉનલોડ કરી શકાય છે.
- તે અંગ્રેજી, ડચ, જર્મન, ચાઇનીઝ અને અન્ય ઘણી ભાષાઓનું સમર્થન કરે છે.
- વેબ ધારા-ધોરણના ગહનતનિકી જ્ઞાનના અભાવમાં પણ આકર્ષક વેબ સાઇટની રચના કરી શકાય,
તેવું સરળ ઇન્ટરફેસ પૂરી પાડતો એક સાહજિક વિનિયોગ છે. બ્લૂગ્રિફોનની આવૃત્તિ 1.6.2નો ઇન્ટરફેસ આકૃતિ માં દર્શાવ્યો છે. તેમાં ટૂલ્સનો ઉપયોગ કરી સરળ ફૉર્મની રચના કરવામાં આવી છે.
અમાયા (Amaya)
અમાયાની મુખ્ય લાક્ષણિકતાઓ નીચે દર્શાવ્યા મુજબ છે :
- World Wide Web Consortium (W3C) દ્વારા વિકસિત અમાયા એક નિઃશુલ્ક, ઓપન સોર્સ WYSIWYG પ્રકારનું વેબ એડિટર છે.
- તેની શરૂઆત HTML/CSS એડિટર તરીકે કરવામાં આવી હતી અને હવે તે ઘણી XML આધારિત સિસ્ટમ માટેના એડિટર તરીકે વિકાસ પામ્યું છે.
- www.w3.org/Amaya પરથી તેને સરળતાથી ડાઉનલોડ કરી શકાય છે.
- આકૃતિ માં અમાયા દ્વારા રચિત વેબ પેજ દર્શાવ્યું છે. વેબ પેજની નીચે જ તેના સોર્સને પણ જોઈ શકાય છે.
