Hyperlink and Bookmark, iframe

📖 Theory

ટાપુની સમસ્યા

કલ્પો કે તમે તમારા college ના portfolio માટે ત્રણ સુંદર પાનાં code કર્યાં છે: એક index નું પાનું, એક projects નું પાનું, અને એક contact નું પાનું. અત્યારે, એ એક folder માં હિંદ મહાસાગરના અલગ ટાપુઓની જેમ બેઠાં છે. તમારો પરિચય વાંચતા મુલાકાતી પાસે તમારા projects જોવા કૂદવાનો કે તમારા form માં સંદેશો મૂકવાનો કોઈ રસ્તો નથી. એ ફસાયેલા છે. તો આપણે આ અલગ files વચ્ચે digital પુલ કેવી રીતે બાંધીએ, કે તમારા પાનાની અંદર એક interactive નકશો દેખાડવા એક જીવંત બારી પણ કેવી રીતે ખોલીએ?

📖 Theory

Wormholes અને ચિત્રની ફ્રેમો

Web ના જોડાણોને ત્રણ રીતે વિચારો. એક hyperlink એ જાદુઈ portal gun જેવી છે: એના પર click કરો, અને તમે તરત એક તદ્દન નવા ઓરડામાં કે એક જુદી website પર પહોંચી જાઓ છો. એક bookmark એ એક જ, ખૂબ લાંબા પાઠ્યપુસ્તકની અંદરની રંગીન ચીકણી ચિઠ્ઠી જેવો છે: એ તમને પાનાં ફેરવ્યા વગર સીધા પ્રકરણ 3 પર જવા દે છે. એક iframe એટલે તમારા બેઠકખંડની દીવાલમાં એક કાણું પાડીને એક કાચની બારી બેસાડવી જે પડોશીના ઘરની અંદરનું દેખાડે: તમે તમારા ઓરડામાં જ રહો છો, પણ એમનું content જીવંત જુઓ છો.

📖 Theory

Links, Bookmarks, અને Frames

Web ના માળખામાં, આડાં જોડાણો ચોક્કસ tags દ્વારા સંભાળાય છે:

• એક hyperlink એક URL કે file તરફ ઈશારો કરવા <a> (anchor) tag અને href (hypertext reference) attribute વાપરીને documents ને જોડે છે.

• એક bookmark એ એક આંતરિક hyperlink છે જે એ જ પાના પરના એક ચોક્કસ element ને એના id attribute વાપરીને નિશાન બનાવે છે, જેની આગળ hash નું ચિહ્ન (#) લગાવાય છે.

• એક iframe (inline frame) તમારા હાલના પાનાના layout ની અંદર એક આખો સ્વતંત્ર HTML document જડવા <iframe> tag અને src attribute વાપરે છે.

📊 At a glance

HTML ના જોડાણ અને જડવાની વ્યવસ્થાઓની સરખામણી.

⌨️ Practical

Complete Portfolio Navigation Page

<body>

  <nav>
    <a href="projects.html">View Projects</a> |
    <a href="#contact-section">Jump to Contact</a>
  </nav>

  <hr>

  <section>
    <h1>Welcome to My Site</h1>
    <p>I am a student builder.</p>
  </section>

  <!-- Tall spacer so the bookmark jump is visible -->
  <div style="height: 600px;"></div>

  <section id="contact-section">
    <h2>Contact Me</h2>
    <p>Direct campus location:</p>
    <iframe src="map.html" width="100%" height="200"></iframe>
  </section>

</body>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

🧩 Quiz

તમે id="syllabus" થી નિશાન કરેલા એક વિભાગ પર કૂદવા એક આંતરિક bookmark ની link લખી રહ્યા છો. તમારી university ની પરીક્ષા માટે કઈ anchor tag ની ગોઠવણ syntax પ્રમાણે સાચી છે?

1. <a href="syllabus">Go to Syllabus</a>
2. <a href="#syllabus">Go to Syllabus</a>
3. <a id="#syllabus">Go to Syllabus</a>
4. <a src="#syllabus">Go to Syllabus</a>

💭 Think first

Frame ના Target ના વર્તનની આગાહી

મનમાં આગાહી કરો કે જો તમે <a href="projects.html" target="_blank"> જેવા એક anchor tag ની અંદર target="_blank" ઉમેરો તો શું થાય. આ browser નું વર્તન કેવી રીતે બદલે છે? Tap કરતાં પહેલાં વિચારો.

⚠️ Watch out

અદૃશ્ય ખૂટતા Hash નો ફાંદો

Lab practicals માં students દ્વારા થતી એક વિનાશક ભૂલ છે આંતરિક links લખતી વખતે hash નું ચિહ્ન (#) ભૂલી જવું. જો તમે href="footer" લખો, browser માને છે કે તમે તમારી સ્થાનિક directory માં footer નામની એક અલગ પાનાની file શોધી રહ્યા છો, જે એક પીડાદાયક 404 Not Found ની error માં પરિણમે છે. હંમેશા ખાતરી કરો કે તમારી link href="#footer" વાપરે જ્યારે લક્ષ્ય block એ id ની string ની અંદર કોઈ hash નું ચિહ્ન વગર બિલકુલ id="footer" વાપરે!

✏️ Formula

Linking અને Embedding ના પ્રશ્નો માટેનું સૂત્ર

જ્યારે એક exam નો પ્રશ્ન તમને hyperlinks અને iframes સમજાવવાનું કહે, સંપૂર્ણ marks માટે આ અલગ મુદ્દા લખો:

• 1. Hyperlink: Anchor tag વ્યાખ્યાયિત કરો, href attribute સમજાવો, અને એક બહારની link નું ઉદાહરણ આપો.
• 2. Bookmark: વિગતે જણાવો કે આંતરિક navigation href="#name" અને id="name" ધરાવતા લક્ષ્ય element વચ્ચેની જોડી પર કેવી રીતે આધાર રાખે છે.
• 3. iframe: Inline frames ને એક જડવાની બારી તરીકે સમજાવો, એક ટૂંકા નમૂના સાથે ફરજિયાત src, width, અને height attributes નોંધતાં.

✅ Summary

Key takeaways

• Anchor tags નવાં webpages સાથે બહારનાં જોડાણો બનાવવા href attribute વાપરે છે.
• આંતરિક bookmarks element ના id attributes ને નિશાન બનાવીને એક જ પાના પર ઝડપી ઊભું કૂદવાનું શક્ય બનાવે છે.
• આંતરિક bookmarking કામ કરવા href attribute માં આગળ hash નું ચિહ્ન ફરજિયાત છે.
• iframe tag તમારા grid ની અંદર બહારના web ના documents દેખાડવા એક અલગ nested બારી બનાવે છે.
• Iframes ને બરાબર દેખાવા એક માન્ય src attribute સાથે width અને height attributes જોઈએ છે.
• Memory Hook: Anchors દરિયા પાર પુલ બાંધે છે, hashes સ્થાનિક કૂદે છે, frames તમારા અને મારા માટે જડે છે.