Foundations of Web Development - Free Source Library

In the realm of web development, the second lesson delves into the multifaceted aspects of embedding, page formatting, navigation between pages, and the intricacies of loading events. Understanding these fundamental elements is paramount for web developers as they strive to create immersive and user-friendly online experiences.

Embedding content within a webpage constitutes a pivotal facet of web development. This involves the integration of various types of media or external resources directly into the HTML document. The process often employs elements such as </code> for embedding external content like maps or videos seamlessly within the page structure. Furthermore, the utilization of <code><audio></code> and <code><video></code> tags enables the integration of multimedia elements directly into the webpage, contributing to a richer and more dynamic user experience.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <p>Page formatting, a critical aspect of web design, encompasses the arrangement and styling of content to enhance visual appeal and usability. Cascading Style Sheets (CSS) play a central role in this endeavor, enabling developers to define the presentation of HTML elements. Selectors and properties within CSS provide the means to control layout, colors, fonts, and other stylistic attributes, thus affording developers a high degree of flexibility in crafting visually engaging and responsive web pages.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <p>Navigation between pages, a fundamental feature of any website, is achieved through the implementation of hyperlinks. Hyperlinks, created using the <code><a></code> (anchor) tag, facilitate seamless transitions between different pages or sections of a website. Understanding the attributes associated with hyperlinks, such as ‘href’ for specifying the target destination, empowers developers to create intuitive navigation systems that enhance user accessibility and overall browsing experience.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <p>As web applications become more sophisticated, employing techniques like Single Page Applications (SPAs), developers often resort to client-side routing to manage navigation without triggering a full page reload. This involves dynamically updating the URL and content on the page using JavaScript, offering a smoother and more responsive user interface.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <p>The intricacies of loading events are a crucial aspect of web development, influencing the timing and execution of various actions during a webpage’s lifecycle. Developers grapple with understanding the nuances of events such as ‘DOMContentLoaded’ and ‘load,’ which signal different stages in the loading process. ‘DOMContentLoaded’ indicates that the initial HTML document has been completely loaded and parsed, allowing developers to manipulate the DOM structure. On the other hand, the ‘load’ event signifies the completion of loading all external resources, including images and stylesheets. Harnessing these events enables developers to orchestrate the execution of scripts or other actions at precisely the right moment, ensuring a seamless and optimized user experience.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <p>Furthermore, the advent of asynchronous programming and the use of techniques like AJAX (Asynchronous JavaScript and XML) have revolutionized how web pages interact with servers. Asynchronous requests allow data to be retrieved from the server without requiring a full page reload, enhancing the speed and interactivity of web applications. Developers must grasp the intricacies of asynchronous programming to harness its benefits effectively.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <p>In the context of web development, frameworks and libraries such as React, Angular, and Vue.js have gained prominence. These tools provide abstractions and pre-built components that streamline the development process. React, for instance, employs a virtual DOM (Document Object Model) to enhance rendering efficiency, while Angular follows a modular architecture, and Vue.js emphasizes simplicity and ease of integration. Mastery of these frameworks empowers developers to create scalable and maintainable web applications, catering to the ever-evolving demands of the digital landscape.</p> <p>In conclusion, the second lesson in web development encompasses a profound exploration of embedding content, shaping page layouts, navigating between pages, and understanding loading events. These foundational concepts are indispensable for developers striving to create compelling and responsive web experiences. As the digital landscape continues to evolve, adeptness in these areas equips developers with the tools and knowledge needed to stay at the forefront of web development practices.</p> </div> </div> <h2>More Informations</h2> <p><img decoding="async" src="https://freesourcelibrary.com/pic/more_info.png" class="center"></p> <div data-message-author-role="assistant" data-message-id="21e508a1-146e-47f3-b484-6e4d01d61bba" class="min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto"> <div class="markdown prose w-full break-words dark:prose-invert light"> <p>Within the expansive realm of web development, the concept of embedding content assumes a multifaceted role, encompassing diverse techniques and elements that contribute to the dynamic and interactive nature of modern web pages. Embedding refers to the seamless integration of various media types and external resources directly into the structure of an HTML document, facilitating a richer user experience.</p> <p>The utilization of iframes, or inline frames, represents a prominent method of content embedding. These HTML elements act as containers, enabling the inclusion of external documents or resources within the current page. Common use cases include embedding maps, videos, or other web pages, creating a cohesive and integrated browsing experience. Developers employ attributes like ‘src’ to specify the source of the embedded content and ‘width’ and ‘height’ to define the dimensions of the iframe, providing a high degree of customization.</p> <p>Furthermore, the integration of multimedia elements, such as audio and video, is achieved through specialized HTML tags. The <code><audio></code> and <code><video></code> tags empower developers to embed audio and video files directly into the webpage, eliminating the need for external plugins. Attributes like ‘controls’ facilitate user interaction by displaying playback controls, while ‘autoplay’ and ‘loop’ afford additional customization options. This approach not only enhances the visual appeal of the page but also caters to the growing demand for engaging and immersive content.</p> <p>Page formatting, an integral facet of web design, involves the meticulous arrangement and styling of content to achieve optimal visual aesthetics and user accessibility. Cascading Style Sheets (CSS) emerge as a foundational tool in this endeavor, providing a powerful mechanism for defining the presentation of HTML elements. Selectors, properties, and values within CSS declarations empower developers to control layout, colors, fonts, and other stylistic attributes, fostering a harmonious and visually appealing design.</p> <p>Responsive web design, a pivotal aspect of page formatting, addresses the need for adaptability across various devices and screen sizes. Techniques such as media queries within CSS enable developers to apply distinct styles based on the characteristics of the user’s device, ensuring a seamless and visually pleasing experience on desktops, tablets, and mobile devices. This emphasis on responsiveness reflects the evolving landscape of web development, where user experience across diverse platforms is paramount.</p> <p>Navigation between pages constitutes a fundamental aspect of the web browsing experience. Hyperlinks, created using the <code><a></code> (anchor) tag, serve as the linchpin for seamless transitions between different pages or sections of a website. Understanding the ‘href’ attribute, which specifies the target destination, empowers developers to craft intuitive navigation systems that enhance user accessibility and streamline the overall browsing experience.</p> <p>As web applications evolve, the adoption of Single Page Applications (SPAs) becomes increasingly prevalent. SPAs, characterized by dynamic updates to the content of a single HTML page, necessitate client-side routing to manage navigation without triggering a full page reload. This entails manipulating the URL and dynamically updating content using JavaScript frameworks like React, Angular, or Vue.js. Client-side routing enhances the fluidity and responsiveness of web applications, providing users with a seamless and engaging interaction model.</p> <p>The orchestration of loading events represents a nuanced aspect of web development, influencing the timing and execution of various actions during a webpage’s lifecycle. The ‘DOMContentLoaded’ event signals that the initial HTML document has been completely loaded and parsed, allowing developers to manipulate the Document Object Model (DOM) effectively. This event is crucial for executing scripts or operations that depend on the availability of the DOM structure.</p> <p>The ‘load’ event, distinct from ‘DOMContentLoaded,’ marks the completion of loading all external resources, including images, stylesheets, and other assets. Harnessing the ‘load’ event ensures that scripts or functionalities dependent on these resources execute in a timely manner, contributing to an optimized user experience. Understanding these loading events is paramount for developers seeking to create performant and responsive web applications.</p> <p>In the ever-evolving landscape of web development, the advent of asynchronous programming and AJAX (Asynchronous JavaScript and XML) has introduced transformative paradigms. Asynchronous requests enable data retrieval from the server without necessitating a full page reload, contributing to enhanced speed and interactivity. Developers adept in asynchronous programming can leverage techniques like Promises and asynchronous functions to manage complex workflows and optimize the user experience.</p> <p>Frameworks and libraries play a pivotal role in shaping the modern web development landscape. React, Angular, and Vue.js represent prominent players in this domain, each offering unique approaches and features. React, leveraging a virtual DOM, enhances rendering efficiency and facilitates the creation of interactive user interfaces. Angular, following a modular architecture, provides a comprehensive framework for building scalable and maintainable applications. Vue.js, emphasizing simplicity and ease of integration, has gained popularity for its approachable learning curve and flexibility. Mastery of these frameworks empowers developers to navigate the complexities of modern web development, delivering robust and innovative solutions.</p> <p>In conclusion, the second lesson in web development encompasses a profound exploration of embedding content, shaping page layouts, facilitating navigation between pages, and understanding the intricacies of loading events. These foundational concepts constitute the bedrock upon which developers construct compelling, responsive, and visually appealing web experiences. As the digital landscape continues to evolve, proficiency in these areas equips developers with the tools and knowledge needed to address the ever-growing demands of contemporary web development.</p> </div> </div> <h2>Keywords</h2> <div data-message-author-role="assistant" data-message-id="e5e3d2ba-8e3a-45da-bbf5-4c8e2fdaa177" class="min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto"> <div class="markdown prose w-full break-words dark:prose-invert light"> <ol> <li> <p><strong>Embedding:</strong></p> <ul> <li><em>Explanation:</em> Embedding in web development refers to the process of seamlessly integrating various types of content or external resources directly into the HTML structure of a webpage. This includes elements such as iframes for external documents, and specific tags like <code><audio></code> and <code><video></code> for embedding multimedia content.</li> <li><em>Interpretation:</em> Embedding enhances user engagement by allowing developers to integrate diverse content types, creating a cohesive and immersive online experience.</li> </ul> </li> <li> <p><strong>Iframes:</strong></p> <ul> <li><em>Explanation:</em> Iframes, or inline frames, are HTML elements used for embedding external documents or resources within a webpage. They act as containers, providing a way to integrate content from other sources seamlessly.</li> <li><em>Interpretation:</em> Iframes offer a flexible and versatile method for incorporating external content, such as maps or videos, into a webpage without compromising its structure.</li> </ul> </li> <li> <p><strong>Multimedia Elements:</strong></p> <ul> <li><em>Explanation:</em> Multimedia elements, represented by HTML tags like <code><audio></code> and <code><video></code>, enable the integration of audio and video files directly into a webpage. Attributes like ‘controls,’ ‘autoplay,’ and ‘loop’ enhance the user experience.</li> <li><em>Interpretation:</em> Integrating multimedia elements directly into a webpage enhances its richness, providing users with dynamic and engaging content without relying on external plugins.</li> </ul> </li> <li> <p><strong>Page Formatting:</strong></p> <ul> <li><em>Explanation:</em> Page formatting involves the arrangement and styling of content on a webpage for optimal visual appeal and user accessibility. Cascading Style Sheets (CSS) play a central role in defining the presentation of HTML elements.</li> <li><em>Interpretation:</em> Page formatting is crucial for creating visually appealing and well-organized web pages, ensuring a positive user experience.</li> </ul> </li> <li> <p><strong>Cascading Style Sheets (CSS):</strong></p> <ul> <li><em>Explanation:</em> CSS is a stylesheet language used for describing the presentation of a document written in HTML. It provides a powerful set of rules and declarations to control the styling and layout of HTML elements.</li> <li><em>Interpretation:</em> CSS empowers developers to customize the appearance of web pages, offering flexibility in design and ensuring a consistent look across different sections of a website.</li> </ul> </li> <li> <p><strong>Responsive Web Design:</strong></p> <ul> <li><em>Explanation:</em> Responsive web design is an approach that ensures a webpage’s layout and content adapt to different devices and screen sizes. Media queries in CSS are commonly used to implement responsive design.</li> <li><em>Interpretation:</em> Responsive web design is essential for providing a seamless user experience across a variety of devices, from desktops to tablets and mobile phones.</li> </ul> </li> <li> <p><strong>Navigation:</strong></p> <ul> <li><em>Explanation:</em> Navigation involves the creation of links and structures that enable users to move between different pages or sections of a website. Hyperlinks, created using the <code><a></code> tag, play a pivotal role in navigation.</li> <li><em>Interpretation:</em> Effective navigation is crucial for user accessibility, allowing users to explore and interact with the content seamlessly.</li> </ul> </li> <li> <p><strong>Single Page Applications (SPAs):</strong></p> <ul> <li><em>Explanation:</em> SPAs are web applications that load a single HTML page and dynamically update content as the user interacts with the application. Client-side routing is often used to manage navigation without full page reloads.</li> <li><em>Interpretation:</em> SPAs provide a more fluid and responsive user experience by minimizing page reloads, and client-side routing enables dynamic content updates while maintaining a cohesive user interface.</li> </ul> </li> <li> <p><strong>Loading Events:</strong></p> <ul> <li><em>Explanation:</em> Loading events, such as ‘DOMContentLoaded’ and ‘load,’ are events triggered during the loading process of a webpage. They mark different stages, with ‘DOMContentLoaded’ indicating the complete parsing of the initial HTML document and ‘load’ indicating the completion of loading all external resources.</li> <li><em>Interpretation:</em> Understanding loading events is crucial for developers to ensure proper timing of actions and optimizations during the webpage’s lifecycle.</li> </ul> </li> <li> <p><strong>Asynchronous Programming:</strong></p> <ul> <li><em>Explanation:</em> Asynchronous programming involves executing operations independently, allowing the program to continue running without waiting for a specific task to complete. AJAX is a common technique used for asynchronous communication with servers in web development.</li> <li><em>Interpretation:</em> Asynchronous programming enhances the speed and interactivity of web applications by allowing certain tasks to be performed without blocking the overall execution flow.</li> </ul> </li> <li> <p><strong>Frameworks and Libraries:</strong></p> <ul> <li><em>Explanation:</em> Frameworks and libraries, such as React, Angular, and Vue.js, provide pre-built components and abstractions that streamline the web development process. They offer distinct approaches and features for building scalable and maintainable web applications.</li> <li><em>Interpretation:</em> These tools empower developers by simplifying complex tasks, enhancing efficiency, and providing a structured approach to building modern web applications.</li> </ul> </li> </ol> <p>In summary, the key terms outlined in this article encompass a wide array of fundamental concepts in web development, ranging from the integration of diverse content types to the orchestration of loading events and the use of frameworks to streamline the development process. Each term plays a vital role in shaping the landscape of web development and contributes to the creation of engaging and user-friendly online experiences.</p> </div> </div> </p> <div class="stream-item stream-item-below-post-content"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> </div> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"></div> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Foundations%20of%20Web%20Development&url=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://freesourcelibrary.com/foundations-of-web-development-2/&title=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://freesourcelibrary.com/foundations-of-web-development-2/&name=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://freesourcelibrary.com/foundations-of-web-development-2/&description=Foundations%20of%20Web%20Development&media=https://freesourcelibrary.com/wp-content/uploads/2023/11/free-source-library-high-resolution-color-logo-1024x768-1.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://freesourcelibrary.com/foundations-of-web-development-2/&title=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://freesourcelibrary.com/foundations-of-web-development-2/&redirect_uri=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://freesourcelibrary.com/foundations-of-web-development-2/&redirect_uri=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Foundations%20of%20Web%20Development%20https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="viber://forward?text=Foundations%20of%20Web%20Development%20https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Foundations%20of%20Web%20Development%20https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> <a href="mailto:?subject=Foundations%20of%20Web%20Development&body=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Share via Email" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Share via Email</span> </a> <a href="#" rel="external noopener nofollow" title="Print" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Print</span> </a> </div> </div> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2024-01-18T09:28:15+03:00","datePublished":"2024-01-18T09:28:15+03:00","dateModified":"2024-01-18T09:28:15+03:00","headline":"Foundations of Web Development","name":"Foundations of Web Development","keywords":[],"url":"https:\/\/freesourcelibrary.com\/foundations-of-web-development-2\/","description":"In the realm of web development, the second lesson delves into the multifaceted aspects of embedding, page formatting, navigation between pages, and the intricacies of loading events. Understanding th","copyrightYear":"2024","articleSection":"programming","articleBody":"In the realm of web development, the second lesson delves into the multifaceted aspects of embedding, page formatting, navigation between pages, and the intricacies of loading events. Understanding these fundamental elements is paramount for web developers as they strive to create immersive and user-friendly online experiences.Embedding content within a webpage constitutes a pivotal facet of web development. This involves the integration of various types of media or external resources directly into the HTML document. The process often employs elements such as for embedding external content like maps or videos seamlessly within the page structure. Furthermore, the utilization of and tags enables the integration of multimedia elements directly into the webpage, contributing to a richer and more dynamic user experience.Page formatting, a critical aspect of web design, encompasses the arrangement and styling of content to enhance visual appeal and usability. Cascading Style Sheets (CSS) play a central role in this endeavor, enabling developers to define the presentation of HTML elements. Selectors and properties within CSS provide the means to control layout, colors, fonts, and other stylistic attributes, thus affording developers a high degree of flexibility in crafting visually engaging and responsive web pages.Navigation between pages, a fundamental feature of any website, is achieved through the implementation of hyperlinks. Hyperlinks, created using the (anchor) tag, facilitate seamless transitions between different pages or sections of a website. Understanding the attributes associated with hyperlinks, such as 'href' for specifying the target destination, empowers developers to create intuitive navigation systems that enhance user accessibility and overall browsing experience.As web applications become more sophisticated, employing techniques like Single Page Applications (SPAs), developers often resort to client-side routing to manage navigation without triggering a full page reload. This involves dynamically updating the URL and content on the page using JavaScript, offering a smoother and more responsive user interface.The intricacies of loading events are a crucial aspect of web development, influencing the timing and execution of various actions during a webpage's lifecycle. Developers grapple with understanding the nuances of events such as 'DOMContentLoaded' and 'load,' which signal different stages in the loading process. 'DOMContentLoaded' indicates that the initial HTML document has been completely loaded and parsed, allowing developers to manipulate the DOM structure. On the other hand, the 'load' event signifies the completion of loading all external resources, including images and stylesheets. Harnessing these events enables developers to orchestrate the execution of scripts or other actions at precisely the right moment, ensuring a seamless and optimized user experience.Furthermore, the advent of asynchronous programming and the use of techniques like AJAX (Asynchronous JavaScript and XML) have revolutionized how web pages interact with servers. Asynchronous requests allow data to be retrieved from the server without requiring a full page reload, enhancing the speed and interactivity of web applications. Developers must grasp the intricacies of asynchronous programming to harness its benefits effectively.In the context of web development, frameworks and libraries such as React, Angular, and Vue.js have gained prominence. These tools provide abstractions and pre-built components that streamline the development process. React, for instance, employs a virtual DOM (Document Object Model) to enhance rendering efficiency, while Angular follows a modular architecture, and Vue.js emphasizes simplicity and ease of integration. Mastery of these frameworks empowers developers to create scalable and maintainable web applications, catering to the ever-evolving demands of the digital landscape.In conclusion, the second lesson in web development encompasses a profound exploration of embedding content, shaping page layouts, navigating between pages, and understanding loading events. These foundational concepts are indispensable for developers striving to create compelling and responsive web experiences. As the digital landscape continues to evolve, adeptness in these areas equips developers with the tools and knowledge needed to stay at the forefront of web development practices.More Informations\n\nWithin the expansive realm of web development, the concept of embedding content assumes a multifaceted role, encompassing diverse techniques and elements that contribute to the dynamic and interactive nature of modern web pages. Embedding refers to the seamless integration of various media types and external resources directly into the structure of an HTML document, facilitating a richer user experience.The utilization of iframes, or inline frames, represents a prominent method of content embedding. These HTML elements act as containers, enabling the inclusion of external documents or resources within the current page. Common use cases include embedding maps, videos, or other web pages, creating a cohesive and integrated browsing experience. Developers employ attributes like 'src' to specify the source of the embedded content and 'width' and 'height' to define the dimensions of the iframe, providing a high degree of customization.Furthermore, the integration of multimedia elements, such as audio and video, is achieved through specialized HTML tags. The and tags empower developers to embed audio and video files directly into the webpage, eliminating the need for external plugins. Attributes like 'controls' facilitate user interaction by displaying playback controls, while 'autoplay' and 'loop' afford additional customization options. This approach not only enhances the visual appeal of the page but also caters to the growing demand for engaging and immersive content.Page formatting, an integral facet of web design, involves the meticulous arrangement and styling of content to achieve optimal visual aesthetics and user accessibility. Cascading Style Sheets (CSS) emerge as a foundational tool in this endeavor, providing a powerful mechanism for defining the presentation of HTML elements. Selectors, properties, and values within CSS declarations empower developers to control layout, colors, fonts, and other stylistic attributes, fostering a harmonious and visually appealing design.Responsive web design, a pivotal aspect of page formatting, addresses the need for adaptability across various devices and screen sizes. Techniques such as media queries within CSS enable developers to apply distinct styles based on the characteristics of the user's device, ensuring a seamless and visually pleasing experience on desktops, tablets, and mobile devices. This emphasis on responsiveness reflects the evolving landscape of web development, where user experience across diverse platforms is paramount.Navigation between pages constitutes a fundamental aspect of the web browsing experience. Hyperlinks, created using the (anchor) tag, serve as the linchpin for seamless transitions between different pages or sections of a website. Understanding the 'href' attribute, which specifies the target destination, empowers developers to craft intuitive navigation systems that enhance user accessibility and streamline the overall browsing experience.As web applications evolve, the adoption of Single Page Applications (SPAs) becomes increasingly prevalent. SPAs, characterized by dynamic updates to the content of a single HTML page, necessitate client-side routing to manage navigation without triggering a full page reload. This entails manipulating the URL and dynamically updating content using JavaScript frameworks like React, Angular, or Vue.js. Client-side routing enhances the fluidity and responsiveness of web applications, providing users with a seamless and engaging interaction model.The orchestration of loading events represents a nuanced aspect of web development, influencing the timing and execution of various actions during a webpage's lifecycle. The 'DOMContentLoaded' event signals that the initial HTML document has been completely loaded and parsed, allowing developers to manipulate the Document Object Model (DOM) effectively. This event is crucial for executing scripts or operations that depend on the availability of the DOM structure.The 'load' event, distinct from 'DOMContentLoaded,' marks the completion of loading all external resources, including images, stylesheets, and other assets. Harnessing the 'load' event ensures that scripts or functionalities dependent on these resources execute in a timely manner, contributing to an optimized user experience. Understanding these loading events is paramount for developers seeking to create performant and responsive web applications.In the ever-evolving landscape of web development, the advent of asynchronous programming and AJAX (Asynchronous JavaScript and XML) has introduced transformative paradigms. Asynchronous requests enable data retrieval from the server without necessitating a full page reload, contributing to enhanced speed and interactivity. Developers adept in asynchronous programming can leverage techniques like Promises and asynchronous functions to manage complex workflows and optimize the user experience.Frameworks and libraries play a pivotal role in shaping the modern web development landscape. React, Angular, and Vue.js represent prominent players in this domain, each offering unique approaches and features. React, leveraging a virtual DOM, enhances rendering efficiency and facilitates the creation of interactive user interfaces. Angular, following a modular architecture, provides a comprehensive framework for building scalable and maintainable applications. Vue.js, emphasizing simplicity and ease of integration, has gained popularity for its approachable learning curve and flexibility. Mastery of these frameworks empowers developers to navigate the complexities of modern web development, delivering robust and innovative solutions.In conclusion, the second lesson in web development encompasses a profound exploration of embedding content, shaping page layouts, facilitating navigation between pages, and understanding the intricacies of loading events. These foundational concepts constitute the bedrock upon which developers construct compelling, responsive, and visually appealing web experiences. As the digital landscape continues to evolve, proficiency in these areas equips developers with the tools and knowledge needed to address the ever-growing demands of contemporary web development.Keywords\nEmbedding:Explanation: Embedding in web development refers to the process of seamlessly integrating various types of content or external resources directly into the HTML structure of a webpage. This includes elements such as iframes for external documents, and specific tags like and for embedding multimedia content.Interpretation: Embedding enhances user engagement by allowing developers to integrate diverse content types, creating a cohesive and immersive online experience.Iframes:Explanation: Iframes, or inline frames, are HTML elements used for embedding external documents or resources within a webpage. They act as containers, providing a way to integrate content from other sources seamlessly.Interpretation: Iframes offer a flexible and versatile method for incorporating external content, such as maps or videos, into a webpage without compromising its structure.Multimedia Elements:Explanation: Multimedia elements, represented by HTML tags like and , enable the integration of audio and video files directly into a webpage. Attributes like 'controls,' 'autoplay,' and 'loop' enhance the user experience.Interpretation: Integrating multimedia elements directly into a webpage enhances its richness, providing users with dynamic and engaging content without relying on external plugins.Page Formatting:Explanation: Page formatting involves the arrangement and styling of content on a webpage for optimal visual appeal and user accessibility. Cascading Style Sheets (CSS) play a central role in defining the presentation of HTML elements.Interpretation: Page formatting is crucial for creating visually appealing and well-organized web pages, ensuring a positive user experience.Cascading Style Sheets (CSS):Explanation: CSS is a stylesheet language used for describing the presentation of a document written in HTML. It provides a powerful set of rules and declarations to control the styling and layout of HTML elements.Interpretation: CSS empowers developers to customize the appearance of web pages, offering flexibility in design and ensuring a consistent look across different sections of a website.Responsive Web Design:Explanation: Responsive web design is an approach that ensures a webpage's layout and content adapt to different devices and screen sizes. Media queries in CSS are commonly used to implement responsive design.Interpretation: Responsive web design is essential for providing a seamless user experience across a variety of devices, from desktops to tablets and mobile phones.Navigation:Explanation: Navigation involves the creation of links and structures that enable users to move between different pages or sections of a website. Hyperlinks, created using the tag, play a pivotal role in navigation.Interpretation: Effective navigation is crucial for user accessibility, allowing users to explore and interact with the content seamlessly.Single Page Applications (SPAs):Explanation: SPAs are web applications that load a single HTML page and dynamically update content as the user interacts with the application. Client-side routing is often used to manage navigation without full page reloads.Interpretation: SPAs provide a more fluid and responsive user experience by minimizing page reloads, and client-side routing enables dynamic content updates while maintaining a cohesive user interface.Loading Events:Explanation: Loading events, such as 'DOMContentLoaded' and 'load,' are events triggered during the loading process of a webpage. They mark different stages, with 'DOMContentLoaded' indicating the complete parsing of the initial HTML document and 'load' indicating the completion of loading all external resources.Interpretation: Understanding loading events is crucial for developers to ensure proper timing of actions and optimizations during the webpage's lifecycle.Asynchronous Programming:Explanation: Asynchronous programming involves executing operations independently, allowing the program to continue running without waiting for a specific task to complete. AJAX is a common technique used for asynchronous communication with servers in web development.Interpretation: Asynchronous programming enhances the speed and interactivity of web applications by allowing certain tasks to be performed without blocking the overall execution flow.Frameworks and Libraries:Explanation: Frameworks and libraries, such as React, Angular, and Vue.js, provide pre-built components and abstractions that streamline the web development process. They offer distinct approaches and features for building scalable and maintainable web applications.Interpretation: These tools empower developers by simplifying complex tasks, enhancing efficiency, and providing a structured approach to building modern web applications.In summary, the key terms outlined in this article encompass a wide array of fundamental concepts in web development, ranging from the integration of diverse content types to the orchestration of loading events and the use of frameworks to streamline the development process. Each term plays a vital role in shaping the landscape of web development and contributes to the creation of engaging and user-friendly online experiences.","publisher":{"@id":"#Publisher","@type":"Organization","name":"Free Source Library","logo":{"@type":"ImageObject","url":"https:\/\/freesourcelibrary.com\/wp-content\/uploads\/2023\/10\/free-source-library-high-resolution-logo-white-on-transparent-background.png"},"sameAs":["https:\/\/web.facebook.com\/freesourcelibrary\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/freesourcelibrary.com\/foundations-of-web-development-2\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Ayoob","url":"https:\/\/freesourcelibrary.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/freesourcelibrary.com\/wp-content\/uploads\/2023\/11\/free-source-library-high-resolution-color-logo-1024x768-1.png","width":1200,"height":768}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Foundations%20of%20Web%20Development&url=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://freesourcelibrary.com/foundations-of-web-development-2/&title=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://freesourcelibrary.com/foundations-of-web-development-2/&name=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://freesourcelibrary.com/foundations-of-web-development-2/&description=Foundations%20of%20Web%20Development&media=https://freesourcelibrary.com/wp-content/uploads/2023/11/free-source-library-high-resolution-color-logo-1024x768-1.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://freesourcelibrary.com/foundations-of-web-development-2/&title=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="mailto:?subject=Foundations%20of%20Web%20Development&body=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Share via Email" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Share via Email</span> </a> <a href="#" rel="external noopener nofollow" title="Print" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Print</span> </a> </div> </div> </article> <div class="stream-item stream-item-below-post"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <div class="post-components"> <div class="stream-item stream-item-below-post-comments"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> </div> </div> </div></div><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3293364314201893" data-ad-slot="2108173765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © Copyright 2024, All Rights Reserved  |  <span style="color:red;" class="tie-icon-heart"></span>  |  <a href="https://freesourcelibrary.com/about-us/">About Us</a>  |  <a href="https://freesourcelibrary.com/terms-and-conditions/">Terms and Conditions</a> </footer> </div><div class="copyright-text copyright-text-second"><footer> <strong>🌐 Explore Our Websites:</strong>  |  <a href="https://mwade3.com/" target="_blank">📖 مواضيع (AR)</a>  |  <a href="https://revistacompleta.com/" target="_blank">📚 La Revista Completa (ES)</a>  |  <a href="https://lasujets.com/" target="_blank">📰 Lasujets (FR)</a>  |  <a href="https://meukultura.com/" target="_blank">🎨 MEU Kultura (PT)</a>  |  <a href="https://freesourcelibrary.com/" target="_blank">📂 Free Source Library (EN)</a>  |  <a href="https://lovewithrecipes.com/" target="_blank">🍴 Love with Recipes (EN)</a>  |  <a href="https://it-solutions.center/" target="_blank">💻 IT Solutions Center (AR)</a> </footer></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://web.facebook.com/freesourcelibrary/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div> </div> </div> </div> </footer> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Foundations%20of%20Web%20Development&url=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://freesourcelibrary.com/foundations-of-web-development-2/&title=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://freesourcelibrary.com/foundations-of-web-development-2/&name=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://freesourcelibrary.com/foundations-of-web-development-2/&description=Foundations%20of%20Web%20Development&media=https://freesourcelibrary.com/wp-content/uploads/2023/11/free-source-library-high-resolution-color-logo-1024x768-1.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://freesourcelibrary.com/foundations-of-web-development-2/&title=Foundations%20of%20Web%20Development" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://freesourcelibrary.com/foundations-of-web-development-2/&redirect_uri=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://freesourcelibrary.com/foundations-of-web-development-2/&redirect_uri=https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Foundations%20of%20Web%20Development%20https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="viber://forward?text=Foundations%20of%20Web%20Development%20https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Foundations%20of%20Web%20Development%20https://freesourcelibrary.com/foundations-of-web-development-2/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> </div> </div> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Back to top button</span> </a> </div> <aside class=" side-aside normal-side dark-skin dark-widgetized-area appear-from-left" aria-label="Secondary Sidebar" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">Close</span> </a> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://freesourcelibrary.com/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Search" /> </form> </div> <div id="mobile-menu" class=""> </div> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://web.facebook.com/freesourcelibrary/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div> </div> </div> </aside> </div> </div> <style> .copy-tooltip { position: absolute; background-color: blue; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 14px; font-family: Arial, sans-serif; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); display: none; z-index: 9999; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(-10px); } .copy-tooltip.show { opacity: 1; transform: translateY(0); } </style> <div class="copy-tooltip" id="copyTooltip"></div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { var tooltip = document.getElementById('copyTooltip'); function showTooltip(e, message) { tooltip.innerHTML = message; tooltip.style.left = e.pageX + 20 + 'px'; tooltip.style.top = e.pageY + 20 + 'px'; tooltip.classList.add('show'); tooltip.style.display = 'block'; setTimeout(function() { tooltip.classList.remove('show'); setTimeout(function() { tooltip.style.display = 'none'; }, 300); }, 3000); // Tooltip will disappear after 3 seconds } document.addEventListener('copy', function (e) { e.preventDefault(); var pageUrl = window.location.href; e.clipboardData.setData('text/plain', pageUrl); showTooltip(e, 'Copying content is not allowed. Use sharing buttons instead.'); }); document.addEventListener('keydown', function (e) { if (e.ctrlKey && (e.key === 'c' || e.key === 'C')) { e.preventDefault(); var pageUrl = window.location.href; navigator.clipboard.writeText(pageUrl); showTooltip(e, 'Copying content is not allowed. Use sharing buttons instead.'); } }); document.addEventListener('contextmenu', function (e) { e.preventDefault(); showTooltip(e, 'Right-click is disabled.'); }); }); </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Consent Preferences" style="background-color:#0056a7"> <button class="cky-btn-revisit" aria-label="Consent Preferences"> <img src="https://freesourcelibrary.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#121212;border-color:#2a2a2a"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#d0d0d0">Free Source Library value your privacy</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#d0d0d0"> <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Customize" data-cky-tag="settings-button" style="color:#d0d0d0;background-color:transparent;border-color:#d0d0d0">Customize</button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="reject-button" style="color:#d0d0d0;background-color:transparent;border-color:#d0d0d0">Reject All</button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="accept-button" style="color:#d0d0d0;background-color:#1863dc;border-color:#1863dc">Accept All</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#d0d0d0;background-color:#121212;border-color:#2A2A2A"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#d0d0d0">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://freesourcelibrary.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#d0d0d0"> <p>Free Source Library use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p> <p>The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site.</p> <p>We also use third-party cookies that help us analyze how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p> <p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#d0d0d0">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#d0d0d0"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#d0d0d0">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#d0d0d0"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#d0d0d0">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#d0d0d0"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#d0d0d0">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#d0d0d0"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#d0d0d0">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#d0d0d0"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="detail-reject-button" style="color:#d0d0d0;background-color:transparent;border-color:#d0d0d0"> Reject All </button> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#d0d0d0;background-color:transparent;border-color:#d0d0d0"> Save My Preferences </button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="detail-accept-button" style="color:#d0d0d0;background-color:#1863dc;border-color:#1863dc"> Accept All </button> </div></div></div></div></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//all2.atico-jo.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '11']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>  <div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Close</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Search"> <form method="get" class="tie-popup-search-form" action="https://freesourcelibrary.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Search for" autocomplete="off" placeholder="Type and hit Enter" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Search for</span> </button> </form> </div> </div> </div> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Close</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Search"> <form method="get" class="tie-popup-search-form" action="https://freesourcelibrary.com/"> <input class="tie-popup-search-input is-ajax-search" inputmode="search" type="text" name="s" title="Search for" autocomplete="off" placeholder="Search for" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Search for</span> </button> </form> </div> </div> </div> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-consent-mode-3d6495dceaebc28bcca3.js" id="googlesitekit-consent-mode-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"","ajaxurl":"https:\/\/freesourcelibrary.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"","lazyload":"","select_share":"true","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"1","lang_no_results":"Nothing Found","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2" id="tie-scripts-js"></script> <script type="text/javascript" id="tie-scripts-js-after"> /* <![CDATA[ */ jQuery.ajax({ type : "GET", url : "https://freesourcelibrary.com/wp-admin/admin-ajax.php", data : "postviews_id=26227&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); /* ]]> */ </script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/themes/jannah/assets/js/live-search.js?ver=7.0.2" id="tie-js-livesearch-js"></script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2" id="tie-js-single-js"></script> <script type="text/javascript" id="wp-consent-api-js-extra"> /* <![CDATA[ */ var consent_api = {"consent_type":"","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent"}; /* ]]> */ </script> <script type="text/javascript" src="https://freesourcelibrary.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=1.0.8" id="wp-consent-api-js"></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> </body> </html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="8e6eaa73b86cc52111976ac5-|49" defer></script>