Computer Class 12 GSEB Solutions Chapter 1 કમ્પોઝરનો ઉપયોગ કરી HTML ફૉર્મની રચના

Students frequently turn to Computer Class 12 GSEB Solutions and GSEB Computer Textbook Solutions Class 12 Chapter 1 કમ્પોઝરનો ઉપયોગ કરી HTML ફૉર્મની રચના for practice and self-assessment.

GSEB Computer Textbook Solutions Class 12 Chapter 1 કમ્પોઝરનો ઉપયોગ કરી HTML ફૉર્મની રચના

પ્રશ્ન 1.
ફૉર્મ શું છે? HTMLમાં ફૉર્મની રચના કરવા માટેના ઘટકોની યાદી બનાવો.
ઉત્તરઃ
HTML ફૉર્મ તથા ફૉર્મના ઘટકો (HTML Form and Form Elements)

• ઇન્ટરનેટના ઉપયોગથી આજકાલ અનેક પ્રવૃત્તિઓ ઑનલાઇન બની છે. જો તમે કોઈ વેબ સાઇટ પર મેઇલ- એકાઉન્ટ ખોલવા કે નોંધણી કરવા ઇચ્છતા હોવ, તો તે માટે તમારે તમારી અંગત વિગતો દાખલ કરવી પડે છે.
• વેબ સાઇટનો મુલાકાતી પોતાની વિગતો દાખલ કરવા માટે HTML ફૉર્મની મદદ લે છે.
• ફૉર્મ મુલાકાતીની વિગતો દાખલ કરવા વિશે સંવાદન (Interactivity) અને નિયંત્રણ પૂરા પાડે છે.
• આપણે એવું કહી શકીએ કે ફૉર્મ એક સંગ્રાહક (Container) છે, જેનો ઉપયોગ ઉપયોગકર્તા પાસેથી જુદા જુદા પ્રકારની વિગતો મેળવવા માટે કરવામાં આવે છે.
• HTML ફૉર્મની રચના કરવા માટે વિવિધ ઘટકોનો ઉપયોગ થાય છે, જેમાંના મુખ્ય ઘટકો નીચે મુજબ છે :
  1. ફૉર્મ (Form)
  2. નિવેશ ઘટક (Input Element)
  3. ટેક્સ્ટ એરિયા ઘટક (Textarea Element)
  4. સિલેક્ટ અને ઑપ્શન ઘટક (Select and Option Element)

પ્રશ્ન 2.
HTML ફૉર્મમાં નિવેશ માટેના ઘટકોનો ઉપયોગ જણાવો. ઇનપુટ ટેંગની વિવિધ લાક્ષણિકતા વિશે લખો.
ઉત્તરઃ
નિવેશ ઘટક (Input Element)

• ફૉર્મમાં રેડિયો બટન, ટેક્સ્ટ બૉક્સ અને ચેક બૉક્સ જેવાં વિવિધ ક્ષેત્ર (Field) ઉમેરવા માટે નિવેશ ઘટકોનો ઉપયોગ થાય છે.
• નિવેશ ઘટકનો અમલ <input> </input> અથવા માત્ર <input> ટૅગથી થાય છે.
• <input> ટૅગનો ઉપયોગ type, name અને value જેવી લાક્ષણિકતાઓ સાથે કરવામાં આવે છે.

લાક્ષણિકતા	ઉપયોગ
type	ફૉર્મમાં ઉમેરવામાં આવનાર ફિલ્ડની સ્પષ્ટતા type લાક્ષણિકતા દ્વારા કરવામાં આવે છે.
name	ફૉર્મમાં આવેલા ફિલ્ડને નામ આપવા માટે name લાક્ષણિકતાનો ઉપયોગ કરવામાં આવે છે.
value	ફૉર્મમાં ફિલ્ડને પૂર્વનિર્ધારિત કિંમત સાથે દર્શાવવા માટે value લાક્ષણિકતાનો ઉપયોગ કરવામાં આવે છે.

કોષ્ટક 1.1માં Input ટૅગ સાથે ઉપયોગમાં લેવામાં આવતી વિવિધ type લાક્ષણિકતા, તેમની સમજૂતી તથા ઉદાહરણ દર્શાવેલ છે.

કોષ્ટક 1.1 : Input ટૅગ સાથે ઉપયોગમાં લેવામાં આવતા type લાક્ષણિકતાની કિંમતો

