Institution Name Document No.

የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08

FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 1 of 91

Trainer module for TVT trainers

On
Web Development and Database Administration

Module Writer: Mahlet Teklay Fisseha

July, 2025
Adama,Ethiopia

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 2 of 91

Contents
1. Module Overview ...................................................................................................................................... 4
2. Rationale of the training ............................................................................................................................ 4
3. Module Objective ...................................................................................................................................... 4
4. Module Competencies ............................................................................................................................... 5
5. Pedagogical Approach ............................................................................................................................... 5
6. Structure of the module ............................................................................................................................. 6
7. Time Required ........................................................................................................................................... 7
Unit One: Introduction to web design and development .................................................................................. 8
1.1 Exploring Design Principles and Standards ............................................................................................ 9
1.2 Analyzing and Documenting Website Requirements ........................................................................... 12
1.3 Design Web Page Architecture According to Specifications................................................................ 14
Unit two: Build Front-End of Web Pages with HTML .................................................................................. 18
2.1 Setup the HTML Development Environment and Create HTML Pages .............................................. 19
2.1.1 Setting up a development environment ........................................................................................... 19
2.1.2 Apply basic html element to create simple web page ..................................................................... 20
2.1.3 Applying Basic HTML Formatting Tags ........................................................................................ 23
2.2 Building Web Page Content Using HTML ........................................................................................... 26
2.2.1 Inserting image to a web age ........................................................................................................... 27
2.2.2 Inserting list to a web age ............................................................................................................... 29
2.2.3 Creating Hyperlinks on a Web Page - Connecting Pages with a Menu .......................................... 32
Unit three: Integrate Cascading Style Sheets (CSS) ....................................................................................... 45
3.1 Apply Basic CSS Properties .................................................................................................................. 46
3.2 Use Inline, Internal, and External CSS ................................................................................................. 47
3.2.2 Using Internal CSS: ........................................................................................................................ 50
3.2.3 Using External CSS: External CSS Linking: Styling Your Web Page with External CSS ............ 53
3.3 Create Layout and Navigation of a Web Page ...................................................................................... 62
Unit Four: Apply Interactive to a Website ...................................................................................................... 72
4.1 Apply Interactive Using JavaScript....................................................................................................... 73
4.2 Validate user input ................................................................................................................................ 79

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 3 of 91
Unit Five: Developing the backend ................................................................................................................ 83
5.1 Setting Up the Back-End Environment and Database .......................................................................... 84
5.2 Understanding XAMPP and Local Development ................................................................................. 84
5.3 Principles of Database Design............................................................................................................... 85
5.4 Secure Database Connectivity with PDO.............................................................................................. 86
References ....................................................................................................................................................... 90

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 4 of 91

1. Module Overview
This module is designed to equip TVET trainees with the knowledge, skills, and competencies required for
Web Development and Database Design (WDDB) effectively. It focuses on both theoretical foundations and
hands-on practical skills, enabling trainees to create functional, responsive, and user-friendly websites. The
module emphasizes on modern web development practices, including HTML, CSS, JavaScript and responsive
design. The module aligns to bridge the gap between foundational web development skills and real-world
applications. Through this training, TVET trainees will be empowered to deliver engaging lessons that inspire
to develop interactive and user friendly websites, explore careers in web design and development.

2. Rationale of the training

The rationale for this training is based on the results of a comprehensive training gap assessment, which
identified. By addressing the gaps identified, the training will empower trainees to better prepare achieve:
Ethiopia’s TVT system on national development goals.

 Provide trainees with a comprehensive understanding of web design and development principles.
 Equip trainees with practical skills to build and manage websites using modern tools and technologies.
 Foster pedagogical strategies that promote active learning, collaboration, and project-based teaching
in the classroom.

3. Module Objective

General Objective

The main objective of this module is to equip trainees with the

practical and theoretical knowledge required to design, develop, and
manage dynamic, database-driven web applications.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 5 of 91

Specific Objectives:

1. To understand the structure and components of web applications.

2. To develop responsive user interfaces using HTML, CSS, and JavaScript.
3. To implement dynamic server-side logic using a scripting language.
4. To design and manage relational databases using SQL.
5. To build CRUD functionalities for user, course, and content management.
6. To secure the web application using authentication and input validation techniques.

4. Module Competencies
After completing the training of this module, TVET trainers are expected to attain the following
competencies:
 Design User Experience Solutions
 Build Front-End of Web Pages with HTML
 Integrate Cascading Style Sheets
 Apply Interactive to a Website
 Develop Dynamic Websites
 Utilize CSS Frameworks for Responsive Design

5. Pedagogical Approach
This training adopts an interactive, learner-centered pedagogical approach that combines experiential
learning, collaborative activities. To ensure effective training, the module adopts an interactive, learner-
centered approach that emphasizes on practical application and instructional methods. Key pedagogical
approaches include:

 Hands-On Training:
o Trainees engage in practical exercises, such as building websites from scratch, using real-
world examples.
o Activities involve coding, debugging, and testing websites to reinforce technical skills.
 Project-Based Learning (PBL):
Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 6 of 91

o Trainees work on projects that simulate real-world scenarios, fostering problem-solving and
creativity.
o Projects are designed to integrate multiple skills, such as HTML, CSS, JavaScript, PHP,
MySQL.
 Technology-Enhanced Learning:
o Trainees use tools like Visual Studio Code and browser developer tools to practice web
development.
o Online resources, videos, and tutorials supplement classroom learning.
 Inquiry-Based Learning:
o Trainees explore topics independently, such as evaluating web design principles or
researching CMS platforms.
o Inquiry-based activities promote critical thinking and curiosity.

6. Structure of the module

The module is organized in 5 units, to enhance trainees content knowledge and delivery methods. Each unit
is designed to address specific competencies and is divided into individual sessions. The units will focus on a
combination of practical skills and teaching methods necessary for mastering the content. The module is
organized as follows:
Unit 1: Introduction to web design and development
Session 1: Explore Design Principles and Standards
Session 2: Prepare a User Requirement Specification
Session 3: Design Web Page Architecture According to Specifications
Unit 2: Build Front-End of Web Pages with HTML
Session 1: Setup the HTML Development Environment and Create HTML Pages
Session 2: Create Web Pages and Insert Contents Using HTML
Unit 3: Integrate Cascading Style Sheets
Session 1: Apply Basic CSS Properties
Session 2: Inline, internal and external CSS
Session 3: Create Layout and Navigation of a Web Page
Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 7 of 91

Unit 4: Apply Interactive to a Website

Session 1: Identify Scripting Language
Session 2: Apply Interactive Using JavaScript
Session 3: Validate User Input
Unit 5: Developing the back end (Working with database)
Session 1: Setting up the backend environment and Database
Session 2: Understanding XAMP
Session 3: Principles of Database design

7. Time Required
No Competency Time allotted(hour)

1 10
Introduction to web design and development

2 Build Front-End of Web Pages with HTML 17

3 17
Integrate Cascading Style Sheets

4 15
Apply Interactive to a Website

5 25
Developing the back end

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 8 of 91

Unit One: Introduction to web design and development

Unit Introduction
The field of web design and development is dynamic, fast-paced, and rich with diverse career opportunities.
As digital technologies transform how organizations interact with customers, the demand for skilled web
professionals continues to grow. In this unit, trainers will explore the fundamental concepts of web
development and database administration through the real-world scenario: Course Management System which
build a web-based application that allows students to register for courses, instructors to manage course content
and enrollment, and admins to maintain database integrity.

This unit introduces TVT trainees to the wide array of roles involved in building such a web platform, from
front-end developers and back-end engineers to UI/UX designers. By exploring these career pathways,
trainees will gain a clearer understanding of how to align classroom instruction with real-world industry
demands.

The unit also emphasizes the importance of teaching strategies that promote career awareness, practical skill
development, and student engagement through project-based learning. By connecting the classroom to
professional pathways, teacher trainees will be better equipped to inspire and prepare students for meaningful
futures in web design and development.

Unit Objective

By the end of this unit, the trainees will be able to:

 Explain the purpose and real-world context of the Course Management System website project.
 Differentiate between front-end, back-end, full-stack, UI/UX key roles based on skills, tools, and
responsibilities.
 Design instructional activities that simulate real-world web development roles and projects.
Expected outcomes:

 Explained the purpose and real-world context of the Course Management System website project.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 9 of 91

 Differentiated front-end, back-end, full-stack, UI/UX key roles based on skills, tools, and
responsibilities.
 Designed instructional activities that simulate real-world web development roles and projects.

1.1 Exploring Design Principles and Standards

Brainstorming Question

Think of a website you recently visited (e.g., news site, e-commerce,

education).
o What did you find visually appealing or unappealing?
o Was the layout easy to understand and navigate?
o How were design principles used? (balance, contrast, emphasis, and
alignment)

In today’s digital landscape, understanding design principles and standards is key to building effective and
user-friendly websites. This session aims to provide trainees with a deep understanding of the design
principles that underpin successful web projects. The knowledge gained will empower the trainees how to
apply these principles in their own web development projects, ensuring that their websites are not only
functional but also visually appealing and user-friendly.

Design principles are crucial for creating both visually appealing and functional websites. These principles
help ensure that the design not only attracts users but also provides a seamless and intuitive experience. Key
design principles include:
 Balance: This principle ensures an even distribution of visual weight across the page, fostering
harmony and preventing any section from feeling too heavy or too light. Proper balance makes the
page appear stable and well-structured, improving the overall user experience.
 Contrast: By using differences in color, size, and shape, contrast highlights important elements on the
page, drawing the user’s attention to key areas such as buttons or headings. This breaks up monotony
and ensures that essential features stand out.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 10 of 91

 Emphasis: Emphasis directs users’ attention to critical elements, such as call-to-action buttons or
featured content. Highlighting these areas helps users quickly identify and engage with the most
important parts of the site, making navigation more intuitive.
 Alignment: Proper alignment of text and visuals creates a clean, organized layout, helping to convey
information in a structured way. Misalignment can make the design appear chaotic, confusing users
and detracting from the site’s effectiveness.
 Proximity and Repetition: Grouping related elements together (proximity) simplifies navigation by
helping users understand the relationship between different items. Repetition of design elements like
colors and fonts reinforces consistency, improving usability and strengthening branding.
Alongside these design principles, web design standards are just as essential to creating an effective website:
 Usability: A website must be easy to navigate, ensuring that users can quickly find what they need. A
website with good usability reduces frustration, creating a smoother and more enjoyable experience.
 Accessibility: A website should be designed to accommodate users with disabilities, incorporating
features such as alt text for images, keyboard navigation, and ensuring contrast ratios meet
accessibility standards for users with visual impairments.
 Responsiveness: A responsive design ensures that the website functions well across a variety of
