BUILD SIMPLE WEBSITES USING COMMERCIAL PROGRAMS

1.1 IDENTIFYING CLIENTS AND THEIR REQUIREMENTS

Definition: Customer Needs
Customer needs are the specific requirements, desires, and expectations that customers have when seeking
products or services. Understanding these needs is essential for creating solutions that provide value and solve
real problems.
The Importance of Identifying Customer Needs
Identifying customer needs is mission-critical for businesses for the following reasons:
1. Product Development: Creating products that truly speak to customers' problems ensures market
relevance and adoption.
2. Strategic Positioning: Understanding customer needs allows businesses to position their brand smartly in
the market, differentiating from competitors.
3. Team Alignment: Uniting internal teams behind specific customer needs ensures everyone works toward
the same goals.
4. Emotional Connection: Understanding needs from an emotional perspective helps build stronger
customer relationships.
5. Business Growth: Better understanding of the audience leads to improved products, services, and
ultimately business growth.
Four Key Elements of a Customer-First Strategy

Element Description

1. Identify Determine what customers want through research

2. Distribute Share feedback throughout your organization

3. Create Develop product/service features based on feedback

4. Collect Gather further feedback on changes you've made

Methods to Identify Customer Needs

1. Focus Groups
A focus group is a research technique in which you interview a group of people who represent your target
audience in an open discussion format.
Purpose: To foster open dialogue with attendees (potential customers or targeted customer personas) to get a
better understanding of how your customers may feel about your brand and the products or services you provide.
Benefits:
 Direct interaction with target audience
 Open dialogue reveals insights surveys may miss
 Opportunity to observe reactions, emotions, and body language
 Group dynamics can spark ideas individuals wouldn't think of alone
2. Social Listening
Social listening is the process of monitoring digital conversations to understand what customers are saying about
a brand, industry, or topic online.
Process:
 Identify which social platforms your customers are most active on
 Study what they talk about (enjoyment, pain points, questions)
 Monitor conversations, keywords, and hashtags
 Identify trends and opportunities
Benefits:
 Real-time insights
 Unfiltered customer opinions
 Identifies emerging trends
 Competitive intelligence
3. Keyword Research
Keyword research is the practice of analyzing and identifying the search terms that people enter into search
engines to find information, products, or services.
Purpose: Provides valuable insight into the questions, problems, and solutions your target audience is searching
for.
Benefits:
 Connects the right audience to your site
 Basis for meeting customers' needs
 Helps strategize content approach
 Targets the right keywords for SEO (Search Engine Optimization)
1.2 SELECTING THE BEST AUTHORING TOOLS
Authoring Tool
An authoring tool is a software program that enables users to create content, lessons, and courses using text,
media, and interactions. Users do not need technical programming expertise to utilize the software because
authoring tools are generally pre-programmed and offer:
 Ready-to-use interfaces
  Complete with templates
 Media tools
 Interactions
 Tests that users can easily arrange and manipulate
Authoring Tool Features & Capabilities
1. Content Authoring
The core feature of any authoring tool is the ability to create lessons, including adding and editing slides, images,
text, video, audio, or any other on-screen element.
Key Capabilities:

Media Type Features

Images Add/import images, Edit images

Audio Import/export, Edit, Record narration, Include in interactions

Webcam recording, Screen recording, Import/export, Insert to interactions, Link to external

Video
sources, Edit

Animation
Animate on-screen images/text, Import Flash/HTML5 animations, Insert text animations
s

Text & style editing, Object alignment, Background themes, Master slides, Navigation
Formatting
player skin options, Page transitions, Responsive design, PowerPoint import

2. Interactivity
Interactivity enables learners to take a more active role in acquiring information, increasing engagement and
retention through discovery, problem-solving, or working through scenarios.
Features:
 Built-in activities: drag & drop, matching, hotspot reveal, sliders, dials
 Custom activities or games
 Character scenarios with on-screen objects/images
 Slide layers, states, triggers
 Pop-ups, variables, markers, buttons
 Scrolling panels
3. Templates and Theme
Theme capability helps establish the right design for your course with a consistent look and feel across multiple
courses.
Features:
 Custom theme for entire course
 Background themes
 Built-in template shells
 Custom template creation
 Navigation player skin options
 External theme/template import
Importance: Having a consistent look and feel means your learner's attention is on the content instead of being
distracted by different designs.
4. Content Management
Content management features organize your assets, media, and other content to stay in control of all tools and
resources during development.
Features:
 Course and lessons libraries
 Quiz and question bank
 Template library
 Resource & Media library (video, audio, images)
5. Collaboration
Collaboration features enable quick and easy sharing of e-learning content with other developers or stakeholders.
Features:
 Review system with feedback
 Co-authoring
 Shared resources
 Share options (email, link, social media, upload)
 User roles
 Author control
 Versioning
6. Assessment
Assessment features determine learner retention, track achievement and progress, and evaluate course
effectiveness.
Features:
 Quizzes (form-based questions, open questions)
  Multiple retry attempts
 Feedback
 Course assessments
 Question bank (random questions, shuffle)
 Scoring (negative scoring, badges)
 Analytics tracking and reporting
7. Accessibility
Accessibility features respect different audio-visual sensory needs by changing or adding on-screen elements,
interactions, and formatting to suit different audience needs.
Features:
 Section 508 accessibility guidelines compliance
 WCAG 2.0 (Web Content Accessibility Guidelines) support
 Closed Captions (CC)
 Keyboard-accessible navigation
 Accessible font sizes
 Custom tab order
 Skip navigation
 Language ID for screen readers
 Translation file export
8. Publishing
Publishing features ensure compliance with Learning Management System (LMS) or organizational needs.
Formats:
 HTML5, Flash, iOS, Android
 CD File, Cloud-based
 Publish to Microsoft Word or PDF
 Compliance standards: SCORM, xAPI, AICC
SCORM (Sharable Content Object Reference Model): A set of technical standards for e-learning software
products that ensures they work together.
xAPI (Experience API): A new specification that allows tracking of learning experiences beyond traditional e-
learning.
9. Administration
Administration features enable setting up the tool for specific work needs and better utilization of features and
functionality.
Features:
  Language settings
 Flexible workspace setup (movable windows, tools, dockable panels)
 Preview and view preferences
 Autorecovery
 Roles and permissions
 Single sign-on (security)
10. Support & Training
Support and training features provide help in various forms to assist users in learning and using the tool
effectively.
Types:
 Online community forum
 Live chat support
 Email or phone support
 Tutorials and how-to guides
 Video guides
 Consultancy services
 Webinars
 Demos
 Updates & Upgrades
Content Standards
Content standards ensure authoring tools and LMS platforms can communicate with each other.
Examples:
 SCORM: Ensures course content works across different LMS platforms
 xAPI: Tracks learning experiences across different environments