Type	સમજૂતી
Radio	ફૉર્મમાં રેડિયો બટનની રચના કરે છે. રેડિયો બટનના જૂથમાંથી એક સમયે માત્ર કોઈ પણ એક રેડિયો બટન પસંદ કરી શકાય છે. સામાન્ય રીતે વિકલ્પોનાં જૂથમાંથી એક વિકલ્પ પસંદ કરવા માટે રેડિયો બટનનો ઉપયોગ કરવામાં આવે છે. ઉદાહરણ : <INPUT TYPE=“radio” NAME=“var” VALUE=“txt”>
Checkbox	ફૉર્મમાં ચેક બૉક્સની રચના કરે છે. એકસાથે એકથી વધુ ચેક બૉક્સની પસંદગી શક્ય છે. આપેલ વિકલ્પોનાં જૂથમાં એકથી વધુ વિકલ્પ પસંદ કરવા માટે ચેક બૉક્સનો ઉપયોગ કરવામાં આવે છે. ઉદાહરણ : <INPUT TYPE=”checkbox” NAME=“var” VALUE=“txt”>
Text	ફૉર્મમાં લખાણ ઉમેરવા માટે ટેક્સ્ટ ફિલ્ડની રચના કરે છે. ટેક્સ્ટ ફિલ્ડમાં ઉપયોગકર્તા ઇચ્છિત કોઈ પણ વિગતો ઉમેરી શકે છે. ઉદાહરણ : <INPUT TYPE=“text” NAME=“var” VALUE=“txt”>
Password	ફૉર્મમાં પાસવર્ડ ફિલ્ડની રચના કરે છે. આ ફિલ્ડ ટેક્સ્ટ ફિલ્ડ સમાન છે, પરંતુ તેમાં ઉમેરવામાં આવેલ અક્ષરો ઉપયોગકર્તા સમક્ષ દર્શાવવામાં આવતા નથી. તેને બદલે અક્ષરોનું અવાચ્ય સ્વરૂપમાં રૂપાંતરણ કરવામાં આવે છે. ઉદાહરણ : <INPUT TYPE=”password” NAME=”var”>
Submit	ફૉર્મમાં સબમિટ બટનની રચના કરે છે. સબમિટ બટન પર ક્લિક કરવામાં આવે, ત્યારે ફૉર્મમાં દાખલ કરવામાં આવેલ વિગતો ફૉર્મ ઘટક સાથે ઉપયોગમાં લેવામાં આવેલ action લાક્ષણિકતાને આપવામાં આવેલ ફાઈલ તરફ મોકલવામાં આવે છે. ઉદાહરણ : <INPUT TYPE=“submit” VALUE=”label”>
Reset	ફૉર્મમાં રિસેટ બટનની રચના કરે છે. રિસેટ બટન પર ક્લિક કરવાથી ફૉર્મમાં દાખલ કરવામાં આવેલ વિગતો દૂર કરી ફૉર્મને પૂર્વનિર્ધારિત કિંમતો સાથે દર્શાવવામાં આવે છે. ઉદાહરણ : <INPUT TYPE=“reset” VALUE=”label”>

HTML ફૉર્મ તથા ફૉર્મના ઘટકો (HTML Form and Form Elements)

• ઇન્ટરનેટના ઉપયોગથી આજકાલ અનેક પ્રવૃત્તિઓ ઑનલાઇન બની છે. જો તમે કોઈ વેબ સાઇટ પર મેઇલ- એકાઉન્ટ ખોલવા કે નોંધણી કરવા ઇચ્છતા હોવ, તો તે માટે તમારે તમારી અંગત વિગતો દાખલ કરવી પડે છે.
• વેબ સાઇટનો મુલાકાતી પોતાની વિગતો દાખલ કરવા માટે HTML ફૉર્મની મદદ લે છે.
• ફૉર્મ મુલાકાતીની વિગતો દાખલ કરવા વિશે સંવાદન (Interactivity) અને નિયંત્રણ પૂરા પાડે છે.
• આપણે એવું કહી શકીએ કે ફૉર્મ એક સંગ્રાહક (Container) છે, જેનો ઉપયોગ ઉપયોગકર્તા પાસેથી જુદા જુદા પ્રકારની વિગતો મેળવવા માટે કરવામાં આવે છે.
• HTML ફૉર્મની રચના કરવા માટે વિવિધ ઘટકોનો ઉપયોગ થાય છે, જેમાંના મુખ્ય ઘટકો નીચે મુજબ છે :
  1. ફૉર્મ (Form)
  2. નિવેશ ઘટક (Input Element)
  3. ટેક્સ્ટ એરિયા ઘટક (Textarea Element)
  4. સિલેક્ટ અને ઑપ્શન ઘટક (Select and Option Element)

પ્રશ્ન 3.
HTML ફૉર્મમાં ટેક્સ્ટ એરિયા ઘટકનો હેતુ જણાવો.
ઉત્તર:
HTML ફૉર્મમાં એક કરતાં વધુ લીટીનું લખાણ ઉમેરવા માટે ટેક્સ્ટ એરિયા ઘટકનો ઉપયોગ થાય છે.

• ટેક્સ્ટ એરિયા પ્રકારના ઘટકમાં અમર્યાદિત અક્ષરો ઉમેરી શકાય છે.
• ટેક્સ્ટ એરિયા ઘટક ફૉર્મમાં ઉમેરવા માટે

• ટેક્સ્ટ એરિયા ઘટકનું કદ rows અને cols લાક્ષણિકતા દ્વારા નક્કી કરવામાં આવે છે.

પ્રશ્ન 4.
સિલેક્ટ અને ઑપ્શન વિકલ્પ વિશે જણાવો.
ઉત્તર:
સિલેક્ટ ઘટક : HTML ફૉર્મમાં ડ્રૉપડાઉન યાદીની રચના કરવા માટે select ઘટકનો ઉપયોગ થાય છે.

• ડ્રૉપડાઉન મેનૂની રચના કરવા માટે

ઑપ્શન ઘટક : સિલેક્ટ ટૅગ દ્વારા બનાવવામાં આવતા ડ્રૉપડાઉન મેનૂમાં વિવિધ કિંમતો ઉમેરવા માટે ઑપ્શન ટૅગનો ઉપયોગ થાય છે.