devices, including desktops, tablets, and mobile phones. As mobile usage continues to rise, a
responsive design ensures a consistent and positive user experience on any device.
When designing a website, applying these design principles and standards is crucial to creating a visually
engaging and user-friendly platform. The site should not only be aesthetically pleasing but also functional,
allowing users to easily navigate and perform tasks.
For TVET trainers, understanding these design principles and their real-world application is essential in
guiding trainees through the design process. Trainers should foster a hands-on learning environment where
trainees can apply these principles by working on real-world projects. These projects could include tasks like
redesigning an existing website, developing wireframes, or creating prototypes based on specific design
principles. Emphasizing the importance of continuous iteration and feedback in the design process will help
trainees refine their skills and improve over time.
In addition, introducing design tools like Figma, or Canva will enable trainees to practice these principles in
a collaborative setting, giving them the opportunity to create and refine designs. Encouraging trainees to

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 11 of 91

analyze well-designed websites and apply their findings in their own projects will help them deepen their
understanding of design principles and develop critical thinking skills.

Website Development Project: Course Management System(CMS)

The Course Management System (CMS) is a web-based application designed to streamline the interaction
between students, instructors, and administrators within an academic institution. The system allows students
to register for courses, view course details, access learning materials, and monitor their progress. Instructors
use the platform to manage course content, upload resources, create announcements, and oversee student
enrollments and performance. Meanwhile, administrators are responsible for maintaining user roles,
ensuring data integrity, managing the course catalog, and generating system reports. The CMS provides
features such as user authentication, profile management, course scheduling, content uploading (e.g., PDFs,
videos), and grade tracking. All user actions are backed by a structured database that stores information on
users, courses, enrollments, and resources. Activities to be performed in this project include designing the
database schema, developing front-end interfaces (such as login forms and dashboards), implementing back-
end logic to handle data processing, enforcing security measures like password encryption, and deploying the
system to a local or online server. This scenario helps learners understand the full lifecycle of a dynamic, data-
driven web application.

Dear trainees, the Course Management System website development project scenario will be used as
demonstration project in the entire training module.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 12 of 91

Activity: Design the Course Management System Homepage

Instructions:
1. Review the needs of the Course Management System website in group of 3-4 trainees.
2. Discuss which design principles are most important for the homepage (e.g., balance for symmetry,
contrast for visibility, alignment for clarity).
3. Sketch a rough wireframe of the homepage on paper or a digital whiteboard.
o Include: header, navigation bar, hero image, sections for tours/services, contact information,
and a call to action.
4. Present your wireframe briefly to another group or the whole class, explaining the principles you
applied.

1.2 Analyzing and Documenting Website Requirements

Brainstorming Questions

 Why is it important to define website requirements before coding

begins?
 What might happen if developers skip this phase.

Website projects must begin with clear planning and a thorough understanding of stakeholder needs. Without
this foundation, developers risk building solutions that do not align with user expectations or business goals.
Trainers should emphasize to trainees that gathering requirements is not just a technical step, but also it is
about communication, problem-solving, and understanding how technology serves real users. Involving
stakeholders early in the process helps uncover critical details about what the website must achieve and how
it should function.
Website project requirements are typically divided into two main categories:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 13 of 91

o Functional Requirements: Describe what the system should do (such as user registration, create course,
and feedback submission), and
o Non-Functional Requirements: Define how the system should perform (such as loading speed,
security, mobile responsiveness, and usability).
Teaching trainees to distinguish between these two types encourages deeper thinking about both the visible
features and the behind-the-scenes mechanisms that make a site reliable and effective.
Understanding user roles and permissions is another key concept. Not all users will interact with a website in
the same way. For example, an administrator should have access to approve or manage courses, while a student
should only be able to view courses, enroll in or drop out course, and manage their profile. Introducing role-
based access early on helps students build websites that are secure and organized.

A well-structured website requirements document serves as a blueprint for the entire development process. It
keeps the team aligned, helps track progress, and reduces misunderstandings.
In any web development process, preparing clear and detailed project requirements is a critical first step. It
ensures that developers understand the client’s needs, users’ expectations, and technical considerations before
building the actual site. In this session, trainees will learn how to analyze client needs, identify user roles, and
translate business goals into functional and technical website requirements. The scenario Course Management
System, will be used to simulate a real-world project planning exercise.

Activities

Activity 1: Identify Users and Stakeholders

Instructions:
1. Form groups of 3–4 trainees.
2. Read the Course Management System case scenario provided above.
3. As a group, list at least three primary user types:
o Example: Student, Teacher, Admin

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 14 of 91

4. For each user, write down:

o Their role
o Their main goals or tasks on the website
5. Use sticky notes or digital boards to display each role and goal clearly.
6. Share your group's user roles with the class.
Activity 2: Categorize Functional and Non-functional Requirements
Instructions:
1. Together, identify the potential requirements for Course Management System.
2. Categorize each as a user need, business goal, or technical requirement.
3. On a sheet or digital document, create two columns:
o Functional Requirements (e.g., register for courses, user login)
o Non-functional Requirements (e.g., mobile responsiveness, load speed, security)
4. Sort each item into the correct category.
5. Submit your categorized list for trainer feedback.
Activity 3: Create the Website Project Requirements Document
Instructions:
1. Open a new document (use MS Word, or a template provided).
2. Include these sections:
o Project Overview: Brief description Course Management System goals
o Stakeholders: Student, Teacher, Course
o Functional Requirements (bulleted list)
o Non-functional Requirements (bulleted list)
o Security & Access Needs

1.3 Design Web Page Architecture According to Specifications

Web page architecture serves as a visual blueprint that illustrates how all the pages within a website are
connected and how users will navigate between them. This structure is crucial in ensuring that users can
intuitively find information and complete tasks without confusion. A sitemap is typically used to represent
this structure, showing the relationships between pages and the overall navigation flow. Alongside the sitemap,
wireframes are used to design the basic layout of individual pages, indicating where content elements, buttons,

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 15 of 91

forms, and menus will be placed. These tools are essential in the early stages of web development, as they
prevent disorganized or inconsistent designs and provide clarity for both developers and clients.

Effective architecture must take into account different user roles and the specific tasks each user needs to
perform. For instance, Instructors can create, edit, and delete courses. Administrators can view and manage
courses, user accounts, and feedback. Students can browse and view available courses. Designing with these
roles in mind ensures both functionality and security.

A well-structured website improves not only usability but also accessibility and maintainability. It helps users
with diverse needs navigate the site more easily and allows future developers or trainees to understand and
modify the site without confusion.

For trainers, understanding and teaching web architecture supports a shift from unstructured coding to
intentional, user-centered design. It fosters planning, visual thinking, and communication skills that are critical
components of modern web design and development. In the classroom, introducing trainees to site mapping
and wireframing encourages them to think like designers and problem solvers. Trainees should also explore
digital tools such as Figma, or Canva for collaborative wireframe design, and incorporate peer feedback
sessions to mimic real-world design processes. Additionally, using role-play or persona-based scenarios helps
trainees see architecture not just as a technical task, but as a way of serving user needs effectively.

Following the completion of website requirements gathering and developing the requirements specifications
document, the next step in the web development process is designing the web page architecture. This step
involves translating user needs and business functions into a logical layout of web pages, navigation paths,
and content groupings. Using the Course Management System case, trainees will learn to create a visual map
or structure of how users (students, teachers, administrator) interact with different parts of the website.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 16 of 91

Discuss the Importance of Website Architecture

Instructions:
1. Discuss:
o Why is architecture planning essential before coding?
o How does it improve usability and user experience?
o What challenges might students face in planning page flow?
2. Each group nominates one person to share a key takeaway with the class.

Activities

Activity 1: Map Stakeholder Roles and Web Pages

Instructions:

1. In groups, review the case scenario Course Management System and list all stakeholders:
o Student, Teacher, Admin
2. For each role, list the features or pages they will need access to.
3. Use a table format for clarity (e.g., Role | Page | Action).
Activity 2: Sketch a Sitemap

Instructions:

1. Using your page-role list from Activity 1, sketch a sitemap for Course Management System on paper
or using a whiteboard.
2. Include three main sections:
o Public Pages: Home, About, Contact
o User Pages: Login, Profile, courses, Notifications, Logout
o Admin Pages: Admin Dashboard, Manage users, Manage Courses, Setting, Logout
Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 17 of 91

3. Use lines/arrows to show the flow between sections and related pages.
Activity 3: Create Wireframe for Key Pages

Instructions:

1. Choose two pages to wireframe (suggested: Homepage & Course Page).

2. Individually or in pairs, sketch the layout:
o Include header, navigation, content blocks, images, buttons, and footer.
3. Use basic shapes (boxes, lines, labels) to represent elements.
4. Keep it low-fidelity and focused on structure.
5. Add annotations to explain key features or user interactions.
Unit One: Summary

This unit has guided trainees through the foundational stages of designing user experience solutions for the
web. Beginning with an exploration of core design principles and standards, trainees gained insights into what
makes websites visually appealing and functionally effective. Through the case of course management system,
they practiced translating client needs into structured website project requirements, including identifying
stakeholders, defining user roles, and classifying functional and non-functional needs.

Trainees learned how to organize website project requirements into intuitive web architectures by designing
sitemaps and wireframes. Each step emphasized the importance of planning before coding and encouraged
reflective and collaborative learning. Trainees also engaged in role-play and simulation exercises to deepen
their understanding of the user perspective and the collaborative nature of web projects.

Ultimately, this unit prepares trainers not only to build effective web solutions but also to teach trainees how
to approach web design thoughtfully and strategically. Through a balance of design, functionality, and
communication, they are now equipped to lead trainees in creating meaningful, user-centered web
experiences.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 18 of 91

Unit two: Build Front-End of Web Pages with HTML

Unit Introduction
In this unit, trainees transition from planning a website's architecture to developing its front-end using HTML.
Building upon the case of Course Management System, trainees will explore how to set up a development
environment, write and structure HTML code, and create basic meaningful web pages. Emphasis is placed on
hands-on practice, classroom simulations, and pedagogical strategies for introducing HTML to TVET
trainees. From writing HTML tags to inserting and organizing content like text, links, images, and lists, this
unit equips trainees with fundamental web development skills that mirror real-world web design.

Unit Objective

By the end of this unit, the trainees will be able to:

 Set up a basic HTML development environment using accessible tools such as Visual Studio Code.
 Organize folders and HTML files according to a structured project format.
 Write HTML code using essential tags.
 Insert core content elements including headings, paragraphs, links, images, and lists.
 Test HTML web pages using modern browsers and developer tools.
 Simulate classroom teaching of HTML concepts through role-play and group activities.
 Connect HTML development to real-world projects like Course Management System to enhance
