InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How do you create links to sections within the same page? |
|
Answer» We can create links to sections within the same page, USING id tag in that part of the webpage. And then in <a> tag in href we mention that id by #id_name. This type of LAYOUT is very common nowadays because of Single Page Websites, where all the information is generally is on one page only. In the following example, we are creating <nav> links on clicking of which it will take us to respective sections. <!DOCTYPE html> <html> <style> nav{ background: yellow; padding: 2%; font-size:1.2rem; } footer{ background: yellow; padding: 1%; font-size:1rem; } main, header{ text-align: center; } </style> <body> <nav> <a href="#about__chrome">Chrome</a> | <a href="#about__firefox">Firefox</a> | <a href="#about__safari">Safari</a> | <a href="#about__explorer">Internet Explorer</a> </nav> <header> <h1>Web Browsers</h1> <p>Google Chrome and Firefox are the most used browsers today.</p> <hr> </header> <main> <article id="about__chrome"> <section> <h1>Google Chrome</h1> <p>Google Chrome is a FREE, open-source web browser developed by Google, released in 2008.</p> <figure> <IMG src="https://source.unsplash.com/900x600/?nature" width="100%" alt="Nature"> <figcaption>Random Nature image</figcaption> </figure> </section> <section> <h2>More Information</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur doloremque reiciendis saepe! Iure dicta harum molestias laborum accusantium reprehenderit sunt, repudiandae eos aut itaque dolores et repellendus. Dignissimos, voluptate. </p> <hr> </section> </article> <article id="about__firefox"> <section> <h1>Mozilla Firefox</h1> <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p> <figure> <img src="https://source.unsplash.com/900x600/?water" width="100%" alt="Water"> <figcaption>Random Water image.</figcaption> </figure> </section> <section> <h2>More Information</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur doloremque reiciendis saepe! Iure dicta harum molestias laborum accusantium reprehenderit sunt, repudiandae eos aut itaque dolores et repellendus. Dignissimos, voluptate. </p> </section> </article> <article id="about__safari"> <section> <h1>Safari</h1> <p>GSafari is a graphical web browser developed by Apple, based on the WebKit engine.</p> <figure> <img src="https://source.unsplash.com/900x600/?nature" width="100%" alt="Nature"> <figcaption>Random Nature image</figcaption> </figure> </section> <section> <h2>More Information</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur doloremque reiciendis saepe! Iure dicta harum molestias laborum accusantium reprehenderit sunt, repudiandae eos aut itaque dolores et repellendus. Dignissimos, voluptate. </p> <hr> </section> </article> <article id="about__explorer"> <section> <h1>Internet Explorer</h1> <p>Internet Explorer[a] (formerly Microsoft Internet Explorer[b] and Windows Internet Explorer,[c] commonly abbreviated IE or MSIE) was a series of graphical web browsers (or as of 2019, a "compatibility solution"[5]) developed by Microsoft and included in the Microsoft Windows line of operating systems, starting in 1995.</p> <figure> <img src="https://source.unsplash.com/900x600/?water" width="100%" alt="Water"> <figcaption>Random Water image.</figcaption> </figure> </section> <section> <h2>More Information</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde consequatur doloremque reiciendis saepe! Iure dicta harum molestias laborum accusantium reprehenderit sunt, repudiandae eos aut itaque dolores et repellendus. Dignissimos, voluptate. </p> </section> </article> </main> </body> </html> |
|