• મેનૂ ઘટકોની રચના કરવા માટે

• ડ્રૉપડાઉન મેનૂમાંથી કોઈ ચોક્કસ વિકલ્પને પૂર્વનિર્ધારિત રીતે પસંદ થયેલ દર્શાવવા માટે selected લાક્ષણિકતાનો ઉપયોગ થાય છે.

પ્રશ્ન 5.
કમ્પોઝર વિન્ડોમાં દર્શાવતા જુદા જુદા ટૂલબારની યાદી બનાવો.
ઉત્તરઃ
કમ્પોઝરનો પરિચય (Introduction to KompoZer)

• HTML ટૅગનો ઉપયોગ કરી ફૉર્મની રચના કરવી તે એક કંટાળાજનક પ્રક્રિયા છે. IDE(Integrated Development Environment)નો ઉપયોગ કરવો તે આ માટેની એક સરળ રીત છે.
• IDE એક એવો સૉફ્ટવેર વિનિયોગ છે, જે પ્રોગ્રામરને સૉફ્ટવેરનો વિકાસ કરવા માટેની સંપૂર્ણ સુવિધા પૂરી પાડે છે. તે GUI (Graphical User Interface), ટેક્સ્ટ / કોડ- એડિટર (Text/Code editor), કંપાઇલર કે ઇન્ટરપ્રિટર (Compiler/Interpreter) અને ડિબગર (Debugger) પૂરા પાડે છે.
• કમ્પો૨ (KompoZer), એક્લિપ્સ (Eclipse), જેબિલ્ડર (Quilder) અને નેટબિન્સ (Netbeans) એ કેટલાક ઓપન સોર્સ IDE(Integrated Development Environment)નાં ઉદાહરણ છે.

કમ્પોઝર (KompoZer)

• કમ્પોઝર એ વેબ વિકાસ માટેનું એક નિઃશુલ્ક અને ઓપન સોર્સ IDE છે.
• કમ્પોઝર http://www.kompozer.net પરથી ડાઉનલોડ કરી શકાય છે.
• કમ્પોઝરની મુખ્ય લાક્ષણિકતાઓ નીચે મુજબ છે :
  1. તે WYSIWYG (What You See Is What You Get) તરીકે ઓળખાતા માધ્યમ સાથે વેબ પેજ એડિટર પૂરું પાડે છે.
  2. તે એક સંપૂર્ણ વેબ ઑથરિંગ સિસ્ટમ છે, જે વેબ પેજના વિકાસ અને વેબ ફાઈલના વહીવટનું સંચાલન કરે છે.
  3. કમ્પોઝર દ્વારા વેબ પેજની રચના કરવી એ ઝડપી અને સરળ કાર્ય છે.
  4. કમ્પોઝરમાં ઉપયોગકર્તા સોર્સ કોડનો ઉપયોગ કરીને તથા તેમાં સુધારા કરીને વેબ પેજમાં ફેરફાર પણ કરી શકે છે.
  5. કમ્પોઝરમાં સાઇટ મૅનેજરનો સમાવેશ કરવામાં આવ્યો હોય છે, જે સ્થાનિક (Local) અને દૂરસ્થિત (Remote) સર્વર એમ બંને સ્થાને રહેલ ફાઈલોનો ઝડપી ઉપયોગ પૂરો પાડે છે.
  6. કમ્પોઝરનો ઉપયોગ કરી વેબ પેજ તથા તેને સંલગ્ન ફાઈલોને દૂરસ્થિત સર્વર (Remote Server) પર અપલોડ કરી શકાય છે.
  7. કમ્પોઝર કેસ્કેન્ડિંગ સ્ટાઇલશીટ (CSS) દ્વારા સ્ટાઇલ(Style)ને પણ સમર્થન પૂરું પાડે છે.
     ચાલો હવે આપણે સૌપ્રથમ કમ્પોઝર ઇન્ટરફેસનો અભ્યાસ કરીએ.
• કમ્પોઝરને તેના આઇકોનની મદદથી શરૂ કરો. જુદા જુદા ટૂલબાર અને સ્ટેટસ બાર (જો દેખાતા ન હોય, તો) દર્શાવવા માટે View → Show/Hide વિકલ્પ પર ક્લિક કરો. અહીં Composition Toolbar, Format Toolbarl, Format Toolbar2, Edit Mode Toolbar અને Statusbar એ તમામ વિકલ્પોને પસંદ કરો, Site Manager અને Ruler વિકલ્પને પણ પસંદ કરો, જેથી વિન્ડો આકૃતિ પ્રમાણે દેખાશે.

આકૃતિ માં દર્શાવેલ કમ્પોઝર ઇન્ટરફેસના મુખ્ય ઘટકો નીચે મુજબ છે :

(1) મેનૂ બાર (Menubar) : તે વિન્ડોની ઉપરના ભાગમાં હોય છે. તેમાં File, Edit, View, Insert, Format, Table, Tools અને Help જેવા વિકલ્પો હોય છે.

(2) કમ્પોઝિશન ટૂલબાર (Composition Toolbar) : મેનૂ બારની નીચે કમ્પોઝિશન ટૂલબાર હોય છે. નવી ફાઈલની રચના કરવા, ફાઈલ ખોલવા, ફાઈલનો સંગ્રહ કરવા તથા વેબ સાઇટને પ્રકાશિત (Publish) કરવા માટે કમ્પોઝિશન ટૂલબારનો ઉપયોગ કરવામાં આવે છે.

