Theory
એક click અને એ ગયા
FestConnect ના home page પર events ની યાદી છે. દરેક નામ એ event ના પાના સાથે જોડાય છે, અને footer મુખ્ય college ની website સાથે. એક student 'Robotics' પર click કરે છે, વાંચે છે, back દબાવે છે, સરનામું જોવા college ની link પર click કરે છે, અને હવે fest નું tab college ની site થી બદલાઈ ગયું છે. એ નોંધણી કરવા ક્યારેય પાછો આવતો નથી.
Link ના tag પરના બે નાના નિર્ણય આ સુધારે છે: એ ક્યાં ચીંધે છે (href) અને એ ક્યાં ખૂલે છે (target).
Theory
એક સરનામું અને એક દરવાજો
Link એ બે ગોઠવણવાળું દિશાસૂચક પાટિયું છે.
સરનામું (href) કાં તો એવું પૂરું ટપાલનું સરનામું છે જે ગમે ત્યાંથી ચાલે (absolute) કાં તો 'બાજુનો ઓરડો' જેવી દિશા છે જેનો અર્થ ફક્ત અહીંથી જ નીકળે (relative).
દરવાજો (target) એ છે કે પાટિયું મુકામને તમે જે ઓરડામાં ઊભા છો એમાં જ ખોલે છે (_self) કે આ ઓરડો અકબંધ રાખીને સાવ નવા ઓરડામાં (_blank).
Theory
href: absolute સામે relative
href attribute મુકામ રાખે છે:
- Absolute URL: પૂરું સરનામું,
https://college.edu/index.html. બીજી site તરફ ચીંધવા આ વાપરો. - Relative URL: હાલના પાનાથી શરૂ થતો રસ્તો, જેમ કે
dance.html(એ જ folder),events/dance.html(અંદરનું folder), કે../index.html(એક folder ઉપર). તમારી પોતાની site ની અંદર ચીંધવા આ વાપરો.
Relative links site સાથે ખસે છે: આખા folder ને zip કરો, server પર upload કરો, અને એ હજી ચાલે છે, કારણ કે એ ક્યારેય domain નો ઉલ્લેખ કરતાં નથી.
Practical
FestConnect ની links
<!-- relative: another page in our own site, opens in same tab -->
<a href="events/dance.html">Dance Night</a>
<!-- relative, up one folder then into home -->
<a href="../index.html">Back to Fest Home</a>
<!-- absolute: an outside site, open a NEW tab so we keep FestConnect -->
<a href="https://college.edu" target="_blank" rel="noopener noreferrer">
College Website
</a>This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
target નાં ચાર મૂલ્યો
| target | Link ક્યાં ખોલે છે |
|---|---|
| _self | એ જ tab માં (આ મૂળભૂત છે) |
| _blank | નવા tab કે window માં |
| _parent | માતાપિતાના frame માં (framesets/iframes ની અંદર) |
| _top | આખા window માં, બધા frames તોડીને બહાર નીકળીને |
Think first
એ જ tab કે નવું?
બહારની 'College Website' ની link માટે તમને FestConnect નું tab ટકી રહે એ જોઈએ છે. અંદરની 'Dance Night' ની link માટે તમને સામાન્ય navigation જોઈએ છે. દરેકને કયું target જોઈએ, અને કયું મૂળભૂત છે જે તમે લખવાનું છોડી શકો?
Show the answer
'College Website' ને target="_blank" જોઈએ જેથી એ નવા tab માં ખૂલે અને FestConnect ખુલ્લું રહે. 'Dance Night' ને _self જોઈએ, જે મૂળભૂત છે, એટલે તમે target લખતા જ નથી. અંગૂઠાનો નિયમ: બહારની links ને _blank; અંદરનું navigation _self જ રહે.
Quiz
તમે આખું FestConnect નું folder college ના server પર નવા domain હેઠળ ખસેડો છો. કઈ links કોઈ ફેરફાર વગર ચાલતી રહે છે?
- Relative વાળી (dance.html, ../index.html)
- તમારા પોતાના જૂના domain તરફ ચીંધતી absolute વાળી
- ફક્ત એ links જે target="_blank" વાપરે છે
- એકેય નહીં: ખસેડ્યા પછી દરેક link ફરી લખવી પડે
Show the answer
Relative વાળી (dance.html, ../index.html)
Relative URLs તમારા પોતાના folder ની અંદરના રસ્તા વર્ણવે છે, એટલે એ કોઈ પણ ખસેડવાનું ટકી જાય છે (A). જૂના domain નું નામ લેતાં absolute URLs (B) હવે ખોટી જગ્યાએ ચીંધે છે. target (C) નક્કી કરે છે કે link ક્યાં ખૂલે, એ ચાલે કે નહીં એ નહીં. એટલે ખસેડવાથી બધું તૂટતું નથી (D), ફક્ત પોતાની તરફની absolute links તૂટે છે, અને બરાબર એટલા માટે તમે તમારાં પોતાનાં પાનાં માટે relative URLs પસંદ કરો છો.
Watch out
પરીક્ષકો ગોઠવે છે એ ફાંદા
1. મૂળભૂત target એ `_self` છે, _blank નહીં. જો પ્રશ્નમાં target વગરની link દેખાડીને પુછાય કે એ ક્યાં ખૂલશે, તો જવાબ છે એ જ tab.
2. _parent અને _top ફક્ત frames/iframes ની અંદર જ મહત્ત્વનાં છે. સામાન્ય પાના પર એ _self જેવાં જ વર્તે છે. _top 'હંમેશા નવું tab ખોલે છે' એવો દાવો ન કરો, એ ખોલતું નથી.
3. જ્યારે તમે _blank વાપરો, ત્યારે rel="noopener noreferrer" ઉમેરો: એ નવા પાનાને તમારા પાના સાથે છેડછાડ કરતાં રોકે છે. આ વાસ્તવિક જગતની સલામતીની ટેવ છે જેની અપેક્ષા પરીક્ષકો વધુ ને વધુ રાખે છે.
Theory
તમે form ને પણ અહીં જ જોડશો
થોડા પાઠ પછી નોંધણીનું <form> એના action attribute માં નામ આપેલા પાના પર data મોકલશે, અને એ રસ્તો તમે હમણાં શીખ્યા એ જ absolute સામે relative ના નિયમને અનુસરે છે. Relative રસ્તાઓ સાથે અત્યારે ટેવાઈ જવાનું forms, images (src), અને stylesheets (<link> પરનું href) બધામાં કામ લાગે છે, કારણ કે એ બધાં એક જ રીતે files તરફ ચીંધે છે.
Summary
Key takeaways
- <a href="..."> મુકામ રાખે છે; target attribute એ ક્યાં ખૂલે એ રાખે છે.
- Absolute URL = બીજી sites માટે પૂરું સરનામું (https://...); relative URL = તમારી પોતાની site ની અંદરનો રસ્તો (dance.html, ../index.html).
- Relative links site ખસેડવાનું ટકી જાય છે; પોતાની તરફની absolute links domain બદલાય તો તૂટે છે.
- target: _self (એ જ tab, મૂળભૂત), _blank (નવું tab), _parent અને _top (ફક્ત frames માં અર્થપૂર્ણ).
- સલામતી માટે target="_blank" સાથે rel="noopener noreferrer" જોડો.
- Memory hook: એક સરનામું (href) અને એક દરવાજો (target).