Without these standards, authoring tools and platforms would not be able to speak to each other.
How to Choose an Authoring Tool
To make the right decision, understand the needs and requirements of your specific training project by asking:

Question Consideration

What expertise level will work with the software? Novice vs. Expert

What type of training content will be created? Types of courses, media needed

What is the budget? Cost of tool and ongoing expenses

Question Consideration

What platforms need to be supported? Desktop, mobile, tablet

What are organizational requirements? Compliance, branding, integration

1.3 INSTALLING SELECTED WEB AUTHORING TOOL

Overview: WordPress
WordPress is a free and open-source content management system (CMS) written in PHP and paired with a
MySQL or MariaDB database. It is the most popular CMS in the world, powering over 34% of all websites on
the internet.
Method #1: Choose a Host with WordPress Pre-installed
This method involves selecting a web hosting provider that automatically installs WordPress when you sign up.
Recommended Hosts:

Host Starting Price Features

Bluehost $2.75/month Pre-installed WordPress

SiteGround $2.99/month WordPress-specific features

Advantages:
 No technical installation required
 Immediate access to WordPress dashboard
 Host handles server configuration
 Time-saving
Method #2: Install WordPress via cPanel and Autoinstallers
cPanel: A web-based control panel that provides a graphical interface for managing web hosting services.
Autoinstaller: A software tool that automates the installation of applications like WordPress.
Common Autoinstallers:
 Softaculous
 Fantastico
 QuickInstall
 MOJO Marketplace
Installation Steps:
 1. Log into cPanel (hosting management dashboard)
2. Find the WordPress autoinstaller
3. Click the WordPress link
4. Click "Install Now"
5. Enter installation details:
o Protocol: HTTPS (if SSL certificate installed) or HTTP
o Domain name: Where to install
o Directory: Leave blank for main domain
o Site Settings: Site name and description
o Admin account: Username, password, email
6. Click Install
7. Access site at [Link]/wp-admin
Method #3: Install WordPress Manually via FTP
FTP (File Transfer Protocol): A standard network protocol used to transfer files from one host to another over a
TCP-based network.
Manual Installation Steps:
1. Download WordPress: Get latest version from [Link]
2. Upload files: Unzip and upload to public_html (or similar) directory using FTP program like FileZilla
3. Create MySQL Database:
o Access cPanel > MySQL Databases
o Create new database (remember the name)
o Create database user and password
o Add user to database with All Privileges
4. Configure [Link]:
o Enter database details
o Set security keys and salts
o Define table prefix (default: wp_)
5. Run Installation:
o Visit your domain
o Choose language
o Enter database details
o Enter site title, username, password, email
o Click "Install WordPress"
 6. Log in at [Link]/wp-admin
Method #4: Install WordPress on Your Own Computer (Localhost)
Localhost: A local server environment on your own computer that mimics a live web server.
Available Tools:

Tool Platform Description

WAMP Windows Windows, Apache, MySQL, PHP

XAMPP Windows/Linux/Mac Cross-platform stack

MAMP Mac Mac-specific stack

"Local" tool All Simplified WordPress installation

Benefits:
 Sandbox environment for learning
 No hosting costs
 Practice and experimentation without affecting live site
 Ideal for development and testing
1.4 SETTING PREFERENCE FOR WEB AUTHORING TOOL
Understanding the Different Editors in WordPress
WordPress has different editors for different purposes, each with specific block preferences that change the
interface behavior.
Site Editor
The Site Editor is used for managing the structure of your website. You can modify your home page appearance
and edit the templates and template parts that make up your site.
Purpose:
 Modify homepage appearance
 Edit templates and template parts
 Manage format of pages and posts
 Structure varies based on theme selection
Page/Post Editor
The Page/Post Editor allows you to modify the content of your WordPress site.
Difference between Pages and Posts:
Feature Pages Posts

Nature Static content Frequently updated

Authors Usually single author Multiple authors possible

Categories Not typically categorized Categorized and tagged

Date Not date-dependent Date-dependent

Site Editor Preferences

General Options:

Option Description

Focuses interface to show only the block being viewed; everything else
Spotlight Mode
faded out

Show button text labels Removes icons from menu toolbar and replaces them with text

Blocks Options:

Option Description

Blocks show the block Keeps text cursor in blocks, helping screen readers by keeping
interactions caret in blocks

Post/Page Editor Preferences

General Preferences
Publishing Section:
 Pre-publish checklist: Enables a checklist before publishing to ensure all elements are complete (default
on)
Appearance Section:

Option Description

Reduce the interface Reduces options in top toolbar; options reappear on mouse hover

Spotlight mode Highlights current block, fades other content

Option Description

Display the button labels Shows toolbar buttons as text instead of icons

Use theme styles Makes the editor look like your theme

Display block breadcrumbs Shows breadcrumbs at bottom of editor for navigation

Blocks Preferences
Block interactions:

Option Description

Show most used blocks Prioritizes frequently used blocks in the library

Contain text cursor inside block Keeps text cursor from leaving a block (helps screen readers)

Visible Blocks:
 Allows disabling blocks from appearing in block inserter
 Blocks can be re-enabled if needed
 All blocks are enabled by default
Panels Preferences
Document settings:
 Permalink (URL structure)
 Template (page template)
 Categories
 Tags
 Featured image
 Excerpt (brief summary)
 Discussion (comment settings)
Additional settings:
 Custom Fields visibility at bottom of post
 Enable/disable various panels in the editor
Self-Check 1 - Answer Key
I. True or False
 1. True - An authoring tool is a software program that enables users to create content, lessons and courses
using text, media, and interactions.
2. True - In Content management, it is important to be able to organize your assets, media and other content.
3. True - Most authoring tools have their own unique combination of features and capabilities catering to
different training needs.
II. Choose the Best Answer
1. E. None - All options (A, B, C, D) are elements of a customer-first strategy.
2. A. Do keyword research - Keyword research provides valuable insight into the questions, problems, and
solutions your target audience is searching for.
3. B. Administration - Administration features enable you to set up the tool for the way you need to work.
UNIT TWO: CREATE AND SAVE FILES
2.1 CREATING AND SAVING FILES IN CORRECT LOCATION OR DIRECTORY
File and Directory Structure
The file and directory structure of WordPress refers to the organization of folders and files on the server that
contain the WordPress core software, themes, plugins, and user-uploaded media. Understanding this structure is
essential for troubleshooting, maintenance, and security.
Why Learn About WordPress File and Directory Structure?
Most users can run their WordPress website without ever learning about WordPress files or directories. However,
understanding how WordPress stores files and directories can help you:
 Solve many common WordPress problems on your own
 Perform successful backups and migrations
 Implement security measures
 Debug issues quickly
 Customize and extend functionality
Accessing WordPress Files and Directories
Method 1: FTP Client (File Transfer Protocol)
FTP is a standard network protocol used to transfer files between a client and a server on a computer network.
Popular FTP Clients:
 FileZilla (Free, recommended)
 Cyberduck
 WinSCP