trainee’s engagement.
Expected Outcomes
 Set up a basic HTML development environment using accessible tools such as Visual Studio Code.
 Organized folders and HTML files according to a structured project format.
 Written HTML code using essential tags.
 Inserted core content elements including headings, paragraphs, links, images, and lists.
 Tested HTML web pages using modern browsers and developer tools.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 19 of 91

2.1 Setup the HTML Development Environment and Create HTML Pages
Setting up an HTML development environment is the foundational step for building web projects. It is
important to choose accessible, beginner-friendly editors like Visual Studio (VS) Code that trainees can use
both in class and at home. The trainees should also model good file management by organizing folders, naming
files clearly, and using the correct .html extension.

Introducing browser developer tools early encourages experimentation and debugging, vital skills in
development. Classroom simulations, like building a personal introduction page or a landing page for a school
project, help connect technical skills with creativity and real-life applications.

Linking the training session to real world fictitious website projects such as Course Management System helps
contextualize web development within a meaningful project, showing how website development skills support
real-world business needs like course enrollment, user engagement, and content presentation.

2.1.1 Setting up a development environment

Brainstorming Question

 What text editor or IDE are you currently using to write your code?
 Why is it important to choose the right text editor for web
development?
 Have you heard of Visual Studio Code? What do you know about it?

Visual Studio Code is a free, open-source, and highly customizable code editor developed by Microsoft. It is
popular among developers for its lightweight nature, powerful features, and broad extension support. VS Code
is used for front-end and back-end development, supporting various programming languages, including
HTML, CSS, JavaScript, Python, and more.
Importance of VS Code: It provides a clean and intuitive interface for writing code, debugging, and version
control, making it a top choice for web developers
In this session, trainees will learn how to install and configure Visual Studio Code (VS Code) a lightweight
but powerful source code editor widely used by web developers. VS Code supports multiple programming
languages, including HTML, CSS, JavaScript, and PHP, making it an ideal tool for building modern websites.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 20 of 91
Here we will setup and install the development environment and necessary tools help you to write,
test, and preview your HTML, CSS, and JavaScript code efficiently in your classes. This will enable
you to create responsive, interactive, and visually appealing web pages.

The following steps will help trainees successfully install Visual Studio Code on your computer. Once
installed, you can start using these text editors for writing and editing your HTML, CSS, and JavaScript
code.

Installing Visual Studio Code (VS Code):

 Step 1: Visit the official Visual Studio Code website: [Link]

 Step 2: Click on the "Download" button to download the installer based on your
operating system (Windows, macOS, or Linux).

 Step 3: Once the installer is downloaded, run the installer executable.

 Step 4: Follow the on-screen instructions of the installer. By default, the installer will
suggest the appropriate installation location based on your operating system.

 Step 5: On Windows, select whether to add "Open with Code" option to the context
menu. You can also choose to add VS Code to the system's PATH for easier command-
line access.

 Step 6: Click "Next" and then "Finish" to complete the installation process.

 Step 7: After installation, launch Visual Studio Code.

2.1.2 Apply basic html element to create simple web page
To write HTML code, you can use a simple text editor like Notepad or more advanced code editors like
Visual Studio Code or Atom. Save the file with a .html extension. You can view the output by opening
the file in a web browser.

Step-by-Step Activity:

Create an HTML File and adding basic structure

1. Open the newly created document, [Link], if it isn’t open already.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 21 of 91
2. Start by adding the HTML5 DOCTYPE declaration:
<!DOCTYPE html>
3. Put the entire document in an HTML root element by adding an <html> start tag at the very
beginning and an end <html> tag at the end of the text.
4. Next, created the document head that contains the title for the page. Insert <head> and </head>
tags before the content. Within the head element, add information about the character encoding
<meta charset="utf-8">, and the title, “Black Goose Bistro”, surrounded by opening and closing
<title> tags. The correct terminology is to say that the title element is nested within the head
element.
5. Finally, define the body of the document by wrapping the content in <body> and </body> tags.
When you are done, the source document should look like this:

<!DOCTYPE html>

<html>

<head>

<meta charset ="utf-8">

<title>Black Goose Bistro</title>

</head>

<body>

Black Goose Bistro The

Restaurant

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 22 of 91
The Black Goose Bistro offers casual lunch and dinner fare in a hip
atmosphere. The menu changes regularly to highlight the fres hest
ingredients.

Catering Services

You have fun... we'll do the cooking. Black Goose catering can h andle events
from snacks for bridge club to elegant corporate fu ndraisers.

Location and Hours Seekonk, Massachusetts;

Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight

</body>

</html>
6. Save the document by the name [Link] in the documents directory and Open the file in the
browser or hit “refresh” or “reload” if it is open already.
Defining text elements
1. Open the document created above that is [Link] in your text editor, if it isn’t open already.
2. The first line of text, “Black Goose Bistro,” is the main heading for the page, so we’ll mark it up
as a Heading Level 1 (h1) element. Put the opening tag, <h1>, at the beginning of the line and
the closing tag, </h1>, after it, like this:

<h1>Black Goose Bistro</h1>

3. Our page also has three subheads. Mark them up as Heading Level 2 (h2) elements in a similar
manner. I’ll do the first one here; you do the same for “Catering” and “Location and Hours”.

<h2>The Restaurant</h2>

4. Each h2 element is followed by a brief paragraph of text, so let’s mark those up as paragraph
(p) elements in a similar manner. Here’s the first one; you do the rest.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 23 of 91

<p>The Black Goose Bistro offers casual lunch and dinner fare in a hip
atmosphere. The menu changes regularly to highlight the f

reshest ingredients.
</p>

5. Finally, in the Catering section, I want to emphasize that visitors should just leave the cooking to
us. To make text emphasized, mark it up in an emphasis element (em) element, as shown here.

<p>You have fun... <em>we'll handle the cooking </em>. Black Goo se
Catering can handle events from snacks for bridge club to ele gant
corporate fundraisers. </p>

6. Now that we’ve marked up the document, let’s save it as we did before, and open (or refresh) the
page in the browser.
2.1.3 Applying Basic HTML Formatting Tags

Description: In this exercise, trainees will create an HTML file and practice applying basic HTML
formatting tags to format and style text on a webpage. HTML formatting tags allow you to structure
and present your content in a visually appealing and organized manner. By applying these tags
correctly, you can create headings, paragraphs, emphasize text, and add line breaks to improve the
readability and aesthetics of your web pages.

Step 1: Set up the HTML file

Create a new HTML file and open it in a text editor or an integrated development environment (IDE)
of your choice.
Step 2: Add the HTML boilerplate
Add the following HTML boilerplate code to your file:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 24 of 91

<!DOCTYPE html>

<html>

<head>

<title>HTML Formatting Exercise</title>

</head>

<body>
</body>

</html>
Step 3: Add a title heading
Inside the <body> tag, add a heading using the <h1> tag:

<h1>Welcome to My Webpage</h1>

Step 4: Add a paragraph

Below the heading, add a paragraph using the <p> tag:

<p>This is a sample paragraph.</p>

Step 5: Emphasize text

Within the paragraph, emphasize a word or phrase using the <em> tag:

<p>This is a <em>sample</em> paragraph.</p>

Step 6: Add a line break

Insert a line break within the paragraph using the <br> tag:

<p>This is a <em>sample</em> paragraph.<br>Here's a new line.</p>

Step 7: Add a strong text

Within the paragraph, add strong or important text using the <strong> tag:

<p>This is a <em>sample</em> paragraph.<br>Here's a <strong>new line</

strong>.</p>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 25 of 91

Step 8: Save the file and open in a web browser

Save the HTML file with an appropriate name and the .html extension. Open the saved file in a web
browser of your choice to see the formatted text.

Activities

Activity 1: Set Up HTML Development Environment

Instructions:

1. Install a free code editor: (Visual Studio Code)

2. Create a project folder on your desktop called course_mgt

3. Inside the folder, create a new file and name it [Link]

4. Write the basic HTML structure and open in a browser

Activity 2: Create a Sample HTML Page for Course Management System

Instructions:

1. Review the architecture plan from the previous session (e.g., Homepage, About Us)

2. Choose one page to implement (e.g., Home or About Us).

3. Create a new file in your folder (e.g., [Link] or [Link]).

4. Include at least the following:

o HTML structure with <html>, <head>, <title>, and <body>

o One heading (e.g., <h1>About Course Management System</h1>)

o A paragraph with basic content

5. Save the file and organize it clearly within your project folder.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 26 of 91
6. Test the HTML Page in the Browser

o Open the file [Link] in a modern web browser (e.g., Chrome, Firefox).

o Right-click and choose “Inspect” to open Developers Tool.

o Explore how HTML elements are displayed in the browser.

Activity 3: Organize Website Project Folder and Semantic HTML Coding

Instructions:

1. In VS Code or your chosen editor, create subfolders inside coursre_mgt:

o css/ for stylesheets

o js/ for JavaScript

o includes/ for reusable HTML fragments (optional)

2. Open [Link]

3. Modify it to include basic semantic structure

4. Save and test in your browser.

2.2 Building Web Page Content Using HTML

In the web design and development, HTML provides the foundational elements that structure the content of a
webpage. Key content elements such as headings, paragraphs, links, images, and lists help organize the
information on the page, ensuring it is both functional and user-friendly. Proper use of headings and
paragraphs is crucial for creating clear, readable content that is easily understood by users. Headings provide
structure, allowing users to quickly scan and find relevant information, while paragraphs break down content
into digestible chunks.

Links are essential for connecting different sections of a website or directing users to other pages, enhancing
the interactivity of the site. Images, on the other hand, engage users visually, making the site more appealing
and helping to communicate the message more effectively. Organizing content through lists and sections is
another vital strategy in creating an easy-to-navigate and visually organized layout. Lists, both ordered and

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 27 of 91

unordered, help structure information logically, while sections break up the content into categories that make
it easier for users to absorb.

This session emphasizes the importance of practical application by using real-world projects. The trainees
will have the opportunity to gain hands-on experience by designing and building simple web pages. By
applying HTML in real scenarios, such as creating a homepage, trainees can better understand how to structure
content to meet specific goals. Furthermore, it is important for trainer to learn how to break down HTML
concepts into digestible lessons. When teaching HTML, it is crucial to focus on clarity and simplicity, creating
a supportive classroom environment that encourages exploration and experimentation.

