BUILD SIMPLE WEBSITES USING COMMERCIAL PROGRAMS

UNIT ONE: IDENTIFY AUTHORING REQUIREMENTS

1.1 IDENTIFYING CLIENTS AND THEIR REQUIREMENTS
The Importance of Identifying Customer Needs
Identifying customer needs is mission-critical for businesses looking to create products that truly speak to their
customers' problems. Understanding customer needs helps businesses:
 Position their brand smartly in the market
 Unite internal teams behind specific customer needs
 Create products that solve real problems
 Grow business by better understanding the audience
Four Key Elements of a Customer-First Strategy
1. Identify what the customers want - Research and understand customer desires and pain points
2. Distribute feedback throughout your organization - Share customer insights across all departments
3. Create product/service features based on customer feedback - Develop solutions that address identified needs
4. Collect further customer feedback on changes - Continuously improve based on ongoing feedback
How to Identify Customer Needs
1. Conduct Focus Groups
A focus group is a research technique where you interview a group of people who represent your target audience.
The goal is to foster open dialogue with potential customers to understand how they may feel about your brand
and products.
Benefits:
 Direct interaction with target audience
 Open dialogue reveals insights surveys may miss
 Opportunity to observe reactions and body language
2. Use Social Listening
Identify which social platforms your customers are most active on and study what they talk about.
Key aspects to monitor:
 What do they enjoy?
 What are their pain points?
 What questions do they ask?
 Trends and opportunities in conversations
3. Do Keyword Research
Keyword research 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
1.2 SELECTING THE BEST AUTHORING TOOLS
What is an 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. Authoring
tools generally offer:
 Pre-programmed interfaces
 Ready-to-use templates
 Media and interaction tools
 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:
 Images: Add/import, edit images
 Audio: Import/export, edit, record narration, include in interactions
 Video: Webcam/screen recording, import/export, insert to interactions, link to external sources, edit videos
 Animations: Animate on-screen images/text, import Flash/HTML5 animations, insert text animations
 Formatting: Text & style editing, object alignment, background themes, master slides, navigation player skin
options, page transitions, responsive design, PowerPoint import
2. Interactivity
Interactivity increases learner engagement and retention by enabling active information acquisition through
discovery, problem-solving, or scenario work.
Features include:
 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 consistent look and feel.
Features:
 Custom theme for entire course
 Background themes
 Built-in template shells
 Custom template creation
 Navigation player skin options
 External theme/template import
4. Content Management
Organizes 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
Enables quick and easy sharing of e-learning content with others.
Features:
 Review system with feedback
 Co-authoring
 Shared resources
 Share options (email, link, social media, upload)
 User roles
 Author control
 Versioning
6. Assessment
Determines learner retention, tracks achievement and progress, and evaluates 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
Respects different audio-visual sensory needs by changing or adding on-screen elements, interactions, and
formatting.
Features:
 Section 508 accessibility guidelines compliance
 WCAG 2.0 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
Ensures 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
9. Administration
Enables setting up the tool for specific work needs and better utilization of features.
Features:
 Language settings
 Flexible workspace setup
 Preview and view preferences
 Autorecovery
 Roles and permissions
 Single sign-on (security)
10. Support & Training
Provides help through various channels.
Types:
 Online community forum
 Live chat support
 Email or phone support
 Tutorials and how-to guides
 Video guides
 Consultancy services
 Webinars
 Demos
 Updates & Upgrades
How to Choose an Authoring Tool
To make the right decision, understand the needs and requirements of your specific training project. Ask
questions about your project:
 What expertise level will be working with the software? (Novice vs. Expert)
 What type of training content will be created?
 What budget is available?
 What platforms need to be supported?
 What are the organization's specific requirements?
1.3 INSTALLING SELECTED WEB AUTHORING TOOL
Installing WordPress - Overview
WordPress is a popular content management system and web authoring tool. There are several methods to install
it.
Method #1: Choose a Host with WordPress Pre-installed
Recommended hosts:
 Bluehost: Starts from $2.75/month for one site
 SiteGround: Starts from $2.99/month for one site
 Managed WordPress Hosts: Higher price but includes pre-installation