Method 2: File Manager
File Manager is a built-in application in most hosting control panels (like cPanel) that provides a web-based
interface for managing server files without requiring FTP software.
Advantages:
 No additional software needed
 Accessible from any browser
 Integrated with hosting control panel
WordPress Root Directory
The Root Directory (also called public_html or public folder) is the main folder where WordPress is installed on
your server. This is the highest level of your WordPress file structure.
Core WordPress Files and Folders
Three Main Folders:

Folder Purpose

wp-admin Contains files that manage the WordPress administration dashboard

wp-content Contains themes, plugins, and user uploads

wp-includes Contains core WordPress software and libraries

Core Files (Partial List):

File Purpose

[Link] Loads and initializes all WordPress files when a page is requested

[Link] Contains license information for WordPress

[Link] Documentation file with installation instructions

[Link] Handles account activation

[Link] Loads WordPress environment and template

[Link] Handles comment submission

[Link] Sample configuration file (template)

[Link] Handles scheduled tasks

File Purpose

[Link] Exports links in OPML format

[Link] Loads WordPress environment

[Link] Handles user login

[Link] Handles email posting

[Link] Contains WordPress settings

[Link] Handles user registration

[Link] Handles trackback requests

[Link] Enables remote connections to WordPress

Note: .htaccess and [Link] files are created after WordPress installation and are not in the initial
download package.
WordPress Configuration Files
.htaccess File
The .htaccess file is a server configuration file specifically for Apache web servers. It allows directory-level
configuration and is used by WordPress to manage permalinks and redirects.
Key Uses:
 Manage permalink structure
 Handle URL redirects
 Implement IP address blocking
 Password-protect your site
Hidden File: The .htaccess file is hidden by default. Enable "show hidden files" in your FTP client to view it.
Note: Some web hosts use nginx instead of Apache servers, so there may be no .htaccess file for your site.
[Link] File
The [Link] file is the configuration file that tells WordPress how to connect to your database and sets
global settings for your WordPress site.
Key Functions:
 Database connection information (name, username, password, host)
  Security keys and salts
 Database table prefix
 Debugging mode control
 Memory limit settings
Security Warning: Database credentials are stored in cleartext (plain, unencrypted text) in this file, making it a
frequent target for hackers.
[Link] File
The [Link] file is the entry point for all WordPress requests. It loads and initializes all WordPress files when a
page is requested by a user.
Inside The wp-content Folder
Definition: The wp-content folder is where WordPress stores all uploads, plugins, themes, and other user-
generated content.
Contents:

Folder Purpose

themes/ Contains all installed theme files

plugins/ Contains all installed plugin files

uploads/ Stores media files (images, videos, documents) organized by year/month

languages/ Contains language translation files

upgrade/ Temporary folder created during WordPress upgrades

Important Notes:
 You can edit files inside wp-content, but be careful
 Theme updates will overwrite changes made directly to theme files
 Best practice: Use child themes for modifications
 The uploads folder is critical for backups (difficult to restore without backup)
Caution with uploads folder:
 By default, uploads are organized in /year/month/ folders
 Always include the uploads folder when creating backups
 Losing the uploads folder is very hard to recover without a backup
2.2 NAVIGATING WEB AUTHORING TOOL ENVIRONMENT OR WORKPLACE
[Link] vs. [Link]

[Link] : A hosted platform where WordPress is already installed and managed for you. Good for users
who don't want to manage hosting or web servers.
[Link] : The self-hosted version where you download the software and install it on your own hosting.
Offers more control and flexibility.
WordPress Dashboard Navigation
Key Navigation Areas:

Area Description

Installing WordPress Via hosting control panel, manual installation, or one-click options

Dashboard Main admin area with overview of site activity

Publishing Content Create and manage posts, pages, categories, tags

Installing Plugins Add new functionality via Plugins > Add New

Installing Themes Change appearance via Appearance > Themes

Optimizing Performance Use caching, image optimization, database optimization

Security Updates, security plugins, strong passwords, regular backups

2.3 ACCESSING AND USING A RANGE OF FEATURES IN THE WEB AUTHORING TOOL
Basic Features of Web Authoring Software
Feature #1: Views

View Description

Standard/
Default view; similar to word processor screen; WYSIWYG (What You See Is
Normal/Design
What You Get)
View

Code View Allows you to view and work directly with HTML code

Split View Both Design and Code views displayed simultaneously in separate windows
Switching Views: Typically via the View menu, tabs, or buttons.
Feature #2: Creating Headings and SubHeadings
Headings are used to structure content hierarchically, making it easier to read and navigate. They also help with
SEO (Search Engine Optimization) and accessibility.
Heading Hierarchy:
 H1: Main heading (usually page title)
 H2: Major section headings
 H3-H6: Subheadings in descending importance
Best Practice: Only one H1 heading per page.
Feature #3: Inserting Links
A hyperlink (or link) is a reference to another web page, file, or location that users can click to navigate.
Process:
1. Select Insert from menu
2. Choose Link or Hyperlink
3. Select existing text (optional)
4. Dialog box prompts for destination
5. Selected text becomes clickable link
Types of Links:
 Internal Links: To pages on the same website
 External Links: To pages on other websites
 Anchor Links: To a specific part of the same page
Feature #4: Inserting Images
Images are visual elements inserted into web pages to enhance content, provide information, or improve visual
appeal.
Process:
1. Select Insert from menu
2. Choose Image or Picture
3. Dialog box prompts for:
o Image location (file path or URL)
o Alternate text (for accessibility)
4. Insert image into webpage
5. Edit attributes via Properties dialog box
Accessing Properties:
 Right-click on image
  Select Properties from popup menu
More Activities to Explore
 Ordered and unordered lists
 Tables
 Form fields
 Content organization with subheadings
 Adding links to new sections from homepage
Learning Tip: The best way to learn new software is to explore it and try adding different components.
2.4 MAINTAINING SUITABLE DIRECTORY STRUCTURE FOR SITE
Importance of Directory Structure
Just as your computer needs the right files in the correct places for your programs and features to perform, your
site requires the right structure to work as intended.
WordPress Market Position
 Most popular content management system in the world
 Powers 34% of all websites on the web
 61% share among CMS solutions
Key Concepts for Maintaining Structure

Concept Description

Keep core files in their intended Don't move or rename wp-admin, wp-includes without proper
locations configuration

Organize themes and plugins in wp-

All add-ons belong in their respective folders
content

Maintain uploads folder

Allow WordPress to manage uploads by year/month
organization

Use child themes for modifications Prevents losing changes when updating themes

Regularly backup directory

Essential for disaster recovery
structure

Common Directory Issues

1. Missing .htaccess: Can cause permalink issues
 2. Missing [Link]: Site won't connect to database
