Unit Three: Add content to web

pages

Web Development and Dtabase Administration Level-II

Based on March 2022, Curriculum Version 1

Compiled By: Debi L. @Asella

Objectives
 This learning guide is developed to provide
you the necessary information regarding
the following content coverage and topics:
 Inserting and formatting text content
 Inserting images, data tables and simple forms
in a web page
 Accessing markup language code and making
basic modifications to the code

2 ________________________________
Compiled By: Debi L. @Asella
Inserting and Formatting Text Content
 Ease of Adding Content in WordPress
 Simple to add and edit content without coding.
 Supports pasting text from Word files or typing
directly.
 Adding Text
 WordPress Content Editor:
 Two tabs: Visual Editor and Text Editor.
 Visual Editor: User-friendly for most users.
 Text Editor: Useful for viewing and editing
HTML or Shortcodes.

3 Compiled By: Debi L. @Asella

 Cont..
 Formatting Text
 Similar to word processing:
 Highlight text to style (bold, italic, lists, links).
 Headings:
 Use pre-defined heading styles (H1 to H6) for better
SEO and accessibility.
 H1 is typically reserved for the main page title.
 Using Special Characters
 Insert special characters not available on the keyboard
(e.g., ©, foreign language symbols).
 Distraction-Free Writing Mode
 Activate this mode to hide unnecessary screen elements.
 Focus on content creation and editing.
4 Compiled By: Debi L. @Asella
Steps

5 Compiled By: Debi L. @Asella

Editing Tips for WordPress Content
 Single Spacing
 Use the Enter key to control spacing between paragraphs.
 Useful for formatting addresses or lists without extra
spacing.
 Advanced Editor
 Enhance editing tools with the TinyMCE Advanced plugin.
 Install via the Plugins option in the admin panel.
 Customize settings under the Settings tab after installation.
 Indent Tool
 Useful for formatting and separating sections of content
easily.
 Nested Bullet Lists
 Create outlines with nested lists (e.g., 1, 2, 3.1, 3.2).

6 Compiled By: Debi L. @Asella

 Cont..
 Saving and Publishing Options
 Save Draft: Save work for later editing or future publication.
 Preview: View content without saving; not a saving option.
 Publish: Make your post live on the website.
 Move to Trash: Delete a post or page.
 Additional Options
 Status & Visibility:
 Change article status (Draft, Pending Review, Published).
 Control visibility (Public, Password Protected, Private).
 Schedule a specific publish date/time.
 After publishing:
No "Save Draft" option.

 "Preview" changes to "Preview Changes."
 "Publish" changes to "Update."
 Consistency in Formatting
 7Maintain uniform type andCompiled By: Debi L. @Asella
text formatting throughout your content.
Consistent Text Formatting and Type
Treatment

 Importance of Consistency
 Consistent formatting enhances documentation and
design.
 Improves readability through intuitive use of formatting,
colors, alignment, spacing, and punctuation.
 Text Highlighting Conventions
 Bold:
 Use <b> in HTML or ** in Markdown.
 Prefer double asterisks for clarity in Markdown.
 Italic:
 Use <i> in HTML or _ in Markdown for emphasis on key
terms.
 A single asterisk * can also be used in Markdown.

8 Compiled By: Debi L. @Asella

Cont..
 Underline:
 Do not use underline for emphasis.
 Strikethrough:
 Avoid strikethrough in text.
 Code Text:
 Use <code> in HTML or ` in Markdown for inline code.
 Use <pre> in HTML or ``` in Markdown for code blocks.
 Quotation Marks and Capitalization
 Use American English style for quotation marks.
 Follow standard US capitalization rules; use sentence case for
headings and titles.
 Font Usage
 Avoid overriding global styles for font type, size, or color.
 Ensure typography is clear, legible, and aesthetically pleasing.

 Formatting Common Text Elements

9  Maintain consistent styling for By:
Compiled all Debi
textL.elements
@Asella to enhance
Inserting Images, Data Tables, and Simple
Forms
 Spaces Between Sentences
 Leave only one space between sentence-ending punctuation and
the first character of the next sentence.
Adding Images to Posts or Pages
 Classic Editor:
 Learn to add images from your computer, other websites, or your
Media Library.
 Block Editor:
 Refer to specific guides for adding images in the block editor.

Adding Tables in WordPress Posts and Pages

 No HTML Required:
 Easily create tables to display data clearly and effectively.
Creating a Simple Contact Form
 Importance of Contact Forms:
 Essential for allowing visitors to reach out about products or
services.
 Adding Contact Forms:
10 While Compiled By: Debi L. @Asella
WordPress doesn’t have a built-in contact form, you can
Accessing and Modifying WordPress
Code
 Editing WordPress Code for Customization
 Block Editor & Classic Editor:
 Both allow editing of HTML code for individual posts and
pages.
 Theme Source Code:
 Use a child theme for safe modifications.
 Managing Code Snippets:
 Consider plugins for managing snippets in the <head> or
functions.php file.
 Adding Custom CSS
 Use the Additional CSS area in the WordPress Customizer.
 Alternatively, use plugins like Simple CSS for custom styles.
 Editing HTML for Specific Blocks
 Need to modify HTML directly (e.g., adding a nofollow tag)?
 Be cautious when editing source code to avoid potential issues.

11 Compiled By: Debi L. @Asella