Advantages:
 No technical installation required
 Immediate access to WordPress dashboard
 Host handles server configuration
Method #2: Install WordPress via cPanel and Autoinstallers
Steps:
1. Log into cPanel (hosting management dashboard)
2. Find the WordPress auto installer (Softaculous, Fantastico, QuickInstall, MOJO Marketplace)
3. Click the WordPress link
4. Click "Install Now"
5. Enter installation details:
o Protocol (HTTPS if SSL certificate installed, otherwise HTTP)
o Domain name
o Directory (leave blank for main domain)
o Site Settings (site name and description)
o Admin account credentials
6. Click Install
7. Access site at [Link]/wp-admin
Example Interface Screenshots (from document):
 cPanel WordPress auto installer
 Domain directory settings
 Site settings configuration
 Admin account creation
Method #3: Install WordPress Manually via FTP
Summary of Manual Installation Process:
1. Download WordPress: Get latest version from [Link]
2. Upload files: Unzip and upload to public_html (or similar) directory using FTP
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
5. Run WordPress 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
FTP Programs: FileZilla (recommended free option)
Method #4: Install WordPress on Your Own Computer (Localhost)
Available Tools:
 WAMP (Windows)
 XAMPP (Windows)
 MAC local installation tools
 "Local" tool for local installation
Benefits:
 Sandbox environment for learning
 No hosting costs
 Practice and experimentation without affecting live site
1.4 SETTING PREFERENCE FOR WEB AUTHORING TOOL
Understanding the Different Editors in WordPress
WordPress has specific editors for different purposes, each with block preferences that change the interface
behavior.
Site Editor
 Used for the structure of the site
 Modify homepage appearance
 Edit templates and template parts
 Manage format of pages and posts
 Varies based on theme selection
Page/Post Editor
 Modify content of WordPress site
 Pages: Static content
 Posts: Frequently updated content (can have multiple authors)
Site Editor Preferences
General Options:
 Spotlight Mode: Focuses interface to show only the block being viewed; everything else faded out
 Show button text labels: Removes icons from menu toolbar and replaces with text
Blocks Options:
 Blocks show the block interactions (keeping text cursor in block)
 Helps screen readers by keeping caret in blocks
 Post/Page Editor Preferences
General Preferences
Publishing:
 Pre-publish checklist: Enables checklist before publishing (default on)
Appearance:
 Reduce the interface: Reduces options in top toolbar; options reappear on mouse hover
 Spotlight mode: Highlights current block, fades other content
 Display the button labels: Shows toolbar buttons as text
 Use theme styles: Makes editor look like your theme
 Display block breadcrumbs: Shows breadcrumbs at bottom of editor
Blocks Preferences
Block interactions:
 Show most used blocks: Prioritizes frequently used blocks in library
 Contain text cursor inside block: Keeps text cursor from leaving block (helps screen readers)
Visible Blocks:
 Allows disabling blocks from appearing in block inserter
 Blocks can be re-enabled if needed
 All blocks enabled by default
Panels Preferences
Document settings:
 Permalink
 Template
 Categories
 Tags
 Featured image
 Excerpt
 Discussion
Additional settings:
 Custom Fields visibility at bottom of post
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
WordPress File and Directory Structure
Understanding WordPress file and directory structure helps solve common problems and maintain your site
effectively.
Accessing WordPress Files and Directories
Methods:
1. FTP Client (e.g., FileZilla)
2. File Manager (built into most hosting control panels)
WordPress Root Directory Structure
When you access your WordPress site files, you will see the following structure:
Core WordPress Files and Folders:
Folders:
 wp-admin [dir] - Manages admin dashboard
 wp-content [dir] - Stores uploads, plugins, themes
 wp-includes [dir] - Contains core software
Core Files (partial list):
 [Link] - Loads and initializes WordPress files
 [Link] - License information
 [Link] - Readme documentation
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
Note: .htaccess and [Link] files are created after WordPress installation and are not in the initial
download.
WordPress Configuration Files
.htaccess
 Server configuration file
 Manages permalinks and redirects
 Apache web server specific
 Hidden file (enable "show hidden files" to view)