(3) ફૉર્મેટ ટૂલબાર 1 અને ફૉર્મેટ ટૂલબાર 2 (Format Toolbar1 and Format Toolbar2) : કમ્પોઝિશન ટૂલબારની નીચે ફૉર્મેટ ટૂલબાર 1 તથા ફૉર્મેટ ટૂલબાર 2 હોય છે. લખાણની ગોઠવણી કરવા, નિશાની (Bullet) અને અનુક્રમ (Numbering) ઉમેરવા તથા ગોઠવણીને લગતાં અન્ય કાર્ય કરવા માટે ફૉર્મેટ ટૂલબાર 1 અને ફૉર્મેટ ટૂલબાર 2નો ઉપયોગ કરવામાં આવે છે.

(4) સાઇટ મૅનેજર (Site Manager) : વિન્ડોની મધ્યમાં ડાબી બાજુ સાઇટ મૅનેજર વિભાગ હોય છે. સાઇટ મૅનેજર એ સાઇટમાં અથવા એકથી વધુ સાઇટ વચ્ચેના નેવિગેશન માટે ઉપયોગમાં લઈ શકાય છે. Close બટન પર ક્લિક કરીને અથવા તો F9 કી દબાવીને સાઇટ મૅનેજરના વિભાગને બંધ કરી શકાય છે.

(5) ખાલી વેબ પેજ અથવા પેજ પેન (Page Pane) : વિન્ડોની મધ્યમાં આવેલ પેજ પેન એક ખાલી અને નામ વગરનું (Untitled) વેબ પેજ દર્શાવે છે.

(6) એડિટ મોડ ટૂલબાર (Edit Mode Toolbar) : વિન્ડોની નીચે આવેલા જમણી બાજુના ભાગમાં ત્રણ મોડ સાથેનો એડિટ મોડ ટૂલબાર આપવામાં આવે છે. જેમાં HTML Tags, Source અને Preview એમ ત્રણ મોડ હોય છે, જે સુધારા માટેની સુવિધા પૂરી પાડે છે.

• પ્રિવ્યૂ મોડ બ્રાઉઝરમાં જોઈ શકાય તે પ્રકારનો પાનાનો દેખાવ દર્શાવે છે. તેમાં સ્ક્રિપ્ટનો અમલ કરવામાં આવતો નથી તથા લિન્કનો અમલ પણ કરી શકાતો નથી.
• નૉર્મલ વ્યૂ એ પ્રિવ્યૂ મોડ જેવો જ છે. આ મોડમાં કોષ્ટકની સીમા રેખા દર્શાવવામાં આવે છે.
• HTML ટૅગ વ્યૂ જેઓ HTMLથી પરિચિત છે તેવા ઉપયોગકર્તાને મદદરૂપ બને છે. અહીં તમામ ટૅગની શરૂઆત દર્શાવવા માટે પીળા રંગના નિશાનનો ઉપયોગ કરવામાં આવે છે. આ નિશાન પર ક્લિક કરવાથી ઘટકના સમગ્ર વિભાગને પસંદ કરી હાઇલાઇટ કરી શકાય છે.

(7) Design, Split અને Source વિભાગ : પેજ પેનની ડાબી બાજુ Design, Split અને Source વિભાગો (tab) દર્શાવેલા હોય છે. વેબ પેજની રૂપરેખા તૈયાર કરવા Design વિભાગનો ઉપયોગ કરવામાં આવે છે. વર્તમાન ઘટકના HTML સોર્સને Split વિભાગમાં દર્શાવવામાં આવે છે. HTML કોડની તમામ વિગતો Source વિભાગમાં દર્શાવવામાં આવે છે.

(8) સ્ટેટસ બાર (Statusbar) : વિન્ડોના સૌથી નીચેના ભાગમાં સ્ટેટસ બાર હોય છે. જ્યારે પાનામાં કોઈ પણ વસ્તુ પર ક્લિક કરવામાં આવે છે ત્યારે તેનું માળખું સ્ટેટસ બારમાં દર્શાવવામાં આવે છે.

પ્રશ્ન 6.
ફૉર્મની બે લાક્ષણિકતાઓ કઈ છે? સમજાવો.
ઉત્તરઃ
ફૉર્મ (Form)

• HTML ફૉર્મની રચના કરવા માટે form ઘટકનો ઉપયોગ કરવામાં આવે છે. તે ફૉર્મમાં સમાવિષ્ટ તમામ ઘટકોના સંગ્રાહક તરીકે કાર્ય કરે છે.
• ફૉર્મ ઘટકનો અમલ કરવા <form> … </form> ટૅગનો ઉપયોગ થાય છે.
• ઉદાહરણ :

• form ધટક action અને method નામની બે લાક્ષણિકતાઓ(Attributes)નો ઉપયોગ કરે છે, જે નીચે મુજબ છે :

