O/L ICT - Lesson 14: Web Developing Simulator Tool
Interactive HTML Editor for Learning Web Development
Grade 11 ICT
HTML Basics
Basic Structure
<!DOCTYPE html>
<html></html>
<head></head>
<body></body>
Text Elements
<h1> to <h6> - Headings
<p> - Paragraph
<br> - Line break
<hr> - Horizontal line
Formatting
<b> - Bold text
<i> - Italic text
<u> - Underline
Advanced Elements
Lists
<ul> - Unordered list
<ol> - Ordered list
<li> - List item
Links & Images
<a href="url"> - Hyperlink
<img src="image.jpg" alt="text">
Tables
<table> - Table
<tr> - Table row
<td> - Table data
<th> - Table header
Attributes ℹ️ Attributes provide additional information about HTML elements. They are always specified in the start tag.
href="url" - Link destination
src="source" - Image source
alt="text" - Alternative text
border="1" - Table border
Web Development Concepts
Web Publishing
- Web Hosting
- Domain Names
- FTP (File Transfer Protocol)
- Web Server
Web Development Tools
- Text Editors (Notepad, VS Code)
- Web Authoring Tools (Dreamweaver)
- CMS (WordPress)
Website Types
- Static Websites
- Dynamic Websites
- Responsive Websites
HTML Code Simulator
Quick Templates:
Web Page Preview
Welcome to O/L ICT Web Development
This is a paragraph of text. This text is bold and this is italic.
Here is a line break:
This text is on a new line.
My Favorite Subjects
- Information & Communication Technology
- Mathematics
- Science
Useful Links
Visit Example WebsiteHTML Code Analysis:
HTML tags detected: 0
Validation status: Not validated
Lesson Examples & Exercises
Example 1: Creating a Table
Create a table showing student marks:
<table border="1">
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>John</td>
<td>85</td>
</tr>
</table>
Example 2: Image with Alt Text
Add an image with alternative text:
<img src="logo.png" alt="School Logo" width="100" height="100">
Example 3: Ordered & Unordered Lists
Create different types of lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
Example 4: Hyperlinks
Create links to different resources:
<a href="https://www.google.com">Search Google</a><br>
<a href="mailto:teacher@school.edu">Email Teacher</a>
Student Examination Results
| Student Name | ICT Marks | Mathematics |
|---|---|---|
| John Doe | 85 | 90 |
| Jane Smith | 92 | 88 |
| David Brown | 78 | 85 |
Table created using <table>, <tr>, <th>, and <td> tags.
`, form: `Contact Us
`, list: `Types of Lists in HTML
Unordered List (Bullets)
- ICT
- Mathematics
- Science
Ordered List (Numbers)
- Open HTML file
- Write code
- Save file
- Preview in browser
Definition List
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
Useful Educational Links
Google Search - Search for information
Wikipedia - Free encyclopedia
Khan Academy - Free online courses
Email Link
Link to another page
`, image: `Adding Images to Web Pages
Image with alt text (alternative text):
Image as a link:
Image alignment:
This text wraps around the left-aligned image. The image is aligned to the left with some horizontal space.
` }; const examples = { table: `| Student Name | ICT Marks |
|---|---|
| John | 85 |
| Sarah | 92 |
The 'alt' attribute provides alternative text for screen readers and when images cannot be displayed.
`, list: `Unordered List
- First item
- Second item
Ordered List
- Step one
- Step two
Send Email
Jump to Section 2` };// Main Functions function previewHtml() { const htmlCode = document.getElementById('html-code-input').value; const previewFrame = document.getElementById('html-preview'); // Extract content within the body tag for safer rendering const bodyMatch = htmlCode.match(/
${altText}
`;
}
});
// Apply basic table styling
previewFrame.querySelectorAll('table').forEach(table => {
if (!table.getAttribute('border')) {
table.style.borderCollapse = 'collapse';
table.style.width = '100%';
}
});
previewFrame.querySelectorAll('th, td').forEach(cell => {
if (!cell.getAttribute('style') || !cell.getAttribute('style').includes('border')) {
cell.style.border = '1px solid #333';
cell.style.padding = '8px';
}
});
}function resetHtmlCode() {
document.getElementById('html-code-input').value = templates.basic;
previewHtml();
}function validateHtml() {
const htmlCode = document.getElementById('html-code-input').value;
const statusElement = document.getElementById('validation-status');
// Basic validation checks
let errors = [];
let warnings = [];
// Check for required tags
if (!htmlCode.includes('')) {
warnings.push('Missing DOCTYPE declaration');
}
if (!htmlCode.includes('')) {
errors.push('Missing <html> tag');
}
if (!htmlCode.includes('')) {
warnings.push('Missing <head> tag');
}
if (!htmlCode.includes('')) {
errors.push('Missing <body> tag');
}
// Check for unclosed tags (basic check)
const tagPairs = [
{ open: '', close: '
' }, { open: '', close: '
' }, { open: '', close: '
' }, { open: '- ', close: '
- ', close: '
HTML Analysis:
Total tags found: ${tagCount}
Tag breakdown: ${tagDetails.join(', ')}
Document type: ${htmlCode.includes('') ? 'HTML5' : 'Unknown'}
`; }function loadTemplate(templateName) { if (templates[templateName]) { document.getElementById('html-code-input').value = templates[templateName]; previewHtml(); } }function loadExample(exampleName) { const textarea = document.getElementById('html-code-input'); const currentCode = textarea.value; // Insert example at cursor position or append if (examples[exampleName]) { textarea.value = currentCode + '\n\n' + examples[exampleName]; previewHtml(); } }function downloadHtml() { const htmlCode = document.getElementById('html-code-input').value; const blob = new Blob([htmlCode], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'webpage.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); alert('HTML file downloaded as "webpage.html"'); }// Initialize the simulator document.addEventListener('DOMContentLoaded', function() { previewHtml(); // Initial preview // Add event listener for real-time preview (optional) // document.getElementById('html-code-input').addEventListener('input', previewHtml); });
Select Language:
Copyright © 2026 | schoolict.net | Admin (rmssd2000@yahoo.com)