Additionally, understanding common HTML mistakes and how to troubleshoot them will prepare trainers for
addressing challenges trainees might face in the classroom. Encouraging an iterative learning process, where
students build and refine their pages, fosters both technical skill development and creative problem-solving.
Incorporating group discussions, peer feedback, and collaborative exercises will also help reinforce these
concepts in the classroom, creating a dynamic and engaging learning experience for trainees. Here are some
practical steps how to insert images and create links.

2.2.1 Inserting image to a web age

In this activity, trainees will learn how to insert images into a web page using the <img> tag and
explore various attributes to enhance image display.

Step-by-Step Activity:
Step 1: Create a new HTML file
Create a new HTML file named "image_insertion.html" using a text editor or an integrated development
environment (IDE) of your choice.
Step 2: Download an image
Download an image of your choice from the internet, ensuring that it is saved in the same directory as
your HTML file. For this activity, let's assume the image file is named "[Link]."
Step 3: Writing the HTML structure
In the "image_insertion.html" file, set up the basic HTML structure:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 28 of 91

<!DOCTYPE html>

<html>

<head>

<title>Image Insertion Activity</title>

</head>

<body>

<!-- Your image insertion code will go here -->

</body>

</html>

Step 4: Inserting the image

Within the <body> element, add an <img> tag to insert the image into the web page:

<img src="[Link]" alt="Description of the image goes here">

Step 5: Adding alternate text

The alt attribute provides alternative text for the image, which is useful for screen readers or when the
image cannot be displayed. Replace "Description of the image goes here" with a brief description of
the image.
Step 6: Image dimensions
Add the width and height attributes to specify the image dimensions. Replace width_value and
height_value with the desired dimensions in pixels:

<img src="[Link]" alt="Description of the image goes here"

width="width_value " height="height_value">

Step 7: Image alignment

Use the align attribute to control the image alignment within the text. Replace "alignment_value"
with "left," "right," "center," or "middle":

<img src="[Link]" alt="Description of the image goes here"

width="width_value " height="height_value" align="alignment_value">

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 29 of 91
Step 8: Image border
You can add a border around the image using the border attribute. Replace "border_value" with the
desired border size in pixels:

<img src="[Link]" alt="Description of the image goes here"

width="width_value " height="height_value" align="alignment_value"
border="border_value">
Step 9: Save and view the web page
Save the "image_insertion.html" file. Then, open it using a web browser to see how the image is displayed
with different attributes.

Here is the Complete HTML Code of the above activity:

<!DOCTYPE html>

<html>

<head>
<title>Image Insertion Activity</title>

</head>

<body>

<img src="[Link]" alt="Description of the image goes here"

width="width_value " height="height_value" align="alignment_value"
border="border_value">

</body>
</html>
Congratulations! You have successfully completed the activity on inserting images into a web page
using various attributes of the <img> tag. Experiment with different values for attributes to get a better
understanding of how they affect the image display.
2.2.2 Inserting list to a web age

In this session, trainees will explore three types of lists: ordered lists, unordered lists, and definition
lists. Additionally, you will use different attributes to enhance list formatting and add sample real-

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 30 of 91

world data.

Step-by-Step Activity:

In Visual Studio open a new file and create the following file using H1 and paragraph tag

Create the following numbered list above the </body> tag:

<ul>

<li>Alaskan Salmon Fishing</li>

<li>The Vineyards of Northern California</li>

<li>Sedona and the Grand Canyon</li>

<li>Michigan Fall Festivals</li>

</ul>
Save the file and then refresh the browser to view your work

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 31 of 91

<ul>

<li>Alaskan Salmon Fishing</li>

<ol>

<li>Sitka Sound</li>

<li>Kenai Peninsula</li>

<li>Matanuska Susitna Valley</li>

</ol>

Immediately below the Alaskan Salmon Fishing line, create a nested ordered list as shown below,
then save and check your work.

Immediately below the Sedona and the Grand Canyon line, create a nested ordered list as shown
below, then save and check your work.
Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 32 of 91

<li>Sedona and the Grand Canyon</li>

<ol>

<li>Sedona Red Rock Jeep Tour</li>

<li>Sedona Energy Vortex Exploration</li>

<li>Grand Canyon Photo and Sightseeing Motorcoach Tour</li>

<li>Grand Canyon Helicopter Adventure</li>

</ol>

Change the opening tag of both ordered lists so that they use uppercase Roman numerals:

<ol style="list-style-type: upper-roman">

Save and then check your work.

2.2.3 Creating Hyperlinks on a Web Page - Connecting Pages with a Menu

In this activity, trainees will practice creating hyperlinks on a web page using the <a> tag in HTML.
You will create three interconnected pages and implement a menu to navigate between them, fulfilling
real-world business user requirements.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 33 of 91

Sample Business User Requirements:

A local restaurant wants to build a simple website with the following pages and navigation:

 Home Page - Displaying the restaurant's logo, welcome message, and contact information.

 Menu Page - Showcasing the restaurant's menu with various categories of dishes.

 About Us Page - Providing information about the restaurant's history and team.

Step-by-Step Activity:

Page 1: Home Page

Step 1: Create a new HTML file for the Home Page

Create a new HTML file named "[Link]" using Visual Studio Code or an integrated development
environment (IDE) of your choice.

Step 2: Writing the HTML structure for the Home Page in the

"[Link]" file, set up the basic HTML structure:

<!DOCTYPE html>

<html>

<head>

<title>Home Page</title>
</head>

<body>
<!-- Your Home Page content will go here -->

</body>
</html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 34 of 91

Step 3: Adding content and hyperlinks

Add the content for the Home Page, including the restaurant's logo, welcome message, and contact
information. Also, include hyperlinks to the Menu Page and About Us Page.

<h1>Welcome to Our Restaurant</h1>

<img src="restaurant_logo.jpg" alt="Restaurant Logo">

<p>Contact us at: + (251) 123-4567</p>

<h2>Navigation:</h2>

<ul>

<li><a href="[Link]">Menu</a></li>

<li><a href="[Link]">About Us</a></li>

</ul>

</body>

</html>

Page 2: Menu Page

Step 4: Create a new HTML file for the Menu Page

Create a new HTML file named "[Link]" using Visual Studio Code or an integrated development
environment (IDE) of your choice.

Step 5: Writing the HTML structure for the Menu Page in the

"[Link]" file, set up the basic HTML structure:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 35 of 91

<!DOCTYPE html>

<html>

<head>

<title>Menu Page</title>

</head>

<body>

<!-- Your Menu Page content will go here -->

</body>
</html>

Step 6: Adding content and hyperlinks

Add the content for the Menu Page, showcasing the restaurant's menu with various categories of
dishes. Also, include hyperlinks to the Home Page and About Us Page.

<h1>Our Menu</h1>

<h2>Appetizers</h2>

<ul>

<li>Appetizer 1</li>

<li>Appetizer 2</li>

<!-- Add more items as per the restaurant's menu -->

</ul>

<h2>Main Course</h2>

<ul>

<li>Main Dish 1</li>

<li>Main Dish 2</li>

<!-- Add more items as per the restaurant's menu -->

</ul>

<h2>Desserts</h2>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 36 of 91
<ul>
<li>Dessert 1</li>

<li>Dessert 2</li>

<!-- Add more items as per the restaurant's menu -->

</ul>

<h2>Navigation:</h2>

<ul>

<li><a href="[Link]">Home</a></li>

<li><a href="[Link]">About Us</a></li>

</ul>

</body>

</html>

Page 3: About Us Page

Step 7: Create a new HTML file for the About Us Page
Create a new HTML file named "[Link]" using Visual Studio code or an integrated development
environment (IDE) of your choice.
Step 8: Writing the HTML structure for the About Us Page in the
"[Link]" file, set up the basic HTML structure:

<!DOCTYPE html>

<html>

<head>

<title>About Us Page</title>

</head>

<body>

<!-- Your About Us Page content will go here -->

</body>

</html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 37 of 91
Step 9: Adding content and hyperlinks

Add the content for the About Us Page, providing information about the restaurant's history and
team. Also, include hyperlinks to the Home Page and Menu Page.

<h1>About Our Restaurant</h1>

<p>Our restaurant has been serving delicious food for over a decade. We t
ake pride in our skilled team that creates mouthwatering dishes for our value
d customers.</p>

<h2>Our Team</h2>

<ul>

<li>Team Member 1</li>

<li>Team Member 2</li>

<!-- Add more team members as per the restaurant's team -->

</ul>

<h2>Navigation:</h2>

<ul>

<li><a href="[Link]">Home</a></li>

<li><a href="[Link]">Menu</a></li>

</ul>

</body>

</html>

Step 10: Save and view the web pages

Save all three HTML files: "[Link]," "[Link]," and "[Link]." Then, open each file using
a web browser to see the interconnected pages and the navigation menu.

Congratulations! You have successfully completed the activity, creating interconnected pages with
hyperlinks and fulfilling real-world business user requirements. Feel free to customize the content
and design to match your specific needs and preferences.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 38 of 91

Here is Complete HTML Code and sample output for Each Page in the above activity:

[Link]:

<!DOCTYPE html>

<html>

<head>

<title>Home Page</title>

</head>

<body>

<h1>Welcome to Our Restaurant</h1>

<img src="restaurant_logo.jpg" alt="Restaurant Logo">

<p>Contact us at: + (251) 123-4567</p>

<h2>Navigation:</h2>

<ul>

<li><a href="[Link]">Menu</a></li>

<li><a href="[Link]">About Us</a></li>

</ul>

</body>

</html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

Year of Excellence II
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 39 of 91
[Link]:

<!DOCTYPE html>

<html>

<head>

<title>Menu Page</title>

</head>

<body>

<h1>Our Menu</h1>

<h2>Appetizers</h2>

<ul>

<li>Appetizer 1</li>

<li>Appetizer 2</li>

<!-- Add more items as per the restaurant's menu -->

</ul>

<h2>Main Course</h2>

<ul>

<li>Main Dish 1</li>

<li>Main Dish 2</li>

<!-- Add more items as per the restaurant's menu -->

</ul>

<h2>Desserts</h2>

<ul>

<li>Dessert 1</li>

<li>Dessert 2</li>

<!-- Add more items as per the restaurant's menu -->

</ul>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

39
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 40 of 91
<h2>Navigation:</h2>
<ul>

<li><a href="[Link]">Home</a></li>

<li><a href="[Link]">About Us</a></li>

</ul>

</body>

</html>

Output:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

40
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 41 of 91
[Link]:

<!DOCTYPE html>

<html>

<head>
<title>About Us Page</title>

</head>
<body>

<h1>About Our Restaurant</h1>

<p>Our restaurant has been serving delicious food for over a decade. We t
ake pride in our skilled team that creates mouthwatering dishes for our value
d customers.</p>

<h2>Our Team</h2>

<ul>

<li>Team Member 1</li>