લાક્ષણિકતા	ઉપયોગ
action	– ફૉર્મ સબમિટ કરવામાં આવે ત્યારે તેની વિગતો કયા સ્થાને મોકલવી છે તે સ્પષ્ટ કરવા આ લાક્ષણિકતાનો ઉપયોગ થાય છે. – તે કિંમત તરીકે ફાઈલનું નામ સ્વીકારે છે. – ફૉર્મમાં વિગતો ઉમેર્યા પછી જ્યારે ઉપયોગકર્તા સબમિટ બટન પર ક્લિક કરે છે, ત્યારે આ ફાઈલ ખોલવામાં આવે છે.
method	– વિગતો મોકલતી વખતે આ લાક્ષણિકતાના ઉપયોગ દ્વારા HTTP પદ્ધતિ સ્પષ્ટ કરવામાં આવે છે. – તે GET અને POST એમ બે કિંમતો સ્વીકારી શકે છે. – GET પદ્ધતિ ફૉર્મમાંથી વિગતો મેળવીને URLના અંતમાં ઉમેરી સર્વરને મોકલી આપે છે. GET પદ્ધતિ એક સમયે માત્ર મર્યાદિત માહિતી મોકલવાની અનુમતિ આપે છે. – POST પદ્ધતિમાં વિગતોને HTTP ટ્રાન્ઝેક્શન દ્વારા બ્લૉક સ્વરૂપે મોકલવામાં આવે છે. POST પદ્ધતિમાં વિગતોની લંબાઈ બાબતે કોઈ મર્યાદા નથી.

નોંધ : method લાક્ષણિકતાની પૂર્વનિર્ધારિત કિંમત GET છે.

Computer Class 12 GSEB Notes Chapter 1 કમ્પોઝરનો ઉપયોગ કરી HTML ફૉર્મની રચના

HTML ફૉર્મ તથા ફૉર્મના ઘટકો (HTML Form and Form Elements)
ટેક્સ્ટ એરિયા ઘટક (Textarea Element)

• ટેક્સ્ટ એરિયા ઘટક એકથી વધુ લીટીનું લખાણ નિવેશ (Input) કરવાની સુવિધા પૂરી પાડે છે.
• ટેક્સ્ટ એરિયા ઘટકનો અમલ કરવા <textarea> … </textarea> ટૅગનો ઉપયોગ કરવામાં આવે છે.
• નોંધ (Comment), અહેવાલ (Report) કે લાંબી સમજૂતી (Long description) ઉમેરવા માટે textarea ઘટકનો ઉપયોગ થાય છે.
• ટેક્સ્ટ એરિયા ઘટકનું કદ rows and cols લાક્ષણિકતાઓ દ્વારા બદલી શકાય છે.
• ઉદાહરણ :

<form method=“post” action=“comment.html">
Input your comments : <br/> <textarea name=“comments" rows=“4" cols=“20">
Your comments here ...
</textarea>
</form>

સિલેક્ટ અને ઑપ્શન ઘટક (Select and Option Element)

• ફૉર્મમાં ડ્રૉપડાઉન યાદી (Dropdown list) કે મેનૂની રચના કરવા માટે select ઘટકનો ઉપયોગ કરવામાં આવે છે.
• ડ્રૉપડાઉન મેનૂની રચના કરવા માટે <select> … </select> ટૅગનો ઉપયોગ કરવામાં આવે છે.
• મેનૂના ઘટકની રચના કરવા માટે <option> … </option> ટૅગનો ઉપયોગ કરવામાં આવે છે.
• ઉદાહરણ :

<select>
<option value=“Ahmedabad">Ahmedabad</option>
<option value=“Rajkot">Rajkot</option>
<option value=“Surat”>Surat</option>
</select>

પ્રયોગ 1
હેતુ : HTML કોડની મદદથી નોંધણી માટેનું ફૉર્મ તૈયાર કરવું.
પગલું 1 : સૌપ્રથમ કોઈ પણ ટેક્સ્ટ એડિટરમાં કોડ લિસ્ટિંગ 1.1માં દર્શાવ્યા મુજબ HTML કોડ ટાઇપ કરો.
કોડ લિસ્ટિંગ 1.1 : નોંધણી માટેનું નમૂનારૂપ ફૉર્મ બનાવવા માટેનો HTML કોડ



પગલું 2 : હવે આ ફાઈલને registrationform.html નામથી સેવ કરો.

પગલું 3 : કોઈ પણ વેબ બ્રાઉઝરમાં registrationform.html ફાઈલને ખોલો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ આઉટપુટ જોવા મળશે.

કમ્પોઝરનો પરિચય (Introduction to KompoZer)
નવી ફાઈલ બનાવવી (Creating a New File)

• કમ્પોઝરમાં નવી ફાઈલ બનાવવા માટે સૌપ્રથમ કમ્પોઝર શરૂ કરો. ત્યારબાદ મેનૂ બારમાં File → New વિકલ્પ પર ક્લિક કરો. આમ કરવાથી આકૃતિ માં દર્શાવ્યા મુજબ “Create a new document or template” શીર્ષક સાથે એક ડાયલૉગ બૉક્સ ખૂલશે.
• આ ડાયલૉગ બૉક્સમાં આપેલ વિકલ્પો પૈકી “A blank document” વિકલ્પ પસંદ કરી નીચેના ભાગમાં Create in લેબલની બાજુમાં આવેલા ડ્રૉપડાઉન મેનૂમાંથી New Tab વિકલ્પ પસંદ કરો, જેથી તે નવા વિભાગ- (Tab)માં વેબ પેજની રચના કરશે.
• હવે Create બટન પર ક્લિક કરો, જેથી નવી ફાઈલની રચના થશે.

