O Level Web Design Paper July 2024

HTML (HyperText Markup Language) was first proposed in 1989 by Tim Berners-Lee, a British computer scientist. He was working at CERN (the European Organization for Nuclear Research) when he came up with the idea of a system that could link documents together over the internet using hypertext.

Timeline:

• 1989: Tim Berners-Lee proposed the concept of HTML and the World Wide Web.
• 1991: The first version of HTML was introduced to the public, which was a simple language with just 18 tags for creating basic webpages.
• 1995: HTML became more standardized and expanded with the release of HTML 2.0.

Since then, HTML has evolved significantly with newer versions such as HTML 4.01 (1999) and HTML5 (2014), which brought many enhancements for multimedia, mobile devices, and richer web experiences.

Correct Answer: B) 1989

In W3.CSS, the basic grid system is based on a 12-column layout.

This means that the grid is divided into 12 equal-width columns, and you can use different combinations of these columns to structure your layout. Each element can span across one or more of these columns, depending on the desired width for that element.

Key Points about the W3.CSS Grid:

1. 12 Columns: The default grid system is based on 12 columns. You can divide the screen into 12 equal parts, with each column taking up one fraction (1/12) of the screen width.
2. Responsive Layout: W3.CSS provides responsive features, meaning the grid can adapt to different screen sizes, such as mobile, tablet, and desktop views.
3. Column Sizing: You can control how many columns an element should span using class names like w3-col and modifiers such as w3-col s4, w3-col m6, or w3-col l3, where the number indicates how many columns it should span out of the total 12 columns.

Example:

In this example:

• On small screens (s12), each column takes up the full width.
• On medium screens (m6), each column spans 6 columns (half of the grid).
• On large screens (l4), each column spans 4 columns (a third of the grid).

Correct Answer: B) 12

In Sublime Text, the shortcut Ctrl + Shift + F is used for Find in Files.

Function:

• Find in Files allows you to search for a specific text or pattern across all files in a project or directory.
• This feature enables you to search through multiple files at once, rather than searching one file at a time.

How it Works:

1. Press Ctrl + Shift + F (on Windows/Linux) or Cmd + Shift + F (on macOS).
2. A search bar will appear at the bottom of the Sublime Text editor where you can:
   • Enter the search term or regular expression.
   • Specify the directory or folder where you want to search (optional).
   • Filter by file types (optional).
3. Once you hit Enter, Sublime Text will display a list of all occurrences of the search term in the specified files, allowing you to quickly navigate to them.

Summary:

• Shortcut: Ctrl + Shift + F
• Function: Find in Files (searches across all files in a folder or project).

Correct Answer: C) find in the files

XML (eXtensible Markup Language) is a markup language designed to store and transport data. It is a platform-independent format used to represent structured data in a human-readable and machine-readable format. XML allows users to define their own custom tags, making it flexible for a variety of uses.

Key Features of XML:

1. Extensible: You can create your own tags to structure data, unlike HTML which has predefined tags.
2. Hierarchical Structure: Data in XML is organized in a tree structure, with nested elements to represent relationships.
3. Human-Readable: XML files are text-based and can be opened and edited by humans.
4. Machine-Readable: XML files can be parsed and processed by machines or applications for data exchange.
5. Platform-Independent: XML is independent of hardware and software, making it useful for sharing data across different systems and platforms.

Common Uses:

• Data exchange between different systems and applications.
• Configuration files for software and applications.
• Document storage like eBooks, invoices, and product catalogs.

Correct Answer: B) Extensible markup language

LESS (Less Cascading Style Sheets) is a CSS preprocessor that extends CSS with features like:

• Variables for reusable values (e.g., colors).
• Nesting to organize styles based on HTML structure.
• Mixins for reusable blocks of code.
• Operations for mathematical calculations (e.g., width: 10px * 2).
• Functions for color manipulation (e.g., lighten(@color, 20%)).

LESS files are written in .less format and need to be compiled into regular CSS before use in a web project.

Key Benefits:

• Makes CSS more maintainable and reusable.
• Improves organization and readability for larger projects.

Correct Answer: B) Less Cascading Style Sheets

Cross-Site Scripting (XSS) is a type of security vulnerability that allows attackers to inject malicious scripts into webpages viewed by other users. It occurs when an attacker is able to inject client-side scripts (usually JavaScript) into web pages, which are then executed in the context of another user's browser. This can lead to a variety of malicious outcomes, such as stealing user data, hijacking sessions, defacing websites, or spreading malware.

Types of XSS:

1. Stored XSS (Persistent XSS):

   • In this type of attack, the malicious script is permanently stored on the server, typically in a database, and is served to users who access a particular page or resource.
   • Example: An attacker submits a malicious script in a comment section, and the script is stored in the website's database. When other users view the comment, the malicious script is executed.

2. Reflected XSS (Non-Persistent XSS):

   • In this case, the malicious script is reflected off the server immediately in the response to a request, usually via a URL or query parameter.
   • Example: An attacker sends a link with a malicious script embedded in the URL, and when the victim clicks on the link, the script runs in their browser.