[Link]
 Tells WordPress how to connect to database
 Stores database connection information
 Contains security keys and salts
 Sets global settings for WordPress site
[Link]
 Loads and initializes all WordPress files
 Executed when a page is requested by a user
Important: When editing .htaccess or [Link]:
 Be extra careful - mistakes can make site inaccessible
 Always create backup copies before making changes
The wp-content Folder
The wp-content folder stores all uploads, plugins, and themes.
Contents:
 [dir] themes - Theme files
 [dir] plugins - Plugin files
 [dir] uploads - Image and media uploads (organized by year/month)
 [Link] - Blank file with "Silence is golden" comment
Other possible folders:
 languages - Language files for non-English WordPress sites
 upgrade - Temporary folder created during upgrades
Important: When creating backups, always include the uploads folder as it's difficult to restore without backup.
Why Directory Structure Matters
 Essential for website functioning
 Proper organization prevents security issues
 Knowledge helps in troubleshooting common problems
 Understanding structure aids in backup and migration tasks
2.2 NAVIGATING WEB AUTHORING TOOL ENVIRONMENT OR WORKPLACE
WordPress Dashboard Navigation
If not interested in hosting or managing a web server, [Link] provides:
 Built-in hosting
 Pre-configured environment
 Simplified interface
Key Navigation Areas:
Installing WordPress
 Via hosting control panel
 Manual installation with FTP
 One-click installation options
Navigating in WordPress Dashboard
 Admin sidebar menu
 Toolbar at top
 Screen options
 Help tabs
Publishing Content
 Posts vs. Pages
 Categories and Tags
 Publishing options (Draft, Pending, Published)
Installing WordPress Plugins
 Plugins > Add New
 Search, Upload, or Browse
 Activate/Deactivate
Installing WordPress Themes
 Appearance > Themes
 Add New
 Search, Upload, or Browse
Optimizing WordPress Performance
 Caching plugins
 Image optimization
 Database optimization
Keeping WordPress Secure
 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
 Standard/Normal/Design View: Default view; similar to word processor screen
 Code View: View and work directly with HTML code
 Split View: Both views displayed simultaneously
 Switch via main menu (View menu) or tabs/buttons
Feature #2: Creating Headings and SubHeadings
 Similar to word processing software
 Toolbars/panels with buttons for:
o Headings and subheadings
o Links
o Ordered/Unordered lists
o Text formatting
Feature #3: Inserting Links
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 link
Tips:
 Use button/icon for quick link insertion
 Create bookmarks for internal page links
 Use anchor text for SEO
Feature #4: Inserting Images
Process:
1. Select Insert from menu
2. Choose Image or Picture
3. Dialog box prompts for:
o Image location
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.
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 programs to perform, your site requires the
right structure to work as intended.
WordPress by the Numbers
 Most popular CMS in the world
 Powers 34% of all websites on the web
 61% share among CMS solutions
Key Concepts for Maintaining Structure
1. Keep core files in their intended locations
2. Organize themes and plugins in wp-content
3. Maintain uploads folder organization
4. Use child themes for modifications
5. Regularly backup directory structure
2.5 SAVING IN APPROPRIATE DIRECTORY STRUCTURE
Understanding WordPress File and Directory Structure
The WordPress file and folder structure is the engine of your site. Files contain code that powers your site.
WordPress Root Directory (public_html or public folder)
Contains the following files and folders:
Core Folders:
 wp-admin
 wp-content
 wp-includes
Core Files:
 .htaccess
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
wp-admin Folder
Purpose: Manages entire experience of WordPress admin dashboard
Subfolders:
 css
 images
 includes
 js
 maint
 network
 user
Important Files:
 [Link] - Core file managing admin dashboard
 [Link] - Loads pages in response to visitor requests
 [Link] - Installs WordPress
 [Link] - Controls all plugins (active/inactive)
 [Link] - Controls installed themes
 [Link] - Manages users and permissions
wp-includes Folder
Purpose: Contains all core software for WordPress site
Referred to as:
 Packages
 Code libraries
 WordPress source code
