BUILD SIMPLE WEBSITES USING COMMERCIAL PROGRAMS
UNIT 1: IDENTIFY AUTHORING REQUIREMENTS
1.1 Identifying Client Requirements
Four Elements of Customer-First Strategy
1. Identify what customers want
2. Distribute feedback throughout organization
3. Create features based on customer feedback
4. Collect further feedback on changes
How to Identify Customer Needs
Focus Groups: Interview target audience representatives
Social Listening: Monitor conversations, keywords, pain points
Keyword Research: Find what audience searches for
1.2 Selecting Authoring Tools
What is an Authoring Tool?
Software enabling users to create content, lessons, courses using text, media, interactions. No technical
programming needed.
Key Features
Feature Purpose
Content Authoring Add/edit slides, images, text, video, audio
Interactivity Drag & drop, matching, sliders, scenarios
Templates & Theme Consistent design, branding
Content Management Organize assets, media, libraries
Collaboration Review, co-authoring, sharing
Assessment Quizzes, tracking, scoring
Accessibility WCAG 2.0, keyboard navigation, captions
Publishing HTML5, SCORM, xAPI, AICC
Feature Purpose
Administration Language, workspace, permissions
Support & Training Community, chat, tutorials
How to Choose
Consider user expertise (novice vs. expert)
Match features to project needs
1.3 Installing WordPress
Method 1: Host with Pre-installed WordPress
Bluehost ($2.75/month), SiteGround ($2.99/month)
Immediate access, no installation needed
Method 2: cPanel Autoinstaller
1. Login to cPanel
2. Find WordPress autoinstaller
3. Click "Install Now"
4. Enter domain, site settings, admin credentials
5. Access at [Link]/wp-admin
Method 3: Manual FTP Installation
1. Download WordPress from [Link]
2. Upload to public_html via FTP
3. Create MySQL Database and User
4. Configure [Link]
5. Run WordPress install
Method 4: Localhost Installation
WAMP, XAMPP, or "Local" tool
Sandbox environment for learning
1.4 Setting Preferences
Site Editor Preferences
Spotlight Mode: Focus on current block
Show button text labels: Replace icons with text
Post/Page Editor Preferences
General:
Pre-publish checklist
Reduce interface
Display button labels
Use theme styles
Display block breadcrumbs
Blocks:
Show most used blocks
Contain text cursor inside block
Panels:
Permalink, Template, Categories, Tags
Featured image, Excerpt, Discussion
UNIT 2: CREATE AND SAVE FILES
2.1 WordPress File Structure
Accessing Files
FTP Client (FileZilla)
File Manager (cPanel)
Root Directory Contents
Core Folders:
Folder Purpose
wp-admin Admin dashboard
wp-content Uploads, plugins, themes
wp-includes Core software
Configuration Files:
File Purpose
.htaccess Permalinks, redirects (Apache)
[Link] Database connection, security keys
[Link] Loads WordPress files
wp-content Folder
themes/ - Theme files
plugins/ - Plugin files
uploads/ - Media (organized by year/month)
languages/ - Language files
upgrade/ - Temporary upgrade folder
2.2 Navigating Dashboard
Key Areas
Installing WordPress
Dashboard navigation
Publishing content
Installing plugins and themes
Optimizing performance
Securing WordPress
2.3 Accessing Features
Basic Features
1. Views: Standard, Code, Split
2. Headings: H1-H6 for structure
3. Links: Insert Hyperlink
4. Images: Insert Picture, add alt text
2.4 Maintaining Directory Structure
Why It Matters
Essential for site functioning
Proper organization prevents security issues
Aids troubleshooting
Helps with backups and migration
2.5 Saving in Correct Directory
Core Files in Root
[Link], [Link], [Link]
[Link], [Link]
[Link], [Link]
[Link], [Link], [Link]
Database Tables
Table Purpose
wp_posts All content types
wp_users User accounts
wp_comments Comments
wp_options Site settings
wp_terms Categories, tags
Best Practices
Always backup before editing
Use child themes for modifications
Keep wp-includes files untouched
UNIT 3: ADD CONTENT TO WEB PAGES
3.1 Inserting Text Content
Adding Text
Paste from Word or type directly
Visual Editor (WYSIWYG) or Text Editor (HTML)
Formatting
Bold, Italic, Lists, Alignment, Links
Headings
H1 (page title) to H6 (subheadings)
Better for SEO and accessibility
Publishing Options
Option Description
Save Draft Save without publishing
Preview View before publishing
Publish Make live on website
Move to Trash Delete content
Option Description
Text Formatting Conventions
Bold: UI elements, notices
Italic: Key terms, emphasis
Underline/Strikethrough: Don't use
Code: Inline code, user input
Code Blocks: Code examples
3.2 Inserting Images, Tables, Forms
Adding Images
1. Place cursor
2. Drag from computer OR click Add Media
3. Select from Media Library or Upload
4. Set alignment (Left, Center, Right, None)
Data Tables
Creating with Supsystic Plugin:
1. Add new table with name, rows, columns
2. Add data in Editor tab
3. Insert images/video via "Insert Media"
4. Insert links via "Create a link"
5. Click Save
Contact Forms (WPForms)
Steps:
1. Install WPForms plugin
2. Create form via WPForms > Add New
3. Use template (e.g., Simple Contact Form)
4. Configure notifications and confirmations
5. Add to page using WPForms block
6. Add to sidebar via Widgets
Benefits:
Spam protection
Consistent information
Saves time
3.3 Accessing Markup Language
Edit HTML in Block Editor
1. Custom HTML block: Add HTML code
2. Edit as HTML: Edit individual block
3. Code Editor: Edit entire post
Edit HTML in Classic Editor
Click "Text" tab to edit HTML directly
Edit Theme Source Code
1. In-Dashboard: Appearance > Theme Editor
2. SFTP: Edit via FTP client
Add Custom CSS
1. Customizer: Appearance > Customize > Additional CSS
2. Simple CSS Plugin: Similar to Customizer
3. Custom Stylesheet: For extensive CSS
Best Practice: Always backup before editing code!
UNIT 4: CREATE SIMPLE NAVIGATION
4.1 Sitemap
What is a Sitemap?
File with information about pages, posts, files and their relationships. Used by search engines for crawling.
Benefits
Helps search engines discover content
Optimizes non-HTML content
Detects broken links
Creating Sitemap (All in One SEO)
1. Install plugin
2. Sitemap enabled by default
3. Verify at [Link]/[Link]
4. Configure settings (content types, archives)
4.2 Creating Links
Types of Links
Internal: Same website
External: Other websites
Anchor/Bookmark: Same page
Image Links: Clickable images
Creating Text Links
1. Highlight text
2. Click link icon
3. Enter URL or search for page
4. Click Apply
Creating Image Links
1. Select image in editor
2. Click paper clip icon
3. Search for page or paste URL
4. Options: Media File, Attachment Page
Opening Links in New Tab
Search engines discourage forcing new tabs
Users can right-click to open new tab
4.3 Frames (Obsolete)
Frame vs Iframe
Frame Iframe
Layout-defining Content-adding
Splits browser window Embeds inline
Frame Creation
html
<frameset cols="*,*,*,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
Attributes
cols/rows: Column/row sizes
noresize: Prevent resizing
frameborder="0": Remove borders
name: Target for links
Problems
Not responsive
Accessibility issues
Obsolete in HTML5
Recommendation: Don't use frames; redesign without them.
4.4 HTML Forms
Form Syntax
html
<form>
<!-- form elements -->
</form>
Common Elements
Element Purpose
<input type="text"> Single-line text
<input type="password"> Password input
<input type="radio"> Radio button (choose one)
<input type="checkbox"> Checkbox (choose multiple)
<select> Drop-down menu
<textarea> Multi-line text
<button type="submit"> Submit button
Example Registration Form
html
<form>
<fieldset>
<legend>Personal Information</legend>
<label>First Name: <input type="text"></label>
<label>Email: <input type="email"></label>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label>Address:</label>
<textarea rows="4" cols="50"></textarea>
<button type="submit">Submit</button>
</fieldset>
</form>
UNIT 5: TEST WEBSITE
5.1 Functional Testing
What is Functional Testing?
Checks if software fulfills its designed functions. "Black box testing" - no coding expertise needed.
Testable Functions
Usability: Navigation, formatting, performance
Accessibility: Goals met, unforeseen issues
Error Conditions: 404 pages, error handling
Testing Process
1. Identify functions
2. Determine input data
3. Calculate expected outcome
4. Execute tests
5. Compare results
5.2 Browser Testing
Why Test Across Browsers?
Different browsers use different code
Site may look different across browsers
Miss visitors if site doesn't work on their browser
Finding Visitor Browser Data
Use Google Analytics
Check Audience > Technology > Browser & OS
Check Mobile > Devices
Cross Browser Testing Tools
Tool Features Price
CrossBrowserTesting Live testing, screenshots From $29/month
BrowserStack Live testing, screenshots From $29/month
LambdaTest Live, responsive, screenshots From $15/month
WordPress Customizer Responsive preview Free
Analyzing Results
Minor differences: Ignore if not affecting UX
Major differences: Fix CSS issues
5.3 Accessibility (WCAG)
What is WCAG?
Web Content Accessibility Guidelines - International standard for making web content accessible to people with
disabilities.
Who Needs It?
People with physical, visual, speech, auditory, cognitive, learning, neurological disabilities
Elderly with changing abilities
Over 1 billion people globally
P.O.U.R. Principles
Principle Meaning Implementation
Perceivable Content visible to all senses Alt text, captions, multiple formats
Operable Can be used with any device Keyboard navigation, enough time
Understandable Easy to comprehend Clear language, predictable behavior
Robust Works with all technologies Compatible with all browsers/devices
WCAG Intended For
1. Developing Group: Designers, developers, testers
2. Decision-Makers: Policymakers, managers, researchers
Testing Accessibility
Manual: Keyboard navigation, screen readers, contrast
Automated: WAVE, Axe, Lighthouse
SELF-CHECK ANSWERS
Unit 1
1. True, 2. True, 3. True
2. E (None), 2. A (Keyword research), 3. B (Administration)
Unit 2
1. True, 2. True, 3. True, 4. True, 5. True
Matching: 1-B, 2-D, 3-E, 4-A, 5-C
Unit 3
1. True, 2. True, 3. True, 4. True
Text formatting conventions: Bold, Italic, Underline (don't use), Strikethrough (don't use), Code, Code Blocks
Unit 4
1. True, 2. True, 3. True, 4. True, 5. True
Iframe vs Frame: Iframe embeds inline; Frame splits browser window
Form vs Frame: Form collects data; Frame divides page layout
Unit 5
Matching: 1-A, 2-B, 3-C, 4-D
Functional testing process: 1) Identify functions, 2) Determine input, 3) Calculate expected outcome, 4) Execute
tests, 5) Compare results
QUICK REFERENCE
Topic Key Points
Installation Host pre-install, cPanel, FTP, Localhost
File Structure wp-admin, wp-content, wp-includes
Content Text, Images, Tables, Forms
Navigation Sitemaps, Links, Frames, Forms
Testing Functional, Browser, Accessibility (WCAG)