3. DOM-based XSS:

   • This occurs when the vulnerability is in the client-side code (JavaScript) rather than in the server-side code. The attack is triggered when the browser's Document Object Model (DOM) is manipulated by malicious input.
   • Example: If user input (like a URL) is inserted into the DOM without sanitization, an attacker could inject a script that gets executed when the page is loaded.

How XSS Works:

1. An attacker identifies a website or web application that does not properly validate or sanitize user input.
2. The attacker crafts a payload (malicious script), typically JavaScript, and injects it into a form, URL, or other input field.
3. When other users view the page with the injected script, the browser executes the malicious code, which can then steal cookies, session data, or perform other harmful actions.

Potential Consequences of XSS:

• Session Hijacking: Stealing session cookies, allowing attackers to impersonate a user.
• Data Theft: Capturing sensitive information like usernames, passwords, or credit card details.
• Malware Distribution: Redirecting users to malicious sites or injecting malicious code that infects their machines.
• Phishing Attacks: Displaying fake login forms or other forms of social engineering to steal user credentials.

Prevention of XSS:

1. Input Validation and Output Encoding:

   • Ensure that any user input (e.g., form fields, query parameters) is properly validated and sanitized before being processed or rendered on the page. Use context-specific output encoding (e.g., escaping HTML, JavaScript, URL).

2. Use Content Security Policy (CSP):

   • Implement a Content Security Policy to restrict the sources of executable scripts on your site, helping to mitigate the impact of XSS attacks.

3. Sanitize Input:

   • Use libraries or frameworks that automatically sanitize input (such as OWASP's Java HTML Sanitizer or similar tools).

4. Avoid Inline JavaScript:

   • Avoid using inline JavaScript (e.g., <script> tags directly in HTML or event handlers like onclick) and use external script files instead.

5. HTTP-only and Secure Cookies:

   • Mark session cookies as HTTP-only to prevent JavaScript from accessing them, and use Secure flags to ensure they are only sent over HTTPS.

6. Use Frameworks with Built-in Protection:

   • Many modern web frameworks (like React, Angular, and Vue.js) have built-in mechanisms for preventing XSS attacks by automatically escaping user input when rendering it on the page.

Example of XSS Attack:

An attacker might input the following script into a comment box on a vulnerable website:

If the website displays this comment without properly sanitizing the input, the script will run in the browser of anyone who views that comment, showing an alert box.

Correct Answer: A) Cross-site scripting (XSS)

A WYSIWYG editor is a type of software or interface that allows users to create content (such as web pages, documents, or presentations) in a way that visually reflects how the final output will appear. In other words, the user sees the content as it will look when it's finished, without needing to understand or interact with the underlying code (e.g., HTML or CSS for web content).

Common Examples of WYSIWYG Editors:

• Word processors like Microsoft Word or Google Docs, where you can format text, insert images, and create documents with a visual interface.
• Web-based page builders like Wix, WordPress (Classic Editor), or Squarespace, where users can design web pages without directly writing HTML or CSS code.
• Rich-text editors like the one used in email clients or CMS systems, where text can be styled using a toolbar instead of entering HTML tags.

Correct Answer: A) What You See Is What You Get

(A) File formats like MP3, MP4, and WebM are called container formats.

• Correct.
  MP3, MP4, and WebM are indeed container formats. A container format holds various types of media (such as audio, video, and metadata) together in a single file. For example:
  • MP3 is an audio container.
  • MP4 is a multimedia container, typically holding both video and audio.
  • WebM is also a multimedia container format used for web video.

(B) Heading level 1 has an implicit style.

• Correct.
  In HTML, heading elements like <h1> have implicit styles, which are usually defined by the browser's default stylesheet. By default, <h1> elements are often bold and have a larger font size compared to other text elements.

(C) Elements have no content and are called void elements.

• Correct.
  Void elements (also called self-closing elements) are HTML elements that do not have any content or closing tags. Examples include <img>, <br>, <input>, <hr>, etc. They do not contain any nested content and are written with a single opening tag.

(D) All of these.

• Since all three individual statements (A), (B), and (C) are correct, the correct answer is: (D) All of these.

Correct Answer: D) All of these

In W3.CSS, the class w3-container is used to create a container element that adds padding and margin around the content inside it. This class helps structure the layout of a webpage and makes it easier to organize content by providing spacing and alignment.

Key Features of w3-container:

• Padding and Margin: It adds default padding around the content to create space inside the container and margins for spacing between the container and other elements on the page.
• Responsive: The w3-container class is designed to work well with W3.CSS's responsive grid system, ensuring proper layout and alignment on different screen sizes.
• Block-Level Element: It generally acts as a block-level container, meaning it will span the entire width of its parent element unless otherwise specified.

Correct Answer: A) class="w3-container"

sessionStorage, localStorage and Cookies all are used to store data on the client-side. Each one has its own storage and expiration limit. 

Correct Answer: D) all of the above

For full transparency in CSS, the alpha value in the rgba function should be 0, which indicates no opacity (fully transparent).

So, the correct option is:

(B) rgba(255,255,255,0.0)

Correct Answer: B) rgba(255,255,255,0.0)