3. Wrong permissions: Can cause upload or access issues
4. Missing uploads folder: Media won't display
5. Missing plugins/themes: Site won't display correctly
2.5 SAVING IN APPROPRIATE DIRECTORY STRUCTURE
WordPress Root Directory
The WordPress root directory is where WordPress core files are installed. Most commonly, this is the
public_html or public folder.
Core Folders Detail:
wp-admin Folder
The wp-admin folder contains all files that manage the WordPress administration dashboard experience.
Purpose: Controls the entire experience of your WordPress admin dashboard.
Subfolders:
 css - Stylesheets for admin interface
 images - Images used in admin interface
 includes - Additional admin functions
 js - JavaScript files for admin
 maint - Maintenance mode files
 network - Multisite network admin
 user - User management files
Important Files:

File Purpose

[Link] Core file that manages the wp-admin dashboard

[Link] Loads pages in response to visitor requests

[Link] Installs WordPress

[Link] Controls all plugins (active or inactive)

[Link] Controls installed themes

[Link] Manages users and their permissions

wp-includes Folder
The wp-includes folder contains all core software for your WordPress site, including code libraries, packages,
and source code.
Referred to as:
 Packages
 Code libraries
 WordPress source code
Critical: The code in this folder is essential for site functionality and should not be modified directly.
WordPress Core Files

File Purpose

Shows your site in response to a visitor request; initializes and loads correct core
[Link]
files when a page is requested

.htaccess Manages permalinks and redirects (Apache servers)

wp- Stores database connection info, security keys, salts, database prefix, and contains
[Link] debugging feature

Understanding WordPress Database Tables

A database is a structured system used to store, organize, and retrieve data to run your website. WordPress uses a
MySQL database.
WordPress Database Components:
 MySQL: Stores site information in tables
 SQL (Structured Query Language): Commands to manipulate data
 PHP: Programming language that communicates between files and database
Core WordPress Tables:

Table Purpose

wp_options Site settings and options

wp_users User account information

wp_usermeta Additional user data

wp_posts All content types (posts, pages,

Table Purpose

custom post types)

wp_postmeta Additional post data (custom fields)

wp_terms Categories and tags

wp_term_relationships Relationships between posts and terms

wp_term_taxonomy Taxonomy information for terms

wp_comments Comments

wp_commentmeta Additional comment data

wp_links Blogroll links

Note: As the site grows and plugins are added, the database grows with more tables and more data.
Self-Check 2 - Answer Key
I. True or False
1. True - Once the download is complete, you can start uploading WordPress files to your hosting account.
2. True - Your WordPress file and directory structure is essential to getting your website working.
3. True - The primary purpose of WordPress plugins is to expand WordPress functionality.
4. True - Once installation is complete, the first thing to do is log in to the administrator dashboard.
5. True - To have a successful WordPress site, you must harden its security.
II. Matching
1. B - [Link] is responsible for showing your site in response to a visitor request.
2. D - [Link] is used to store database connection information.
3. E - .htaccess is another important configuration file used to manage site links.
4. A - wp-content folder contains plugin and theme files.
5. C - wp-uploads is where files visitors upload to the site are stored.
UNIT THREE: ADD CONTENT TO WEB PAGES
3.1 INSERTING AND FORMATTING TEXT CONTENT
Adding Text
Adding text is the process of inputting written content into your website's pages or posts using WordPress's
content editor.
Methods:
 Paste text from a Word file
 Type directly into WordPress
 Copy and paste from other sources
Content Editor:
 Visual Editor: WYSIWYG (What You See Is What You Get) interface - shows how text will appear
 Text Editor: Shows actual HTML code - allows advanced editing
Formatting Text
Text formatting is the process of applying styles to text to improve readability, emphasize key points, and create
visual hierarchy.
Common Formatting Options:

Formatting Purpose Use Case

Bold Makes text heavier and darker Emphasis, headings, UI elements

Italic Makes text slanted Definitions, emphasis, foreign words

Bulleted List Unordered list items Lists without sequence

Numbered List Ordered list items Steps, sequences

Center Alignment Centers text Titles, special content

Link Makes text clickable Navigation, references

Headings
Headings are HTML elements that structure content hierarchically, helping both users and search engines
understand the organization of your content.
Heading Hierarchy:

Tag Purpose

H1 Main page title - largest, most important

Tag Purpose

H2 Major section headings

H3 Sub-sections within H2 sections

H4 Sub-sections within H3 sections

H5 Further sub-divisions

H6 Smallest, least important

Best Practices:
 Use pre-defined heading styles from your theme
 Only one H1 heading per page
 Don't use headings just for styling (use CSS instead)
 Proper heading structure improves SEO and accessibility
Special Characters
Special characters are symbols and characters that aren't available on a standard computer keyboard, such as
accent marks, mathematical symbols, and currency symbols.
Examples:
 Copyright symbol: ©
 Trademark: ™
 Currency: €, £, ¥
 Accented letters: é, ñ, ü
Access Method: Special character menu in the editor
Distraction-Free Writing
Distraction-free writing mode removes unnecessary interface elements from the screen, allowing you to focus
solely on your content.
How to Access: Click the "Distraction-free writing mode" button in the editor toolbar
What It Removes:
 Sidebar elements
 Extra menus
 Visual clutter
Publish Options
Publishing options control how and when your content appears on your website.
Before Publishing:

Option Description

Save Draft Saves work without publishing; continues editing later

Preview Shows what content will look like when published

Publish Makes article live on website immediately

Move to Trash Deletes post or page

Advanced Options:

Option Description

Status Draft, Pending Review, Published

Visibility Public, Password Protected, Private

Publish immediately Schedule for specific date/time

After Publishing:
 "Save Draft" becomes "Update"
 "Preview" becomes "Preview Changes"
 "Publish" becomes "Update"
Consistent Text Formatting
Consistent text formatting means applying the same styling rules throughout your content to maintain readability
and professional appearance.
Elements of Consistency:

Element Description

Headings Consistent hierarchy and styling

Body Text Same font, size, color, spacing

Lists Same bullet/number style

Element Description

Links Same color and style

Spacing Consistent paragraph spacing

Benefits:
 Improves readability
 Creates professional appearance
 Helps users navigate content
 Enhances user experience
Text Highlighting Conventions

Style HTML Markdown Use Case

Bold <b> ** UI elements, notices

Key terms, emphasis, words as

Italic <i> _
words

Underline Do not use - Avoid

Strikethroug
Do not use - Avoid
h

Code <code> ` | Inline code, user input |

``` | Code examples, blocks of code

Code Block <pre>
|

Quotation Marks: Use American (US) English style