હયાત ફાઈલ ખોલવી (Open an Existing File)
હયાત ફાઈલ ખોલવા માટે કમ્પોઝિશન ટૂલબાર પર આવેલા આઇકન પર ક્લિક કરો. અથવા File → Open વિકલ્પ પસંદ કરો.
નોંધ : ફાઈલ જો હાલમાં જ ખોલવામાં આવી હોય, તો તેને File → Recent Pages વિકલ્પની મદદથી પણ ખોલી
શકાય છે.

પ્રયોગ 2
હેતુ : કમ્પોઝરની મદદથી નામ (Name) અને ઇ-મેઇલ ઍડ્રેસ (E-mail address) તથા Submit બટન ધરાવતા ફૉર્મની રચના કરવી.
પગલું 1 : કમ્પોઝર શરૂ કરો અને નવી ફાઈલ બનાવો.
પગલું 2 : મેનૂ બારમાંથી Insert → Form → Define Form વિકલ્પ પસંદ કરો અથવા કમ્પોઝિશન ટૂલબારમાં આવેલ બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનું Form Properties ડાયલૉગ બૉક્સ ખૂલશે.

પગલું 3 : Form Properties ડાયલૉગ બૉક્સમાં ફૉર્મ માટે યોગ્ય નામ ઉમેરો (form1), ફૉર્મની વિગતો મોકલવાની હોય તે ફાઈલનું નામ Action URL વિકલ્પની કિંમત સ્વરૂપે ઉમેરો (form1.html) તથા Method ડ્રૉપડાઉન મેનૂમાંથી POST વિકલ્પ પસંદ કરો અને OK બટન પર ક્લિક કરો.
Form Properties ડાયલૉગ બૉક્સમાં ઉમેરેલ વિગતો આકૃતિ માં દર્શાવી છે.


પગલું 4 : હવે, આકૃતિ માં દર્શાવ્યા મુજબ ફૉર્મ શીર્ષક રહિત (untitled) પાનામાં આછા રંગની સીમારેખા સાથે ઉમેરવામાં આવશે.
આ બૉક્સમાં ટેક્સ્ટ બૉક્સ, રેડિયો બટન, ચેક બૉક્સ, ડ્રૉપડાઉન બૉક્સ વગેરે ઘટકો મૂકવામાં આવશે.
નોંધ : એકથી વધુ વાર એન્ટર કી દબાવી ફૉર્મમાં કાર્ય કરવા માટેની થોડી વધુ જગ્યા બનાવી શકાશે.

પગલું 5 : હવે, બૉક્સમાં લેબલ ઉમેરવા Insert → Form → Define Label વિકલ્પ પસંદ કરો. ફૉર્મમાં જે સ્થાને લેબલ ઉમેરવું હોય, ત્યાં કર્સર ગોઠવો અને આકૃતિ માં દર્શાવ્યા મુજબ લેબલમાં “Name” લખાણ ટાઇપ કરો. લેબલ ફિલ્ડમાંથી બહાર આવવા ફિલ્ડ સિવાયના અન્ય કોઈ પણ સ્થાને ક્લિક કરો.

પગલું 6 : ફૉર્મમાં ઇનપુટ ટેક્સ્ટ ફિલ્ડ ઉમેરવા માટે Insert → Form → Form Field વિકલ્પ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનું Form Field Properties ડાયલૉગ બૉક્સ ખૂલશે.

આ ડાયલૉગ બૉક્સમાં Field Typeના ડ્રૉપડાઉન મેનૂમાંથી Text વિકલ્પ પસંદ કરો. Field Settings વિભાગમાં Field Name ટેક્સ્ટ બૉક્સમાં ફિલ્ડનું નામ ઉમેરો. (Name)
નોંધ : જરૂરી વિગતો ઉમેરતા પહેલા ફિલ્ડમાં અન્ય કોઈ વિગત દર્શાવવા Initial Value ટેક્સ્ટ બૉક્સમાં ઇચ્છિત લખાણ લખી શકાય. હવે OK બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ ટેક્સ્ટ ઇનપુટ ફિલ્ડ ઉમેર્યા પછીનું ફૉર્મ તૈયાર થશે.

પગલું 7 : હવે આ જ રીતે Name લેબલ ફિલ્ડની નીચે E-mail લેબલ ફિલ્ડ તથા Name માટે ટેક્સ્ટ ફિલ્ડ ઉમેર્યું. તે જ રીતે E-mail માટેનું ટેક્સ્ટ ફિલ્ડ ઉમેરો, જેમાં Initial Value ટેક્સ્ટ બૉક્સમાં abc@xyz.com લખાણ ઉમેરો. બંને ફિલ્ડ ઉમેર્યા પછીનું ફૉર્મ આકૃતિ માં દર્શાવેલ છે.

પગલું 8 : અંતમાં Submit બટન ઉમેરવા Insert → Form → Form Field પર ક્લિક કરો. ખૂલતા ડાયલૉગ બૉક્સમાં Field Type ડ્રૉપડાઉન મેનૂમાંથી Submit Button વિકલ્પ પસંદ કરો. Field Name અને Field Value બંને ટેક્સ્ટ બૉક્સમાં Submit લખાણ ટાઇપ કરો અને OK બટન પર ક્લિક કરો. Submit બટન માટેના Form Field Properties ડાયલૉગ બૉક્સનો દેખાવ આકૃતિ માં દર્શાવેલ છે.