<li>Team Member 2</li>

<!-- Add more team members as per the restaurant's team -->

</ul>

<h2>Navigation:</h2>

<ul>

<li><a href="[Link]">Home</a></li>

<li><a href="[Link]">Menu</a></li>

</ul>

</body>

</html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

41
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 42 of 91

Output:

Activities

Activity 1: Insert Text and Headings to Course Management System Web

Instructions:

1. Open your HTML file (e.g., [Link]) in your editor (VS Code studio)
2. Inside the <body>, practice adding headings:
<h1>Welcome to Course Management System</h1>
<h2>Our Mission</h2>
3. Add paragraphs using <p> to describe the website:
<p> A Course Management System (CMS) allows students to register for courses, instructors to
manage content and courses, and admins to maintain integrity.
. </p>

4. Save the file and view it in your browser

5. Observe how the hierarchy of headings affects readability
Activity 2: Insert Links and Images to Course Management System web

Instructions:

1. Below your paragraph, insert a link:

<p>Learn more about our <a href="[Link]">Courses </a></p>

2. Add an image that represents the website:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]
42
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 43 of 91
<img src="images/[Link]" alt="course image" width="400">

3. Save and test in the browser

4. Discuss how the alt attribute supports accessibility
Activity 3: Use Lists to Organize Content

Instructions:

1. Add a section titled "Courses Category":

<h2>Different Category </h2>

2. Use an unordered list (<ul>) or ordered list (<ol>) for destinations:

<ul>

<li>Major Courses</li>

<li>Common Courses</li>

<li>Pedagogy Courses</li>

</ul>

3. Save and view in browser

4. Reflect on when to use each list type (ordered vs unordered)
Activity 4: Design the Course Management System Homepage

Instructions:

1. In small groups or pairs, design a complete homepage called [Link]

2. Include all required content:
o Title and heading explaining the Course Management System
o Paragraphs describing the different category of courses
o A link to another page within the web
o A list of course categories
o An image representing the Course Management System
3. Each group reviews the structure for clarity and usability

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

43
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 44 of 91

Unit Summery
In this unit, trainees learned how to move from web design planning to actual development by creating the
front-end of web pages using HTML. They practiced setting up development environments, organizing files,
and writing HTML code to create structured, content-rich pages. Key elements such as headings, paragraphs,
links, images, and lists were used to present information effectively. Trainers also explored teaching strategies
through classroom simulations and reflected on how to simplify concepts for their trainees. By engaging with
a real-world project trainees explored how HTML can be used to meet business goals while creating dynamic,
student-friendly learning experiences. The unit also highlights approaches that trainer can apply in their
classrooms using step-by-step guidance, real examples, and interactive teaching methods to make HTML
development both accessible and inspiring.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

44
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 45 of 91

Unit three: Integrate Cascading Style Sheets (CSS)

Unit Introduction
In this unit, trainees will explore how to enhance the presentation of web pages by integrating CSS (Cascading
Style Sheets) into their HTML-based websites. CSS allows for the separation of content (HTML) and style
(visual design), enabling web pages to look polished and user-friendly. Trainees will learn to apply basic CSS
properties, understand the differences between inline, internal, and external CSS, and how to create page
layouts and navigation systems that are both functional and aesthetically pleasing.

Unit Objectives

By the end of this unit, trainers will be able to:

 Apply CSS to Style Web Pages
 Implement Inline, Internal, and External CSS
 Design and Create Web Page Layouts
Expected Outcomes
 Cascading Style Sheet to Style Web Pages are applied.
 Implemented Inline, Internal, and External CSS.
 Designed and Created Web Page Layouts.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

45
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 46 of 91
3.1 Apply Basic CSS Properties
Brainstorming Questions

1. What are the different ways you can apply CSS to an HTML
document? When would you use each one?
2. What are some real-world examples of websites that effectively use
CSS for design and layout?

CSS enables the visual customization of web content. The CSS box model is fundamental to how spacing and
alignment work. Basic CSS properties, such as color, font-size, and margin, allow designers to transform a
simple webpage into something visually appealing. Understanding the connection between CSS and HTML
is essential for creating aesthetically pleasing web pages. This session provides the foundation for more
complex styling, such as layouts and responsive design, which will be covered in later sessions.

Activities

Consider, Course Management System website to apply all activities:

Activity 1: Introduction to Basic CSS Syntax
Open your HTML page (e.g., [Link]) in your code editor.
Add a <style> block in the <head> section of your HTML file on Course Management website
Activity 2: Styling Text and Headings
Style the headings (<h1>, <h2>, <h3>) and paragraphs (<p>) in your page.
Use properties like font-size, font-weight, and text-align to change their appearance.
Activity 3: Add Background Colors and Borders
Apply background-color to different sections of the page (e.g., the header, footer).
Activity 4: Explore CSS Box Model
Review the CSS box model, including margin, border, padding, and content

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

46
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 47 of 91
3.2 Use Inline, Internal, and External CSS
Associate styles with your HTML document.
Each CSS method serves a specific purpose: inline CSS is great for quick, single-element styling; internal
CSS is useful for smaller projects or when testing; and external CSS is ideal for large projects, as it keeps the
HTML clean and allows for easier updates across multiple pages.

1. Inline CSS is applied directly to individual HTML elements and is ideal for quick, one-off styling but
can be inefficient for larger projects.
2. Internal CSS is placed within the <head> section of the HTML document and is good for smaller
projects or when testing styles, but it only affects the current page.
3. External CSS is the best approach for larger projects or websites with multiple pages because it keeps
the HTML files clean, allows for easier maintenance, and promotes style reuse across multiple pages.

3.2.1 Using Inline CSS

In this step-by-step activity, trainees will learn how to embed CSS styles directly into HTML elements
using Inline CSS. By the end of this activity, trainees will understand how to apply styling to individual
HTML elements without using an external CSS file, and they will be able to create visually appealing
web pages.

Step 1: Set Up the Basic HTML Structure

Create a new HTML file named "inline_css_activity.html" using a text editor or an integrated
development environment (IDE) of your choice.

Step 2: Define the HTML Skeleton

In the "inline_css_activity.html" file, set up the basic HTML structure:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

47
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 48 of 91

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Activity</title>

</head>

<body>

<!-- Your HTML content will go here -->

</body>
</html>

Step 3: Add HTML Content

Add some basic HTML content to the "body" section. For this activity, we'll use a simple heading,
paragraph, and an image:

<body>

<h1 style="color: #007bff; text-align: center;">Welcome to Our First Inline

C SS Activity</h1>

<p style="font-size: 18px; line-height: 1.6; text-align: justify;">In this

activity, you will learn how to embed CSS directly into HTML elements using
Inline CS S.</p>

<img src="[Link]" alt="Example Image" style="display: block; margin: 0

auto; max-width: 100%; height: auto;">

</body>

</html>
Step 4: Save and View the Web Page

Save the "inline_css_activity.html" file. Then, open it using a web browser to view the webpage with
the applied Inline CSS styles.

By completing this step-by-step activity, trainees have gained hands-on experience in embedding CSS
styles directly into HTML elements using Inline CSS. They now understand how to apply styling to
individual HTML elements without relying on an external CSS file, and they can use this knowledge
to customize the design and layout of their future web development projects.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

48
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 49 of 91

Full Code:

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Activity</title>

</head>

<body>

<h1 style="color: #007bff; text-align: center;">Welcome to Our First Inline

C SS Activity</h1>

<p style="font-size: 18px; line-height: 1.6; text-align: justify;">In this

activit y, you will learn how to embed CSS directly into HTML elements using
Inline CS S.</p>

<img src="[Link]" alt="Example Image" style="display: block; margin: 0

auto; max-width: 100%; height: auto;">

</body>
</html>

Sample Output:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

49
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 50 of 91

3.2.2 Using Internal CSS:

In this step-by-step activity, trainees will learn how to embed CSS styles directly into an HTML
document using Internal CSS. By the end of this activity, students will understand how to apply styling
to HTML elements without using an external CSS file and will be able to create visually appealing
web pages.
Step 1: Set Up the Basic HTML Structure
Create a new HTML file named "internal_css_activity.html" using Visual Studio code or an integrated
development environment (IDE) of your choice.
Step 2: Define the HTML Skeleton
In the "internal_css_activity.html" file, set up the basic HTML structure:

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS Activity</title>

</head>

<body>

<!-- Your HTML content and CSS styles will go here -->

</body>

</html>

Step 3: Add HTML Content

Add some basic HTML content to the "body" section. For this activity, we'll use a simple
heading, paragraph, and an image:
<html>
<body>

<h1>Welcome to Our First Internal CSS Activity</h1>

<p>In this activity, you will learn how to embed CSS using Internal CSS
direct ly into an HTML document.</p>

<img src="[Link]" alt="Example Image">

</body>

<html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

50
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 51 of 91

Step 4: Embed Internal CSS

Inside the "head" section of the HTML document, add the <style> element to embed the Internal
CSS. Use CSS properties to style the HTML elements:

<head>
<title>Internal CSS Activity</title>
<style>