Capitalization: Use sentence-case (capitalize first word only) in headings and titles
Font: Don't override global styles for font type, size, or color
Spaces Between Sentences: Leave only one space between sentences
3.2 INSERTING IMAGES, DATA TABLES AND SIMPLE FORMS IN A WEB PAGE
Adding Images
Images are visual media inserted into web pages to enhance content, illustrate concepts, or improve visual appeal.
Insert from Computer
1. Place cursor where image should appear
2. Drag image from computer to editor
Insert from Media Library
1. Place cursor where image should appear
2. Click Add Media button
3. Locate the image and select it
4. Navigate among Images, Documents, Videos, and Audio files
Image Alignment
Image alignment determines how text flows around an image on the page.

Alignment Description

Left Image on left; text wraps around right side

Center Image centered; text appears above and below

Right Image on right; text wraps around left side

No alignment Image sits alone with no text wrapping

Side by Side Images:

 Put images next to each other
 Give both left or right alignment
 Ensure images are small enough to fit on one line
Editing Inserted Images
 Select image and click pencil icon
 Access settings for:
o Size
o Alignment
o Alt text
o Caption
o Link destination
Troubleshooting Image Uploads
Tips:
 Images should be saved in RGB mode
  Best results with sRGB color profile and .png format
 Animated gifs display only at 100% full size
Adding Data Tables
A data table is a structured format for displaying information in rows and columns, making data easier to
compare and understand.
Using Data Table Plugin (Supsystic)
Steps to Create Table:
1. Left navigation menu > "Add new table"
2. Enter table name, number of rows and columns
3. Click "OK"
4. Open "Editor" tab in table parameters
5. Add data to table
Adding Images to Table:
1. Select the cell
2. Click "Insert Media" button on Editor panel
3. Find image in Media library or upload file
Adding Links to Table:
1. Select the cell
2. Click "Create a link" button
3. Type URL and click "OK"
4. Type link text and click "OK"
Adding Video via Media Library:
1. Select the cell
2. Click "Insert Media" button
3. Find image/video in Media library or upload file
Adding Video via YouTube Share Link:
1. Open Editor tab in table settings
2. Select cell for video
3. Go to YouTube, find video
4. Press Share button, select Embed Video share link
5. Set video size, copy share link/short-code
6. Insert into cell
Customizing Table Code:
 If you know HTML and CSS, change parameters in tags
  Example: <img src="url" width="60"/>
 Set cell size with: <video controls width="220" height="140">
Remember: After changing data, always click "Save" button.
Creating a Simple Contact Form
A contact form is a web form that allows website visitors to send messages to the site owner without revealing
email addresses, providing spam protection and structured data collection.
Benefits of Contact Forms Over Email Addresses:

Benefit Description

Spam Protection Spam bots scrape websites for mailto: email addresses

Consistent Information People don't always send all needed information

Saves Time Helps organize and process inquiries efficiently

Step 1: Choose a Contact Form Plugin

Recommended: WPForms
 Most beginner-friendly
 Drag & drop builder
 WPForms Lite is 100% free
 Over 5 million sites use it
 Upgrade to Pro for more features
Step 2: Install Contact Form Plugin
1. Log into WordPress dashboard
2. Go to Plugins > Add New
3. Search for "WPForms"
4. Click "Install Now"
5. Click "Activate"
Step 3: Create a Contact Form
1. Navigate to WPForms > All Forms
2. Click "Add New"
3. Give form a name
4. Select contact form template (e.g., "Simple Contact Form")
5. Click "Use Template"
6. Click on any form field to edit
 7. Add new fields from left sidebar
8. Customize field options
9. Click "Save"
Step 4: Configure Form Notification and Confirmations
Form Confirmation:
 What visitor sees after submission
 Simple thank you message
 Or redirect to URL (select "Go to URL")
Form Notifications:
 By default, sent to admin email
 Can send to custom email addresses
 Multiple emails separated by commas
 "Email Subject Line" pre-filled with form name
 "From Name" auto-populated with user's name
Step 5: Add Contact Form to a Page
1. Go to Pages > Add New
2. Give page a name
3. Click "Plus" add block button
4. Search for "WPForms"
5. Click "WPForms" block
6. Select form from dropdown
7. Click "Publish" or "Update"
Step 6: Add Contact Form to Sidebar
1. Go to Appearance > Widgets
2. Click "Plus" add block icon in widget area
3. Search for "WPForms"
4. Click "WPForms" block
5. Select form from dropdown
6. Click "Update"
3.3 ACCESSING MARKUP LANGUAGE CODE AND MAKING BASIC MODIFICATIONS TO THE
CODE
Markup Language
Markup Language is a system for annotating a document in a way that is syntactically distinguishable from the
text. HTML (HyperText Markup Language) is the standard markup language for creating web pages.
How to Edit WordPress Code
Three Main Methods:

Method Purpose Best For

Block/Classic
Edit HTML for individual posts or pages Content-level changes
Editor

Child Theme Edit theme's source code safely Theme modifications

Plugin Manage code snippets added to <head> or [Link] Adding functionality

How to Edit HTML for Individual Posts/Pages

In Block Editor (Gutenberg)
Method 1: Custom HTML Block
1. Click plus (+) sign at top left corner
2. Add "Custom HTML" block
3. Enter custom HTML code
4. Click "Preview" to check
Method 2: Edit HTML of a Block
1. Select existing block
2. Click three-dot menu
3. Click "Edit as HTML"
4. Edit HTML of individual block
5. Add nofollow links, change styles, add code
Method 3: Code Editor for Entire Post
1. Click three-dot option in top right corner
2. Select "Code Editor" from dropdown
3. Edit entire post HTML
In Classic Editor
1. Edit blog post or add new one
2. Click "Text" tab
3. Edit HTML of content
4. Bold words, italic style, create lists, add table of contents, etc.
How to Edit Source Code in WordPress Theme
Important: Always make backup before editing theme code.
Method 1: In-Dashboard Code Editor
1. Go to Appearance > Theme Editor
2. Read warning message
3. Use sidebar to navigate between theme files
4. Use code editor to make edits
Method 2: SFTP (SSH File Transfer Protocol)
1. Connect to site via FTP
2. Navigate to theme folder (.../wp-content/themes/child-theme-name)
3. Find file to edit
4. Right-click and edit
5. Changes automatically re-upload
Benefits of SFTP:
 Use your preferred code editor
 If you break something, fix it right away
 Not locked out if dashboard inaccessible
How to Add Custom CSS to WordPress
Method 1: WordPress Customizer
1. Go to Appearance > Customize
2. Look for "Additional CSS" option
3. Add desired CSS code
4. Live preview updates automatically
Method 2: Simple CSS Plugin
1. Install and activate plugin
2. Similar option in Customizer
3. Also add custom CSS to individual posts/pages via meta box
Method 3: Custom CSS Stylesheet
1. Create custom CSS stylesheet
2. Use wp_enqueue_scripts to add to theme
 Best for hundreds/thousands of lines
Self-Check 3 - Answer Key
I. True or False
1. True - Consistent text formatting and type treatment is a principal factor in great documentation and
design.
 2. True - Clear, legible, and aesthetically pleasing typography is one of the primary features in visually
