Event Overview:
This workshop is designed to guide participants through the process of creating an educational website using HTML. From structuring pages, adding text and images, to creating links and tables, participants will gain hands-on experience and by the end, they will be able to build a simple yet functional educational website.
This program is ideal for teachers, online instructors, IT students, and anyone interested in enhancing their web development skills.
Event Objectives:
By the end of this workshop, participants will be able to:
-
Explain the basics of HTML structure and main tags.
-
Create educational web pages with text and images.
-
Add links, menus, and simple tables to web pages.
-
Prepare a website for online use.
-
Apply best practices for simple, user-friendly web design.
Target Audience:
-
Teachers and educators
-
IT and computer science students
-
Web development beginners
-
Anyone interested in building educational websites
Event Format:
-
Format: 100% Practical Workshop
-
Duration: Flexible (2–4 hours suggested)
-
Mode: Online / In-person (Hands-on)
-
Tools Needed: Text Editor (VS Code, Sublime), Browser (Chrome/Firefox), Optional: GitHub for hosting
Event Agenda / Structure:
-
Introduction to HTML
-
What HTML is and its role in web development
-
Understanding HTML structure:
<!DOCTYPE html>,<html>,<head>,<body>
-
-
Basic Elements
-
Headings, paragraphs, lists
-
Adding images and links
-
Text formatting (bold, italic, etc.)
-
-
Intermediate Elements
-
Tables and forms
-
Embedding multimedia (audio, video)
-
Organizing content with
<div>and<span>
-
-
Practical Project
-
Creating a simple educational website structure
-
Adding a homepage, course pages, and resource sections
-
Basic inline styling using HTML attributes
-
-
Best Practices
-
Semantic HTML
-
Accessibility considerations
-
Cross-browser compatibility
-
-
Wrap-up & Next Steps
-
Testing the website locally
-
Introduction to CSS for future styling
-
Resources for continued learning
-
Learning Outcomes:
-
Build a functional educational website using HTML only.
-
Gain confidence in structuring web content for learning purposes.
-
Understand the basic workflow of web development for personal or educational projects.
Recommended Pre-requisites:
-
Basic computer literacy
-
No prior HTML knowledge required
Materials Provided:
-
Sample HTML templates
-
Code snippets for exercises
-
Step-by-step guide PDF