Critical: The code in this folder is critical for site functionality.
WordPress Core Files (in Root)
[Link]
 Responsible for showing your site in response to visitor request
 Initializes and loads correct core files when a page is requested
Configuration Files
[Link]
 Stores database connection info
 Security keys and salts
 Database prefix
 Contains debugging feature
 Security Warning: Database credentials stored in cleartext; often targeted by hackers
.htaccess
 Manages site links
 Permalink structure
 URL redirects
 IP address blocking
 Password protection
 Note: Apache-specific; nginx servers don't use .htaccess
wp-content Folder
Purpose: Stores plugin and theme files
Key Components:
Themes
 Each theme has its own folder
 Every theme has a [Link] file
 Contains code for execution, analytics, and trackers
 Important: Backup [Link] before theme changes
Plugins
 Each plugin in its own folder
 Enormous variety, rarely conforms to a template
wp-uploads
 Files visitors upload to the site
 Correlates to media library
 Files stored in yearly/monthly folders for retrieval
Understanding WordPress Database Tables
A database stores, organizes, and retrieves data to run your website.
WordPress uses:
 MySQL database to store site information in tables
 SQL commands to manipulate data
 PHP to communicate between files and database
Core WordPress Tables:
 wp_options
 wp_users
 wp_usermeta
 wp_posts
 wp_postmeta
 wp_terms
 wp_term_relationships
 wp_term_taxonomy
 wp_comments
 wp_commentmeta
 wp_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
WordPress makes it easy to add and edit content:
 Paste text from Word files
 Type directly into WordPress
 Use built-in formatting tools (no coding needed)
The Content Editor:
 Visual Editor - WYSIWYG interface
 Text Editor - View, add, and edit HTML or Shortcodes