appealing content.
3. True - Every website needs a contact form so visitors can easily contact you about your products and
services.
4. True - The new block editor and classic editor allow you to edit HTML code for individual posts or pages.
II. Short Answer
Text-formatting conventions for highlighting text:

Convention HTML Markdown Use Case

Bold <b> ** UI elements, notices

Italic <i> _ Key terms, emphasis

Underline Do not use - Avoid

Strikethroug
Do not use - Avoid
h

Code <code> ` | Inline code, user input |

Code Block <pre> ``` | Code examples |

UNIT FOUR: CREATE SIMPLE NAVIGATION

4.1 CREATING SITEMAP AND PLAN NAVIGATION
Sitemap
A sitemap (or item map) is a file that contains information about the pages, posts, and files on your website as
well as their relationships. Search engines use sitemaps to follow links to new pages and discover content.
Why Do You Need a Sitemap?

Reason Description

Discovery Helps search engines find and index your content

Non-HTML Content Optimizes content crawlers would otherwise be unable to find

Broken Link Detection Crawlers pick up on issues right away

Reason Description

Crawl Efficiency Helps search engines understand your site structure

Temporary Remedies Provides fixes for broken links

How to Create a Sitemap in WordPress

Using All in One SEO Plugin
Step 1: Install and Activate
1. Go to Plugins > Add New
2. Search for "All in One SEO"
3. Click "Install Now"
4. Click "Activate"
Step 2: View Enabled Sitemap
 Sitemap is enabled by default
 Go to All in One SEO > Sitemaps
 Toggle "Enable Sitemap" to On
Step 3: Verify Your Site's Sitemap
 Click "Open Sitemap" button
 Or visit [Link]/[Link]
 See index page with all sitemaps
Configuring Sitemap Settings

Setting Description Recommendation

Enable Sitemap Indexes For sitemaps with over 1000 URLs Enable for large sites

Links Per Sitemap Number of links per sitemap file Leave as default

Post Types Which content types to include Include all

Taxonomies Which categories/tags to include Include all

Date Archives Automatically created archives Disable (less value)

Author Archives Author-specific archives Disable (less value)

Alternative: Yoast SEO Plugin (also generates sitemaps with ease)
4.2 CREATING LINKS BETWEEN PAGES USING BOTH TEXT AND IMAGES
Link Text (Anchor Text)
Link text (also called anchor text) is the visible, clickable text in a hyperlink. It is the word or phrase on a web
page that users click to jump to another page, either on the same site or an external site.
Creating Links - The Basics
Components of a Link:

Component Description

Starting Point (Hotspot) Text or image users click

Ending Point Page URL or bookmark within page

Link Appearance Usually different color (often blue and underlined)

Creating a Bookmark or Named Anchor

A bookmark (named anchor) is an endpoint within a page that allows linking to a specific section of the same
page.
Method 1: Using <a> tag (Classic Editor)
html
<a name="bottom">Bottom of Page</a>
Method 2: Using CSS ID Selector (More Common)
html
<h3 id="bottom">Bottom of Page</h3>
Creating Link to Bookmark:
 Prefix ID/anchor with #
 Example: href="#bottom"
Creating Links in WordPress
Using Text as Link:
1. Highlight text as starting point
2. Click link icon
3. Type or paste link URL
4. Search for internal pages
5. Click "Apply"
Creating Links Within a Page:
 1. Create named anchor or CSS ID selector
2. Prefix with # in link
3. Example: href="#section1"
Adding Download Links:
1. Upload files to media library
2. Create link to media file
Opening Links in a New Tab
 WordPress gives option to "open in a new tab"
 Best Practice: Avoid forcing new tabs
 Search engines request user control
 Users can right-click and select "open in new tab"
Creating Links with Images
Link to Internal Page/Post:
1. Open post/page in admin area
2. Find image on page
3. Highlight image by selecting it
4. Toolbar appears in top left
5. Click paper clip icon
6. Search for article by title or URL
7. Click the page/post
8. Link is created
9. Option to "OPEN IN A NEW TAB"
10. Click "Update" to save
Link to External Website:
1. Navigate to web page in different browser tab
2. Copy full URL
3. Return to WordPress editor
4. Follow steps 1-6 above
5. Paste URL into field
6. Click "Update" to save
Link to Media File:
1. Follow steps 1-5
2. Click MEDIA FILE
3. Link to original, larger version
 4. "Update" to save
Link to Attachment Page:
1. Follow steps 1-5
2. Click ATTACHMENT PAGE
3. Creates complete new page with site design, menu
4. Image sits in the middle
4.3 CREATING FRAME USING MARKUP LANGUAGE
Important Warning
HTML Frames Are Obsolete in HTML5
 W3C states frames "are not to be used by Web developers"
 Support is offered for historical purposes only
 Eventually support will be dropped by modern browsers
 Websites built with frames will become unusable
The Difference Between Frames and Iframes

Feature Frames Iframes

Role Layout-defining elements Content-adding elements

Split browser window into

Function Embed a frame inline with other elements
multiple frames

Each frame Has its own contents Single embedded document

HTML Element <frameset> and <frame> <iframe>

Problems with Frames

Problem Description

Usability Challenges Not well-suited for responsive websites; difficult on mobile devices

Screen readers have difficulty understanding; assistive technologies

Accessibility Challenges
struggle

Design Issues Presentation tasks should be handled with CSS

Problem Description

SEO Issues Search engines have difficulty indexing framed content

Creating Frames (For Reference Only)

Basic Concept:
 Use <frameset> element instead of <body>
 Use <frame> element to create frames
 Use src attribute to identify resources
 Create different files for each frame
Creating Vertical Columns
html
<!DOCTYPE html>
<html>
<frameset cols="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
 * means automatic sizing to fill available space
Creating Horizontal Rows
html
<frameset rows="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
Mixing Columns and Rows
html
<frameset cols="*,*,*">
<frameset rows="*,*">
 <frame src="frame_1.html">
<frame src="frame_2.html">
</frameset>
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
Styling Frames
Two Types of Styling:

Type Description Where Defined

Within each frame Content styling Source document

Frameset styling Frame presentation Parent document containing frameset

Attributes:

Attribute Purpose

cols/rows Column/row sizes (pixels or percentages)

noresize Prevent resizing

frameborder="0" Remove borders

marginheight Add margin around content

name Target for links

Targeting Frames with Links

Process:
1. Assign name attribute to targeted frame
2. Use target attribute in anchor element
3. Link opens in targeted frame
Example:
html
<frame src="frame_3.html" name="mid_col" frameborder="0">
<a href="frame_1.html" target="mid_col">Load frame_1.html</a>
Special Targets:

Target Purpose

_blank Open in new window/tab

_top Reload entire page

Making Frames Responsive

Interim solutions:
 Use rows rather than columns
 Avoid frames on small screens
