Html Module 43

  Module 43: HTML in Content Management Systems (CMS)

Introduction

Content Management Systems (CMS) like WordPress, Joomla, and Drupal provide user-friendly interfaces for managing website content. However, understanding how HTML integrates with these platforms is crucial for customizing content, improving layout, and troubleshooting issues. This module explores how HTML is used within CMSs, customization techniques, and practical exercises to reinforce learning.

 1: Understanding CMS and the Role of HTML

What is a CMS?

A CMS is a software application that allows users to create, manage, and modify digital content without needing extensive coding knowledge. Popular CMS platforms include:

WordPress (Most popular, user-friendly, extensive plugin support)

Joomla (More flexible, suitable for advanced users)

Drupal (Highly customizable, used for complex sites)

How HTML Works in CMS

While CMS platforms provide WYSIWYG (What You See Is What You Get) editors, HTML is still essential for:

Customizing page structure

Embedding multimedia content

Fixing layout issues

Enhancing SEO with semantic HTML

Example: Basic HTML in CMS Editor

If you're writing a blog post in WordPress and need to format text manually, you can switch to the HTML (Text) editor and use:

<p><strong>Welcome to my blog!</strong> This is an introduction.</p>

<img src="image.jpg" alt="Blog image">

This ensures your content displays correctly across devices.

 2: Editing HTML in Different CMS Platforms

1. WordPress

WordPress allows editing HTML through:

Block Editor (Gutenberg) – Add HTML blocks

Classic Editor – Switch to "Text" mode

Theme Editor – Modify header.php, footer.php, style.css

Example: Adding Custom HTML in WordPress

Open a new post/page in WordPress.

Switch to the "Text" (HTML) editor.

Enter the following HTML:

<h2>My Custom Section</h2>

<p>This section is customized using HTML.</p>

<a href="https://example.com">Visit My Website</a>

Save and preview the page.

2. Joomla

Joomla uses TinyMCE Editor, but you can switch to the "Code" mode to insert HTML.

Custom HTML modules allow adding HTML code anywhere on the site.

Example: Creating a Custom HTML Module in Joomla

Go to Extensions > Modules in Joomla.

Click New and select Custom HTML.

Enter your custom HTML:

<div style="background-color:lightgrey; padding:10px;">

  <h3>Special Offer!</h3>

  <p>Sign up today and get a free gift.</p>

</div>

Assign the module to a position and save.

3. Drupal

Drupal allows HTML editing in its CKEditor.

Custom HTML blocks can be added through the "Structure > Block Layout" section.

Example: Adding Custom HTML Block in Drupal

Go to Structure > Block Layout > Custom Block Library.

Click Add Custom Block and select Basic HTML Block.

Enter your HTML:

<div class="announcement">

  <h2>Latest News</h2>

  <p>Stay updated with our latest announcements.</p>

</div>

Save and assign it to a region.

 3: Customizing CMS Themes with HTML

1. Editing WordPress Themes

Navigate to Appearance > Theme Editor.

Modify header.php, footer.php, and style.css.

Example: Adding a Custom Footer in WordPress

Go to Appearance > Theme Editor > footer.php.

Add this code before </body> tag:

<footer>

  <p>&copy; 2025 MyWebsite. All rights reserved.</p>

</footer>

Save changes and refresh the site.

2. Customizing Joomla Templates

Joomla templates are edited via Templates > Styles > Customize.

Example: Adding a Banner Section in Joomla

Open index.php in the template editor.

Add:

<div class="custom-banner">

  <h2>Welcome to Our Website</h2>

</div>

Save and refresh the site.

3. Modifying Drupal Themes

Drupal themes are edited in templates and theme files.

Example: Creating a Custom Block Region in Drupal

Edit page.html.twig in your theme folder.

Add:

<div class="custom-region">

  {{ page.custom_content }}

</div>

Save and assign content to this region.

 4: Practical Exercises

Exercise 1: Adding a Call-to-Action Box

Objective: Customize a page in any CMS by adding an HTML call-to-action box.

Steps:

Open a post or custom HTML block in your CMS.

Insert the following code:

<div style="border: 2px solid #ff9800; padding: 10px; text-align: center;">

  <h2>Join Our Newsletter!</h2>

  <p>Subscribe for exclusive updates and offers.</p>

  <button style="background-color:#ff9800; color:white; padding:10px; border:none;">Subscribe Now</button>

</div>

Save and preview your page.

Exercise 2: Creating a Responsive Table in CMS

Objective: Display tabular data neatly using HTML.

Steps:

Open your HTML editor in WordPress, Joomla, or Drupal.

Insert:

<table style="width:100%; border-collapse: collapse;">

  <tr>

    <th style="border: 1px solid black; padding: 10px;">Product</th>

    <th style="border: 1px solid black; padding: 10px;">Price</th>

  </tr>

  <tr>

    <td style="border: 1px solid black; padding: 10px;">Laptop</td>

    <td style="border: 1px solid black; padding: 10px;">$1000</td>

  </tr>

</table>

Save and check responsiveness.

Lesson 5: Debugging and Optimizing HTML in CMS

1. Debugging Common HTML Issues

Broken layouts: Check unclosed <div> or <p> tags.

Slow performance: Remove unnecessary inline styles.

Mobile issues: Use responsive design (<meta viewport>).

2. Best Practices for HTML in CMS

✅ Use semantic HTML (<section>, <article>, <aside>)

✅ Optimize images (<img src="image.jpg" alt="description">)

✅ Use CSS instead of inline styles for consistency

Conclusion & Next Steps

Mastering HTML in CMS allows greater customization and problem-solving ability. Keep experimenting with custom modules, blocks, and theme edits to enhance your website's functionality.

Next Steps:

Try modifying an entire template.

Integrate Bootstrap for improved styling.

Explore adding JavaScript interactions within HTML elements.

Would you like a quiz or further advanced exercises on this topic?