h1 {

color: #007bff;
text-align:
center;

}
p {

font-size: 18px;
line-height: 1.6;
text-align:
justify;

img {

display: block;
margin: 0 auto;

max-width: 100%;
height: auto;

}
</style>
</head>

Step 5: Save and View the Web Page

Save the "internal_css_activity.html" file. Then, open it using a web browser to view the webpage
with the applied Internal CSS styles.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

51
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 52 of 91

<!DOCTYPE html>

<html>
<head>
<title>Internal CSS Activity</title>
<style>
h1 {
color: #007bff;
text-align:
center;}

p {
font-size: 18px;
line-height: 1.6;
text-align:
justify;}

img {
display:
block; margin:
0 auto;
max-width: 100%;
height: auto;}

</style>
</head>
<body>
<h1>Welcome to Our First Internal CSS Activity</h1>
<p>In this activity, you will learn how to embed CSS using Internal CSS
direct ly into an HTML document.</p>

<img src="[Link]" alt="Example Image">

</body>
</html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

52
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 53 of 91
Sample Output:

3.2.3 Using External CSS: External CSS Linking: Styling Your Web Page with External CSS

In this step-by-step activity, trainees will learn how to link an external CSS file to an HTML document
and apply styles to the HTML elements using External CSS. By the end of this activity, trainees will
understand how to keep the CSS separate from HTML and apply consistent styles to multiple web
pages.

Step 1: Set Up the Basic HTML Structure

Create a new HTML file named "external_css_activity.html" using a text editor or an integrated development
environment (IDE) of your choice.
Step 2: Define the HTML Skeleton
In the "external_css_activity.html" file, set up the basic HTML structure:

<!DOCTYPE html>

<html>

<head>

<title>External CSS Activity</title>

<!-- Link your external CSS file here -->

</head>
<body>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

53
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 54 of 91
<!-- Your HTML content will go here -->

</body>
</html>

Step 3: Create the External CSS File

Create a new CSS file named "[Link]" in the same directory as the HTML file. This file will contain
the CSS styles for the HTML elements.
Step 4: Add HTML Content
Add some basic HTML content to the "body" section. For this activity, we'll use a simple heading,
paragraph, and an image:

<!DOCTYPE html>

<html>

<head>

<title>External CSS Activity</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<h1>Welcome to Our External CSS Activity</h1>

<p>In this activity, you will learn how to link an external CSS file and
apply st yles to HTML elements using External CSS.</p>

<img src="[Link]" alt="Example Image">

</body>
</html>

Step 5: Add CSS Styles to "[Link]"

Open the "[Link]" file and add CSS styles to apply to the HTML elements:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

54
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 55 of 91

/* [Link] */
h1 {

color: #007bff;
text-align:
center;

}
p {

font-size: 18px;
line-height: 1.6;
text-align:
justify;

img {

display: block;
margin: 0 auto;

max-width: 100%;
height: auto;

Step 6: Save and View the Web Page

Save both the "external_css_activity.html" and "[Link]" files. Then, open the HTML file using a
web browser to view the webpage with the applied External CSS styles.

By completing this step-by-step activity, trainees have learned how to link an external CSS file to an
HTML document and apply styles to HTML elements using External CSS. They now understand the
advantages of separating CSS from HTML, and they can apply consistent styles to multiple web pages
by using External CSS. This knowledge will enable them to create visually appealing and maintainable
websites in their future web development projects.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

55
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 56 of 91
Full Code:
external_css_activity.html:

<!DOCTYPE html>

<html>

<head>

<title>External CSS Activity</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<h1>Welcome to Our External CSS Activity</h1>

<p>In this activity, you will learn how to link an external CSS file and
apply st yles to HTML elements using External CSS.</p>

<img src="[Link]" alt="Example Image">

</body>
</html>

[Link]:

/* [Link] */
h1 {

color: #007bff;
text-align:
center;

}
p {

font-size:
18px; line-
height: 1.6;

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

56
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 57 of 91
text-align: justify;

img {

display: block;
margin: 0 auto;

max-width: 100%;
height: auto;

Sample Output:

Understanding CSS Selectors: Element, Class, and ID Selectors

In this step-by-step activity, trainees will learn how to apply CSS styles to HTML elements using
Element, Class, and ID Selectors. By the end of this activity, students will understand the different
types of CSS selectors and how to use them to target specific HTML elements for styling.
Step 1: Set Up the Basic HTML Structure
Create a new HTML file named "css_selectors_activity.html" using a text editor or an integrated
development environment (IDE) of your choice.
Step 2: Define the HTML Skeleton

In the "css_selectors_activity.html" file, set up the basic HTML structure:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

57
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 58 of 91

<!DOCTYPE html>

<html>

<head>

<title>CSS Selectors Activity</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<!-- Your HTML content will go here -->

</body>
</html>

Step 3: Create the External CSS File

Create a new CSS file named "[Link]" in the same directory as the HTML file. This file will
contain the CSS styles using various selectors.
Step 4: Add HTML Content
Add some basic HTML content to the "body" section. For this activity, we'll use a heading, paragraph,
and a few div elements:

<!DOCTYPE html>

<html>

<head>

<title>CSS Selectors Activity</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>
<h1>Welcome to CSS Selectors Activity</h1>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

58
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 59 of 91

<p>In this activity, you will learn how to use Element, Class, and ID
Selectors to apply CSS styles to HTML elements.</p>

<div>Element Selector</div>
<div class="highlight">Class Selector</div>

<div id="unique">ID Selector</div>

</body>

</html>
Step 5: Add CSS Styles to "[Link]"
Open the "[Link]" file and add CSS styles using Element, Class, and ID Selectors:

/* [Link] */

/* Element Selector */
h1 {

color: #007bff;
text-align:
center;

/* Class Selector */

.highlight {
font-size: 20px;
font-weight:
bold;

background-color: #f7f7f7;
padding: 10px;

/* ID Selector
*/ #unique {

color: #ff4500;
text-align:
right;

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

59
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 60 of 91
Step 6: Save and View the Web Page
Save both the "css_selectors_activity.html" and "[Link]" files. Then, open the HTML file using
a web browser to view the webpage with the applied CSS styles.

By completing this step-by-step activity, trainees have learned how to use Element, Class, and ID
Selectors to apply CSS styles to HTML elements. They now understand the differences between
these selectors and how to target specific elements for styling. This knowledge will enable them
to create more customized and visually appealing websites in their future web development
projects.
Full Code:
css_selectors_activity.html:

<!DOCTYPE html>

<html>

<head>

<title>CSS Selectors Activity</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<h1>Welcome to CSS Selectors Activity</h1>

<p>In this activity, you will learn how to use Element, Class, and ID
Selectors to apply CSS styles to HTML elements.</p>

<div>Element Selector</div>

<div class="highlight">Class Selector</div>

<div id="unique">ID Selector</div>

</body>

</html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

60
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 61 of 91

css code

/* [Link] */
/* Element Selector */
h1 {

color: #007bff;
text-align:
center;

/* Class Selector */

.highlight {

font-size: 20px;
font-weight:
bold;

background-color: #f7f7f7;
padding: 10px;

/* ID Selector
*/ #unique {

color: #ff4500;
text-align:
right;

Sample Output:

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

61
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 62 of 91

Activities

Consider the Course Management System website

Activity 1: Inline CSS
Open your HTML page and use the style attribute to apply CSS directly to elements (e.g., <h1>).
Activity 2: Internal CSS
1. Open the <head> section of your HTML file.
2. Add a <style> block and write CSS code that styles elements throughout the page.
Activity 3: External CSS
1. Create a new file called [Link] and write CSS rules in it.
2. Link the [Link] file to your HTML document in the <head> section using the <link> tag.
<link rel="stylesheet" href="[Link]">
3. Save both files and refresh the webpage to see the changes.

3.3 Create Layout and Navigation of a Web Page

 CSS Positioning helps place elements precisely but must be used carefully to avoid layout issues.
 Flexbox provides a simple and responsive method for aligning and distributing space among items in
a container.
 Navigation bars are a critical part of user experience and should be intuitive, consistent, and mobile-
friendly.
 CSS Grid is ideal for building complex, multi-dimensional layouts and works well when combined
with Flexbox.

CSS Box Model

Description: In this exercise, trainees will enhance a responsive web page with highlighted boxes.
The customer, Mary Smith, wants to improve the visual appeal of her webpage by adding distinct
styles to the text boxes. Follow the step-by-step instructions to apply the box model concepts.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

62
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 63 of 91

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

63
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 64 of 91
Step 1: Set Up HTML Structure

Create a new HTML file and copy the provided HTML code. This code includes four text boxes,
each with a different class.

html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="robots" content="noindex">

<meta name="viewport" content="width=device-width, initial-sca le=1.0">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Responsive web page with highlighted boxes</title>

<meta name="description" content="A sample responsive web page with examples

of text in highlighted boxes.">

<meta name="author" content="Mary Smith">

<link rel="stylesheet" href="[Link]">

</head>

<body>

<!-- Existing text boxes -->

<!-- Add your styles to make these boxes visually appealing -->

</body>

</html>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

64
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 65 of 91
Step 2: Create a CSS File

Create a new file named [Link] and link it to your HTML file. This is where you will apply the
styles for the box model.

/* [Link] */

.important-note-1 {

/* Add styles for the first text box */

.important-note-2 {

/* Add styles for the second text box */

.important-note-3 {

/* Add styles for the third text box */

.important-note-4 {
/* Add styles for the fourth text box */
}

Step 3: Apply Padding to the First Box

Inside the .important-note-1 class, experiment with different values for the padding property to see
how it affects the space inside the box.

.important-note-1 { margin:
42px 0 42px 0;

padding: 20px; /* Try different values, like 10px, 20px, 30p x, etc. */

border-style: solid;
border-width: 1px;

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

65
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 66 of 91
Step 4: Add a Border to the Second Box

Continue working inside the .important-note-2 class. Add a border to the second text box.

.important-note-2 { margin:
42px 0 42px 0;

padding: 14px 0 14px 0;

border-style: solid; border-
top-width: 8px; border-bottom-
width: 4px; border-left-width:
0;

border-right-width: 0;

Step 5: Adjust Margins in the Third Box

Inside the .important-note-3 class, experiment with the margin property to see how it affects the
space outside the box.

.important-note-3 {

margin: 10px 0 42px 0; /* Try different values, like 10px, 2 0px, 30px,
etc. */

padding: 14px 14px 20px 14px;

border-style: solid;

border-top-width: 0;

border-bottom-width: 0;
border-left-width: 20px;
border-right-width: 0;

}
Step 6: Apply Border Radius to the Fourth Box
In the .important-note-4 class, experiment with the border-radius property to give the fourth text box
rounded corners.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

66
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 67 of 91

.important-note-4 { margin:
42px 0 42px 0;

padding: 14px 14px 24px 14px;

border-style: solid;

border-width: 3px;

border-radius: 15px; /* Try different values for rounded cor ners */

Step 7: Test and Reflect

Save your files and open the HTML file in a browser. Observe how changes in padding, borders, and
margins impact the appearance of each text box.

Congratulations! You've successfully practiced using the box model in CSS to control the layout and
spacing of elements on a webpage. Feel free to experiment with other properties and values to
deepen your understanding.

Horizontal Navigation Exercise

Description: In this exercise, trainees will be working on a fictional client's website. The client
needs a clean and organized horizontal navigation bar to improve user experience. Follow the step-
by-step instructions to create a simple and effective navigation menu.

Step 1: Set Up HTML Structure

Create a new HTML file and set up the basic structure with the <!DOCTYPE html> declaration,
<html>, <head>, and <body> tags.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

67
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 68 of 91

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-s cale=1.0">

<title>Client's Website</title>

<link rel="stylesheet" href="[Link]">

</head>

<body>

<!-- Navigation will go here -->

<!-- Content of the webpage will go here -->

</body>
</html>

Step 2: Create a CSS File

Create a new file named [Link] and link it to your HTML file. This is where you will apply the
styles for the navigation.

/* [Link] */ body {

font-family: Arial, sans-serif; margin: 0;

}
/* Add your navigation styles here */

Step 3: Design the Navigation Bar

Inside the [Link], design the basic styles for the navigation bar. Add styles to remove default list
styles and make the list horizontal.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

68
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 69 of 91

/* [Link] */
body {
font-family: Arial, sans-serif; margin:
0;
}
nav {
background-color: #333;
}
nav ul {
list-style-type: none; margin:
0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px; text-
decoration: none;
}
nav a:hover {
background-color: #ddd; color:
black;
}

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

69
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 70 of 91

Step 4: Add Navigation Links

Inside the <body> of your HTML file, add the navigation bar with some sample links.

<!-- Inside the body tag of [Link] -->

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

Step 5: Test and Reflect

Save your files and open the HTML file in a browser. Observe how the navigation bar appears and
how it behaves when you hover over the links.
Congratulations! You've successfully created a horizontal navigation bar for your client's website. Feel free
to customize the styles, add more links, or experiment with different effects to enhance the navigation bar.

Perform the following activities on Course Management System website

Activity 1: CSS Positioning

Apply various CSS positioning techniques to different elements of the Course Management system website
and observe how they behave in a layout.
Practice: Try positioning a sidebar (position: sticky) and a banner (position: absolute) relative to a container.
Activity 2: Flexbox Layout
Use Flexbox to arrange elements horizontally or vertically within a container.
Practice: Create a two-column layout with text on one side and an image on the other. Adjust alignment and
spacing.
Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

70
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 71 of 91
Activity 3: Create a Navigation Bar
Design a horizontal navigation bar using Flexbox and style the links for hover and active states.
Practice: Create a navigation bar that stays fixed at the top and collapses into a menu on small screens (intro
to responsive design).
Activity 4: CSS Grid Layout
Use CSS Grid to organize a web page into rows and columns for more complex designs.
Unit Summery
In this unit, trainees learned how to enhance the presentation of web pages by integrating CSS (Cascading
Style Sheets) into their HTML-based websites. Trainees practiced to how to apply CSS styles to HTML
elements using Element, Class, and ID Selectors into their HTML-based websites using different
[Link] allows for the separation of content (HTML) and style (visual design), enabling web pages to
look polished and user-friendly. Trainees learned to apply basic CSS properties, understand the differences
between inline, internal, and external CSS, and created page layouts and navigation systems that are both
functional and aesthetically pleasing.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

71
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 72 of 91

Unit Four: Apply Interactive to a Website

Unit Introduction

This unit equips trainers with the skills and knowledge how to add interactivity to a website using JavaScript.
The training is centered a real-world case scenario: the development of a website for Course Management
System. The goal is to make the learning process practical and aligned with real-world applications, focusing
on user experience, security, and usability through scripting.

Unit Objectives

At the end of the unit, trainees will:

 Implement interactivity using JavaScript.
 Validate user input using client-side scripts.
 Implement client-side form validation using JavaScript.
 Integrate JavaScript with HTML and CSS to build interactive components.
 Use conditional statements and loops in JavaScript to control interactive behaviors.

Expected Outcomes
 Interactivity of webpages using JavaScript is implemented.
 Validated user input using client-side scripts.
 Interactive behaviors of webpage are controlled using conditional statements and loops in JavaScript.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

72
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 73 of 91
4.1 Apply Interactive Using JavaScript

1. What are some real-world examples of websites that effectively

use interactive features based on your experience?
2. What types of user actions can JavaScript respond to? And its basic
difference from HTML and CSS in terms of user interaction?

JavaScript is a client-side scripting language used to create interactive web pages. Runs in the browser (can
also run on server using [Link]). JavaScript Works with HTML and CSS to make websites dynamic.

Description:
In this activity, trainees will create an interactive calculator using JavaScript functions. The project
aims to reinforce the concept of functions in JavaScript. By the end of the activity, you'll have a fully
functional calculator that can add, subtract, multiply, and divide numbers.

Step 1: Set Up the HTML Structure

Create an HTML file ([Link]) with a basic structure for the calculator.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

73
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 74 of 91

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Interactive Calculator</title>
</head>

<body>

<h1>Interactive Calculator</h1>

<div>

<label for="num1">Number 1:</label>

<input type="number" id="num1">

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

74
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 75 of 91
</div>

<div>

<label for="num2">Number 2:</label>

<input type="number" id="num2">

</div>

<div>

<button onclick="add()">Add</button>

<button onclick="subtract()">Subtract</button>

<button onclick="multiply()">Multiply</button>

<button onclick="divide()">Divide</button>

</div>

<div>

<p>Result: <span id="result">0</span></p>

</div>

<!-- JavaScript code will be added here -->

</body>

</html>

Step 2: Add JavaScript Functions

Embed a <script> tag at the end of the <body> to add JavaScript code.

<!-- JavaScript code -->

<script>

// JavaScript functions function

add() {

// Function code will be added here

}

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

75
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 76 of 91

function subtract() {

// Function code will be added here

function multiply() {

// Function code will be added here

function divide() {

// Function code will be added here

}
</script>

Step 3: Implement Functionality

Inside the script tag, implement the functionality for each function.

<script>

// JavaScript functions function

add() {

var num1 = parseFloat([Link]('num1').value);

var num2 = parseFloat([Link]('num2').value);

var result = num1 + num2;

[Link]('result').textContent =

result;
}

function subtract() { var num1 =

parseFloat([Link]('num1').value);

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

76
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 77 of 91

var num2 = parseFloat([Link]('num2').value);

var result = num1 - num2;
[Link]('result').textContent =
result;
}

function multiply() { var num1

=
parseFloat([Link]('num1').value); var num2 =
parseFloat([Link]('num2').value); var result = num1 *
num2;

[Link]('result').textContent =
result;
}

function divide() { var

num1 =
parseFloat([Link]('num1').value); var num2 =
parseFloat([Link]('num2').value); var result = num1 /
num2;

[Link]('result').textContent =
result;
}
</script>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

77
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 78 of 91
Expected Output:

Upon completing these steps, you'll have an interactive calculator that performs basic arithmetic
operations based on user input. Users can enter two numbers, click on the operation buttons (Add,
Subtract, Multiply, Divide), and see the result displayed on the webpage.

Expand this activity by adding more functionality, improving the user interface, or
introducing additional mathematical operations.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

78
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 79 of 91

4.2 Validate user input

1. What kind of validation should be done on a course registration form

from Course Management System website?
2. How can you prevent a form from submitting if the data is invalid?

Description:

In this activity, trainees will create a simple web form with JavaScript validation. The form will collect
user details such as name, age, and email. We'll use if statements to check if the entered data is valid.
If it's not, an error message should be displayed. Follow the steps below:

Step 1: HTML Setup:

 Create an HTML file ([Link]) with a form that includes fields for name, age, and
email.
 Add a submit button.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial- scale=1.0">

<title>Form Validation</title>

</head>

<body>

<h2>User Details</h2>

<form id="userForm">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br>

<label for="age">Age:</label>

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

79
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 80 of 91
<input type="number" id="age" name="age" required><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br>

<button type="button" onclick="validateForm()">Submit</button>

</form>

</body>
</html>

2. JavaScript Validation:

 Create a JavaScript file ([Link]) and link it to your HTML file.

 Implement the validateForm function.
 Use if statements to check if the name is not empty, age is between 18 and 100, and
the email is valid.
// [Link]

function validateForm() {

var name = [Link]('name').value; var age =

[Link]('age').value;

var email = [Link]('email').value;

if (name === "") {

alert("Name must be filled out"); return

false;

if (isNaN(age) || age < 18 || age > 100) { alert("Age

must be between 18 and 100"); return false;

}
// Simple email validation

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

80
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 81 of 91
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if
() {

alert("Invalid email address"); return

false;

alert("Form submitted successfully!");

}

 When the form is submitted with valid data, an alert saying "Form submitted
successfully!" should appear.

 If any field is empty or the age is not within the specified range, appropriate error
messages should be displayed.

Activities

Consider the scenario Course Management System website

Activity1:
1. Validation Planning
 Focus on client-side validation in [Link] to ensure fields like name, email, and message are filled
correctly.
Task: - In groups, discuss validation rules (e.g., name, email regex).

 Output: Rule list.

2. JavaScript Coding

 Individually, create js/[Link] to validate [Link] form (empty fields, email).

Task:- In js/[Link], write validation functions for contact form.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

81
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 82 of 91
 Output: Validated contact form preventing blank or invalid email submissions.

Unit Summery

In this unit, trainees learned how add interactivity to a website using JavaScript. Trainees practiced on fictional
client's website and created clean and organized horizontal navigation bar to improve user experience by
following the step-by-step instructions to create a simple and effective navigation menu. Trainees created a
simple web form with JavaScript validation by using if statements to check if the entered data is valid. If it's
not, an error message should be displayed. Trainees developed Course Management System real world
scenario focusing on user experience, security, and usability through scripting.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

82
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 83 of 91

Unit Five: Developing the backend

Unit Introduction
This unit focuses on building a dynamic, secure back-end for the Course Management System website using
PHP and MySQL. Trainees will set up the development environment, create and connect a database,
implement user authentication and course registration systems, and develop an admin panel for managing
users, Course list, and feedback. This unit ensures the website meets functional requirements like (e.g., Course
registration) and non-functional requirements (e.g., security, responsiveness) requirements.

Unit Objectives

At the end of the unit, trainees will:

 Configure a local server environment and MySQL database for web development.

 Develop secure user authentication and functionalities with PHP and MySQL.

 Build an admin panel to manage website data, ensuring role-based access and CRUD
operations.

Expected Outcomes

 Local server environment and MYSQL database for web development are configured.

 Developed secure user authentication and functionalities with PHP and MySQL.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

83
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 84 of 91

5.1 Setting Up the Back-End Environment and Database

The backend environment refers to the server-side part of a web application. It manages:

 Business logic
 Database communication
 Authentication & authorization
 APIs and server responses

5.2 Understanding XAMPP and Local Development

1. Why do developers use XAMPP instead of deploying directly to a

live server?
2. What other alternatives to XAMPP do we have, compare and explain
the difference?

XAMPP is a free, open-source software bundle that simplifies web development by providing a local
environment to test your website before it goes live. It includes Apache, which acts as the web server
to handle HTTP requests and serve your PHP files, and MySQL, which manages the database to store
data like users, courses, and for course management system. For Activity 1 (Environment Setup),
installing XAMPP correctly is critical because it allows you to run your website locally at
[Link] When setting up, download XAMPP from a trusted source (e.g., [Link])
and install it in a default location like C:\xampp to avoid permission issues. After installation, start
Apache and MySQL from the XAMPP Control Panel and verify they’re running (green indicators).
Test the setup by visiting [Link] in your browser, which should display the
XAMPP welcome page. Tip: If Apache or MySQL fails to start, check for port conflicts (e.g., port
80 used by another program like Skype) using the XAMPP Control Panel’s “Netstat” button, and free
Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

84
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 85 of 91
up ports by closing conflicting apps or changing XAMPP’s default ports.

Tip: Keep the XAMPP Control Panel open during development to quickly stop/start services, and
bookmark [Link] for easy database access in later activities.

5.3 Principles of Database Design

A well-designed database is the backbone of any dynamic website, ensuring data is stored efficiently
and relationships between data points are clear. For Activity 2 (Design Database Tables), you’ll create
tables for the Course Management System database, such as users, courses, feedback, to support
features like user accounts, list of courses, and enrollments. Each table needs a primary key, typically
an id column set to AUTO_INCREMENT, which automatically assigns unique IDs to new records
(e.g., user_id for each user). For enrollments, use foreign keys to link to users and courses (e.g.,
user_id references [Link], course_id references [Link]), ensuring data integrity—if a user is
deleted, their enrollment can’t reference a nonexistent ID. Design tables with appropriate data types:
use VARCHAR for usernames and emails, TEXT for course descriptions.

Tip: Sketch your tables on paper or a whiteboard before coding, listing columns, data types, and
relationships This helps visualize foreign keys and prevents redesign later.

Tip: Keep column names consistent (e.g., always user_id, not userid) to avoid confusion in queries,
and include a created_at column in tables like feedback to track submission times.
Setting Up a MySQL Database

MySQL, included in XAMPP, is a powerful system for storing and retrieving data, and creating a
database correctly is essential for the Course Management System website. In Activity 3 (MySQL
Database Setup), you’ll use phpMyAdmin, a web-based tool accessed via
[Link] to create the course_mgt database and its tables based on your Activity
2 design. Start by creating the database, then define tables with SQL commands or phpMyAdmin’s
graphical interface, specifying columns, data types, and constraints (e.g., PRIMARY KEY,
FOREIGN KEY). For example, the users table might have id (INT, AUTO_INCREMENT,
PRIMARY KEY), username (VARCHAR(50)), email (VARCHAR(100)), and password
(VARCHAR(255)). After creating tables, insert sample data manually or via SQL to test
functionality.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

85
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 86 of 91

Tip: Save your table creation and sample data SQL in a .sql file (e.g., course_mgmt.sql) using
phpMyAdmin’s “Export” feature or a text editor. This lets you quickly recreate the database if errors
occur or for future projects.

Tip: Test each table after creation by running a SELECT * FROM table_name; query in
phpMyAdmin’s SQL tab to ensure columns and sample data appear as expected.

5.4 Secure Database Connectivity with PDO

PHP Data Objects (PDO) is a secure and flexible way to connect your PHP code to MySQL,
protecting the Course Management System website from common security risks like SQL injection.
In Activity 4 (Database Connectivity with PHP), you’ll create a [Link] file to establish a PDO
connection, which will be reused across your website (e.g., in [Link], [Link]).

PDO uses prepared statements, where placeholders (e.g., ? or :name) replace user inputs in queries,
ensuring malicious code can’t manipulate the database. Set up the connection with a DSN (Data
Source Name) like mysql:host=localhost;dbname=course_mgmt, a username (usually root), and a
blank password (default for XAMPP’s local MySQL). Wrap the connection in a try-catch block to
handle errors gracefully—if the database isn’t found, the catch block can display a user-friendly
message like “Connection failed.”

Tip: Test your PDO connection early by adding echo "Connected"; after the connection code in
[Link], then include it in a test PHP file (e.g., [Link]) and visit [Link]
system/[Link]. If you see “Connected,” your setup is correct.

Tip: Store [Link] in an includes folder (e.g., course-mngt-system/includes/[Link]) to keep it

organized and secure, and use require_once in other files to avoid duplicate connections.

Best Practices for Testing and Troubleshooting

Testing each component as you build ensures the back-end environment works reliably for Course
Management Course. For all activities, verify XAMPP services are running before testing—Apache
for PHP files, MySQL for database access.

In Activity 1, check [Link] after starting XAMPP to confirm Apache is active. In Activity 3,

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

86
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 87 of 91
after setting up the database, insert and retrieve sample data (e.g., SELECT * FROM users;) to
confirm table functionality. In Activity 4, run a simple PDO query (e.g., SELECT name FROM
courses) and display results to ensure the connection works.

Tip: Break tasks into small steps—install XAMPP, then test Apache, then create the database, then
connect with PDO—to catch errors early. If phpMyAdmin shows “Access denied,” check MySQL
credentials (default: root, no password) or restart MySQL in XAMPP.

Tip: If PDO throws errors like “Could not find driver,” ensure the php_pdo_mysql extension is
enabled in [Link] (located in C:\xampp\php), which you can check via phpinfo() in a test PHP file.
Keep error messages visible during development (set display_errors = On in [Link]) to diagnose
issues, but plan to disable them for a live site to enhance security.

Activities

Activity 1: Setting Up Your Local Web Environment

This hands-on activity introduces you to web development by letting you explore a local server environment
and confirm it works, building confidence in your setup.
Instructions
 Install XAMPP: Download XAMPP from its official website and install it on your computer,
choosing a simple location like C:\xampp. Think of XAMPP as your website’s home—it provides the
server (Apache) and database (MySQL) you’ll use.
 Start Services: Open the XAMPP Control Panel and start Apache and MySQL. Watch for green
indicators to know they’re running, like turning on the engine of your web project.
 Set Up Project Folder: Create a folder named course-mgt inside XAMPP’s htdocs directory (e.g.,
C:\xampp\htdocs). This is where your website files will live.
 Test Your Setup: Open a browser and go to [Link] If you see a basic page or
file list, your environment is ready! If not, check XAMPP services or ask for help—it’s like
troubleshooting a new gadget.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

87
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 88 of 91
 Explore: Try visiting [Link] to peek at the database tool you’ll use later. Reflect

on how this setup mimics a real website’s server.

Output
A working XAMPP environment with Apache and MySQL running, and a course-mgt folder in htdocs, ready
for your website files.
Activity 2: Designing Database Tables for Course Management System (20 minutes)
Overview
In this activity, you’ll work in small groups to discuss and sketch tables that will store information like users,
courses. By thinking about what data the site needs and how tables connect, you’ll practice database design,
a key skill in web development, while sharing ideas and learning from each other.
Instructions
 Form Groups: Join a small group (3-4 classmates) to brainstorm together. Your goal is to decide what
tables the website needs to store its data, like a blueprint for a house.
 Discuss Table Needs: Talk about the website’s features—users signing up, course enrollment, admins
managing data. For each feature, ask: What information do we need? For example, a users table might
store emails and passwords.
 Sketch Tables: On paper or a whiteboard, draw tables with columns for each data piece. For instance,
jot down users: id, username, email, password or enrollments: id, user_id, course_id. Think about how
tables link—does enrollments need to reference users or course?
 Share Ideas: Explain your sketches to another group or the class. Listen to their designs and consider
tweaking yours if you hear a cool idea, like adding a column for tour dates.
 Reflect: Discuss why organizing data this way matters for the website. How will it help users book
tours or admins manage them?
Output
Sketches of database tables (e.g., users, courses, enrollments) with columns and notes on their connections,
created collaboratively.

Activity 3: Building Your MySQL Database for Course Management System (20 minutes)
Overview
Now it’s time to create the heart of the Course Management System website—a MySQL database to store all
its data, like users and courses. In this activity, you’ll work individually to set up a database called

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

88
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 89 of 91
course_mgmt_system using phpMyAdmin, bring your table designs to life, and add some sample data to see
it in action. This hands-on task lets you explore database creation, helping you understand how websites store
information while building confidence through trial and error.
Instructions
 Create the Database: Open your browser and go to [Link] Create a new
database named course_mgmt_system—think of it as a big filing cabinet for your website’s data.
 Build Tables: Using the table sketches from Activity 2 (e.g., users, courses, enrollment), set up each
table in phpMyAdmin. Add columns like id, username based on your design, choosing the right types
(e.g., numbers for IDs, text for names). It’s like setting up drawers in that filing cabinet.
 Add Sample Data: Put two example entries into each table. For example, in courses, add a course like
“Web Development” and another like “Database Design” In users, create two sample users with emails
and passwords. This is like filling the drawers with test files to check they work.
 Check Your Work: Look at your tables in phpMyAdmin to make sure the data shows up correctly.
Try running a simple query like “show me all courses” in the SQL tab to see your sample data.
Output
A course_mngt_system database in phpMyAdmin with tables (e.g., users, courses, enrollment) and two
sample data entries per table, ready to store website information.

Unit Summery

In this unit, trainees learned on building a dynamic, secure back-end for the Course Management
System website using PHP and MySQL. Throughout this unit trainees practiced to set up the
development environment, create and connect a database, implement user authentication for the
selected scenario Course Management System website. Trainees developed an admin panel for
managing users, Course list, and feedback on Course Management System website. Lastly the
functional and nonfunctional requirements of Course Management System website that is used
throughout this module is ensured.

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

89
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 90 of 91

References
1. Cory Lebson (2021). The UX Careers Handbook, CRC Press, 2nd edition.
2. Steve Krug (2014). Don’t Make Me Think: A Common-Sense Approach to Web Usability, New Riders,
3rd edition.
3. Jason Beaird (2020). The Principles of Beautiful Web Design, SitePoint, 4th edition.
4. Jon Duckett (2011). HTML and CSS: Design and Build Websites, Wiley, 1st edition.
5. Jessica Minnick (2016). Web Design with HTML & CSS3: Introductory, Course Technology, 8th edition.
6. MDN Web Docs – Responsive Design
A comprehensive guide to responsive design principles, including fluid grids, flexbox, and media
queries, Link: MDN Web Docs: Responsive Design
7. W3Schools – Responsive Web Design
Simple, beginner-friendly tutorials with live examples. A great starting point for those new to responsive
[Link]: W3Schools: Responsive Web Design
8. freeCodeCamp – Responsive Web Design Certification
An interactive course that teaches HTML, CSS, and responsive web design principles through hands-on
[Link]: freeCodeCamp: Responsive Web Design Certification

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

90
 Institution Name Document No.
የየየየየ የ/የ/የ የየየየየየየ OF/FTI/AC/08
FDRE TVT INSTITUTE
Effective Date Title Issue No. Page No.
01/09/2016 Module 2 Page 91 of 91
Basic Training Tools
1. Code Editors: Visual Studio Code Used for HTML, CSS, PHP, and JS editing
2. Browsers & Dev Tools: Chrome Developer Tools, Firefox Developer Tools
3. XAMPP Software Installer: Local server environment for PHP & MySQL

Tel: 0116464455 Email: info@[Link] PO. Box: 190310 Website: [Link]

91