Recommendation: Since frames are obsolete, plan a redesign without frames.
4.4 CREATING FORM USING MARKUP LANGUAGE
HTML Form
A form in HTML is an element that collects input data from users through interactive controls. Forms are
generally used when you want to collect data from the user.
Form Elements
Basic Syntax:
html
<form>
<!--form elements-->
</form>
Common Form Elements:

Element Purpose

<label> Defines label for form elements

<input> Gets input data (text, password, email, etc.)

<button> Defines clickable button

<select> Creates drop-down list

<textarea> Gets long text content

Element Purpose

<fieldset> Groups related data with a box

<legend> Defines caption for fieldset

<datalist> Pre-defined list options for input controls

<output> Displays output of calculations

<option> Defines options in drop-down list

<optgroup> Group-related options in drop-down list

Form Input Types

Input Type HTML Description

Text <input type="text"> Single-line text input

Password <input type="password"> Masked password input

Radio Button <input type="radio"> Choose one option from group

Checkbox <input type="checkbox"> Choose multiple options

Submit Button <button type="submit"> Submit form data

TextArea <textarea> Multi-line text input

Email <input type="email"> Email address input

Date <input type="date"> Date picker

Radio Button Requirements:

 Must share same name to be treated as a group
 value attribute identifies selected option
 Only one radio button in a group can be selected
Checkbox Requirements:
  Square box to tick
 Choose multiple options at once
 name and value attributes used to send data to server
Combobox (Drop-Down) Syntax:
html
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
TextArea Attributes:
 rows: Number of visible rows
 cols: Width in characters
 Contains unlimited characters
 Fixed-width font
Example: Student Registration Form
Fields to Include:
 Salutation (select)
 First Name (text)
 Last Name (text)
 Email (email)
 Phone (text)
 Gender (radio)
 Date of Birth (date)
 Address (textarea)
Sample Form Code:
html
<form>
<fieldset>
<legend>Personal Information</legend>
<p>
<label>Salutation:
<select name="salutation">
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
 <option value="dr">Dr.</option>
</select>
</label>
</p>
<p>
<label>First Name: <input type="text" name="firstname"></label>
</p>
<p>
<label>Last Name: <input type="text" name="lastname"></label>
</p>
<p>
<label>Email: <input type="email" name="email"></label>
</p>
<p>
<label>Phone: <input type="text" name="phone"></label>
</p>
<p>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</p>
<p>
<label>Date of Birth: <input type="date" name="dob"></label>
</p>
<p>
<label>Address:</label>
<textarea name="address" rows="4" cols="50"></textarea>
</p>
<p>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>
Self-Check 4 - Answer Key
I. True or False
1. True - A sitemap or item map is a file that has information about pages, posts, and files on your website as
well as their relationships.
2. True - The WordPress post and page editor makes it easy to add hyperlinks to other web pages from your
content.
3. True - A frame embeds a frame directly inline with the other elements of a webpage.
4. True - HTML stands for HyperText Markup Language.
5. True - The best part of the All in One SEO plugin is that the sitemap is enabled by default.
II. Short Answers
1. Differentiate between iframe and frame:

Feature Frame Iframe

Role Layout-defining elements Content-adding elements

Splits browser window into multiple

Function Embeds a frame inline with other elements
sections

HTML Element <frameset> and <frame> <iframe>

Usage Obsolete in HTML5 Still supported

2. Differentiate between form and frame:

Feature Form Frame

Purpose Collects input data from users Divides browser window into sections

Elements Text fields, buttons, checkboxes Separate HTML documents

Interaction User input and submission Display and navigation

Current Status Actively used Obsolete in HTML5

UNIT FIVE: TEST WEBSITE

5.1 TESTING WEB PAGE CONTENT FOR CONSISTENCY
Understanding Functional Testing
Functional testing is a type of software testing that validates the software system against functional
requirements/specifications. It checks if the software is fulfilling the functions it was designed for.
Key Concept: This is "black box testing" - testers do not need to understand the internal code structure and do
not need coding expertise.
Process:
1. Submit an input
2. Observe the output
3. Compare with specific requirements
Testable Functions
1. Usability Testing
Usability testing evaluates how easy it is for users to accomplish tasks, navigate, and interact with your website.
What to Test:
 Navigation from page to page
 Menu behavior
 Formatting consistency
 Performance and page load speeds
Common Barriers to Usability:
 Inconsistent formatting
 Unintuitive menu behavior
 Poor performance
 Bad page load speeds
2. Accessibility Testing
Accessibility testing verifies that people with disabilities can perceive, understand, navigate, and interact with
your website.
What to Test:
 If accessibility goals have been met
 Unforeseen issues with page presentation
 Compatibility with assistive technologies
3. Error Condition Testing
Error condition testing verifies that the website handles errors gracefully and provides appropriate feedback to
users.
Examples:
 Entering incorrect URL → 404 error page
 Form validation errors
  Server errors
How to Handle Functional Testing

Step Action Description

1 Identify functions Know what functions are being tested

2 Determine input data Identify input data needed to check if functions work

3 Calculate anticipated outcome Based on input values, calculate expected results

4 Execute testing Use manual methods or automated tools

5 Compare results Compare actual results with expected results

Example: Testing Login Function

 Input: Login details and interactions
 Expected Outcome: Smooth login and progress to target page
 If actual matches expected → all is well
 If something goes wrong → use comparison for troubleshooting
5.2 TESTING ELEMENTS OF WEBSITE CONTENT ACROSS DIFFERENT BROWSERS AND
BROWSER VERSIONS
Cross Browser Testing
Cross Browser Testing is the process of testing your website across multiple different browsers, screen sizes,
operating systems, and mobile devices to make sure your site works correctly for all visitors.
Why Test Across Browsers?

Reason Description

Different Code All browsers use different rendering engines

Different Display Website may look different across browsers

Missed Visitors If site doesn't work on their browser, you lose visitors

Undetected Issues Issues may go unnoticed for months

Browser Market Share

 Chrome: 69% desktop, 64% mobile
  Firefox, Safari, Edge, Opera used by millions of users worldwide
How to Find Which Browsers and Devices Visitors Use
Using Google Analytics:
1. Set up Google Analytics (use MonsterInsights for easier setup)
2. View Reports > Insights
3. Check "Device Breakdown" section for devices
4. Check Audience > Technology > Browser & OS for browsers
5. Check Mobile > Devices for specific devices
Benefit: Focus on top combinations, avoid testing the rest
Cross Browser Testing Tools
1. CrossBrowserTesting
A comprehensive cross-browser testing tool with live testing and screenshot features.
Features:
 Live testing and screenshots
 Select operating system and browser
 Automatically fetches screenshots on Mac, Windows, Android, iOS
 Compare layout differences
 Free trial: 100 minutes
Pricing: From $29/month (billed annually)
2. BrowserStack
A cross-browser and cross-platform testing tool for mobile apps and websites.
Features:
 Live testing and screenshots
 Virtual emulator with actual browser window
 Free trial: 30 minutes interactive, 100 minutes automated, 5000 screenshots
