ICT Grade 13 - Web Development Learning Lab (Competency 10)

Interactive exercises with drag & drop, dropdowns, and live preview. Covers HTML5, CSS, Multimedia, and Forms.

🌐 1. The World Wide Web (WWW)

Competency 10.1: Explores the need for web

The WWW is a massive collection of documents and other resources linked by hyperlinks and URLs. Websites can be categorized based on their purpose:

  • Informational/News: Provides current events and facts.
  • Educational: Offers learning materials (like this tool!).
  • Commercial/E-commerce: Facilitates buying and selling of products and services.
  • Web Portals: Gateways that offer a wide range of services and links, often personalized.

2. HTML Structure Builder

Drag and drop the HTML tags to build a basic page structure:

Available Tags:

<!DOCTYPE html>
<html>
<head>
<title>
<body>
<h1>
<p>
</html>

Build Your HTML Page:

Drop tags here to build your HTML page.

Generated HTML:

3. CSS Selector Quiz

Match the CSS selector with its description:

Selectors:

Element Selector
Class Selector
ID Selector
Group Selector

Descriptions:

Selects all elements of a given type (e.g., p)
Selects elements with a specific class (e.g., .highlight)
Selects a single element with a unique ID (e.g., #header)
Selects multiple elements at once (e.g., h1, h2, p)

4. HTML Tag Dropdown Builder

Choose HTML tags from dropdowns to build a list:

5. Form Element Picker

Select form elements to add to your form:

Text Input
Password Input
Email Input
Checkbox
Radio Button
Textarea
Dropdown (Select)
Submit Button

Your Form:

6. CSS Property Slider

Adjust CSS properties for the box below:

5px 10px 5px
Adjust me with sliders!

CSS Code:


🚀 7. Publishing and Maintenance

Competency 10.8: Publishes and maintains web sites

After development, the website must be published. This involves:

  • Local Publishing: Testing the site on your own computer or within a school Intranet.
  • Internet Publishing: Uploading files to a web server provided by a Web Service provider (using FTP or similar tools).
  • Performance Factors: Investigating factors like image size, code efficiency, and server response time which affect website performance.

Students should now be able to use an authoring tool (like a modern IDE) to create and deploy the web pages they have learned about.

🔴 Lesson List
SIDE BUTTON ON
Sign In Register
×

👋 Welcome Back!

🚀
Ready to Learn?Pick up where you left off.
🔑
Forgot Password?Click the link below to reset.
📢
New FeaturesCheck out the new AI Voice tool.

Sign In

👤
🔒
or continue with
Google Facebook

Already have an account? Register Now