પગલું 9 : હાલમાં ફૉર્મ સામાન્ય દેખાવ (Normal view) સ્વરૂપે છે. ફૉર્મનો પ્રિવ્યૂ જોવા માટે એડિટ મોડ ટૂલબાર પર આવેલ Preview બટન પર ક્લિક કરો. આકૃતિ માં ફૉર્મ પ્રિવ્યૂ મોડમાં દર્શાવ્યું છે.

નોંધ : નીચે દર્શાવેલ Source વિભાગ (Tab) પર ક્લિક કરી હાલમાં બનાવેલ ફૉર્મના સોર્સ કોડ (HTML કોડ) પણ જોઈ શકાય છે, જે આકૃતિ માં દર્શાવેલ છે :

પગલું 10 : તૈયાર થયેલ ફાઈલનો સંગ્રહ કરવા File → Save વિકલ્પ પસંદ કરો. અથવા કમ્પોઝિશન ટૂલબાર ૫૨ આવેલા બટન પર ક્લિક કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનું Page Title ડાયલૉગ બૉક્સ ખૂલશે. અહીં વેબ પેજને યોગ્ય શીર્ષક આપો. (example1) અને OK બટન પર ક્લિક કરો.

OK બટન પર ક્લિક કર્યા બાદ આકૃતિ માં દર્શાવેલ Save ડાયલૉગ બૉક્સ ખૂલશે, જે ફાઈલનું નામ અને ફાઈલનો સંગ્રહ કરવા માટેના સ્થાન વિશેની માહિતી પૂછશે.
નોંધ : ફાઈલને html કે htm અનુલંબન (Extension) આપીને સંગ્રહ કરવી.
અહીં યોગ્ય વિગત ભરી Save બટન પર ક્લિક કરો.

યાદ રાખો : વેબ સાઇટની રચના કરતી વખતે જો કોઈ પાનું હોમ પેજ હોય કે જે વેબ સાઇટનું URL ટાઇપ કરવાથી ખૂલે તેમ રાખવાનું હોય, તો તેનો index.html નામ સાથે સંગ્રહ કરવો.

પ્રયોગ 3
હેતુ : કમ્પોઝરની મદદથી નોંધણી ફૉર્મની રચના કરવી.
પગલું 1 : કમ્પોઝર શરૂ કરો અને નવી ફાઈલની રચના કરો.

પગલું 2 : મેનૂ બારમાંથી Insert → Form → Define Form વિકલ્પ પસંદ કરો. Form Properties ડાયલૉગ બૉક્સમાં આકૃતિ માં દર્શાવ્યા મુજબની વિગતો ઉમેરો.

OK બટન પર ક્લિક કરવાથી આછા રંગની સીમારેખા ધરાવતું ફૉર્મ દર્શાવવામાં આવશે.
પગલું 3 : ફૉર્મમાં જગ્યા ઉમેરવા માટે એન્ટર કી દબાવો. હવે ફૉર્મને શીર્ષક આપવા માટે Format Toolbar1માંથી Heading 1 અને Format Toolbar2માંથી Center Align આઇકોન પસંદ કરો. ત્યારબાદ “Registration Form” લખાણ ઉમેરો.

પગલું 4 : લેબલ ઉમેરવા માટે Form → Define Label વિકલ્પ પસંદ કરો. Field Name ટેક્સ્ટ બૉક્સમાં “First Name” ટાઇપ કરો. ત્યારબાદ “First Name” લેબલ માટેનું ઇનપુટ ટેક્સ્ટ ફિલ્ડ ઉમેરવા માટે Form → Form Field વિકલ્પ પર ક્લિક કરો. Field Type ડ્રૉપડાઉન મેનૂમાંથી ટેક્સ્ટ વિકલ્પ પસંદ કરો અને આકૃતિ માં દર્શાવ્યા મુજબ વિગત ઉમેરો અને OK બટન પર ક્લિક કરો.

આવી જ રીતે ફૉર્મમાં “Middle Name” અને “Last Name” લેબલ તથા ઇનપુટ ટેક્સ્ટ બૉક્સ ઉમેરો. પછી ફૉર્મનો દેખાવ આકૃતિ માં દર્શાવ્યા મુજબ દેખાશે.

પગલું 5 : હવે, Gender ફિલ્ડ માટે રેડિયો બટન ઉમેરવા પ્રથમ “Gender” નામના લેબલની રચના કરો. ત્યારબાદ રેડિયો બટન ઉમેરવા માટે Form → Form Field વિકલ્પ પસંદ કરો અને આકૃતિ માં દર્શાવ્યા મુજબ ડ્રૉપડાઉન મેનૂમાંથી Field Typeના વિકલ્પ તરીકે Radio Button પસંદ કરો.
અહીં Group Nameમાં “gender” તથા Field Valueમાં “male” ટાઇપ કરો. ત્યારબાદ Initial Value લખાણ આગળ આવેલ ચેક બૉક્સ પસંદ કરી OK બટન પર ક્લિક કરો.

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