Pricing: From $29/month (billed annually)
3. LambdaTest
A premium cross-browser testing tool for both live and screenshot testing.
Features:
 Live, responsive, and screenshot testing
 Complete control over devices and browsers
 Free lifetime plan: 60 minutes browser testing, 10 responsive tests/screenshots/month
Pricing: From $15/month (billed annually); $99/month for mobile browser testing
4. WordPress Theme Customizer
A built-in WordPress tool for previewing and customizing your website.
Features:
 Preview changes in different screen sizes
 Responsive view: desktop, tablet, mobile
 Limitation: Can't test in different browsers automatically
How to Analyze Cross Browser Test Screenshots

Difference Action

Minor Differences Ignore if not affecting user experience, aesthetics, or functionality

Major Differences Fix if they affect user experience, look unpleasant, or prevent usage

Common Issues: CSS issues with your theme

How to Fix:
1. Use Inspect Element feature
2. Find CSS rules that need updating
3. Add custom CSS to fix issues
4. Hire WordPress developer if unable to fix yourself
5.3 CONFIRMING WEB PAGE MEETS CLIENT REQUIREMENT AND WEB CONTENT
ACCESSIBILITY GUIDELINES
The Importance of Web Accessibility
 More than 1 billion people globally have some sort of disability
 Many find it difficult to use the internet, computers, or smartphones
 Businesses miss out on a large portion of their target audience
 Accessibility is a legal requirement in many countries
WCAG
Web Content Accessibility Guidelines (WCAG)
 Internationally recognized standard for web accessibility
 Created by World Wide Web Consortium (W3C)
 Explains how developers can make web content more accessible for people with disabilities
Covers:
 Physical disabilities
 Visual disabilities
 Speech disabilities
  Auditory disabilities
 Language disabilities
 Learning disabilities
 Cognitive disabilities
 Neurological disabilities
Also helps: Elderly adults whose abilities are changing with age
Who is WCAG Intended For?
Group 1: Developing Group

Role Responsibility

Web content developers Page authors, site designers

Tool developers Responsible for web authors

Accessibility evaluation tool developers Responsible for web accessibility evaluation

Testers Check standards for web and mobile accessibility

Group 2: Business Decision-Makers

Role Responsibility

Policymakers Knowledge of legal aspects

Managers Aware of customer and company expectations

Researchers Study customer behavior and impact on business

The Four Principles of Accessibility (P.O.U.R.)

1. Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Key Points:
 Content should be easy to process for those who cannot see or hear
 Should be easy to convert to audio files for visually impaired
 Should be easy to convert to text files for deaf and hard of hearing
Implementation:
 Provide text alternatives for non-text content
  Provide captions and alternatives for media
 Create content that can be presented in different ways
 Make it easier for users to see and hear content
Example: Netflix subtitles include explanation of background sounds
2. Operable
User interface components and navigation must be operable.
Key Points:
 Content should be easily operable on different devices
 Must be accessible to keyboard-only users
 Must work on touch screen devices
Implementation:
 Make all functionality keyboard accessible
 Give users enough time to read and use content
 Do not design content that causes seizures
 Help users navigate and find content
3. Understandable
Information and operation of user interface must be understandable.
Key Points:
 Don't expect target audience to have same level of IQ
 Things easy for some may not be easy for others
 Important for call to action, flow, and interactions
 Flow should be intuitive and easy to understand
Implementation:
 Make text readable and understandable
 Make content appear and operate in predictable ways
 Help users avoid and correct mistakes
Warning: Don't confuse creativity with confusion
4. Robust
Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive
technologies.
Key Points:
 Every user has their own set of technology and devices
 Won't adjust for one query or one business
 We must adjust for them
Implementation:
 Maximize compatibility with current and future user tools
 Make website accessible on all browsers and platforms
Testing Accessibility
Manual Testing:
 Keyboard navigation testing
 Screen reader testing
 Contrast ratio checks
 Form field labels
Automated Testing Tools:

Tool Description

WAVE Web Accessibility Evaluation Tool

Axe Accessibility Checker

Google Lighthouse Performance and accessibility

Siteimprove Accessibility Checker

Best Practices:
 Test with actual users with disabilities
 Include accessibility testing in development cycle
 Keep WCAG guidelines in mind during design
 Regular accessibility audits
Self-Check 5 - Answer Key
I. Matching
1. A - Perceivable: The first and most basic principle of accessibility is the ability to process the information
of the website easily.
2. B - Operable: People with different disabilities use different devices to access the content on the internet.
3. C - Understandable: It is not advised to expect your target audience to have the same level of IQ.
4. D - Robust: Every user has their own set of technology, devices, and way of using the internet.
II. Short Answer
How to handle functional testing:
Step Description

1 Identify functions - Know what functions are being tested

2 Determine input data - Identify input data needed to check if functions work

3 Calculate anticipated outcome - Based on input values, calculate expected results

4 Execute testing - Use manual methods or automated tools

5 Compare results - Compare actual results with expected results

Example: Testing login function

 Input: Login details and interactions
 Expected outcome: Smooth login and progress to target page
 If actual matches expected → all is well
 If something goes wrong → use comparison for troubleshooting
SUMMARY: KEY TAKEAWAYS
Unit 1: Identify Authoring Requirements
 Understand client needs through focus groups, social listening, and keyword research
 Select authoring tools based on 10 key feature categories
 Install WordPress via hosting pre-installation, cPanel autoinstallers, manual FTP, or localhost
 Set preferences for Site Editor and Post/Page Editor
Unit 2: Create and Save Files
 WordPress file structure: wp-admin, wp-content, wp-includes
 Configuration files: .htaccess, [Link], [Link]
 Access files via FTP, File Manager, or cPanel
 Maintain directory structure for security and functionality
 Understand database tables: wp_posts, wp_users, wp_comments, etc.
Unit 3: Add Content to Web Pages
 Insert and format text using Visual or Text Editor
 Add images from computer or media library
 Create data tables with images, links, and video
 Build contact forms using WPForms plugin
 Edit HTML using block editor, classic editor, or theme editor
  Add custom CSS via Customizer or plugin
Unit 4: Create Simple Navigation
 Create sitemaps using All in One SEO or Yoast SEO
 Create links with text and images (internal, external, media file, attachment page)
 Understand frames (obsolete) and iframes
 Create forms with text, password, radio buttons, checkboxes, comboboxes, textarea, submit buttons
Unit 5: Test Website
 Perform functional testing for usability, accessibility, and error conditions
 Conduct cross-browser testing using tools: CrossBrowserTesting, BrowserStack, LambdaTest
 Use WordPress Theme Customizer for responsive testing
 Follow WCAG principles: Perceivable, Operable, Understandable, Robust
 Ensure accessibility for users with disabilities