Formatting Text
Similar to formatting in Microsoft Word:
1. Highlight text to style
2. Click formatting button:
o Bold
o Italic
o Bulleted list
o Numbered list
o Center alignment
o Link
Headings
Best Practices:
 Use pre-defined heading styles (don't just bold text)
 Better for SEO and accessibility
 HTML tags indicate heading structure
Heading Sizes (H1 to H6):
 H1: Largest - usually page title/main heading
 H2-H6: Subheadings in descending importance
Note: Usually only one H1 heading per page.
Special Characters
 Use for words from other languages
 Symbols (e.g., copyright sign ©)
 Accessed through special character menu
Distraction-Free Writing
 Click "Distraction-free writing mode" button
 Removes unnecessary elements from screen
 Helps focus on writing
Editing Tips
Single Spacing
 Carriage return (Enter key) creates paragraph spacing
 For address format with multiple rows without spacing, use Shift+Enter
Advanced Editor
 Install TinyMCE Advanced plugin
 Customize admin panel with expanded tools
 Access under Plugins > Add New
Indent Tool
 Great for formatting
 Separates sections of content with ease
Nested Bullet Lists
 Create outlines with 1, 2, 3.1, 3.2, 3.3, etc.
 Use Tab key to indent sub-levels
Publish Options
Save Draft
 Saves work without publishing
 Continue editing later
Preview
 View how content will look
 Not a saving option
Publish
 Makes article live on website
 Changes status from draft to published
Move to Trash
 Delete post or page
Advanced Options:
 Status: Draft, Pending Review, Published
 Visibility: Public, Password Protected, Private
 Publish immediately: Schedule for specific date/time
After Publishing:
 No "Save Draft" option
 "Preview" changes to "Preview Changes"
 "Publish" changes to "Update"
Consistent Text Formatting
Importance:
 Principal factor in great documentation and design
 Intuitive use of formatting improves readability
 Enables simplicity for the reader
Text Highlighting Conventions
Bold (<b> in HTML, ** in Markdown)
 Use for UI elements
 Use at beginning of notices
Italic (<i> in HTML, _ in Markdown)
 Drawing attention to specific words/phrases
 Defining or introducing key terms
 Using words as words
Underline
 Do not use
Strikethrough
 Do not use
Code Text (<code> in HTML, ` in Markdown)
 Apply monospace font to code in text
 Inline code
 User input
Code Blocks (<pre> in HTML, ``` in Markdown)
 Code examples
 Blocks of code
Quotation Marks
 Use American (US) English style
Capitalization
 Use standard American (US) English rules
 Use sentence-case capitalization in headings, titles, and other content
Font
 Don't override global styles for font type, size, or color
Using Type
 Clear, legible, aesthetically pleasing typography
 One of the primary features in visually appealing content
Spaces Between Sentences
 Leave only one space between sentences
3.2 INSERTING IMAGES, DATA TABLES AND SIMPLE FORMS IN A WEB PAGE
Adding Images to Posts or Pages
Insert an Image from Your Computer
1. Place cursor where image should appear
2. Drag image from computer to editor
Insert an Image 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
 Click inserted image to select
 Choose alignment:
o Left (text wraps around)
o Center
o Right (text wraps around)
o No alignment (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 flow and appearance
Troubleshooting
 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
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:
 Select the cell
 Click "Insert Media" button on Editor panel
 Find image in Media library or upload file
Adding Links to Table:
 Select the cell
 Click "Create a link" button
 Type URL and click "OK"
 Type link text and click "OK"
Adding Video via Media Library:
 Select the cell
 Click "Insert Media" button
 Find image/video in Media library or upload file
Adding Video via YouTube Share Link:
 Open Editor tab in table settings
 Select cell for video
 Go to YouTube, find video
 Press Share button, select Embed Video share link
 Set video size, copy share link/short-code
 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, click "Save" button.
Creating a Simple Contact Form
Why Use Contact Forms Instead of Email Address?
1. Spam Protection - Spam bots scrape websites for mailto: email addresses
2. Consistent Information - People don't always send all needed information
3. Saves Time - Helps save time in many ways
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
How to Edit WordPress Code
Three main methods:
1. Block/Classic Editor - Edit HTML for individual posts or pages
2. Child Theme - Edit WordPress theme's source code safely
3. Plugin - Manage code snippets added to <head> or [Link]
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: 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
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
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
1. Text-formatting conventions for highlighting text:
o Bold - For UI elements and at beginning of notices
o Italic - For specific words/phrases, defining key terms, using words as words
o Underline - Do not use
o Strikethrough - Do not use
o Code Text - For code in text, inline code, and user input
o Code Blocks - For code examples or blocks of code
UNIT FOUR: CREATE SIMPLE NAVIGATION
4.1 CREATING SITEMAP AND PLAN NAVIGATION
What is a Sitemap?
A sitemap (or item map) is a file that has information about:
 Pages, posts, and files on your website
 Their relationships
 Used by search engines to crawl and index your site
Why Do You Need a Sitemap?
1. Helps search engines discover content
o Follow links to new pages
o Find and follow links to other pages
2. Optimizes non-HTML content
o Content crawlers would otherwise be unable to find
3. Broken link detection
o Crawlers pick up on issues right away
o Provides temporary remedy for issues
How to Create a Sitemap in WordPress
Using All in One SEO Plugin
Step 1: Install and Activate All in One SEO
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
Enable Sitemap Indexes
 Recommended for sitemaps with over 1000 URLs
 Can disable for smaller sites
Links Per Sitemap
 Leave as default unless you have specific needs
Content to Include
 Choose post types and taxonomies
 Select individual boxes for specific content
Date Archives and Author Archives
 Automatically created when publishing posts
 Recommended to disable (less value in search results)
Alternative: Yoast SEO Plugin
Both All in One SEO and Yoast SEO generate sitemaps with ease while providing additional SEO functionality.
4.2 CREATING LINKS BETWEEN PAGES USING BOTH TEXT AND IMAGES
What is Link Text?
Link text (hyperlink text or anchor text) is a word or phrase on a web page that users click to:
 Jump to another page on the same site
 Jump to a page on an external site
 Navigate to another location on the same page
Creating Links - The Basics
A link needs:
 Starting point (hotspot) - Text or image
 Ending point - Page URL or bookmark within page
Link Appearance:
 Usually different color than surrounding text
 Often blue and underlined in web browsers
Creating a Bookmark or Named Anchor
 Why: To link within 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 opening links in new tabs
o Search engines request user control
o Forcing new tabs can lead to penalties
o 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 single page containing the image
4. Complete new page with site design, menu
4.3 CREATING FRAME USING MARKUP LANGUAGE
HTML Frames Are Obsolete in HTML5
Warning: Frames are no longer supported in HTML5. They are maintained for historical purposes only.
The Difference Between Frames and Iframes
Frames:
 Split visual real estate of browser window into multiple frames
 Layout-defining elements
 Each frame has its own contents
 Iframes:
 Embeds a frame inline with other elements
 Content-adding elements
Problems with Frames
1. Usability Challenges
o Not well-suited for responsive websites
o Difficult on mobile devices and tablets
2. Accessibility Challenges
o Screen readers have difficulty understanding
o Assistive technologies struggle with frames
3. Design Issues
o Presentation tasks should be handled with CSS
o Trends separate content from presentation
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
<frameset cols="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
 * 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:
1. Styling within each frame - Defined in source document
2. Styling the frameset - Defined in parent document
Styling Frame Source Documents
 Add styles to each document individually
 Use external stylesheets, internal or inline styles
Styling & Formatting the Frameset
 Sizing Frames: Pixels or percentages
html
<frameset rows="150px,*">
 Prevent Resizing: Add noresize attribute
html
<frame noresize src="frame_1.html">
 Formatting Margins: marginheight attribute
 Formatting Borders: frameborder attribute
Targeting Frames with Links
1. Assign name attribute to targeted frame
2. Use target attribute in anchor element
3. Link opens in targeted frame
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:
 _blank - New window/tab
 _top - Reload entire page
Making Frames Responsive
Recommendation: Since frames are obsolete, plan a redesign without frames.
Interim solutions:
 Use rows rather than columns
 Avoid frames on small screens
Future of Frames
 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
4.4 CREATING FORM USING MARKUP LANGUAGE
What is HTML Form?
The <form> element collects input data with interactive controls. Forms contain input elements like:
 Text
 Email
 Number
 Radio buttons
 Checkboxes
 Submit buttons
Purpose: Collect data from users (e.g., shipping address, payment details)
Form Elements
Basic Syntax:
html
<form>
<!--form elements-->
</form>
Common Form Elements:
 <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
 <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
Textbox:
html
<input type="text">
Or shorthand: <input>
Password:
html
<input type="password">
Radio Button:
html
<input type="radio" name="gender" value="male">
 Must share same name to be treated as a group
 Value is sent to server on submit
Checkbox:
html
<input type="checkbox" name="language" value="english">
 Square box to tick
 Choose multiple options at once
Combobox (Drop-Down):
html
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
Submit Button:
 html
<button type="submit">Submit</button>
TextArea:
html
<textarea name="address">content</textarea>
 Multi-line text input
 Unlimited characters
 Fixed-width font
 Size controlled by rows and cols attributes
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>
</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:
 Frames are layout-defining elements that split the browser window into multiple frames, each with its own
content.
 Iframes are content-adding elements that embed a frame directly inline with other elements of a webpage.
 Frames use <frameset> and <frame> elements (now obsolete in HTML5), while iframes use
the <iframe> element.
2. Differentiate between form and frame:
 Form collects input data from users, containing interactive controls like text fields, radio buttons, checkboxes,
and submit buttons.
 Frame divides the browser window into multiple sections, each displaying a different HTML document.
 Forms are for data collection and submission, while frames are for layout and display of multiple documents
simultaneously.
UNIT FIVE: TEST WEBSITE
5.1 TESTING WEB PAGE CONTENT FOR CONSISTENCY
Understanding Functional Testing
Definition: Functional testing checks if software is fulfilling the functions it was designed for. Input is submitted,
and output is compared with specific requirements.
Key Concept: This is "black box testing" - testers don't need coding expertise.
Testable Functions
Usability Testing:
 How straightforward is it for users to move from page to page?
 Navigation usability
 Common barriers:
o Inconsistent formatting
o Unintuitive menu behavior
o Poor performance
o Bad page load speeds
Accessibility Testing:
 Check if accessibility goals have been met
 Identify unforeseen issues with page presentation
 Error Condition Testing:
 Example: Entering incorrect URL
 Site serves 404 error page
 Error conditions are a function of a website
How to Handle Functional Testing
Step 1: Know what functions are being tested
Step 2: Determine input data needed
Step 3: Calculate anticipated outcome based on input values
Step 4: Follow through with testing (manual or automated)
Step 5: Compare results with expected results
Example: Testing Login Function
 Input: Login details and interactions
 Expected Outcome: Smooth login and progress to target page
 Result: If actual matches expected → all is well
 If something goes wrong → point of comparison for troubleshooting
5.2 TESTING ELEMENTS OF WEBSITE CONTENT ACROSS DIFFERENT BROWSERS AND
BROWSER VERSIONS
What is Cross Browser Testing?
Testing your website across multiple:
 Browsers
 Screen sizes
 Operating systems
 Mobile devices
Purpose: Ensure your site works correctly and looks good for all visitors
Browser Market Share
 Chrome: 69% desktop, 64% mobile
 Firefox, Safari, Edge, Opera still used by millions
Why Test Across Browsers?
 All browsers use different code
 Different browsers may handle website elements differently
 Website may look different across browsers
 Miss out on visitors if site doesn't work on their browser
 Issues may go unnoticed for months
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
 Live testing and screenshot features
 Paid service with free trial (100 minutes)
 Select operating system and browser
 "Screenshots" tab for multiple screen grabs at once
 Mac, Windows, Android, iOS devices
 Compare layout differences
 Pricing: From $29/month (billed annually)
2. BrowserStack
 Cross-browser and cross-platform testing
 Free trial: 30 minutes interactive, 100 minutes automated, 5000 screenshots
 Live testing and screenshots
 Virtual emulator with actual browser window
 Pricing: From $29/month (billed annually)
3. LambdaTest
 Live and screenshot testing
 Free lifetime plan: 60 minutes browser testing, 10 responsive tests/screenshots/month
 Complete control over devices and browsers
 Pricing: From $15/month (billed annually)
 $99/month for mobile browser testing
4. WordPress Theme Customizer
 Built into every WordPress installation
 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
 Minor Differences: Ignore if they don't impact user experience, aesthetics, or functionality
Major Differences: Need attention if they:
 Affect user experience
 Look unpleasant
 Prevent users from using website as intended
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
What is WCAG?
Web Content Accessibility Guidelines (WCAG)
 Internationally recognized standard
 Created by World Wide Web Consortium (W3C)
 Explains how developers can make web content more accessible
 Covers: physical, visual, speech, auditory, language, learning, cognitive, and neurological disabilities
 Also helps elderly adults whose abilities are changing with age
Who is WCAG Intended For?
Group 1: Developing Group
 Web content developers (page authors, site designers)
 Tool developers responsible for web authors
 Tool developers responsible for web accessibility evaluation
 Testers who check standards for web and mobile accessibility
Group 2: Business Decision-Makers
 Policymakers with knowledge of legal aspects
 Managers aware of customer and company expectations
 Researchers who work on customer behavior
 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:
o Audio files for visually impaired
o Text files for deaf and hard of hearing
 Example: Netflix subtitles include explanation of background sounds
How to Implement:
 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
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
How to Implement:
 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
 Don't confuse creativity with confusion
How to Implement:
 Make text readable and understandable
 Make content appear and operate in predictable ways
 Help users avoid and correct mistakes
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!
How to Implement:
 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:
 WAVE Web Accessibility Evaluation Tool
 Axe Accessibility Checker
 Google Lighthouse
 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:
1. Identify functions to test - Know what functions are being tested
2. Determine input data - Identify the 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 features: content authoring, interactivity, templates, content management,
collaboration, assessment, accessibility, publishing, administration, support
 Install WordPress via hosting with 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]
 Use FTP, File Manager, or cPanel to access files
 Maintain directory structure for security and functionality
 Save files in appropriate directories
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