પગલું 6 : હવે, આપણને “Hobby” ફિલ્ડની જરૂર છે. Hobby ફિલ્ડ માટે ચેક બૉક્સની રચના કરવા Form → Form Field વિકલ્પ પસંદ કરી ડ્રૉપડાઉન મેનૂમાંથી ફિલ્ડના પ્રકાર તરીકે Check Box પસંદ કરો. હવે, આકૃતિ માં દર્શાવ્યા પ્રમાણે વિગતો દાખલ કરો અને OK બટન પર ક્લિક કરો.

• આ ચેક બૉક્સની બાજુમાં “Singing” લેબલ ઉમેરો.
• આ જ રીતે Field Value તરીકે “Dancing” અને “Reading” ઉમેરી અન્ય બે ચેક બૉક્સની રચના કરો અને તેમની બાજુમાં “Dancing” અને “Reading” લેબલ ઉમેરો. લેબલ ઉમેર્યા બાદ ફૉર્મ આકૃતિ માં દર્શાવ્યા મુજબ દેખાશે.

પગલું 7 : હવે આપણે “Address” ફિલ્ડની જરૂર છે. ઉપયોગકર્તા સરનામાંના ફિલ્ડમાં એક કરતાં વધુ લીટીનું લખાણ ઉમેરી શકે છે માટે તેના ફિલ્ડનો પ્રકાર “Textarea” રાખીશું. પ્રથમ Address નામના લેબલની રચના કરો. હવે Textarea ઉમેરવા Form → Textarea વિકલ્પ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ Textarea Properties ડાયલૉગ બૉક્સ ખૂલશે. અહીં Field Name બૉક્સમાં “Address” ઉમેરો.
ટેક્સ્ટ એરિયા માટે હરોળની સંખ્યા 5 તથા સ્તંભની સંખ્યા 70 ઉમેરો. ત્યારબાદ Initial Textમાં “Insert Address Here” ઉમેરો અને OK બટન પર ક્લિક કરો.

પગલું 8 : હવે આપણે “City” ફિલ્ડ ઉમેરીશું. અહીં ઉપયોગકર્તા ડ્રૉપડાઉન મેનૂમાંથી શહેરની પસંદગી કરી શકે તે માટે Selection Listનો ઉપયોગ કરીશું. Selection List ઉમેરવા Form → Selection List વિકલ્પ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબ Selection List Properties ડાયલૉગ બૉક્સ ખૂલશે.
અહીં List Name બૉક્સમાં “City” ટાઇપ કરો અને Add Option બટન પર ક્લિક કરો. ત્યારપછી Text ફિલ્ડમાં “Ahmedabad” ટાઇપ કરો. Add Option બટન પર ફરીથી ક્લિક કરો અને Text ફિલ્ડમાં “Baroda” ટાઇપ કરો. આ જ રીતે “Rajkot” તથા “Surat” શહેર ઉમેરો.

રાજકોટ શહેર ઉમેરતી વખતે “Initially Selected” વિકલ્પ પસંદ કરવાનું યાદ રાખો. હવે OK બટન પર ક્લિક કરો. શહેરોનાં નામ ઉમેર્યા પછીનું Selection List Properties ડાયલૉગ બૉક્સ આકૃતિ માં દર્શાવેલ છે.

પગલું 9 : હવે Submit બટન ઉમેરવા Form → Form Field વિકલ્પ પસંદ કરો. ડ્રૉપડાઉન મેનૂમાંથી Submit Button વિકલ્પ પસંદ કરો. Field Name અને Field Value ટેક્સ્ટ બૉક્સમાં Submit લખાણ ઉમેરો અને OK બટન પર ક્લિક કરો. આ જ રીતે Reset બટન ઉમેરો. આકૃતિ માં ફૉર્મનો અંતિમ દેખાવ નૉર્મલ વ્યૂ દ્વારા દર્શાવ્યો છે.

પગલું 10 : ફાઈલનો “example2″ નામથી સંગ્રહ કરો. ફૉર્મનો પ્રિવ્યૂ મોડ આકૃતિ માં દર્શાવ્યો છે.

આકૃતિ નોંધણી માટેના ફૉર્મનો દેખાવ વેબ બ્રાઉઝરમાં દર્શાવે છે.

ફૉર્મને અન્ય રંગ બૅકગ્રાઉન્ડમાં આપવો (Giving Background Color to Form)

• ફૉર્મને અન્ય રંગ બૅકગ્રાઉન્ડમાં આપવા પ્રથમFormat → Page Colors and Background વિકલ્પ પસંદ કરો, જેથી આકૃતિ માં દર્શાવ્યા મુજબનું ડાયલૉગ બૉક્સ ખૂલશે.

• અહીં “Use Custom Colors” વિકલ્પ પસંદ કરો. ત્યારબાદ Background વિકલ્પ પર ક્લિક કરવાથી આકૃતિ માં દર્શાવ્યા મુજબ Block Background Color ડાયલૉગ બૉક્સ ખૂલશે.

• અહીં તમારી પસંદગીનો રંગ પસંદ કરો અને OK બટન પર ક્લિક કરો. આથી ફરીથી આકૃતિ માં દર્શાવેલ ડાયલૉગ બૉક્સ ખૂલશે. ફરી OK બટન પર ક્લિક કરો.
• રંગની પસંદગી કર્યા પછી ફૉર્મનો દેખાવ આકૃતિ માં દર્શાવ્યા મુજબ દેખાશે.