WGU Web Development Applications 問題集 練習問題・模擬試験｜日本語版＆英語版対応

Explanation: Cascading Style Sheets (CSS) are used to control the presentation of web pages, including aspects such as layout, colors, fonts, and other visual styles. They are a cornerstone technology of the World Wide Web, along with HTML and JavaScript. Here ’ s a detailed breakdown: Purpose of CSS: CSS is designed to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting, and reduce complexity and repetition in the structural content. Setting Visual Rules: CSS allows developers to define rules that specify how different elements of a web page should be displayed. For example, CSS rules can change text color, font size, spacing between elements, and even the overall layout of the web page. These rules are applied by the browser to render the web page according to the defined styles. Cascading Nature: The term "cascading" in CSS refers to the process of combining multiple style sheets and resolving conflicts between different CSS rules. This allows developers to use different sources of style information, which can be combined in a hierarchical manner. For instance, a browser style sheet, an external style sheet, and inline styles can all contribute to the final rendering of a web page. Benefits of CSS: Consistency: By using CSS, developers can ensure a consistent look and feel across multiple web pages. Maintainability: CSS makes it easier to update the visual presentation of a web page without altering the HTML structure. This is particularly useful for maintaining large websites. Reusability: CSS rules can be reused across multiple pages, reducing redundancy and making it easier to implement changes globally. Examples of CSS: css Copy code body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } In this example, the body element is given a light blue background color, and the h1 element is styled with a navy color and a left margin of 20 pixels. Reference: MDN Web Docs on CSS W3C CSS Specifications

Explanation: HTML5 introduced several new features that enhanced web development capabilities significantly. One of the notable features is the native drag-and-drop capability. Native Drag-and-Drop Capability: Description: HTML5 allows developers to create drag-and-drop interfaces natively using the draggable attribute and the DragEvent interface. This means elements can be dragged and dropped within a web page without requiring external JavaScript libraries. Implementation: Making an Element Draggable: To make an element draggable, you set the draggable attribute to true: <div id="drag1" draggable="true">Drag me!</div> Handling Drag Events: You use event listeners for drag events such as dragstart, dragover, and drop: document.getElementById("drag1").addEventListener("dragstart", function(event) { event.dataTransfer.setData("text", event.target.id); }); document.getElementById("dropzone").addEventListener("dragover", function(event) { event.preventDefault(); }); document.getElementById("dropzone").addEventListener("drop", function(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); }); Example: This example demonstrates a simple drag-and-drop operation: html Copy code <div id="drag1" draggable="true">Drag me!</div> <div id="dropzone" style="width: 200px; height: 200px; border: 1px solid black;">Drop here</div> Reference: W3C HTML5 Specification - Drag and Drop MDN Web Docs - HTML Drag and Drop API HTML5 Doctor - Drag and Drop HTML5's native drag-and-drop feature streamlines the process of creating interactive web applications by eliminating the need for third-party libraries, thus making it a powerful addition to the HTML standard.

Explanation: The <footer> tag is used to define a footer for a document or a section. A footer typically contains information about the author of the document, contact information, copyright details, and links to terms of use, privacy policy, etc. It is a semantic element in HTML5, which means it clearly describes its meaning to both the browser and the developer. Purpose of <footer>: The <footer> element represents a footer for its nearest sectioning content or sectioning root element. It typically contains information like: Contact information Copyright information Links to related documents Information about the author Usage Example: <footer> <p>Contact us at: [email protected]</p> <p>© 2024 Example Company</p> </footer> In this example, the <footer> tag encloses contact information and copyright details. Semantic Importance: Using semantic elements like <footer> enhances the accessibility of the document and provides better context for search engines and other user devices. Reference: MDN Web Docs on <footer> W3C HTML5 Specification on <footer>